links page dark mode, github markdown works

Author: nemanjam

docs/working-notes/my-old-code/links.astro

@@ -0,0 +1,85 @@
+---
+import { Markdown } from 'astro-remote';
+
+import List from '@/layouts/List.astro';
+import { BOOKMARKS } from '@/constants/data';
+import { getPageMetadata } from '@/utils/metadata';
+
+const { README_RAW_URL, REPO } = BOOKMARKS;
+
+const readmeContent = await fetch(README_RAW_URL).then((response) => response.text());
+
+const metadata = getPageMetadata('lists/links');
+
+// not generating id="..." links href="#..."
+---
+
+<List {metadata}>
+  <div class="markdown-body">
+    <p>
+      My personal bookmarks collection which is hosted in this repo: <a href={REPO} target="_blank"
+        >{REPO}</a
+      >
+    </p>
+
+    <Markdown content={readmeContent} sanitize={{ dropElements: ['h1'] }} />
+  </div>
+</List>
+
+<style is:global>
+  .markdown-body {
+    /* set transparent bg-color */
+    @apply !bg-transparent;
+
+    /* fix list style */
+    ul,
+    ol {
+      list-style: revert;
+    }
+  }
+</style>
+
+<script>
+  import { THEME_CONFIG } from '@/constants/themes';
+  import { getCurrentMode } from '@/utils/dom';
+  import { removeTrailingSlash } from '@/utils/paths';
+
+  import type { ChangeThemeCustomEvent } from '@/types/constants';
+
+  const { CHANGE_EVENT } = THEME_CONFIG;
+
+  const loadStylesheet = (href: string) => {
+    const existingLink = document.querySelector('link[data-theme="dynamic"]');
+    if (existingLink) existingLink.remove();
+
+    const trimmedHref = removeTrailingSlash(href);
+
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = trimmedHref;
+    link.dataset.theme = 'dynamic';
+    document.head.appendChild(link);
+  };
+
+  const loadGithubTheme = (mode: 'dark' | 'light') => {
+    if (mode === 'dark') {
+      // loadStylesheet('node_modules/github-markdown-css/github-markdown-dark.css');
+      import('github-markdown-css/github-markdown-dark.css');
+    } else {
+      import('github-markdown-css/github-markdown-light.css');
+      // loadStylesheet('node_modules/github-markdown-css/github-markdown-light.css');
+    }
+  };
+
+  // will run only on page load
+  const mode = getCurrentMode();
+  loadGithubTheme(mode);
+
+  // will run on button click
+  document.addEventListener(CHANGE_EVENT, async (event) => {
+    const customEvent = event as ChangeThemeCustomEvent;
+    const { mode } = customEvent.detail.theme;
+
+    loadGithubTheme(mode);
+  });
+</script>

docs/working-notes/todo3.md

@@ -495,5 +495,8 @@ ovo radi
 remote markdown
 not generating id="..." links href="#..."
 custom my-prose-links
+
+// dark theme for github markdown
+https://github.com/sindresorhus/github-markdown-css/issues/104
 ------------
 ```