feat: Add obsidian style note linking with [[link]]

src/lib/markdown.ts

@@ -15,5 +15,7 @@ export function stripMarkdown(text: string): string {
 }
 
 export function renderMarkdown(text: string): string {
-    return marked(text);
+    // Replace [[link]] with anchor tags having data-title attribute
+    const linkedText = text.replace(/\[\[([^\]]+)\]\]/g, '<a href="#" class="note-link" data-title="$1">$1</a>');
+    return marked(linkedText);
 }

src/routes/notes/[id]/+page.svelte

@@ -12,21 +12,18 @@
     
     $: id = $page.params.id;
     
-    onMount(() => {
+    $: {
-        const unsubscribe = notes.subscribe(allNotes => {
+        if ($notes && id) {
-            if (!allNotes || !id) return;
+            note = $notes.find(n => n.id === id);
-            
-            note = allNotes.find(n => n.id === id);
             if (note) {
                 editedTitle = note.title;
                 editedContent = note.content;
-            } else if (allNotes.length > 0) {
+            } else if ($notes.length > 0) {
                 // Only redirect if we have loaded notes and didn't find this one
                 goto('/');
             }
-        });
+        }
-        return () => unsubscribe();
+    }
-    });
     
     async function handleSave() {
         if (!editedTitle || !editedContent) return;
@@ -41,9 +38,28 @@
             console.error('Failed to update note:', error);
         }
     }
+
+    async function handleLinkClick(event: MouseEvent) {
+        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">
+<div class="container" on:click={handleLinkClick}>
     <section class="section">
         {#if note}
             {#if isEditing}
@@ -72,6 +88,12 @@
                                 required
                             ></textarea>
                         </div>
+                        <div class="mt-4 box">
+                            <label class="label">Preview</label>
+                            <div class="content">
+                                {@html renderMarkdown(editedContent)}
+                            </div>
+                        </div>
                     </div>
                     
                     <div class="field is-grouped">

src/routes/notes/new/+page.svelte

@@ -1,27 +1,22 @@
 <script lang="ts">
     import { notes } from '$lib';
     import { goto } from '$app/navigation';
+    export let data;
     
-    let title = '';
+    let title = data.props.prefilledTitle;
     let content = '';
-    let saving = false;
+
-    let error = '';
+    async function handleSave() {
-    
-    async function handleSubmit() {
         if (!title || !content) return;
-        
+
-        saving = true;
-        error = '';
-        
         try {
-            await notes.add({ title, content });
+            await notes.add({
-            await notes.load(); // Reload notes before navigation
+                title,
-            await goto('/');
+                content
-        } catch (err) {
+            });
-            console.error('Failed to create note:', err);
+            goto('/');
-            error = 'Failed to save note. Please try again.';
+        } catch (error) {
-        } finally {
+            console.error('Failed to create note:', error);
-            saving = false;
         }
     }
 </script>
@@ -29,8 +24,7 @@
 <div class="container">
     <section class="section">
         <h1 class="title">New Note</h1>
-        
+        <form on:submit|preventDefault={handleSave}>
-        <form on:submit|preventDefault={handleSubmit}>
             <div class="field">
                 <label class="label" for="title">Title</label>
                 <div class="control">
@@ -43,7 +37,7 @@
                     >
                 </div>
             </div>
-            
+
             <div class="field">
                 <label class="label" for="content">Content</label>
                 <div class="control">
@@ -52,30 +46,15 @@
                         class="textarea" 
                         bind:value={content} 
                         rows="10"
-                        placeholder="Write your note in markdown..."
                         required
                     ></textarea>
                 </div>
             </div>
-            
+
-            {#if error}
+            <div class="field">
-                <div class="notification is-danger">
-                    {error}
-                </div>
-            {/if}
-            
-            <div class="field is-grouped">
                 <div class="control">
-                    <button 
+                    <button type="submit" class="button is-primary">Create</button>
-                        type="submit" 
+                    <button type="button" class="button is-light" on:click={() => goto('/')}>Cancel</button>
-                        class="button is-primary"
-                        disabled={saving}
-                    >
-                        {saving ? 'Saving...' : 'Save'}
-                    </button>
-                </div>
-                <div class="control">
-                    <a href="/" class="button is-light" disabled={saving}>Cancel</a>
                 </div>
             </div>
         </form>

src/routes/notes/new/+page.ts

@@ -1,17 +1,12 @@
 import { notes } from '$lib';
 import type { PageLoad } from './$types';
 
-export const load: PageLoad = async () => {
+export const load: PageLoad = async ({ url }) => {
-    try {
+    const title = url.searchParams.get('title') || '';
-        await notes.load();
+    return {
-        return {
+        status: 'success',
-            status: 'success'
+        props: {
-        };
+            prefilledTitle: title
-    } catch (error) {
+        }
-        console.error('Failed to load notes:', error);
+    };
-        return {
-            status: 'error',
-            error: 'Failed to load notes'
-        };
-    }
 };