add history link to meta

quartz/cfg.ts

@@ -35,6 +35,7 @@ export interface GlobalConfiguration {
   /** Base URL to use for CNAME files, sitemaps, and RSS feeds that require an absolute URL.
    *   Quartz will avoid using this as much as possible and use relative URLs most of the time
    */
+  repoUrl?: string
   baseUrl?: string
   theme: Theme
   /**

quartz/components/ContentMeta.tsx

@@ -2,6 +2,7 @@ import { formatDate, getDate } from "./Date"
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import readingTime from "reading-time"
 import { classNames } from "../util/lang"
+import { JSX } from "preact/jsx-runtime"
 
 interface ContentMetaOptions {
   /**
@@ -20,23 +21,44 @@ export default ((opts?: Partial<ContentMetaOptions>) => {
 
   function ContentMetadata({ cfg, fileData, displayClass }: QuartzComponentProps) {
     const text = fileData.text
-
-    if (text) {
-      const segments: string[] = []
+    const filepath = fileData.filePath
+    if (text && filepath) {
+      const fileRepoUrl: string = `${cfg.repoUrl}/commits/branch/v4/${filepath}`
+      const segments: JSX.Element[] = []
+      // const segments: string[] = []
 
       if (fileData.dates?.created) {
-        segments.push('created: ' + formatDate(fileData.dates.created, cfg.locale))
+        segments.push(<span>created: {formatDate(fileData.dates.created, cfg.locale)}</span>)
       }
       if (fileData.dates?.modified) {
-        segments.push('last updated: ' + formatDate(fileData.dates.modified, cfg.locale))
+        segments.push(<span> updated: {formatDate(fileData.dates.modified, cfg.locale)}</span>)
       }
       // Display reading time if enabled
       if (options.showReadingTime) {
         const { text: timeTaken, words: _words } = readingTime(text)
-        segments.push(timeTaken)
+        segments.push(<span>{timeTaken}</span>)
       }
+      segments.push(
+        <a
+          href={fileRepoUrl}
+          class="external"
+          target="_blank"
+        >
+          view history
+          <svg class="external-icon" viewBox="0 0 512 512"><path d="M320 0H288V64h32 82.7L201.4 265.4 178.7 288 224 333.3l22.6-22.6L448 109.3V192v32h64V192 32 0H480 320zM32 32H0V64 480v32H32 456h32V480 352 320H424v32 96H64V96h96 32V32H160 32z"></path></svg>
+        </a>,
+      )
 
-      return <p class={classNames(displayClass, "content-meta")}>{segments.join(", ")}</p>
+
+      return (
+        <p class={classNames(displayClass, "content-meta")}>
+          {segments.map((meta, idx) => (
+            <>
+              {meta}
+            </>
+          ))}
+        </p>
+      )
     } else {
       return null
     }
@@ -47,6 +69,9 @@ export default ((opts?: Partial<ContentMetaOptions>) => {
     margin-top: 0;
     color: var(--gray);
   }
+  .content-meta span{
+    margin-right: 10px;
+  }
   `
   return ContentMetadata
 }) satisfies QuartzComponentConstructor