falsycat/ar.falsy.cat
1
0
Fork 0
mirror of https://github.com/falsycat/ar.falsy.cat.git synced 2024-12-25 16:14:50 +00:00
Code Issues Projects Releases Wiki Activity

Format JS

Browse Source
This commit is contained in:
Claudio Yanes 2022-03-07 18:25:02 +00:00
parent 6f9283e95b
commit 978d5ca1ae
3 changed files with 361 additions and 362 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

433
assets/js/graph.js
View File

@ -1,221 +1,220 @@
async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLegend, enableZoom) { async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLegend, enableZoom) {
const { index, links, content } = await fetchData const { index, links, content } = await fetchData
const curPage = url.replace(baseUrl, "") const curPage = url.replace(baseUrl, "")
const parseIdsFromLinks = (links) => [...(new Set(links.flatMap(link => ([link.source, link.target]))))] const parseIdsFromLinks = (links) => [...(new Set(links.flatMap(link => ([link.source, link.target]))))]
const neighbours = new Set() const neighbours = new Set()
const wl = [curPage || "/", "__SENTINEL"] const wl = [curPage || "/", "__SENTINEL"]
if (depth >= 0) { if (depth >= 0) {
while (depth >= 0 && wl.length > 0) { while (depth >= 0 && wl.length > 0) {
// compute neighbours // compute neighbours
const cur = wl.shift() const cur = wl.shift()
if (cur === "__SENTINEL") { if (cur === "__SENTINEL") {
depth-- depth--
wl.push("__SENTINEL") wl.push("__SENTINEL")
} else { } else {
neighbours.add(cur) neighbours.add(cur)
const outgoing = index.links[cur] || [] const outgoing = index.links[cur] || []
const incoming = index.backlinks[cur] || [] const incoming = index.backlinks[cur] || []
wl.push(...outgoing.map(l => l.target), ...incoming.map(l => l.source)) wl.push(...outgoing.map(l => l.target), ...incoming.map(l => l.source))
}
} }
} else {
parseIdsFromLinks(links).forEach(id => neighbours.add(id))
} }
} else {
const data = { parseIdsFromLinks(links).forEach(id => neighbours.add(id))
nodes: [...neighbours].map(id => ({id})),
links: links.filter(l => neighbours.has(l.source) && neighbours.has(l.target)),
}
const color = (d) => {
if (d.id === curPage || (d.id === "/" && curPage === "")) {
return "var(--g-node-active)"
}
for (const pathColor of pathColors) {
const path = Object.keys(pathColor)[0]
const colour = pathColor[path]
if (d.id.startsWith(path)) {
return colour
}
}
return "var(--g-node)"
}
const drag = simulation => {
function dragstarted(event, d) {
if (!event.active) simulation.alphaTarget(1).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(event,d) {
d.fx = event.x;
d.fy = event.y;
}
function dragended(event,d) {
if (!event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
const noop = () => {}
return d3.drag()
.on("start", enableDrag ? dragstarted : noop)
.on("drag", enableDrag ? dragged : noop)
.on("end", enableDrag ? dragended : noop);
}
const height = 250
const width = document.getElementById("graph-container").offsetWidth
const simulation = d3.forceSimulation(data.nodes)
.force("charge", d3.forceManyBody().strength(-30))
.force("link", d3.forceLink(data.links).id(d => d.id))
.force("center", d3.forceCenter());
const svg = d3.select('#graph-container')
.append('svg')
.attr('width', width)
.attr('height', height)
.attr("viewBox", [-width / 2, -height / 2, width, height]);
if (enableLegend) {
const legend = [
{"Current": "var(--g-node-active)"},
{"Note": "var(--g-node)"},
...pathColors
]
legend.forEach((legendEntry, i) => {
const key = Object.keys(legendEntry)[0]
const colour = legendEntry[key]
svg.append("circle").attr("cx", -width/2 + 20).attr("cy", height/2 - 30 * (i+1)).attr("r", 6).style("fill", colour)
svg.append("text").attr("x", -width/2 + 40).attr("y", height/2 - 30 * (i+1)).text(key).style("font-size", "15px").attr("alignment-baseline","middle")
})
}
// draw links between nodes
const link = svg.append("g")
.selectAll("line")
.data(data.links)
.join("line")
.attr("class", "link")
.attr("stroke", "var(--g-link)")
.attr("stroke-width", 2)
.attr("data-source", d => d.source.id)
.attr("data-target", d => d.target.id)
// svg groups
const graphNode = svg.append("g")
.selectAll("g")
.data(data.nodes)
.enter().append("g")
// draw individual nodes
const node = graphNode.append("circle")
.attr("class", "node")
.attr("id", (d) => d.id)
.attr("r", (d) => {
const numOut = index.links[d.id]?.length || 0
const numIn = index.backlinks[d.id]?.length || 0
return 3 + (numOut + numIn) / 4
})
.attr("fill", color)
.style("cursor", "pointer")
.on("click", (_, d) => {
window.location.href = baseUrl + '/' + decodeURI(d.id).replace(/\s+/g, '-')
})
.on("mouseover", function (_, d) {
d3.selectAll(".node")
.transition()
.duration(100)
.attr("fill", "var(--g-node-inactive)")
const neighbours = parseIdsFromLinks([...(index.links[d.id] || []), ...(index.backlinks[d.id] || [])])
const neighbourNodes = d3.selectAll(".node").filter(d => neighbours.includes(d.id))
const currentId = d.id
const linkNodes = d3.selectAll(".link").filter(d => d.source.id === currentId || d.target.id === currentId)
// highlight neighbour nodes
neighbourNodes
.transition()
.duration(200)
.attr("fill", color)
// highlight links
linkNodes
.transition()
.duration(200)
.attr("stroke", "var(--g-link-active)")
// show text for self
d3.select(this.parentNode)
.select("text")
.raise()
.transition()
.duration(200)
.style("opacity", 1)
}).on("mouseleave", function (_,d) {
d3.selectAll(".node")
.transition()
.duration(200)
.attr("fill", color)
const currentId = d.id
const linkNodes = d3.selectAll(".link").filter(d => d.source.id === currentId || d.target.id === currentId)
linkNodes
.transition()
.duration(200)
.attr("stroke", "var(--g-link)")
d3.select(this.parentNode)
.select("text")
.transition()
.duration(200)
.style("opacity", 0)
})
.call(drag(simulation));
// draw labels
const labels = graphNode.append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.text((d) => content[decodeURI(d.id).replace(/\s+/g, '-')]?.title || "Untitled")
.style("opacity", 0)
.style("pointer-events", "none")
.call(drag(simulation));
// set panning
if (enableZoom) {
svg.call(d3.zoom()
.extent([[0, 0], [width, height]])
.scaleExtent([0.25, 4])
.on("zoom", ({transform}) => {
link.attr("transform", transform);
node.attr("transform", transform);
labels.attr("transform", transform);
}));
}
// progress the simulation
simulation.on("tick", () => {
link
.attr("x1", d => d.source.x)
.attr("y1", d => d.source.y)
.attr("x2", d => d.target.x)
.attr("y2", d => d.target.y)
node
.attr("cx", d => d.x)
.attr("cy", d => d.y)
labels
.attr("x", d => d.x)
.attr("y", d => d.y)
});
} }
const data = {
nodes: [...neighbours].map(id => ({ id })),
links: links.filter(l => neighbours.has(l.source) && neighbours.has(l.target)),
}
const color = (d) => {
if (d.id === curPage || (d.id === "/" && curPage === "")) {
return "var(--g-node-active)"
}
for (const pathColor of pathColors) {
const path = Object.keys(pathColor)[0]
const colour = pathColor[path]
if (d.id.startsWith(path)) {
return colour
}
}
return "var(--g-node)"
}
const drag = simulation => {
function dragstarted(event, d) {
if (!event.active) simulation.alphaTarget(1).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(event, d) {
d.fx = event.x;
d.fy = event.y;
}
function dragended(event, d) {
if (!event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
const noop = () => { }
return d3.drag()
.on("start", enableDrag ? dragstarted : noop)
.on("drag", enableDrag ? dragged : noop)
.on("end", enableDrag ? dragended : noop);
}
const height = 250
const width = document.getElementById("graph-container").offsetWidth
const simulation = d3.forceSimulation(data.nodes)
.force("charge", d3.forceManyBody().strength(-30))
.force("link", d3.forceLink(data.links).id(d => d.id))
.force("center", d3.forceCenter());
const svg = d3.select('#graph-container')
.append('svg')
.attr('width', width)
.attr('height', height)
.attr("viewBox", [-width / 2, -height / 2, width, height]);
if (enableLegend) {
const legend = [
{ "Current": "var(--g-node-active)" },
{ "Note": "var(--g-node)" },
...pathColors
]
legend.forEach((legendEntry, i) => {
const key = Object.keys(legendEntry)[0]
const colour = legendEntry[key]
svg.append("circle").attr("cx", -width / 2 + 20).attr("cy", height / 2 - 30 * (i + 1)).attr("r", 6).style("fill", colour)
svg.append("text").attr("x", -width / 2 + 40).attr("y", height / 2 - 30 * (i + 1)).text(key).style("font-size", "15px").attr("alignment-baseline", "middle")
})
}
// draw links between nodes
const link = svg.append("g")
.selectAll("line")
.data(data.links)
.join("line")
.attr("class", "link")
.attr("stroke", "var(--g-link)")
.attr("stroke-width", 2)
.attr("data-source", d => d.source.id)
.attr("data-target", d => d.target.id)
// svg groups
const graphNode = svg.append("g")
.selectAll("g")
.data(data.nodes)
.enter().append("g")
// draw individual nodes
const node = graphNode.append("circle")
.attr("class", "node")
.attr("id", (d) => d.id)
.attr("r", (d) => {
const numOut = index.links[d.id]?.length || 0
const numIn = index.backlinks[d.id]?.length || 0
return 3 + (numOut + numIn) / 4
})
.attr("fill", color)
.style("cursor", "pointer")
.on("click", (_, d) => {
window.location.href = baseUrl + '/' + decodeURI(d.id).replace(/\s+/g, '-')
})
.on("mouseover", function (_, d) {
d3.selectAll(".node")
.transition()
.duration(100)
.attr("fill", "var(--g-node-inactive)")
const neighbours = parseIdsFromLinks([...(index.links[d.id] || []), ...(index.backlinks[d.id] || [])])
const neighbourNodes = d3.selectAll(".node").filter(d => neighbours.includes(d.id))
const currentId = d.id
const linkNodes = d3.selectAll(".link").filter(d => d.source.id === currentId || d.target.id === currentId)
// highlight neighbour nodes
neighbourNodes
.transition()
.duration(200)
.attr("fill", color)
// highlight links
linkNodes
.transition()
.duration(200)
.attr("stroke", "var(--g-link-active)")
// show text for self
d3.select(this.parentNode)
.select("text")
.raise()
.transition()
.duration(200)
.style("opacity", 1)
}).on("mouseleave", function (_, d) {
d3.selectAll(".node")
.transition()
.duration(200)
.attr("fill", color)
const currentId = d.id
const linkNodes = d3.selectAll(".link").filter(d => d.source.id === currentId || d.target.id === currentId)
linkNodes
.transition()
.duration(200)
.attr("stroke", "var(--g-link)")
d3.select(this.parentNode)
.select("text")
.transition()
.duration(200)
.style("opacity", 0)
})
.call(drag(simulation));
// draw labels
const labels = graphNode.append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.text((d) => content[decodeURI(d.id).replace(/\s+/g, '-')]?.title || "Untitled")
.style("opacity", 0)
.style("pointer-events", "none")
.call(drag(simulation));
// set panning
if (enableZoom) {
svg.call(d3.zoom()
.extent([[0, 0], [width, height]])
.scaleExtent([0.25, 4])
.on("zoom", ({ transform }) => {
link.attr("transform", transform);
node.attr("transform", transform);
labels.attr("transform", transform);
}));
}
// progress the simulation
simulation.on("tick", () => {
link
.attr("x1", d => d.source.x)
.attr("y1", d => d.source.y)
.attr("x2", d => d.target.x)
.attr("y2", d => d.target.y)
node
.attr("cx", d => d.x)
.attr("cy", d => d.y)
labels
.attr("x", d => d.x)
.attr("y", d => d.y)
});
}

36
assets/js/popover.js
View File

@ -5,29 +5,29 @@ function htmlToElement(html) {
return template.content.firstChild return template.content.firstChild
} }
function initPopover(base) { function initPopover(baseURL) {
const baseUrl = base.replace(window.location.origin, "") // is this useless? const basePath = baseURL.replace(window.location.origin, "")
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
fetchData.then(({content}) => { fetchData.then(({ content }) => {
const links = [...document.getElementsByClassName("internal-link")] const links = [...document.getElementsByClassName("internal-link")]
links.forEach(li => { links.forEach(li => {
const linkDest = content[li.dataset.src.replace(baseUrl, "")] const linkDest = content[li.dataset.src.replace(basePath, "")]
// const linkDest = content[li.dataset.src] // const linkDest = content[li.dataset.src]
if (linkDest) { if (linkDest) {
const popoverElement = `<div class="popover"> const popoverElement = `<div class="popover">
<h3>${linkDest.title}</h3> <h3>${linkDest.title}</h3>
<p>${removeMarkdown(linkDest.content).split(" ", 20).join(" ")}...</p> <p>${removeMarkdown(linkDest.content).split(" ", 20).join(" ")}...</p>
<p class="meta">${new Date(linkDest.lastmodified).toLocaleDateString()}</p> <p class="meta">${new Date(linkDest.lastmodified).toLocaleDateString()}</p>
</div>` </div>`
const el = htmlToElement(popoverElement) const el = htmlToElement(popoverElement)
li.appendChild(el) li.appendChild(el)
li.addEventListener("mouseover", () => { li.addEventListener("mouseover", () => {
el.classList.add("visible") el.classList.add("visible")
}) })
li.addEventListener("mouseout", () => { li.addEventListener("mouseout", () => {
el.classList.remove("visible") el.classList.remove("visible")
}) })
} }
}) })
}) })
}) })

254
assets/js/search.js
View File

@ -58,190 +58,190 @@ const removeMarkdown = (
}; };
// ----- // -----
(async function() { (async function () {
const contentIndex = new FlexSearch.Document({ const contentIndex = new FlexSearch.Document({
cache: true, cache: true,
charset: "latin:extra", charset: "latin:extra",
optimize: true, optimize: true,
worker: true, worker: true,
document: { document: {
index: [{ index: [{
field: "content", field: "content",
tokenize: "strict", tokenize: "strict",
context: { context: {
resolution: 5, resolution: 5,
depth: 3, depth: 3,
bidirectional: true bidirectional: true
}, },
suggest: true, suggest: true,
}, { }, {
field: "title", field: "title",
tokenize: "forward", tokenize: "forward",
}] }]
} }
}) })
const { content } = await fetchData const { content } = await fetchData
for (const [key, value] of Object.entries(content)) { for (const [key, value] of Object.entries(content)) {
contentIndex.add({ contentIndex.add({
id: key, id: key,
title: value.title, title: value.title,
content: removeMarkdown(value.content), content: removeMarkdown(value.content),
}) })
} }
const highlight = (content, term) => { const highlight = (content, term) => {
const highlightWindow = 20 const highlightWindow = 20
const tokenizedTerm = term.split(/\s+/).filter(t => t !== "") const tokenizedTerm = term.split(/\s+/).filter(t => t !== "")
const splitText = content.split(/\s+/).filter(t => t !== "") const splitText = content.split(/\s+/).filter(t => t !== "")
const includesCheck = (token) => tokenizedTerm.some(term => token.toLowerCase().startsWith(term.toLowerCase())) const includesCheck = (token) => tokenizedTerm.some(term => token.toLowerCase().startsWith(term.toLowerCase()))
const occurrencesIndices = splitText const occurrencesIndices = splitText
.map(includesCheck) .map(includesCheck)
// calculate best index // calculate best index
let bestSum = 0 let bestSum = 0
let bestIndex = 0 let bestIndex = 0
for (let i = 0; i < Math.max(occurrencesIndices.length - highlightWindow, 0); i++) { for (let i = 0; i < Math.max(occurrencesIndices.length - highlightWindow, 0); i++) {
const window = occurrencesIndices.slice(i, i + highlightWindow) const window = occurrencesIndices.slice(i, i + highlightWindow)
const windowSum = window.reduce((total, cur) => total + cur, 0) const windowSum = window.reduce((total, cur) => total + cur, 0)
if (windowSum >= bestSum) { if (windowSum >= bestSum) {
bestSum = windowSum bestSum = windowSum
bestIndex = i bestIndex = i
} }
}
const startIndex = Math.max(bestIndex - highlightWindow, 0)
const endIndex = Math.min(startIndex + 2 * highlightWindow, splitText.length)
const mappedText = splitText
.slice(startIndex, endIndex)
.map(token => {
if (includesCheck(token)) {
return `<span class="search-highlight">${token}</span>`
} }
return token
}) const startIndex = Math.max(bestIndex - highlightWindow, 0)
.join(" ") const endIndex = Math.min(startIndex + 2 * highlightWindow, splitText.length)
.replaceAll('</span> <span class="search-highlight">', " ") const mappedText = splitText
return `${startIndex === 0 ? "" : "..."}${mappedText}${endIndex === splitText.length ? "" : "..."}` .slice(startIndex, endIndex)
.map(token => {
if (includesCheck(token)) {
return `<span class="search-highlight">${token}</span>`
}
return token
})
.join(" ")
.replaceAll('</span> <span class="search-highlight">', " ")
return `${startIndex === 0 ? "" : "..."}${mappedText}${endIndex === splitText.length ? "" : "..."}`
} }
const resultToHTML = ({url, title, content, term}) => { const resultToHTML = ({ url, title, content, term }) => {
const text = removeMarkdown(content) const text = removeMarkdown(content)
const resultTitle = highlight(title, term) const resultTitle = highlight(title, term)
const resultText = highlight(text, term) const resultText = highlight(text, term)
return `<button class="result-card" id="${url}"> return `<button class="result-card" id="${url}">
<h3>${resultTitle}</h3> <h3>${resultTitle}</h3>
<p>${resultText}</p> <p>${resultText}</p>
</button>` </button>`
} }
const redir = (id, term) => { const redir = (id, term) => {
window.location.href = BASE_URL + `${id}#:~:text=${encodeURIComponent(term)}` window.location.href = BASE_URL + `${id}#:~:text=${encodeURIComponent(term)}`
} }
const formatForDisplay = id => ({ const formatForDisplay = id => ({
id, id,
url: id, url: id,
title: content[id].title, title: content[id].title,
content: content[id].content content: content[id].content
}) })
const source = document.getElementById('search-bar') const source = document.getElementById('search-bar')
const results = document.getElementById("results-container") const results = document.getElementById("results-container")
let term let term
source.addEventListener("keyup", (e) => { source.addEventListener("keyup", (e) => {
if (e.key === "Enter") { if (e.key === "Enter") {
const anchor = document.getElementsByClassName("result-card")[0] const anchor = document.getElementsByClassName("result-card")[0]
redir(anchor.id, term) redir(anchor.id, term)
} }
}) })
source.addEventListener('input', (e) => { source.addEventListener('input', (e) => {
term = e.target.value term = e.target.value
contentIndex.search(term, [ contentIndex.search(term, [
{ {
field: "content", field: "content",
limit: 10, limit: 10,
suggest: true, suggest: true,
}, },
{ {
field: "title", field: "title",
limit: 5, limit: 5,
} }
]).then(searchResults => { ]).then(searchResults => {
const getByField = field => { const getByField = field => {
const results = searchResults.filter(x => x.field === field) const results = searchResults.filter(x => x.field === field)
if (results.length === 0) { if (results.length === 0) {
return [] return []
} else { } else {
return [...results[0].result] return [...results[0].result]
} }
} }
const allIds = new Set([...getByField('title'), ...getByField('content')]) const allIds = new Set([...getByField('title'), ...getByField('content')])
const finalResults = [...allIds].map(formatForDisplay) const finalResults = [...allIds].map(formatForDisplay)
// display // display
if (finalResults.length === 0) { if (finalResults.length === 0) {
results.innerHTML = `<button class="result-card"> results.innerHTML = `<button class="result-card">
<h3>No results.</h3> <h3>No results.</h3>
<p>Try another search term?</p> <p>Try another search term?</p>
</button>` </button>`
} else { } else {
results.innerHTML = finalResults results.innerHTML = finalResults
.map(result => resultToHTML({ .map(result => resultToHTML({
...result, ...result,
term, term,
})) }))
.join("\n") .join("\n")
const anchors = document.getElementsByClassName("result-card"); const anchors = document.getElementsByClassName("result-card");
[...anchors].forEach(anchor => { [...anchors].forEach(anchor => {
anchor.onclick = () => redir(anchor.id, term) anchor.onclick = () => redir(anchor.id, term)
})
}
}) })
}
})
}) })
const searchContainer = document.getElementById("search-container") const searchContainer = document.getElementById("search-container")
function openSearch() { function openSearch() {
if (searchContainer.style.display === "none" || searchContainer.style.display === "") { if (searchContainer.style.display === "none" || searchContainer.style.display === "") {
source.value = "" source.value = ""
results.innerHTML = "" results.innerHTML = ""
searchContainer.style.display = "block" searchContainer.style.display = "block"
source.focus() source.focus()
} else { } else {
searchContainer.style.display = "none" searchContainer.style.display = "none"
} }
} }
function closeSearch() { function closeSearch() {
searchContainer.style.display = "none" searchContainer.style.display = "none"
} }
document.addEventListener('keydown', (event) => { document.addEventListener('keydown', (event) => {
if (event.key === "/") { if (event.key === "/") {
event.preventDefault() event.preventDefault()
openSearch() openSearch()
} }
if (event.key === "Escape") { if (event.key === "Escape") {
event.preventDefault() event.preventDefault()
closeSearch() closeSearch()
} }
}) })
const searchButton = document.getElementById("search-icon") const searchButton = document.getElementById("search-icon")
searchButton.addEventListener('click', (evt) => { searchButton.addEventListener('click', (evt) => {
openSearch() openSearch()
}) })
searchButton.addEventListener('keydown', (evt) => { searchButton.addEventListener('keydown', (evt) => {
openSearch() openSearch()
}) })
searchContainer.addEventListener('click', (evt) => { searchContainer.addEventListener('click', (evt) => {
closeSearch() closeSearch()
}) })
document.getElementById("search-space").addEventListener('click', (evt) => { document.getElementById("search-space").addEventListener('click', (evt) => {
evt.stopPropagation() evt.stopPropagation()
}) })
})() })()