🖼️

blog.austn.io

  • Currently hosting on super.so vs directly pointing to Notion
  • Pros:
    • No code, hosted solution!
    • Nice to be able to inject code as desired, actually
    • Shows up in search?
    • Nice clean URLs
    • Faaaast
  • Cons:
    • Emoji rendering is pretty crappy on Windows, should use Twemoji
    • $12/month
    • Extra step between viewing and editing
  • Basically: Why doesn't Notion eat super.so's lunch?
    • Aka offer it as a premium feature
    • And have faster search indexing (ala Algolia)

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

  • Notion blog vs traditional blog
  • Pros:
    • Fast edit speed, used to workflow, don't have to learn something new
    • Markdown-like, don't think too much about aesthetics
  • Cons:
    • Less control? Less indexability?
    • Not super pretty?

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>