mirror of
https://github.com/jackyzha0/quartz.git
synced 2025-12-19 10:54:06 -06:00
21 lines
26 KiB
HTML
21 lines
26 KiB
HTML
<!doctype html><html lang=en><head><meta charset=utf-8><meta name=description content="Making your own Quartz Setting up Quartz requires a basic understanding of git. If you are unfamiliar, this resource is a great place to start!"><title>Setup</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;600;700&family=Source+Sans+Pro:wght@400;600;700&family=Fira+Code:wght@400;700&display=swap" rel=stylesheet><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,h5,h6,ol,ul,thead{font-family:Inter;color:var(--dark);font-weight:revert;margin:revert;padding:revert}p,ul,text{font-family:source sans pro,sans-serif;color:var(--gray);fill:var(--gray);font-weight:revert;margin:revert;padding:revert}#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}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}.pagination{list-style:none;padding-left:0;display:flex;margin-top:2em;gap:1.5em;justify-content:center}.pagination>li{text-align:center;display:inline-block}.pagination>li a{background-color:initial!important}.pagination>li a[href$="#"]{opacity:.2}.section h3>a{font-weight:700;font-family:Inter;margin:0}.section p{margin-top:0}article>.meta{margin:-1.5em 0 1em;opacity:.7}article>.tags{list-style:none;padding-left:0}article>.tags .meta>h1{margin:0}article>.tags .meta>p{margin:0}article>.tags>li{display:inline-block}article>.tags>li>a{border-radius:8px;border:var(--outlinegray)1px solid;padding:.2em .5em}article>.tags>li>a::before{content:"#";margin-right:.3em;color:var(--outlinegray)}article a{font-family:Source Sans Pro;font-weight:600}article a.internal-link{text-decoration:none;background-color:rgba(143,159,169,.15);padding:0 .1em;margin:auto -.1em;border-radius:3px}.backlinks a{font-weight:600;font-size:.9rem}sup>a{text-decoration:none;padding:0 .1em 0 .2em}a{font-family:Inter,sans-serif;font-size:1em;font-weight:700;text-decoration:none;transition:all .2s ease;color:var(--secondary)}a:hover{color:var(--tertiary)!important}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}html:lang(ar) p,html:lang(ar) h1,html:lang(ar) h2,html:lang(ar) h3,html:lang(ar) article{direction:rtl;text-align:right}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)}.singlePage{margin:4em 30vw}@media all and (max-width:1200px){.singlePage{margin:25px 5vw}}.page-end{display:flex;flex-direction:row;gap:2em}@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}.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}article>h1{font-size:2em}header{display:flex;flex-direction:row;align-items:center}header>h1{font-size:2em}@media all and (max-width:600px){header>nav{display:none}}header>.spacer{flex:auto}header>svg{cursor:pointer;width:18px;min-width:18px;margin:0 1em}header>svg:hover .search-path{stroke:var(--tertiary)}header>svg .search-path{stroke:var(--gray);stroke-width:2px;transition:stroke .5s ease}#search-container{position:fixed;z-index:9999;left:0;top:0;width:100vw;height:100%;overflow:scroll;display:none;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}#search-container>div{width:50%;margin-top:15vh;margin-left:auto;margin-right:auto}@media all and (max-width:1200px){#search-container>div{width:90%}}#search-container>div>*{width:100%;border-radius:4px;background:var(--light);box-shadow:0 14px 50px rgba(27,33,48,.12),0 10px 30px rgba(27,33,48,.16);margin-bottom:2em}#search-container>div>input{box-sizing:border-box;padding:.5em 1em;font-family:Inter,sans-serif;color:var(--dark);font-size:1.1em;border:1px solid var(--outlinegray)}#search-container>div>input:focus{outline:none}#search-container>div>#results-container>.result-card{padding:1em;cursor:pointer;transition:background .2s ease;border:1px solid var(--outlinegray);border-bottom:none;width:100%;font-family:inherit;font-size:100%;line-height:1.15;margin:0;overflow:visible;text-transform:none;text-align:left;background:var(--light);outline:none}#search-container>div>#results-container>.result-card:hover,#search-container>div>#results-container>.result-card:focus{background:rgba(180,180,180,.15)}#search-container>div>#results-container>.result-card:first-of-type{border-top-left-radius:5px;border-top-right-radius:5px}#search-container>div>#results-container>.result-card:last-of-type{border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-bottom:1px solid var(--outlinegray)}#search-container>div>#results-container>.result-card>h3,#search-container>div>#results-container>.result-card>p{margin:0}#search-container>div>#results-container>.result-card .search-highlight{background-color:#afbfc966;padding:.05em .2em;border-radius:3px}.section-ul{list-style:none;padding-left:0}.section-ul>li{border:1px solid var(--outlinegray);border-radius:5px;padding:0 1em;margin-bottom:1em}.section-ul>li h3{opacity:1;font-weight:700;margin-bottom:0}.section-ul>li .meta{opacity:.6}.popover{z-index:999;position:absolute;width:20em;display:inline-block;visibility:hidden;background-color:var(--light);padding:1em;border:1px solid var(--outlinegray);border-radius:5px;transform:translate(-50%,40%);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;transition-delay:.3s;user-select:none}.popover.visible{opacity:1;visibility:visible;transform:translate(-50%,20%)}.popover>h3{font-size:1rem;margin:.25em 0}.popover>.meta{margin-top:.25em;opacity:.5}.popover>p{margin:0;font-weight:400;user-select:none}</style><style>.darkmode{float:right;padding:1em;min-width:30px;position:relative}@media all and (max-width:450px){.darkmode{padding:1em}}.darkmode>.toggle{display:none;box-sizing:border-box}.darkmode svg{opacity:0;position:absolute;width:20px;height:20px;top:calc(50% - 10px);margin:0 7px;fill:var(--gray);transition:opacity .1s ease}.toggle:checked~label>#dayIcon{opacity:0}.toggle:checked~label>#nightIcon{opacity:1}.toggle:not(:checked)~label>#dayIcon{opacity:1}.toggle:not(:checked)~label>#nightIcon{opacity:0}</style><style>.chroma{color:#f8f8f2;background-color:#282a36;overflow:hidden}.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><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:#6b879a !important;--visited:#4a575e !important;--tertiary:#84a59d !important;--primary:#f58382 !important;--gray:#d4d4d4 !important;--lightgray:#292633 !important;--outlinegray:#343434 !important}</style><script>const userPref=window.matchMedia('(prefers-color-scheme: light)').matches?'light':'dark',currentTheme=localStorage.getItem('theme')??userPref;currentTheme&&document.documentElement.setAttribute('saved-theme',currentTheme);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'))};window.addEventListener('DOMContentLoaded',()=>{const a=document.querySelector('#darkmode-toggle');a.addEventListener('change',switchTheme,!1),currentTheme==='dark'&&(a.checked=!0)})</script><script>let saved=!1;const fetchData=async()=>{if(saved)return saved;const promises=[fetch("https://quartz.jzhao.xyz//linkIndex.json").then(a=>a.json()).then(a=>({index:a.index,links:a.links})),fetch("https://quartz.jzhao.xyz//contentIndex.json").then(a=>a.json())],[{index,links},content]=await Promise.all(promises),res={index,links,content};return saved=res,res};fetchData()</script></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><script>function htmlToElement(a){const b=document.createElement('template');return a=a.trim(),b.innerHTML=a,b.content.firstChild}const baseUrl="https://quartz.jzhao.xyz".replace(window.location.origin,"");document.addEventListener("DOMContentLoaded",()=>{fetchData().then(({content:a})=>{const b=[...document.getElementsByClassName("internal-link")];b.forEach(b=>{const c=a[b.dataset.src.replace(baseUrl,"")];if(c){const d=`<div class="popover">
|
|
<h3>${c.title}</h3>
|
|
<p>${removeMarkdown(c.content).split(" ",20).join(" ")}...</p>
|
|
<p class="meta">${new Date(c.lastmodified).toLocaleDateString()}</p>
|
|
</div>`,a=htmlToElement(d);b.appendChild(a),b.addEventListener("mouseover",()=>{a.classList.add("visible")}),b.addEventListener("mouseout",()=>{a.classList.remove("visible")})}})})})</script><body><div id=search-container><div id=search-space><input autocomplete=off id=search-bar name=search type=text aria-label=Search placeholder="Search for something..."><div id=results-container></div></div></div><script src=https://cdn.jsdelivr.net/gh/nextapps-de/flexsearch@0.7.2/dist/flexsearch.bundle.js></script><script>const removeMarkdown=(c,b={listUnicodeChar:!1,stripListLeaders:!0,gfm:!0,useImgAltText:!1,preserveLinks:!1})=>{let a=c||"";a=a.replace(/^(-\s*?|\*\s*?|_\s*?){3,}\s*$/gm,"");try{b.stripListLeaders&&(b.listUnicodeChar?a=a.replace(/^([\s\t]*)([\*\-\+]|\d+\.)\s+/gm,b.listUnicodeChar+" $1"):a=a.replace(/^([\s\t]*)([\*\-\+]|\d+\.)\s+/gm,"$1")),b.gfm&&(a=a.replace(/\n={2,}/g,"\n").replace(/~{3}.*\n/g,"").replace(/~~/g,"").replace(/`{3}.*\n/g,"")),b.preserveLinks&&(a=a.replace(/\[(.*?)\][\[\(](.*?)[\]\)]/g,"$1 ($2)")),a=a.replace(/<[^>]*>/g,"").replace(/^[=\-]{2,}\s*$/g,"").replace(/\[\^.+?\](\: .*?$)?/g,"").replace(/\s{0,2}\[.*?\]: .*?$/g,"").replace(/\!\[(.*?)\][\[\(].*?[\]\)]/g,b.useImgAltText?"$1":"").replace(/\[(.*?)\][\[\(].*?[\]\)]/g,"$1").replace(/^\s{0,3}>\s?/g,"").replace(/(^|\n)\s{0,3}>\s?/g,"\n\n").replace(/^\s{1,2}\[(.*?)\]: (\S+)( ".*?")?\s*$/g,"").replace(/^(\n)?\s{0,}#{1,6}\s+| {0,}(\n)?\s{0,}#{0,} {0,}(\n)?\s{0,}$/gm,"$1$2$3").replace(/([\*_]{1,3})(\S.*?\S{0,1})\1/g,"$2").replace(/([\*_]{1,3})(\S.*?\S{0,1})\1/g,"$2").replace(/(`{3,})(.*?)\1/gm,"$2").replace(/`(.+?)`/g,"$1").replace(/\n{2,}/g,"\n\n")}catch(a){return console.error(a),c}return a}</script><script>async function run(){const g=new FlexSearch.Document({cache:!0,charset:"latin:extra",optimize:!0,worker:!0,document:{index:[{field:"content",tokenize:"strict",context:{resolution:5,depth:3,bidirectional:!0},suggest:!0},{field:"title",tokenize:"forward"}]}}),{content:d}=await fetchData();for(const[b,a]of Object.entries(d))g.add({id:b,title:a.title,content:removeMarkdown(a.content)});const j=(i,j)=>{const a=20,k=j.split(/\s+/).filter(a=>a!==""),b=i.split(/\s+/).filter(a=>a!==""),f=a=>k.some(b=>a.toLowerCase().startsWith(b.toLowerCase())),d=b.map(f);let e=0,g=0;for(let b=0;b<Math.max(d.length-a,0);b++){const f=d.slice(b,b+a),c=f.reduce((a,b)=>a+b,0);c>=e&&(e=c,g=b)}const c=Math.max(g-a,0),h=Math.min(c+2*a,b.length),l=b.slice(c,h).map(a=>{return f(a)?`<span class="search-highlight">${a}</span>`:a}).join(" ").replaceAll('</span> <span class="search-highlight">'," ");return`${c===0?"":"..."}${l}${h===b.length?"":"..."}`},m=({url:b,title:c,content:d,term:a})=>{const e=removeMarkdown(d),f=j(c,a),g=j(e,a);return`<button class="result-card" id="${b}">
|
|
<h3>${f}</h3>
|
|
<p>${g}</p>
|
|
</button>`},h=(a,b)=>{window.location.href="https://quartz.jzhao.xyz/"+`${a}#:~:text=${encodeURIComponent(b)}`},l=a=>({id:a,url:a,title:d[a].title,content:d[a].content}),c=document.getElementById('search-bar'),e=document.getElementById("results-container");let b;c.addEventListener("keyup",a=>{if(a.key==="Enter"){const a=document.getElementsByClassName("result-card")[0];h(a.id,b)}}),c.addEventListener('input',a=>{b=a.target.value,g.search(b,[{field:"content",limit:10,suggest:!0},{field:"title",limit:5}]).then(d=>{const a=b=>{const a=d.filter(a=>a.field===b);return a.length===0?[]:[...a[0].result]},f=new Set([...a('title'),...a('content')]),c=[...f].map(l);if(c.length===0)e.innerHTML=`<button class="result-card">
|
|
<h3>No results.</h3>
|
|
<p>Try another search term?</p>
|
|
</button>`;else{e.innerHTML=c.map(a=>m({...a,term:b})).join("\n");const a=document.getElementsByClassName("result-card");[...a].forEach(a=>{a.onclick=()=>h(a.id,b)})}})});const a=document.getElementById("search-container");function f(){a.style.display==="none"||a.style.display===""?(c.value="",e.innerHTML="",a.style.display="block",c.focus()):a.style.display="none"}function i(){a.style.display="none"}document.addEventListener('keydown',a=>{a.key==="/"&&(a.preventDefault(),f()),a.key==="Escape"&&(a.preventDefault(),i())});const k=document.getElementById("search-icon");k.addEventListener('click',a=>{f()}),k.addEventListener('keydown',a=>{f()}),a.addEventListener('click',a=>{i()}),document.getElementById("search-space").addEventListener('click',a=>{a.stopPropagation()})}run()</script><div class=singlePage><header><h1 id=page-title><a href=https://quartz.jzhao.xyz/>🪴 Quartz 3.1</a></h1><svg tabindex="0" id="search-icon" aria-labelledby="title desc" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7"><title id="title">Search Icon</title><desc id="desc">Icon to open search</desc><g class="search-path" fill="none"><path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4"/><circle cx="8" cy="8" r="7"/></g></svg><div class=spacer></div><div class=darkmode><input class=toggle id=darkmode-toggle type=checkbox tabindex=-1>
|
|
<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><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></header><article><h1>Setup</h1><p class=meta>Last updated February 28, 2022</p><ul class=tags><li><a href=https://quartz.jzhao.xyz/tags/setup/>Setup</a></li></ul><aside class=mainTOC><h3>Table of Contents</h3><nav id=TableOfContents><ol><li><a href=#making-your-own-quartz>Making your own Quartz</a><ol><li><a href=#forking>Forking</a></li><li><a href=#cloning>Cloning</a></li></ol></li><li><a href=#editing>Editing</a></li></ol></nav></aside><h2 id=making-your-own-quartz>Making your own Quartz</h2><p>Setting up Quartz requires a basic understanding of <code>git</code>. If you are unfamiliar,
|
|
<a href=https://resources.nwplus.io/2-beginner/how-to-git-github.html rel=noopener>this resource</a> is a great place to start!</p><h3 id=forking>Forking</h3><blockquote><p>A fork is a copy of a repository. Forking a repository allows you to freely experiment with changes without affecting the original project.</p></blockquote><p>Navigate to the GitHub repository for the Quartz project:</p><p>📁
|
|
<a href=https://github.com/jackyzha0/quartz rel=noopener>Quartz Repository</a></p><p>Then, Fork the repository into your own GitHub account. If you don’t have an account, you can make on for free
|
|
<a href=https://github.com/join rel=noopener>here</a>. More details about forking a repo can be found on
|
|
<a href=https://docs.github.com/en/get-started/quickstart/fork-a-repo rel=noopener>GitHub’s documentation</a>.</p><h3 id=cloning>Cloning</h3><p>After you’ve made a fork of the repository, you need to download the files locally onto your machine. Ensure you have <code>git</code>, then type the following command replacing <code>YOUR-USERNAME</code> with your GitHub username.</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
|
|
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-shell data-lang=shell>$ git clone https://github.com/YOUR-USERNAME/quartz
|
|
</code></pre></td></tr></table></div></div><h2 id=editing>Editing</h2><p>Great! Now you have everything you need to start editing and growing your digital garden. If you’re ready to start writing content already, check out the recommended flow for editing notes in Quartz.</p><p>✏️
|
|
<a href=/notes/editing rel=noopener class=internal-link data-src=/notes/editing>Editing Notes in Quartz</a></p><p>Having problems? Checkout our
|
|
<a href=/notes/troubleshooting rel=noopener class=internal-link data-src=/notes/troubleshooting>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=/>🪴 Quartz 3.1</a></li><li><a href=/notes/Obsidian>Obsidian Vault Integration</a></li><li><a href=/notes/obsidian>Obsidian Vault Integration</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>async function run(){const{index:a,links:p,content:u}=await fetchData(),j="https://quartz.jzhao.xyz/notes/setup".replace("https://quartz.jzhao.xyz",""),n=[{"/moc":"#4388cc"}];let h=-1;const m=a=>[...new Set(a.flatMap(a=>[a.source,a.target]))],e=new Set,f=[j||"/","__SENTINEL"];if(h>=0)while(h>=0&&f.length>0){const b=f.shift();if(b==="__SENTINEL")h--,f.push("__SENTINEL");else{e.add(b);const c=a.links[b]||[],d=a.backlinks[b]||[];f.push(...c.map(a=>a.target),...d.map(a=>a.source))}}else m(p).forEach(a=>e.add(a));const g={nodes:[...e].map(a=>({id:a})),links:p.filter(a=>e.has(a.source)&&e.has(a.target))},k=a=>{if(a.id===j||a.id==="/"&&j==="")return"var(--g-node-active)";for(const b of n){const c=Object.keys(b)[0],d=b[c];if(a.id.startsWith(c))return d}return"var(--g-node)"},l=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)},c=250,b=document.getElementById("graph-container").offsetWidth,i=d3.forceSimulation(g.nodes).force("charge",d3.forceManyBody().strength(-30)).force("link",d3.forceLink(g.links).id(a=>a.id)).force("center",d3.forceCenter()),d=d3.select('#graph-container').append('svg').attr('width',b).attr('height',c).attr("viewBox",[-b/2,-c/2,b,c]),t=!1;if(t){const a=[{Current:"var(--g-node-active)"},{Note:"var(--g-node)"},...n];a.forEach((a,e)=>{const f=Object.keys(a)[0],g=a[f];d.append("circle").attr("cx",-b/2+20).attr("cy",c/2-30*(e+1)).attr("r",6).style("fill",g),d.append("text").attr("x",-b/2+40).attr("y",c/2-30*(e+1)).text(f).style("font-size","15px").attr("alignment-baseline","middle")})}const r=d.append("g").selectAll("line").data(g.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),s=d.append("g").selectAll("g").data(g.nodes).enter().append("g"),q=s.append("circle").attr("class","node").attr("id",a=>a.id).attr("r",b=>{const c=a.links[b.id]?.length||0,d=a.backlinks[b.id]?.length||0;return 3+(c+d)/4}).attr("fill",k).style("cursor","pointer").on("click",(b,a)=>{window.location.href="https://quartz.jzhao.xyz/"+decodeURI(a.id).replace(/\s+/g,'-')}).on("mouseover",function(g,b){d3.selectAll(".node").transition().duration(100).attr("fill","var(--g-node-inactive)");const d=m([...a.links[b.id]||[],...a.backlinks[b.id]||[]]),e=d3.selectAll(".node").filter(a=>d.includes(a.id)),c=b.id,f=d3.selectAll(".link").filter(a=>a.source.id===c||a.target.id===c);e.transition().duration(200).attr("fill",k),f.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",k);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(l(i)),o=s.append("text").attr("dx",12).attr("dy",".35em").text(a=>u[decodeURI(a.id).replace(/\s+/g,'-')]?.title||"Untitled").style("opacity",0).style("pointer-events","none").call(l(i)),v=!0;v&&d.call(d3.zoom().extent([[0,0],[b,c]]).scaleExtent([.25,4]).on("zoom",({transform:a})=>{r.attr("transform",a),q.attr("transform",a),o.attr("transform",a)})),i.on("tick",()=>{r.attr("x1",a=>a.source.x).attr("y1",a=>a.source.y).attr("x2",a=>a.target.x).attr("y2",a=>a.target.y),q.attr("cx",a=>a.x).attr("cy",a=>a.y),o.attr("x",a=>a.x).attr("y",a=>a.y)})}run()</script></div></div><div id=contact_buttons><footer><p>Made by Jacky Zhao using <a href=https://github.com/jackyzha0/quartz>Quartz</a>, © 2022</p><a href=/>Home</a>
|
|
<a href=https://twitter.com/_jzhao>Twitter</a><a href=https://github.com/jackyzha0>Github</a></footer></div></div></body></html> |