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) {
return (
<body className="bg-[#202020] text-[#d6d6d6] font-['monospace']">
<body className="bg-[#222447] text-[#d6d6d6] font-['monospace']">
{children}
</body>
);

2
app/components/Title.tsx
View File

@ -1,6 +1,6 @@
export function Title({ children }: React.PropsWithChildren) {
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">
<span>{children}</span>
</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 { getMDXComponent } from "mdx-bundler/client/index.js";
import React from "react";
@ -20,6 +20,29 @@ export const loader = async ({ params }: LoaderFunctionArgs) => {
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 () {
const {
code,
@ -28,13 +51,13 @@ export default function () {
const MdxComponent = React.useMemo(() => getMDXComponent(code), [code]);
return (
<>
<div className="space-y-5">
<Title>{title}</Title>
<BlogWrapper>
<div className="dark:prose-invert prose-a:no-underline prose-a:font-bold prose-a:text-[#ffff00] prose-p:text-[#d6d6d6]">
<MdxComponent />
</div>
</BlogWrapper>
</>
</div>
);
}

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

@ -1,7 +1,7 @@
export function EmptyState() {
return (
<div className="mt-5 mx-5 flex flex-col items-center">
<div className="mb-5 font-bold">
<div className="mx-5 flex flex-col items-center">
<div className="font-bold">
I haven't post anything yet! So here's a pic of my cat
</div>
<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) {
return (
<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">
{title}
</span>
@ -20,8 +20,8 @@ export function Post({ title, description, filename, published }: PostProps) {
published,
).toLocaleDateString()})`}</span>
{description && <div className="mt-5 text-xl">{description}</div>}
</Link>
</div>
</div>
</Link>
</BlogWrapper>
);
}

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

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