From 4aaa748023a2310488f387e92bc9a581a8180b0a Mon Sep 17 00:00:00 2001 From: Aiden Bai Date: Fri, 29 Apr 2022 11:09:05 -0700 Subject: [PATCH] Add prettier formatting --- .pnpm-debug.log | 14 --- .prettierrc.json | 19 ++++ assets/js/graph.js | 210 +++++++++++++++---------------------- layouts/partials/head.html | 46 +++----- 4 files changed, 121 insertions(+), 168 deletions(-) delete mode 100644 .pnpm-debug.log create mode 100644 .prettierrc.json diff --git a/.pnpm-debug.log b/.pnpm-debug.log deleted file mode 100644 index bd65a3352..000000000 --- a/.pnpm-debug.log +++ /dev/null @@ -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" - } - } -} \ No newline at end of file diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 000000000..7ed5d6a71 --- /dev/null +++ b/.prettierrc.json @@ -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 +} diff --git a/assets/js/graph.js b/assets/js/graph.js index a9268470c..b7c95b3a6 100644 --- a/assets/js/graph.js +++ b/assets/js/graph.js @@ -1,17 +1,9 @@ -async function drawGraph( - url, - baseUrl, - pathColors, - depth, - enableDrag, - enableLegend, - enableZoom -) { - if (!document.getElementById('graph-container')) return; - document.getElementById('graph-container').textContent = ''; +async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLegend, enableZoom) { + if (!document.getElementById("graph-container")) return; + document.getElementById("graph-container").textContent = ""; 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])), @@ -19,22 +11,19 @@ async function drawGraph( const copyLinks = JSON.parse(JSON.stringify(links)); const neighbours = new Set(); - const wl = [curPage || '/', '__SENTINEL']; + const wl = [curPage || "/", "__SENTINEL"]; if (depth >= 0) { while (depth >= 0 && wl.length > 0) { // compute neighbours const cur = wl.shift(); - if (cur === '__SENTINEL') { + if (cur === "__SENTINEL") { depth--; - wl.push('__SENTINEL'); + wl.push("__SENTINEL"); } else { neighbours.add(cur); const outgoing = index.links[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 { @@ -43,14 +32,12 @@ async function drawGraph( const data = { nodes: [...neighbours].map((id) => ({ id })), - links: copyLinks.filter( - (l) => neighbours.has(l.source) && neighbours.has(l.target) - ), + links: copyLinks.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)'; + if (d.id === curPage || (d.id === "/" && curPage === "")) { + return "var(--g-node-active)"; } for (const pathColor of pathColors) { @@ -61,7 +48,7 @@ async function drawGraph( } } - return 'var(--g-node)'; + return "var(--g-node)"; }; const drag = (simulation) => { @@ -85,80 +72,68 @@ async function drawGraph( const noop = () => {}; return d3 .drag() - .on('start', enableDrag ? dragstarted : noop) - .on('drag', enableDrag ? dragged : noop) - .on('end', enableDrag ? dragended : noop); + .on("start", enableDrag ? dragstarted : noop) + .on("drag", enableDrag ? dragged : noop) + .on("end", enableDrag ? dragended : noop); }; - const height = Math.max( - document.getElementById('graph-container').offsetHeight, - 250 - ); - const width = document.getElementById('graph-container').offsetWidth; + const height = Math.max(document.getElementById("graph-container").offsetHeight, 250); + const width = document.getElementById("graph-container").offsetWidth; const simulation = d3 .forceSimulation(data.nodes) - .force('charge', d3.forceManyBody().strength(-30)) + .force("charge", d3.forceManyBody().strength(-30)) .force( - 'link', + "link", d3 .forceLink(data.links) .id((d) => d.id) .distance(40) ) - .force('center', d3.forceCenter()); + .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]); + .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, - ]; + 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); + .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)) + .append("text") + .attr("x", -width / 2 + 40) + .attr("y", height / 2 - 30 * (i + 1)) .text(key) - .style('font-size', '15px') - .attr('alignment-baseline', 'middle'); + .style("font-size", "15px") + .attr("alignment-baseline", "middle"); }); } // draw links between nodes const link = svg - .append('g') - .selectAll('line') + .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); + .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'); + const graphNode = svg.append("g").selectAll("g").data(data.nodes).enter().append("g"); // calculate radius const nodeRadius = (d) => { @@ -169,81 +144,66 @@ async function drawGraph( // draw individual nodes const node = graphNode - .append('circle') - .attr('class', 'node') - .attr('id', (d) => d.id) - .attr('r', nodeRadius) - .attr('fill', color) - .style('cursor', 'pointer') - .on('click', (_, d) => { - window.navigate( - new URL(`${baseUrl}${decodeURI(d.id).replace(/\s+/g, '-')}/`), - '.singlePage' - ); + .append("circle") + .attr("class", "node") + .attr("id", (d) => d.id) + .attr("r", nodeRadius) + .attr("fill", color) + .style("cursor", "pointer") + .on("click", (_, d) => { + window.navigate(new URL(`${baseUrl}${decodeURI(d.id).replace(/\s+/g, "-")}/`), ".singlePage"); }) - .on('mouseover', function (_, d) { - d3.selectAll('.node') - .transition() - .duration(100) - .attr('fill', 'var(--g-node-inactive)'); + .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 neighbourNodes = d3.selectAll(".node").filter((d) => neighbours.includes(d.id)); const currentId = d.id; const linkNodes = d3 - .selectAll('.link') + .selectAll(".link") .filter((d) => d.source.id === currentId || d.target.id === currentId); // highlight neighbour nodes - neighbourNodes.transition().duration(200).attr('fill', color); + neighbourNodes.transition().duration(200).attr("fill", color); // highlight links - linkNodes - .transition() - .duration(200) - .attr('stroke', 'var(--g-link-active)'); + linkNodes.transition().duration(200).attr("stroke", "var(--g-link-active)"); // show text for self d3.select(this.parentNode) .raise() - .select('text') + .select("text") .transition() .duration(200) - .style('opacity', 1); + .style("opacity", 1); }) - .on('mouseleave', function (_, d) { - d3.selectAll('.node').transition().duration(200).attr('fill', color); + .on("mouseleave", function (_, d) { + d3.selectAll(".node").transition().duration(200).attr("fill", color); const currentId = d.id; const linkNodes = d3 - .selectAll('.link') + .selectAll(".link") .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) - .select('text') - .transition() - .duration(200) - .style('opacity', 0); + d3.select(this.parentNode).select("text").transition().duration(200).style("opacity", 0); }) .call(drag(simulation)); // draw labels const labels = graphNode - .append('text') - .attr('dx', 0) - .attr('dy', (d) => nodeRadius(d) + 8 + 'px') - .attr('text-anchor', 'middle') - .text((d) => content[d.id]?.title || d.id.replace('-', ' ')) - .style('opacity', 0) - .style('pointer-events', 'none') - .style('font-size', '0.4em') + .append("text") + .attr("dx", 0) + .attr("dy", (d) => nodeRadius(d) + 8 + "px") + .attr("text-anchor", "middle") + .text((d) => content[d.id]?.title || d.id.replace("-", " ")) + .style("opacity", 0) + .style("pointer-events", "none") + .style("font-size", "0.4em") .raise() .call(drag(simulation)); @@ -258,24 +218,24 @@ async function drawGraph( [width, height], ]) .scaleExtent([0.25, 4]) - .on('zoom', ({ transform }) => { - link.attr('transform', transform); - node.attr('transform', transform); + .on("zoom", ({ transform }) => { + link.attr("transform", transform); + node.attr("transform", transform); const scale = transform.k; 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 - simulation.on('tick', () => { + 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); + .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); }); } diff --git a/layouts/partials/head.html b/layouts/partials/head.html index eef6e642a..4824d9b5c 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -5,38 +5,29 @@ name="description" content="{{if .IsHome}}{{$.Site.Data.config.description}}{{else}}{{.Summary}}{{end}}" /> - - {{ if .Title }}{{ .Title }}{{ else }}{{ $.Site.Data.config.page_title }}{{ - end }} - + {{ if .Title }}{{ .Title }}{{ else }}{{ $.Site.Data.config.page_title }}{{ end }} - + - {{$sass := resources.Match "styles/[!_]*.scss" }} {{$css := slice }} {{range - $sass}} {{$scss := . | resources.ToCSS (dict "outputStyle" "compressed") }} - {{$css = $css | append $scss}} {{end}} {{$finalCss := $css | resources.Concat - "styles.css" | resources.Fingerprint "md5" | resources.Minify }} + {{$sass := resources.Match "styles/[!_]*.scss" }} {{$css := slice }} {{range $sass}} {{$scss := . + | resources.ToCSS (dict "outputStyle" "compressed") }} {{$css = $css | append $scss}} {{end}} + {{$finalCss := $css | resources.Concat "styles.css" | resources.Fingerprint "md5" | + resources.Minify }} - {{ $darkMode := resources.Get "js/darkmode.js" | resources.Fingerprint "md5" | - resources.Minify }} + {{ $darkMode := resources.Get "js/darkmode.js" | resources.Fingerprint "md5" | resources.Minify }} {{partial "katex.html" .}} - {{$linkIndex := resources.Get "indices/linkIndex.json" | resources.Fingerprint - "md5" | resources.Minify | }} {{$contentIndex := resources.Get - "indices/contentIndex.json" | resources.Fingerprint "md5" | resources.Minify - }} + {{$linkIndex := resources.Get "indices/linkIndex.json" | resources.Fingerprint "md5" | + resources.Minify | }} {{$contentIndex := resources.Get "indices/contentIndex.json" | + resources.Fingerprint "md5" | resources.Minify }} {{ template "_internal/google_analytics.html" . }}