perf!: monorepo setup + fully static + webp images

BREAKING CHANGE: minimum supported Node.js >= 22.0.0 and pnpm >= 9.5.0

packages/blog/src/BlogPostUI.tsx

@@ -0,0 +1,29 @@
+import { getISODate } from "@repo/utils/dates"
+import "katex/dist/katex.min.css"
+
+import { Typography } from "@repo/ui/design/Typography"
+import { MainLayout } from "@repo/ui/MainLayout"
+import type { BlogPost } from "./BlogPost"
+import { BlogPostContent } from "./BlogPostContent"
+
+export interface BlogPostUIProps {
+  blogPost: BlogPost
+}
+
+export const BlogPostUI: React.FC<BlogPostUIProps> = (props) => {
+  const { blogPost } = props
+
+  return (
+    <MainLayout className="break-wrap-words flex flex-1 flex-col flex-wrap items-center justify-center">
+      <div className="my-12 flex flex-col items-center text-center">
+        <Typography variant="h2" as="h1">
+          {blogPost.frontmatter.title}
+        </Typography>
+        <p className="mt-2">
+          {getISODate(new Date(blogPost.frontmatter.publishedOn))}
+        </p>
+      </div>
+      <BlogPostContent content={blogPost.content} />
+    </MainLayout>
+  )
+}