Added rehypeSlug and rehypeAutolinkHeadings, removed dead code

Author: ryodari

astro.config.mjs

@@ -2,10 +2,22 @@
 import { defineConfig } from 'astro/config';
 import tailwindcss from '@tailwindcss/vite';
 import mdx from '@astrojs/mdx';
+import rehypeSlug from 'rehype-slug';
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 
 export default defineConfig({
   site: 'https://beparano.id',
   output: 'static',
+  markdown: {
+    rehypePlugins: [
+      rehypeSlug,
+      [rehypeAutolinkHeadings, {
+      behavior: 'append',
+      properties: { class: 'heading-anchor', ariaHidden: 'true', tabIndex: -1 },
+      content: { type: 'text', value: '#' },
+    }],
+    ],
+  },
   vite: {
     plugins: [tailwindcss()],
   },

package-lock.json

@@ -16,6 +16,8 @@
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.2.4",
     "astro": "^6.1.8",
+    "rehype-autolink-headings": "^7.1.0",
+    "rehype-slug": "^6.0.0",
     "tailwindcss": "^4.2.4"
   }
 }

package.json

@@ -13,29 +13,17 @@ const formattedDate = (date: Date) =>
 
 <Base>
   <section class="mb-16">
-    <!-- Avatar left -->
     <div class="flex items-center gap-5 mb-6">
       <img
         src="/images/avatar.JPEG"
         alt="Ryodari"
         class="w-16 h-16 rounded-sm object-cover"
       />
-    <div>
-      <p class="text-ink-secondary text-sm font-mono mb-0.5">Hi, I'm</p>
-      <h1 class="text-3xl font-semibold tracking-tight">Ryodari</h1>
-    </div>
+      <div>
+        <p class="text-ink-secondary text-sm font-mono mb-0.5">Hi, I'm</p>
+        <h1 class="text-3xl font-semibold tracking-tight">Ryodari</h1>
+      </div>
     </div>
-    <!-- Hero Avatar -->
-    <!--
-    <div>
-      <img
-        src="/images/avatar.JPEG"
-        alt="Ryodari"
-        class="w-full h-72 object-cover rounded-sm mb-8"
-      />
-      <p class="text-ink-secondary text-sm font-mono mb-1">Hi, I'm</p>
-      <h1 class="text-3xl font-semibold tracking-tight mb-4">Ryodari</h1>
-    </div>-->
     <p class="text-ink-tertiary text-sm font-mono mb-6">Berlin, Germany</p>
     <p class="text-ink-secondary leading-relaxed max-w-prose">
       Applied Computer Science @ HTW Berlin. Interested in decentralized systems, wireless networks, and mobile. Also writes about books and good food.

public/images/placeholder.svg

@@ -52,6 +52,7 @@
   ::selection {
     background-color: var(--color-surface-strong);
   }
+
 }
 
 /* ── Prose (Blog content) ─────────────────────────────────── */
@@ -98,4 +99,18 @@
     border: 1px solid var(--color-border);
     border-radius: 6px;
   }
+
+  /* Heading anchor links */
+  .heading-anchor {
+    text-decoration: none !important;
+    opacity: 0;
+    color: var(--color-ink-tertiary);
+    font-weight: 400;
+    margin-left: 0.1em;
+    transition: opacity 150ms ease;
+  }
+
+  :is(h1, h2, h3, h4, h5, h6):hover .heading-anchor {
+    opacity: 1;
+  }
 }