(notion note: want to have two columns under subpoint...)

Code Snippet used to get emoji to look correct, for super.so, inside <head>:

<script
    src="<https://twemoji.maxcdn.com/v/latest/twemoji.min.js>"
    crossorigin="anonymous"
  ></script>
  <script>
    // From: <https://gist.github.com/Armster15/db063ab0dc5be699ae07a067a7333752>
    function parse() {
      // Parses the document body and inserts <img> tags in place of Unicode Emojis
      twemoji.parse(
        document.body,
        // This is to specify to Twemoji to use SVGs and not PNGs);
        { folder: 'svg', ext: '.svg' }
      );
    }

    function afterLoad() {
      parse();
      // Hack: Detect when the page has changed based on when the title changes.
      // For some reason, doesn't parse emojis in the header breadcrumb.
      const target = document.querySelector('title');
      const observer = new WebKitMutationObserver(function (mutations) {
        mutations.forEach(function (mutation) {
          parse();
        });
      });
      const config = { attributes: true, childList: true, characterData: true };
      observer.observe(target, config);
    }

    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', afterLoad);
    } else {
      afterLoad();
    }
  </script>
  <style>
    img.emoji {
      /* Since we are using SVGs, you have to change the width using CSS */
      width: 1em;

      /* 
    This is to make the emojis feel like actual emojis to 
    the user and they won't act like images. This makes the emojis
    non-reactive to any mouse events such as dragging, 
    hovering, clicking etc. Makes it feel like its actual text.
    */
      pointer-events: none;
      /*margin-right: 0.25rem;*/
    }
  </style>