improve permalink

Author: winterjung

astro.config.mjs

@@ -1,5 +1,6 @@
 import sitemap from '@astrojs/sitemap'
 import { defineConfig } from 'astro/config'
+import { h } from 'hastscript'
 import rehypeAutolinkHeadings from 'rehype-autolink-headings'
 import rehypeSlug from 'rehype-slug'
 
@@ -17,7 +18,17 @@ export default defineConfig({
         dark: 'github-dark',
       },
     },
-    rehypePlugins: [rehypeSlug, [rehypeAutolinkHeadings, { behavior: 'wrap' }]],
+    rehypePlugins: [
+      rehypeSlug,
+      [
+        rehypeAutolinkHeadings,
+        {
+          behavior: 'append',
+          properties: { class: 'heading-link', ariaLabel: 'Link to this section' },
+          content: h('span.heading-link-icon', '#'),
+        },
+      ],
+    ],
   },
   i18n: {
     defaultLocale: 'ko',

package-lock.json

@@ -21,9 +21,10 @@
   },
   "homepage": "https://www.winterjung.dev",
   "dependencies": {
-    "astro": "^5.1.1",
+    "@astrojs/rss": "^4.0.10",
     "@astrojs/sitemap": "^3.2.1",
-    "@astrojs/rss": "^4.0.10"
+    "astro": "^5.1.1",
+    "hastscript": "^9.0.1"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.4",

package.json

@@ -36,6 +36,23 @@ const displayDate = lastmod || date
     </main>
     <!-- Plausible Analytics -->
     <script defer data-domain="winterjung.dev" src="https://plausible.io/js/script.js"></script>
+    <!-- Heading link copy to clipboard -->
+    <script>
+      document.querySelectorAll('.heading-link').forEach(link => {
+        link.addEventListener('click', async (e) => {
+          e.preventDefault()
+          const url = decodeURI(new URL(link.getAttribute('href') || '', window.location.href).href)
+          await navigator.clipboard.writeText(url)
+
+          const icon = link.querySelector('.heading-link-icon')
+          if (icon) {
+            const original = icon.textContent
+            icon.textContent = '✓'
+            setTimeout(() => { icon.textContent = original }, 1000)
+          }
+        })
+      })
+    </script>
   </body>
 </html>
 

src/layouts/PostLayout.astro

@@ -1,7 +1,7 @@
 ---
 import { getCollection } from 'astro:content'
+import { defaultLang, languages } from '../../i18n/ui'
 import PostLayout from '../../layouts/PostLayout.astro'
-import { languages, defaultLang } from '../../i18n/ui'
 
 export async function getStaticPaths() {
   const nonDefaultLangs = Object.keys(languages).filter((lang) => lang !== defaultLang) as Array<

src/pages/[lang]/[slug].astro

@@ -1,8 +1,8 @@
 ---
 import { getCollection } from 'astro:content'
-import BaseLayout from '../../layouts/BaseLayout.astro'
-import { languages, defaultLang, ui } from '../../i18n/ui'
+import { defaultLang, languages, ui } from '../../i18n/ui'
 import { useTranslations } from '../../i18n/utils'
+import BaseLayout from '../../layouts/BaseLayout.astro'
 
 export function getStaticPaths() {
   return Object.keys(languages)

src/pages/[lang]/index.astro

@@ -335,12 +335,39 @@ nav {
   font-size: 0.875rem;
 }
 
-/* H2 Permalink styling */
-h2 a {
-  color: inherit;
+/* Heading permalink styling */
+.heading-link {
+  color: var(--color-text-secondary);
   text-decoration: none;
+  margin-left: 0.3em;
+  opacity: 0;
+  transition: opacity 0.15s;
 }
 
-h2 a:hover {
-  text-decoration: underline;
+.heading-link:hover {
+  color: var(--color-link);
+  text-decoration: none;
+}
+
+h2:hover .heading-link,
+h3:hover .heading-link,
+h4:hover .heading-link,
+h5:hover .heading-link,
+h6:hover .heading-link {
+  opacity: 1;
+}
+
+.heading-link-icon {
+  font-size: 0.8em;
+}
+
+/* Mobile: always show heading link */
+@media (max-width: 768px) {
+  .heading-link {
+    opacity: 0.5;
+  }
+
+  .heading-link:active {
+    opacity: 1;
+  }
 }