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

2025-04-06 21:49:03 +00:00 · 2021-10-10 01:28:24 +11:00 · 2021-10-10 01:28:24 +11:00 · 02c085e832
commit 02c085e832
parent bb42117024
11 changed files with 214 additions and 60 deletions
--- a/repo/dark+/mod.json
+++ b/repo/dark+/mod.json
@ -17,6 +17,25 @@
    "client": ["variables.css"],
    "menu": ["variables.css"]
  },
-  "js": {},
-  "options": []
+  "js": {
+    "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)"
+    }
+  ]
 }
--- a/repo/dark+/theme.mjs
+++ b/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)
+      );
+    }
+  }
+}
--- a/repo/dark+/variables.css
+++ b/repo/dark+/variables.css
@ -5,12 +5,14 @@
 */

 :root.dark {
-  --theme--accent_blue: rgb(213, 36, 36);
-  --theme--accent_blue-selection: rgba(177, 24, 24, 0.245);
-  --theme--accent_blue-hover: rgb(211, 57, 57);
-  --theme--accent_blue-active: rgb(199, 59, 59);
-  --theme--accent_red: rgb(213, 36, 36);
-  --theme--accent_red-button: rgb(177, 24, 24, 0.1);
+  --theme--accent_blue: var(--dark_plus--accent_blue);
+  --theme--accent_blue-selection: var(--dark_plus--accent_blue-selection);
+  --theme--accent_blue-hover: var(--dark_plus--accent_blue-hover);
+  --theme--accent_blue-active: var(--dark_plus--accent_blue-active);
+  --theme--accent_blue-text: var(--dark_plus--accent_blue-text);
+  --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);
--- a/repo/light+/mod.json
+++ b/repo/light+/mod.json
@ -16,6 +16,25 @@
    "client": ["variables.css"],
    "menu": ["variables.css"]
  },
-  "js": {},
-  "options": []
+  "js": {
+    "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)"
+    }
+  ]
 }
--- a/repo/light+/theme.mjs
+++ b/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)
+      );
+    }
+  }
+}
--- a/repo/light+/variables.css
+++ b/repo/light+/variables.css
@ -6,8 +6,14 @@
 */

 :root {
-  --theme--accent_red: crimson;
-  --theme--accent_red-button: rgba(220, 20, 60, 0.2);
+  --theme--accent_blue: var(--light_plus--accent_blue);
+  --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);
--- a/repo/menu/client.mjs
+++ b/repo/menu/client.mjs
@ -32,10 +32,7 @@ export default async function (api, db) {

  const notifications = {
    cache: await storage.get(['notifications'], []),
-    provider: [
-      registry.welcomeNotification,
-      ...(await fs.getJSON('https://notion-enhancer.github.io/notifications.json')),
-    ],
+    provider: [registry.welcomeNotification, ...(await fs.getJSON(registry.notificationsURL))],
    count: (await registry.errors()).length,
  };
  for (const notification of notifications.provider) {
--- a/repo/menu/components.mjs
+++ b/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)}"
--- a/repo/menu/notifications.mjs
+++ b/repo/menu/notifications.mjs
@ -4,18 +4,29 @@
 * (https://notion-enhancer.github.io/) under the MIT license
 */

-'use strict';
-
-import { env, fs, storage, fmt, registry, web, components } from '../../api/_.mjs';
+import * as api from '../../api/_.mjs';
+const { env, fs, storage, fmt, registry, web, components } = api;
 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: [
-    registry.welcomeNotification,
-    ...(await fs.getJSON('https://notion-enhancer.github.io/notifications.json')),
-  ],
+  provider: [registry.welcomeNotification, ...(await fs.getJSON(registry.notificationsURL))],
  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 (
-    !notifications.cache.includes(notification.id) &&
-    notification.version === env.version &&
-    (!notification.environments || notification.environments.includes(env.name))
-  ) {
-    notifications.add(notification);
-  }
+  const cached = notifications.cache.includes(notification.id),
+    versionMatches = notification.version === env.version,
+    envMatches = !notification.environments || notification.environments.includes(env.name);
+  if (!cached && versionMatches && envMatches) 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).',
--- a/repo/menu/menu.mjs
+++ b/repo/menu/menu.mjs
@ -6,21 +6,17 @@

 'use strict';

-import { env, fs, storage, registry, web, components } from '../../api/_.mjs';
-import { notifications } from './notifications.mjs';
-import { blocks, options } from './blocks.mjs';
+import './launcher.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)),
-          blocks.tags(mod.tags),
+          web.render(cards.title(mod.name), cards.version(mod.version)),
+          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)),
-            blocks.tags(mod.tags),
-            blocks.description(mod.description),
-            blocks.authors(mod.authors),
+            web.render(cards.title(mod.name), cards.version(mod.version)),
+            cards.tags(mod.tags),
+            cards.description(mod.description),
+            cards.authors(mod.authors),
            mod.environments.includes(env.name) && !registry.core.includes(mod.id)
              ? $toggle
              : ''
--- a/repo/theming/theme.css
+++ b/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)'],