extension: font chooser

repo/font-chooser/fonts.css

@@ -0,0 +1,25 @@
+/*
+ * notion-enhancer: font chooser
+ * (c) 2021 TorchAtlas (https://torchatlas.netlify.app/)
+ * (c) 2021 admiraldus (https://github.com/admiraldus
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+:root {
+  --theme--font_sans: var(--font_chooser--sans);
+  --theme--font_serif: var(--font_chooser--serif);
+  --theme--font_mono: var(--font_chooser--mono);
+  --theme--font_code: var(--font_chooser--code);
+}
+
+.notion-quote-block {
+  font-family: var(--font_chooser--quotes, inherit) !important;
+}
+
+[placeholder='Untitled'],
+[placeholder='Heading 1'],
+[placeholder='Heading 2'],
+[placeholder='Heading 3'] {
+  font-family: var(--font_chooser--headings, inherit) !important;
+}

repo/font-chooser/fonts.mjs

@@ -0,0 +1,28 @@
+/*
+ * notion-enhancer: font chooser
+ * (c) 2021 TorchAtlas (https://torchatlas.netlify.app/)
+ * (c) 2021 admiraldus (https://github.com/admiraldus
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+'use strict';
+
+export default async function ({}, db) {
+  const defaults = {
+    sans: " -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol'",
+    serif:
+      "Lyon-Text, Georgia, YuMincho, 'Yu Mincho', 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Songti TC', 'Songti SC', SimSun, 'Nanum Myeongjo', NanumMyeongjo, Batang, serif",
+    mono: 'iawriter-mono, Nitti, Menlo, Courier, monospace',
+    code: "SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace",
+    quotes: 'inherit',
+    headings: 'inherit',
+  };
+  for (let style of ['sans', 'serif', 'mono', 'code', 'quotes', 'headings']) {
+    const font = await db.get([style]);
+    document.documentElement.style.setProperty(
+      `--font_chooser--${style}`,
+      font || defaults[style]
+    );
+  }
+}

repo/font-chooser/mod.json

@@ -0,0 +1,68 @@
+{
+  "name": "font chooser",
+  "id": "e0d8d148-45e7-4d79-8313-e7b2ad8abe16",
+  "version": "0.4.0",
+  "description": "set custom fonts.",
+  "tags": ["extension", "customisation"],
+  "authors": [
+    {
+      "name": "TorchAtlas",
+      "homepage": "https://torchatlas.netlify.app/",
+      "avatar": "https://avatars.githubusercontent.com/u/12666855"
+    }
+  ],
+  "js": {
+    "client": ["fonts.mjs"],
+    "menu": ["fonts.mjs"],
+    "frame": ["fonts.mjs"]
+  },
+  "css": {
+    "client": ["fonts.css"],
+    "menu": ["fonts.css"],
+    "frame": ["fonts.css"]
+  },
+  "options": [
+    {
+      "type": "text",
+      "key": "sans",
+      "label": "sans-serif (inc. ui)",
+      "tooltip": "**this font needs to be installed on your device** - leave the option blank to use notion's default font",
+      "value": ""
+    },
+    {
+      "type": "text",
+      "key": "serif",
+      "label": "serif",
+      "tooltip": "**this font needs to be installed on your device** - leave the option blank to use notion's default font",
+      "value": ""
+    },
+    {
+      "type": "text",
+      "key": "mono",
+      "label": "monospace",
+      "tooltip": "**this font needs to be installed on your device** - leave the option blank to use notion's default font",
+      "value": ""
+    },
+    {
+      "type": "text",
+      "key": "code",
+      "label": "code",
+      "tooltip": "**this font needs to be installed on your device** - leave the option blank to use notion's default font",
+      "value": ""
+    },
+    {
+      "type": "text",
+      "key": "quotes",
+      "label": "quotes",
+      "tooltip": "**this font needs to be installed on your device** - leave the option blank to use notion's default font",
+      "value": ""
+    },
+    {
+      "type": "text",
+      "key": "headings",
+      "label": "headings",
+      "tooltip": "**this font needs to be installed on your device** - leave the option blank to use notion's default font",
+      "value": ""
+    }
+  ]
+}

repo/menu/router.mjs

@@ -60,13 +60,28 @@ window.addEventListener('popstate', (event) => {
   document.getElementById(location.hash.slice(1))?.scrollIntoView(true);
   document.documentElement.scrollTop = 0;
 });
-web.addDocumentObserver((mutation) => {
+
-  mutation.target.querySelectorAll('a[href^="?"]').forEach((a) => {
+const documentObserverEvents = [],
-    a.removeEventListener('click', router);
+  handleDocumentMutations = (queue) => {
-    a.addEventListener('click', router);
+    while (queue.length) {
-  });
+      const mutation = queue.shift();
-  mutation.target.querySelectorAll('a[href^="#"]').forEach((a) => {
+      mutation.target.querySelectorAll('a[href^="?"]').forEach((a) => {
-    a.removeEventListener('click', navigator);
+        a.removeEventListener('click', router);
-    a.addEventListener('click', navigator);
+        a.addEventListener('click', router);
+      });
+      mutation.target.querySelectorAll('a[href^="#"]').forEach((a) => {
+        a.removeEventListener('click', navigator);
+        a.addEventListener('click', navigator);
+      });
+    }
+  },
+  documentObserver = new MutationObserver((list, observer) => {
+    if (!documentObserverEvents.length)
+      requestIdleCallback(() => handleDocumentMutations(documentObserverEvents));
+    documentObserverEvents.push(...list);
   });
+documentObserver.observe(document.body, {
+  childList: true,
+  subtree: true,
+  attributes: true,
 });

repo/menu/styles.mjs

@@ -25,7 +25,7 @@ const mapColorVariables = (color) => ({
 });
 
 const customClasses = {
-  'notifications-container': apply`absolute bottom-0 right-0 px-4 py-3 max-w-full w-96`,
+  'notifications-container': apply`absolute bottom-0 right-0 px-4 py-3 max-w-full w-96 z-10`,
   'notification': ([color = 'default']) =>
     apply`p-2 border group hover:(filter brightness-125) ${
       color === 'default'
@@ -58,7 +58,7 @@ const customClasses = {
   'mod-authors-container': apply`text-sm font-medium`,
   'mod-author': apply`flex items-center mb-2`,
   'mod-author-avatar': apply`inline object-cover w-5 h-5 rounded-full mr-2`,
-  'sidebar': apply`h-full w-96 px-4 pt-3 pb-32 flex flex-col bg-notion-secondary border-l border-divider`,
+  'sidebar': apply`h-full w-96 px-4 pt-3 pb-16 overflow-y-auto flex flex-col bg-notion-secondary border-l border-divider`,
   'profile-trigger': apply`block px-4 py-3 mb-2 rounded-md text-sm text-left font-semibold shadow-inner
     hover:bg-accent-red-button border border-accent-red text-accent-red focus:(outline-none bg-accent-red-button)`,
   'profile-actions': apply`flex`,

repo/registry.json

@@ -18,5 +18,6 @@
   "pinky-boom",
 
   "bypass-preview",
-  "calendar-scroll"
+  "calendar-scroll",
+  "font-chooser"
 ]