From 1e1808fd09747a177c7748d85ac41c7f72f5bcfa Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Wed, 2 Sep 2020 11:10:01 +1000 Subject: [PATCH] font imports working in menu + font-chooser improvements --- CHANGELOG.md | 13 +-- DOCUMENTATION.md | 25 +++--- mods/core/buttons.js | 5 +- mods/core/client.js | 5 +- mods/core/menu.js | 36 ++++----- mods/font-chooser/mod.js | 136 ++++++++++++-------------------- mods/gameish/mod.js | 5 +- mods/gameish/styles.css | 2 - mods/littilepig-dark/mod.js | 3 +- mods/littilepig-dark/styles.css | 2 - mods/littlepig-light/mod.js | 3 +- mods/littlepig-light/styles.css | 2 - mods/neutral/mod.js | 6 +- mods/neutral/styles.css | 3 - mods/pastel-dark/mod.js | 3 +- mods/pastel-dark/styles.css | 2 - pkg/helpers.js | 12 ++- pkg/loader.js | 14 +++- 18 files changed, 126 insertions(+), 151 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f24ff66..6e696f1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,27 +11,26 @@ a feature and cleanup update. - improved: halved the number of css rules used -> much better performance. +- improved: font imports must be define in the `mod.js` so that they can also be used in + the enhancements menu. - bugfix: enhancer settings should no longer reset on update (though this will not have effect until the release after this one). - bugfix: blue select tags are no longer purple. +- bugfix: blue select tags are no longer purple. - themes: "littlepig" (light + dark) = monospaced themes using emojis and colourful text. - extension: "font chooser" = customize fonts. for each option, type in the name of the font you would like to use, or leave it blank to not change anything. // todo - - - improved: added individual text-colour rules for different background colours. - improved: added variables for callout backgrounds. +- improved: tiling window-manager support (can hide titlebars entirely without dragarea/buttons). - bugfix: made the open enhancements menu hotkey configurable and changed the default to `option/alt + e` to remove conflict with the inline code highlight shortcut. - bugfix: block-level text colours are now changed properly. - bugfix: page titles now respond to small-text mode. - bugfix: update property-layout to match notion changes again. +- extension: "calendar scroll" = a button to scroll down to the current week for you. notion-deb-builder has been discovered to not generate an app.asar and so is no longer supported. @@ -40,6 +39,8 @@ notion-deb-builder has been discovered to not generate an app.asar and so is no - bugfix: separate text highlight and select tag variables. - bugfix: bypass CSP for the `enhancement://` protocol - was failing on some platforms? +> 📥 `npm i -g notion-enhancer@0.8.5` + ### v0.8.4 (2020-08-29) - bugfix: property-layout now works consistently with or without a banner. diff --git a/DOCUMENTATION.md b/DOCUMENTATION.md index ec05bfb..95f0667 100644 --- a/DOCUMENTATION.md +++ b/DOCUMENTATION.md @@ -54,6 +54,7 @@ module.exports = { type: String in ['toggle', 'select', 'input', 'file'], value: Boolean or Array or String or Number or null }>, + fonts: Array of font_urls, hacks?: { [k: 'insert-point' (e.g. 'main/createWindow.js')]: function ( store, // used for configuration and persisting of data (explanation below). @@ -63,16 +64,17 @@ module.exports = { }; ``` -| key | value | type | -| ------- | ----------------------------------------------------------------------------------------------- | ---------------------- | -| id | **required:** uuidv4 - generate a new one [here](https://www.uuidgenerator.net) | _string_ | -| name | **required:** short name (e.g. `'ocean theme'`) | _string_ | -| tags | **required:** categories/type (e.g. `'extension'`, `'theme'`, `'light'`, `'dark'`) | _array\_ | -| desc | **optional:** 1-3 sentence description of what the module is/does, with basic markdown support. | _string_ | -| version | **required:** semver (e.g. `'0.3.7'`) | _string_ | -| author | **required:** see below: original extension creator | _string_ or \ | -| options | **optional:** see below: options made available in the enhancer menu (accessible from the tray) | _array\_ | -| hacks | **optional:** see below: code inserted at various points | _object_ | +| key | value | type | +| ------- | --------------------------------------------------------------------------------------------------------------------- | ---------------------- | +| id | **required:** uuidv4 - generate a new one [here](https://www.uuidgenerator.net) | _string_ | +| name | **required:** short name (e.g. `'ocean theme'`) | _string_ | +| tags | **required:** categories/type (e.g. `'extension'`, `'theme'`, `'light'`, `'dark'`) | _array\_ | +| desc | **optional:** 1-3 sentence description of what the module is/does, with basic markdown support. | _string_ | +| version | **required:** semver (e.g. `'0.3.7'`) | _string_ | +| author | **required:** see below: original extension creator | _string_ or \ | +| options | **optional:** see below: options made available in the enhancer menu (accessible from the tray) | _array\_ | +| fonts | **optional:** a list of any font imports - should be `https://` or [`enhancement://`](#the-enhancement-protocol) urls | _array\_ | +| hacks | **optional:** see below: code inserted at various points | _object_ | > a module that with the primary function of being a hack should be tagged as an extension, > while a module that has the primary function of adding styles should be tagged as a theme. @@ -174,6 +176,9 @@ the full/up-to-date list of variables and their default values can be found in t these are all made possible by the core module. if you believe this set of variables is buggy or lacking in any way, consider opening a pull request to fix those issues - please do not try and reinvent the wheel unnecessarily. +**want to import an external font or import an included font file? do that in the `mod.js` file, otherwise it** +**won't be used for the enhancements menu.** + ### using variables variables should be used without specifying which mode they are relevant to. for example: diff --git a/mods/core/buttons.js b/mods/core/buttons.js index f664432..9b6cafd 100644 --- a/mods/core/buttons.js +++ b/mods/core/buttons.js @@ -7,13 +7,13 @@ 'use strict'; module.exports = (store) => { - const electron = require('electron'), + const helpers = require('../../pkg/helpers.js'), path = require('path'), fs = require('fs-extra'), browser = require('electron').remote.getCurrentWindow(), is_mac = process.platform === 'darwin', buttons = { - element: document.createElement('div'), + element: helpers.createElement('
'), insert: [ 'alwaysontop', ...(store().frameless && !is_mac @@ -77,7 +77,6 @@ module.exports = (store) => { }; (async () => { - buttons.element.className = 'window-buttons-area'; for (let btn of buttons.insert) { buttons.element.innerHTML += `')); + .appendChild( + helpers.createElement('') + ); document.querySelectorAll('#popup .close-modal').forEach((el) => el.addEventListener('click', (event) => { $popup.classList.remove('visible'); @@ -195,7 +192,7 @@ window['__start'] = async () => { throw Error(' @ createTag: no tagname specified'); if (!onclick) throw Error(' @ createTag: no action specified'); - const el = createElement( + const el = helpers.createElement( `${tagname}` @@ -345,7 +342,7 @@ window['__start'] = async () => { `; } - $opt = createElement(`

${$opt}

`); + $opt = helpers.createElement(`

${$opt}

`); if (opt.type === 'color') { $opt .querySelector(`#${opt.type}_${id}--${opt.key}`) @@ -377,18 +374,13 @@ window['__start'] = async () => { ? 1 : a.name.localeCompare(b.name) )) { - // mod styling - necessary for fonts - // if ( - // fs.pathExistsSync(path.resolve(`${__dirname}/../${mod.dir}/styles.css`)) - // ) { - // document - // .querySelector('head') - // .appendChild( - // createElement( - // `` - // ) - // ); - // } + for (let fonts of mod.fonts || []) { + document + .querySelector('head') + .appendChild( + helpers.createElement(``) + ); + } const enabled = store('mods', { [mod.id]: { enabled: false } })[mod.id] .enabled, @@ -400,7 +392,7 @@ window['__start'] = async () => { link: `https://github.com/${mod.author}`, avatar: `https://github.com/${mod.author}.png`, }; - mod.elem = createElement(` + mod.elem = helpers.createElement(`
diff --git a/mods/font-chooser/mod.js b/mods/font-chooser/mod.js index 60b5cec..03cd2ca 100644 --- a/mods/font-chooser/mod.js +++ b/mods/font-chooser/mod.js @@ -1,95 +1,59 @@ /* * font chooser * (c) 2020 torchatlas (https://bit.ly/torchatlas) + * (c) 2020 dragonwocky (https://dragonwocky.me/) * under the MIT license */ 'use strict'; module.exports = { - id: 'e0d8d148-45e7-4d79-8313-e7b2ad8abe16', - tags: ['extension'], - name: 'font chooser', - desc: 'customize fonts. for each option, type in the name of the font you would like to use, or leave it blank to not change anything.', - version: '0.1.0', - author: 'torchatlas', - options: [ - { - key: 'sansSerif', - label: 'Sans Serif and UI', - type: 'input', - value: '', - }, - { - key: 'serif', - label: 'Serif', - type: 'input', - value: '' - }, - { - key: 'mono', - label: 'Monospace', - type: 'input', - value: '' - }, - { - key: 'code', - label: 'Code', - type: 'input', - value: '' - } - ], - hacks: { - 'renderer/preload.js'(store, __exports) { - document.addEventListener('readystatechange', (event) => { - - if (document.readyState !== 'complete') return false; - - if (store().sansSerif != '') { - document.documentElement.style.setProperty( - '--theme_dark--font_sans', - store().sansSerif - ); - document.documentElement.style.setProperty( - '--theme_light--font_sans', - store().sansSerif - ); - } - - if (store().serif != '') { - document.documentElement.style.setProperty( - '--theme_dark--font_serif', - store().serif - ); - document.documentElement.style.setProperty( - '--theme_light--font_serif', - store().serif - ); - } - - if (store().mono != '') { - document.documentElement.style.setProperty( - '--theme_dark--font_mono', - store().mono - ); - document.documentElement.style.setProperty( - '--theme_light--font_mono', - store().mono - ); - } - - if (store().code != '') { - document.documentElement.style.setProperty( - '--theme_dark--font_code', - store().code - ); - document.documentElement.style.setProperty( - '--theme_light--font_code', - store().code - ); - } - - }); - } - } -} \ No newline at end of file + id: 'e0d8d148-45e7-4d79-8313-e7b2ad8abe16', + tags: ['extension'], + name: 'font chooser', + desc: + 'customize fonts. for each option, type in the name of the font you would like to use, or leave it blank to not change anything.', + version: '0.1.1', + author: 'torchatlas', + options: [ + { + key: 'sans', + label: 'sans-serif (inc. ui):', + type: 'input', + value: '', + }, + { + key: 'serif', + label: 'serif:', + type: 'input', + value: '', + }, + { + key: 'mono', + label: 'monospace:', + type: 'input', + value: '', + }, + { + key: 'code', + label: 'code:', + type: 'input', + value: '', + }, + ], + hacks: { + 'renderer/preload.js'(store, __exports) { + const attempt_interval = setInterval(enhance, 500); + async function enhance() { + if (!document.querySelector('.notion-app-inner')) return; + clearInterval(attempt_interval); + for (let style of ['sans', 'serif', 'mono', 'code']) { + if (!store()[style]) return; + document + .querySelector('.notion-app-inner') + .style.setProperty(`--theme--font_${style}`, store()[style]); + } + } + }, + }, +}; diff --git a/mods/gameish/mod.js b/mods/gameish/mod.js index 405aabe..66a5bf6 100644 --- a/mods/gameish/mod.js +++ b/mods/gameish/mod.js @@ -12,11 +12,14 @@ module.exports = { tags: ['theme', 'dark'], name: 'gameish', desc: 'a purple, "gamer-styled" theme with a blocky-font.', - version: '0.1.2', + version: '0.1.3', author: { name: 'LVL100ShrekCultist', link: 'https://www.reddit.com/user/LVL100ShrekCultist/', avatar: 'https://styles.redditmedia.com/t5_2js69j/styles/profileIcon_jvnzmo30fyq41.jpg', }, + fonts: [ + 'https://fonts.googleapis.com/css2?family=Baumans&family=Comfortaa&family=DM+Mono&family=Gruppo&family=Nova+Mono&family=Offside&family=Press+Start+2P&family=Righteous&display=swap', + ], }; diff --git a/mods/gameish/styles.css b/mods/gameish/styles.css index b0c914b..62500b1 100644 --- a/mods/gameish/styles.css +++ b/mods/gameish/styles.css @@ -5,8 +5,6 @@ * under the MIT license */ -@import url('https://fonts.googleapis.com/css2?family=Baumans&family=Comfortaa&family=DM+Mono&family=Gruppo&family=Nova+Mono&family=Offside&family=Press+Start+2P&family=Righteous&display=swap'); - :root { --theme_dark--main: #1e1c26; --theme_dark--sidebar: #24222c; diff --git a/mods/littilepig-dark/mod.js b/mods/littilepig-dark/mod.js index 1720a8e..a655447 100644 --- a/mods/littilepig-dark/mod.js +++ b/mods/littilepig-dark/mod.js @@ -12,11 +12,12 @@ module.exports = { tags: ['theme', 'dark'], name: 'littlepig dark', desc: 'a purple monospaced theme using emojis and colourful text.', - version: '0.1.0', + version: '0.1.1', author: { name: 'Lizishan', link: 'https://www.reddit.com/user/Lizishan/', avatar: 'https://styles.redditmedia.com/t5_110nz4/styles/profileIcon_h1m3b16exoi51.jpg', }, + fonts: ['https://dev-cats.github.io/code-snippets/JetBrainsMono.css'], }; diff --git a/mods/littilepig-dark/styles.css b/mods/littilepig-dark/styles.css index 4c752e1..fbc0efe 100644 --- a/mods/littilepig-dark/styles.css +++ b/mods/littilepig-dark/styles.css @@ -5,8 +5,6 @@ * under the MIT license */ -@import url('https://dev-cats.github.io/code-snippets/JetBrainsMono.css'); - :root { --theme_dark--main: #1e1c26; --theme_dark--sidebar: #24222c; diff --git a/mods/littlepig-light/mod.js b/mods/littlepig-light/mod.js index fbeb9f7..319d127 100644 --- a/mods/littlepig-light/mod.js +++ b/mods/littlepig-light/mod.js @@ -12,11 +12,12 @@ module.exports = { tags: ['theme', 'light'], name: 'littlepig light', desc: 'a bright monospaced theme using emojis and colourful text.', - version: '0.1.0', + version: '0.1.1', author: { name: 'Lizishan', link: 'https://www.reddit.com/user/Lizishan/', avatar: 'https://styles.redditmedia.com/t5_110nz4/styles/profileIcon_h1m3b16exoi51.jpg', }, + fonts: ['https://dev-cats.github.io/code-snippets/JetBrainsMono.css'], }; diff --git a/mods/littlepig-light/styles.css b/mods/littlepig-light/styles.css index 5414d6f..334b27c 100644 --- a/mods/littlepig-light/styles.css +++ b/mods/littlepig-light/styles.css @@ -5,8 +5,6 @@ * under the MIT license */ -@import url('https://dev-cats.github.io/code-snippets/JetBrainsMono.css'); - :root { --theme_light--font_sans: 'JetBrains Mono'; --theme_light--font_mono: 'JetBrains Mono'; diff --git a/mods/neutral/mod.js b/mods/neutral/mod.js index 23a352e..51c13a3 100644 --- a/mods/neutral/mod.js +++ b/mods/neutral/mod.js @@ -12,6 +12,10 @@ module.exports = { tags: ['theme', 'dark'], name: 'neutral', desc: 'smoother colours and fonts, designed to be more pleasing to the eye.', - version: '0.1.1', + version: '0.1.2', author: 'arecsu', + fonts: [ + 'https://rsms.me/inter/inter.css', + 'https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap', + ], }; diff --git a/mods/neutral/styles.css b/mods/neutral/styles.css index c814737..2a7b441 100644 --- a/mods/neutral/styles.css +++ b/mods/neutral/styles.css @@ -5,9 +5,6 @@ * under the MIT license */ -@import url('https://rsms.me/inter/inter.css'); -@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap'); - :root { /** dark **/ diff --git a/mods/pastel-dark/mod.js b/mods/pastel-dark/mod.js index a69ff80..31e9358 100644 --- a/mods/pastel-dark/mod.js +++ b/mods/pastel-dark/mod.js @@ -12,11 +12,12 @@ module.exports = { tags: ['theme', 'dark'], name: 'pastel dark', desc: 'a smooth-transition true dark theme with a hint of pastel.', - version: '0.1.1', + version: '0.1.2', author: { name: 'zenith_illinois', link: 'https://www.reddit.com/user/zenith_illinois/', avatar: 'https://cdn.discordapp.com/avatars/565182533940150283/54f36546ab586298a5df5c238cbaaa4b.png?size=128', }, + fonts: ['https://rsms.me/inter/inter.css'], }; diff --git a/mods/pastel-dark/styles.css b/mods/pastel-dark/styles.css index 49c44bc..5ba0826 100644 --- a/mods/pastel-dark/styles.css +++ b/mods/pastel-dark/styles.css @@ -5,8 +5,6 @@ * under the MIT license */ -@import url('https://rsms.me/inter/inter.css'); - :root { --theme_dark--main: #0b0b0b; --theme_dark--sidebar: #0f0f0f; diff --git a/pkg/helpers.js b/pkg/helpers.js index d8309eb..bfaaaeb 100644 --- a/pkg/helpers.js +++ b/pkg/helpers.js @@ -9,8 +9,7 @@ const os = require('os'), path = require('path'), fs = require('fs-extra'), - { exec, execSync } = require('child_process'), - { promisify } = require('util'); + { execSync } = require('child_process'); // used to differentiate between "enhancer failed" and "code broken" errors. class EnhancerError extends Error { @@ -128,6 +127,7 @@ function getEnhancements() { !mod.name || !mod.version || !mod.author || + (mod.fonts && !mod.fonts.every((font) => typeof font === 'string')) || (mod.options && !mod.options.every((opt) => ['toggle', 'select', 'input', 'file', 'color'].includes(opt.type) @@ -169,6 +169,13 @@ function readline() { }); } +// construct a HTMLElement from a string +function createElement(html) { + const template = document.createElement('template'); + template.innerHTML = html.trim(); + return template.content.firstElementChild; +} + module.exports = { EnhancerError, is_wsl, @@ -178,4 +185,5 @@ module.exports = { getEnhancements, getJSON, readline, + createElement, }; diff --git a/pkg/loader.js b/pkg/loader.js index 14b45ab..a70f1a8 100644 --- a/pkg/loader.js +++ b/pkg/loader.js @@ -69,10 +69,16 @@ module.exports = function (__file, __exports) { ) { document.addEventListener('readystatechange', (event) => { if (document.readyState !== 'complete') return false; - const style = document.createElement('link'); - style.rel = 'stylesheet'; - style.href = `enhancement://${mod.dir}/styles.css`; - document.querySelector('head').appendChild(style); + for (let rules of [ + `enhancement://${mod.dir}/styles.css`, + ...(mod.fonts || []), + ]) { + document + .querySelector('head') + .appendChild( + helpers.createElement(``) + ); + } }); } if (mod.hacks && mod.hacks[__file]) {