Quartz sync: Jul 2, 2024, 4:06 PM

2026-03-24 15:05:42 -05:00 · 2024-07-02 16:06:20 -04:00 · 2024-07-02 16:06:20 -04:00 · d1fbc1571e
commit d1fbc1571e
parent a1aa16090d
21 changed files with 834 additions and 88 deletions
--- a/content/daily/2024/06/2024-06-27.md
+++ b/content/daily/2024/06/2024-06-27.md
@ -1,8 +1,7 @@
 ---
 title: 2024-06-27
 author: ["Justin"]
-lastmod: 2024-06-27T10:40:41-04:00
-tags: ["stub"]
+lastmod: 2024-06-30T05:07:07-04:00
 draft: false
 ---

--- a/content/daily/2024/06/2024-06-28.md
+++ b/content/daily/2024/06/2024-06-28.md
@ -0,0 +1,39 @@
+---
+title: 2024-06-28
+author: ["Justin"]
+lastmod: 2024-06-30T05:06:51-04:00
+draft: false
+---
+
+## Agenda {#agenda}
+
+
+### Tasks {#tasks}
+
+-   [ ] Chinese
+    -   Forgot.
+-   [X] Read
+
+
+## Notes {#notes}
+
+
+### Reading {#reading}
+
+-
+
+
+### Other {#other}
+
+-   Want to see if hyprland + wayland is worth using. Have been using x11 for too
+    long and haven't tried to move over ina couple years due to NVIDIA being
+    wonky.
+    -   I think I mostly got it working. Had to switch display managers.
+    -   Ironbar requires some edits.
+    -   This basically became a half my day project, but should be good once done.
+-   Moved a lot of my theming to catppuccin - pastel vibes.
+
+
+## Journal {#journal}
+
+SNS going to be weird for awhile due to the election, isn't it.
--- a/content/daily/2024/06/2024-06-29.md
+++ b/content/daily/2024/06/2024-06-29.md
@ -0,0 +1,30 @@
+---
+title: 2024-06-29
+author: ["Justin"]
+lastmod: 2024-06-29T15:05:58-04:00
+draft: false
+---
+
+## Agenda {#agenda}
+
+
+### Tasks {#tasks}
+
+-   [X] Chinese
+    -   Caught up.
+-   [ ] Read
+
+
+## Notes {#notes}
+
+
+### Reading {#reading}
+
+-
+
+
+## Journal {#journal}
+
+Probably switching back to x11, there's too many annoyances with hyprland after
+daily driving it a bit. Too many programs don't play nice with it. It's 'usable'
+but it's annoyance and the only gain I get is prettier windows.
--- a/content/daily/2024/06/2024-06-30.md
+++ b/content/daily/2024/06/2024-06-30.md
@ -0,0 +1,34 @@
+---
+title: 2024-06-30
+author: ["Justin"]
+lastmod: 2024-07-02T15:30:30-04:00
+draft: false
+---
+
+## Agenda {#agenda}
+
+
+### Tasks {#tasks}
+
+-   [X] Chinese
+    -   Didn't fully finish review. Blah.
+-   [X] Read
+    -   I fee like all the mpv documentation counts for this today
+-   [X] Learn something new
+    -   lots of things about mpv, filters, shaders, etc.
+
+
+## Notes {#notes}
+
+-   :TIL:  the scripts folder inside mpv, you can use lua scripts that run whenever
+    you run mpv.
+-   I'd like to add something to emacs/quartz that graphically links all my TILs,
+    it'd be a neat thing to comb over.
+-   Finished 'the bear' s3 - good, I liked the sole character episodes
+-   had an idea of keeping things in mononotes, maybe refactor them if they get
+    too big?
+
+
+## Journal {#journal}
+
+[mpv]({{< relref "../../../main/mpv.md" >}}) rabbithole! focusing on adding anime profile and getting around to adding vapoursynth
--- a/content/daily/2024/07/2024-07-01.md
+++ b/content/daily/2024/07/2024-07-01.md
@ -0,0 +1,48 @@
+---
+title: 2024-07-01
+author: ["Justin"]
+lastmod: 2024-07-02T13:57:16-04:00
+draft: false
+---
+
+<div class="outline-1 jvc">
+
+## Agenda {#agenda}
+
+<div class="outline-2 jvc">
+
+### Tasks {#tasks}
+
+-   [X] Chinese
+    -   686 reviews
+-   [X] Read
+
+</div>
+
+</div>
+
+<div class="outline-1 jvc">
+
+## Notes {#notes}
+
+<div class="outline-2 jvc">
+
+### Reading {#reading}
+
+-   [The Death of Cinematic Curiosity - YouTube](https://www.youtube.com/watch?v=7tIHweotUXA)
+    -   'Relatability' in cinema, token inclusiveness, introspection, passive
+        consumption of media, purpose of media itself
+    -   A critique that hits home, I suppose.
+
+</div>
+
+</div>
+
+<div class="outline-1 jvc">
+
+## Journal {#journal}
+
+New month! Already July. Well, the month switchover for my elisp works, so
+that's fun. Need to fix sorting, though.
+
+</div>
--- a/content/daily/2024/07/2024-07-02.md
+++ b/content/daily/2024/07/2024-07-02.md
@ -0,0 +1,53 @@
+---
+title: 2024-07-02
+author: ["Justin"]
+lastmod: 2024-07-02T15:38:57-04:00
+draft: false
+---
+
+<div class="outline-1 jvc">
+
+## Agenda {#agenda}
+
+<div class="outline-2 jvc">
+
+### Tasks {#tasks}
+
+-   [ ] Chinese
+-   [ ] Read
+
+</div>
+
+</div>
+
+<div class="outline-1 jvc">
+
+## Notes {#notes}
+
+<div class="outline-2 jvc">
+
+### Reading {#reading}
+
+-   <https://github.com/karthink/gptel/blob/53a905dafc99fc1a3732655a2123657c145343a2/gptel-transient.el#L109>
+    -   Apparently GPTel supports the 'awesome gpt prompts' by reading in the csv?
+        Just making a future note of this, might be something neat for my own projects.
+-   <https://github.com/s-kostyaev/ellama>
+    -   ellama, similar to GPTel.
+-   Okay, the quartz stuff is making my brain hurt. I think I need to rewrite some
+    of the hugo functionality.
+
+</div>
+
+</div>
+
+<div class="outline-1 jvc">
+
+## Journal {#journal}
+
+Taking some time tinkering with Vapoursynth, I needed to get it working for my
+mpv config. Trial run of some LLM models in emacs, think the lower parameter
+models still iffy to use vs. GPT/Claude, et. al.
+
+I did not do half of this I got really into figuring out the accursed CSS changes.
+
+</div>
--- a/content/main/eww.md
+++ b/content/main/eww.md
@ -2,11 +2,13 @@
 title: "eww"
 author: ["Justin"]
 date: 2024-06-27T03:48:00-04:00
-lastmod: 2024-06-27T03:51:37-04:00
-tags: ["stub", "software"]
+lastmod: 2024-07-02T15:20:25-04:00
+tags: ["software"]
 draft: false
 ---

+## Purpose {#purpose}
+
 [GitHub - elkowar/eww: ElKowars wacky widgets](https://github.com/elkowar/eww) - widgets that you can use instead
 (or ontop of) other window managers. I was looking into using it as a
-replacement for i3blocks.
+replacement for i3blocks?
--- a/content/main/movies.md
+++ b/content/main/movies.md
@ -0,0 +1,74 @@
+---
+title: "movies"
+author: ["Justin"]
+date: 2024-07-02T04:05:00-04:00
+lastmod: 2024-07-02T14:52:05-04:00
+tags: ["movies"]
+draft: false
+---
+
+Testing something out. Beep.
+
+<div class="outline-1 jvc">
+
+## Index <span class="tag"><span class="movies">movies</span></span> {#index}
+
+<div class="outline-2 jvc">
+
+### <span class="org-todo done KILL">KILL</span> Film {#film}
+
+<p><span class="timestamp-wrapper"><span class="timestamp-kwd">CLOSED:</span> <span class="timestamp">[2024-07-02 Tue 14:52]</span></span></p>
+
+-   Test
+    -   Test?
+
+<div class="outline-3 jvc">
+
+#### Thoughts {#thoughts}
+
+Test
+
+<div class="outline-4 jvc">
+
+##### 4th down {#4th-down}
+
+Test
+
+<div class="outline-5 jvc">
+
+###### 5th down {#5th-down}
+
+Test
+
+<!--list-separator-->
+
+-  6th down
+
+    <!--list-separator-->
+
+    -  7th down
+
+        <!--list-separator-->
+
+        -  8th down
+
+</div>
+
+</div>
+
+</div>
+
+</div>
+
+<div class="outline-2 jvc">
+
+### Film 2 {#film-2}
+
+-   Hello
+    -   Howdy
+        -   Word
+            -   Yo
+
+</div>
+
+</div>
--- a/content/main/mpv.md
+++ b/content/main/mpv.md
@ -0,0 +1,20 @@
+---
+title: "mpv"
+author: ["Justin"]
+date: 2024-06-30T04:50:00-04:00
+lastmod: 2024-06-30T05:00:34-04:00
+tags: ["software"]
+draft: false
+---
+
+[mpv.io](https://mpv.io) free (as in freedom) video player. I tend to use it for most things due
+to its customizability.
+
+
+## Config {#config}
+
+
+### <https://github.com/natural-harmonia-gropius/mpv-config> {#https-github-dot-com-natural-harmonia-gropius-mpv-config}
+
+Originally in Chinese, the author added an English translation in 2023 - was
+using this as a base of sorts.
--- a/content/main/quartz.md
+++ b/content/main/quartz.md
@ -0,0 +1,47 @@
+---
+title: "quartz (software)"
+author: ["Justin"]
+date: 2024-06-30T05:14:00-04:00
+lastmod: 2024-07-02T07:14:26-04:00
+draft: false
+---
+
+[GitHub - jackyzha0/quartz: 🌱](https://github.com/jackyzha0/quartz) - What my note site is built in, essentially a SSG
+(static site generator) meant to look similar to Obsidian's published sites
+(which costs money, since they host it for you). Amusingly Obsidian seems to
+sponsor it, which is their competition which confuses me. Commoditize your
+complement?
+
+Anyways I plan to use this for ideas / add-ons / goals wrt to my site too.
+
+
+## <span class="org-todo todo TODO">TODO</span> Quartz {#quartz}
+
+-   [X] Figure out how plugins work
+    -   ezpz
+-   [ ] Accomodate org-roam / org-mode more
+    -   [ ] TIL tag (new idea)
+    -   [ ] TODO/KILL/OK blah blah, etc. support - ox-hugo exports the CSS, it just
+        doesn't exist on the quartz side
+    -   [ ] Maybe some CSS header movement, make it look more org-like, bullets,
+        etc. - give it my own vibe
+-   [ ] The big issue with this is how do I stop remark from screwing with the html,
+    it basically strips out half the stuff ox-hugo does.
+-   [X] Figure out why sort / emojis don't work inside folders
+    -   Okay, that was me being dumb and not noticing it used two explorers,
+        extracted to function then reused.
+
+
+### Already Done {#already-done}
+
+-   In toc.ts I added a helper function to strip HTML, this is because if you add
+    a subheader tag in ox-hugo, it'll add a &lt;span&gt; with the tag, and the toc would
+    convert it ot something like:
+
+<!--listend-->
+
+```html
+<a href="#index-span-classtagspan-classmoviesmoviesspanspan" data-for="index-span-classtagspan-classmoviesmoviesspanspan">Index &lt;span class="tag"&gt;&lt;span class="movies"&gt;movies&lt;/span&gt;&lt;/span&gt;</a>
+```
+
+-
--- a/functions.ts
+++ b/functions.ts
@ -0,0 +1,59 @@
+import { Options } from "./quartz/components/ExplorerNode"
+
+export const mapFn: Options["mapFn"] = (node) => {
+  node.displayName = node.displayName.toLowerCase()
+
+  if (node.depth > 0) {
+    if (node.file) {
+      if (node.file.relativePath?.includes("daily/")) {
+        node.displayName = "🗓️ " + node.displayName
+      } else {
+        node.displayName = "📄 " + node.displayName
+      }
+    } else {
+      node.displayName = "📁 " + node.displayName
+    }
+  }
+}
+
+export const sortFn: Options["sortFn"] = (a, b, order = "ASC") => {
+  const isDateFormatted = (name: string): boolean => /^\d{4}-\d{2}-\d{2}/.test(name)
+
+  const getDate = (name: string): Date | null => {
+    const match = name.match(/^(\d{4})-(\d{2})-(\d{2})/)
+    return match ? new Date(parseInt(match[1]), parseInt(match[2]) - 1, parseInt(match[3])) : null
+  }
+
+  // Determine sort multiplier for ascending/descending
+  const multiplier = order === "DESC" ? -1 : 1
+
+  if (isDateFormatted(a.name) && isDateFormatted(b.name)) {
+    const dateA = getDate(a.name)
+    const dateB = getDate(b.name)
+    if (dateA && dateB) {
+      return (dateB.getTime() - dateA.getTime()) * multiplier
+    }
+  }
+
+  if (!a.file && !b.file) {
+    if (/\d+/.test(a.name) && /\d+/.test(b.name)) {
+      return (parseInt(b.name) - parseInt(a.name)) * multiplier
+    }
+    return (
+      a.name.localeCompare(b.name, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }) * multiplier
+    )
+  }
+
+  if (a.file && !b.file) return 1
+  if (!a.file && b.file) return -1
+
+  return (
+    a.name.localeCompare(b.name, undefined, {
+      numeric: true,
+      sensitivity: "base",
+    }) * multiplier
+  )
+}
--- a/package-lock.json
+++ b/package-lock.json
@ -1360,11 +1360,12 @@
      }
    },
    "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "license": "MIT",
      "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
      },
      "engines": {
        "node": ">=8"
@ -2351,9 +2352,10 @@
      }
    },
    "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "license": "MIT",
      "dependencies": {
        "to-regex-range": "^5.0.1"
      },
@ -3105,6 +3107,7 @@
      "version": "7.0.0",
      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "license": "MIT",
      "engines": {
        "node": ">=0.12.0"
      }
@ -3198,13 +3201,14 @@
      }
    },
    "node_modules/katex": {
-      "version": "0.16.8",
-      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.8.tgz",
-      "integrity": "sha512-ftuDnJbcbOckGY11OO+zg3OofESlbR5DRl2cmN8HeWeeFIV7wTXvAOx8kEjZjobhA+9wh2fbKeO6cdcA9Mnovg==",
+      "version": "0.16.10",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.10.tgz",
+      "integrity": "sha512-ZiqaC04tp2O5utMsl2TEZTXxa6WSC4yo0fv5ML++D3QZv/vx2Mct0mTlRx3O+uUkjfuAgOkzsCmq5MiUEsDDdA==",
      "funding": [
        "https://opencollective.com/katex",
        "https://github.com/sponsors/katex"
      ],
+      "license": "MIT",
      "dependencies": {
        "commander": "^8.3.0"
      },
@ -5806,6 +5810,7 @@
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "license": "MIT",
      "dependencies": {
        "is-number": "^7.0.0"
      },
--- a/quartz.config.ts
+++ b/quartz.config.ts
@ -8,14 +8,15 @@ import * as Plugin from "./quartz/plugins"
 */
 const config: QuartzConfig = {
  configuration: {
-    pageTitle: "🌆 justin's 𝕟𝕠𝕥𝕖𝕤",
+    pageTitle: "🌆 𝕟𝕠𝕥𝕖𝕤",
    enableSPA: true,
    enablePopovers: true,
    analytics: {
-      provider: "plausible",
+      // @ts-ignore
+      provider: "none",
    },
    locale: "en-US",
-    baseUrl: "quartz.jzhao.xyz",
+    baseUrl: "notes.justin.vc",
    ignorePatterns: ["private", "templates", ".obsidian"],
    defaultDateType: "created",
    theme: {
@ -36,22 +37,33 @@ const config: QuartzConfig = {
          secondary: "#284b63",
          tertiary: "#84a59d",
          highlight: "rgba(143, 159, 169, 0.15)",
+          orgh2: "#c54f72" /* Darker shade of light pink */,
+          orgh3: "#d47c50" /* Darker shade of peach */,
+          orgh4: "#cf9f6d" /* Muted pale yellow */,
+          orgh5: "#77b28c" /* Darker shade of light green */,
+          orgh6: "#5691c8" /* Darker shade of sky blue */,
        },
        darkMode: {
-          light: "#282a36", // background color
-          lightgray: "#44475a", // current line
-          gray: "#6272a4", // comment
-          darkgray: "#f8f8f2", // foreground text
-          dark: "#f8f8f2", // selection background
-          secondary: "#bd93f9", // purple
-          tertiary: "#ff79c6", // pink
-          highlight: "rgba(98, 114, 164, 0.15)", // subtle highlight
+          light: "#1e1e2e", // background color (base)
+          lightgray: "#313244", // current line (surface0)
+          gray: "#6272a4", // comment (overlay0)
+          darkgray: "#f8f8f2", // foreground text (text)
+          dark: "#f8f8f2", // selection background (surface2)
+          secondary: "#cba6f7", // purple (mauve)
+          tertiary: "#f5c2e7", // pink (pink)
+          highlight: "rgba(108, 112, 134, 0.15)", // subtle highlight (based on overlay0)
+          orgh2: "#f38ba8" /* Light pink */,
+          orgh3: "#f4af84" /* Peach */,
+          orgh4: "#f9e2af" /* Pale yellow */,
+          orgh5: "#a6e3a1" /* Light green */,
+          orgh6: "#74c7ec" /* Sky blue */,
        },
      },
    },
  },
  plugins: {
    transformers: [
+      // Transformations
      Plugin.FrontMatter(),
      Plugin.CreatedModifiedDate({
        priority: ["frontmatter", "filesystem"],
@ -63,19 +75,34 @@ const config: QuartzConfig = {
        },
        keepBackground: false,
      }),
-      Plugin.OxHugoFlavouredMarkdown(),
-      Plugin.GitHubFlavoredMarkdown(),
-      Plugin.TableOfContents({ showByDefault: true, collapseByDefault: false, maxDepth: 5 }),
+      Plugin.TableOfContents({
+        showByDefault: true,
+        collapseByDefault: false,
+        maxDepth: 6,
+        minEntries: 2,
+      }),
+      Plugin.OxHugoFlavouredMarkdown({
+        removePredefinedAnchor: true,
+        anchorTransformation: false,
+      }),
+      Plugin.ObsidianFlavoredMarkdown(),
+      Plugin.GitHubFlavoredMarkdown({
+        enableSmartyPants: true,
+        linkHeadings: true,
+      }),
      Plugin.CrawlLinks({
-        markdownLinkResolution: "absolute",
        openLinksInNewTab: true,
-        lazyLoad: true,
+        lazyLoad: false,
      }),
      Plugin.Description(),
      Plugin.Latex({ renderEngine: "katex" }),
    ],
-    filters: [Plugin.RemoveDrafts()],
+    filters: [
+      // Filters
+      Plugin.RemoveDrafts(),
+    ],
    emitters: [
+      // Emitters
      Plugin.AliasRedirects(),
      Plugin.ComponentResources(),
      Plugin.ContentPage(),
--- a/quartz.layout.ts
+++ b/quartz.layout.ts
@ -1,5 +1,6 @@
 import { PageLayout, SharedLayout } from "./quartz/cfg"
 import * as Component from "./quartz/components"
+import { mapFn, sortFn } from "./functions.ts"

 // components shared across all pages
 export const sharedPageComponents: SharedLayout = {
@ -32,57 +33,8 @@ export const defaultContentPageLayout: PageLayout = {
    Component.Darkmode(),
    Component.DesktopOnly(
      Component.Explorer({
-        mapFn: (node) => {
-          // Don't change name of root node
-          node.displayName = node.displayName.toLowerCase()
-          if (node.depth > 0) {
-            // Set emoji for file/folder
-            if (node.file) {
-              node.displayName = "📄 " + node.displayName
-            } else {
-              node.displayName = "📁 " + node.displayName
-            }
-          }
-        },
-        sortFn: (a, b) => {
-          // Function to check if a file name is in date format (YYYY-MM-DD)
-          const isDateFormatted = (name: string): boolean => /^\d{4}-\d{2}-\d{2}/.test(name)
-
-          // Extract date from filename if it's date-formatted
-          const getDate = (name: string): Date | null => {
-            const match = name.match(/^(\d{4})-(\d{2})-(\d{2})/)
-            return match
-              ? new Date(parseInt(match[1]), parseInt(match[2]) - 1, parseInt(match[3]))
-              : null
-          }
-
-          // If both items are date-formatted, sort by date in descending order
-          if (isDateFormatted(a.name) && isDateFormatted(b.name)) {
-            const dateA = getDate(a.name)
-            const dateB = getDate(b.name)
-            if (dateA && dateB) {
-              return dateB.getTime() - dateA.getTime()
-            }
-          }
-
-          // For folders, sort by name in ascending order
-          if (!a.file && !b.file) {
-            return a.name.localeCompare(b.name, undefined, {
-              numeric: true,
-              sensitivity: "base",
-            })
-          }
-
-          // Files come after folders
-          if (a.file && !b.file) return 1
-          if (!a.file && b.file) return -1
-
-          // For non-date files, sort by name in ascending order
-          return a.name.localeCompare(b.name, undefined, {
-            numeric: true,
-            sensitivity: "base",
-          })
-        },
+        mapFn: mapFn,
+        sortFn: sortFn,
      }),
    ),
  ],
@ -101,7 +53,12 @@ export const defaultListPageLayout: PageLayout = {
    Component.MobileOnly(Component.Spacer()),
    Component.Search(),
    Component.Darkmode(),
-    Component.DesktopOnly(Component.Explorer()),
+    Component.DesktopOnly(
+      Component.Explorer({
+        mapFn: mapFn,
+        sortFn: sortFn,
+      }),
+    ),
  ],
  right: [],
 }
--- a/quartz/plugins/transformers/customslug.ts
+++ b/quartz/plugins/transformers/customslug.ts
@ -0,0 +1,56 @@
+import { Root, Element, Text } from "hast"
+import { Plugin } from "unified"
+import { VFile } from "vfile"
+
+export function generateSlug(node: Element, slugs: Map<string, number>): string {
+  let text = ""
+  const traverse = (n: Element | Text) => {
+    if (n.type === "text") {
+      text += n.value
+    } else if (n.type === "element" && n.tagName !== "span") {
+      n.children.forEach((child) => {
+        if (child.type === "element" || child.type === "text") {
+          traverse(child)
+        }
+      })
+    }
+  }
+  node.children.forEach((child) => {
+    if (child.type === "element" || child.type === "text") {
+      traverse(child)
+    }
+  })
+
+  let slug = text
+    .toLowerCase()
+    .replace(/\s+/g, "-")
+    .replace(/[^\w-]+/g, "")
+    .replace(/^-+|-+$/g, "")
+  const count = slugs.get(slug) || 0
+  slugs.set(slug, count + 1)
+  return count ? `${slug}-${count}` : slug
+}
+
+const customRehypeSlugWrapper: Plugin<[Root], Root> = function () {
+  return function (tree: Root, _file: VFile) {
+    const slugs = new Map<string, number>()
+
+    function processNode(node: Element | Text): void {
+      if (node.type === "element" && /^h[1-6]$/.test(node.tagName)) {
+        node.properties = node.properties || {}
+        node.properties.id = generateSlug(node, slugs)
+      }
+      if ("children" in node) {
+        node.children.forEach((child) => {
+          if (child.type === "element" || child.type === "text") {
+            processNode(child)
+          }
+        })
+      }
+    }
+
+    processNode(tree as any)
+  }
+}
+
+export default customRehypeSlugWrapper
--- a/quartz/plugins/transformers/gfm.ts
+++ b/quartz/plugins/transformers/gfm.ts
@ -3,6 +3,7 @@ import smartypants from "remark-smartypants"
 import { QuartzTransformerPlugin } from "../types"
 import rehypeSlug from "rehype-slug"
 import rehypeAutolinkHeadings from "rehype-autolink-headings"
+import customRehypeSlugWrapper from "./customslug"

 export interface Options {
  enableSmartyPants: boolean
@ -26,7 +27,7 @@ export const GitHubFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options> |
    htmlPlugins() {
      if (opts.linkHeadings) {
        return [
-          rehypeSlug,
+          customRehypeSlugWrapper,
          [
            rehypeAutolinkHeadings,
            {
--- a/quartz/plugins/transformers/oxhugofm.ts
+++ b/quartz/plugins/transformers/oxhugofm.ts
@ -9,9 +9,10 @@ export interface Options {
  removeHugoShortcode: boolean
  /** Replace <figure/> with ![]() */
  replaceFigureWithMdImg: boolean
-
  /** Replace org latex fragments with $ and $$ */
  replaceOrgLatex: boolean
+  /** Blah */
+  anchorTransformation: boolean
 }

 const defaultOptions: Options = {
@ -20,6 +21,7 @@ const defaultOptions: Options = {
  removeHugoShortcode: true,
  replaceFigureWithMdImg: true,
  replaceOrgLatex: true,
+  anchorTransformation: false,
 }

 const relrefRegex = new RegExp(/\[([^\]]+)\]\(\{\{< relref "([^"]+)" >\}\}\)/, "g")
@ -102,6 +104,19 @@ export const OxHugoFlavouredMarkdown: QuartzTransformerPlugin<Partial<Options> |
          return value.replaceAll("\\_", "_")
        })
      }
+
+      if (opts.anchorTransformation) {
+        const anchorRegex = /^(#{2,6})\s*(.+?)\s*\{#([\w-]+)\}\s*$/gm
+
+        src = src.toString()
+        src = src.replace(
+          anchorRegex,
+          (match: string, hashes: string, title: string, id: string) => {
+            const level = hashes.length
+            return `<h${level} id="${id}">${title}<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#${id}" class="internal">🔗</a></h${level}>`
+          },
+        )
+      }
      return src
    },
  }
--- a/quartz/plugins/transformers/toc.ts
+++ b/quartz/plugins/transformers/toc.ts
@ -3,6 +3,7 @@ import { Root } from "mdast"
 import { visit } from "unist-util-visit"
 import { toString } from "mdast-util-to-string"
 import Slugger from "github-slugger"
+import { Node } from "mdast"

 export interface Options {
  maxDepth: 1 | 2 | 3 | 4 | 5 | 6
@ -42,7 +43,30 @@ export const TableOfContents: QuartzTransformerPlugin<Partial<Options> | undefin
              let highestDepth: number = opts.maxDepth
              visit(tree, "heading", (node) => {
                if (node.depth <= opts.maxDepth) {
-                  const text = toString(node)
+                  let textContent = ""
+                  let htmlDepth = 0
+                  function handleNode(childNode: any) {
+                    //TODO: proper typing later, got annoyed
+                    if (childNode.type === "html") {
+                      if (childNode.value.includes("</")) {
+                        htmlDepth--
+                      } else if (childNode.value.includes("<")) {
+                        htmlDepth++
+                      }
+                    } else if (childNode.type === "text") {
+                      if (htmlDepth === 0) {
+                        textContent += childNode.value
+                      }
+                    } else if (childNode.type === "link" || childNode.type === "element") {
+                      childNode.children.forEach(handleNode)
+                    }
+                  }
+
+                  node.children.forEach(handleNode)
+
+                  const text = textContent.trim()
+
+                  // Adjust the depth calculations and TOC entry
                  highestDepth = Math.min(highestDepth, node.depth)
                  toc.push({
                    depth: node.depth,
--- a/quartz/styles/custom.scss
+++ b/quartz/styles/custom.scss
@ -1,3 +1,241 @@
@use "./base.scss";

 // put your custom CSS here!
+/* Org-Mode Tags */
+
+.org-todo {
+  display: inline-block;
+  padding: 0.1rem 0.5rem 0.1rem 0.5rem;
+  border-radius: 2px;
+  font-size: 1rem;
+  line-height: 1;
+  text-transform: uppercase;
+  font-weight: 600;
+  margin: 0 0.2rem 0 0.2rem;
+}
+
+.org-todo.todo.TODO, .org-todo.todo.IDEA {
+  background: #B9DC87;
+  color: #000000;
+}
+
+.org-todo.todo.PROJ {
+  background: #939ED2;
+  color: #000000;
+}
+
+.org-todo.todo.WAIT {
+  background: #F0C674;
+  color: #000000;
+}
+
+.org-todo.todo.STRT {
+  background: #F3935C;
+  color: #000000;
+  font-weight: 1000;
+}
+
+.org-todo.done.DONE {
+  background: #303132;
+  color: #FFFFFF;
+}
+
+.org-todo.done.KILL, .org-todo.done.NO {
+  background: #F07178;
+  color: #FFFFFF;
+}
+
+.tag {
+  float: right;
+  font-size: 12px;
+  color: var(--theme);
+}
+
+.tag::after {
+  content: ":";
+}
+
+.tag::before {
+  content: ":";
+}
+
+.tag span::before {
+  content: ":";
+}
+
+.tag span:first-child::before {
+  content: "";
+}
+
+.tag span::after {
+  content: "";
+}
+
+.toc span {
+  display: none;
+}
+
+/* Org - Timestamps */
+
+.timestamp-kwd {
+  color: var(--dark);
+  font-size: 0.8em;
+}
+
+p.timestamp-wrapper {
+  margin: 0;
+}
+
+.timestamp-kwd + .timestamp {
+  background-color: var(--theme);
+  color: var(--secondary);
+  font-size: 0.8em;
+}
+
+/* Org Mode Header Vibes */
+
+
+/* General styling for outline containers within .jvc */
+.jvc div.jvc {
+  margin-left: 5px;
+}
+
+.jvc ul {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.jvc h2 {
+  font-size: 1.5em;
+  padding-left: 0em;
+  color: var(--orgh2);
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+.jvc h2::before {
+  content: "○ ";
+}
+
+.jvc h3 {
+  font-size: 1.4em;
+  padding-left: 1em;
+  color: var(--orgh3);
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+.jvc h3::before {
+  content: "◆ ";
+}
+
+.jvc h4 {
+  font-size: 1.3em;
+  padding-left: 1.25em;
+  color: var(--orgh4);
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+.jvc h4::before {
+  content: "▲ ";
+}
+
+.jvc h5 {
+  font-size: 1.2em;
+  padding-left: 1.5em;
+  color: var(--orgh5);
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+.jvc h5::before {
+  content: "■ ";
+}
+
+.jvc h6 {
+  font-size: 1.1em;
+  padding-left: 2em;
+  color: var(--orgh6);
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.jvc h6::before {
+  content: "● ";
+}
+
+.jvc ul, .jvc ol {
+  list-style-position: outside; 
+  margin-left: 0px; 
+}
+
+.jvc li > p {
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+
+.jvc li > ul {
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+
+.jvc ul > li:first-child, .jvc ol > li:first-child {
+  margin-left: 15px; }
+
+.jvc ul.contains-task-list > li:first-child, 
+.jvc ol.contains-task-list > li:first-child {
+    margin-left: 0; /* Adjust as needed, maybe 0 or another value */
+  }
+
+.jvc .contains-task-list {
+  margin-left: 15px;
+}
+
+.jvc ul ul {
+  margin-left: -40px;
+}
+
+.outline-5 ul, .outline-5 ol {
+  margin-left: -15px; }
+
+.jvc > p {
+  padding-left: 2.25em;   
+  margin-top: 0.25em;
+  margin-bottom: 0.25em;
+}
+
+.jvc > li {
+  padding-left: 2em;
+}
+
+.jvc p::before {
+  content: "● ";   padding-right: 5px; }
+
+.jvc li p::before {
+  content: ''; }
+
+.outline-5 p::before {
+  content: "◆ ";   padding-right: 5px;   font-size: 10px;
+}
+
+.outline-5 ul p::before,
+.outline-5 ul ul p::before,
+.outline-5 ul ul ul p::before,
+.outline-5 ul ul ul ul p::before,
+.outline-5 ul ul ul ul ul p::before {
+  content: "◆ ";   font-size: 8px;
+  list-style-type: none; }
+
+.outline-5 li {
+  list-style-type: none; }
+
+/* EOF */
+
+article.popover-hint::after {
+  content: "— EOF —";
+  font-family: 'Courier New', monospace; /* Ensures a monospace font for stylistic consistency */
+  font-size: 0.9em;
+  color: #666;
+  margin-top: 1em;
+  display: block;
+  text-align: center;
+  padding-top: 0.5em;
+  padding-bottom: 1em; /* Adds a little space below the EOF marker */
+}
--- a/quartz/util/theme.ts
+++ b/quartz/util/theme.ts
@ -7,6 +7,11 @@ export interface ColorScheme {
  secondary: string
  tertiary: string
  highlight: string
+  orgh2: string
+  orgh3: string
+  orgh4: string
+  orgh5: string
+  orgh6: string
 }

 interface Colors {
@ -53,6 +58,12 @@ ${stylesheet.join("\n\n")}
  --headerFont: "${theme.typography.header}", ${DEFAULT_SANS_SERIF};
  --bodyFont: "${theme.typography.body}", ${DEFAULT_SANS_SERIF};
  --codeFont: "${theme.typography.code}", ${DEFAULT_MONO};
+
+  --orgh2: ${theme.colors.lightMode.orgh2};
+  --orgh3: ${theme.colors.lightMode.orgh3};
+  --orgh4: ${theme.colors.lightMode.orgh4};
+  --orgh5: ${theme.colors.lightMode.orgh5};
+  --orgh6: ${theme.colors.lightMode.orgh6};
 }

 :root[saved-theme="dark"] {
@ -64,6 +75,11 @@ ${stylesheet.join("\n\n")}
  --secondary: ${theme.colors.darkMode.secondary};
  --tertiary: ${theme.colors.darkMode.tertiary};
  --highlight: ${theme.colors.darkMode.highlight};
-}
+
+  --orgh2: ${theme.colors.darkMode.orgh2};
+  --orgh3: ${theme.colors.darkMode.orgh3};
+  --orgh4: ${theme.colors.darkMode.orgh4};
+  --orgh5: ${theme.colors.darkMode.orgh5};
+  --orgh6: ${theme.colors.darkMode.orgh6};
 `
 }
--- a/tsconfig.json
+++ b/tsconfig.json
@ -10,6 +10,8 @@
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",