From 3dfcdcea01a63fb003fde49c2f5b74ba6c8ce4b3 Mon Sep 17 00:00:00 2001
From: Lisandra-dev <mara-li@outlook.fr>
Date: Sat, 9 Mar 2024 10:15:17 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=84=20synced=20local=20'quartz/'=20wit?=
 =?UTF-8?q?h=20remote=20'quartz/'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 quartz/cfg.ts                                 |   6 +
 quartz/components/Graph.tsx                   |   3 +
 quartz/components/PageList.tsx                |   2 +-
 quartz/components/RecentNotes.tsx             |   2 +-
 quartz/components/TagList.tsx                 |   3 +-
 quartz/components/pages/TagContent.tsx        |   2 +-
 quartz/components/renderPage.tsx              |  24 ++--
 quartz/components/scripts/graph.inline.ts     |  29 +++-
 quartz/plugins/emitters/componentResources.ts |   9 ++
 quartz/plugins/emitters/tagPage.tsx           |   2 +-
 quartz/plugins/transformers/description.ts    |  52 +++++--
 quartz/plugins/transformers/frontmatter.ts    |   1 +
 quartz/plugins/transformers/ofm.ts            | 129 ++++++++++--------
 quartz/styles/base.scss                       |   5 +
 14 files changed, 180 insertions(+), 89 deletions(-)

diff --git a/quartz/cfg.ts b/quartz/cfg.ts
index 45c0409b5797d..51dc20d4423b8 100644
--- a/quartz/cfg.ts
+++ b/quartz/cfg.ts
@@ -19,6 +19,12 @@ export type Analytics =
       websiteId: string
       host?: string
     }
+  | {
+      provider: "goatcounter"
+      websiteId: string
+      host?: string
+      scriptSrc?: string
+    }
 
 export interface GlobalConfiguration {
   pageTitle: string
diff --git a/quartz/components/Graph.tsx b/quartz/components/Graph.tsx
index 40ab43a2d6c99..f7ebcc9a2676f 100644
--- a/quartz/components/Graph.tsx
+++ b/quartz/components/Graph.tsx
@@ -17,6 +17,7 @@ export interface D3Config {
   opacityScale: number
   removeTags: string[]
   showTags: boolean
+  focusOnHover?: boolean
 }
 
 interface GraphOptions {
@@ -37,6 +38,7 @@ const defaultOptions: GraphOptions = {
     opacityScale: 1,
     showTags: true,
     removeTags: [],
+    focusOnHover: false,
   },
   globalGraph: {
     drag: true,
@@ -50,6 +52,7 @@ const defaultOptions: GraphOptions = {
     opacityScale: 1,
     showTags: true,
     removeTags: [],
+    focusOnHover: true,
   },
 }
 
diff --git a/quartz/components/PageList.tsx b/quartz/components/PageList.tsx
index 96ea55ae17466..b086b89a503ad 100644
--- a/quartz/components/PageList.tsx
+++ b/quartz/components/PageList.tsx
@@ -63,7 +63,7 @@ export const PageList: QuartzComponent = ({ cfg, fileData, allFiles, limit }: Pr
 											class="internal tag-link"
 											href={resolveRelative(fileData.slug!, `tags/${tag}` as FullSlug)}
 										>
-                      #{tag}
+											{tag}
 										</a>
 									</li>
 								))}
diff --git a/quartz/components/RecentNotes.tsx b/quartz/components/RecentNotes.tsx
index 549b025d33683..d99878db9b5e0 100644
--- a/quartz/components/RecentNotes.tsx
+++ b/quartz/components/RecentNotes.tsx
@@ -63,7 +63,7 @@ export default ((userOpts?: Partial<Options>) => {
                           class="internal tag-link"
                           href={resolveRelative(fileData.slug!, `tags/${tag}` as FullSlug)}
                         >
-                          #{tag}
+                          {tag}
                         </a>
                       </li>
                     ))}
diff --git a/quartz/components/TagList.tsx b/quartz/components/TagList.tsx
index 04a483b6c39b9..ba48098bd6426 100644
--- a/quartz/components/TagList.tsx
+++ b/quartz/components/TagList.tsx
@@ -9,12 +9,11 @@ const TagList: QuartzComponent = ({ fileData, displayClass }: QuartzComponentPro
     return (
       <ul class={classNames(displayClass, "tags")}>
         {tags.map((tag) => {
-          const display = `#${tag}`
           const linkDest = baseDir + `/tags/${slugTag(tag)}`
           return (
             <li>
               <a href={linkDest} class="internal tag-link">
-                {display}
+                {tag}
               </a>
             </li>
           )
diff --git a/quartz/components/pages/TagContent.tsx b/quartz/components/pages/TagContent.tsx
index 5891ee5391348..eb1c1ed025315 100644
--- a/quartz/components/pages/TagContent.tsx
+++ b/quartz/components/pages/TagContent.tsx
@@ -59,7 +59,7 @@ const TagContent: QuartzComponent = (props: QuartzComponentProps) => {
 							<div>
 								<h2>
 									<a class="internal tag-link" href={`../tags/${tag}`}>
-										#{tag}
+										{tag}
 									</a>
 								</h2>
 								{content && <p>{content}</p>}
diff --git a/quartz/components/renderPage.tsx b/quartz/components/renderPage.tsx
index 5394d6f4c91f9..0c18544483ea5 100644
--- a/quartz/components/renderPage.tsx
+++ b/quartz/components/renderPage.tsx
@@ -19,6 +19,7 @@ interface RenderComponents {
   footer: QuartzComponent
 }
 
+const headerRegex = new RegExp(/h[1-6]/)
 export function pageResources(
   baseDir: FullSlug | RelativeURL,
   staticResources: StaticResources,
@@ -105,18 +106,23 @@ export function renderPage(
           // header transclude
           blockRef = blockRef.slice(1)
           let startIdx = undefined
+          let startDepth = undefined
           let endIdx = undefined
           for (const [i, el] of page.htmlAst.children.entries()) {
-            if (el.type === "element" && el.tagName.match(/h[1-6]/)) {
-              if (endIdx) {
-                break
-              }
-
-              if (startIdx !== undefined) {
-                endIdx = i
-              } else if (el.properties?.id === blockRef) {
+            // skip non-headers
+            if (!(el.type === "element" && el.tagName.match(headerRegex))) continue
+            const depth = Number(el.tagName.substring(1))
+
+            // lookin for our blockref
+            if (startIdx === undefined || startDepth === undefined) {
+              // skip until we find the blockref that matches
+              if (el.properties?.id === blockRef) {
                 startIdx = i
+                startDepth = Number(el.tagName.substring(1))
               }
+            } else if (depth <= startDepth) {
+              // looking for new header that is same level or higher
+              endIdx = i
             }
           }
 
@@ -203,7 +209,7 @@ export function renderPage(
     </div>
   )
 
-  const lang = componentData.frontmatter?.lang ?? cfg.locale?.split("-")[0] ?? "en"
+  const lang = componentData.fileData.frontmatter?.lang ?? cfg.locale?.split("-")[0] ?? "en"
   const doc = (
     <html lang={lang}>
       <Head {...componentData} />
diff --git a/quartz/components/scripts/graph.inline.ts b/quartz/components/scripts/graph.inline.ts
index c8bc2b8dd4296..7e2858a08b514 100644
--- a/quartz/components/scripts/graph.inline.ts
+++ b/quartz/components/scripts/graph.inline.ts
@@ -45,6 +45,7 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
 		opacityScale,
 		removeTags,
 		showTags,
+		focusOnHover,
 	} = JSON.parse(graph.dataset["cfg"]!);
 
 	const data: Map<SimpleSlug, ContentDetails> = new Map(
@@ -190,6 +191,8 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
 		return 2 + Math.sqrt(numLinks);
 	}
 
+	let connectedNodes: SimpleSlug[] = [];
+
 	// draw individual nodes
 	const node = graphNode
 		.append("circle")
@@ -203,17 +206,25 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
 			window.spaNavigate(new URL(targ, window.location.toString()));
 		})
 		.on("mouseover", function (_, d) {
-			const neighbours: SimpleSlug[] = data.get(slug)?.links ?? [];
-			const neighbourNodes = d3
-				.selectAll<HTMLElement, NodeData>(".node")
-				.filter((d) => neighbours.includes(d.id));
 			const currentId = d.id;
 			const linkNodes = d3
 				.selectAll(".link")
 				.filter((d: any) => d.source.id === currentId || d.target.id === currentId);
 
-			// highlight neighbour nodes
-			neighbourNodes.transition().duration(200).attr("fill", color);
+			if (focusOnHover) {
+				// fade out non-neighbour nodes
+				connectedNodes = linkNodes.data().flatMap((d: any) => [d.source.id, d.target.id]);
+
+				d3.selectAll<HTMLElement, NodeData>(".link")
+					.transition()
+					.duration(200)
+					.style("opacity", 0.2);
+				d3.selectAll<HTMLElement, NodeData>(".node")
+					.filter((d) => !connectedNodes.includes(d.id))
+					.transition()
+					.duration(200)
+					.style("opacity", 0.2);
+			}
 
 			// highlight links
 			linkNodes.transition().duration(200).attr("stroke", "var(--gray)").attr("stroke-width", 1);
@@ -232,6 +243,10 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
 				.style("font-size", bigFont + "em");
 		})
 		.on("mouseleave", function (_, d) {
+			if (focusOnHover) {
+				d3.selectAll<HTMLElement, NodeData>(".link").transition().duration(200).style("opacity", 1);
+				d3.selectAll<HTMLElement, NodeData>(".node").transition().duration(200).style("opacity", 1);
+			}
 			const currentId = d.id;
 			const linkNodes = d3
 				.selectAll(".link")
@@ -328,4 +343,4 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
 	const containerIcon = document.getElementById("global-graph-icon");
 	containerIcon?.addEventListener("click", renderGlobalGraph);
 	window.addCleanup(() => containerIcon?.removeEventListener("click", renderGlobalGraph));
-});
+});
\ No newline at end of file
diff --git a/quartz/plugins/emitters/componentResources.ts b/quartz/plugins/emitters/componentResources.ts
index 75c2a7a720647..6abc881db146f 100644
--- a/quartz/plugins/emitters/componentResources.ts
+++ b/quartz/plugins/emitters/componentResources.ts
@@ -125,6 +125,15 @@ function addGlobalPageResources(
       umamiScript.async = true
 
       document.head.appendChild(umamiScript)
+    `);
+	} else if (cfg.analytics?.provider === "goatcounter") {
+		componentResources.afterDOMLoaded.push(`
+      const goatcounterScript = document.createElement("script")
+      goatcounterScript.src = "${cfg.analytics.scriptSrc ?? "https://gc.zgo.at/count.js"}"
+      goatcounterScript.async = true
+      goatcounterScript.setAttribute("data-goatcounter",
+        "https://${cfg.analytics.websiteId}.${cfg.analytics.host ?? "goatcounter.com"}/count")
+      document.head.appendChild(goatcounterScript)
     `);
 	}
 
diff --git a/quartz/plugins/emitters/tagPage.tsx b/quartz/plugins/emitters/tagPage.tsx
index 6f65ae477db8c..d88d0722aab9d 100644
--- a/quartz/plugins/emitters/tagPage.tsx
+++ b/quartz/plugins/emitters/tagPage.tsx
@@ -73,7 +73,7 @@ export const TagPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpts)
           const title =
             tag === "index"
               ? i18n(cfg.locale).pages.tagContent.tagIndex
-              : `${i18n(cfg.locale).pages.tagContent.tag}: #${tag}`
+              : `${i18n(cfg.locale).pages.tagContent.tag}: ${tag}`
           return [
             tag,
             defaultProcessedContent({
diff --git a/quartz/plugins/transformers/description.ts b/quartz/plugins/transformers/description.ts
index 2531c2c06b222..684bc8d7534de 100644
--- a/quartz/plugins/transformers/description.ts
+++ b/quartz/plugins/transformers/description.ts
@@ -6,12 +6,19 @@ import { QuartzTransformerPlugin } from "../types";
 
 export interface Options {
   descriptionLength: number
+  replaceExternalLinks: boolean
 }
 
 const defaultOptions: Options = {
 	descriptionLength: 150,
+	replaceExternalLinks: true,
 };
 
+const urlRegex = new RegExp(
+	/(https?:\/\/)?(?<domain>([\da-z\.-]+)\.([a-z\.]{2,6})(:\d+)?)(?<path>[\/\w\.-]*)(\?[\/\w\.=&;-]*)?/,
+	"g",
+);
+
 export const Description: QuartzTransformerPlugin<Partial<Options> | undefined> = (userOpts) => {
 	const opts = { ...defaultOptions, ...userOpts };
 	return {
@@ -20,22 +27,45 @@ export const Description: QuartzTransformerPlugin<Partial<Options> | undefined>
 			return [
 				() => {
 					return async (tree: HTMLRoot, file) => {
-						const frontMatterDescription = file.data.frontmatter?.description;
-						const text = escapeHTML(toString(tree));
+						let frontMatterDescription = file.data.frontmatter?.description;
+						let text = escapeHTML(toString(tree));
+
+						if (opts.replaceExternalLinks) {
+							frontMatterDescription = frontMatterDescription?.replace(
+								urlRegex,
+								"$<domain>" + "$<path>",
+							);
+							text = text.replace(urlRegex, "$<domain>" + "$<path>");
+						}
 
 						const desc = frontMatterDescription ?? text;
-						const sentences = desc.replace(/\s+/g, " ").split(".");
-						let finalDesc = "";
-						let sentenceIdx = 0;
+						const sentences = desc.replace(/\s+/g, " ").split(/\.\s/);
+						const finalDesc: string[] = [];
 						const len = opts.descriptionLength;
-						while (finalDesc.length < len) {
-							const sentence = sentences[sentenceIdx];
-							if (!sentence) break;
-							finalDesc += sentence + ".";
-							sentenceIdx++;
+						let sentenceIdx = 0;
+						let currentDescriptionLength = 0;
+
+						if (sentences[0] !== undefined && sentences[0].length >= len) {
+							const firstSentence = sentences[0].split(" ");
+							while (currentDescriptionLength < len) {
+								const sentence = firstSentence[sentenceIdx];
+								if (!sentence) break;
+								finalDesc.push(sentence);
+								currentDescriptionLength += sentence.length;
+								sentenceIdx++;
+							}
+							finalDesc.push("...");
+						} else {
+							while (currentDescriptionLength < len) {
+								const sentence = sentences[sentenceIdx];
+								if (!sentence) break;
+								const currentSentence = sentence.endsWith(".") ? sentence : sentence + ".";
+								finalDesc.push(currentSentence);
+								currentDescriptionLength += currentSentence.length;
+							}
 						}
 
-						file.data.description = finalDesc;
+						file.data.description = finalDesc.join(" ");
 						file.data.text = text;
 					};
 				},
diff --git a/quartz/plugins/transformers/frontmatter.ts b/quartz/plugins/transformers/frontmatter.ts
index eda7accf3e9e0..dcf45e1e1f190 100644
--- a/quartz/plugins/transformers/frontmatter.ts
+++ b/quartz/plugins/transformers/frontmatter.ts
@@ -91,6 +91,7 @@ declare module "vfile" {
         description: string
         publish: boolean
         draft: boolean
+        lang: string
         enableToc: string
         cssclasses: string[]
 		order: number
diff --git a/quartz/plugins/transformers/ofm.ts b/quartz/plugins/transformers/ofm.ts
index 58367bb11c14e..e90374f7ba728 100644
--- a/quartz/plugins/transformers/ofm.ts
+++ b/quartz/plugins/transformers/ofm.ts
@@ -1,22 +1,23 @@
-import { QuartzTransformerPlugin } from "../types"
-import { Root, Html, BlockContent, DefinitionContent, Paragraph, Code } from "mdast"
-import { Element, Literal, Root as HtmlRoot } from "hast"
-import { ReplaceFunction, findAndReplace as mdastFindReplace } from "mdast-util-find-and-replace"
-import { slug as slugAnchor } from "github-slugger"
-import rehypeRaw from "rehype-raw"
-import { SKIP, visit } from "unist-util-visit"
-import path from "path"
-import { JSResource } from "../../util/resources"
+import { slug as slugAnchor } from "github-slugger";
+import { Element, Literal, Root as HtmlRoot } from "hast";
+import { toHtml } from "hast-util-to-html";
+import { BlockContent, Code,DefinitionContent, Html, Paragraph, Root } from "mdast";
+import { findAndReplace as mdastFindReplace,ReplaceFunction } from "mdast-util-find-and-replace";
+import { PhrasingContent } from "mdast-util-find-and-replace/lib";
+import { toHast } from "mdast-util-to-hast";
+import path from "path";
+import rehypeRaw from "rehype-raw";
+import { PluggableList } from "unified";
+import { SKIP, visit } from "unist-util-visit";
+
 // @ts-ignore
 import calloutScript from "../../components/scripts/callout.inline.ts";
 // @ts-ignore
-import checkboxScript from "../../components/scripts/checkbox.inline.ts"
-import { FilePath, pathToRoot, slugTag, slugifyFilePath } from "../../util/path"
-import { toHast } from "mdast-util-to-hast"
-import { toHtml } from "hast-util-to-html"
-import { PhrasingContent } from "mdast-util-find-and-replace/lib"
-import { capitalize } from "../../util/lang"
-import { PluggableList } from "unified"
+import checkboxScript from "../../components/scripts/checkbox.inline.ts";
+import { capitalize } from "../../util/lang";
+import { FilePath, pathToRoot, slugifyFilePath,slugTag } from "../../util/path";
+import { JSResource } from "../../util/resources";
+import { QuartzTransformerPlugin } from "../types";
 
 export interface Options {
   comments: boolean
@@ -123,6 +124,7 @@ const tagRegex = new RegExp(
 );
 const blockReferenceRegex = new RegExp(/\^([-_A-Za-z0-9]+)$/, "g");
 const ytLinkRegex = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
+const ytPlaylistLinkRegex = /[?&]list=([^#?&]*)/;
 const videoExtensionRegex = new RegExp(/\.(mp4|webm|ogg|avi|mov|flv|wmv|mkv|mpg|mpeg|3gp|m4v)$/);
 const wikilinkImageEmbedRegex = new RegExp(
 	/^(?<alt>(?!^\d*x?\d*$).*?)?(\|?\s*?(?<width>\d+)(x(?<height>\d+))?)?$/,
@@ -327,7 +329,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
 									children: [
 										{
 											type: "text",
-											value: `#${tag}`,
+											value: tag,
 										},
 									],
 								};
@@ -527,45 +529,45 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
 										last.value = last.value.slice(0, -matches[0].length);
 										const block = matches[0].slice(1);
 
-                    if (last.value === "") {
-                      // this is an inline block ref but the actual block
-                      // is the previous element above it
-                      let idx = (index ?? 1) - 1
-                      while (idx >= 0) {
-                        const element = parent?.children.at(idx)
-                        if (!element) break
-                        if (element.type !== "element") {
-                          idx -= 1
-                        } else {
-                          if (!Object.keys(file.data.blocks!).includes(block)) {
-                            element.properties = {
-                              ...element.properties,
-                              id: block,
-                            }
-                            file.data.blocks![block] = element
-                          }
-                          return
-                        }
-                      }
-                    } else {
-                      // normal paragraph transclude
-                      if (!Object.keys(file.data.blocks!).includes(block)) {
-                        node.properties = {
-                          ...node.properties,
-                          id: block,
-                        }
-                        file.data.blocks![block] = node
-                      }
-                    }
-                  }
-                }
-              }
-            })
+										if (last.value === "") {
+											// this is an inline block ref but the actual block
+											// is the previous element above it
+											let idx = (index ?? 1) - 1;
+											while (idx >= 0) {
+												const element = parent?.children.at(idx);
+												if (!element) break;
+												if (element.type !== "element") {
+													idx -= 1;
+												} else {
+													if (!Object.keys(file.data.blocks!).includes(block)) {
+														element.properties = {
+															...element.properties,
+															id: block,
+														};
+                            file.data.blocks![block] = element;
+													}
+													return;
+												}
+											}
+										} else {
+											// normal paragraph transclude
+											if (!Object.keys(file.data.blocks!).includes(block)) {
+												node.properties = {
+													...node.properties,
+													id: block,
+												};
+                        file.data.blocks![block] = node;
+											}
+										}
+									}
+								}
+							}
+						});
 
-            file.data.htmlAst = tree
-          }
-        })
-      }
+						file.data.htmlAst = tree;
+					};
+				});
+			}
 
 			if (opts.enableYouTubeEmbed) {
 				plugins.push(() => {
@@ -574,7 +576,22 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
 							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;
+								const playlistId = node.properties.src.match(ytPlaylistLinkRegex)?.[1];
 								if (videoId) {
+									// YouTube video (with optional playlist)
+									node.tagName = "iframe";
+									node.properties = {
+										class: "external-embed",
+										allow: "fullscreen",
+										frameborder: 0,
+										width: "600px",
+										height: "350px",
+										src: playlistId
+											? `https://www.youtube.com/embed/${videoId}?list=${playlistId}`
+											: `https://www.youtube.com/embed/${videoId}`,
+									};
+								} else if (playlistId) {
+									// YouTube playlist only.
 									node.tagName = "iframe";
 									node.properties = {
 										class: "external-embed",
@@ -582,7 +599,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
 										frameborder: 0,
 										width: "600px",
 										height: "350px",
-										src: `https://www.youtube.com/embed/${videoId}`,
+										src: `https://www.youtube.com/embed/videoseries?list=${playlistId}`,
 									};
 								}
 							}
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index a74e8b0459c6d..26e16de4db97e 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -79,6 +79,11 @@ a {
       border-radius: 0;
       padding: 0;
     }
+    &.tag-link {
+      &::before {
+        content: "#";
+      }
+    }
   }
 
   &.external .external-icon {