feat(ui): create /blog/til page

src/app/blog/til/page.tsx

@@ -0,0 +1,50 @@
+import { allTILs, TIL } from 'contentlayer/generated'
+import { useMDXComponent } from 'next-contentlayer/hooks'
+
+import { Title } from '@/shared/components/title'
+import { Date } from '@/shared/components/date'
+
+import 'katex/dist/katex.min.css'
+
+const TILComponent = ({ til }: { til: TIL }) => {
+  const MDXContent = useMDXComponent(til.body.code)
+  return (
+    <div className="relative flex flex-col gap-6 border-b border-b-neutral-200 py-12 last:border-none dark:border-b-neutral-800 md:flex-row md:gap-1">
+      <div className="top-24 h-fit w-full space-y-2 md:sticky md:space-y-5">
+        <div className="space-y-3">
+          <h2 className="text-xl font-bold">{til.title}</h2>
+          <p>{til.description}</p>
+          <span className="text-sm">
+            <Date dateString={til.date} />
+          </span>
+        </div>
+        <div className="flex flex-wrap gap-1">
+          {til.tags.map(tag => (
+            <span
+              className="rounded-lg bg-neutral-400/10 p-1 text-sm leading-none"
+              key={tag}
+            >
+              {tag}
+            </span>
+          ))}
+        </div>
+      </div>
+      <div className="post-content til-content md:w-2/3">
+        <MDXContent />
+      </div>
+    </div>
+  )
+}
+
+export default function Page() {
+  return (
+    <div className="content-container m-auto space-y-4">
+      <Title text="Today I Learned" />
+      <div className="flex flex-col gap-3">
+        {allTILs.map(til => (
+          <TILComponent til={til} key={til.date} />
+        ))}
+      </div>
+    </div>
+  )
+}

src/styles/components.css

@@ -279,4 +279,41 @@
       }
     }
   }
+
+  .til-content {
+    nav {
+      &.toc {
+        @apply hidden;
+      }
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      @apply m-0;
+    }
+
+    h2 {
+      @apply pb-1 text-2xl underline-offset-2;
+    }
+    h3 {
+      @apply pb-0 text-xl underline-offset-2;
+    }
+    h4 {
+      @apply text-xl;
+    }
+    h5 {
+      @apply text-lg;
+    }
+    h6 {
+      @apply text-base;
+    }
+
+    p {
+      @apply my-4 border-red-600 last:mb-0 [&:nth-child(2)]:mt-0;
+    }
+  }
 }