plugins: add float image syntax

quartz.config.ts

@@ -57,6 +57,7 @@ const config: QuartzConfig = {
   },
   plugins: {
     transformers: [
+      Plugin.FloatImages(),
       Plugin.FrontMatter(),
       Plugin.CreatedModifiedDate({
         priority: ["frontmatter", "git", "filesystem"],

quartz/plugins/transformers/float-images.ts

@@ -0,0 +1,36 @@
+/*
+my own custom syntax to do floating inline images
+*/
+
+import { QuartzTransformerPlugin } from "../types"
+
+export const FloatImages: QuartzTransformerPlugin = () => {
+  return {
+    name: "float-images",
+    textTransform: (_, src) => {
+      /*
+        my syntax is based on the wiki style
+        ![[https://example.com/image.png]]{float-left}
+        ![[https://example.com/image.png]]{float-right 40%}
+        percentage is optional, default is 40%
+        */
+
+      const regex = /!\[\[([^\]]+)\]\]\{(float-left|float-right)(?:\s+(\d+)%?)?\}/g
+      return src.replace(regex, (_, src, float, width) => {
+        width = width || "40" // default
+        const direction = float === "float-left" ? "left" : "right"
+        const margin = float === "float-left" ? "0 2rem 0 0" : "0 0 0 2rem"
+
+        // TODO YOU CAN MAKE THIS BETTER BY USING AND NOT INLINE STYLES
+
+        // do NOT try to tab align the following code, otherwise it renders as code instead of html parse
+        return `
+<div class="floating-image" style="float: ${direction}; margin: ${margin}; max-width: ${width}%;">
+    <img style="margin: 0;" src=${src}>
+    <img style="margin: 0;" src=${src}>
+</div>
+        `
+      })
+    },
+  }
+}

quartz/plugins/transformers/index.ts

@@ -11,3 +11,4 @@ export { SyntaxHighlighting } from "./syntax"
 export { TableOfContents } from "./toc"
 export { HardLineBreaks } from "./linebreaks"
 export { RoamFlavoredMarkdown } from "./roam"
+export { FloatImages } from "./float-images"