Quartz Addons 🛠️

This section details the custom Quartz 5 addons and client-side architectural patches created for the OMP SSOT ecosystem.

Affine Embed Plugin

The Affine Embed plugin allows for frictionless integration of Affine workspaces directly inside markdown content.

Usage

To embed an Affine document, paste the standalone share link of the document on a new line by itself within your markdown file:

https://app.affine.pro/workspace/abcd-1234/xyz-890

Because it is standalone, the Remark AST parses it as a single link inside a paragraph. The local Quartz transformer plugin seamlessly swaps this out for a fully functional, rounded iframe with configurable width and height settings, preserving responsive markdown formatting.

Client-Side Emoji SVG Replacement

Due to Quartz 5’s architecture, elements such as the Explorer navigation tree are handled dynamically via client-side DOM template cloning. Standard HAST/Rehype plugins cannot mutate these nodes.

Architecture

To inject interactive SVG iconsets (like Lucide) in place of literal emojis, the system uses a dual-engine architecture:

1. Client-side Tree Patching (explorer.inline.ts): The native textContent replacement has been patched to use .innerHTML, delegating the conversion to a custom replaceEmojiWithSvg utility.
2. Server-side React Patching (ArticleTitle.tsx): The ArticleTitle component has been vendored and modified to leverage dangerouslySetInnerHTML.

Depth-Based Styling

The replaceEmojiWithSvg utility assigns a dynamic icon-depth-X class to the rendered SVG based on the structural depth of the node (e.g., how deep the file is inside folders). A corresponding CSS implementation provides opacity fading, tilt rotation, and scaling variations. Hovering over a file or title restores the SVG to its un-tilted, full-opacity state, providing an interactive and polished UI.