font imports working in menu + font-chooser improvements

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: extension menu will now receive style rules from extensions (prev. only got css vars) = necessary for
-  custom fonts. javascript is still not executable in the menu. (e.g. the "font chooser" will work, but only
-  because all it thing it does is change variables - if it were to try dynamically adding new font import rules
-  things things would break). -->
-
 - 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.

DOCUMENTATION.md

@@ -54,6 +54,7 @@ module.exports = {
     type: String in ['toggle', 'select', 'input', 'file'],
     value: Boolean or Array<String> or String or Number or null
   }>,
+  fonts: Array<String> 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                   |
+| key     | value                                                                                                                 | type                   |
-| ------- | ----------------------------------------------------------------------------------------------- | ---------------------- |
+| ------- | --------------------------------------------------------------------------------------------------------------------- | ---------------------- |
-| id      | **required:** uuidv4 - generate a new one [here](https://www.uuidgenerator.net)                 | _string_               |
+| id      | **required:** uuidv4 - generate a new one [here](https://www.uuidgenerator.net)                                       | _string_               |
-| name    | **required:** short name (e.g. `'ocean theme'`)                                                 | _string_               |
+| name    | **required:** short name (e.g. `'ocean theme'`)                                                                       | _string_               |
-| tags    | **required:** categories/type (e.g. `'extension'`, `'theme'`, `'light'`, `'dark'`)              | _array\<string\>_      |
+| tags    | **required:** categories/type (e.g. `'extension'`, `'theme'`, `'light'`, `'dark'`)                                    | _array\<string\>_      |
-| desc    | **optional:** 1-3 sentence description of what the module is/does, with basic markdown support. | _string_               |
+| 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_               |
+| version | **required:** semver (e.g. `'0.3.7'`)                                                                                 | _string_               |
-| author  | **required:** see below: original extension creator                                             | _string_ or \<object\> |
+| author  | **required:** see below: original extension creator                                                                   | _string_ or \<object\> |
-| options | **optional:** see below: options made available in the enhancer menu (accessible from the tray) | _array\<object\>_      |
+| options | **optional:** see below: options made available in the enhancer menu (accessible from the tray)                       | _array\<object\>_      |
-| hacks   | **optional:** see below: code inserted at various points                                        | _object_               |
+| fonts   | **optional:** a list of any font imports - should be `https://` or [`enhancement://`](#the-enhancement-protocol) urls | _array\<string\>_      |
+| 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:

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('<div class="window-buttons-area"></div>'),
       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 += `<button class="window-button" id="btn-${btn}">${await buttons.icons[
         btn

mods/core/client.js

@@ -40,8 +40,9 @@ module.exports = (store, __exports) => {
     if (store().frameless) {
       document.body.classList.add('frameless');
       // draggable area
-      const dragarea = document.createElement('div');
+      const dragarea = helpers.createElement(
-      dragarea.className = 'window-dragarea';
+        '<div class="window-dragarea"></div>'
+      );
       document.querySelector('.notion-topbar').prepend(dragarea);
       document.documentElement.style.setProperty(
         '--configured--dragarea_height',

mods/core/menu.js

@@ -47,15 +47,10 @@ window['__start'] = async () => {
       document.body.style.setProperty(style[0], style[1]);
   });
 
-  function createElement(html) {
-    const template = document.createElement('template');
-    template.innerHTML = html.trim();
-    return template.content.firstElementChild;
-  }
   function createAlert(type, message) {
     if (!type)
       throw Error('<notion-enhancer> @ createAlert: no alert type specified');
-    const el = createElement(`
+    const el = helpers.createElement(`
       <section class="${type}" role="alert">
         <p>${message}</p>
       </section>
@@ -152,7 +147,9 @@ window['__start'] = async () => {
 
   document
     .querySelector('#colorpicker')
-    .appendChild(createElement('<button class="close-modal"></button>'));
+    .appendChild(
+      helpers.createElement('<button class="close-modal"></button>')
+    );
   document.querySelectorAll('#popup .close-modal').forEach((el) =>
     el.addEventListener('click', (event) => {
       $popup.classList.remove('visible');
@@ -195,7 +192,7 @@ window['__start'] = async () => {
       throw Error('<notion-enhancer> @ createTag: no tagname specified');
     if (!onclick)
       throw Error('<notion-enhancer> @ createTag: no action specified');
-    const el = createElement(
+    const el = helpers.createElement(
       `<span class="selected" ${
         color ? `style="--tag_color: ${color}" ` : ''
       }tabindex="0">${tagname}</span>`
@@ -345,7 +342,7 @@ window['__start'] = async () => {
           </label>
         `;
     }
-    $opt = createElement(`<p class="${opt.type}">${$opt}</p>`);
+    $opt = helpers.createElement(`<p class="${opt.type}">${$opt}</p>`);
     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
+    for (let fonts of mod.fonts || []) {
-    // if (
+      document
-    //   fs.pathExistsSync(path.resolve(`${__dirname}/../${mod.dir}/styles.css`))
+        .querySelector('head')
-    // ) {
+        .appendChild(
-    //   document
+          helpers.createElement(`<link rel="stylesheet" href="${fonts}">`)
-    //     .querySelector('head')
+        );
-    //     .appendChild(
+    }
-    //       createElement(
-    //         `<link rel="stylesheet" href="enhancement://${mod.dir}/styles.css">`
-    //       )
-    //     );
-    // }
 
     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(`
       <section class="${
         mod.tags.includes('core') || enabled ? 'enabled' : 'disabled'
       }" id="${mod.id}">

mods/font-chooser/mod.js

@@ -1,95 +1,59 @@
 /*
  * font chooser
  * (c) 2020 torchatlas (https://bit.ly/torchatlas)
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
  * under the MIT license
  */
 
 'use strict';
 
 module.exports = {
-	id: 'e0d8d148-45e7-4d79-8313-e7b2ad8abe16',
+  id: 'e0d8d148-45e7-4d79-8313-e7b2ad8abe16',
-	tags: ['extension'],
+  tags: ['extension'],
-	name: 'font chooser',
+  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.',
+  desc:
-	version: '0.1.0',
+    '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.',
-	author: 'torchatlas',
+  version: '0.1.1',
-	options: [
+  author: 'torchatlas',
-		{
+  options: [
-			key: 'sansSerif',
+    {
-			label: 'Sans Serif and UI',
+      key: 'sans',
-			type: 'input',
+      label: 'sans-serif (inc. ui):',
-			value: '',
+      type: 'input',
-		},
+      value: '',
-		{
+    },
-			key: 'serif',
+    {
-			label: 'Serif',
+      key: 'serif',
-			type: 'input',
+      label: 'serif:',
-			value: ''
+      type: 'input',
-		},
+      value: '',
-		{
+    },
-			key: 'mono',
+    {
-			label: 'Monospace',
+      key: 'mono',
-			type: 'input',
+      label: 'monospace:',
-			value: ''
+      type: 'input',
-		},
+      value: '',
-		{
+    },
-			key: 'code',
+    {
-			label: 'Code',
+      key: 'code',
-			type: 'input',
+      label: 'code:',
-			value: ''
+      type: 'input',
-		}
+      value: '',
-	],
+    },
-	hacks: {
+  ],
-		'renderer/preload.js'(store, __exports) {
+  hacks: {
-			document.addEventListener('readystatechange', (event) => {
+    'renderer/preload.js'(store, __exports) {
-
+      const attempt_interval = setInterval(enhance, 500);
-				if (document.readyState !== 'complete') return false;
+      async function enhance() {
-
+        if (!document.querySelector('.notion-app-inner')) return;
-				if (store().sansSerif != '') {
+        clearInterval(attempt_interval);
-					document.documentElement.style.setProperty(
+        for (let style of ['sans', 'serif', 'mono', 'code']) {
-						'--theme_dark--font_sans',
+          if (!store()[style]) return;
-						store().sansSerif
+          document
-					);
+            .querySelector('.notion-app-inner')
-					document.documentElement.style.setProperty(
+            .style.setProperty(`--theme--font_${style}`, store()[style]);
-						'--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
-					);	
-				}
-
-			});
-		}
-	}
-}

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',
+  ],
 };

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;

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'],
 };

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;

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'],
 };

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

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',
+  ],
 };

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

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'],
 };

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;

pkg/helpers.js

@@ -9,8 +9,7 @@
 const os = require('os'),
   path = require('path'),
   fs = require('fs-extra'),
-  { exec, execSync } = require('child_process'),
+  { execSync } = require('child_process');
-  { promisify } = require('util');
 
 // 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,
 };

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');
+          for (let rules of [
-          style.rel = 'stylesheet';
+            `enhancement://${mod.dir}/styles.css`,
-          style.href = `enhancement://${mod.dir}/styles.css`;
+            ...(mod.fonts || []),
-          document.querySelector('head').appendChild(style);
+          ]) {
+            document
+              .querySelector('head')
+              .appendChild(
+                helpers.createElement(`<link rel="stylesheet" href="${rules}">`)
+              );
+          }
         });
       }
       if (mod.hacks && mod.hacks[__file]) {