From 2d696c58d5379d794b084c968a1b46ed7419020b Mon Sep 17 00:00:00 2001
From: xnought <bertuccd@oregonstate.edu>
Date: Mon, 27 Nov 2023 22:36:55 -0800
Subject: [PATCH] feat: replace cite with link

---
 frontend/src/lib/Markdown.svelte        | 16 +++++++++++++++-
 frontend/src/lib/References.svelte      |  6 +++---
 frontend/src/routes/upload/+page.svelte |  2 +-
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lib/Markdown.svelte b/frontend/src/lib/Markdown.svelte
index d2bdeae0..92929eda 100644
--- a/frontend/src/lib/Markdown.svelte
+++ b/frontend/src/lib/Markdown.svelte
@@ -4,7 +4,21 @@
 
 	export let text = ``;
 	// they recommend also sanitizing input text https://github.com/cure53/DOMPurify
-	$: mdToHTML = marked(text);
+
+	$: mdToHTML = marked(replaceCite(text));
+
+	/**
+	 * @todo this is a hacky way to do this, but it works for now
+	 * Instead use the builtin extensions https://marked.js.org/using_pro#extensions
+	 */
+	function replaceCite(str: string) {
+		// replace \cite{} with <a href="#ref-1">[1]</a>
+		const newStr = str.replaceAll(/\\cite{(.+?)}/g, (match, p1) => {
+			console.log(match, p1);
+			return `[<a href="#${p1}">${p1}</a>]`;
+		});
+		return newStr;
+	}
 </script>
 
 {@html mdToHTML}
diff --git a/frontend/src/lib/References.svelte b/frontend/src/lib/References.svelte
index f4907f9b..2b1c80cb 100644
--- a/frontend/src/lib/References.svelte
+++ b/frontend/src/lib/References.svelte
@@ -34,9 +34,9 @@
 
 {#if bib}
 	{#each bib.entries_raw as entry, i}
-		<div class="flex gap-2 mt-2">
-			<div class="w-5">
-				[{i + 1}]
+		<div class="mt-2" id={`#${entry._id}`}>
+			<div style="font-size: 12px;">
+				[{entry._id}]
 			</div>
 			<div>
 				<div style="font-size: 17px;">
diff --git a/frontend/src/routes/upload/+page.svelte b/frontend/src/routes/upload/+page.svelte
index 40695a5e..f5cc2084 100644
--- a/frontend/src/routes/upload/+page.svelte
+++ b/frontend/src/routes/upload/+page.svelte
@@ -61,7 +61,7 @@
 
 		<Card
 			class="max-w-full"
-			style="height: 600px; overflow-y: scroll; padding: 0;"
+			style="height: 600px; overflow-y: scroll; padding: 0; padding-top: 4px; padding-left: 4px;"
 		>
 			<Tabs contentClass="bg-none p-5" style="underline">
 				<TabItem title="article content" open>