feat: add posts

app/models/posts.server.ts

@@ -0,0 +1,23 @@
+import { db } from "~/utils/db.server";
+
+export const findPosts = async () => {
+  return db.post.findMany({
+    select: {
+      id: true,
+      title: true,
+      description: true,
+      createdAt: true,
+    },
+    orderBy: {
+      createdAt: "desc",
+    },
+  });
+};
+
+export const findPost = async (id: string) => {
+  return db.post.findUnique({
+    where: {
+      id,
+    },
+  });
+};

app/root.tsx

@@ -1,3 +1,4 @@
+import codeHikeStyle from "@code-hike/mdx/dist/index.css";
 import type { LinksFunction, MetaFunction } from "@remix-run/node";
 import {
   Link,
@@ -12,6 +13,7 @@ import stylesheet from "~/tailwind.css";
 
 export const links: LinksFunction = () => [
   { rel: "stylesheet", href: stylesheet },
+  { rel: "stylesheet", href: codeHikeStyle },
 ];
 
 export const meta: MetaFunction = () => ({

app/routes/_index.tsx

@@ -8,6 +8,7 @@ import {
   FaTelegramPlane,
   FaTwitter,
 } from "react-icons/fa";
+import { IconContext } from "react-icons/lib";
 import { MdEmail } from "react-icons/md";
 
 export default function Index() {
@@ -18,37 +19,35 @@ export default function Index() {
           <span>$ echo "Hello, world!"</span>
           <span className="animate-blink">|</span>
         </div>
-        <nav className="flex justify-center flex-wrap">
-          {/*
-           * The component `IconProvider.Provider` doesn't work very well.
-           * I dunno way but I'm too lazy to search for the cause.
-           */}
-          <a rel="me" href="https://mastodon.uno/@nullndr" className="p-2">
-            <FaMastodon color="yellow" size="3em" />
-          </a>
-          <a href="https://t.me/nullndr" className="p-2">
-            <FaTelegramPlane color="yellow" size="3em" />
-          </a>
-          <a href="https://gitlab.com/nullndr" className="p-2">
-            <FaGitlab color="yellow" size="3em" />
-          </a>
-          <a href="https://github.com/nullndr" className="p-2">
-            <FaGithub color="yellow" size="3em" />
-          </a>
-          <a href="https://twitter.com/nullndr" className="p-2">
-            <FaTwitter color="yellow" size="3em" />
-          </a>
-          <a href="mailto: nullndr@duck.com" className="p-2">
-            <MdEmail color="yellow" size="3em" />
-          </a>
-          <a href="https://linkedin.com/in/nullndr" className="p-2">
-            <FaLinkedin color="yellow" size="3em" />
-          </a>
-          <a href="/key.pub" download={true} className="p-2">
-            <FaKey color="yellow" size="3em" />
-          </a>
+        <nav className="pt-5 flex justify-center flex-wrap">
+          <IconContext.Provider value={{ color: "yellow", size: "2em" }}>
+            <a rel="me" href="https://mastodon.uno/@nullndr" className="p-2">
+              <FaMastodon />
+            </a>
+            <a href="https://t.me/nullndr" className="p-2">
+              <FaTelegramPlane />
+            </a>
+            <a href="https://gitlab.com/nullndr" className="p-2">
+              <FaGitlab />
+            </a>
+            <a href="https://github.com/nullndr" className="p-2">
+              <FaGithub />
+            </a>
+            <a href="https://twitter.com/nullndr" className="p-2">
+              <FaTwitter />
+            </a>
+            <a href="mailto: nullndr@duck.com" className="p-2">
+              <MdEmail />
+            </a>
+            <a href="https://linkedin.com/in/nullndr" className="p-2">
+              <FaLinkedin />
+            </a>
+            <a href="/key.pub" download={true} className="p-2">
+              <FaKey />
+            </a>
+          </IconContext.Provider>
         </nav>
-        <div className="pt-10 flex flex-col items-center text-xl">
+        <div className="pt-5 flex flex-col items-center text-xl">
           <Link to="/blog" className="hover:text-[#e6c2bf]">
             Blog
           </Link>

app/routes/blog/EmptyState.tsx

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

app/routes/blog/Post.tsx

@@ -2,17 +2,31 @@ import { Link } from "@remix-run/react";
 
 type PostProps = {
   title: string;
-  description?: string;
-  href: string;
+  description: string | null;
+  id: string;
+  createdAt: string;
 };
 
-export function Post({ title, description, href }: PostProps) {
+export function Post({ title, description, id, createdAt }: PostProps) {
   return (
-    <div className="mt-10">
-      <Link to={href}>
-        <div className="text-[#ffff00] font-bold text-2xl">{title}</div>
-        <div className="italic text-xl">{description}</div>
-      </Link>
+    <div className="mt-5">
+      <div className="p-5 border-gray-600 border-2 rounded-lg">
+        <Link to={id}>
+          <div className="text-center">
+            <span className="text-[#ffff00] hover:text-[#e6c2bf] font-bold text-2xl">
+              {title}
+            </span>
+            <span className="ml-2 font-bold">{`(${new Date(
+              createdAt
+            ).toLocaleDateString()})`}</span>
+          </div>
+          {description && (
+            <div className="mt-5 italic text-xl max-w-3xl text-center">
+              {description}
+            </div>
+          )}
+        </Link>
+      </div>
     </div>
   );
 }

app/routes/blog/PostsWrapper.tsx

@@ -1,3 +1,3 @@
 export function PostsWrapper({ children }: React.PropsWithChildren) {
-  return <div className="px-10">{children}</div>;
+  return <div className="mt-5 px-10 w-max">{children}</div>;
 }

app/routes/blog/route.tsx

@@ -1,32 +1,22 @@
 import { Link, useLoaderData } from "@remix-run/react";
+import { findPosts } from "~/models/posts.server";
+import { EmptyState } from "./EmptyState";
 import { Post } from "./Post";
 import { PostsWrapper } from "./PostsWrapper";
 
 export const loader = async () => {
-  const posts: {
-    title: string;
-    description: string;
-    href: string;
-  }[] = [];
-
-  return posts;
+  return findPosts();
 };
 
 export default function () {
   const posts = useLoaderData<typeof loader>();
   return (
-    <div className="h-max">
-      <div className="mx-10 mt-10">
-        <div className="flex flex-col items-center">
-          <div className="text-3xl">
-            <span>Here I blog about whatever get my attention</span>
-          </div>
-        </div>
-        <div className="mt-5 flex flex-col items-end">
-          <Link to="/" className="hover:text-[#e6c2bf] text-xl">
-            Home
-          </Link>
-        </div>
+    <div className="m-5 h-max flex flex-col items-center">
+      <div className="hover:text-[#e6c2bf] text-xl">
+        <Link to="/">Home</Link>
+      </div>
+      <div className="mt-5 lg:text-3xl">
+        <span>Here I blog about whatever get my attention</span>
       </div>
       {posts.length > 0 ? (
         <PostsWrapper>
@@ -35,12 +25,7 @@ export default function () {
           ))}
         </PostsWrapper>
       ) : (
-        <div className="flex flex-col items-center">
-          <div className="text-[#ffff00] font-bold">
-            I haven't post anything yet! So here's a pic of my cat
-          </div>
-          <img src="/cat.jpg" className="rounded" />
-        </div>
+        <EmptyState />
       )}
     </div>
   );

app/routes/blog_.$id.tsx

@@ -1,20 +1,37 @@
-import { Link } from "@remix-run/react";
+import type { LoaderArgs } from "@remix-run/node";
+import { Link, useLoaderData } from "@remix-run/react";
+import { getMDXComponent } from "mdx-bundler/client";
+import React from "react";
+import { findPost } from "~/models/posts.server";
+import { getMdxFile } from "~/utils/posts.server";
 
-export const loader = () => {
-  throw new Response(null, {
-    status: 404,
-  });
+export const loader = async ({ params }: LoaderArgs) => {
+  const id = params.id;
+  if (id == null) {
+    throw new Response(null, { status: 400 });
+  }
+
+  const post = await findPost(id);
+  if (post == null) {
+    throw new Response(null, { status: 404 });
+  }
+
+  const { code } = await getMdxFile(post.path);
+  return { post, code };
 };
 
 export default function () {
+  const { post, code } = useLoaderData<typeof loader>();
+  const Component = React.useMemo(() => getMDXComponent(code), [code]);
   return (
-    <div className="m-5 h-max">
-      <div className="flex flex-col items-center text-[#ffff00] text-3xl font-bold">
-        foo
-      </div>
-      <div className="mt-10 flex flex-col items-end hover:text-[#e6c2bf] text-xl">
+    <div className="m-5 h-max flex flex-col items-center">
+      <div className="hover:text-[#e6c2bf] text-xl">
         <Link to="/blog">Go back</Link>
       </div>
+      <div className="mt-5 text-[#ffff00] text-3xl font-bold">{post.title}</div>
+      <div className="mt-10 lg:w-1/3">
+        <Component />
+      </div>
     </div>
   );
 }

app/utils/db.server.ts

@@ -0,0 +1,21 @@
+import { PrismaClient } from "@prisma/client";
+
+export let db: PrismaClient;
+
+declare global {
+  var __db: PrismaClient | undefined;
+}
+
+// this is needed because in development we don't want to restart
+// the server with every change, but we want to make sure we don't
+// create a new connection to the DB with every change either.
+if (process.env.NODE_ENV === "production") {
+  db = new PrismaClient();
+  db.$connect();
+} else {
+  if (!global.__db) {
+    global.__db = new PrismaClient();
+    global.__db.$connect();
+  }
+  db = global.__db;
+}

app/utils/posts.server.ts

@@ -0,0 +1,26 @@
+import { remarkCodeHike } from "@code-hike/mdx";
+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);
+  return bundleMDX({
+    source: source.toString(),
+    mdxOptions() {
+      return {
+        remarkPlugins: [
+          [
+            remarkCodeHike,
+            {
+              theme: codeHikeTheme,
+              lineNumbers: true,
+              showCopyButton: true,
+              autoImport: true,
+            },
+          ],
+        ],
+      };
+    },
+  });
+};