From e57be64043fcde3d619efc24cbdbf24f37eb3c18 Mon Sep 17 00:00:00 2001
From: Nils Pukropp <nils@narl.io>
Date: Fri, 27 Mar 2026 15:09:16 +0100
Subject: [PATCH] added citations

---
 frontend/src/pages/posts/[slug].astro | 22 +++++++++++++---
 frontend/src/styles/global.css        | 38 +++++++++++++++++++++++++++
 2 files changed, 57 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/posts/[slug].astro b/frontend/src/pages/posts/[slug].astro
index 3e99f2f..da4c595 100644
--- a/frontend/src/pages/posts/[slug].astro
+++ b/frontend/src/pages/posts/[slug].astro
@@ -14,12 +14,30 @@ let post: PostDetail | null = null;
 let html = '';
 let error = '';
 
+// Custom citation pre-processor
+function processCitations(text: string) {
+  // Using RegExp constructor to completely bypass Astro/esbuild literal parsing bugs
+  const citeRegex = new RegExp('\\', 'g');
+  
+  return text.replace(citeRegex, (match, citations) => {
+    const links = citations.split(',').map((c: string) => {
+      const id = c.trim();
+      return `<a href="#cite-${id}" class="text-sapphire hover:text-sky transition-colors no-underline">${id}</a>`;
+    }).join(', ');
+    
+    return `<sup class="bg-surface0 px-1.5 py-0.5 rounded-md border border-surface1 ml-0.5 font-mono text-[10px] md:text-xs shadow-sm align-super">[${links}]</sup>`;
+  });
+}
+
 try {
   const response = await fetch(`${API_URL}/api/posts/${slug}`);
   if (response.ok) {
     post = await response.json();
     if (post) {
-      html = await marked.parse(post.content);
+      // 1. Process citations first
+      const processedContent = processCitations(post.content);
+      // 2. Then parse the rest of the markdown
+      html = await marked.parse(processedContent);
     }
   } else {
     error = 'Post not found';
@@ -76,12 +94,10 @@ function formatSlug(slug: string) {
     )}
   </article>
 
-  <!-- KaTeX for LaTeX Math Rendering -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css" crossorigin="anonymous">
   <script is:inline src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.js" crossorigin="anonymous"></script>
   <script is:inline src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/contrib/auto-render.min.js" crossorigin="anonymous"></script>
 
-  <!-- Highlight.js for Code Blocks -->
   <script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
 
   <script>
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index bd0151b..006d03c 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -145,3 +145,41 @@ body {
 .hljs-keyword, .hljs-selector-tag { color: var(--mauve) !important; font-weight: bold; }
 .hljs-string { color: var(--green) !important; }
 .hljs-comment { color: var(--subtext0) !important; font-style: italic; }
+
+/* --- CITATION & REFERENCE STYLES --- */
+
+.prose sup {
+  /* Offsets the anchor jump so the fixed header (if you add one) doesn't cover the text */
+  scroll-margin-top: 2rem; 
+}
+
+/* Container for the references at the bottom of the post */
+.prose .reference-list {
+  @apply mt-12 pt-8 border-t;
+  border-color: var(--surface1);
+}
+
+.prose .reference-list h3 {
+  @apply text-xl font-bold mb-6;
+  color: var(--lavender) !important;
+}
+
+/* Individual reference item */
+.prose .reference-item {
+  @apply flex gap-4 mb-4 p-3 rounded-lg border border-transparent transition-all duration-500 text-sm md:text-base;
+  color: var(--subtext0) !important;
+  scroll-margin-top: 100px;
+}
+
+/* Highlight effect when jumping to a specific reference */
+.prose .reference-item:target {
+  background-color: color-mix(in srgb, var(--surface0) 60%, transparent);
+  border-color: var(--surface1);
+  box-shadow: 0 0 15px color-mix(in srgb, var(--sapphire) 20%, transparent);
+}
+
+/* The [1] numbering next to the reference text */
+.prose .reference-number {
+  @apply font-mono font-bold shrink-0;
+  color: var(--sapphire) !important;
+}