diff --git a/app/routes/blog/EmptyState.tsx b/app/components/EmptyState.tsx similarity index 100% rename from app/routes/blog/EmptyState.tsx rename to app/components/EmptyState.tsx diff --git a/app/components/Link.tsx b/app/components/Link.tsx deleted file mode 100644 index a4805ed..0000000 --- a/app/components/Link.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { Link as RemixLink } from "@remix-run/react"; - -type LinkProps = React.PropsWithChildren<{ to: string }>; - -export function Link({ to, children }: LinkProps) { - return ( - - {children} - - ); -} diff --git a/app/routes/blog/Post.tsx b/app/components/Post.tsx similarity index 89% rename from app/routes/blog/Post.tsx rename to app/components/Post.tsx index e7585d7..ee8be3c 100644 --- a/app/routes/blog/Post.tsx +++ b/app/components/Post.tsx @@ -13,7 +13,7 @@ export function Post({ title, description, id, createdAt }: PostProps) {
- + {title} {`(${new Date( @@ -21,7 +21,7 @@ export function Post({ title, description, id, createdAt }: PostProps) { ).toLocaleDateString()})`}
{description && ( -
+
{description}
)} diff --git a/app/components/Title.tsx b/app/components/Title.tsx new file mode 100644 index 0000000..0f340c9 --- /dev/null +++ b/app/components/Title.tsx @@ -0,0 +1,7 @@ +export function Title({ children }: React.PropsWithChildren) { + return ( +
+ {children} +
+ ); +} diff --git a/app/hooks/useMatch.ts b/app/hooks/useMatch.ts new file mode 100644 index 0000000..502d10f --- /dev/null +++ b/app/hooks/useMatch.ts @@ -0,0 +1,6 @@ +import { useMatches } from "@remix-run/react"; + +export function useMatch() { + const matches = useMatches(); + return matches[matches.length - 1]; +} diff --git a/app/routes/blog_.$id.tsx b/app/routes/blog.$id.tsx similarity index 67% rename from app/routes/blog_.$id.tsx rename to app/routes/blog.$id.tsx index 35fde27..9cdcc1f 100644 --- a/app/routes/blog_.$id.tsx +++ b/app/routes/blog.$id.tsx @@ -2,10 +2,15 @@ import type { LoaderArgs } from "@remix-run/node"; import { useLoaderData } from "@remix-run/react"; import { getMDXComponent } from "mdx-bundler/client"; import React from "react"; -import { Link } from "~/components/Link"; +import { Title } from "~/components/Title"; import { findPost } from "~/models/posts.server"; import { getMdxFile } from "~/utils/posts.server"; +export const handle = { + to: "/blog", + text: "Go Back", +}; + export const loader = async ({ params }: LoaderArgs) => { const id = params.id; if (id == null) { @@ -17,20 +22,20 @@ export const loader = async ({ params }: LoaderArgs) => { throw new Response(null, { status: 404 }); } - const { code } = await getMdxFile(post.path); + const { code } = await getMdxFile(post.fileName); return { post, code }; }; export default function () { const { post, code } = useLoaderData(); const MdxComponent = React.useMemo(() => getMDXComponent(code), [code]); + return ( -
- Go Back -
{post.title}
-
+ <> + {post.title} +
-
+ ); } diff --git a/app/routes/blog/route.tsx b/app/routes/blog._index.tsx similarity index 57% rename from app/routes/blog/route.tsx rename to app/routes/blog._index.tsx index c3dfb20..1072548 100644 --- a/app/routes/blog/route.tsx +++ b/app/routes/blog._index.tsx @@ -1,8 +1,13 @@ import { useLoaderData } from "@remix-run/react"; -import { Link } from "~/components/Link"; +import { Title } from "~/components/Title"; import { findPosts } from "~/models/posts.server"; -import { EmptyState } from "./EmptyState"; -import { Post } from "./Post"; +import { EmptyState } from "../components/EmptyState"; +import { Post } from "../components/Post"; + +export const handle = { + to: "/", + text: "Home", +}; export const loader = async () => { return findPosts(); @@ -11,11 +16,8 @@ export const loader = async () => { export default function () { const posts = useLoaderData(); return ( -
- Home -
- Here I blog about whatever get my attention -
+ <> + Here I blog about whatever get my attention {posts.length > 0 ? (
{posts.map((post, i) => ( @@ -25,6 +27,6 @@ export default function () { ) : ( )} -
+ ); } diff --git a/app/routes/blog.tsx b/app/routes/blog.tsx new file mode 100644 index 0000000..2827837 --- /dev/null +++ b/app/routes/blog.tsx @@ -0,0 +1,19 @@ +import { Link, Outlet } from "@remix-run/react"; +import { useMatch } from "~/hooks/useMatch"; + +export default function () { + const { handle } = useMatch(); + return ( +
+ {handle && ( + + {handle.text} + + )} + +
+ ); +} diff --git a/app/utils/posts.server.ts b/app/utils/posts.server.ts index bbcd4d3..11b6335 100644 --- a/app/utils/posts.server.ts +++ b/app/utils/posts.server.ts @@ -3,8 +3,8 @@ import { readFile } from "fs/promises"; import { bundleMDX } from "mdx-bundler"; import codeHikeTheme from "shiki/themes/one-dark-pro.json"; -export const getMdxFile = async (path: string) => { - const source = await readFile(path); +export const getMdxFile = async (fileName: string) => { + const source = await readFile(`posts/${fileName}`); return bundleMDX({ source: source.toString(), mdxOptions() { diff --git a/prisma/schema.prisma b/prisma/schema.prisma index 21f404d..aeb98b3 100644 --- a/prisma/schema.prisma +++ b/prisma/schema.prisma @@ -11,7 +11,7 @@ model Post { id String @id @default(cuid()) title String description String? - path String + fileName String isPublic Boolean @default(false) createdAt DateTime @default(now()) updatedAt DateTime @updatedAt diff --git a/tsconfig.json b/tsconfig.json index 7eeacdd..0f5ff80 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,7 +3,7 @@ "remix.env.d.ts", "**/*.ts", "**/*.tsx", - "app/routes/blog_.$id.tsx" + "app/routes/blog.$id.tsx" ], "compilerOptions": { "lib": ["DOM", "DOM.Iterable", "ES2019"],