font imports working in menu + font-chooser improvements

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

repo/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',

repo/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}">

repo/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
-					);	
-				}
-
-			});
-		}
-	}
-}

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

repo/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;

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

repo/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;

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

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

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

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

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

repo/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;