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>