feat(notes): added notes graph
This commit is contained in:
parent
c11301e0c0
commit
829f3ced73
GPG key ID:
43C1470D890F23ED
11 changed files with 7602 additions and 91 deletions
|
|
@ -5,8 +5,8 @@
|
|||
"name": "quicknotes",
|
||||
"dependencies": {
|
||||
"@types/marked": "^6.0.0",
|
||||
"bulma": "^1.0.3",
|
||||
"marked": "^15.0.7",
|
||||
"vis-network": "^9.1.9",
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/compat": "^1.2.5",
|
||||
|
|
@ -33,6 +33,8 @@
|
|||
"packages": {
|
||||
"@ampproject/remapping": ["@ampproject/remapping@2.3.0", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw=="],
|
||||
|
||||
"@egjs/hammerjs": ["@egjs/hammerjs@2.0.17", "", { "dependencies": { "@types/hammerjs": "^2.0.36" } }, "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A=="],
|
||||
|
||||
"@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.24.2", "", { "os": "aix", "cpu": "ppc64" }, "sha512-thpVCb/rhxE/BnMLQ7GReQLLN8q9qbHmI55F4489/ByVg2aQaQ6kbcLb6FHkocZzQhxc4gx0sCk0tJkKBFzDhA=="],
|
||||
|
||||
"@esbuild/android-arm": ["@esbuild/android-arm@0.24.2", "", { "os": "android", "cpu": "arm" }, "sha512-tmwl4hJkCfNHwFB3nBa8z1Uy3ypZpxqxfTQOcHX+xRByyYgunVbZ9MzUUfb0RxaHIMnbHagwAxuTL+tnNM+1/Q=="],
|
||||
|
|
@ -179,6 +181,8 @@
|
|||
|
||||
"@types/estree": ["@types/estree@1.0.6", "", {}, "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw=="],
|
||||
|
||||
"@types/hammerjs": ["@types/hammerjs@2.0.46", "", {}, "sha512-ynRvcq6wvqexJ9brDMS4BnBLzmr0e14d6ZJTEShTBWKymQiHwlAyGu0ZPEFI2Fh1U53F7tN9ufClWM5KvqkKOw=="],
|
||||
|
||||
"@types/json-schema": ["@types/json-schema@7.0.15", "", {}, "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="],
|
||||
|
||||
"@types/marked": ["@types/marked@6.0.0", "", { "dependencies": { "marked": "*" } }, "sha512-jmjpa4BwUsmhxcfsgUit/7A9KbrC48Q0q8KvnY107ogcjGgTFDlIL3RpihNpx2Mu1hM4mdFQjoVc4O6JoGKHsA=="],
|
||||
|
|
@ -223,8 +227,6 @@
|
|||
|
||||
"braces": ["braces@3.0.3", "", { "dependencies": { "fill-range": "^7.1.1" } }, "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA=="],
|
||||
|
||||
"bulma": ["bulma@1.0.3", "", {}, "sha512-9eVXBrXwlU337XUXBjIIq7i88A+tRbJYAjXQjT/21lwam+5tpvKF0R7dCesre9N+HV9c6pzCNEPKrtgvBBes2g=="],
|
||||
|
||||
"callsites": ["callsites@3.1.0", "", {}, "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="],
|
||||
|
||||
"chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
|
||||
|
|
@ -237,6 +239,8 @@
|
|||
|
||||
"color-name": ["color-name@1.1.4", "", {}, "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="],
|
||||
|
||||
"component-emitter": ["component-emitter@1.3.1", "", {}, "sha512-T0+barUSQRTUQASh8bx02dl+DhF54GtIDY13Y3m9oWTklKbb3Wv974meRpeZ3lp1JpLVECWWNHC4vaG2XHXouQ=="],
|
||||
|
||||
"concat-map": ["concat-map@0.0.1", "", {}, "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="],
|
||||
|
||||
"cookie": ["cookie@0.6.0", "", {}, "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw=="],
|
||||
|
|
@ -341,6 +345,8 @@
|
|||
|
||||
"json-stable-stringify-without-jsonify": ["json-stable-stringify-without-jsonify@1.0.1", "", {}, "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw=="],
|
||||
|
||||
"keycharm": ["keycharm@0.4.0", "", {}, "sha512-TyQTtsabOVv3MeOpR92sIKk/br9wxS+zGj4BG7CR8YbK4jM3tyIBaF0zhzeBUMx36/Q/iQLOKKOT+3jOQtemRQ=="],
|
||||
|
||||
"keyv": ["keyv@4.5.4", "", { "dependencies": { "json-buffer": "3.0.1" } }, "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw=="],
|
||||
|
||||
"kleur": ["kleur@4.1.5", "", {}, "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ=="],
|
||||
|
|
@ -469,6 +475,14 @@
|
|||
|
||||
"util-deprecate": ["util-deprecate@1.0.2", "", {}, "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="],
|
||||
|
||||
"uuid": ["uuid@9.0.1", "", { "bin": { "uuid": "dist/bin/uuid" } }, "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA=="],
|
||||
|
||||
"vis-data": ["vis-data@7.1.9", "", { "peerDependencies": { "uuid": "^3.4.0 || ^7.0.0 || ^8.0.0 || ^9.0.0", "vis-util": "^5.0.1" } }, "sha512-COQsxlVrmcRIbZMMTYwD+C2bxYCFDNQ2EHESklPiInbD/Pk3JZ6qNL84Bp9wWjYjAzXfSlsNaFtRk+hO9yBPWA=="],
|
||||
|
||||
"vis-network": ["vis-network@9.1.9", "", { "peerDependencies": { "@egjs/hammerjs": "^2.0.0", "component-emitter": "^1.3.0", "keycharm": "^0.2.0 || ^0.3.0 || ^0.4.0", "uuid": "^3.4.0 || ^7.0.0 || ^8.0.0 || ^9.0.0", "vis-data": "^6.3.0 || ^7.0.0", "vis-util": "^5.0.1" } }, "sha512-Ft+hLBVyiLstVYSb69Q1OIQeh3FeUxHJn0WdFcq+BFPqs+Vq1ibMi2sb//cxgq1CP7PH4yOXnHxEH/B2VzpZYA=="],
|
||||
|
||||
"vis-util": ["vis-util@5.0.7", "", { "peerDependencies": { "@egjs/hammerjs": "^2.0.0", "component-emitter": "^1.3.0 || ^2.0.0" } }, "sha512-E3L03G3+trvc/X4LXvBfih3YIHcKS2WrP0XTdZefr6W6Qi/2nNCqZfe4JFfJU6DcQLm6Gxqj2Pfl+02859oL5A=="],
|
||||
|
||||
"vite": ["vite@6.1.0", "", { "dependencies": { "esbuild": "^0.24.2", "postcss": "^8.5.1", "rollup": "^4.30.1" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", "jiti": ">=1.21.0", "less": "*", "lightningcss": "^1.21.0", "sass": "*", "sass-embedded": "*", "stylus": "*", "sugarss": "*", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-RjjMipCKVoR4hVfPY6GQTgveinjNuyLw+qruksLDvA5ktI1150VmcMBKmQaEWJhg/j6Uaf6dNCNA0AfdzUb/hQ=="],
|
||||
|
||||
"vitefu": ["vitefu@1.0.5", "", { "peerDependencies": { "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0" }, "optionalPeers": ["vite"] }, "sha512-h4Vflt9gxODPFNGPwp4zAMZRpZR7eslzwH2c5hn5kNZ5rhnKyRJ50U+yGCdc2IRaBs8O4haIgLNGrV5CrpMsCA=="],
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@types/marked": "^6.0.0",
|
||||
"bulma": "^1.0.3",
|
||||
"marked": "^15.0.7"
|
||||
"marked": "^15.0.7",
|
||||
"vis-network": "^9.1.9"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,79 +1,84 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
||||
/>
|
||||
<link rel="stylesheet" href="/css/bulma.min.css" />
|
||||
<!-- Font Awesome -->
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
|
||||
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"
|
||||
/>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
<link rel="stylesheet" href="/css/bulma.min.css" />
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
|
||||
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
|
||||
crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
|
||||
<!-- Dark mode theme using Bulma's CSS variables -->
|
||||
<style>
|
||||
body.dark-mode {
|
||||
--bulma-scheme-main: #1a1a1a;
|
||||
--bulma-scheme-main-bis: #242424;
|
||||
--bulma-scheme-main-ter: #2f2f2f;
|
||||
--bulma-background: #1a1a1a;
|
||||
--bulma-text: #e6e6e6;
|
||||
--bulma-text-strong: #ffffff;
|
||||
--bulma-border: #4a4a4a;
|
||||
--bulma-link: #3273dc;
|
||||
--bulma-link-hover: #5c93e6;
|
||||
}
|
||||
|
||||
body.dark-mode .button.is-light {
|
||||
--bulma-button-background-color: #363636;
|
||||
--bulma-button-color: #e6e6e6;
|
||||
--bulma-button-border-color: transparent;
|
||||
}
|
||||
|
||||
body.dark-mode .input,
|
||||
body.dark-mode .textarea {
|
||||
--bulma-input-background-color: #2b2b2b;
|
||||
--bulma-input-color: #e6e6e6;
|
||||
--bulma-input-border-color: #4a4a4a;
|
||||
}
|
||||
|
||||
body.dark-mode .box {
|
||||
--bulma-box-background-color: #2b2b2b;
|
||||
--bulma-box-shadow: 0 0.5em 1em -0.125em rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
body.dark-mode .card {
|
||||
--bulma-card-background-color: #2b2b2b;
|
||||
--bulma-card-shadow: 0 0.5em 1em -0.125em rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
body.dark-mode .notification.is-info {
|
||||
--bulma-notification-background-color: #1d4ed8;
|
||||
--bulma-notification-color: #e6e6e6;
|
||||
}
|
||||
|
||||
body.dark-mode .notification.is-danger {
|
||||
--bulma-notification-background-color: #dc2626;
|
||||
--bulma-notification-color: #e6e6e6;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.section {
|
||||
padding: 1.5rem 1rem;
|
||||
<!-- Dark mode theme using Bulma's CSS variables -->
|
||||
<style>
|
||||
body.dark-mode {
|
||||
--bulma-scheme-main: #1a1a1a;
|
||||
--bulma-scheme-main-bis: #242424;
|
||||
--bulma-scheme-main-ter: #2f2f2f;
|
||||
--bulma-background: #1a1a1a;
|
||||
--bulma-text: #e6e6e6;
|
||||
--bulma-text-strong: #ffffff;
|
||||
--bulma-border: #4a4a4a;
|
||||
--bulma-link: #3273dc;
|
||||
--bulma-link-hover: #5c93e6;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
min-height: 200px;
|
||||
body.dark-mode .button.is-light {
|
||||
--bulma-button-background-color: #363636;
|
||||
--bulma-button-color: #e6e6e6;
|
||||
--bulma-button-border-color: transparent;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
body.dark-mode .input,
|
||||
body.dark-mode .textarea {
|
||||
--bulma-input-background-color: #2b2b2b;
|
||||
--bulma-input-color: #e6e6e6;
|
||||
--bulma-input-border-color: #4a4a4a;
|
||||
}
|
||||
|
||||
</html>
|
||||
body.dark-mode .box {
|
||||
--bulma-box-background-color: #2b2b2b;
|
||||
--bulma-box-shadow: 0 0.5em 1em -0.125em rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
body.dark-mode .card {
|
||||
--bulma-card-background-color: #2b2b2b;
|
||||
--bulma-card-shadow: 0 0.5em 1em -0.125em rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
body.dark-mode .notification.is-info {
|
||||
--bulma-notification-background-color: #1d4ed8;
|
||||
--bulma-notification-color: #e6e6e6;
|
||||
}
|
||||
|
||||
body.dark-mode .notification.is-danger {
|
||||
--bulma-notification-background-color: #dc2626;
|
||||
--bulma-notification-color: #e6e6e6;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.section {
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
min-height: 200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -120,6 +120,31 @@ function createNotesStore() {
|
|||
console.error('Failed to load notes:', error);
|
||||
set([]);
|
||||
}
|
||||
},
|
||||
importObsidianVault: async (file: File): Promise<{ imported: number }> => {
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
|
||||
const response = await fetch('/api/notes/import', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to import Obsidian vault: ${response.statusText}`);
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
// Reload notes to get the newly imported ones
|
||||
await notes.load();
|
||||
|
||||
return result;
|
||||
} catch (error) {
|
||||
console.error('Error importing Obsidian vault:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,14 +3,69 @@
|
|||
import type { Note, Feed } from '$lib/types';
|
||||
import { onMount } from 'svelte';
|
||||
import Navigation from '$lib/components/Navigation.svelte';
|
||||
import { notes } from '$lib';
|
||||
|
||||
let notes: Note[] = [];
|
||||
let notesList: Note[] = [];
|
||||
let isImporting = false;
|
||||
let error: string | null = null;
|
||||
let importCount = 0;
|
||||
let obsidianFile: File | null = null;
|
||||
|
||||
// Subscribe to the notes store
|
||||
const unsubscribe = notes.subscribe((value) => {
|
||||
notesList = value;
|
||||
});
|
||||
|
||||
// Clean up subscription when component is destroyed
|
||||
onMount(() => {
|
||||
return () => {
|
||||
unsubscribe();
|
||||
};
|
||||
});
|
||||
|
||||
onMount(async () => {
|
||||
const response = await fetch('/api/notes');
|
||||
notes = await response.json();
|
||||
await loadNotes();
|
||||
});
|
||||
|
||||
async function loadNotes() {
|
||||
error = null;
|
||||
try {
|
||||
await notes.load();
|
||||
// The store subscription will automatically update notesList
|
||||
} catch (err) {
|
||||
error = err instanceof Error ? err.message : 'Failed to load notes';
|
||||
}
|
||||
}
|
||||
|
||||
async function handleImportObsidian() {
|
||||
if (!obsidianFile) {
|
||||
error = 'Please select a zip file containing an Obsidian vault';
|
||||
return;
|
||||
}
|
||||
|
||||
isImporting = true;
|
||||
error = null;
|
||||
try {
|
||||
const result = await notes.importObsidianVault(obsidianFile);
|
||||
importCount = result.imported;
|
||||
obsidianFile = null;
|
||||
|
||||
// Refresh the notes list
|
||||
await loadNotes();
|
||||
} catch (err) {
|
||||
error = err instanceof Error ? err.message : 'Failed to import Obsidian vault';
|
||||
} finally {
|
||||
isImporting = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleFileChange(event: Event) {
|
||||
const input = event.target as HTMLInputElement;
|
||||
if (input.files && input.files.length > 0) {
|
||||
obsidianFile = input.files[0];
|
||||
}
|
||||
}
|
||||
|
||||
function renderCard(item: Note | Feed) {
|
||||
if (!isNote(item)) {
|
||||
throw new Error('Invalid item type');
|
||||
|
|
@ -35,8 +90,8 @@
|
|||
label: 'Delete',
|
||||
isDangerous: true,
|
||||
onClick: async () => {
|
||||
await fetch(`/api/notes/${item.id}`, { method: 'DELETE' });
|
||||
notes = notes.filter((n) => n.id !== item.id);
|
||||
await notes.delete(item.id);
|
||||
notesList = notesList.filter((n) => n.id !== item.id);
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
@ -62,10 +117,72 @@
|
|||
<section class="section">
|
||||
<h1 class="title">My Notes</h1>
|
||||
|
||||
<div class="buttons">
|
||||
<a href="/notes/new" class="button is-primary"> New Note </a>
|
||||
{#if error}
|
||||
<div class="notification is-danger">
|
||||
<p>{error}</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if importCount > 0}
|
||||
<div class="notification is-success">
|
||||
<p>Successfully imported {importCount} notes.</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="level">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<a href="/notes/new" class="button is-primary"> New Note </a>
|
||||
</div>
|
||||
<div class="level-item">
|
||||
<div class="file has-name">
|
||||
<label class="file-label">
|
||||
<input
|
||||
class="file-input"
|
||||
type="file"
|
||||
name="obsidian"
|
||||
accept=".zip"
|
||||
on:change={handleFileChange}
|
||||
/>
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">Choose Obsidian vault zip...</span>
|
||||
</span>
|
||||
{#if obsidianFile}
|
||||
<span class="file-name">{obsidianFile.name}</span>
|
||||
{:else}
|
||||
<span class="file-name">No file selected</span>
|
||||
{/if}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item">
|
||||
<button
|
||||
class="button is-info"
|
||||
on:click={handleImportObsidian}
|
||||
disabled={!obsidianFile || isImporting}
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-file-import" class:fa-spin={isImporting}></i>
|
||||
</span>
|
||||
<span>Import Notes</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<a href="/notes/graph" class="button is-link">
|
||||
<span class="icon">
|
||||
<i class="fas fa-project-diagram"></i>
|
||||
</span>
|
||||
<span>View Notes Graph</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CardList items={notes} {renderCard} emptyMessage="No notes found." />
|
||||
<CardList items={notesList} {renderCard} emptyMessage="No notes found." />
|
||||
</section>
|
||||
</div>
|
||||
|
|
|
|||
287
frontend/src/routes/notes/graph/+page.svelte
Normal file
287
frontend/src/routes/notes/graph/+page.svelte
Normal file
|
|
@ -0,0 +1,287 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { notes } from '$lib';
|
||||
import Navigation from '$lib/components/Navigation.svelte';
|
||||
import { Network } from 'vis-network';
|
||||
import { DataSet } from 'vis-data';
|
||||
import { browser } from '$app/environment';
|
||||
|
||||
let container;
|
||||
let network = null;
|
||||
let status = 'Waiting for initialization...';
|
||||
let isDarkMode = false;
|
||||
let isLoading = false;
|
||||
|
||||
onMount(() => {
|
||||
// Check for dark mode
|
||||
if (browser) {
|
||||
isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
// Also check if the app has a theme setting in localStorage
|
||||
const storedTheme = localStorage.getItem('theme');
|
||||
if (storedTheme) {
|
||||
isDarkMode = storedTheme === 'dark';
|
||||
}
|
||||
}
|
||||
|
||||
// Set container background based on theme
|
||||
updateContainerTheme();
|
||||
|
||||
// Create the graph after a short delay
|
||||
setTimeout(() => {
|
||||
createGraph();
|
||||
}, 500);
|
||||
});
|
||||
|
||||
// Update container theme
|
||||
function updateContainerTheme() {
|
||||
if (!container) return;
|
||||
|
||||
if (isDarkMode) {
|
||||
container.style.backgroundColor = '#1a1a1a';
|
||||
container.style.borderColor = '#444';
|
||||
} else {
|
||||
container.style.backgroundColor = '#f9f9f9';
|
||||
container.style.borderColor = '#ddd';
|
||||
}
|
||||
}
|
||||
|
||||
// Create a graph from all notes
|
||||
async function createGraph() {
|
||||
if (!container) {
|
||||
status = 'Container not available';
|
||||
return;
|
||||
}
|
||||
|
||||
isLoading = true;
|
||||
status = 'Loading notes...';
|
||||
|
||||
try {
|
||||
// Load notes
|
||||
await notes.load();
|
||||
|
||||
// Get notes from store
|
||||
let allNotes = [];
|
||||
notes.subscribe((value) => {
|
||||
allNotes = value;
|
||||
})();
|
||||
|
||||
status = `Loaded ${allNotes.length} notes`;
|
||||
|
||||
if (allNotes.length === 0) {
|
||||
status = 'No notes found';
|
||||
isLoading = false;
|
||||
return;
|
||||
}
|
||||
|
||||
status = `Processing ${allNotes.length} notes`;
|
||||
|
||||
// Create nodes for all notes
|
||||
const nodes = new DataSet();
|
||||
allNotes.forEach((note) => {
|
||||
nodes.add({
|
||||
id: note.id,
|
||||
label: note.title,
|
||||
shape: 'dot',
|
||||
// Size based on connections, but with a reasonable range
|
||||
size: Math.min(
|
||||
20,
|
||||
5 + Math.sqrt((note.linksTo?.length || 0) + (note.linkedBy?.length || 0)) * 2
|
||||
)
|
||||
});
|
||||
});
|
||||
|
||||
// Create edges for all connections
|
||||
const edges = new DataSet();
|
||||
let edgeCount = 0;
|
||||
|
||||
allNotes.forEach((note) => {
|
||||
if (note.linksTo && Array.isArray(note.linksTo)) {
|
||||
note.linksTo.forEach((link) => {
|
||||
if (link && link.id) {
|
||||
edges.add({
|
||||
id: `e${edgeCount++}`,
|
||||
from: note.id,
|
||||
to: link.id,
|
||||
width: 1,
|
||||
color: isDarkMode ? '#888' : '#2B7CE9',
|
||||
arrows: 'to'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
status = `Created ${nodes.length} nodes and ${edgeCount} edges`;
|
||||
|
||||
// Apply theme to container
|
||||
updateContainerTheme();
|
||||
|
||||
// Create network with optimized options
|
||||
const data = { nodes, edges };
|
||||
const options = {
|
||||
nodes: {
|
||||
font: {
|
||||
color: isDarkMode ? '#fff' : '#000',
|
||||
size: 12
|
||||
},
|
||||
color: {
|
||||
background: isDarkMode ? '#4a9eff' : '#97C2FC',
|
||||
border: isDarkMode ? '#2a6eb0' : '#2B7CE9'
|
||||
}
|
||||
},
|
||||
edges: {
|
||||
smooth: false, // Disable smooth edges for performance
|
||||
arrows: {
|
||||
to: { enabled: true, scaleFactor: 0.5 } // Smaller arrows
|
||||
}
|
||||
},
|
||||
physics: {
|
||||
// Optimized physics for initial layout
|
||||
enabled: true,
|
||||
solver: 'forceAtlas2Based',
|
||||
forceAtlas2Based: {
|
||||
gravitationalConstant: -50,
|
||||
centralGravity: 0.01,
|
||||
springLength: 100,
|
||||
springConstant: 0.08
|
||||
},
|
||||
stabilization: {
|
||||
enabled: true,
|
||||
iterations: 200, // More iterations for better initial layout
|
||||
updateInterval: 50
|
||||
},
|
||||
maxVelocity: 50,
|
||||
minVelocity: 0.1
|
||||
},
|
||||
interaction: {
|
||||
hover: true,
|
||||
multiselect: false,
|
||||
dragNodes: true,
|
||||
zoomView: true
|
||||
},
|
||||
layout: {
|
||||
improvedLayout: false
|
||||
}
|
||||
};
|
||||
|
||||
// Destroy existing network if any
|
||||
if (network) {
|
||||
network.destroy();
|
||||
network = null;
|
||||
}
|
||||
|
||||
// Create new network
|
||||
network = new Network(container, data, options);
|
||||
|
||||
// Add double-click navigation
|
||||
network.on('doubleClick', function (params) {
|
||||
if (params.nodes.length > 0) {
|
||||
const nodeId = params.nodes[0];
|
||||
window.location.href = `/notes/${nodeId}`;
|
||||
}
|
||||
});
|
||||
|
||||
// Add hover tooltip
|
||||
network.on('hoverNode', function (params) {
|
||||
const nodeId = params.node;
|
||||
const note = allNotes.find((n) => n.id === nodeId);
|
||||
if (note) {
|
||||
const preview = note.content.substring(0, 100) + (note.content.length > 100 ? '...' : '');
|
||||
const tooltipHtml = `<div style="max-width: 300px; padding: 5px; background: ${isDarkMode ? '#333' : '#fff'}; color: ${isDarkMode ? '#fff' : '#000'}; border: 1px solid ${isDarkMode ? '#555' : '#ddd'}; border-radius: 4px;">
|
||||
<strong>${note.title}</strong><br/>${preview}
|
||||
</div>`;
|
||||
network.body.nodes[nodeId].options.title = tooltipHtml;
|
||||
}
|
||||
});
|
||||
|
||||
// Add a timeout to stop physics after initial layout
|
||||
setTimeout(() => {
|
||||
if (network) {
|
||||
network.stopSimulation();
|
||||
status = 'Graph created successfully (physics disabled for performance)';
|
||||
}
|
||||
}, 5000);
|
||||
|
||||
status = 'Graph created successfully (initializing layout...)';
|
||||
} catch (err) {
|
||||
status = `Error creating graph: ${err.message}`;
|
||||
console.error('Error creating graph:', err);
|
||||
} finally {
|
||||
isLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle physics on/off
|
||||
function togglePhysics() {
|
||||
if (!network) return;
|
||||
|
||||
const physicsEnabled = network.physics.options.enabled;
|
||||
network.setOptions({ physics: { enabled: !physicsEnabled } });
|
||||
|
||||
status = physicsEnabled
|
||||
? 'Physics disabled (better performance, static layout)'
|
||||
: 'Physics enabled (dynamic layout, may affect performance)';
|
||||
}
|
||||
</script>
|
||||
|
||||
<Navigation />
|
||||
|
||||
<div class="container">
|
||||
<h1 class="title">Notes Graph</h1>
|
||||
|
||||
<div class="buttons mb-4">
|
||||
<a href="/" class="button is-info">
|
||||
<span class="icon">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
</span>
|
||||
<span>Back to Notes</span>
|
||||
</a>
|
||||
<button class="button is-primary" on:click={createGraph} disabled={isLoading}>
|
||||
<span class="icon">
|
||||
<i class="fas fa-sync-alt" class:fa-spin={isLoading}></i>
|
||||
</span>
|
||||
<span>{isLoading ? 'Loading...' : 'Refresh Graph'}</span>
|
||||
</button>
|
||||
<button class="button is-light" on:click={togglePhysics}>
|
||||
<span class="icon">
|
||||
<i class="fas fa-atom"></i>
|
||||
</span>
|
||||
<span>Toggle Physics</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="notification {status.includes('Error') ? 'is-danger' : 'is-info'} mb-4">
|
||||
<p>{status}</p>
|
||||
</div>
|
||||
|
||||
<div class="graph-container" bind:this={container}></div>
|
||||
|
||||
<div class="mt-4 has-text-centered">
|
||||
<p class="is-size-7">
|
||||
Tip: Double-click on a node to open that note. Drag nodes to rearrange the graph. Hover over
|
||||
nodes to see note previews.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.graph-container {
|
||||
width: 100%;
|
||||
height: 70vh;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
background-color: #f9f9f9;
|
||||
transition:
|
||||
background-color 0.3s ease,
|
||||
border-color 0.3s ease;
|
||||
}
|
||||
|
||||
:global(.dark-mode) .graph-container {
|
||||
background-color: #1a1a1a;
|
||||
border-color: #444444;
|
||||
}
|
||||
</style>
|
||||
6934
frontend/static/css/fontawesome.min.css
vendored
6934
frontend/static/css/fontawesome.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -49,6 +49,10 @@ func (n *Note) UpdateLinks(db *gorm.DB) error {
|
|||
|
||||
// Extract and create new links
|
||||
titles := n.ExtractLinks(n.Content)
|
||||
|
||||
// Use a map to track unique target IDs to avoid duplicates
|
||||
processedTargets := make(map[string]bool)
|
||||
|
||||
for _, title := range titles {
|
||||
var target Note
|
||||
if err := db.Where("title = ?", title).First(&target).Error; err != nil {
|
||||
|
|
@ -59,12 +63,22 @@ func (n *Note) UpdateLinks(db *gorm.DB) error {
|
|||
return fmt.Errorf("failed to find target note %q: %w", title, err)
|
||||
}
|
||||
|
||||
// Skip if we've already processed this target
|
||||
if processedTargets[target.ID] {
|
||||
continue
|
||||
}
|
||||
processedTargets[target.ID] = true
|
||||
|
||||
link := NoteLink{
|
||||
SourceNoteID: n.ID,
|
||||
TargetNoteID: target.ID,
|
||||
}
|
||||
if err := db.Create(&link).Error; err != nil {
|
||||
return fmt.Errorf("failed to create link to %q: %w", title, err)
|
||||
|
||||
// Use FirstOrCreate to avoid unique constraint errors
|
||||
var existingLink NoteLink
|
||||
result := db.Where("source_note_id = ? AND target_note_id = ?", n.ID, target.ID).FirstOrCreate(&existingLink, link)
|
||||
if result.Error != nil {
|
||||
return fmt.Errorf("failed to create link to %q: %w", title, result.Error)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
package notes
|
||||
|
||||
import (
|
||||
"archive/zip"
|
||||
"fmt"
|
||||
"net/http"
|
||||
|
||||
"github.com/gin-gonic/gin"
|
||||
|
|
@ -25,6 +27,7 @@ func (h *Handler) RegisterRoutes(group *gin.RouterGroup) {
|
|||
notes.GET("/:id", h.handleGetNote)
|
||||
notes.PUT("/:id", h.handleUpdateNote)
|
||||
notes.DELETE("/:id", h.handleDeleteNote)
|
||||
notes.POST("/import", h.handleImportObsidianVault)
|
||||
}
|
||||
|
||||
// Test endpoint
|
||||
|
|
@ -121,3 +124,33 @@ func (h *Handler) handleReset(c *gin.Context) {
|
|||
}
|
||||
c.Status(http.StatusOK)
|
||||
}
|
||||
|
||||
func (h *Handler) handleImportObsidianVault(c *gin.Context) {
|
||||
file, _, err := c.Request.FormFile("file")
|
||||
if err != nil {
|
||||
c.JSON(http.StatusBadRequest, gin.H{"error": fmt.Sprintf("Failed to get file: %v", err)})
|
||||
return
|
||||
}
|
||||
defer func() {
|
||||
if closeErr := file.Close(); closeErr != nil {
|
||||
c.JSON(http.StatusInternalServerError, gin.H{"error": fmt.Sprintf("Failed to close file: %v", closeErr)})
|
||||
return
|
||||
}
|
||||
}()
|
||||
|
||||
// Create a zip reader
|
||||
zipReader, err := zip.NewReader(file, c.Request.ContentLength)
|
||||
if err != nil {
|
||||
c.JSON(http.StatusBadRequest, gin.H{"error": fmt.Sprintf("Failed to read zip file: %v", err)})
|
||||
return
|
||||
}
|
||||
|
||||
// Import the vault
|
||||
imported, err := h.service.ImportObsidianVault(zipReader)
|
||||
if err != nil {
|
||||
c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
|
||||
return
|
||||
}
|
||||
|
||||
c.JSON(http.StatusOK, gin.H{"imported": imported})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,12 @@
|
|||
package notes
|
||||
|
||||
import (
|
||||
"archive/zip"
|
||||
"fmt"
|
||||
"io"
|
||||
"path/filepath"
|
||||
"strings"
|
||||
"time"
|
||||
|
||||
"github.com/google/uuid"
|
||||
"gorm.io/gorm"
|
||||
|
|
@ -126,6 +131,89 @@ func (s *Service) Delete(id string) error {
|
|||
return nil
|
||||
}
|
||||
|
||||
// ImportObsidianVault imports notes from an Obsidian vault zip file
|
||||
func (s *Service) ImportObsidianVault(zipReader *zip.Reader) (int, error) {
|
||||
// Map to store file paths and their content
|
||||
noteFiles := make(map[string]string)
|
||||
|
||||
// First pass: extract all markdown files
|
||||
for _, file := range zipReader.File {
|
||||
// Skip directories and non-markdown files
|
||||
if file.FileInfo().IsDir() || !strings.HasSuffix(strings.ToLower(file.Name), ".md") {
|
||||
continue
|
||||
}
|
||||
|
||||
// Open the file
|
||||
rc, err := file.Open()
|
||||
if err != nil {
|
||||
return 0, fmt.Errorf("failed to open file %s: %w", file.Name, err)
|
||||
}
|
||||
|
||||
// Read the content
|
||||
content, err := io.ReadAll(rc)
|
||||
if err != nil {
|
||||
if err := rc.Close(); err != nil {
|
||||
return 0, fmt.Errorf("failed to close file %s: %w", file.Name, err)
|
||||
}
|
||||
return 0, fmt.Errorf("failed to read file %s: %w", file.Name, err)
|
||||
}
|
||||
if err := rc.Close(); err != nil {
|
||||
return 0, fmt.Errorf("failed to close file %s: %w", file.Name, err)
|
||||
}
|
||||
|
||||
// Store the content
|
||||
noteFiles[file.Name] = string(content)
|
||||
}
|
||||
|
||||
// Map to store created notes by their original filename
|
||||
createdNotes := make(map[string]*Note)
|
||||
|
||||
// Second pass: create notes without links
|
||||
for filePath, content := range noteFiles {
|
||||
// Extract title from filename
|
||||
fileName := filepath.Base(filePath)
|
||||
title := strings.TrimSuffix(fileName, filepath.Ext(fileName))
|
||||
|
||||
// Create note
|
||||
note := &Note{
|
||||
ID: uuid.New().String(),
|
||||
Title: title,
|
||||
Content: content,
|
||||
CreatedAt: time.Now(),
|
||||
UpdatedAt: time.Now(),
|
||||
}
|
||||
|
||||
// Save note to database
|
||||
if err := s.db.Create(note).Error; err != nil {
|
||||
return len(createdNotes), fmt.Errorf("failed to create note %s: %w", title, err)
|
||||
}
|
||||
|
||||
// Store created note
|
||||
createdNotes[filePath] = note
|
||||
}
|
||||
|
||||
// Third pass: update links between notes
|
||||
for filePath, note := range createdNotes {
|
||||
if err := s.db.Transaction(func(tx *gorm.DB) error {
|
||||
// Load the note
|
||||
if err := tx.First(note, "id = ?", note.ID).Error; err != nil {
|
||||
return fmt.Errorf("failed to load note %s: %w", note.Title, err)
|
||||
}
|
||||
|
||||
// Update links
|
||||
if err := note.UpdateLinks(tx); err != nil {
|
||||
return fmt.Errorf("failed to update links in note %s: %w", note.Title, err)
|
||||
}
|
||||
|
||||
return nil
|
||||
}); err != nil {
|
||||
return len(createdNotes), fmt.Errorf("failed to update links for note %s: %w", filePath, err)
|
||||
}
|
||||
}
|
||||
|
||||
return len(createdNotes), nil
|
||||
}
|
||||
|
||||
// Reset deletes all notes (for testing)
|
||||
func (s *Service) Reset() error {
|
||||
if err := s.db.Session(&gorm.Session{AllowGlobalUpdate: true}).Delete(&Note{}).Error; err != nil {
|
||||
|
|
|
|||
|
|
@ -55,11 +55,11 @@ func (s *Service) Get(id string) (*ReadLaterItem, error) {
|
|||
func (s *Service) List(includeArchived bool) ([]ReadLaterItem, error) {
|
||||
var items []ReadLaterItem
|
||||
query := s.db.Order("created_at desc")
|
||||
|
||||
|
||||
if !includeArchived {
|
||||
query = query.Where("archived_at IS NULL")
|
||||
}
|
||||
|
||||
|
||||
if err := query.Find(&items).Error; err != nil {
|
||||
return nil, fmt.Errorf("failed to list read later items: %w", err)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue