feat: rehype code block

src/components/BlogCard.astro

@@ -65,21 +65,23 @@ if (
       <div
         class="mb-2 flex items-center space-x-2 text-xs text-muted-foreground"
       >
-        {author && (
-          <>
-            <div class="flex items-center gap-1.5">
-              <Image
-                src={author.data.avatar}
-                alt={author.data.name}
-                width={18}
-                height={18}
-                class="rounded-full"
-              />
-              <span>{author.data.name}</span>
-            </div>
-            <Separator orientation="vertical" className="h-4" />
-          </>
-        )}
+        {
+          author && (
+            <>
+              <div class="flex items-center gap-1.5">
+                <Image
+                  src={author.data.avatar}
+                  alt={author.data.name}
+                  width={18}
+                  height={18}
+                  class="rounded-full"
+                />
+                <span>{author.data.name}</span>
+              </div>
+              <Separator orientation="vertical" className="h-4" />
+            </>
+          )
+        }
         <span>{formattedDate}</span>
         <Separator orientation="vertical" className="h-4" />
         <span>{readTime}</span>

src/components/Head.astro

@@ -2,6 +2,7 @@
 import '../styles/global.css'
 import '../styles/katex.css'
 import '../styles/typography.css'
+import '../styles/codeblocks.css'
 
 import '@fontsource/geist-sans'
 import '@fontsource/geist-mono'

src/components/PostNavigation.astro

@@ -12,28 +12,42 @@ const { prevPost, nextPost } = Astro.props
     href={prevPost ? `/blog/${prevPost.slug}` : '#'}
     class={cn(
       buttonVariants({ variant: 'outline' }),
-      'group flex items-center justify-start gap-2 w-1/2',
+      'rounded-xl group flex items-center justify-start w-1/2 h-fit',
       !prevPost && 'pointer-events-none opacity-50 cursor-not-allowed',
     )}
     aria-disabled={!prevPost}
   >
-    <ArrowLeft
-      className="h-4 w-4 transition-transform group-hover:-translate-x-1"
-    />
-    <span class="truncate">{prevPost?.data.title || 'Latest post!'}</span>
+    <div class="mr-2 flex-shrink-0">
+      <ArrowLeft
+        className="h-4 w-4 transition-transform group-hover:-translate-x-1"
+      />
+    </div>
+    <div class="flex flex-col items-start overflow-hidden">
+      <span class="text-left text-xs text-muted-foreground">Previous Post</span>
+      <span class="w-full truncate text-left"
+        >{prevPost?.data.title || 'Latest post!'}</span
+      >
+    </div>
   </Link>
   <Link
     href={nextPost ? `/blog/${nextPost.slug}` : '#'}
     class={cn(
       buttonVariants({ variant: 'outline' }),
-      'group flex items-center justify-end gap-2 w-1/2',
+      'rounded-xl group flex items-center justify-end w-1/2 h-fit',
       !nextPost && 'pointer-events-none opacity-50 cursor-not-allowed',
     )}
     aria-disabled={!nextPost}
   >
-    <span class="truncate">{nextPost?.data.title || 'Last post!'}</span>
-    <ArrowRight
-      className="h-4 w-4 transition-transform group-hover:translate-x-1"
-    />
+    <div class="flex flex-col items-end overflow-hidden">
+      <span class="text-right text-xs text-muted-foreground">Next Post</span>
+      <span class="w-full truncate text-right"
+        >{nextPost?.data.title || 'Last post!'}</span
+      >
+    </div>
+    <div class="ml-2 flex-shrink-0">
+      <ArrowRight
+        className="h-4 w-4 transition-transform group-hover:translate-x-1"
+      />
+    </div>
   </Link>
 </div>

src/components/TableOfContents.astro

@@ -40,8 +40,12 @@ function buildToc(headings: Heading[]) {
 <nav
   class="overflow-wrap-break-word sticky top-16 hidden h-0 w-[calc(50vw-50%-4rem)] translate-x-[calc(-100%-2em)] text-xs leading-4 xl:block"
 >
-  <h2 class="mb-4 text-xl font-semibold">Table of Contents</h2>
-  <ul class="space-y-2">
-    {toc.map((heading) => <TableOfContentsHeading heading={heading} />)}
-  </ul>
+  <div class="mr-6 flex justify-end">
+    <ul class="space-y-2">
+      <li>
+        <h2 class="mb-2 text-lg font-semibold">Table of Contents</h2>
+      </li>
+      {toc.map((heading) => <TableOfContentsHeading heading={heading} />)}
+    </ul>
+  </div>
 </nav>

src/components/ui/card.tsx

@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from 'react'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const Card = React.forwardRef<
   HTMLDivElement,
@@ -9,13 +9,13 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-xl border bg-card text-card-foreground shadow",
-      className
+      'rounded-xl border bg-card text-card-foreground shadow',
+      className,
     )}
     {...props}
   />
 ))
-Card.displayName = "Card"
+Card.displayName = 'Card'
 
 const CardHeader = React.forwardRef<
   HTMLDivElement,
@@ -23,11 +23,11 @@ const CardHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    className={cn('flex flex-col space-y-1.5 p-6', className)}
     {...props}
   />
 ))
-CardHeader.displayName = "CardHeader"
+CardHeader.displayName = 'CardHeader'
 
 const CardTitle = React.forwardRef<
   HTMLParagraphElement,
@@ -35,11 +35,11 @@ const CardTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <h3
     ref={ref}
-    className={cn("font-semibold leading-none tracking-tight", className)}
+    className={cn('font-semibold leading-none tracking-tight', className)}
     {...props}
   />
 ))
-CardTitle.displayName = "CardTitle"
+CardTitle.displayName = 'CardTitle'
 
 const CardDescription = React.forwardRef<
   HTMLParagraphElement,
@@ -47,19 +47,19 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn('text-sm text-muted-foreground', className)}
     {...props}
   />
 ))
-CardDescription.displayName = "CardDescription"
+CardDescription.displayName = 'CardDescription'
 
 const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
 ))
-CardContent.displayName = "CardContent"
+CardContent.displayName = 'CardContent'
 
 const CardFooter = React.forwardRef<
   HTMLDivElement,
@@ -67,10 +67,10 @@ const CardFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
+    className={cn('flex items-center p-6 pt-0', className)}
     {...props}
   />
 ))
-CardFooter.displayName = "CardFooter"
+CardFooter.displayName = 'CardFooter'
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }