feat: migrated notes list to static generation instead of dynamic preact component

Author: aaronczichon

site/package-lock.json

@@ -29,6 +29,7 @@
 	},
 	"devDependencies": {
 		"@types/mapbox-gl": "^3.1.0",
+		"@types/markdown-it": "^14.1.1",
 		"prettier": "^3.2.5",
 		"prettier-plugin-astro": "^0.13.0"
 	}

site/package.json

@@ -0,0 +1,48 @@
+---
+import markdownit from "markdown-it";
+
+const { item } = Astro.props;
+
+const md = markdownit({
+  highlight: (str: string, lang: string) => {
+    console.log(lang);
+    return (
+      '<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;"><code style="padding-left: 8px;">' +
+      md.utils.escapeHtml(str) +
+      "</code></pre>"
+    );
+  },
+});
+
+const getFormattedDate = (date: string) => {
+  const d = new Date(date);
+  const browserLang = Astro.currentLocale;
+  return `${d.toLocaleDateString(browserLang)} ${d.toLocaleTimeString(browserLang, { timeStyle: "short" })}`;
+};
+---
+
+<li class="note-list-item">
+  <article>
+    <a href={`#${item.id}`} target="_blank">
+      <h3 id={item.id}>{item.title}</h3>
+    </a>
+    <p class="note-list-item--time">{getFormattedDate(item.date_created)}</p>
+    <p set:html={md.render(item.text)} />
+    <hr />
+  </article>
+</li>
+
+<script is:inline define:vars={{ id: item.id }}>
+  /**
+   * Extract the hash link from URL and check if it matches the item id
+   */
+  const applyActiveClass = () => {
+    const hash = location.hash.replace("#", "");
+    return hash && parseInt(hash) === id ? "note-list-item--active" : "";
+  };
+
+  const hashClass = applyActiveClass();
+  if (!hashClass) return;
+  const listElement = document.getElementById(id).closest("li");
+  listElement.classList.add(hashClass);
+</script>

site/src/components/Note.astro

@@ -0,0 +1,10 @@
+---
+import { fetchNotes } from "../functions/notes.func";
+import Note from "./Note.astro";
+
+const items = await fetchNotes();
+---
+
+<ol class="note-list">
+  {items.map((item: any) => <Note item={item} />)}
+</ol>

site/src/components/NoteList.astro

@@ -1,6 +1,6 @@
 ---
 import Layout from "../layouts/Layout.astro";
-import NoteList from "../components/dynamic/NoteList";
+import NoteList from "../components/NoteList.astro";
 import { Image } from "astro:assets";
 
 import rssIcon from "../resources/rss.svg";
@@ -22,7 +22,7 @@ import rssIcon from "../resources/rss.svg";
     </h1>
     <p>Everything that pops in my mind and isn't a full blog post.</p>
     <ol class="note-list">
-      <NoteList client:visible />
+      <NoteList />
     </ol>
   </main>
 </Layout>