Fork Notesium source and restructure into Go package layout
Initial fork of github.com/alonswartz/notesium into librenotes: - Source moved to internal/notesium/ (package notesium) - Thin entry point at cmd/librenotes/main.go - Module renamed to git.librete.ch/public/librenotes - main() exposed as notesium.Run() - LICENSE preserved (MIT), NOTICE added with attribution - Web assets and completion.bash co-located with embedding code to satisfy go:embed path constraints Closes #3, #34, #35. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.7
@@ -0,0 +1,158 @@
|
||||
var t = `
|
||||
<Pane name="graphPanel" :defaultWidth="540" :minWidth="100">
|
||||
<div class="h-full w-full border-r border-gray-300 bg-gray-50">
|
||||
|
||||
<div class="flex flex-nowrap max-w-full w-full h-9 overflow-x-hidden items-center content-center px-2 mr-6 bg-gray-200">
|
||||
<div class="relative h-full text-gray-50">
|
||||
<svg class="absolute right-0 bottom-0" fill="currentColor" width="7" height="7"><path d="M 0 7 A 7 7 0 0 0 7 0 L 7 7 Z"></path></svg>
|
||||
</div>
|
||||
<div class="flex rounded-t-lg justify-between basis-52 truncate text-xs h-full items-center pl-3 pr-2 bg-gray-50 text-gray-800">
|
||||
<span class="truncate pt-px">graph view</span>
|
||||
<span title="close" @click="$notesiumState.showGraphPanel=false" class="hover:bg-gray-300 hover:rounded-full cursor-pointer">
|
||||
<Icon name="mini-x-mark" size="h-4 w-4" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="relative h-full text-gray-50">
|
||||
<svg class="absolute bottom-0" fill="currentColor" width="7" height="7"><path d="M 0 0 A 7 7 0 0 0 7 7 L 0 7 Z"></path></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-show="!showSettings" class="absolute top-9 right-0 p-3">
|
||||
<div class="border border-gray-200 rounded-md backdrop-blur-md">
|
||||
<span title="settings" @click="showSettings=true"
|
||||
class="h-8 px-2 cursor-pointer inline-flex items-center justify-items-center text-gray-400 hover:text-gray-700">
|
||||
<Icon name="outline-adjustments-horizontal" size="h-5 w-5" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-show="showSettings" class="absolute top-9 right-0 p-3 w-60">
|
||||
<div class="flex flex-1 flex-col border border-gray-200 rounded-md backdrop-blur-md space-y-1">
|
||||
<div class="flex border-b border-gray-200">
|
||||
<input ref="queryInput" v-model="query" placeholder="filter..." autocomplete="off" spellcheck="false"
|
||||
@keyup.esc="query=''"
|
||||
@keyup.enter.prevent
|
||||
@keydown.tab.prevent
|
||||
class="h-8 w-full p-2 focus:outline-none backdrop-blur-md bg-inherit text-sm text-gray-700 placeholder:text-gray-400" />
|
||||
<span title="settings" @click="showSettings=false"
|
||||
class="h-8 pr-2 cursor-pointer inline-flex items-center justify-items-center text-gray-400 hover:text-gray-700">
|
||||
<Icon name="outline-adjustments-horizontal" size="h-5 w-5" />
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<details class="w-full cursor-pointer [&_svg]:open:rotate-90">
|
||||
<summary class="flex py-1 px-2 items-center justify-items-center justify-between hover:cursor-pointer focus:outline-none">
|
||||
<span class="text-sm font-medium leading-6 text-gray-700">display</span>
|
||||
<span class="text-gray-400 -mr-px"><Icon name="chevron-right" size="h-5 w-5" /></span>
|
||||
</summary>
|
||||
<ul class="mt-1 ml-px px-2 text-xs leading-6 text-gray-700">
|
||||
<li v-for="(option, key) in display" :key="key" @click="option.value=!option.value"
|
||||
class="flex items-center justify-items-center justify-between block p-2 pr-0">
|
||||
<label v-text="option.title"></label>
|
||||
<input v-model="option.value" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500" />
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
<details class="w-full cursor-pointer [&_svg]:open:rotate-90">
|
||||
<summary class="flex py-1 px-2 items-center justify-items-center justify-between hover:cursor-pointer focus:outline-none">
|
||||
<span class="text-sm font-medium leading-6 text-gray-700">forces</span>
|
||||
<span class="text-gray-400 -mr-px"><Icon name="chevron-right" size="h-5 w-5" /></span>
|
||||
</summary>
|
||||
<ul class="mt-1 ml-px px-2 text-xs leading-6 text-gray-700">
|
||||
<li v-for="(option, key) in forces" :key="key"
|
||||
class="items-center justify-items-center justify-between block p-2 pr-0">
|
||||
<div class="w-full flex items-center justify-between">
|
||||
<span v-text="option.title"></span>
|
||||
<span v-text="option.value"></span>
|
||||
</div>
|
||||
<input class="w-full cursor-pointer" type="range" v-model="option.value" :min="option.min" :max="option.max" :step="option.step" />
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<GraphD3 ref="forcegraph" v-if="graphData"
|
||||
:graphData=graphData
|
||||
:display=display
|
||||
:forces=forces
|
||||
:emphasizeNodeIds=emphasizeNodeIds
|
||||
:initialTransform=initialTransform
|
||||
@title-click="$emit('note-open', $event)"
|
||||
/>
|
||||
|
||||
</div>
|
||||
</Pane>
|
||||
`
|
||||
|
||||
import Pane from './pane.js'
|
||||
import Icon from './icon.js'
|
||||
import GraphD3 from './graph-d3.js'
|
||||
export default {
|
||||
components: { Pane, Icon, GraphD3 },
|
||||
props: ['activeTabId', 'lastSave'],
|
||||
emits: ['note-open'],
|
||||
data() {
|
||||
return {
|
||||
graphData: null,
|
||||
initialTransform: null,
|
||||
query: '',
|
||||
showSettings: false,
|
||||
display: {
|
||||
showTitles: { value: true, title: 'show titles' },
|
||||
scaleTitles: { value: true, title: 'auto-scale titles' },
|
||||
dynamicNodeRadius: { value: false, title: 'size nodes per links' },
|
||||
emphasizeActive: { value: true, title: 'emphasize active note' },
|
||||
},
|
||||
forces: {
|
||||
chargeStrength: { value: -30, min: -100, max: 0, step: 1, title: 'repel force' },
|
||||
collideRadius: { value: 1, min: 1, max: 50, step: 1, title: 'collide radius' },
|
||||
collideStrength: { value: 0.5, min: 0, max: 1, step: 0.05, title: 'collide strength' },
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fetchGraph() {
|
||||
fetch("/api/notes")
|
||||
.then(r => r.ok ? r.json() : r.json().then(e => Promise.reject(e)))
|
||||
.then(response => {
|
||||
let nodes = [];
|
||||
let links = [];
|
||||
const notes = Object.values(response);
|
||||
notes.forEach(note => {
|
||||
nodes.push({ id: note.Filename, title: note.Title, isLabel: note.IsLabel });
|
||||
if (note.OutgoingLinks) {
|
||||
note.OutgoingLinks.forEach(link => {
|
||||
if (link.Title !== '') links.push({ source: note.Filename, target: link.Filename });
|
||||
});
|
||||
}
|
||||
});
|
||||
this.graphData = { nodes, links };
|
||||
})
|
||||
.catch(e => {
|
||||
console.error(e);
|
||||
});
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
emphasizeNodeIds() {
|
||||
if (this.showSettings && this.query) {
|
||||
const queryWords = this.query.toLowerCase().split(' ');
|
||||
return this.graphData.nodes.filter(node => queryWords.every(queryWord => node.title.toLowerCase().includes(queryWord))).map(node => node.id);
|
||||
}
|
||||
return (this.display.emphasizeActive.value && this.activeTabId) ? [this.activeTabId] : null;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.fetchGraph();
|
||||
},
|
||||
watch: {
|
||||
'lastSave': function() {
|
||||
this.initialTransform = this.$refs.forcegraph.zoomTransform;
|
||||
this.graphData = null;
|
||||
this.fetchGraph();
|
||||
},
|
||||
},
|
||||
template: t
|
||||
}
|
||||
Reference in New Issue
Block a user