#########

Signed-off-by: Vu Van Dung <[email protected]>

next.config.mjs

@@ -4,13 +4,14 @@ import createMDX from "@next/mdx";
 import { withAxiom } from "next-axiom";
 import { withNextJSRouteTypes } from "nextjs-route-types";
 import rehypePrettyCode from "rehype-pretty-code";
+import rehypeSlug from "rehype-slug";
 
 import { env } from "./src/env.mjs";
 
 const theme = createRequire(import.meta.url)("./.theme/theme.json");
 
 const withMDX = createMDX({
-  options: { rehypePlugins: [[rehypePrettyCode, { keepBackground: false, theme }]] },
+  options: { rehypePlugins: [rehypeSlug, [rehypePrettyCode, { keepBackground: false, theme }]] },
 });
 
 /** @type {import("next").NextConfig} */

package.json

@@ -16,6 +16,7 @@
     "start": "next start",
     "type-check": "tsc --pretty --noEmit"
   },
+  "packageManager": "[email protected]",
   "dependencies": {
     "@auth/core": "0.32.0",
     "@aws-sdk/client-s3": "3.592.0",
@@ -77,6 +78,7 @@
     "react-tweet": "3.2.1",
     "react-wrap-balancer": "1.1.1",
     "rehype-pretty-code": "0.13.2",
+    "rehype-slug": "6.0.0",
     "remark-gfm": "4.0.0",
     "sharp": "0.33.4",
     "shiki": "1.6.4",
@@ -90,8 +92,5 @@
     "ytmusic-api": "5.2.1",
     "zod": "3.23.8"
   },
-  "trustedDependencies": [
-    "@biomejs/biome",
-    "@vercel/speed-insights"
-  ]
+  "trustedDependencies": ["@biomejs/biome", "@vercel/speed-insights", "sharp"]
 }

src/app/globals.css

@@ -96,11 +96,14 @@ hr {
 @keyframes page-enter {
   0% {
     opacity: 0;
-    transform: perspective(5000px) rotateX(-12deg) scale(.95);
+    transform: translateY(8px);
   }
   20% {
     opacity: 0;
-    transform: perspective(5000px) rotateX(-12deg) scale(.95);
+    transform: translateY(8px);
+  }
+  80% {
+    opacity: 1;
   }
 }
 .page-fade-in-on-load {

src/components/blogs.tsx

@@ -2,6 +2,35 @@ import { Link } from "~/components/ui/link";
 import { ScrollArea, ScrollBar } from "~/components/ui/scroll-area";
 import { cn } from "~/lib/cn";
 
+function Heading({
+  level,
+  id,
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<"h1"> & { level: 1 | 2 | 3 | 4 | 5 | 6 }) {
+  const Tag = `h${level}` as const;
+  return (
+    <Tag id={id} {...props} className="scroll-mt-36">
+      <a href={`#${id}`} className="not-prose group relative">
+        <span
+          aria-hidden="true"
+          className="absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition"
+        >
+          <span className="text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']" />
+        </span>
+        {children}
+      </a>
+    </Tag>
+  );
+}
+
+export const h1 = (props: React.ComponentPropsWithoutRef<"h1">) => <Heading level={1} {...props} />;
+export const h2 = (props: React.ComponentPropsWithoutRef<"h2">) => <Heading level={2} {...props} />;
+export const h3 = (props: React.ComponentPropsWithoutRef<"h3">) => <Heading level={3} {...props} />;
+export const h4 = (props: React.ComponentPropsWithoutRef<"h4">) => <Heading level={4} {...props} />;
+export const h5 = (props: React.ComponentPropsWithoutRef<"h5">) => <Heading level={5} {...props} />;
+export const h6 = (props: React.ComponentPropsWithoutRef<"h6">) => <Heading level={6} {...props} />;
+
 export function a({ href, className, ...props }: React.ComponentPropsWithoutRef<"a">) {
   if (!href) return <a {...props} className={cn("link", className)} />;
   return <Link href={href} {...props} className={className} />;