diff --git a/app/components/Body.tsx b/app/components/Body.tsx index fcd0095..f9720e4 100644 --- a/app/components/Body.tsx +++ b/app/components/Body.tsx @@ -1,6 +1,6 @@ export function Body({ children }: React.PropsWithChildren) { return ( - + {children} ); diff --git a/app/components/Title.tsx b/app/components/Title.tsx index 43b1f42..af7db49 100644 --- a/app/components/Title.tsx +++ b/app/components/Title.tsx @@ -1,6 +1,6 @@ export function Title({ children }: React.PropsWithChildren) { return ( -
+
{children}
diff --git a/app/routes/blog.$name.tsx b/app/routes/blog.$name.tsx index 11b7425..43aec81 100644 --- a/app/routes/blog.$name.tsx +++ b/app/routes/blog.$name.tsx @@ -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 = ({ 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 ( - <> +
{title}
- +
); } diff --git a/app/routes/blog._index/EmptyState.tsx b/app/routes/blog._index/EmptyState.tsx index a9af499..1ba5bb7 100644 --- a/app/routes/blog._index/EmptyState.tsx +++ b/app/routes/blog._index/EmptyState.tsx @@ -1,7 +1,7 @@ export function EmptyState() { return ( -
-
+
+
I haven't post anything yet! So here's a pic of my cat
diff --git a/app/routes/blog._index/Post.tsx b/app/routes/blog._index/Post.tsx index c487729..3a83d7d 100644 --- a/app/routes/blog._index/Post.tsx +++ b/app/routes/blog._index/Post.tsx @@ -11,8 +11,8 @@ type PostProps = { export function Post({ title, description, filename, published }: PostProps) { return ( -
- + +
{title} @@ -20,8 +20,8 @@ export function Post({ title, description, filename, published }: PostProps) { published, ).toLocaleDateString()})`} {description &&
{description}
} - -
+
+ ); } diff --git a/app/routes/blog._index/route.tsx b/app/routes/blog._index/route.tsx index ec7d213..15f22a0 100644 --- a/app/routes/blog._index/route.tsx +++ b/app/routes/blog._index/route.tsx @@ -16,13 +16,13 @@ export const loader = () => { export default function () { const posts = useLoaderData(); return ( - <> +
Here I blog about whatever get my attention {posts.length > 0 ? ( posts.map((post, i) => ) ) : ( )} - +
); } diff --git a/app/routes/blog/route.tsx b/app/routes/blog/route.tsx index 4238082..e4907fc 100644 --- a/app/routes/blog/route.tsx +++ b/app/routes/blog/route.tsx @@ -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";