nullndr/website
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: code refactor

Browse Source
This commit is contained in:
Andrea 2024-02-05 19:03:39 +01:00
parent 2e879d9c00
commit fa60885d85
No known key found for this signature in database
GPG Key ID: 4594610B9C8F91C5
7 changed files with 38 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/Body.tsx
View File

@ -1,6 +1,6 @@
export function Body({ children }: React.PropsWithChildren) { export function Body({ children }: React.PropsWithChildren) {
return ( return (
<body className="bg-[#202020] text-[#d6d6d6] font-['monospace']"> <body className="bg-[#222447] text-[#d6d6d6] font-['monospace']">
{children} {children}
</body> </body>
); );

2
app/components/Title.tsx
View File

@ -1,6 +1,6 @@
export function Title({ children }: React.PropsWithChildren) { export function Title({ children }: React.PropsWithChildren) {
return ( return (
<div className="mt-5 mx-3 w-full flex flex-col items-center"> <div className="mt-5 w-full flex flex-col items-center">
<div className="text-[#ffff00] font-bold text-2xl"> <div className="text-[#ffff00] font-bold text-2xl">
<span>{children}</span> <span>{children}</span>
</div> </div>

29
app/routes/blog.$name.tsx
View File

@ -1,4 +1,4 @@
import type { LoaderFunctionArgs } from "@remix-run/node"; import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react"; import { useLoaderData } from "@remix-run/react";
import { getMDXComponent } from "mdx-bundler/client/index.js"; import { getMDXComponent } from "mdx-bundler/client/index.js";
import React from "react"; import React from "react";
@ -20,6 +20,29 @@ export const loader = async ({ params }: LoaderFunctionArgs) => {
return getMdxFile(name); return getMdxFile(name);
}; };
export const meta: MetaFunction<typeof loader> = ({ data }) => {
if (data == null) {
return [];
}
const {
frontmatter: { title, description },
} = data;
return [
{
title,
},
{
property: "og:title",
content: title,
},
{
property: "description",
content: description,
},
];
};
export default function () { export default function () {
const { const {
code, code,
@ -28,13 +51,13 @@ export default function () {
const MdxComponent = React.useMemo(() => getMDXComponent(code), [code]); const MdxComponent = React.useMemo(() => getMDXComponent(code), [code]);
return ( return (
<> <div className="space-y-5">
<Title>{title}</Title> <Title>{title}</Title>
<BlogWrapper> <BlogWrapper>
<div className="dark:prose-invert prose-a:no-underline prose-a:font-bold prose-a:text-[#ffff00] prose-p:text-[#d6d6d6]"> <div className="dark:prose-invert prose-a:no-underline prose-a:font-bold prose-a:text-[#ffff00] prose-p:text-[#d6d6d6]">
<MdxComponent /> <MdxComponent />
</div> </div>
</BlogWrapper> </BlogWrapper>
</> </div>
); );
} }

4
app/routes/blog._index/EmptyState.tsx
View File

@ -1,7 +1,7 @@
export function EmptyState() { export function EmptyState() {
return ( return (
<div className="mt-5 mx-5 flex flex-col items-center"> <div className="mx-5 flex flex-col items-center">
<div className="mb-5 font-bold"> <div className="font-bold">
I haven't post anything yet! So here's a pic of my cat I haven't post anything yet! So here's a pic of my cat
</div> </div>
<img src="/cat.jpg" className="rounded-md" /> <img src="/cat.jpg" className="rounded-md" />

8
app/routes/blog._index/Post.tsx
View File

@ -11,8 +11,8 @@ type PostProps = {
export function Post({ title, description, filename, published }: PostProps) { export function Post({ title, description, filename, published }: PostProps) {
return ( return (
<BlogWrapper> <BlogWrapper>
<div className="p-5 text-center font-bold border-gray-600 border-2 rounded-lg"> <Link to={filename}>
<Link to={filename}> <div className="p-5 text-center font-bold border-gray-600 border-2 rounded-lg">
<span className="text-[#ffff00] hover:text-[#e6c2bf] text-2xl"> <span className="text-[#ffff00] hover:text-[#e6c2bf] text-2xl">
{title} {title}
</span> </span>
@ -20,8 +20,8 @@ export function Post({ title, description, filename, published }: PostProps) {
published, published,
).toLocaleDateString()})`}</span> ).toLocaleDateString()})`}</span>
{description && <div className="mt-5 text-xl">{description}</div>} {description && <div className="mt-5 text-xl">{description}</div>}
</Link> </div>
</div> </Link>
</BlogWrapper> </BlogWrapper>
); );
} }

4
app/routes/blog._index/route.tsx
View File

@ -16,13 +16,13 @@ export const loader = () => {
export default function () { export default function () {
const posts = useLoaderData<typeof loader>(); const posts = useLoaderData<typeof loader>();
return ( return (
<> <div className="space-y-5">
<Title>Here I blog about whatever get my attention</Title> <Title>Here I blog about whatever get my attention</Title>
{posts.length > 0 ? ( {posts.length > 0 ? (
posts.map((post, i) => <Post {...post} key={i} />) posts.map((post, i) => <Post {...post} key={i} />)
) : ( ) : (
<EmptyState /> <EmptyState />
)} )}
</> </div>
); );
} }

3
app/routes/blog/route.tsx
View File

@ -1,4 +1,5 @@
import { Link, Outlet } from "@remix-run/react"; import { Link } from "@remix-run/react";
import { Outlet } from "react-router-dom";
import { LinkWrapper } from "~/components/LinkWrapper"; import { LinkWrapper } from "~/components/LinkWrapper";
import { useMatch } from "./useMatch"; import { useMatch } from "./useMatch";