Merge branch 'jackyzha0:v4' into v4

gianpispi · Jan 6, 2024 · 96bd766 · 96bd766
2 parents cb26baf + 5ccc48a
commit 96bd766
Show file tree

Hide file tree

Showing 12 changed files with 72 additions and 16 deletions.
diff --git a/docs/features/Obsidian compatibility.md b/docs/features/Obsidian compatibility.md
@@ -26,6 +26,7 @@ Finally, Quartz also provides `Plugin.CrawlLinks` which allows you to customize
     - `mermaid`: whether to enable [[Mermaid diagrams]]. Defaults to `true`
     - `parseTags`: whether to try and parse tags in the content body. Defaults to `true`
     - `enableInHtmlEmbed`: whether to try and parse Obsidian flavoured markdown in raw HTML. Defaults to `false`
+    - `enableYouTubeEmbed`: whether to enable embedded YouTube videos using external image Markdown syntax. Defaults to `false`
 - Link resolution behaviour:
   - Disabling: remove all instances of `Plugin.CrawlLinks()` from `quartz.config.ts`
   - Changing link resolution preference: set `markdownLinkResolution` to one of `absolute`, `relative` or `shortest`
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "@jackyzha0/quartz",
   "description": "🌱 publish your digital garden and notes as a website",
   "private": true,
-  "version": "4.1.3",
+  "version": "4.1.4",
   "type": "module",
   "author": "jackyzha0 <j.zhao2k19@gmail.com>",
   "license": "MIT",

diff --git a/quartz.layout.ts b/quartz.layout.ts
@@ -37,7 +37,7 @@ export const defaultContentPageLayout: PageLayout = {
 
 // components for pages that display lists of pages  (e.g. tags or folders)
 export const defaultListPageLayout: PageLayout = {
-  beforeBody: [Component.ArticleTitle()],
+  beforeBody: [Component.Breadcrumbs(), Component.ArticleTitle()],
   left: [
     Component.PageTitle(),
     Component.MobileOnly(Component.Spacer()),

diff --git a/quartz/cli/handlers.js b/quartz/cli/handlers.js
@@ -113,7 +113,10 @@ export async function handleCreate(argv) {
     }
   }
 
-  await fs.promises.unlink(path.join(contentFolder, ".gitkeep"))
+  const gitkeepPath = path.join(contentFolder, ".gitkeep")
+  if (fs.existsSync(gitkeepPath)) {
+    await fs.promises.unlink(gitkeepPath)
+  }
   if (setupStrategy === "copy" || setupStrategy === "symlink") {
     let originalFolder = sourceDirectory
 

diff --git a/quartz/components/Breadcrumbs.tsx b/quartz/components/Breadcrumbs.tsx
@@ -104,7 +104,7 @@ export default ((opts?: Partial<BreadcrumbOptions>) => {
       }
 
       // Add current file to crumb (can directly use frontmatter title)
-      if (options.showCurrentPage) {
+      if (options.showCurrentPage && slugParts.at(-1) === "") {
         crumbs.push({
           displayName: fileData.frontmatter!.title,
           path: "",

diff --git a/quartz/components/styles/explorer.scss b/quartz/components/styles/explorer.scss
@@ -126,7 +126,7 @@ svg {
   backface-visibility: visible;
 }
 
-div:has(> .folder-outer:not(.open)) > .folder-container > svg {
+li:has(> .folder-outer:not(.open)) > .folder-container > svg {
   transform: rotate(-90deg);
 }
 

diff --git a/quartz/plugins/filters/explicit.ts b/quartz/plugins/filters/explicit.ts
@@ -3,7 +3,11 @@ import { QuartzFilterPlugin } from "../types"
 export const ExplicitPublish: QuartzFilterPlugin = () => ({
   name: "ExplicitPublish",
   shouldPublish(_ctx, [_tree, vfile]) {
-    const publishFlag: boolean = vfile.data?.frontmatter?.publish ?? false
+    const publishProperty = vfile.data?.frontmatter?.publish ?? false
+    const publishFlag =
+      typeof publishProperty === "string"
+        ? publishProperty.toLowerCase() === "true"
+        : Boolean(publishProperty)
     return publishFlag
   },
 })
diff --git a/quartz/plugins/transformers/lastmod.ts b/quartz/plugins/transformers/lastmod.ts
@@ -57,10 +57,22 @@ export const CreatedModifiedDate: QuartzTransformerPlugin<Partial<Options> | und
                 published ||= file.data.frontmatter.publishDate
               } else if (source === "git") {
                 if (!repo) {
-                  repo = new Repository(file.cwd)
+                  // Get a reference to the main git repo.
+                  // It's either the same as the workdir,
+                  // or 1+ level higher in case of a submodule/subtree setup
+                  repo = Repository.discover(file.cwd)
                 }
 
-                modified ||= await repo.getFileLatestModifiedDateAsync(file.data.filePath!)
+                try {
+                  modified ||= await repo.getFileLatestModifiedDateAsync(file.data.filePath!)
+                } catch {
+                  console.log(
+                    chalk.yellow(
+                      `\nWarning: ${file.data
+                        .filePath!} isn't yet tracked by git, last modification date is not available for this file`,
+                    ),
+                  )
+                }
               }
             }
 

diff --git a/quartz/plugins/transformers/links.ts b/quartz/plugins/transformers/links.ts
@@ -12,19 +12,22 @@ import {
 import path from "path"
 import { visit } from "unist-util-visit"
 import isAbsoluteUrl from "is-absolute-url"
+import { Root } from "hast"
 
 interface Options {
   /** How to resolve Markdown paths */
   markdownLinkResolution: TransformOptions["strategy"]
   /** Strips folders from a link so that it looks nice */
   prettyLinks: boolean
   openLinksInNewTab: boolean
+  lazyLoad: boolean
 }
 
 const defaultOptions: Options = {
   markdownLinkResolution: "absolute",
   prettyLinks: true,
   openLinksInNewTab: false,
+  lazyLoad: false,
 }
 
 export const CrawlLinks: QuartzTransformerPlugin<Partial<Options> | undefined> = (userOpts) => {
@@ -34,7 +37,7 @@ export const CrawlLinks: QuartzTransformerPlugin<Partial<Options> | undefined> =
     htmlPlugins(ctx) {
       return [
         () => {
-          return (tree, file) => {
+          return (tree: Root, file) => {
             const curSlug = simplifySlug(file.data.slug!)
             const outgoing: Set<SimpleSlug> = new Set()
 
@@ -51,8 +54,8 @@ export const CrawlLinks: QuartzTransformerPlugin<Partial<Options> | undefined> =
                 typeof node.properties.href === "string"
               ) {
                 let dest = node.properties.href as RelativeURL
-                node.properties.className ??= []
-                node.properties.className.push(isAbsoluteUrl(dest) ? "external" : "internal")
+                const classes = (node.properties.className ?? []) as string[]
+                classes.push(isAbsoluteUrl(dest) ? "external" : "internal")
 
                 // Check if the link has alias text
                 if (
@@ -61,8 +64,9 @@ export const CrawlLinks: QuartzTransformerPlugin<Partial<Options> | undefined> =
                   node.children[0].value !== dest
                 ) {
                   // Add the 'alias' class if the text content is not the same as the href
-                  node.properties.className.push("alias")
+                  classes.push("alias")
                 }
+                node.properties.className = classes
 
                 if (opts.openLinksInNewTab) {
                   node.properties.target = "_blank"
@@ -111,6 +115,10 @@ export const CrawlLinks: QuartzTransformerPlugin<Partial<Options> | undefined> =
                 node.properties &&
                 typeof node.properties.src === "string"
               ) {
+                if (opts.lazyLoad) {
+                  node.properties.loading = "lazy"
+                }
+
                 if (!isAbsoluteUrl(node.properties.src)) {
                   let dest = node.properties.src as RelativeURL
                   dest = node.properties.src = transformLink(

diff --git a/quartz/plugins/transformers/ofm.ts b/quartz/plugins/transformers/ofm.ts
@@ -25,6 +25,7 @@ export interface Options {
   parseTags: boolean
   parseBlockReferences: boolean
   enableInHtmlEmbed: boolean
+  enableYouTubeEmbed: boolean
 }
 
 const defaultOptions: Options = {
@@ -36,6 +37,7 @@ const defaultOptions: Options = {
   parseTags: true,
   parseBlockReferences: true,
   enableInHtmlEmbed: false,
+  enableYouTubeEmbed: false,
 }
 
 const icons = {
@@ -125,8 +127,9 @@ const calloutLineRegex = new RegExp(/^> *\[\!\w+\][+-]?.*$/, "gm")
 // #(...)               -> capturing group, tag itself must start with #
 // (?:[-_\p{L}\d\p{Z}])+       -> non-capturing group, non-empty string of (Unicode-aware) alpha-numeric characters and symbols, hyphens and/or underscores
 // (?:\/[-_\p{L}\d\p{Z}]+)*)   -> non-capturing group, matches an arbitrary number of tag strings separated by "/"
-const tagRegex = new RegExp(/(?:^| )#((?:[-_\p{L}\d])+(?:\/[-_\p{L}\d]+)*)/, "gu")
+const tagRegex = new RegExp(/(?:^| )#((?:[-_\p{L}\p{Emoji}\d])+(?:\/[-_\p{L}\p{Emoji}\d]+)*)/, "gu")
 const blockReferenceRegex = new RegExp(/\^([A-Za-z0-9]+)$/, "g")
+const ytLinkRegex = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/
 
 export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options> | undefined> = (
   userOpts,
@@ -201,7 +204,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
                 if (value.startsWith("!")) {
                   const ext: string = path.extname(fp).toLowerCase()
                   const url = slugifyFilePath(fp as FilePath)
-                  if ([".png", ".jpg", ".jpeg", ".gif", ".bmp", ".svg"].includes(ext)) {
+                  if ([".png", ".jpg", ".jpeg", ".gif", ".bmp", ".svg", ".webp"].includes(ext)) {
                     const dims = alias ?? ""
                     let [width, height] = dims.split("x", 2)
                     width ||= "auto"
@@ -505,6 +508,30 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
         })
       }
 
+      if (opts.enableYouTubeEmbed) {
+        plugins.push(() => {
+          return (tree: HtmlRoot) => {
+            visit(tree, "element", (node) => {
+              if (node.tagName === "img" && typeof node.properties.src === "string") {
+                const match = node.properties.src.match(ytLinkRegex)
+                const videoId = match && match[2].length == 11 ? match[2] : null
+                if (videoId) {
+                  node.tagName = "iframe"
+                  node.properties = {
+                    class: "external-embed",
+                    allow: "fullscreen",
+                    frameborder: 0,
+                    width: "600px",
+                    height: "350px",
+                    src: `https://www.youtube.com/embed/${videoId}`,
+                  }
+                }
+              }
+            })
+          }
+        })
+      }
+
       return plugins
     },
     externalResources() {

diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
@@ -332,6 +332,7 @@ pre {
   border-radius: 5px;
   overflow-x: auto;
   border: 1px solid var(--lightgray);
+  position: relative;
 
   &:has(> code.mermaid) {
     border: none;