refactor: code refactor

.gitignore

@@ -5,6 +5,5 @@ node_modules
 /public/build
 .env
 
-app/tailwind.css
-prisma/dev.db
-posts
+# TODO: remove the following line
+posts/*.mdx

app/models/posts.server.ts

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

app/routes/blog.$name.tsx

@@ -3,7 +3,6 @@ import { useLoaderData } from "@remix-run/react";
 import { getMDXComponent } from "mdx-bundler/client";
 import React from "react";
 import { Title } from "~/components/Title";
-import { findPost } from "~/models/posts.server";
 import { getMdxFile } from "~/utils/posts.server";
 
 export const handle = {
@@ -12,27 +11,24 @@ export const handle = {
 };
 
 export const loader = async ({ params }: LoaderArgs) => {
-  const id = params.id;
-  if (id == null) {
+  const name = params.name;
+  if (name == 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.fileName);
-  return { post, code };
+  return getMdxFile(name);
 };
 
 export default function () {
-  const { post, code } = useLoaderData<typeof loader>();
+  const {
+    code,
+    frontmatter: { title },
+  } = useLoaderData<typeof loader>();
   const MdxComponent = React.useMemo(() => getMDXComponent(code), [code]);
 
   return (
     <>
-      <Title>{post.title}</Title>
+      <Title>{title}</Title>
       <div className="m-3 mt-10 xl:w-1/2 prose dark:prose-invert prose-a:no-underline prose-a:font-bold">
         <MdxComponent />
       </div>

app/routes/blog._index/Post.tsx

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

app/routes/blog._index/route.tsx

@@ -1,8 +1,8 @@
 import { useLoaderData } from "@remix-run/react";
 import { Title } from "~/components/Title";
-import { findPosts } from "~/models/posts.server";
-import { EmptyState } from "../components/EmptyState";
-import { Post } from "../components/Post";
+import { findPosts } from "~/utils/posts.server";
+import { EmptyState } from "./EmptyState";
+import { Post } from "./Post";
 
 export const handle = {
   to: "/",

app/routes/blog/route.tsx

@@ -1,5 +1,5 @@
 import { Link, Outlet } from "@remix-run/react";
-import { useMatch } from "~/hooks/useMatch";
+import { useMatch } from "./useMatch";
 
 export default function () {
   const { handle } = useMatch();

app/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

app/utils/db.server.ts

@@ -1,21 +0,0 @@
-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

@@ -1,12 +1,17 @@
 import { remarkCodeHike } from "@code-hike/mdx";
-import { readFile } from "fs/promises";
+import { readdir, readFile } from "fs/promises";
 import { bundleMDX } from "mdx-bundler";
 import codeHikeTheme from "shiki/themes/one-dark-pro.json";
 
-export const getMdxFile = async (fileName: string) => {
-  const source = await readFile(`posts/${fileName}`);
-  return bundleMDX({
-    source: source.toString(),
+type FrontMatter = {
+  title: string;
+  description: string;
+  publishedAt: string;
+};
+
+export const getMdxFile = async (file: string) => {
+  return bundleMDX<FrontMatter>({
+    source: (await readFile(`./posts/${file}.mdx`)).toString(),
     mdxOptions() {
       return {
         remarkPlugins: [
@@ -24,3 +29,41 @@ export const getMdxFile = async (fileName: string) => {
     },
   });
 };
+
+export const findPosts = async () => {
+  const files = await readdir("posts");
+  const posts: (FrontMatter & {
+    filename: string;
+  })[] = [];
+  for (const file of files.filter((file) => file.endsWith(".mdx"))) {
+    const { frontmatter } = await bundleMDX({
+      source: (await readFile(`./posts/${file}`)).toString(),
+      mdxOptions() {
+        return {
+          remarkPlugins: [
+            [
+              remarkCodeHike,
+              {
+                theme: codeHikeTheme,
+                lineNumbers: true,
+                showCopyButton: true,
+                autoImport: true,
+              },
+            ],
+          ],
+        };
+      },
+    });
+
+    posts.push({
+      filename: file.replace(".mdx", ""),
+      description: frontmatter.description,
+      title: frontmatter.title,
+      publishedAt: frontmatter.publishedAt,
+    });
+  }
+
+  return posts.sort((a, b) =>
+    new Date(a.publishedAt) > new Date(b.publishedAt) ? -1 : 1
+  );
+};

docker-compose.yaml

@@ -1,12 +0,0 @@
-version: "3.8"
-services:
-  database:
-    image: postgres:alpine
-    ports:
-      - 5432:5432
-    volumes:
-      - posts:/var/lib/postgresql/data
-    env_file:
-      - .env
-volumes:
-  posts:

package.json

@@ -2,7 +2,7 @@
   "private": true,
   "sideEffects": false,
   "scripts": {
-    "build": "prisma generate && prisma migrate deploy && remix build",
+    "build": "remix build",
     "dev": "remix dev",
     "start": "remix-serve build",
     "typecheck": "tsc"
@@ -13,8 +13,9 @@
     "@remix-run/node": "^1.14.0",
     "@remix-run/react": "^1.14.0",
     "@remix-run/serve": "^1.14.0",
+    "esbuild": "^0.17.11",
     "isbot": "^3.6.5",
-    "mdx-bundler": "9.2.1",
+    "mdx-bundler": "^9.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "shiki": "^0.14.1"
@@ -26,7 +27,6 @@
     "@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"

prisma/migrations/20230303082356_init/migration.sql

@@ -1,12 +0,0 @@
--- CreateTable
-CREATE TABLE "Post" (
-    "id" TEXT NOT NULL,
-    "title" TEXT NOT NULL,
-    "description" TEXT,
-    "path" TEXT NOT NULL,
-    "isPublic" BOOLEAN NOT NULL DEFAULT false,
-    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
-    "updatedAt" TIMESTAMP(3) NOT NULL,
-
-    CONSTRAINT "Post_pkey" PRIMARY KEY ("id")
-);

prisma/migrations/migration_lock.toml

@@ -1,3 +0,0 @@
-# Please do not edit this file manually
-# It should be added in your version-control system (i.e. Git)
-provider = "postgresql"

prisma/schema.prisma

@@ -1,18 +0,0 @@
-generator client {
-  provider = "prisma-client-js"
-}
-
-datasource db {
-  provider = "postgresql"
-  url      = env("DATABASE_URL")
-}
-
-model Post {
-  id          String   @id @default(cuid())
-  title       String
-  description String?
-  fileName    String
-  isPublic    Boolean  @default(false)
-  createdAt   DateTime @default(now())
-  updatedAt   DateTime @updatedAt
-}

tsconfig.json

@@ -3,7 +3,7 @@
     "remix.env.d.ts",
     "**/*.ts",
     "**/*.tsx",
-    "app/routes/blog.$id.tsx"
+    "app/routes/blog.$name.tsx"
   ],
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ES2019"],