feat: add posts

.gitignore

@@ -6,3 +6,5 @@ node_modules
 .env
 
 app/tailwind.css
+
+prisma/dev.db

Dockerfile

@@ -0,0 +1,9 @@
+FROM node:alpine
+
+COPY . /src
+
+WORKDIR /src
+
+RUN npm install && npm run build
+
+CMD ["npm", "run", "start"]

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.
-           */}
+        <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 color="yellow" size="3em" />
+              <FaMastodon />
             </a>
             <a href="https://t.me/nullndr" className="p-2">
-            <FaTelegramPlane color="yellow" size="3em" />
+              <FaTelegramPlane />
             </a>
             <a href="https://gitlab.com/nullndr" className="p-2">
-            <FaGitlab color="yellow" size="3em" />
+              <FaGitlab />
             </a>
             <a href="https://github.com/nullndr" className="p-2">
-            <FaGithub color="yellow" size="3em" />
+              <FaGithub />
             </a>
             <a href="https://twitter.com/nullndr" className="p-2">
-            <FaTwitter color="yellow" size="3em" />
+              <FaTwitter />
             </a>
             <a href="mailto: nullndr@duck.com" className="p-2">
-            <MdEmail color="yellow" size="3em" />
+              <MdEmail />
             </a>
             <a href="https://linkedin.com/in/nullndr" className="p-2">
-            <FaLinkedin color="yellow" size="3em" />
+              <FaLinkedin />
             </a>
             <a href="/key.pub" download={true} className="p-2">
-            <FaKey color="yellow" size="3em" />
+              <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>
+    <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,33 +1,23 @@
 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">
+    <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>
-        </div>
-        <div className="mt-5 flex flex-col items-end">
-          <Link to="/" className="hover:text-[#e6c2bf] text-xl">
-            Home
-          </Link>
-        </div>
-      </div>
       {posts.length > 0 ? (
         <PostsWrapper>
           {posts.map((post) => (
@@ -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,
+            },
+          ],
+        ],
+      };
+    },
+  });
+};

package.json

@@ -8,13 +8,23 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@code-hike/mdx": "^0.8.0",
+    "@code-hike/mdx": "^0.8.1-next.0",
+    "@prisma/client": "^4.11.0",
     "@remix-run/node": "^1.13.0",
     "@remix-run/react": "^1.13.0",
     "@remix-run/serve": "^1.13.0",
+    "esbuild": "0.17.10",
+    "front-matter": "4.0.2",
     "isbot": "^3.6.5",
+    "mdx-bundler": "9.2.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "rehype-autolink-headings": "6.1.1",
+    "rehype-highlight": "6.0.0",
+    "rehype-slug": "5.1.0",
+    "rehype-toc": "3.0.2",
+    "remark-gfm": "3.0.1",
+    "shiki": "^0.14.1"
   },
   "devDependencies": {
     "@remix-run/dev": "^1.13.0",
@@ -22,6 +32,7 @@
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.8",
     "eslint": "^8.27.0",
+    "prisma": "^4.11.0",
     "react-icons": "^4.7.1",
     "tailwindcss": "^3.2.7",
     "typescript": "^4.8.4"

post/test.mdx

@@ -0,0 +1,8 @@
+
+# Hello world!
+
+```c
+int main(int argc, char** argv) {
+  return 0;
+}
+```

prisma/schema.prisma

@@ -0,0 +1,20 @@
+// This is your Prisma schema file,
+// learn more about it in the docs: https://pris.ly/d/prisma-schema
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "sqlite"
+  url      = env("DATABASE_URL")
+}
+
+model Post {
+  id          String   @id @default(cuid())
+  title       String
+  description String?
+  path        String
+  createdAt   DateTime @default(now())
+  updatedAt   DateTime @updatedAt
+}

remix.config.js

@@ -1,6 +1,7 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
   ignoredRouteFiles: ["**/.*"],
+  serverDependenciesToBundle: ["mdx-bundler"],
   future: {
     unstable_tailwind: true,
     v2_routeConvention: true,

tsconfig.json

@@ -1,5 +1,10 @@
 {
-  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx", "app/routes/blog_.$id.tsx"],
+  "include": [
+    "remix.env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "app/routes/blog_.$id.tsx"
+  ],
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ES2019"],
     "isolatedModules": true,
@@ -15,6 +20,7 @@
     "paths": {
       "~/*": ["./app/*"]
     },
+    "module": "ES2022",
 
     // Remix takes care of building everything in `remix build`.
     "noEmit": true