data/Custom Emojis in Quartz.md

tags
quartz

The Emojis I use here are from Mutant Standart, as seen in the Footer.

I host them in my own Minio Bucket though.

Surprisingly, Quartz doesn't actually have it's own Parser for the double colon (:laptop:) way of inserting Emojis, Obsidian does but because I'm embedding Images and not a Font, that doesn't do much for me while writing.

Once you've read through the Plugin Docs for Quartz, it gets easier to actually write Plugins for it, so I just wrote my own Text Transformer to hack Mutant Emojis in :expressions+smileys+halo:

import { findAndReplace } from "mdast-util-find-and-replace";
import { QuartzTransformerPlugin } from "../types";

export const MutantEmojis: QuartzTransformerPlugin = () => {
  return {
    name: "MutantEmojis",
    markdownPlugins() {
      return [() => {
        return (tree, file) => {
          findAndReplace(
            tree,
            [/:(.+):/, (_value: string, ...capture: string[]) => {
              const [inner] = capture;
              return {
                type: "html",
                value: `<img src="https://{s3Host}/{bucket}/${inner}.svg" class="markdown-emoji">`,
              };
            }],
          );
        };
      }];
    },
  };
};

I then just added markdown-emoji to my custom CSS and it works like a charm

.markdown-emoji {
  height: 1.3em;
  display: inline;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}

The way you then write your Emojis depends on your File Structure, all my Emojis live in a Single Dir, so I have to write them like :expressions+smileys+halo:. Since all this does is add whatever you put between the : to the URL, this is rather simple.

I do have an Internal mutant.md file that lists all possible emojis, though that is taken straight from their files