mirror of
https://github.com/jackyzha0/quartz.git
synced 2025-12-19 10:54:06 -06:00
29 lines
25 KiB
HTML
29 lines
25 KiB
HTML
<!doctype html><html lang=en><head><meta charset=utf-8><meta name=description content="Here is the page description. This is an example Quartz site that details installation, setup, customization, and troubleshooting for Quartz itself."><title>Editing Content in Quartz</title><meta name=viewport content="width=device-width,initial-scale=1"><link rel="shortcut icon" type=image/png href=/icon.png><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Source+Sans+Pro:wght@400;700&family=Fira+Code:wght@400;700&display=swap" rel=stylesheet><style>:root{--light:#faf8f8;--dark:#141021;--secondary:#284b63;--tertiary:#84a59d;--visited:#afbfc9;--primary:#f28482;--gray:#4e4e4e;--lightgray:#f0f0f0;--outlinegray:#dadada}[saved-theme=dark]{--light:#1e1e21 !important;--dark:#fbfffe !important;--secondary:#5b778a !important;--visited:#4a575e !important;--tertiary:#84a59d !important;--primary:#f58382 !important;--gray:#d4d4d4 !important;--lightgray:#292633 !important;--outlinegray:#343434 !important}</style><style>:root{--lt-colours-light:var(--light) !important;--lt-colours-lightgray:var(--lightgray) !important;--lt-colours-dark:var(--secondary) !important;--lt-colours-secondary:var(--tertiary) !important;--lt-colours-gray:var(--outlinegray) !important}h1,h2,h3,h4,ol,ul,thead{font-family:Inter;color:var(--dark)}p,ul,text{font-family:source sans pro,sans-serif;color:var(--gray);fill:var(--gray)}a{font-family:Inter;font-weight:700;font-size:1em;text-decoration:none;transition:all .2s ease;color:var(--secondary)}a:hover{color:var(--tertiary)!important}#TableOfContents>ol{counter-reset:section;margin-left:0;padding-left:1.5em}#TableOfContents>ol>li{counter-increment:section}#TableOfContents>ol>li>ol{counter-reset:subsection}#TableOfContents>ol>li>ol>li{counter-increment:subsection}#TableOfContents>ol>li>ol>li::marker{content:counter(section)"." counter(subsection)" "}#TableOfContents>ol>li::marker{content:counter(section)" "}#TableOfContents>ol>li::marker,#TableOfContents>ol>li>ol>li::marker{font-family:Source Sans Pro;font-weight:700}footer{margin-top:4em;text-align:center}table{width:100%}img{width:100%;border-radius:3px;margin:1em 0}p>img+em{display:block;transform:translateY(-1em)}sup{line-height:0}p,tbody,li{font-family:Source Sans Pro;color:var(--gray);line-height:1.5em}h2{opacity:.85}h3{opacity:.75}blockquote{margin-left:0;border-left:3px solid var(--secondary);padding-left:1em;transition:border-color .2s ease}blockquote:hover{border-color:var(--tertiary)}table{padding:1.5em}td,th{padding:.1em .5em}.footnotes p{margin:.5em 0}article a{font-family:Source Sans Pro;font-weight:600;text-decoration:underline;text-decoration-color:var(--tertiary);text-decoration-thickness:.15em}sup>a{text-decoration:none;padding:0 .1em 0 .2em}pre{font-family:fira code;padding:.75em;border-radius:3px;overflow-x:scroll}code{font-family:fira code;font-size:.85em;padding:.15em .3em;border-radius:5px;background:var(--lightgray)}html{scroll-behavior:smooth}body{margin:0;height:100vh;width:100vw;overflow-x:hidden;background-color:var(--light)}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}footer{margin-top:4em}footer>a{font-size:1em;color:var(--secondary);padding:0 .5em 3em}hr{width:25%;margin:4em auto;height:2px;border-radius:1px;border-width:0;color:var(--dark);background-color:var(--dark)}a[href^="/"]{text-decoration:none;background-color:#afbfc922;padding:0 .2em;border-radius:3px}.singlePage{margin:4em 30vw}@media all and (max-width:1200px){.singlePage{margin:25px 5vw}}.page-end{display:flex;flex-direction:row}@media all and (max-width:780px){.page-end{flex-direction:column}}.page-end>*{flex:1 0}.page-end>.backlinks-container>ul{list-style:none;padding-left:0;margin-right:2em}.page-end>.backlinks-container>ul>li{margin:.5em 0;padding:.25em 1em;border:var(--outlinegray)1px solid;border-radius:5px}.page-end #graph-container{border:var(--outlinegray)1px solid;border-radius:5px}.centered{margin-top:30vh}</style><style>.darkmode{text-align:right}.darkmode>.toggle{display:none;box-sizing:border-box}.darkmode>.toggle:checked+.toggle-button:after{left:50%}.darkmode>.toggle+.toggle-button{box-sizing:border-box;outline:0;display:inline-block;width:3em;height:1.5em;position:relative;cursor:pointer;border:2px solid var(--gray);user-select:none;padding:2px;transition:all .2s ease;border-radius:2em}.darkmode>.toggle+.toggle-button:after,.darkmode>.toggle+.toggle-button:before{position:relative;display:block;box-sizing:border-box;content:"";width:50%;height:100%}.darkmode>.toggle+.toggle-button:before{display:none}.darkmode>.toggle+.toggle-button:after{left:0;transition:all .2s ease;background:var(--gray);content:"";border-radius:1em}.darkmode #dayIcon{position:relative;width:20px;height:20px;top:-1.5px;margin:0 7px;fill:var(--gray)}.darkmode #nightIcon{position:relative;width:18px;height:18px;top:-2px;margin:0 7px;fill:var(--gray)}</style><style>.chroma{color:#f8f8f2;background-color:#282a36}.chroma .lntd{vertical-align:top;padding:0;margin:0;border:0}.chroma .lntable{border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block}.chroma .hl{display:block;width:100%;background-color:#ffc}.chroma .lnt{margin-right:.4em;padding:0 .4em;color:#7f7f7f}.chroma .ln{margin-right:.4em;padding:0 .4em;color:#7f7f7f}.chroma .k{color:#ff79c6}.chroma .kc{color:#ff79c6}.chroma .kd{color:#8be9fd;font-style:italic}.chroma .kn{color:#ff79c6}.chroma .kp{color:#ff79c6}.chroma .kr{color:#ff79c6}.chroma .kt{color:#8be9fd}.chroma .na{color:#50fa7b}.chroma .nb{color:#8be9fd;font-style:italic}.chroma .nc{color:#50fa7b}.chroma .nf{color:#50fa7b}.chroma .nl{color:#8be9fd;font-style:italic}.chroma .nt{color:#ff79c6}.chroma .nv{color:#8be9fd;font-style:italic}.chroma .vc{color:#8be9fd;font-style:italic}.chroma .vg{color:#8be9fd;font-style:italic}.chroma .vi{color:#8be9fd;font-style:italic}.chroma .s{color:#f1fa8c}.chroma .sa{color:#f1fa8c}.chroma .sb{color:#f1fa8c}.chroma .sc{color:#f1fa8c}.chroma .dl{color:#f1fa8c}.chroma .sd{color:#f1fa8c}.chroma .s2{color:#f1fa8c}.chroma .se{color:#f1fa8c}.chroma .sh{color:#f1fa8c}.chroma .si{color:#f1fa8c}.chroma .sx{color:#f1fa8c}.chroma .sr{color:#f1fa8c}.chroma .s1{color:#f1fa8c}.chroma .ss{color:#f1fa8c}.chroma .m{color:#bd93f9}.chroma .mb{color:#bd93f9}.chroma .mf{color:#bd93f9}.chroma .mh{color:#bd93f9}.chroma .mi{color:#bd93f9}.chroma .il{color:#bd93f9}.chroma .mo{color:#bd93f9}.chroma .o{color:#ff79c6}.chroma .ow{color:#ff79c6}.chroma .c{color:#6272a4}.chroma .ch{color:#6272a4}.chroma .cm{color:#6272a4}.chroma .c1{color:#6272a4}.chroma .cs{color:#6272a4}.chroma .cp{color:#ff79c6}.chroma .cpf{color:#ff79c6}.chroma .gd{color:#8b080b}.chroma .ge{text-decoration:underline}.chroma .gh{font-weight:700}.chroma .gi{font-weight:700}.chroma .go{color:#44475a}.chroma .gu{font-weight:700}.chroma .gl{text-decoration:underline}.lntd:first-of-type>.chroma{padding-right:0}.chroma code{font-family:fira code!important;font-size:.85em;line-height:1em;background:0 0;padding:0}.chroma{border-radius:3px;margin:0}</style></head><script async src="https://www.googletagmanager.com/gtag/js?id=G-XYFD95KB4J"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag('js',new Date),gtag('config','G-XYFD95KB4J',{anonymize_ip:!1})}</script><body><div class=singlePage><div class=darkmode><label id=toggle-label-light for=darkmode-toggle tabindex=-1><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="dayIcon" viewBox="0 0 35 35" style="enable-background:new 0 0 35 35"><title>Light Mode</title><path d="M6 17.5C6 16.672 5.328 16 4.5 16h-3C.672 16 0 16.672.0 17.5S.672 19 1.5 19h3C5.328 19 6 18.328 6 17.5zM7.5 26c-.414.0-.789.168-1.061.439l-2 2C4.168 28.711 4 29.086 4 29.5 4 30.328 4.671 31 5.5 31c.414.0.789-.168 1.06-.44l2-2C8.832 28.289 9 27.914 9 27.5 9 26.672 8.329 26 7.5 26zm10-20C18.329 6 19 5.328 19 4.5v-3C19 .672 18.329.0 17.5.0S16 .672 16 1.5v3C16 5.328 16.671 6 17.5 6zm10 3c.414.0.789-.168 1.06-.439l2-2C30.832 6.289 31 5.914 31 5.5 31 4.672 30.329 4 29.5 4c-.414.0-.789.168-1.061.44l-2 2C26.168 6.711 26 7.086 26 7.5 26 8.328 26.671 9 27.5 9zM6.439 8.561C6.711 8.832 7.086 9 7.5 9 8.328 9 9 8.328 9 7.5c0-.414-.168-.789-.439-1.061l-2-2C6.289 4.168 5.914 4 5.5 4 4.672 4 4 4.672 4 5.5c0 .414.168.789.439 1.06l2 2.001zM33.5 16h-3c-.828.0-1.5.672-1.5 1.5s.672 1.5 1.5 1.5h3c.828.0 1.5-.672 1.5-1.5S34.328 16 33.5 16zM28.561 26.439C28.289 26.168 27.914 26 27.5 26c-.828.0-1.5.672-1.5 1.5.0.414.168.789.439 1.06l2 2C28.711 30.832 29.086 31 29.5 31c.828.0 1.5-.672 1.5-1.5.0-.414-.168-.789-.439-1.061l-2-2zM17.5 29c-.829.0-1.5.672-1.5 1.5v3c0 .828.671 1.5 1.5 1.5s1.5-.672 1.5-1.5v-3C19 29.672 18.329 29 17.5 29zm0-22C11.71 7 7 11.71 7 17.5S11.71 28 17.5 28 28 23.29 28 17.5 23.29 7 17.5 7zm0 18c-4.136.0-7.5-3.364-7.5-7.5s3.364-7.5 7.5-7.5 7.5 3.364 7.5 7.5S21.636 25 17.5 25z"/></svg></label><input class=toggle id=darkmode-toggle type=checkbox tabindex=-1>
|
|
<label class=toggle-button for=darkmode-toggle></label><label id=toggle-label-dark for=darkmode-toggle tabindex=-1><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="nightIcon" viewBox="0 0 100 100" style="enable-background='new 0 0 100 100'"><title>Dark Mode</title><path d="M96.76 66.458c-.853-.852-2.15-1.064-3.23-.534-6.063 2.991-12.858 4.571-19.655 4.571C62.022 70.495 50.88 65.88 42.5 57.5 29.043 44.043 25.658 23.536 34.076 6.47c.532-1.08.318-2.379-.534-3.23-.851-.852-2.15-1.064-3.23-.534-4.918 2.427-9.375 5.619-13.246 9.491-9.447 9.447-14.65 22.008-14.65 35.369.0 13.36 5.203 25.921 14.65 35.368s22.008 14.65 35.368 14.65c13.361.0 25.921-5.203 35.369-14.65 3.872-3.871 7.064-8.328 9.491-13.246C97.826 68.608 97.611 67.309 96.76 66.458z"/></svg></label></div><article><h1>Editing Content in Quartz</h1><aside class=mainTOC><h3>Table of Contents</h3><nav id=TableOfContents><ol><li><a href=#editing>Editing</a><ol><li><a href=#obsidian>Obsidian</a></li><li><a href=#ignoring-files>Ignoring Files</a></li><li><a href=#folder-structure>Folder Structure</a></li><li><a href=#front-matter>Front Matter</a></li></ol></li><li><a href=#previewing-changes>Previewing Changes</a></li><li><a href=#publishing-changes>Publishing Changes</a></li></ol></nav></aside><h2 id=editing>Editing</h2><p>Quartz runs on top of
|
|
<a href=https://gohugo.io/ rel=noopener>Hugo</a>
|
|
so all notes are written in
|
|
<a href=https://www.markdownguide.org/getting-started/ rel=noopener>Markdown</a>
|
|
.</p><h3 id=obsidian>Obsidian</h3><p>I <em>strongly</em> recommend using
|
|
<a href=http://obsidian.md/ rel=noopener>Obsidian</a>
|
|
as a way to edit and grow your digital garden. It comes with a really nice editor and graphical interface to preview all of my local files.</p><p><strong>🔗
|
|
<a href=/notes/obsidian rel=noopener>How to link your Obsidian Vault</a></strong></p><p>Of course, all the files are in Markdown so you could just use your favourite text editor of choice.</p><h3 id=ignoring-files>Ignoring Files</h3><p>Only want to publish a subset of all of your notes? Don’t worry, Quartz makes this a simple two-step process.</p><p>❌
|
|
<a href=/notes/ignore-notes rel=noopener>Excluding pages from being published</a></p><h3 id=folder-structure>Folder Structure</h3><p>Here’s a rough overview of what’s what.</p><p><strong>All content in your garden can found in the <code>/content</code> folder.</strong> To make edits, you can open any of the files and make changes directly and save it. You can organize content into any folder you’d like.</p><p><strong>To edit the main home page, open <code>/content/_index.md</code>.</strong> This is the home page which is slightly special. You don’t need front matter here!</p><p>To create a link between notes in your garden, just create a normal link using Markdown pointing to the document in question. Please note that <strong>all links should be relative to the root <code>/content</code> path</strong>.</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
|
|
</span><span class=lnt>2
|
|
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-markdown data-lang=markdown>For example, I want to link this current document to <span class=sb>`notes/config.md`</span>.
|
|
[<span class=nt>A link to the config page</span>](<span class=na>notes/config.md</span>)
|
|
</code></pre></td></tr></table></div></div><h3 id=front-matter>Front Matter</h3><p>Hugo is picky when it comes to metadata for files. Ensure that you have a title defined at the top of your file like so:</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
|
|
</span><span class=lnt>2
|
|
</span><span class=lnt>3
|
|
</span><span class=lnt>4
|
|
</span><span class=lnt>5
|
|
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-markdown data-lang=markdown>---
|
|
title: "Example Title"
|
|
---
|
|
|
|
Rest of your content here...
|
|
</code></pre></td></tr></table></div></div><h2 id=previewing-changes>Previewing Changes</h2><p>This step is purely optional and mostly for those who want to see the published version of their digital garden locally before opening it up to the internet. This is <em>highly recommended</em>.</p><p>👀
|
|
<a href=/notes/preview-changes rel=noopener>Preview Quartz Changes</a></p><p>For those who like to live life more on the edge, viewing the garden through Obsidian gets you pretty close to the real thing.</p><h2 id=publishing-changes>Publishing Changes</h2><p>Now that you know the basics of managing your digital garden using Quartz, you can publish it to the internet!</p><p>🌍
|
|
<a href=/notes/hosting rel=noopener>Hosting Quartz online!</a></p><p>Having problems? Checkout our
|
|
<a href=/notes/troubleshooting rel=noopener>FAQ and Troubleshooting guide</a>
|
|
.</p></article><hr><div class=page-end><div class=backlinks-container><h3>Backlinks</h3><ul class=backlinks><li><a href=/notes/setup>/notes/setup</a></li><li><a href=/notes/troubleshooting>/notes/troubleshooting</a></li></ul></div><div><script src=https://cdn.jsdelivr.net/npm/d3@6></script><h3>Interactive Graph</h3><div id=graph-container></div><style>:root{--g-node:var(--secondary);--g-node-active:var(--primary);--g-node-inactive:var(--visited);--g-link:var(--outlinegray);--g-link-active:#5a7282}</style><script>const index={backlinks:{"/moc/directory":[{source:"/",target:"/moc/directory",text:"Directory"}],"/moc/showcase":[{source:"/moc/directory",target:"/moc/showcase",text:"community digital gardens"}],"/notes/config":[{source:"/moc/directory",target:"/notes/config",text:"Customizing and Styling Quartz"},{source:"/notes/editing",target:"/notes/config",text:"A link to the config page"},{source:"/notes/hosting",target:"/notes/config",text:"Customizing Quarts"},{source:"/notes/troubleshooting",target:"/notes/config",text:"customization guide"}],"/notes/editing":[{source:"/notes/setup",target:"/notes/editing",text:"Editing Notes in Quartz"},{source:"/notes/troubleshooting",target:"/notes/editing",text:"local editing"}],"/notes/hosting":[{source:"/moc/directory",target:"/notes/hosting",text:"Hosting Quartz online!"},{source:"/notes/editing",target:"/notes/hosting",text:"Hosting Quartz online!"},{source:"/notes/troubleshooting",target:"/notes/hosting",text:"the hosting guide"},{source:"/notes/troubleshooting",target:"/notes/hosting",text:"hosting"}],"/notes/ignore-notes":[{source:"/notes/editing",target:"/notes/ignore-notes",text:"Excluding pages from being published"},{source:"/notes/troubleshooting",target:"/notes/ignore-notes",text:"excluding pages from being published"}],"/notes/obsidian":[{source:"/moc/directory",target:"/notes/obsidian",text:"Linking with an Obsidian Vault"},{source:"/notes/editing",target:"/notes/obsidian",text:"How to link your Obsidian Vault"},{source:"/notes/troubleshooting",target:"/notes/obsidian",text:"Obsidian"}],"/notes/preview-changes":[{source:"/notes/editing",target:"/notes/preview-changes",text:"Preview Quartz Changes"}],"/notes/setup":[{source:"/moc/directory",target:"/notes/setup",text:"Setup your own digital garden using Quartz"}],"/notes/troubleshooting":[{source:"/moc/directory",target:"/notes/troubleshooting",text:"Troubleshooting and FAQ"},{source:"/notes/config",target:"/notes/troubleshooting",text:"FAQ and Troubleshooting guide"},{source:"/notes/editing",target:"/notes/troubleshooting",text:"FAQ and Troubleshooting guide"},{source:"/notes/hosting",target:"/notes/troubleshooting",text:"FAQ and Troubleshooting guide"},{source:"/notes/setup",target:"/notes/troubleshooting",text:"FAQ and Troubleshooting guide"}]},links:{"/":[{source:"/",target:"/moc/directory",text:"Directory"}],"/moc/directory":[{source:"/moc/directory",target:"/notes/setup",text:"Setup your own digital garden using Quartz"},{source:"/moc/directory",target:"/notes/obsidian",text:"Linking with an Obsidian Vault"},{source:"/moc/directory",target:"/notes/config",text:"Customizing and Styling Quartz"},{source:"/moc/directory",target:"/notes/hosting",text:"Hosting Quartz online!"},{source:"/moc/directory",target:"/moc/showcase",text:"community digital gardens"},{source:"/moc/directory",target:"/notes/troubleshooting",text:"Troubleshooting and FAQ"}],"/notes/config":[{source:"/notes/config",target:"/notes/troubleshooting",text:"FAQ and Troubleshooting guide"}],"/notes/editing":[{source:"/notes/editing",target:"/notes/preview-changes",text:"Preview Quartz Changes"},{source:"/notes/editing",target:"/notes/hosting",text:"Hosting Quartz online!"},{source:"/notes/editing",target:"/notes/troubleshooting",text:"FAQ and Troubleshooting guide"},{source:"/notes/editing",target:"/notes/obsidian",text:"How to link your Obsidian Vault"},{source:"/notes/editing",target:"/notes/ignore-notes",text:"Excluding pages from being published"},{source:"/notes/editing",target:"/notes/config",text:"A link to the config page"}],"/notes/hosting":[{source:"/notes/hosting",target:"/notes/config",text:"Customizing Quarts"},{source:"/notes/hosting",target:"/notes/troubleshooting",text:"FAQ and Troubleshooting guide"}],"/notes/setup":[{source:"/notes/setup",target:"/notes/editing",text:"Editing Notes in Quartz"},{source:"/notes/setup",target:"/notes/troubleshooting",text:"FAQ and Troubleshooting guide"}],"/notes/troubleshooting":[{source:"/notes/troubleshooting",target:"/notes/config",text:"customization guide"},{source:"/notes/troubleshooting",target:"/notes/obsidian",text:"Obsidian"},{source:"/notes/troubleshooting",target:"/notes/hosting",text:"the hosting guide"},{source:"/notes/troubleshooting",target:"/notes/editing",text:"local editing"},{source:"/notes/troubleshooting",target:"/notes/ignore-notes",text:"excluding pages from being published"},{source:"/notes/troubleshooting",target:"/notes/hosting",text:"hosting"}]}},links=[{source:"/",target:"/moc/directory",text:"Directory"},{source:"/moc/directory",target:"/notes/setup",text:"Setup your own digital garden using Quartz"},{source:"/moc/directory",target:"/notes/obsidian",text:"Linking with an Obsidian Vault"},{source:"/moc/directory",target:"/notes/config",text:"Customizing and Styling Quartz"},{source:"/moc/directory",target:"/notes/hosting",text:"Hosting Quartz online!"},{source:"/moc/directory",target:"/moc/showcase",text:"community digital gardens"},{source:"/moc/directory",target:"/notes/troubleshooting",text:"Troubleshooting and FAQ"},{source:"/notes/config",target:"/notes/troubleshooting",text:"FAQ and Troubleshooting guide"},{source:"/notes/editing",target:"/notes/preview-changes",text:"Preview Quartz Changes"},{source:"/notes/editing",target:"/notes/hosting",text:"Hosting Quartz online!"},{source:"/notes/editing",target:"/notes/troubleshooting",text:"FAQ and Troubleshooting guide"},{source:"/notes/editing",target:"/notes/obsidian",text:"How to link your Obsidian Vault"},{source:"/notes/editing",target:"/notes/ignore-notes",text:"Excluding pages from being published"},{source:"/notes/editing",target:"/notes/config",text:"A link to the config page"},{source:"/notes/hosting",target:"/notes/config",text:"Customizing Quarts"},{source:"/notes/hosting",target:"/notes/troubleshooting",text:"FAQ and Troubleshooting guide"},{source:"/notes/setup",target:"/notes/editing",text:"Editing Notes in Quartz"},{source:"/notes/setup",target:"/notes/troubleshooting",text:"FAQ and Troubleshooting guide"},{source:"/notes/troubleshooting",target:"/notes/config",text:"customization guide"},{source:"/notes/troubleshooting",target:"/notes/obsidian",text:"Obsidian"},{source:"/notes/troubleshooting",target:"/notes/hosting",text:"the hosting guide"},{source:"/notes/troubleshooting",target:"/notes/editing",text:"local editing"},{source:"/notes/troubleshooting",target:"/notes/ignore-notes",text:"excluding pages from being published"},{source:"/notes/troubleshooting",target:"/notes/hosting",text:"hosting"}],curPage="/notes/editing",pathColors=[{"/moc":"#4388cc"}],parseIdsFromLinks=a=>[...new Set(a.flatMap(a=>[a.source,a.target]))],data={nodes:parseIdsFromLinks(links).map(a=>({id:a})),links},color=a=>{if(a.id===curPage||a.id==="/"&&curPage==="")return"var(--g-node-active)";for(const b of pathColors){const c=Object.keys(b)[0],d=b[c];if(a.id.startsWith(c))return d}return"var(--g-node)"},drag=c=>{function d(b,a){b.active||c.alphaTarget(1).restart(),a.fx=a.x,a.fy=a.y}function e(a,b){b.fx=a.x,b.fy=a.y}function f(b,a){b.active||c.alphaTarget(0),a.fx=null,a.fy=null}const a=!0,b=()=>{};return d3.drag().on("start",a?d:b).on("drag",a?e:b).on("end",a?f:b)},height=250,width=document.getElementById("graph-container").offsetWidth,simulation=d3.forceSimulation(data.nodes).force("charge",d3.forceManyBody().strength(-20)).force("link",d3.forceLink(data.links).id(a=>a.id)).force("center",d3.forceCenter()),svg=d3.select('#graph-container').append('svg').attr('width',width).attr('height',height).attr("viewBox",[-width/2,-height/2,width,height]),enableLegend=!1;if(enableLegend){const a=[{Current:"var(--g-node-active)"},{Note:"var(--g-node)"},...pathColors];a.forEach((a,b)=>{const c=Object.keys(a)[0],d=a[c];svg.append("circle").attr("cx",-width/2+20).attr("cy",height/2-30*(b+1)).attr("r",6).style("fill",d),svg.append("text").attr("x",-width/2+40).attr("y",height/2-30*(b+1)).text(c).style("font-size","15px").attr("alignment-baseline","middle")})}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",a=>a.source.id).attr("data-target",a=>a.target.id),graphNode=svg.append("g").selectAll("g").data(data.nodes).enter().append("g"),node=graphNode.append("circle").attr("class","node").attr("id",a=>a.id).attr("r",a=>{const b=index.links[a.id]?.length||0,c=index.backlinks[a.id]?.length||0;return 3+(b+c)/4}).attr("fill",color).style("cursor","pointer").on("click",(b,a)=>{window.location.href=a.id}).on("mouseover",function(f,a){d3.selectAll(".node").transition().duration(100).attr("fill","var(--g-node-inactive)");const c=parseIdsFromLinks([...index.links[a.id]||[],...index.backlinks[a.id]||[]]),d=d3.selectAll(".node").filter(a=>c.includes(a.id)),b=a.id,e=d3.selectAll(".link").filter(a=>a.source.id===b||a.target.id===b);d.transition().duration(200).attr("fill",color),e.transition().duration(200).attr("stroke","var(--g-link-active)"),d3.select(this.parentNode).select("text").raise().transition().duration(200).style("opacity",1)}).on("mouseleave",function(d,b){d3.selectAll(".node").transition().duration(200).attr("fill",color);const a=b.id,c=d3.selectAll(".link").filter(b=>b.source.id===a||b.target.id===a);c.transition().duration(200).attr("stroke","var(--g-link)"),d3.select(this.parentNode).select("text").transition().duration(200).style("opacity",0)}).call(drag(simulation)),labels=graphNode.append("text").attr("dx",12).attr("dy",".35em").text(a=>a.id).style("opacity",0).style("pointer-events","none").call(drag(simulation)),enableZoom=!0;enableZoom&&svg.call(d3.zoom().extent([[0,0],[width,height]]).scaleExtent([.25,4]).on("zoom",({transform:a})=>{link.attr("transform",a),node.attr("transform",a),labels.attr("transform",a)})),simulation.on("tick",()=>{link.attr("x1",a=>a.source.x).attr("y1",a=>a.source.y).attr("x2",a=>a.target.x).attr("y2",a=>a.target.y),node.attr("cx",a=>a.x).attr("cy",a=>a.y),labels.attr("x",a=>a.x).attr("y",a=>a.y)})</script></div></div><div id=contact_buttons><footer><p>Made by Jacky Zhao using <a href=https://github.com/jackyzha0/quartz>Quartz</a>, © 2021</p><a href=/>Home</a>
|
|
<a href=https://twitter.com/_jzhao>Twitter</a><a href=https://github.com/jackyzha0>Github</a></footer></div></div><script>const toggleSwitch=document.querySelector('#darkmode-toggle'),userPref=window.matchMedia('(prefers-color-scheme: light)').matches?'light':'dark',currentTheme=localStorage.getItem('theme')??userPref;currentTheme&&(document.documentElement.setAttribute('saved-theme',currentTheme),currentTheme==='dark'&&(toggleSwitch.checked=!0));const switchTheme=a=>{a.target.checked?(document.documentElement.setAttribute('saved-theme','dark'),localStorage.setItem('theme','dark')):(document.documentElement.setAttribute('saved-theme','light'),localStorage.setItem('theme','light'))};toggleSwitch.addEventListener('change',switchTheme,!1)</script></body></html> |