embeds

Jacky Zhao

2023-06-06 89e0311a98732201651a6a6c1eea3e9656e28fb2

embeds

 quartz/plugins/transformers/ofm.ts

@@ -5,6 +5,7 @@
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 @@
        const backlinkRegex = new RegExp(/!?\[\[([^\[\]\|\#]+)(#[^\[\]\|\#]+)?(\|[^\[\]\|\#]+)?\]\]/, "g")
        return (tree: Root, _file) => {
          findAndReplace(tree, backlinkRegex, (value: string, ...capture: string[]) => {
            if (value.startsWith("!")) {
              // TODO: handle embeds
            } else {
              const [path, rawHeader, rawAlias] = capture
            const [fp, rawHeader, rawAlias] = capture
              const anchor = rawHeader?.trim() ?? ""
              const alias = rawAlias?.slice(1).trim() ?? path
              const url = slugify(path.trim() + anchor)
            const alias = rawAlias?.slice(1).trim()

            // 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 @@
          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 @@
    padding: 0 1em
  }
}

audio, video {
  width: 100%;
  border-radius: 5px;
}