add base pages

.github/workflows/deploy.yaml

@@ -0,0 +1,35 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - hugo
+
+jobs:
+  deploy:
+    runs-on: ubuntu-18.04
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Build Link Index
+        uses: jackyzha0/hugo-obsidian@v1.4
+        with:
+          input: content
+          output: data
+
+      - name: Setup Hugo
+        uses: peaceiris/actions-hugo@v2
+        with:
+          hugo-version: '0.79.1'
+          extended: true
+
+      - name: Build
+        run: hugo --minify
+
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./public
+          publish_branch: master  # deploying branch
+          cname: quartz.jzhao.xyz

.gitignore

@@ -3,3 +3,4 @@ public
 resources
 .idea
 content/.obsidian
+data/linkIndex.yaml

README.md

@@ -1,4 +1,4 @@
-# quartz
+# Quartz
 Simple second brain and digital garden.
 
 ```shell

assets/base.scss

@@ -0,0 +1,201 @@
+: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 0.2s ease;
+  color: var(--navy);
+
+  &:hover {
+    color: var(--olive) !important;
+  }
+}
+
+#TableOfContents > ol {
+  counter-reset: section;
+  margin-left: 0em;
+  padding-left: 1.5em;
+  & > li {
+    counter-increment: section;
+    & > ol {
+      counter-reset: subsection;
+      & > li {
+        counter-increment: subsection;
+        &::marker {
+          content: counter(section) "." counter(subsection) "  ";
+        }
+      }
+    }
+  }
+
+  & > li::marker {
+    content: counter(section) "  ";
+  }
+
+  & > li::marker, & > 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: 0.85;
+}
+
+h3 {
+  opacity: 0.75;
+}
+
+blockquote {
+  margin-left: 0em;
+  border-left: 3px solid var(--navy);
+  padding-left: 1em;
+  transition: border-color 0.2s ease;
+
+  &:hover {
+    border-color: var(--olive);
+  }
+}
+
+table {
+  padding: 1.5em;
+}
+
+td, th {
+  padding: 0.1em 0.5em;
+}
+
+.footnotes p {
+  margin: 0.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 0.1em 0 0.2em;
+}
+
+pre {
+  font-family: 'Fira Code';
+  padding: 0.75em;
+  border-radius: 3px;
+  overflow-x: scroll;
+}
+
+code {
+  font-family: 'Fira Code';
+  font-size: 0.85em;
+  padding: 0.15em 0.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;
+
+  & > a {
+    font-size: 1em;
+    color: var(--navy);
+    padding: 0 0.5em 3em 0.5em;
+  }
+}
+
+hr {
+  width: 25%;
+  margin: 4em auto;
+  height: 2px;
+  border-radius: 1px;
+  border-width: 0;
+  color: var(--dark);
+  background-color: var(--dark);
+}
+
+// internal link
+a[href^="/"] {
+  text-decoration: none;
+  background-color: #afbfc922;
+  padding: 0 0.2em;
+  border-radius: 3px;
+}
+
+.singlePage {
+  margin: 4em 30vw;
+
+  @media all and (max-width: 1200px) {
+    margin: 25px 5vw;
+  }
+}

assets/custom.scss

@@ -0,0 +1,24 @@
+// Add your own CSS here!
+: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;
+}

config.toml

@@ -2,3 +2,21 @@ baseURL = "https://quartz.jzhao.xyz/"
 languageCode = "en-us"
 googleAnalytics = "UA-148413215-1"
 pygmentsUseClasses = true
+ignoreFiles = ["/content/templates/*"]
+
+[markup]
+    [markup.tableOfContents]
+        endLevel = 3
+        ordered = true
+        startLevel = 2
+    [markup.highlight]
+        anchorLineNos = false
+        codeFences = true
+        guessSyntax = true
+        hl_Lines = ""
+        lineAnchors = ""
+        lineNoStart = 1
+        lineNos = true
+        lineNumbersInTable = true
+        style = "dracula"
+        tabWidth = 4

content/_index.md

@@ -0,0 +1,7 @@
+# 💎 Quartz
+Simple second brain and digital garden. 🌱
+
+## Why Quartz?
+
+## Get Started
+[directory](moc/directory.md)

content/moc/directory.md

@@ -0,0 +1,7 @@
+---
+title: "Directory"
+---
+
+[setup](notes/setup.md)
+[config](notes/config.md)
+[troubleshooting](notes/troubleshooting.md)

content/notes/config.md

@@ -0,0 +1,3 @@
+---
+title: "config"
+---

content/notes/setup.md

@@ -0,0 +1,8 @@
+---
+title: "Setup"
+---
+
+![](/notes/images/obsidian-settings.png)
+
+
+Having problems? [troubleshooting](notes/troubleshooting.md)

content/notes/troubleshooting.md

@@ -0,0 +1,3 @@
+---
+title: "troubleshooting"
+---

content/templates/post.md

@@ -0,0 +1,3 @@
+---
+title: "{{title}}"
+---

data/config.yaml

@@ -1,11 +1,12 @@
-name: Quartz Example Page
+name: Jacky Zhao
+enableToc: true
 description:
   Here is the page description. This is an example Quartz site that details installation,
   setup, customization, and troubleshooting for Quartz itself.
 page_title:
   Quartz Example Page
 links:
-  - link_name: twitter
+  - link_name: Twitter
     link: https://twitter.com/_jzhao
-  - link_name: github
+  - link_name: Github
     link: https://github.com/jackyzha0

layouts/404.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+{{ partial "head.html" . }}
+
+<body>
+<div id="landing-container">
+    {{partial "darkmode.html" .}}
+    <div id="landing-overlay" class="lt-content-column">
+        <h1>404.</h1>
+        <h3>Hey! You look a little lost.</h3>
+        <ul id="sub-nav">
+            <li><a href="/">↳ Let's get you home.</a></li>
+        </ul>
+    </div>
+</div>
+</body>
+
+</html>

layouts/_default/_markup/render-link.html

@@ -0,0 +1,2 @@
+{{$trimmed := strings.TrimSuffix ".md" (.Destination | safeURL)}}
+<a href="{{ if (hasPrefix $trimmed "/") }}{{ $trimmed }}{{ else }}{{ print "/" $trimmed }}{{ end }}" rel="noopener">{{ .Text | safeHTML }}</a>

layouts/_default/single.html

@@ -8,6 +8,12 @@
     {{partial "darkmode.html" .}}
     <article>
         {{if .Title}}<h1>{{ .Title }}</h1>{{end}}
+        {{if $.Site.Data.config.enableToc}}
+        <aside class="mainTOC">
+            <h3>Table of Contents</h3>
+            {{ .TableOfContents }}
+        </aside>
+        {{end}}
         {{- .Content -}}
     </article>
     {{partial "footer.html" .}}

layouts/index.html

@@ -0,0 +1,15 @@
+{{define "head"}}
+{{ partial "head.html" . }}
+{{end}}
+
+{{define "main"}}
+<!-- Main Page -->
+<div class="singlePage">
+    {{.Content}}
+
+    <!-- Contact Info -->
+    <div class="lt-centre">
+        {{partial "footer.html" .}}
+    </div>
+</div>
+{{end}}

layouts/partials/footer.html

@@ -1,20 +1,17 @@
 <div>
     <hr/>
+    {{partial "backlinks.html" .}}
     {{partial "graph.html" .}}
-    <ul id="sub-nav">
-        <li><a href="/">↳ Take me home</a></li>
-    </ul>
 </div>
 
 <!-- Contact Info -->
 <div id="contact_buttons" class="lt-centre">
     <footer>
-        <p>made by {{ $.Site.Data.config.name }}, © {{ dateFormat "2006" now }}</p>
-        <a href="https://github.com/jackyzha0/quartz">source</a>
+        <p>Made by {{ $.Site.Data.config.name }} using <a href="https://github.com/jackyzha0/quartz">Quartz</a>, © {{ dateFormat "2006" now }}</p>
         {{ if not .IsHome }}
-        <a href="/">home</a>
+        <a href="/">Home</a>
         {{end}}
-        {{- range $.Site.Data.links.footer -}}
+        {{- range $.Site.Data.config.links -}}
         <a href="{{.link}}">{{.link_name}}</a>
         {{- end -}}
     </footer>

layouts/partials/graph.html

@@ -23,7 +23,7 @@
   }
 
   const color = (d) => {
-    if (d.id === curPage) {
+    if (d.id === curPage || (d.id === "/" && curPage === "")) {
       return "var(--g-node-active)"
     }
 
@@ -64,7 +64,7 @@
       .on("end", enableDrag ? dragended : noop);
   }
 
-  const height = 400
+  const height = 250
   const width = document.getElementById("graph-container").offsetWidth
 
   const simulation = d3.forceSimulation(data.nodes)

layouts/partials/head.html

@@ -12,7 +12,7 @@
 
     <!-- CSS Stylesheets and Fonts -->
     <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">
-    {{ $css := slice "darkmode.scss" "syntax.scss"}}
+    {{ $css := slice "custom.scss" "base.scss" "darkmode.scss" "syntax.scss"}}
     {{range $css}}
     {{$sass := resources.Get . | resources.ToCSS }}
     {{with $sass | minify}}