From 6f1626b3b881baff3144fe71769e004af2ccc2d0 Mon Sep 17 00:00:00 2001
From: Nicola Zangrandi <wasp@wasp.ovh>
Date: Fri, 21 Feb 2025 09:09:13 +0100
Subject: [PATCH] refactor(frontend): remove link parsing and use backend links

---
 frontend/src/lib/index.ts                   |   2 +
 frontend/src/lib/markdown.ts                |  18 +-
 frontend/src/routes/notes/[id]/+page.svelte | 187 ++++++++------------
 3 files changed, 87 insertions(+), 120 deletions(-)

diff --git a/frontend/src/lib/index.ts b/frontend/src/lib/index.ts
index dfb2d2d..a0dd521 100644
--- a/frontend/src/lib/index.ts
+++ b/frontend/src/lib/index.ts
@@ -4,6 +4,8 @@ export interface Note {
 	content: string;
 	createdAt: Date;
 	updatedAt: Date;
+	linksTo?: Note[];
+	linkedBy?: Note[];
 }
 
 import { writable } from 'svelte/store';
diff --git a/frontend/src/lib/markdown.ts b/frontend/src/lib/markdown.ts
index be87e3a..b622185 100644
--- a/frontend/src/lib/markdown.ts
+++ b/frontend/src/lib/markdown.ts
@@ -14,11 +14,17 @@ export function stripMarkdown(text: string): string {
 		.trim();
 }
 
-export async function renderMarkdown(text: string): Promise<string> {
-	// Replace [[link]] with anchor tags having data-title attribute
-	const linkedText = text.replace(
-		/\[\[([^\]]+)\]\]/g,
-		'<a href="#" class="note-link" data-title="$1">$1</a>'
-	);
+export async function renderMarkdown(
+	text: string,
+	linksTo: { id: string; title: string }[] = []
+): Promise<string> {
+	// Replace [[link]] with anchor tags using the backend-provided links
+	const linkedText = text.replace(/\[\[([^\]]+)\]\]/g, (match, title) => {
+		const link = linksTo.find((l) => l.title === title);
+		if (link) {
+			return `<a href="/notes/${link.id}" class="note-link">${title}</a>`;
+		}
+		return `<a href="/notes/new?title=${encodeURIComponent(title)}" class="note-link">${title}</a>`;
+	});
 	return marked(linkedText);
 }
diff --git a/frontend/src/routes/notes/[id]/+page.svelte b/frontend/src/routes/notes/[id]/+page.svelte
index 99482d3..004e79b 100644
--- a/frontend/src/routes/notes/[id]/+page.svelte
+++ b/frontend/src/routes/notes/[id]/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { run, preventDefault } from 'svelte/legacy';
+	import { run } from 'svelte/legacy';
 	import { notes } from '$lib';
 	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
@@ -11,6 +11,8 @@
 		content: string;
 		createdAt: Date;
 		updatedAt: Date;
+		linksTo?: Note[];
+		linkedBy?: Note[];
 	}
 
 	let note: Note | undefined = $state();
@@ -46,123 +48,80 @@
 			console.error('Failed to update note:', error);
 		}
 	}
-
-	async function handleLinkClick(event: MouseEvent | KeyboardEvent) {
-		const target = event.target as HTMLElement;
-		if (target.tagName === 'A' && target.classList.contains('note-link')) {
-			event.preventDefault();
-			const title = target.getAttribute('data-title');
-			if (!title) return;
-
-			// Check if a note with this title exists
-			const existingNote = $notes.find((n) => n.title === title);
-			if (existingNote) {
-				// Navigate to the existing note
-				goto(`/notes/${existingNote.id}`);
-			} else {
-				// Navigate to the new note page with the title pre-filled
-				goto(`/notes/new?title=${encodeURIComponent(title)}`);
-			}
-		}
-	}
 </script>
 
-<div
-	class="container"
-	onclick={handleLinkClick}
-	onkeydown={(event) => {
-		if (event.key === 'Enter' || event.key === ' ') {
-			handleLinkClick(event);
-		}
-	}}
-	role="button"
-	tabindex="0"
->
-	<section class="section">
-		{#if note}
-			{#if isEditing}
-				<form onsubmit={preventDefault(handleSave)}>
-					<div class="field">
-						<label class="label" for="title">Title</label>
-						<div class="control">
-							<input id="title" class="input" type="text" bind:value={editedTitle} required />
-						</div>
-					</div>
-
-					<div class="field">
-						<label class="label" for="content">Content</label>
-						<div class="control">
-							<textarea id="content" class="textarea" bind:value={editedContent} rows="10" required
-							></textarea>
-						</div>
-						<div class="mt-4 box">
-							<label class="label" for="preview">Preview</label>
-							<div id="preview" class="content" aria-live="polite">
-								{#await renderMarkdown(note.content)}
-									<p>Rendering markdown...</p>
-								{:then markdownContent}
-									<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-									{@html markdownContent}
-								{:catch err}
-									<p>Error rendering the markdown content!i {err.message}</p>
-								{/await}
-							</div>
-						</div>
-					</div>
-
-					<div class="field is-grouped">
-						<div class="control">
-							<button type="submit" class="button is-primary">Save</button>
-						</div>
-						<div class="control">
-							<button
-								type="button"
-								class="button is-light"
-								onclick={() => {
-									isEditing = false;
-									goto(`/notes/${id}`);
-								}}
-							>
-								Cancel
-							</button>
-						</div>
-					</div>
-				</form>
-			{:else}
-				<div class="level">
-					<div class="level-left">
-						<div class="level-item">
-							<h1 class="title">{note.title}</h1>
-						</div>
-					</div>
-					<div class="level-right">
-						<div class="level-item">
-							<button class="button is-primary" onclick={() => (isEditing = true)}> Edit </button>
-						</div>
-					</div>
+{#if note}
+	<div class="container">
+		{#if isEditing}
+			<div class="field">
+				<div class="control">
+					<input
+						class="input is-large"
+						type="text"
+						placeholder="Note Title"
+						bind:value={editedTitle}
+					/>
 				</div>
-
-				<div class="content">
-					{#await renderMarkdown(note.content)}
-						<p>Rendering markdown...</p>
-					{:then markdownContent}
-						<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-						{@html markdownContent}
-					{:catch err}
-						<p>Error rendering the markdown content!i {err.message}</p>
-					{/await}
+			</div>
+			<div class="field">
+				<div class="control">
+					<textarea class="textarea" placeholder="Note Content" rows="20" bind:value={editedContent}
+					></textarea>
 				</div>
-
-				<p class="has-text-grey is-size-7">
-					Last updated: {note.updatedAt.toLocaleString()}
-				</p>
-			{/if}
+			</div>
+			<div class="field is-grouped">
+				<div class="control">
+					<button class="button is-primary" onclick={handleSave}>Save</button>
+				</div>
+				<div class="control">
+					<button class="button" onclick={() => (isEditing = false)}>Cancel</button>
+				</div>
+			</div>
 		{:else}
-			<div class="notification is-danger">Note not found</div>
+			<div class="content">
+				<h1 class="title">{note.title}</h1>
+				{#await renderMarkdown(note.content, note.linksTo || [])}
+					<p>Loading...</p>
+				{:then html}
+					<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+					{@html html}
+				{/await}
+				<div class="field is-grouped mt-4">
+					<div class="control">
+						<button class="button is-primary" onclick={() => (isEditing = true)}>Edit</button>
+					</div>
+				</div>
+			</div>
 		{/if}
 
-		<div class="mt-4">
-			<a href="/" class="button is-light">Back to Notes</a>
-		</div>
-	</section>
-</div>
+		{#if (note.linksTo || []).length > 0}
+			<div class="box mt-4">
+				<h2 class="title is-5">Links to:</h2>
+				<div class="tags">
+					{#each note.linksTo || [] as link}
+						<a href="/notes/{link.id}" class="tag is-link">{link.title}</a>
+					{/each}
+				</div>
+			</div>
+		{/if}
+
+		{#if (note.linkedBy || []).length > 0}
+			<div class="box mt-4">
+				<h2 class="title is-5">Referenced by:</h2>
+				<div class="tags">
+					{#each note.linkedBy || [] as link}
+						<a href="/notes/{link.id}" class="tag is-info">{link.title}</a>
+					{/each}
+				</div>
+			</div>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.container {
+		max-width: 800px;
+		margin: 0 auto;
+		padding: 2rem;
+	}
+</style>