feat: optional deep link to roam

not sure if this is actually useful..
8bitgentleman · Sep 10, 2024 · 07793cf · 07793cf
1 parent e63a814
commit 07793cf
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 10 deletions.
diff --git a/content/Experiment Small.md b/content/Experiment Small.md
@@ -2,6 +2,7 @@
 title: Experiment Small
 status: budding
 date: 2023-12-21
+uid: Rv0R2Nhh2
 tags:
     - writing
     - goals

diff --git a/package.json b/package.json
@@ -17,7 +17,8 @@
     "check": "tsc --noEmit && npx prettier . --check",
     "format": "npx prettier . --write",
     "test": "tsx ./quartz/util/path.test.ts && tsx ./quartz/depgraph.test.ts",
-    "profile": "0x -D prof ./quartz/bootstrap-cli.mjs build --concurrency=1"
+    "profile": "0x -D prof ./quartz/bootstrap-cli.mjs build --concurrency=1",
+    "serve": "npx quartz build --serve"
   },
   "engines": {
     "npm": ">=9.3.1",

diff --git a/quartz/components/ContentMeta.tsx b/quartz/components/ContentMeta.tsx
@@ -7,9 +7,6 @@ import { JSX } from "preact"
 import style from "./styles/contentMeta.scss"
 
 interface ContentMetaOptions {
-  /**
-   * Whether to display reading time
-   */
   showReadingTime: boolean
   showComma: boolean
 }
@@ -20,12 +17,12 @@ const defaultOptions: ContentMetaOptions = {
 }
 
 export default ((opts?: Partial<ContentMetaOptions>) => {
-  // Merge options with defaults
   const options: ContentMetaOptions = { ...defaultOptions, ...opts }
 
   function ContentMetadata({ cfg, fileData, displayClass }: QuartzComponentProps) {
     const text = fileData.text
     const status = fileData.frontmatter?.status
+    const uid = fileData.frontmatter?.uid
 
     if (text) {
       const segments: (string | JSX.Element)[] = []
@@ -34,14 +31,14 @@ export default ((opts?: Partial<ContentMetaOptions>) => {
         segments.push(formatDate(getDate(cfg, fileData)!, cfg.locale))
       }
 
-      // Display reading time if enabled
       if (options.showReadingTime) {
         const { minutes, words: _words } = readingTime(text)
         const displayedTime = i18n(cfg.locale).components.contentMeta.readingTime({
           minutes: Math.ceil(minutes),
         })
         segments.push(displayedTime)
       }
+
       if (status) {
         const linkDest = `../tags/${status}`
         const statusElement = (
@@ -55,12 +52,21 @@ export default ((opts?: Partial<ContentMetaOptions>) => {
         )
         segments.push(statusElement)
       }
+
       const segmentsElements = segments.map((segment) => <span>{segment}</span>)
 
       return (
-        <p show-comma={options.showComma} class={classNames(displayClass, "content-meta")}>
-          {segmentsElements}
-        </p>
+          <p show-comma={options.showComma} class={classNames(displayClass, "content-meta")}>
+            {segmentsElements}
+            {uid && (
+            <a href={`roam://#/app/MattVogel/page/${uid}`} className="edit-icon" title="Edit in Roam" target="_blank" rel="noopener noreferrer">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
+                <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
+              </svg>
+            </a>
+          )}
+          </p>
       )
     } else {
       return null
@@ -70,4 +76,4 @@ export default ((opts?: Partial<ContentMetaOptions>) => {
   ContentMetadata.css = style
 
   return ContentMetadata
-}) satisfies QuartzComponentConstructor
+}) satisfies QuartzComponentConstructor
diff --git a/quartz/components/styles/contentMeta.scss b/quartz/components/styles/contentMeta.scss
@@ -12,3 +12,24 @@
     }
   }
 }
+
+.edit-icon {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-right: 10px;
+  color: var(--gray);
+  flex-shrink: 0;
+
+  svg {
+    width: 18px;
+    height: 18px;
+  }
+}
+
+.content-meta:hover .edit-icon {
+  opacity: 1;
+}
+
+.edit-icon:hover {
+  color: var(--secondary);
+}