Merge branch 'hugo' into holy-grail

README.md

@@ -1,6 +1,6 @@
 # Quartz
 
-Host your second brain and [digital garden](https://jzhao.xyz/posts/digital-gardening) for free. Quartz features
+Host your second brain and [digital garden](https://jzhao.xyz/posts/networked-thought) for free. Quartz features
 
 1. Extremely fast full-text search by pressing `Ctrl` + `k`
 2. Customizable and hackable design based on Hugo
@@ -8,6 +8,8 @@ Host your second brain and [digital garden](https://jzhao.xyz/posts/digital-gard
 4. Built-in CJK + Latex Support
 5. Support for both Markdown Links and Wikilinks
 
+Check out some of the [amazing gardens that community members](https://quartz.jzhao.xyz/notes/showcase/) have published with Quartz!
+
 > “[One] who works with the door open gets all kinds of interruptions, but [they] also occasionally gets clues as to what the world is and what might be important.” — Richard Hamming
 
 🔗 Get Started: https://quartz.jzhao.xyz/

assets/js/clipboard.js

@@ -25,7 +25,10 @@ const addCopyButtons = () => {
                 () => {
                     button.blur();
                     button.innerHTML = svgCheck;
-                    setTimeout(() => (button.innerHTML = svgCopy), 2000);
+                    setTimeout(() => {
+                    	button.innerHTML = svgCopy
+                    	button.style.borderColor = ""
+                    }, 2000);
                 },
                 (error) => (button.innerHTML = "Error")
             );

assets/js/popover.js

@@ -50,7 +50,7 @@ function initPopover(baseURL, useContextualBacklinks, renderLatex) {
           li.addEventListener("mouseover", () => {
             // fix tooltip positioning
             window.FloatingUIDOM.computePosition(li, el, {
-              middleware: [window.FloatingUIDOM.offset(15), window.FloatingUIDOM.inline(), window.FloatingUIDOM.shift()],
+              middleware: [window.FloatingUIDOM.offset(10), window.FloatingUIDOM.inline(), window.FloatingUIDOM.shift()],
             }).then(({ x, y }) => {
               Object.assign(el.style, {
                 left: `${x}px`,

assets/styles/base.scss

@@ -1,33 +1,60 @@
+// Replace this with your own font imports!
+@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&family=Inter:wght@400;600;700&family=Source+Sans+Pro:wght@400;600&display=swap');
 :root {
-  --lt-colours-light: var(--light) !important;
+  --font-body: "Source Sans Pro";
-  --lt-colours-lightgray: var(--lightgray) !important;
+  --font-header: "Inter";
-  --lt-colours-dark: var(--secondary) !important;
+  --font-mono: "Fira Code"
-  --lt-colours-secondary: var(--tertiary) !important;
-  --lt-colours-gray: var(--outlinegray) !important;
 }
 
-h1, h2, h3, h4, h5, h6, ol, ul, thead {
+// typography
-  font-family: Inter;
+html {
+  scroll-behavior: smooth;
+  &:lang(ar) {
+    & p, & h1, & h2, & h3, article {
+      direction: rtl;
+      text-align: right;
+    }
+  }
+}
+
+.singlePage {
+  padding: 4em 30vw;
+  @media all and (max-width: 1200px) {
+    padding: 25px 5vw;
+  }
+}
+
+
+body {
+  margin: 0;
+  height: 100vh;
+  width: 100vw;
+  max-width: 100%;
+  box-sizing: border-box;
+  background-color: var(--light);
+}
+
+h1, h2, h3, h4, h5, h6, thead {
+  font-family: var(--font-header);
   color: var(--dark);
   font-weight: revert;
-  margin: revert;
+  margin: 2rem 0 0;
-  padding: revert;
+  padding: 2rem auto 1rem;
 
   &:hover > .hanchor {
-    opacity: 1;
+    color: var(--secondary);
   }
 }
 
 .hanchor {
-  font-family: Inter;
+  font-family: var(--font-header);
-  margin-left: -1em;
+  opacity: 0.8;
-  opacity: 0.3;
+  transition: color 0.3s ease;
-  transition: opacity 0.3s ease;
+  color: var(--dark);
-  color: var(--secondary);
 }
 
-p, ul, text {
+p, ul, text, a, tr, td, li, ol, ul {
-  font-family: 'Source Sans Pro', sans-serif;
+  font-family: var(--font-body);
   color: var(--gray);
   fill: var(--gray);
   font-weight: revert;
@@ -35,21 +62,26 @@ p, ul, text {
   padding: revert;
 }
 
+tbody, li, p {
+  line-height: 1.5em;
+}
+
 .mainTOC {
-  background: var(--lightgray);
   border-radius: 5px;
-  padding: 0.75em 1em;
+  padding: 0.75em 0;
-}
 
-.mainTOC details summary {
+  & details {
-  cursor: zoom-in;
+    & summary {
-  font-family: Inter;
+      cursor: zoom-in;
-  color: var(--dark);
+      font-family: var(--font-header);
-  font-weight: 700;
+      color: var(--dark);
-}
+      font-weight: 700;
+    }
 
-.mainTOC details[open] summary {
+    &[open] summary {
-    cursor: zoom-out;
+      cursor: zoom-out;
+    }
+  }
 }
 
 #TableOfContents > ol {
@@ -74,13 +106,21 @@ p, ul, text {
   }
 
   & > li::marker, & > li > ol > li::marker {
-    font-family: Source Sans Pro;
+    font-family: var(--font-body);
     font-weight: 700;
   }
 }
 
 table {
+  border: 1px solid var(--outlinegray);
   width: 100%;
+  padding: 1.5em;
+  border-collapse: collapse;
+}
+
+td, th {
+  padding: 0.2em 1em;
+  border: 1px solid var(--outlinegray);
 }
 
 img {
@@ -89,7 +129,7 @@ img {
   margin: 1em 0;
 }
 
-p>img+em {
+p > img + em {
   display: block;
   transform: translateY(-1em);
 }
@@ -98,29 +138,11 @@ sup {
   line-height: 0
 }
 
-p, tbody, li {
-  font-family: Source Sans Pro;
-  color: var(--gray);
-  line-height: 1.5em;
-}
-
 blockquote {
   margin-left: 0em;
   border-left: 3px solid var(--secondary);
   padding-left: 1em;
   transition: border-color 0.2s ease;
-
-  &:hover {
-    border-color: var(--tertiary);
-  }
-}
-
-table {
-  padding: 1.5em;
-}
-
-td, th {
-  padding: 0.1em 0.5em;
 }
 
 .footnotes p {
@@ -147,7 +169,7 @@ td, th {
       background-color: transparent !important;
     }
 
-    & a[href$="#"] {
+    & a[href$="#"], &.active a {
       opacity: 0.2;
     }
   }
@@ -165,13 +187,17 @@ td, th {
 }
 
 article, .tree{
+  & > h1 {
+    margin-top: 2em;
+    font-size: 2em;
+  }
+  
   & > .meta {
-    margin: -1.5em 0 1em 0;
+    margin: 0 0 1em 0;
     opacity: 0.7;
   }
 
   & a {
-    font-family: Source Sans Pro;
     font-weight: 600;
 
     &.internal-link {
@@ -198,6 +224,7 @@ article, .tree{
   padding-left: 0;
 
   & .meta {
+    margin: 1.5em 0;
     & > h1 {
       margin: 0;
     }
@@ -233,55 +260,39 @@ sup > a {
   padding: 0 0.1em 0 0.2em;
 }
 
+#page-title {
+  margin: 0;
+  & > a {
+    font-family: var(--font-header);
+  }
+}
+
 a {
-  font-family: Inter, sans-serif;
   font-size: 1em;
   font-weight: 700;
   text-decoration: none;
   transition: all 0.2s ease;
   color: var(--secondary);
-
   &:hover {
     color: var(--tertiary) !important;
   }
 }
 
 pre {
-  font-family: 'Fira Code';
+  font-family: var(--font-mono);
   padding: 0.75em;
   border-radius: 3px;
   overflow-x: scroll;
 }
 
 code {
-  font-family: 'Fira Code';
+  font-family: var(--font-mono);
   font-size: 0.85em;
   padding: 0.15em 0.3em;
   border-radius: 5px;
   background: var(--lightgray);
 }
 
-html {
-  scroll-behavior: smooth;
-
-  &:lang(ar) {
-    & p, & h1, & h2, & h3, article {
-      direction: rtl;
-      text-align: right;
-    }
-  }
-}
-
-body {
-  margin: 0;
-  height: 100vh;
-  width: 100vw;
-  //overflow-x: hidden;
-  max-width: 100%;
-  box-sizing: border-box;
-  background-color: var(--light);
-}
-
 @keyframes fadeIn {
   0% {opacity:0;}
   100% {opacity:1;}
@@ -341,7 +352,8 @@ hr {
   & > .backlinks-container {
     & > ul {
       list-style: none;
-      padding-left: 0;
+      padding: 0;
+      margin: 0;
 
       & > li {
         margin: 0.5em 0;
@@ -373,6 +385,7 @@ hr {
     border-radius: 5px;
     box-sizing: border-box;
     min-height: 250px;
+    margin: 0.5em 0;
 
     & > svg {
       margin-bottom: -5px;
@@ -397,14 +410,15 @@ hr {
   margin-top: 30vh;
 }
 
-article > h1 {
+.spacer {
-  font-size: 2em;
+  flex: 1 1 auto;
 }
 
 header {
   display: flex;
   flex-direction: row;
   align-items: center;
+  margin: 1em 0 2em;
 
   & > h1 {
     font-size: 2em;
@@ -416,10 +430,6 @@ header {
     }
   }
 
-  & > .spacer {
-    flex: 1 1 auto;
-  }
-
   #search-icon {
     background-color: var(--lightgray);
     border-radius: 4px;
@@ -429,7 +439,7 @@ header {
     cursor: pointer;
     & > p {
       display: inline;
-      padding: 0 0.5em 0 1em;
+      padding: 0 1.5em 0 2em;
     }
   }
 
@@ -484,7 +494,7 @@ header {
     & > input {
       box-sizing: border-box;
       padding: 0.5em 1em;
-      font-family: Inter, sans-serif;
+      font-family: var(--font-body);
       color: var(--dark);
       font-size: 1.1em;
       border: 1px solid var(--outlinegray);
@@ -545,23 +555,44 @@ header {
 
 .section-ul {
   list-style: none;
+  margin-top: 2em;
   padding-left: 0;
 
-  & > li {
+}
-    border: 1px solid var(--outlinegray);
-    border-radius: 5px;
-    padding: 0 1em;
-    margin-bottom: 1em;
 
-    & h3 {
+.section-li {
-      opacity: 1;
+  margin-bottom: 1em;
+
+  & > .section {
+    display: flex;
+    align-items: center; 
+
+    @media all and (max-width: 600px) {
+      & .tags {
+        display: none;
+      }
+    }
+
+    & h3 > a {
       font-weight: 700;
-      margin-bottom: 0em;
+      margin: 0;
     }
+    
+    & p {
+      margin: 0;
+      padding-right: 1em;
+      flex-basis: 6em; 
+    }
+  }
 
-    & .meta {
+  & h3 {
-      opacity: 0.6;
+    opacity: 1;
-    }
+    font-weight: 700;
+    margin: 0em;
+  }
+
+  & .meta {
+    opacity: 0.6;
   }
 }
 
@@ -584,11 +615,11 @@ header {
 .popover {
   z-index: 999;
   position: absolute;
-  width: 20em;
+  width: 20rem;
   display: none;
   background-color: var(--light);
-  padding: 1em;
+  padding: 1rem;
-  margin: 1em;
+  margin: 1rem;
   border: 1px solid var(--outlinegray);
   border-radius: 5px;
   pointer-events: none;
@@ -610,18 +641,19 @@ header {
 
   & > h3 {
     font-size: 1rem;
-    margin: 0.25em 0;
+    margin: 0.25rem 0;
   }
 
   & > .meta {
-    margin-top: 0.25em;
+    margin-top: 0.25rem;
     opacity: 0.5;
-    font-family: "JetBrains Mono", monospace;
+    font-family: var(--font-mono);
     font-size: 0.8rem;
   }
 
   & > p, & > a {
-    margin: 0;
+    font-size: 1rem;
+    margin: 0.7rem 0;
     font-weight: 400;
     user-select: none;
   }

assets/styles/code-title.scss

@@ -1,6 +1,6 @@
 .code-title {
   color: var(--primary) ;
-  font-family: monospace;
+  font-family: var(--font-mono);
   width: max-content;
   overflow-x: auto;
   display: inline-block;

assets/styles/custom.scss

@@ -1,4 +1,5 @@
 // Add your own CSS here!
+
 :root {
   --light: #faf8f8;
   --dark: #141021;

assets/styles/syntax.scss

@@ -45,7 +45,7 @@
 }
 
 .chroma code {
-  font-family: 'Fira Code' !important;
+  font-family: var(--font-mono) !important;
   font-size: 0.85em !important;
   line-height: 2em !important;
   background: none !important;

content/_index.md

@@ -10,17 +10,17 @@ Host your second brain and [digital garden](https://jzhao.xyz/posts/networked-th
 4. Built-in [[notes/CJK + Latex Support (测试) | CJK + Latex Support]]
 5. Support for both Markdown Links and Wikilinks
 
+Check out some of the [amazing gardens that community members](notes/showcase.md) have published with Quartz or read about [why I made Quartz](notes/philosophy.md) to begin with.
+
 ## Get Started
 > 📚 Step 1: [Setup your own digital garden using Quartz](notes/setup.md)
 
-Not convinced yet? Look at some [community digital gardens](notes/showcase.md) built with Quartz, or read about [why I made Quartz](notes/philosophy.md) to begin with.
-
 Returning user? Figure out how to [[notes/updating|update]] your existing Quartz garden.
 
-### Content Lists
 If you prefer browsing the contents of this site through a list instead of a graph, you see a list of all [setup-related notes](/tags/setup).
 
 ### Troubleshooting
 - 🚧 [Troubleshooting and FAQ](notes/troubleshooting.md)
 - 🐛 [Submit an Issue](https://github.com/jackyzha0/quartz/issues)
 - 👀 [Discord Community](https://discord.gg/cRFFHYye7t)
+

content/notes/preview changes.md

@@ -14,7 +14,7 @@ This step will generate the list of backlinks for Hugo to parse. Ensure you have
 
 ```shell
 # Install and link `hugo-obsidian` locally
-$ go install github.com/jackyzha0/hugo-obsidian@latest
+go install github.com/jackyzha0/hugo-obsidian@latest
 ```
 
 If you are running into an error saying that `command not found: hugo-obsidian`, make sure you set your `GOPATH` correctly! This will allow your terminal to correctly recognize hugo-obsidian as an executable.
@@ -26,10 +26,10 @@ Hugo is the static site generator that powers Quartz. [Install Hugo with "extend
 
 ```
 # Navigate to your local Quartz folder
-$ cd <location-of-your-local-quartz>
+cd <location-of-your-local-quartz>
 
 # Start local server
-$ make serve
+make serve
 
 # View your site in a browser at http://localhost:1313/
 ```

content/notes/setup.md

@@ -21,7 +21,7 @@ Then, Fork the repository into your own GitHub account. If you don't have an acc
 After you've made a fork of the repository, you need to download the files locally onto your machine. Ensure you have `git`, then type the following command replacing `YOUR-USERNAME` with your GitHub username.
 
 ```shell
-$ git clone https://github.com/YOUR-USERNAME/quartz
+git clone https://github.com/YOUR-USERNAME/quartz
 ```
 
 ## Editing

content/notes/showcase.md

@@ -5,7 +5,8 @@ title: "Showcase"
 Want to see what Quartz can do? Here are some cool community gardens :)
 
 - [Quartz Documentation (this site!)](https://quartz.jzhao.xyz/)
-- [Jacky Zhao's Garden](https://garden.jzhao.xyz/)
+- [Jacky Zhao's Garden](https://jzhao.xyz/)
+- [Scaling Synthesis - A hypertext research notebook](https://scalingsynthesis.com/)
 - [AWAGMI Intern Notes](https://notes.awagmi.xyz/)
 - [Shihyu's PKM](https://shihyuho.github.io/pkm/)
 - [Chloe's Garden](https://garden.chloeabrasada.online/)

layouts/_default/section.html

@@ -9,6 +9,9 @@
     {{partial "header.html" .}}
     <article>
         <h1>All {{.Title}}</h1>
+        {{with .Params.description}}
+            <p>{{.}}</p>
+        {{end}}
         {{partial "page-list.html" .Paginator.Pages.ByLastmod.Reverse }}
         {{ template "_internal/pagination.html" .}}
     </article>

layouts/_default/single.html

@@ -17,8 +17,8 @@
     <article>
       {{if .Title}}<h1>{{ .Title }}</h1>{{end}}
       <p class="meta">
-        Last updated {{if ne .Date .Lastmod}}{{ .Lastmod.Format "January 2, 2006" }}
+
-        {{else}}Unknown{{end}}.
+          Last updated {{ partial "date-fmt.html" .}} 
           {{ partial "github.html" . }}
       </p>
       <ul class="tags">

layouts/_default/taxonomy.html

@@ -9,14 +9,17 @@
     {{partial "header.html" .}}
     <article>
         <h1>All {{.Title}}</h1>
+        {{with .Params.description}}
+            <p>{{.}}</p>
+        {{end}}
         <div class="tags">
             {{ range .Site.Taxonomies.tags.ByCount }}
             <div class="meta">
-                <h1><a href="{{ .Page.Permalink }}">{{ .Page.Title }}</a></h1>
+                <h1><a href="{{ .Page.Permalink }}">{{ .Page.Title | humanize }}</a></h1>
-                <p><b>{{ .Count }}</b> notes with this tag {{if gt .Count 2}}(showing first 2 results){{end}}</p>
+                <p><b>{{ .Count }}</b> notes with this tag {{if gt .Count 10}}(showing first 10 results){{end}}</p>
             </div>
             {{ with ($.Site.GetPage (printf "/tags/%s" .Page.Title)) }}
-            {{partial "page-list.html" (first 2 .Pages.ByLastmod.Reverse)}}
+            {{partial "page-list.html" (first 10 .Pages.ByLastmod.Reverse)}}
             {{ end }}
             {{ end }}
         </div>

layouts/_default/term.html

@@ -8,7 +8,10 @@
     <!-- Begin actual content -->
     {{partial "header.html" .}}
     <article>
-        <h1>Tag: {{.Title | humanize}}</h1>
+        <h1>Tag: {{ .Title }}</h1>
+        {{with .Params.description}}
+            <p>{{.}}</p>
+        {{end}}
         {{partial "page-list.html" .Paginator.Pages}}
         {{ template "_internal/pagination.html" . }}
     </article>

layouts/partials/contact.html

@@ -4,7 +4,7 @@
         <p>Made by {{ $.Site.Data.config.name }} using <a href="https://github.com/jackyzha0/quartz">Quartz</a>, © {{ dateFormat "2006" now }}</p>
         <ul>
             {{ if not .IsHome }}
-            <li><a href="/">Home</a></li>
+            <li><a href="{{ $.Site.BaseURL}}">Home</a></li>
             {{end}}
             {{- range $.Site.Data.config.links -}}
             <li><a href="{{.link}}">{{.link_name}}</a></li>

layouts/partials/date-fmt.html

@@ -0,0 +1,7 @@
+{{if .Date}}
+{{.Date.Format "Jan 2, 2006"}}
+{{else if .Lastmod}}
+{{.Lastmod.Format "Jan 2, 2006"}}
+{{else}}
+Unknown
+{{end}}

layouts/partials/head.html

@@ -23,10 +23,6 @@
   {{ end }}
 
   <!-- CSS Stylesheets and Fonts -->
-  <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"
-  />
   {{$sass := resources.Match "styles/[!_]*.scss" }}
   {{$css := slice }}
   {{range $sass}}

layouts/partials/page-list.html

@@ -2,19 +2,18 @@
     {{- range . -}}
     <li class="section-li">
         <div class="section">
+            <p class="meta">
+                {{partial "date-fmt.html" .}}
+            </p>
             <div class="desc">
                 <h3><a href="{{ .Permalink }}">{{- .Title -}}</a></h3>
-                <ul class="tags">
-                    {{ range (.GetTerms "tags") }}
-                    <li><a href="{{ .Permalink }}">{{ .LinkTitle | title}}</a></li>
-                    {{ end }}
-                </ul>
-                <p>{{- .Summary -}}{{if .Truncated}}...{{end}}</p>
             </div>
-            <p class="meta">
+            <div class="spacer"></div>
-                {{ .ReadingTime }} minute read. Last updated {{if ne .Date .Lastmod}}{{ .Lastmod.Format "January 2, 2006" }}{{else}}Unknown{{end}}
+            <ul class="tags">
-            </p>
+                {{ range (.GetTerms "tags") }}
-
+                <li><a href="{{ .Permalink }}">{{ .LinkTitle | title}}</a></li>
+                {{ end }}
+            </ul>
         </div>
     </li>
     {{- end -}}