styles(project): add libraries for markdown manipulation and custom styles for the MDX component

Author: tyronejosee

package.json

@@ -16,23 +16,31 @@
     "@react-spring/web": "9.7.5",
     "@supabase/ssr": "^0.6.1",
     "@supabase/supabase-js": "^2.49.4",
+    "@tailwindcss/typography": "^0.5.16",
     "@uiw/react-markdown-preview": "^5.1.4",
     "@uiw/react-md-editor": "^4.0.6",
     "date-fns": "^4.1.0",
+    "esbuild": "^0.25.4",
     "framer-motion": "^12.10.5",
+    "gray-matter": "^4.0.3",
     "lucide-react": "0.475.0",
+    "mdx-bundler": "^10.1.1",
     "next": "15.2.5",
     "next-themes": "^0.4.6",
+    "prismjs": "^1.30.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.56.3",
     "react-intersection-observer": "^9.16.0",
+    "rehype-prism-plus": "^2.0.1",
+    "rehype-slug": "^6.0.0",
     "slugify": "^1.6.6",
     "zod": "^3.24.4",
     "zustand": "5.0.3"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.1",
+    "@types/mdx": "^2.0.13",
     "@types/node": "^20.17.46",
     "@types/react": "^19.1.3",
     "@types/react-dom": "^19",

src/styles/globals.css

@@ -7,12 +7,143 @@
   --font-roboto-mono: "Roboto Mono", monospace;
 }
 
-html {
-  @apply text-neutral-950 dark:text-white selection:bg-neutral-950 selection:text-white dark:selection:bg-white dark:selection:text-neutral-950;
-}
+@layer base {
+  html {
+    @apply text-neutral-950 dark:text-white selection:bg-neutral-950 selection:text-white dark:selection:bg-white dark:selection:text-neutral-950;
+    scroll-behavior: smooth;
+  }
+
+  body {
+    font-family: var(--font-outfit);
+  }
+
+  h1[id],
+  h2[id] {
+    @apply scroll-mt-16;
+  }
+
+  .prose h1 {
+    @apply text-4xl font-black text-neutral-950 dark:text-white;
+  }
+
+  .prose h2 {
+    @apply text-3xl font-extrabold text-neutral-950 dark:text-white;
+  }
+
+  .prose h3 {
+    @apply text-xl font-bold text-neutral-950 dark:text-white;
+  }
+
+  .prose h1:first-of-type {
+    @apply hidden;
+  }
+
+  .prose a {
+    @apply text-blue-400 no-underline hover:underline;
+  }
+
+  .prose strong {
+    @apply font-black text-neutral-950 dark:text-white;
+  }
+
+  .prose hr {
+    @apply border-1 border-neutral-200 dark:border-neutral-800 rounded-xl my-8 first:hidden;
+  }
+
+  .prose blockquote {
+    @apply border-l-4 pl-4 italic text-neutral-500 border-neutral-200 dark:border-neutral-800 rounded-xl;
+    quotes: "“" "”";
+  }
+
+  .prose blockquote::before {
+    content: "“";
+    color: theme("colors.neutral.500");
+    font-family: "Victor Mono", monospace;
+    font-size: 4rem;
+    line-height: 0;
+    margin-right: 0.25rem;
+    vertical-align: -0.4em;
+  }
+
+  .prose blockquote::after {
+    content: "”";
+    display: none;
+  }
+
+  .prose blockquote cite {
+    @apply block text-sm font-medium mt-2 text-right text-neutral-500;
+  }
+
+  .prose table {
+    @apply w-full text-sm text-left rtl:text-right text-white;
+  }
+
+  .prose thead {
+    @apply text-xs font-black uppercase bg-neutral-800 text-white;
+  }
+
+  .prose tr > th {
+    @apply min-w-52 text-xs px-4 py-2;
+  }
+
+  .prose tr {
+    @apply border-b border-transparent;
+  }
+
+  .prose tr > td {
+    @apply min-w-52 text-xs px-4 h-10 pb-1;
+  }
+
+  .prose ul > li::marker {
+    @apply font-bold text-neutral-500 leading-relaxed;
+    /* content: '- '; */
+  }
+
+  .prose :not(pre) > code {
+    @apply text-neutral-950 dark:text-white bg-neutral-100 dark:bg-neutral-900 border-2 border-neutral-200 dark:border-neutral-800 rounded-lg px-1.5 py-0.5 font-medium;
+  }
+
+  .prose :not(pre) > code::before,
+  .prose :not(pre) > code::after {
+    content: none !important;
+  }
+
+  .prose pre {
+    @apply rounded-xl border-2 border-neutral-200 dark:border-neutral-800 overflow-x-auto p-4 !bg-neutral-100 dark:!bg-neutral-900;
+  }
+
+  .prose pre code {
+    @apply text-sm lg:text-xs font-mono leading-relaxed text-neutral-950 dark:text-white;
+    font-family: "Fira Code", monospace;
+  }
+
+  .prose pre {
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
+  .prose pre::-webkit-scrollbar {
+    height: 8px;
+    width: 0px;
+  }
+
+  .prose pre::-webkit-scrollbar-track {
+    background: transparent;
+    margin-left: 8px;
+    margin-right: 8px;
+  }
+
+  .prose pre::-webkit-scrollbar-thumb {
+    background-color: #737373;
+    border-radius: 10px;
+    border: 2px solid transparent;
+    background-clip: content-box;
+    transition: background-color 0.2s ease;
+  }
 
-body {
-  font-family: var(--font-outfit);
+  .prose pre::-webkit-scrollbar-thumb:active {
+    background-color: rgba(255, 255, 255, 0.9);
+  }
 }
 
 ::-webkit-scrollbar {

tailwind.config.ts

@@ -1,5 +1,6 @@
 import type { Config } from "tailwindcss";
 import { heroui } from "@heroui/theme";
+import typography from "@tailwindcss/typography";
 
 export default {
   content: [
@@ -9,14 +10,10 @@ export default {
     "./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {
-      colors: {
-        primary: "#8A2BE2",
-        secondary: "#FF9100",
-      },
-    },
+    extend: {},
   },
   plugins: [
+    typography(),
     heroui({
       layout: {
         dividerWeight: "1px",