GitHub/quartz
1
0
Fork 2
mirror of https://github.com/jackyzha0/quartz.git synced 2025-12-24 05:14:06 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add prettier formatting

Browse Source
This commit is contained in:
Aiden Bai 2022-04-29 11:09:05 -07:00
parent 6df774eb51
commit 4aaa748023
No known key found for this signature in database
GPG Key ID: D37584388675FF3A
4 changed files with 121 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
.pnpm-debug.log
View File

@ -1,14 +0,0 @@
{
"0 debug pnpm:scope": {
"selected": 1
},
"1 error pnpm": {
"code": "ERR_PNPM_NO_SCRIPT",
"err": {
"name": "pnpm",
"message": "Missing script: dev",
"code": "ERR_PNPM_NO_SCRIPT",
"stack": "pnpm: Missing script: dev\n at Object.handler (/opt/homebrew/Cellar/node/17.3.0/pnpm-global/5/node_modules/.pnpm/pnpm@6.32.9/node_modules/pnpm/dist/pnpm.cjs:178363:15)\n at async /opt/homebrew/Cellar/node/17.3.0/pnpm-global/5/node_modules/.pnpm/pnpm@6.32.9/node_modules/pnpm/dist/pnpm.cjs:182614:21\n at async run (/opt/homebrew/Cellar/node/17.3.0/pnpm-global/5/node_modules/.pnpm/pnpm@6.32.9/node_modules/pnpm/dist/pnpm.cjs:182588:34)\n at async runPnpm (/opt/homebrew/Cellar/node/17.3.0/pnpm-global/5/node_modules/.pnpm/pnpm@6.32.9/node_modules/pnpm/dist/pnpm.cjs:182807:5)\n at async /opt/homebrew/Cellar/node/17.3.0/pnpm-global/5/node_modules/.pnpm/pnpm@6.32.9/node_modules/pnpm/dist/pnpm.cjs:182799:7"
}
}
}

19
.prettierrc.json Normal file
View File

@ -0,0 +1,19 @@
{
"arrowParens": "always",
"bracketSameLine": false,
"bracketSpacing": true,
"embeddedLanguageFormatting": "auto",
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"jsxSingleQuote": false,
"printWidth": 100,
"proseWrap": "preserve",
"quoteProps": "as-needed",
"requirePragma": false,
"semi": true,
"singleQuote": false,
"tabWidth": 2,
"trailingComma": "es5",
"useTabs": false,
"vueIndentScriptAndStyle": false
}

210
assets/js/graph.js
View File

@ -1,17 +1,9 @@
async function drawGraph( async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLegend, enableZoom) {
url, if (!document.getElementById("graph-container")) return;
baseUrl, document.getElementById("graph-container").textContent = "";
pathColors,
depth,
enableDrag,
enableLegend,
enableZoom
) {
if (!document.getElementById('graph-container')) return;
document.getElementById('graph-container').textContent = '';
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) => [ const parseIdsFromLinks = (links) => [
...new Set(links.flatMap((link) => [link.source, link.target])), ...new Set(links.flatMap((link) => [link.source, link.target])),
@ -19,22 +11,19 @@ async function drawGraph(
const copyLinks = JSON.parse(JSON.stringify(links)); const copyLinks = JSON.parse(JSON.stringify(links));
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( wl.push(...outgoing.map((l) => l.target), ...incoming.map((l) => l.source));
...outgoing.map((l) => l.target),
...incoming.map((l) => l.source)
);
} }
} }
} else { } else {
@ -43,14 +32,12 @@ async function drawGraph(
const data = { const data = {
nodes: [...neighbours].map((id) => ({ id })), nodes: [...neighbours].map((id) => ({ id })),
links: copyLinks.filter( links: copyLinks.filter((l) => neighbours.has(l.source) && neighbours.has(l.target)),
(l) => neighbours.has(l.source) && neighbours.has(l.target)
),
}; };
const color = (d) => { const color = (d) => {
if (d.id === curPage || (d.id === '/' && curPage === '')) { if (d.id === curPage || (d.id === "/" && curPage === "")) {
return 'var(--g-node-active)'; return "var(--g-node-active)";
} }
for (const pathColor of pathColors) { for (const pathColor of pathColors) {
@ -61,7 +48,7 @@ async function drawGraph(
} }
} }
return 'var(--g-node)'; return "var(--g-node)";
}; };
const drag = (simulation) => { const drag = (simulation) => {
@ -85,80 +72,68 @@ async function drawGraph(
const noop = () => {}; const noop = () => {};
return d3 return d3
.drag() .drag()
.on('start', enableDrag ? dragstarted : noop) .on("start", enableDrag ? dragstarted : noop)
.on('drag', enableDrag ? dragged : noop) .on("drag", enableDrag ? dragged : noop)
.on('end', enableDrag ? dragended : noop); .on("end", enableDrag ? dragended : noop);
}; };
const height = Math.max( const height = Math.max(document.getElementById("graph-container").offsetHeight, 250);
document.getElementById('graph-container').offsetHeight, const width = document.getElementById("graph-container").offsetWidth;
250
);
const width = document.getElementById('graph-container').offsetWidth;
const simulation = d3 const simulation = d3
.forceSimulation(data.nodes) .forceSimulation(data.nodes)
.force('charge', d3.forceManyBody().strength(-30)) .force("charge", d3.forceManyBody().strength(-30))
.force( .force(
'link', "link",
d3 d3
.forceLink(data.links) .forceLink(data.links)
.id((d) => d.id) .id((d) => d.id)
.distance(40) .distance(40)
) )
.force('center', d3.forceCenter()); .force("center", d3.forceCenter());
const svg = d3 const svg = d3
.select('#graph-container') .select("#graph-container")
.append('svg') .append("svg")
.attr('width', width) .attr("width", width)
.attr('height', height) .attr("height", height)
.attr('viewBox', [-width / 2, -height / 2, width, height]); .attr("viewBox", [-width / 2, -height / 2, width, height]);
if (enableLegend) { if (enableLegend) {
const legend = [ const legend = [{ Current: "var(--g-node-active)" }, { Note: "var(--g-node)" }, ...pathColors];
{ Current: 'var(--g-node-active)' },
{ Note: 'var(--g-node)' },
...pathColors,
];
legend.forEach((legendEntry, i) => { legend.forEach((legendEntry, i) => {
const key = Object.keys(legendEntry)[0]; const key = Object.keys(legendEntry)[0];
const colour = legendEntry[key]; const colour = legendEntry[key];
svg svg
.append('circle') .append("circle")
.attr('cx', -width / 2 + 20) .attr("cx", -width / 2 + 20)
.attr('cy', height / 2 - 30 * (i + 1)) .attr("cy", height / 2 - 30 * (i + 1))
.attr('r', 6) .attr("r", 6)
.style('fill', colour); .style("fill", colour);
svg svg
.append('text') .append("text")
.attr('x', -width / 2 + 40) .attr("x", -width / 2 + 40)
.attr('y', height / 2 - 30 * (i + 1)) .attr("y", height / 2 - 30 * (i + 1))
.text(key) .text(key)
.style('font-size', '15px') .style("font-size", "15px")
.attr('alignment-baseline', 'middle'); .attr("alignment-baseline", "middle");
}); });
} }
// draw links between nodes // draw links between nodes
const link = svg const link = svg
.append('g') .append("g")
.selectAll('line') .selectAll("line")
.data(data.links) .data(data.links)
.join('line') .join("line")
.attr('class', 'link') .attr("class", "link")
.attr('stroke', 'var(--g-link)') .attr("stroke", "var(--g-link)")
.attr('stroke-width', 2) .attr("stroke-width", 2)
.attr('data-source', (d) => d.source.id) .attr("data-source", (d) => d.source.id)
.attr('data-target', (d) => d.target.id); .attr("data-target", (d) => d.target.id);
// svg groups // svg groups
const graphNode = svg const graphNode = svg.append("g").selectAll("g").data(data.nodes).enter().append("g");
.append('g')
.selectAll('g')
.data(data.nodes)
.enter()
.append('g');
// calculate radius // calculate radius
const nodeRadius = (d) => { const nodeRadius = (d) => {
@ -169,81 +144,66 @@ async function drawGraph(
// draw individual nodes // draw individual nodes
const node = graphNode const node = graphNode
.append('circle') .append("circle")
.attr('class', 'node') .attr("class", "node")
.attr('id', (d) => d.id) .attr("id", (d) => d.id)
.attr('r', nodeRadius) .attr("r", nodeRadius)
.attr('fill', color) .attr("fill", color)
.style('cursor', 'pointer') .style("cursor", "pointer")
.on('click', (_, d) => { .on("click", (_, d) => {
window.navigate( window.navigate(new URL(`${baseUrl}${decodeURI(d.id).replace(/\s+/g, "-")}/`), ".singlePage");
new URL(`${baseUrl}${decodeURI(d.id).replace(/\s+/g, '-')}/`),
'.singlePage'
);
}) })
.on('mouseover', function (_, d) { .on("mouseover", function (_, d) {
d3.selectAll('.node') d3.selectAll(".node").transition().duration(100).attr("fill", "var(--g-node-inactive)");
.transition()
.duration(100)
.attr('fill', 'var(--g-node-inactive)');
const neighbours = parseIdsFromLinks([ const neighbours = parseIdsFromLinks([
...(index.links[d.id] || []), ...(index.links[d.id] || []),
...(index.backlinks[d.id] || []), ...(index.backlinks[d.id] || []),
]); ]);
const neighbourNodes = d3 const neighbourNodes = d3.selectAll(".node").filter((d) => neighbours.includes(d.id));
.selectAll('.node')
.filter((d) => neighbours.includes(d.id));
const currentId = d.id; const currentId = d.id;
const linkNodes = d3 const linkNodes = d3
.selectAll('.link') .selectAll(".link")
.filter((d) => d.source.id === currentId || d.target.id === currentId); .filter((d) => d.source.id === currentId || d.target.id === currentId);
// highlight neighbour nodes // highlight neighbour nodes
neighbourNodes.transition().duration(200).attr('fill', color); neighbourNodes.transition().duration(200).attr("fill", color);
// highlight links // highlight links
linkNodes linkNodes.transition().duration(200).attr("stroke", "var(--g-link-active)");
.transition()
.duration(200)
.attr('stroke', 'var(--g-link-active)');
// show text for self // show text for self
d3.select(this.parentNode) d3.select(this.parentNode)
.raise() .raise()
.select('text') .select("text")
.transition() .transition()
.duration(200) .duration(200)
.style('opacity', 1); .style("opacity", 1);
}) })
.on('mouseleave', function (_, d) { .on("mouseleave", function (_, d) {
d3.selectAll('.node').transition().duration(200).attr('fill', color); d3.selectAll(".node").transition().duration(200).attr("fill", color);
const currentId = d.id; const currentId = d.id;
const linkNodes = d3 const linkNodes = d3
.selectAll('.link') .selectAll(".link")
.filter((d) => d.source.id === currentId || d.target.id === currentId); .filter((d) => d.source.id === currentId || d.target.id === currentId);
linkNodes.transition().duration(200).attr('stroke', 'var(--g-link)'); linkNodes.transition().duration(200).attr("stroke", "var(--g-link)");
d3.select(this.parentNode) d3.select(this.parentNode).select("text").transition().duration(200).style("opacity", 0);
.select('text')
.transition()
.duration(200)
.style('opacity', 0);
}) })
.call(drag(simulation)); .call(drag(simulation));
// draw labels // draw labels
const labels = graphNode const labels = graphNode
.append('text') .append("text")
.attr('dx', 0) .attr("dx", 0)
.attr('dy', (d) => nodeRadius(d) + 8 + 'px') .attr("dy", (d) => nodeRadius(d) + 8 + "px")
.attr('text-anchor', 'middle') .attr("text-anchor", "middle")
.text((d) => content[d.id]?.title || d.id.replace('-', ' ')) .text((d) => content[d.id]?.title || d.id.replace("-", " "))
.style('opacity', 0) .style("opacity", 0)
.style('pointer-events', 'none') .style("pointer-events", "none")
.style('font-size', '0.4em') .style("font-size", "0.4em")
.raise() .raise()
.call(drag(simulation)); .call(drag(simulation));
@ -258,24 +218,24 @@ async function drawGraph(
[width, height], [width, height],
]) ])
.scaleExtent([0.25, 4]) .scaleExtent([0.25, 4])
.on('zoom', ({ transform }) => { .on("zoom", ({ transform }) => {
link.attr('transform', transform); link.attr("transform", transform);
node.attr('transform', transform); node.attr("transform", transform);
const scale = transform.k; const scale = transform.k;
const scaledOpacity = Math.max((scale - 1) / 3.75, 0); const scaledOpacity = Math.max((scale - 1) / 3.75, 0);
labels.attr('transform', transform).style('opacity', scaledOpacity); labels.attr("transform", transform).style("opacity", scaledOpacity);
}) })
); );
} }
// progress the simulation // progress the simulation
simulation.on('tick', () => { simulation.on("tick", () => {
link link
.attr('x1', (d) => d.source.x) .attr("x1", (d) => d.source.x)
.attr('y1', (d) => d.source.y) .attr("y1", (d) => d.source.y)
.attr('x2', (d) => d.target.x) .attr("x2", (d) => d.target.x)
.attr('y2', (d) => d.target.y); .attr("y2", (d) => d.target.y);
node.attr('cx', (d) => d.x).attr('cy', (d) => d.y); node.attr("cx", (d) => d.x).attr("cy", (d) => d.y);
labels.attr('x', (d) => d.x).attr('y', (d) => d.y); labels.attr("x", (d) => d.x).attr("y", (d) => d.y);
}); });
} }

46
layouts/partials/head.html
View File

@ -5,38 +5,29 @@
name="description" name="description"
content="{{if .IsHome}}{{$.Site.Data.config.description}}{{else}}{{.Summary}}{{end}}" content="{{if .IsHome}}{{$.Site.Data.config.description}}{{else}}{{.Summary}}{{end}}"
/> />
<title> <title>{{ if .Title }}{{ .Title }}{{ else }}{{ $.Site.Data.config.page_title }}{{ end }}</title>
{{ if .Title }}{{ .Title }}{{ else }}{{ $.Site.Data.config.page_title }}{{
end }}
</title>
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link <link rel="shortcut icon" type="image/png" href="{{$.Site.BaseURL}}/icon.png" />
rel="shortcut icon"
type="image/png"
href="{{$.Site.BaseURL}}/icon.png"
/>
<!-- CSS Stylesheets and Fonts --> <!-- CSS Stylesheets and Fonts -->
<link <link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Source+Sans+Pro:wght@400;600;700&family=Fira+Code:wght@400;700&display=swap" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Source+Sans+Pro:wght@400;600;700&family=Fira+Code:wght@400;700&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
{{$sass := resources.Match "styles/[!_]*.scss" }} {{$css := slice }} {{range {{$sass := resources.Match "styles/[!_]*.scss" }} {{$css := slice }} {{range $sass}} {{$scss := .
$sass}} {{$scss := . | resources.ToCSS (dict "outputStyle" "compressed") }} | resources.ToCSS (dict "outputStyle" "compressed") }} {{$css = $css | append $scss}} {{end}}
{{$css = $css | append $scss}} {{end}} {{$finalCss := $css | resources.Concat {{$finalCss := $css | resources.Concat "styles.css" | resources.Fingerprint "md5" |
"styles.css" | resources.Fingerprint "md5" | resources.Minify }} resources.Minify }}
<link href="{{$finalCss.Permalink}}" rel="stylesheet" /> <link href="{{$finalCss.Permalink}}" rel="stylesheet" />
{{ $darkMode := resources.Get "js/darkmode.js" | resources.Fingerprint "md5" | {{ $darkMode := resources.Get "js/darkmode.js" | resources.Fingerprint "md5" | resources.Minify }}
resources.Minify }}
<script src="{{$darkMode.Permalink}}"></script> <script src="{{$darkMode.Permalink}}"></script>
{{partial "katex.html" .}} {{partial "katex.html" .}}
<!-- Preload page vars --> <!-- Preload page vars -->
{{$linkIndex := resources.Get "indices/linkIndex.json" | resources.Fingerprint {{$linkIndex := resources.Get "indices/linkIndex.json" | resources.Fingerprint "md5" |
"md5" | resources.Minify | }} {{$contentIndex := resources.Get resources.Minify | }} {{$contentIndex := resources.Get "indices/contentIndex.json" |
"indices/contentIndex.json" | resources.Fingerprint "md5" | resources.Minify resources.Fingerprint "md5" | resources.Minify }}
}}
<script> <script>
const BASE_URL = {{.Site.BaseURL}} const BASE_URL = {{.Site.BaseURL}}
const fetchData = Promise.all([ const fetchData = Promise.all([
@ -56,12 +47,9 @@
})) }))
</script> </script>
<script type="module"> <script type="module">
import { import { router, navigate } from "https://unpkg.com/million/dist/router.mjs";
router,
navigate,
} from 'https://unpkg.com/million/dist/router.mjs';
window.navigate = navigate; window.navigate = navigate;
router('.singlePage'); router(".singlePage");
const callback = () => { const callback = () => {
requestAnimationFrame(() => { requestAnimationFrame(() => {
drawGraph( drawGraph(
@ -72,11 +60,11 @@
{{$.Site.Data.graphConfig.enableDrag}}, {{$.Site.Data.graphConfig.enableDrag}},
{{$.Site.Data.graphConfig.enableLegend}}, {{$.Site.Data.graphConfig.enableLegend}},
{{$.Site.Data.graphConfig.enableZoom}} {{$.Site.Data.graphConfig.enableZoom}}
) )}
}) );
} };
window.addEventListener('million:navigate', callback); window.addEventListener("million:navigate", callback);
window.addEventListener('DOMContentLoaded', callback); window.addEventListener("DOMContentLoaded", callback);
</script> </script>
</head> </head>
{{ template "_internal/google_analytics.html" . }} {{ template "_internal/google_analytics.html" . }}