diff --git a/repo/font-chooser/fonts.css b/repo/font-chooser/fonts.css new file mode 100644 index 0000000..d966fe4 --- /dev/null +++ b/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 (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; +} diff --git a/repo/font-chooser/fonts.mjs b/repo/font-chooser/fonts.mjs new file mode 100644 index 0000000..47d27da --- /dev/null +++ b/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 (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] + ); + } +} diff --git a/repo/font-chooser/mod.json b/repo/font-chooser/mod.json new file mode 100644 index 0000000..8fdef7a --- /dev/null +++ b/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": "" + } + ] +} diff --git a/repo/menu/router.mjs b/repo/menu/router.mjs index 8a5e70e..1eb189f 100644 --- a/repo/menu/router.mjs +++ b/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) => { - a.removeEventListener('click', router); - a.addEventListener('click', router); - }); - mutation.target.querySelectorAll('a[href^="#"]').forEach((a) => { - a.removeEventListener('click', navigator); - a.addEventListener('click', navigator); + +const documentObserverEvents = [], + handleDocumentMutations = (queue) => { + while (queue.length) { + const mutation = queue.shift(); + mutation.target.querySelectorAll('a[href^="?"]').forEach((a) => { + a.removeEventListener('click', router); + 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, }); diff --git a/repo/menu/styles.mjs b/repo/menu/styles.mjs index b46478a..df38c8e 100644 --- a/repo/menu/styles.mjs +++ b/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`, diff --git a/repo/registry.json b/repo/registry.json index 84cefd7..6f594eb 100644 --- a/repo/registry.json +++ b/repo/registry.json @@ -18,5 +18,6 @@ "pinky-boom", "bypass-preview", - "calendar-scroll" + "calendar-scroll", + "font-chooser" ]