blog formatting

app/blog/[slug]/page.tsx

@@ -5,6 +5,10 @@ import { ArrowLeft } from 'lucide-react';
 import { MDXRemote } from 'next-mdx-remote/rsc';
 import Link from 'next/link';
 import remarkGfm from 'remark-gfm';
+import rehypePrism from '@mapbox/rehype-prism';
+import '@/styles/prism.css';
+import { cn } from '@/lib/utils';
+import { Tweet } from 'react-tweet';
 
 export async function generateStaticParams() {
   const files = fs.readdirSync(path.join('blog'));
@@ -40,21 +44,14 @@ export async function generateMetadata({ params }: any) {
   };
 }
 
-const options = {
-  mdxOptions: {
-    remarkPlugins: [remarkGfm],
-    rehypePlugins: [],
-  },
-};
-
 function Back() {
   return (
     <div>
       <Link
         href="/"
-        className="inline-flex items-center justify-center bg-zinc-800 px-2 py-1 font-medium no-underline"
+        className="inline-flex items-center justify-center bg-zinc-100 px-2 py-1 no-underline hover:bg-zinc-200 dark:bg-zinc-800 dark:hover:bg-zinc-700"
       >
-        <ArrowLeft className="mr-1 h-4 w-4" strokeWidth={3} /> Back
+        <ArrowLeft className="mr-1 h-4 w-4" strokeWidth={2} /> Back
       </Link>
     </div>
   );
@@ -63,12 +60,39 @@ function Back() {
 export default function Post({ params }: any) {
   const { frontMatter, content } = getPost(params);
 
+  const options = {
+    mdxOptions: {
+      remarkPlugins: [remarkGfm],
+      rehypePlugins: [rehypePrism],
+    },
+  };
+
+  const components = {
+    Tweet,
+    h1: (props: any) => <h1 {...props} className="text-4xl font-bold" />,
+    h2: (props: any) => (
+      <h2 {...props} className="mt-10 text-2xl font-semibold" />
+    ),
+    h3: (props: any) => (
+      <h3 {...props} className="mt-8 text-xl font-semibold" />
+    ),
+    h4: (props: any) => (
+      <h4 {...props} className="mt-6 text-lg font-semibold" />
+    ),
+    pre: (props: any) => (
+      <pre
+        {...props}
+        className={cn(props.className, 'overflow-x-auto bg-zinc-500')}
+      />
+    ),
+  };
+
   return (
     <article className="post space-y-5">
       <Back />
       <h1 className="text-4xl font-bold">{frontMatter.title}</h1>
       {/* @ts-expect-error Server Component*/}
-      <MDXRemote source={content} options={options} />
+      <MDXRemote source={content} options={options} components={components} />
       <Back />
     </article>
   );

app/page.tsx

@@ -1,8 +1,8 @@
-import Contact from '../components/contact';
 import Hero from '../components/hero';
 import Projects from '../components/projects';
+// import Writing from '@/components/writing';
 import Work from '../components/work';
-// import Writing from '../components/writing';
+import Contact from '../components/contact';
 
 export default function Home(): JSX.Element {
   return (

blog/assumptions.mdx

@@ -0,0 +1,14 @@
+---
+title: Assumptions for building AI products
+date: '2024-02-28'
+description: Welcome to my first blog.
+---
+
+When building an AI product, it's important to consider not just what the market
+will look like today, but what it will look like tomorrow. Here are some of the key
+assumptions I'm keeping in mind while building AI products.
+
+## Inference cost will approach zero
+
+Being GPU-rich won't be a viable moat forever, as GPU production
+ratchets up and model efficiency improves.

package.json

@@ -8,6 +8,7 @@
     "format": "prettier --write ."
   },
   "dependencies": {
+    "@mapbox/rehype-prism": "^0.9.0",
     "@vercel/analytics": "^0.1.10",
     "clsx": "^2.1.0",
     "gray-matter": "^4.0.3",
@@ -17,12 +18,14 @@
     "next-themes": "^0.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-tweet": "^3.2.0",
     "remark-gfm": "^4.0.0",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.10",
+    "@types/mapbox__rehype-prism": "^0.8.3",
     "@types/node": "18.11.3",
     "@types/react": "18.0.21",
     "@types/react-dom": "18.0.6",