- 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>