load js in menu, configurable accents in dark+/light+

repo/dark+/mod.json

@@ -17,6 +17,25 @@
     "client": ["variables.css"],
     "menu": ["variables.css"]
   },
-  "js": {},
+  "js": {
-  "options": []
+    "frame": ["theme.mjs"],
+    "client": ["theme.mjs"],
+    "menu": ["theme.mjs"]
+  },
+  "options": [
+    {
+      "type": "color",
+      "key": "primary",
+      "label": "primary accent color",
+      "tooltip": "**replaces notion's blue accent**",
+      "value": "rgba(46,170,220,1)"
+    },
+    {
+      "type": "color",
+      "key": "secondary",
+      "label": "secondary accent color",
+      "tooltip": "**replaces notion's red accent**",
+      "value": "rgba(235,87,87,1)"
+    }
+  ]
 }

repo/dark+/theme.mjs

@@ -0,0 +1,52 @@
+/*
+ * notion-enhancer: dark+
+ * (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 ({ fmt }, db) {
+  {
+    const primary = await db.get(['primary']),
+      [r, g, b, a] = primary
+        .slice(5, -1)
+        .split(',')
+        .map((i) => parseFloat(i));
+    if (!(r === 46 && g === 170 && b === 220)) {
+      document.documentElement.style.setProperty('--dark_plus--accent_blue', primary);
+      document.documentElement.style.setProperty(
+        '--dark_plus--accent_blue-selection',
+        `rgba(${r},${g},${b},0.2)`
+      );
+      document.documentElement.style.setProperty(
+        '--dark_plus--accent_blue-hover',
+        fmt.rgbLogShade(0.05, primary)
+      );
+      document.documentElement.style.setProperty(
+        '--dark_plus--accent_blue-active',
+        fmt.rgbLogShade(0.025, primary)
+      );
+      document.documentElement.style.setProperty(
+        '--dark_plus--accent_blue-text',
+        fmt.rgbContrast(r, g, b)
+      );
+    }
+  }
+
+  {
+    const secondary = await db.get(['secondary']),
+      [r, g, b, a] = secondary.slice(5, -1).split(',');
+    if (!(r === 235 && g === 87 && b === 87)) {
+      document.documentElement.style.setProperty('--dark_plus--accent_red', secondary);
+      document.documentElement.style.setProperty(
+        '--dark_plus--accent_red-button',
+        `rgba(${r},${g},${b},0.2)`
+      );
+      document.documentElement.style.setProperty(
+        '--dark_plus--accent_red-text',
+        fmt.rgbContrast(r, g, b)
+      );
+    }
+  }
+}

repo/dark+/variables.css

@@ -5,12 +5,14 @@
  */
 
 :root.dark {
-  --theme--accent_blue: rgb(213, 36, 36);
+  --theme--accent_blue: var(--dark_plus--accent_blue);
-  --theme--accent_blue-selection: rgba(177, 24, 24, 0.245);
+  --theme--accent_blue-selection: var(--dark_plus--accent_blue-selection);
-  --theme--accent_blue-hover: rgb(211, 57, 57);
+  --theme--accent_blue-hover: var(--dark_plus--accent_blue-hover);
-  --theme--accent_blue-active: rgb(199, 59, 59);
+  --theme--accent_blue-active: var(--dark_plus--accent_blue-active);
-  --theme--accent_red: rgb(213, 36, 36);
+  --theme--accent_blue-text: var(--dark_plus--accent_blue-text);
-  --theme--accent_red-button: rgb(177, 24, 24, 0.1);
+  --theme--accent_red: var(--dark_plus--accent_red);
+  --theme--accent_red-button: var(--dark_plus--accent_red-button);
+  --theme--accent_red-text: var(--dark_plus--accent_red-text);
 
   --theme--bg: rgb(14, 14, 14);
   --theme--bg_secondary: rgb(0, 0, 0);

repo/light+/mod.json

@@ -16,6 +16,25 @@
     "client": ["variables.css"],
     "menu": ["variables.css"]
   },
-  "js": {},
+  "js": {
-  "options": []
+    "frame": ["theme.mjs"],
+    "client": ["theme.mjs"],
+    "menu": ["theme.mjs"]
+  },
+  "options": [
+    {
+      "type": "color",
+      "key": "primary",
+      "label": "primary accent color",
+      "tooltip": "**replaces notion's blue accent**",
+      "value": "rgba(46,170,220,1)"
+    },
+    {
+      "type": "color",
+      "key": "secondary",
+      "label": "secondary accent color",
+      "tooltip": "**replaces notion's red accent**",
+      "value": "rgba(235,87,87,1)"
+    }
+  ]
 }

repo/light+/theme.mjs

@@ -0,0 +1,52 @@
+/*
+ * notion-enhancer: light+
+ * (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 ({ fmt }, db) {
+  {
+    const primary = await db.get(['primary']),
+      [r, g, b, a] = primary
+        .slice(5, -1)
+        .split(',')
+        .map((i) => parseFloat(i));
+    if (!(r === 46 && g === 170 && b === 220)) {
+      document.documentElement.style.setProperty('--light_plus--accent_blue', primary);
+      document.documentElement.style.setProperty(
+        '--light_plus--accent_blue-selection',
+        `rgba(${r},${g},${b},0.2)`
+      );
+      document.documentElement.style.setProperty(
+        '--light_plus--accent_blue-hover',
+        fmt.rgbLogShade(0.05, primary)
+      );
+      document.documentElement.style.setProperty(
+        '--light_plus--accent_blue-active',
+        fmt.rgbLogShade(0.025, primary)
+      );
+      document.documentElement.style.setProperty(
+        '--light_plus--accent_blue-text',
+        fmt.rgbContrast(r, g, b)
+      );
+    }
+  }
+
+  {
+    const secondary = await db.get(['secondary']),
+      [r, g, b, a] = secondary.slice(5, -1).split(',');
+    if (!(r === 235 && g === 87 && b === 87)) {
+      document.documentElement.style.setProperty('--light_plus--accent_red', secondary);
+      document.documentElement.style.setProperty(
+        '--light_plus--accent_red-button',
+        `rgba(${r},${g},${b},0.2)`
+      );
+      document.documentElement.style.setProperty(
+        '--light_plus--accent_red-text',
+        fmt.rgbContrast(r, g, b)
+      );
+    }
+  }
+}

repo/light+/variables.css

@@ -6,8 +6,14 @@
  */
 
 :root {
-  --theme--accent_red: crimson;
+  --theme--accent_blue: var(--light_plus--accent_blue);
-  --theme--accent_red-button: rgba(220, 20, 60, 0.2);
+  --theme--accent_blue-selection: var(--light_plus--accent_blue-selection);
+  --theme--accent_blue-hover: var(--light_plus--accent_blue-hover);
+  --theme--accent_blue-active: var(--light_plus--accent_blue-active);
+  --theme--accent_blue-text: var(--light_plus--accent_blue-text);
+  --theme--accent_red: var(--light_plus--accent_red);
+  --theme--accent_red-button: var(--light_plus--accent_red-button);
+  --theme--accent_red-text: var(--light_plus--accent_red-text);
 
   --theme--text_gray: rgba(151, 154, 155, 0.95);
   --theme--text_brown: rgb(167, 126, 100);

repo/menu/client.mjs

@@ -32,10 +32,7 @@ export default async function (api, db) {
 
   const notifications = {
     cache: await storage.get(['notifications'], []),
-    provider: [
+    provider: [registry.welcomeNotification, ...(await fs.getJSON(registry.notificationsURL))],
-      registry.welcomeNotification,
-      ...(await fs.getJSON('https://notion-enhancer.github.io/notifications.json')),
-    ],
     count: (await registry.errors()).length,
   };
   for (const notification of notifications.provider) {

repo/menu/components.mjs

@@ -7,10 +7,10 @@
 'use strict';
 
 import { fmt, web, registry, components } from '../../api/_.mjs';
-import { notifications } from './notifications.mjs';
+import { notifications } from './launcher.mjs';
 const profileDB = await registry.profileDB();
 
-export const blocks = {
+export const cards = {
   preview: (url) => web.html`<img
     class="mod-preview"
     src="${web.escape(url)}"

repo/menu/launcher.mjs

@@ -4,18 +4,29 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-'use strict';
+import * as api from '../../api/_.mjs';
-
+const { env, fs, storage, fmt, registry, web, components } = api;
-import { env, fs, storage, fmt, registry, web, components } from '../../api/_.mjs';
 import { tw } from './styles.mjs';
 
+for (const mod of await registry.list((mod) => registry.enabled(mod.id))) {
+  for (const sheet of mod.css?.menu || []) {
+    web.loadStylesheet(`repo/${mod._dir}/${sheet}`);
+  }
+  for (let script of mod.js?.menu || []) {
+    script = await import(fs.localPath(`repo/${mod._dir}/${script}`));
+    script.default(api, await registry.db(mod.id));
+  }
+}
+const errors = await registry.errors();
+if (errors.length) {
+  console.log('[notion-enhancer] registry errors:');
+  console.table(errors);
+}
+
 export const notifications = {
   $container: web.html`<div class="notifications-container"></div>`,
   cache: await storage.get(['notifications'], []),
-  provider: [
+  provider: [registry.welcomeNotification, ...(await fs.getJSON(registry.notificationsURL))],
-    registry.welcomeNotification,
-    ...(await fs.getJSON('https://notion-enhancer.github.io/notifications.json')),
-  ],
   async add({ icon, message, id = undefined, color = undefined, link = undefined }) {
     const $notification = link
         ? web.html`<a
@@ -65,19 +76,12 @@ export const notifications = {
 };
 web.render(document.body, notifications.$container);
 for (const notification of notifications.provider) {
-  if (
+  const cached = notifications.cache.includes(notification.id),
-    !notifications.cache.includes(notification.id) &&
+    versionMatches = notification.version === env.version,
-    notification.version === env.version &&
+    envMatches = !notification.environments || notification.environments.includes(env.name);
-    (!notification.environments || notification.environments.includes(env.name))
+  if (!cached && versionMatches && envMatches) notifications.add(notification);
-  ) {
-    notifications.add(notification);
-  }
 }
-
-const errors = await registry.errors();
 if (errors.length) {
-  console.log('[notion-enhancer] registry errors:');
-  console.table(errors);
   notifications.add({
     icon: 'alert-circle',
     message: 'Failed to load mods (check console).',

repo/menu/menu.mjs

@@ -6,21 +6,17 @@
 
 'use strict';
 
-import { env, fs, storage, registry, web, components } from '../../api/_.mjs';
+import './launcher.mjs';
-import { notifications } from './notifications.mjs';
-import { blocks, options } from './blocks.mjs';
 import './styles.mjs';
 
+import { env, fs, storage, registry, web, components } from '../../api/_.mjs';
+import { notifications } from './launcher.mjs';
+import { cards, options } from './components.mjs';
+
 const db = await registry.db('a6621988-551d-495a-97d8-3c568bca2e9e'),
   profileName = await registry.profileName(),
   profileDB = await registry.profileDB();
 
-for (const mod of await registry.list((mod) => registry.enabled(mod.id))) {
-  for (const sheet of mod.css?.menu || []) {
-    web.loadStylesheet(`repo/${mod._dir}/${sheet}`);
-  }
-}
-
 web.addHotkeyListener(await db.get(['hotkey']), env.focusNotion);
 
 const loadTheme = async () => {
@@ -204,7 +200,7 @@ const _$modListCache = {},
     },
     mod: async (mod) => {
       const $mod = web.html`<div class="mod" data-id="${web.escape(mod.id)}"></div>`,
-        $toggle = blocks.toggle('', await registry.enabled(mod.id));
+        $toggle = cards.toggle('', await registry.enabled(mod.id));
       $toggle.addEventListener('change', async (event) => {
         if (event.target.checked && mod.tags.includes('theme')) {
           const mode = mod.tags.includes('light') ? 'light' : 'dark',
@@ -233,8 +229,8 @@ const _$modListCache = {},
         }
         $mod.className = 'mod-selected';
         const fragment = [
-          web.render(blocks.title(mod.name), blocks.version(mod.version)),
+          web.render(cards.title(mod.name), cards.version(mod.version)),
-          blocks.tags(mod.tags),
+          cards.tags(mod.tags),
           await generators.options(mod),
         ];
         web.render(web.empty($options), ...fragment);
@@ -244,7 +240,7 @@ const _$modListCache = {},
         web.render(
           $mod,
           mod.preview
-            ? blocks.preview(
+            ? cards.preview(
                 mod.preview.startsWith('http')
                   ? mod.preview
                   : fs.localPath(`repo/${mod._dir}/${mod.preview}`)
@@ -252,10 +248,10 @@ const _$modListCache = {},
             : '',
           web.render(
             web.html`<div class="mod-body"></div>`,
-            web.render(blocks.title(mod.name), blocks.version(mod.version)),
+            web.render(cards.title(mod.name), cards.version(mod.version)),
-            blocks.tags(mod.tags),
+            cards.tags(mod.tags),
-            blocks.description(mod.description),
+            cards.description(mod.description),
-            blocks.authors(mod.authors),
+            cards.authors(mod.authors),
             mod.environments.includes(env.name) && !registry.core.includes(mod.id)
               ? $toggle
               : ''

repo/theming/theme.css

@@ -693,6 +693,20 @@ body,
 
 [style*='background: rgb(46, 170, 220)'] {
   background: var(--theme--accent_blue) !important;
+  color: var(--theme--accent_blue-text) !important;
+}
+[style*='background: rgb(6, 156, 205);'] {
+  background: var(--theme--accent_blue-hover) !important;
+  color: var(--theme--accent_blue-text) !important;
+}
+[style*='background: rgb(0, 141, 190);'] {
+  background: var(--theme--accent_blue-active) !important;
+  color: var(--theme--accent_blue-text) !important;
+}
+[style*='background: rgb(46, 170, 220)'] .chevronDown,
+[style*='background: rgb(6, 156, 205);'] .chevronDown,
+[style*='background: rgb(0, 141, 190);'] .chevronDown {
+  fill: var(--theme--accent_blue-text) !important;
 }
 [style*='fill: rgb(46, 170, 220)'] {
   fill: var(--theme--accent_blue) !important;
@@ -734,13 +748,6 @@ body,
   }
 }
 
-[style*='background: rgb(6, 156, 205);'] {
-  background: var(--theme--accent_blue-hover) !important;
-}
-[style*='background: rgb(0, 141, 190);'] {
-  background: var(--theme--accent_blue-active) !important;
-}
-
 [style*='background-color: rgb(235, 87, 87); height: 28px; width: 28px;'],
 .notion-login [style*='background: rgb(225, 98, 89)'],
 .notion-login [style*='background: rgb(207, 83, 74)'],