embeds

quartz/plugins/transformers/ofm.ts

@@ -5,6 +5,7 @@ import { findAndReplace } from "mdast-util-find-and-replace"
 import { slugify } from "../../path"
 import rehypeRaw from "rehype-raw"
 import { visit } from "unist-util-visit"
+import path from "path"
 
 export interface Options {
   highlight: boolean
@@ -111,22 +112,57 @@ export class ObsidianFlavoredMarkdown extends QuartzTransformerPlugin {
         const backlinkRegex = new RegExp(/!?\[\[([^\[\]\|\#]+)(#[^\[\]\|\#]+)?(\|[^\[\]\|\#]+)?\]\]/, "g")
         return (tree: Root, _file) => {
           findAndReplace(tree, backlinkRegex, (value: string, ...capture: string[]) => {
-            if (value.startsWith("!")) {
+            const [fp, rawHeader, rawAlias] = capture
-              // TODO: handle embeds
-            } else {
-              const [path, rawHeader, rawAlias] = capture
             const anchor = rawHeader?.trim() ?? ""
-              const alias = rawAlias?.slice(1).trim() ?? path
+            const alias = rawAlias?.slice(1).trim()
-              const url = slugify(path.trim() + anchor)
+
+            // embed cases
+            if (value.startsWith("!")) {
+              const ext = path.extname(fp).toLowerCase()
+              const url = slugify(fp.trim()) + ext
+              if ([".png", ".jpg", ".jpeg", ".gif", ".bmp", ".svg"].includes(ext)) {
+                const dims = alias ?? ""
+                let [width, height] = dims.split("x", 2)
+                width ||= "auto"
+                height ||= "auto"
+                return {
+                  type: 'image',
+                  url,
+                  data: {
+                    hProperties: {
+                      width, height
+                    }
+                  }
+                }
+              } else if ([".mp4", ".webm", ".ogv", ".mov", ".mkv"].includes(ext)) {
+                return {
+                  type: 'html',
+                  value: `<video src="${url}" controls></video>`
+                }
+              } else if ([".mp3", ".webm", ".wav", ".m4a", ".ogg", ".3gp", ".flac"].includes(ext)) {
+                return {
+                  type: 'html',
+                  value: `<audio src="${url}" controls></audio>`
+                }
+              } else if ([".pdf"].includes(ext)) {
+                return {
+                  type: 'html',
+                  value: `<iframe src="${url}"></iframe>`
+                }
+              }
+              // otherwise, fall through to regular link
+            }
+
+            // internal link
+            const url = slugify(fp.trim() + anchor)
             return {
               type: 'link',
               url,
               children: [{
                 type: 'text',
-                  value: alias
+                value: alias ?? fp
               }]
             }
-            }
           })
         }
       }

quartz/processors/parse.ts

@@ -92,7 +92,7 @@ export function createFileParser(baseDir: string, fps: string[], verbose: boolea
           console.log(`[process] ${fp} -> ${file.data.slug}`)
         }
       } catch (err) {
-        console.log(chalk.red(`Failed to process \`${fp}\`: `) + err)
+        console.log(chalk.red(`\nFailed to process \`${fp}\`: `) + err)
         process.exit(1)
       }
     }

quartz/styles/base.scss

@@ -219,3 +219,8 @@ section {
     padding: 0 1em
   }
 }
+
+audio, video {
+  width: 100%;
+  border-radius: 5px;
+}