tcsenpai/obsidiangarden_netlify
1
0
Fork 0
mirror of https://github.com/tcsenpai/obsidiangarden_netlify.git synced 2025-06-06 04:35:20 +00:00
Code Issues 5 Packages Projects Releases Wiki Activity

graph revamp

Browse Source
This commit is contained in:
Utsob Roy 2023-02-01 10:52:37 +06:00
parent 514f1be060
commit 6edc732dcc
9 changed files with 408 additions and 284 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
src/helpers/linkUtils.js
View File

@ -1,108 +1,72 @@
const wikilink = /\[\[(.*?\|.*?)\]\]/g
const wikiLinkRegex = /\[\[(.*?\|.*?)\]\]/g;
const internalLinkRegex = /href="\/(.*?)"/g;
function caselessCompare(a, b) {
return a.toLowerCase() === b.toLowerCase();
}
function extractLinks(content) {
return[...(content.match(wikilink) || []).map(link => (
link.slice(2, -2)
.split("|")[0]
.replace(/.(md|markdown)\s?$/i, "")
.replace("\\", "")
.trim()
)), ...(content.match(internalLinkRegex) || []).map(
(link) =>
link
.slice(6, -1)
.split("|")[0]
.replace(/.(md|markdown)\s?$/i, "")
.replace("\\", "")
.trim()
)];
return [
...(content.match(wikiLinkRegex) || []).map(
(link) =>
link
.slice(2, -2)
.split("|")[0]
.replace(/.(md|markdown)\s?$/i, "")
.replace("\\", "")
.trim()
.split("#")[0]
),
...(content.match(internalLinkRegex) || []).map(
(link) =>
link
.slice(6, -1)
.split("|")[0]
.replace(/.(md|markdown)\s?$/i, "")
.replace("\\", "")
.trim()
.split("#")[0]
),
];
}
function getBacklinks(data) {
const notes = data.collections.note;
if (!notes) {
return [];
}
const currentFileSlug = data.page.filePathStem.replace('/notes/', '');
const currentURL = data.page.url;
let backlinks = [];
let uniqueLinks = new Set();
let counter = 1;
for (const otherNote of notes) {
const noteContent = otherNote.template.frontMatter.content;
const backLinks = extractLinks(noteContent);
if (!uniqueLinks.has(otherNote.url) && backLinks.some(link => caselessCompare(link, currentFileSlug) ||
currentURL == link.split("#")[0])) {
let preview = noteContent.slice(0, 240);
backlinks.push({
url: otherNote.url,
title: otherNote.data.title || otherNote.data.page.fileSlug,
preview,
id: counter++
})
uniqueLinks.add(otherNote.url);
}
}
return backlinks;
function shuffle(a) {
var j, x, i;
for (i = a.length - 1; i > 0; i--) {
j = Math.floor(Math.random() * (i + 1));
x = a[i];
a[i] = a[j];
a[j] = x;
}
return a;
}
function getOutboundLinks(data, isHome=false){
const notes = data.collections.note;
if (!notes || notes.length == 0) {
return [];
}
let currentNote;
if (isHome) {
currentNote = data.collections.gardenEntry && data.collections.gardenEntry[0];
} else {
const currentFileSlug = data.page.filePathStem.replace('/notes/', '');
currentNote = notes.find(x => x.data.page.filePathStem && caselessCompare(x.data.page.filePathStem.replace('/notes/', ''), currentFileSlug));
}
if (!currentNote) {
return [];
}
let counter = 1;
let uniqueLinks = new Set();
const outboundLinks = extractLinks(currentNote.template.frontMatter.content);
let outbound = outboundLinks.map(fileslug => {
var outboundNote = notes.find(x => caselessCompare(x.data.page.filePathStem.replace("/notes/", ""), fileslug) || x.data.page.url == fileslug.split("#")[0]);
if (!outboundNote) {
return null;
}
if (!uniqueLinks.has(outboundNote.url)) {
uniqueLinks.add(outboundNote.url);
return {
url: outboundNote.url,
title: outboundNote.data.title || outboundNote.data.page.fileSlug,
id: counter++,
};
} else {
return null;
}
}).filter(x => x);
return outbound;
function sliceIntoChunks(arr, chunkSize) {
const res = [];
for (let i = 0; i < arr.length; i += chunkSize) {
const chunk = arr.slice(i, i + chunkSize);
res.push(chunk);
}
return res;
}
exports.wikilink = wikilink;
function getPositions(trees) {
let minInRow = Math.floor(Math.sqrt(trees.length));
let maxInRow = Math.ceil(Math.sqrt(trees.length));
if (minInRow < maxInRow) {
trees = trees.concat(
Array(Math.pow(maxInRow, 2) - trees.length).fill([0, "", ""])
);
}
trees = shuffle([...trees]);
let levels = sliceIntoChunks(trees, maxInRow);
return levels;
}
function forestData(data) {
const canvasTrees = data.collections.note.map((n) => {
return [n.data.maturity || 1, n.url, n.data.title || n.fileSlug];
});
return getPositions(canvasTrees);
}
exports.wikiLinkRegex = wikiLinkRegex;
exports.internalLinkRegex = internalLinkRegex;
exports.getBacklinks = getBacklinks;
exports.getOutboundLinks = getOutboundLinks;
exports.caselessCompare = caselessCompare;
exports.extractLinks = extractLinks;
exports.extractLinks = extractLinks;
exports.forestData = forestData;

249
src/site/_includes/components/graphScript.njk
View File

@ -1,133 +1,138 @@
<script>
const getCssVar = (variable) => getComputedStyle(document.body).getPropertyValue(variable);
function htmlDecode(input) {
var doc = new DOMParser().parseFromString(input, "text/html");
return doc.documentElement.textContent;
}
window.graphData = null;
window.maxGraphDepth = 1;
const backLinks = [
{%- for backlink in backlinks -%}
{
id: {{backlink.id}},
title: "{{backlink.title | safe}}",
url: "{{backlink.url}}"
},
{%- endfor -%}
];
const outbound = [
{%- for out in outbound -%}
{
id: {{out.id}},
title: "{{out.title | safe}}",
url: "{{out.url}}"
},
{%- endfor -%}
].map(x => {
x.id += backLinks.length;
return x;
});
const outboundDuplicatesRemoved = outbound.filter(x => !backLinks.find(b => b.url === x.url));
const title = "{{page.fileSlug}}" || "Home"
const currentNode = {
title,
id: 0,
url: "{{page.url}}"
};
const gData = {
nodes: [
currentNode,
...backLinks,
...outboundDuplicatesRemoved
],
links: [
...backLinks.map(backlink => ({source: backlink.id, target: 0})),
...outboundDuplicatesRemoved.map(outlink => ({source: 0, target: outlink.id}))
]
};
gData
.links
.forEach(link => {
const a = gData
.nodes
.find(x => x.id === link.source);
const b = gData
.nodes
.find(x => x.id === link.target);
if (a && b) {
!a.neighbors && (a.neighbors = []);
!b.neighbors && (b.neighbors = []);
a
.neighbors
.push(b);
b
.neighbors
.push(a);
!a.links && (a.links = []);
!b.links && (b.links = []);
a
.links
.push(link);
b
.links
.push(link);
}
});
let Graph;
function renderGraph(width, height) {
if (Graph) {
Graph
.width(width)
.height(height);
Graph.zoomToFit()
Graph.zoom(3)
return;
}
Graph = ForceGraph()(document.getElementById('link-graph'))
.width(width)
.height(height)
.nodeCanvasObject((node, ctx) => {
const numberOfLinks = (node.links && node.links.length) || 2;
const numberOfNeighbours = (node.neighbors && node.neighbors.length) || 2;
const nodeR = Math.min(7, Math.max((numberOfLinks + numberOfNeighbours) / 2, 2));
ctx.beginPath();
ctx.arc(node.x, node.y, nodeR, 0, 2 * Math.PI, false);
ctx.fillStyle = getCssVar("--text-accent");
ctx.fill();
const label = htmlDecode(node.title)
const fontSize = 3.5;
ctx.font = `${fontSize}px Sans-Serif`;
ctx.textAlign = 'center';
ctx.textBaseline = 'top';
ctx.fillText(label, node.x, node.y + nodeR + 2);
})
.linkColor(() => getCssVar("--text-muted") || getCssVar("--text-normal"))
.graphData(gData)
.onNodeClick(node => {
window.location = node.url;
});
setTimeout(() => {
Graph.zoomToFit();
Graph.zoom(3);
}, 10);
function getNextLevelNeighbours(existing, remaining) {
const keys = Object.values(existing).map((n) => n.neighbors).flat();
const n_remaining = Object.keys(remaining).reduce((acc, key) => {
if (keys.indexOf(key) != -1) {
existing[key] = remaining[key];
} else {
acc[key] = remaining[key];
}
return acc;
}, {});
return existing, n_remaining;
}
renderGraph(320,320);
function filterToDepth(data) {
let remaining = JSON.parse(JSON.stringify(data.nodes));
let currentLink = window.location.pathname;
let currentNode = remaining[currentLink] || Object.values(remaining).find((v) => v.home);
delete remaining[currentNode.url];
if (!currentNode.home) {
let home = Object.values(remaining).find((v) => v.home);
delete remaining[home.url];
}
let existing = {};
existing[currentNode.url] = currentNode;
for (let i = 0; i < window.maxGraphDepth; i++) {
existing, remaining = getNextLevelNeighbours(existing, remaining);
}
nodes = Object.values(existing);
if (!currentNode.home) {
nodes = nodes.filter(n => !n.home);
}
let ids = nodes.map((n) => n.id);
let graphData = {
nodes,
links: data.links.filter((con) => ids.indexOf(con.target) > -1 && ids.indexOf(con.source) > -1),
}
return graphData;
}
var Graph;
function renderGraph(graphData, id, width, height) {
let Graph = ForceGraph()
(document.getElementById(id))
.graphData(graphData)
.nodeId('id')
.nodeLabel('title')
.linkSource('source')
.linkDirectionalArrowLength(2)
.linkDirectionalArrowRelPos(0.5)
.nodeCanvasObject((node, ctx) => {
const numberOfLinks = (node.outBound && node.outBound.length) || 2;
const numberOfNeighbours = (node.neighbors && node.neighbors.length) || 2;
const nodeR = Math.min(7, Math.max((numberOfLinks + numberOfNeighbours) / 2, 2));
ctx.beginPath();
ctx.arc(node.x, node.y, nodeR, 0, 2 * Math.PI, false);
ctx.fillStyle = getCssVar("--text-accent");
ctx.fill();
const label = htmlDecode(node.title)
const fontSize = 3.5;
ctx.font = `${fontSize}px Sans-Serif`;
ctx.textAlign = 'center';
ctx.textBaseline = 'top';
ctx.fillText(label, node.x, node.y + nodeR + 2);
})
.linkColor(() => getCssVar("--text-muted") || getCssVar("--text-normal"))
.onNodeClick(node => {
window.location = node.url;
})
.linkTarget('target').width(width).height(height);
return Graph;
}
function fetchGraphData() {
fetch('/graph').then(res => res.json()).then(data => {
window.graphData = data;
Graph = renderGraph(filterToDepth(JSON.parse(JSON.stringify(data))), "link-graph", 330, 330);
});
}
fetchGraphData();
window.document.getElementById('graph-depth').value = window.maxGraphDepth;
window.document.getElementById('depth-display').innerText = window.maxGraphDepth;
window.document.getElementById('graph-depth').addEventListener('input', (evt) => {
window.maxGraphDepth = evt.target.value;
window.document.getElementById('depth-display').innerText = window.maxGraphDepth;
if (Graph != null) {
Graph._destructor();
Graph = null;
}
renderGraph(filterToDepth(JSON.parse(JSON.stringify(window.graphData))), "link-graph", 330, 330);
})
window.fullGraph = null;
function renderFullGraph() {
if (!window.fullGraph) {
const graphData = {
links: JSON.parse(JSON.stringify(window.graphData.links)),
nodes: [...Object.values(window.graphData.nodes)]
}
let g = document.createElement('div');
g.id = 'full-graph';
g.classList.add('show');
document.body.appendChild(g);
g.innerHTML = '<i class="fa fa-times" id="full-graph-close" aria-hidden="true"></i><div id="full-graph-container"></div>';
window.fullGraph = renderGraph(graphData, "full-graph-container", g.offsetWidth, g.offsetHeight);
document.getElementById('full-graph-close').addEventListener('click', (evt) => {
g.classList.remove('show');
window.fullGraph._destructor();
window.fullGraph = null;
document.getElementById('full-graph').remove()
});
}
}
document.getElementById('graph-full-btn').addEventListener('click', (evt) => {
if (!fullGraph) {
renderFullGraph();
}
});
</script>

2
src/site/_includes/components/pageheader.njk
View File

@ -17,7 +17,7 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism-okaidia.min.css" integrity="sha512-mIs9kKbaw6JZFfSuo+MovjU+Ntggfoj8RwAmJbVXQ5mkAX5LlgETQEweFPI18humSPHymTb5iikEOKWF7I8ncQ==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@3.6.2/dist/fetch.umd.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<link href="/styles/digital-garden-base.css" rel="stylesheet">

15
src/site/_includes/components/sidebar.njk
View File

@ -6,6 +6,21 @@
<div class="graph">
<div class="graph-title-container">
<div class="graph-title">Connected Pages</div>
<div id="graph-controls">
<div class="depth-control">
<label for="graph-depth">Depth</label>
<div class="slider">
<input name="graph-depth" list="depthmarkers" type="range" step="1" min="1" max="3" id="graph-depth"/>
<datalist id="depthmarkers">
<option value="1" label="1"></option>
<option value="2" label="2"></option>
<option value="3" label="3"></option>
</datalist>
</div>
<span id="depth-display"></span>
</div>
<i class="fa fa-arrows-alt" id="graph-full-btn" aria-hidden="true"></i>
</div>
</div>
<div id="link-graph"></div>
</div>

53
src/site/graph.11tydata.js Normal file
View File

@ -0,0 +1,53 @@
const { extractLinks } = require("../helpers/linkUtils");
module.exports = {
eleventyComputed: {
graphData: (data) => {
let nodes = {};
let links = [];
let stemURLs = {};
data.collections.note.forEach((v, idx) => {
let fpath = v.filePathStem.replace("/notes/", "");
let parts = fpath.split("/");
let group = "none";
if (parts.length >= 3) {
group = parts[parts.length - 2];
}
nodes[v.url] = {
id: idx,
title: v.data.title || v.fileSlug,
url: v.url,
group,
home: v.data["dg-home"] || false,
outBound: extractLinks(v.template.frontMatter.content),
neighbors: new Set(),
};
stemURLs[fpath] = v.url;
});
Object.values(nodes).forEach((node) => {
let outBound = new Set();
node.outBound.forEach((olink) => {
let link = (stemURLs[olink] || olink).split("#")[0];
outBound.add(link);
});
node.outBound = Array.from(outBound);
node.outBound.forEach((link) => {
let n = nodes[link];
if (n) {
n.neighbors.add(node.url);
node.neighbors.add(n.url);
links.push({ source: node.id, target: n.id });
}
});
});
Object.keys(nodes).map((k) => {
nodes[k].neighbors = Array.from(nodes[k].neighbors);
nodes[k].size = nodes[k].neighbors.length;
});
return JSON.stringify({
nodes,
links,
});
},
},
};

5
src/site/graph.njk Normal file
View File

@ -0,0 +1,5 @@
---
permalink: /graph
eleventyExcludeFromCollections: true
---
{{ graphData | safe }}

93
src/site/index.11tydata.js
View File

@ -1,55 +1,60 @@
require("dotenv").config();
const settings = require("../helpers/constants");
const markdownIt = require("markdown-it");
const { getBacklinks, getOutboundLinks } = require("../helpers/linkUtils");
const md = markdownIt({
html: true,
html: true,
}).use(require("../helpers/utils").namedHeadingsFilter);
const allSettings = settings.ALL_NOTE_SETTINGS;
module.exports = {
eleventyComputed: {
backlinks: (data) => getBacklinks(data),
outbound: (data) => getOutboundLinks(data, true),
settings: (data) => {
const currentnote = data.collections.gardenEntry && data.collections.gardenEntry[0];
if (currentnote && currentnote.data) {
const noteSettings = {};
allSettings.forEach(setting => {
let noteSetting = currentnote.data[setting];
let globalSetting = process.env[setting];
eleventyComputed: {
settings: (data) => {
const currentnote =
data.collections.gardenEntry && data.collections.gardenEntry[0];
if (currentnote && currentnote.data) {
const noteSettings = {};
allSettings.forEach((setting) => {
let noteSetting = currentnote.data[setting];
let globalSetting = process.env[setting];
let settingValue = (noteSetting || (globalSetting === 'true' && noteSetting !== false));
noteSettings[setting] = settingValue;
});
return noteSettings;
}
return {};
},
noteTitle: (data) => {
const currentnote = data.collections.gardenEntry && data.collections.gardenEntry[0];
if (currentnote && currentnote.data) {
return currentnote.data.title || currentnote.data.page.fileSlug;
}
return "";
},
tags: (data) => {
const currentnote = data.collections.gardenEntry && data.collections.gardenEntry[0];
if (currentnote && currentnote.data) {
return currentnote.data.tags;
}
return [];
},
content: (data) => {
const currentnote = data.collections.gardenEntry && data.collections.gardenEntry[0];
if (currentnote && currentnote.template && currentnote.template.frontMatter && currentnote.template.frontMatter.content) {
return md.render(currentnote.template.frontMatter.content);
}
return "";
}
}
}
let settingValue =
noteSetting || (globalSetting === "true" && noteSetting !== false);
noteSettings[setting] = settingValue;
});
return noteSettings;
}
return {};
},
noteTitle: (data) => {
const currentnote =
data.collections.gardenEntry && data.collections.gardenEntry[0];
if (currentnote && currentnote.data) {
return currentnote.data.title || currentnote.data.page.fileSlug;
}
return "";
},
tags: (data) => {
const currentnote =
data.collections.gardenEntry && data.collections.gardenEntry[0];
if (currentnote && currentnote.data) {
return currentnote.data.tags;
}
return [];
},
content: (data) => {
const currentnote =
data.collections.gardenEntry && data.collections.gardenEntry[0];
if (
currentnote &&
currentnote.template &&
currentnote.template.frontMatter &&
currentnote.template.frontMatter.content
) {
return md.render(currentnote.template.frontMatter.content);
}
return "";
},
},
};

33
src/site/notes/notes.11tydata.js
View File

@ -1,24 +1,21 @@
require("dotenv").config();
const settings = require("../../helpers/constants");
const { getBacklinks, getOutboundLinks } = require("../../helpers/linkUtils");
const allSettings = settings.ALL_NOTE_SETTINGS;
const allSettings = settings.ALL_NOTE_SETTINGS;
module.exports = {
eleventyComputed: {
backlinks: (data) => getBacklinks(data),
outbound: (data) => getOutboundLinks(data),
settings: (data) => {
const noteSettings = {};
allSettings.forEach(setting => {
let noteSetting = data[setting];
let globalSetting = process.env[setting];
eleventyComputed: {
settings: (data) => {
const noteSettings = {};
allSettings.forEach((setting) => {
let noteSetting = data[setting];
let globalSetting = process.env[setting];
let settingValue = (noteSetting || (globalSetting === 'true' && noteSetting !== false));
noteSettings[setting] = settingValue;
});
return noteSettings;
}
}
}
let settingValue =
noteSetting || (globalSetting === "true" && noteSetting !== false);
noteSettings[setting] = settingValue;
});
return noteSettings;
},
},
};

82
src/site/styles/obsidian-base.scss
View File

@ -7943,6 +7943,8 @@ body {
.graph-control-section.mod-display .setting-item:not(.mod-slider):last-child .setting-item-info {
display: none;
}
.workspace-leaf-content[data-type='outline'] .view-content {
padding: 0;
}
@ -10632,4 +10634,82 @@ body {
width: 100%;
}
// Graph Controls
.graph-title-container {
position: relative;
}
#full-graph {
position: fixed;
top: 50%;
left: 50%;
height: 60vh;
width: 60vw;
min-height: 400px;
min-width: 400px;
transform: translate(-50%, -50%);
z-index: 9999;
display: none;
background-color: var(--background-secondary);
#full-graph-close {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
z-index: 9;
}
}
#full-graph.show {
display: block;
}
#graph-controls {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 5px;
position: absolute;
top: 115%;
cursor: pointer;
right: 0px;
left: 10px;
color: var(--text-accent);
z-index: 9;
.depth-control {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 7px;
.slider {
datalist {
display: flex;
flex-direction: row;
justify-content: space-between;
font-size: 0.6rem;
// padding: 2px 0px;
// width: 200px;
}
option {
padding: 0;
}
}
#depth-display {
background-color: var(--text-accent);
color: white;
width: 1rem;
height: 1rem;
font-size: 0.8rem;
display: flex;
justify-content: center;
align-items: center;
margin-top: 0.3rem;
}
}
}