Add mdx styling

src/app/blog/[slug]/page.jsx

@@ -10,11 +10,11 @@ export async function generateStaticParams() {
 export default async function BlogPage({ params }) {
   const blog = await getBlogBySlug(params.slug);
   return (
-    <section className="prose mx-auto">
+    <section className="py-16 prose">
       <article>
-        <h1>{blog.frontmatter.title}</h1>
+        <h1 className="text-light-foreground dark:text-dark-foreground">{blog.frontmatter.title}</h1>
-        <p>{blog.frontmatter.author}</p>
+        <p className="text-light-yellow-1 dark:text-dark-yellow-1">{blog.frontmatter.author}</p>
-        <p>{blog.frontmatter.date}</p>
+        <p className="text-light-blue-1 dark:text-dark-blue-1">{blog.frontmatter.date}</p>
         <div>{blog.content}</div>
       </article>
     </section>

src/package.json

@@ -14,6 +14,8 @@
     "next": "14.2.3",
     "next-mdx-remote": "^5.0.0",
     "next-themes": "^0.3.0",
+    "prism-react-renderer": "^2.3.1",
+    "prismjs": "^1.29.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",

src/tailwind.config.js

@@ -74,7 +74,86 @@ module.exports = {
           },
         },
       },
+      typography: (theme) => ({
+        DEFAULT: {
+          css: {
+            color: theme('colors.light.foreground'),
+            a: {
+              color: theme('colors.light.blue.2'),
+              '&:hover': {
+                color: theme('colors.light.blue.1'),
+              },
+            },
+            h1: {
+              color: theme('colors.light.foreground'),
+            },
+            h2: {
+              color: theme('colors.light.foreground'),
+            },
+            h3: {
+              color: theme('colors.light.foreground'),
+            },
+            h4: {
+              color: theme('colors.light.foreground'),
+            },
+            h5: {
+              color: theme('colors.light.foreground'),
+            },
+            h6: {
+              color: theme('colors.light.foreground'),
+            },
+            strong: {
+              color: theme('colors.light.foreground'),
+            },
+            code: {
+              color: theme('colors.light.orange.1'),
+            },
+            blockquote: {
+              color: theme('colors.light.foreground'),
+            },
+          },
+        },
+        dark: {
+          css: {
+            color: theme('colors.light.foreground'), // Keeping same as light mode
+            a: {
+              color: theme('colors.light.blue.2'),
+              '&:hover': {
+                color: theme('colors.light.blue.1'),
+              },
+            },
+            h1: {
+              color: theme('colors.light.foreground'),
+            },
+            h2: {
+              color: theme('colors.light.foreground'),
+            },
+            h3: {
+              color: theme('colors.light.foreground'),
+            },
+            h4: {
+              color: theme('colors.light.foreground'),
+            },
+            h5: {
+              color: theme('colors.light.foreground'),
+            },
+            h6: {
+              color: theme('colors.light.foreground'),
+            },
+            strong: {
+              color: theme('colors.light.foreground'),
+            },
+            code: {
+              color: theme('colors.light.orange.1'),
+            },
+            blockquote: {
+              color: theme('colors.light.foreground'),
+            },
+          },
+        },
+      }),
     },
   },
   plugins: [require("@tailwindcss/typography")],
 };
+

src/yarn.lock

@@ -259,6 +259,11 @@
   resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.34.tgz#10964ba0dee6ac4cd462e2795b6bebd407303433"
   integrity sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==
 
+"@types/prismjs@^1.26.0":
+  version "1.26.4"
+  resolved "https://registry.yarnpkg.com/@types/prismjs/-/prismjs-1.26.4.tgz#1a9e1074619ce1d7322669e5b46fbe823925103a"
+  integrity sha512-rlAnzkW2sZOjbqZ743IHUhFcvzaGbqijwOu8QZnZCjfQzBqFE3s4lOTJEsxikImav9uzz/42I+O7YUs1mWgMlg==
+
 "@types/prop-types@*":
   version "15.7.12"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.12.tgz#12bb1e2be27293c1406acb6af1c3f3a1481d98c6"
@@ -449,6 +454,11 @@ client-only@0.0.1:
   resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
 
+clsx@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
+
 collapse-white-space@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-2.1.0.tgz#640257174f9f42c740b40f3b55ee752924feefca"
@@ -1747,6 +1757,19 @@ postcss@^8, postcss@^8.4.23:
     picocolors "^1.0.0"
     source-map-js "^1.2.0"
 
+prism-react-renderer@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-2.3.1.tgz#e59e5450052ede17488f6bc85de1553f584ff8d5"
+  integrity sha512-Rdf+HzBLR7KYjzpJ1rSoxT9ioO85nZngQEoFIhL07XhtJHlCU3SOz0GJ6+qvMyQe0Se+BV3qpe6Yd/NmQF5Juw==
+  dependencies:
+    "@types/prismjs" "^1.26.0"
+    clsx "^2.0.0"
+
+prismjs@^1.29.0:
+  version "1.29.0"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
+  integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==
+
 prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"