mirror of
https://github.com/jackyzha0/quartz.git
synced 2025-12-19 10:54:06 -06:00
43 lines
13 KiB
HTML
43 lines
13 KiB
HTML
<!doctype html><html lang=en><head><meta name=generator content="Hugo 0.79.1"><link rel=preconnect href=https://www.googletagmanager.com><link crossorigin rel=preconnect href=https://www.google-analytics.com><script type=application/javascript>var doNotTrack=false;if(!doNotTrack){window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;ga('create','UA-148413215-1','auto');ga('send','pageview');}</script><script async src=https://www.google-analytics.com/analytics.js></script><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>Quartz Example Page</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;--navy: #284b63;--olive: #84a59d;--visited: #afbfc9;--salmon: #f28482;--gray: #4e4e4e;--lightgray: #f0f0f0;--outlinegray: #dadada}[saved-theme=dark]{--light: #1e1e21 !important;--dark: #fbfffe !important;--navy: #5b778a !important;--visited: #4a575e !important;--olive: #84a59d !important;--salmon: #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(--navy) !important;--lt-colours-secondary: var(--olive) !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(--navy)}a:hover{color:var(--olive)!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(--navy);padding-left:1em;transition:border-color .2s ease}blockquote:hover{border-color:var(--olive)}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(--olive);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(--navy);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}}</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><body><div class=singlePage><h1 id=-quartz>💎 Quartz</h1><p>Simple second brain and digital garden. 🌱</p><h2 id=why-quartz>Why Quartz?</h2><h2 id=get-started>Get Started</h2><p><a href=/moc/directory rel=noopener>directory</a></p><div class=lt-centre><div><hr><ol class=backlinks></ol><script src=https://cdn.jsdelivr.net/npm/d3@6></script><div id=graph-container></div><style>:root{--g-node: #284b63;--g-node-active: #f28482;--g-node-inactive: #a8b3bd;--g-link: #babdbf;--g-link-active: #5a7282}</style><script>const index={"backlinks":{"/moc/directory":[{"source":"/","target":"/moc/directory","text":"directory"}],"/notes/config":[{"source":"/moc/directory","target":"/notes/config","text":"config"}],"/notes/setup":[{"source":"/moc/directory","target":"/notes/setup","text":"setup"}],"/notes/troubleshooting":[{"source":"/moc/directory","target":"/notes/troubleshooting","text":"troubleshooting"},{"source":"/notes/setup","target":"/notes/troubleshooting","text":"troubleshooting"}]},"links":{"/":[{"source":"/","target":"/moc/directory","text":"directory"}],"/moc/directory":[{"source":"/moc/directory","target":"/notes/setup","text":"setup"},{"source":"/moc/directory","target":"/notes/config","text":"config"},{"source":"/moc/directory","target":"/notes/troubleshooting","text":"troubleshooting"}],"/notes/setup":[{"source":"/notes/setup","target":"/notes/troubleshooting","text":"troubleshooting"}]}}
|
|
const links=[{"source":"/","target":"/moc/directory","text":"directory"},{"source":"/moc/directory","target":"/notes/setup","text":"setup"},{"source":"/moc/directory","target":"/notes/config","text":"config"},{"source":"/moc/directory","target":"/notes/troubleshooting","text":"troubleshooting"},{"source":"/notes/setup","target":"/notes/troubleshooting","text":"troubleshooting"}]
|
|
const curPage=""
|
|
const pathColors=[{"/moc":"#4388cc"}]
|
|
const parseIdsFromLinks=(links)=>[...(new Set(links.flatMap(link=>([link.source,link.target]))))]
|
|
const data={nodes:parseIdsFromLinks(links).map(id=>({id})),links,}
|
|
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 enableDrag=true
|
|
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(-20)).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]);const enableLegend=false
|
|
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")})}
|
|
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)
|
|
const graphNode=svg.append("g").selectAll("g").data(data.nodes).enter().append("g")
|
|
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=d.id;}).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 links=d3.selectAll(".link").filter(d=>d.source.id===currentId||d.target.id===currentId)
|
|
neighbourNodes.transition().duration(200).attr("fill",color)
|
|
links.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){d3.selectAll(".node").transition().duration(200).attr("fill",color)
|
|
const currentId=d.id
|
|
const links=d3.selectAll(".link").filter(d=>d.source.id===currentId||d.target.id===currentId)
|
|
links.transition().duration(200).attr("stroke","var(--g-link)")
|
|
d3.select(this.parentNode).select("text").transition().duration(200).style("opacity",0)}).call(drag(simulation));const labels=graphNode.append("text").attr("dx",12).attr("dy",".35em").text((d)=>d.id).style("opacity",0).style("pointer-events","none").call(drag(simulation));const enableZoom=false
|
|
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);}));}
|
|
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);});</script></div><div id=contact_buttons class=lt-centre><footer><p>Made by Jacky Zhao using <a href=https://github.com/jackyzha0/quartz>Quartz</a>, © 2021</p><a href=https://twitter.com/_jzhao>Twitter</a><a href=https://github.com/jackyzha0>Github</a></footer></div></div></div></body></html> |