DigitalGardeningCollective · joshwingreene · Mar 13, 2024 · Mar 13, 2024
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,45 @@
+name: Deploy Quartz site to GitHub Pages
+
+on:
+  push:
+    branches:
+      - develop
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0 # Fetch all history for git info
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18.14
+      - name: Install Dependencies
+        run: npm ci
+      - name: Build Quartz
+        run: npx quartz build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          path: public
+
+  deploy:
+    needs: build
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2
diff --git a/content/blogroll/maggieappleton.md b/content/blogroll/maggieappleton.md
@@ -2,5 +2,6 @@
 tags:
   - digital-gardening
 title: Maggie Appleton's Digital Garden
+date: 2024-03-06 8:30 pm
 ---
 Hello World
diff --git a/content/garden/contributions/example-contribution.md b/content/garden/contributions/example-contribution.md
@@ -1,5 +1,5 @@
 ---
 title: Example Contribution
-tags: []
+date: 2024-03-06 8:30 pm
 ---
 Hello World
diff --git a/content/garden/essays/example-essay.md b/content/garden/essays/example-essay.md
@@ -2,6 +2,7 @@
 tags:
   - obsidian
   - productivity
+  - example
 title: How you can use Obsidian to do X, Y, and Z
 growthStage: evergreen
 subtitle: Task, Habits, Notes, Reviews, and etc
@@ -12,6 +13,7 @@ contributors:
 contributorLinks:
   - https://github.com/ashleycrouch
   - https://github.com/bencovington-game
+date: 2024-03-06 8:30 pm
 ---
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 

diff --git a/content/garden/mocs/example-moc.md b/content/garden/mocs/example-moc.md
@@ -1,5 +1,6 @@
 ---
 title: Example MOC
+date: 2024-03-06 8:30 pm
 tags:
   - pkm
 ---

diff --git a/content/garden/notes/example-note.md b/content/garden/notes/example-note.md
@@ -2,5 +2,6 @@
 title: Example Note
 tags:
   - politics
+date: 2024-03-06 8:30 pm
 ---
 Hello World
diff --git a/content/now/2023.md b/content/now/2023.md
@@ -1,5 +1,6 @@
 ---
 tags:
   - life
+date: 2024-03-06 8:30 pm
 ---
 Hello World
diff --git a/quartz.config.ts b/quartz.config.ts
@@ -59,7 +59,7 @@ const config: QuartzConfig = {
     locale: "en-US",
     baseUrl: "quartz.jzhao.xyz",
     ignorePatterns: ["private", "templates", ".obsidian"],
-    defaultDateType: "created",
+    defaultDateType: "modified",
     theme: {
       cdnCaching: true,
       typography: {
@@ -95,7 +95,7 @@ const config: QuartzConfig = {
     transformers: [
       Plugin.FrontMatter(),
       Plugin.CreatedModifiedDate({
-        priority: ["frontmatter", "filesystem"],
+        priority: ["git"],
       }),
       Plugin.Latex({ renderEngine: "katex" }),
       Plugin.SyntaxHighlighting({

diff --git a/quartz/cfg.ts b/quartz/cfg.ts
@@ -86,8 +86,6 @@ export interface GlobalConfiguration {
    * Region Codes: https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2
    */
   locale: ValidLocale
-  websiteMenuTitles: string[]
-  gardenMenuTitles: string[]
 }
 
 export interface QuartzConfig {

diff --git a/quartz/cli/constants.js b/quartz/cli/constants.js
@@ -6,7 +6,7 @@ import { readFileSync } from "fs"
  */
 export const ORIGIN_NAME = "origin"
 export const UPSTREAM_NAME = "upstream"
-export const QUARTZ_SOURCE_BRANCH = "v4"
+export const QUARTZ_SOURCE_BRANCH = "develop"
 export const cwd = process.cwd()
 export const cacheDir = path.join(cwd, ".quartz-cache")
 export const cacheFile = "./quartz/.quartz-cache/transpiled-build.mjs"

diff --git a/quartz/components/ContentMeta.tsx b/quartz/components/ContentMeta.tsx
@@ -26,7 +26,7 @@ export default ((opts?: Partial<ContentMetaOptions>) => {
       const segments: string[] = []
 
       if (fileData.dates) {
-        segments.push(formatDate(getDate(cfg, fileData)!, cfg.locale))
+        segments.push(formatDate(fileData.dates.published!, cfg.locale))
       }
 
       // Display reading time if enabled

diff --git a/quartz/components/CultivationDates.tsx b/quartz/components/CultivationDates.tsx
@@ -10,17 +10,22 @@ function CultivationDates({ fileData, displayClass, cfg }: QuartzComponentProps)
         const formatter = new Intl.RelativeTimeFormat(locale ?? "en-US", { numeric: "auto" });
         return formatter.format(-diffInDays, "day");
     }
+
+    const updatedDateStr = daysAgoFormat(getDate(cfg, fileData)!, cfg.locale);
+
+    const publishedDate = fileData.dates?.published;
+
+    let publishedDateStr;
+
+    if (publishedDate !== undefined) {
+        publishedDateStr = daysAgoFormat(publishedDate, cfg.locale)
+    }
 
-    const publishedDate = daysAgoFormat(getDate(cfg, fileData)!, cfg.locale);
-    const updatedDate = fileData.dates?.modified
-
-    if (publishedDate ) {
+    if (publishedDateStr && updatedDateStr) {
         return (
             <div class={classNames(displayClass, "cultivation-dates")}>
-                <p><span>Published:</span> {publishedDate}</p>
-                {  updatedDate && 
-                    <p><span>Last Tended:</span> {daysAgoFormat(updatedDate)}</p>
-                }
+                <p><span>Published:</span> {publishedDateStr}</p>
+                <p><span>Last Tended:</span> {updatedDateStr}</p>
             </div>
         )
     } else {

diff --git a/quartz/components/Garden.tsx b/quartz/components/Garden.tsx
@@ -1,6 +1,5 @@
 import gardenStyle from "./styles/garden.scss"
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
-import { sharedPageComponents } from "../../quartz.layout"
 import * as Component from "../components"
 import { defaultOptions } from "./Graph"
 
@@ -36,6 +35,13 @@ export default (() => {
             socialLinks: { twitter, facebook, github, linkedin },
          } = gardenPageData;
 
+         const SocialIconsComponent = Component.SocialIcons({ 
+            twitter,
+            facebook,
+            github,
+            linkedin
+        });
+
          const collections = [
              {
                  title: 'Notes',
@@ -71,12 +77,7 @@ export default (() => {
                         <h4>{ title }</h4>
                         <p>{ leadUp } <span>{ topics.slice(0, topics.length - 1).join(', ') }</span>, and <span>{ topics[topics.length - 1] }</span>.</p>
                         <p>{ findMeOnCopy }</p>
-                        <ul>
-                            { twitter && <li class="garden-social-item"><a href={twitter}><i class="fa-brands fa-x-twitter"></i></a></li> }
-                            { facebook && <li class="garden-social-item"><a href={facebook}><i class="fa-brands fa-facebook"></i></a></li> }
-                            { github && <li class="garden-social-item"><a href={github}><i class="fa-brands fa-github"></i></a></li> }
-                            { linkedin && <li class="garden-social-item"><a href={linkedin}><i class="fa-brands fa-linkedin"></i></a></li> }
-                        </ul>
+                        <SocialIconsComponent { ...data } />
                     </div>
                 </div>
                 <div id="garden-body">

diff --git a/quartz/components/GrowthStage.tsx b/quartz/components/GrowthStage.tsx
@@ -4,30 +4,41 @@ import { classNames } from "../util/lang"
 export default (() => {
   function GrowthStage({ fileData, cfg, displayClass }: QuartzComponentProps) {        
     const growthStage = fileData.frontmatter?.growthStage
-      if (growthStage && typeof growthStage === "string") {
-        return (
-            <div id="growth-stage-div">
-                { growthStage === "seedling" && <i class="fa-solid fa-seedling"></i> }
-                { growthStage === "budding" && <i class="fa-solid fa-plant-wilt"></i> }
-                { growthStage === "evergreen" && <i class="fa-solid fa-tree"></i> }
-                <h4 class={classNames(displayClass, "growth-stage-title")}>{growthStage[0].toUpperCase() + growthStage.slice(1)}</h4>
-            </div>
-        )
-      } else {
-        return null
-      }
+
+    if (growthStage && typeof growthStage === "string") {
+      return (
+          <div id="growth-stage-div">
+              { growthStage === "seedling" && 
+                <svg width="1.2rem" height="1.2rem" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.7,3.3C20.7,3.3 19.3,3 17.2,3C11.7,3 1.6,5.1 3.2,20.8C4.3,20.9 5.4,21 6.4,21C24.3,21 20.7,3.3 20.7,3.3M7,17C7,17 7,7 17,7C17,7 11,9 7,17Z" /></svg>
+              }
+              { growthStage === "budding" && 
+                <svg width="1.2rem" height="1.2rem" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2,22V20C2,20 7,18 12,18C17,18 22,20 22,20V22H2M11.3,9.1C10.1,5.2 4,6.1 4,6.1C4,6.1 4.2,13.9 9.9,12.7C9.5,9.8 8,9 8,9C10.8,9 11,12.4 11,12.4V17C11.3,17 11.7,17 12,17C12.3,17 12.7,17 13,17V12.8C13,12.8 13,8.9 16,7.9C16,7.9 14,10.9 14,12.9C21,13.6 21,4 21,4C21,4 12.1,3 11.3,9.1Z" /></svg>
+              }
+              { growthStage === "evergreen" && 
+                <svg width="1.2rem" height="1.2rem" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M19 12L12 2L5 12H6.86L3 18H10V22H14V18H21L17.14 12H19Z" /></svg>
+              }
+              { growthStage === "statue" &&
+                <svg width="1.2rem" height="1.2rem" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M180.7 4.7c6.2-6.2 16.4-6.2 22.6 0l80 80c2.5 2.5 4.1 5.8 4.6 9.3l40.2 322H55.9L96.1 94c.4-3.5 2-6.8 4.6-9.3l80-80zM152 272c-13.3 0-24 10.7-24 24s10.7 24 24 24h80c13.3 0 24-10.7 24-24s-10.7-24-24-24H152zM32 448H352c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32z"/></svg>
+              }
+              <h4 class={classNames(displayClass, "growth-stage-title")}>{growthStage[0].toUpperCase() + growthStage.slice(1)}</h4>
+          </div>
+      )
+    } else {
+      return null
+    }
   }
-  
+
   GrowthStage.css = `
-  #growth-stage-div {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 0.5rem;
-  }
-  .growth-stage-title {
-    margin: 0 0 0 0;
-  }
+    #growth-stage-div {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 0.5rem;
+
+      .growth-stage-title {
+        margin: 0;
+      }
+    }
   `
 
   return GrowthStage

diff --git a/quartz/components/PageList.tsx b/quartz/components/PageList.tsx
@@ -46,7 +46,7 @@ export const PageList: QuartzComponent = ({ cfg, fileData, allFiles, limit }: Pr
             <div class="section">
               {page.dates && (
                 <p class="meta">
-                  <Date date={getDate(cfg, page)!} locale={cfg.locale} />
+                  <Date date={page.dates.published!} locale={cfg.locale} />
                 </p>
               )}
               <div class="desc">

diff --git a/quartz/components/SocialIcons.tsx b/quartz/components/SocialIcons.tsx
@@ -0,0 +1,68 @@
+import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { classNames } from "../util/lang"
+
+interface Options {
+  linkedin: string | null
+  facebook: string | null
+  twitter: string | null
+  github: string | null
+}
+
+export default ((opts?: Options) => {
+  function SocialIcons(componentData: QuartzComponentProps) {
+    const { displayClass } = componentData;
+    const socials = opts;
+
+    if (socials) {
+        const { twitter, facebook, github, linkedin } = socials;
+        return (
+            <div class={classNames(displayClass, "social-icons")}>
+              { twitter &&
+                <a href={twitter}>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>
+                </a>
+              }
+              { facebook &&
+                <a href={facebook}>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z"/></svg>
+                </a>
+              }
+              { github &&
+                <a href={github}>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
+                </a>
+              }
+              { linkedin &&
+                <a href={linkedin}>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg>
+                </a>
+              }
+            </div>
+          ) 
+    } else {
+        return null
+    }
+  }
+
+  SocialIcons.css = `
+    .social-icons {
+        display: flex;
+        flex-direction: row;
+        gap: .5rem;
+        align-items: center;
+
+        a {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+
+            svg {
+                width: 1.2rem;
+                height: 1.2rem;
+                fill: var(--dark);
+            }
+        }
+    }
+  `
+  return SocialIcons
+}) satisfies QuartzComponentConstructor
diff --git a/quartz/components/index.ts b/quartz/components/index.ts
@@ -37,6 +37,7 @@ import Divider from "./Divider"
 import Author from "./Author"
 import CultivationDates from "./CultivationDates"
 import RSS from "./RSS"
+import SocialIcons from "./SocialIcons"
 
 export {
   Title,
@@ -77,5 +78,6 @@ export {
   Divider,
   Author,
   CultivationDates,
-  RSS
+  RSS,
+  SocialIcons
 }