fix table of contents anchor link navigation on Links page

Author: nemanjam

docs/working-notes/todo3.md

@@ -500,7 +500,7 @@ custom my-prose-links
 https://github.com/sindresorhus/github-markdown-css/issues/104
 https://github.com/sindresorhus/github-markdown-css
 
-table of contents id links
+    table of contents id links
 a href open in new tab
 fix links page links color for history back view transition
 
@@ -513,5 +513,7 @@ ask about app start handler for log env vars
 fix image sizes for gallery and other
     update bg color meta tag
     fix links page on user dark mode preference text color
+
+Links page open links in new tab
 ------------
 ```

package.json

@@ -42,6 +42,7 @@
     "dotenv": "^16.4.5",
     "feed": "^4.2.2",
     "giscus": "^1.5.0",
+    "github-slugger": "^2.0.0",
     "mdast-util-to-string": "^4.0.0",
     "nanostores": "^0.10.3",
     "object-treeify": "^4.0.1",

src/components/Heading.astro

@@ -0,0 +1,25 @@
+---
+import { Icon } from 'astro-icon/components';
+
+import GithubSlugger from 'github-slugger';
+
+const slugger = new GithubSlugger();
+
+const { as: Component, text } = Astro.props;
+
+// id is without #
+const slug = slugger.slug(text);
+const href = `#${slug}`;
+---
+
+<div class="flex gap-2 items-center group">
+  <a id={slug} href={href} class="flex target:!outline-none">
+    <Icon
+      name="mdi:link-variant"
+      class="inline-block h-5 w-5 text-transparent group-hover:text-captions"
+    />
+  </a>
+  <Component>
+    <slot />
+  </Component>
+</div>

src/pages/links.astro

@@ -5,6 +5,7 @@ import '@/assets/styles/github-markdown.css';
 import { Markdown } from 'astro-remote';
 
 import List from '@/layouts/List.astro';
+import Heading from '@/components/Heading.astro';
 import { BOOKMARKS } from '@/constants/data';
 import { SELECTORS } from '@/constants/dom';
 import { getPageMetadata } from '@/utils/metadata';
@@ -16,8 +17,6 @@ const readmeContent = await fetch(README_RAW_URL).then((response) => response.te
 const metadata = getPageMetadata('lists/links');
 
 const { GITHUB_MARKDOWN_BODY_ID } = SELECTORS;
-
-// not generating id="..." links href="#..."
 ---
 
 <List {metadata}>
@@ -28,7 +27,11 @@ const { GITHUB_MARKDOWN_BODY_ID } = SELECTORS;
       >
     </p>
 
-    <Markdown content={readmeContent} sanitize={{ dropElements: ['h1'] }} />
+    <Markdown
+      content={readmeContent}
+      sanitize={{ dropElements: ['h1'], allowComponents: true }}
+      components={{ Heading }}
+    />
   </div>
 </List>