mod info boxes

DOCUMENTATION.md

@@ -36,12 +36,11 @@ each directory in the `mods` folder is considered a module, with the entry point
 // of this file's exported object.
 module.exports = {
   id: String of uuidv4,
-  type: String in ['extension', 'theme'],
   name: String of short_name,
-  desc: String of paragraph,
+  tags?: Array<String> of categories,
+  desc: String of markdown,
   version: String of semver,
   author: String of github_username,
-  thumbnail?: String of [relative_file, url],
   options?: {
     key: String,
     label: String,
@@ -54,17 +53,16 @@ module.exports = {
 };
 ```
 
-| key       | value                                                                                           | type              |
+| key     | value                                                                                              | type              |
-| --------- | ----------------------------------------------------------------------------------------------- | ----------------- |
+| ------- | -------------------------------------------------------------------------------------------------- | ----------------- |
-| id        | **required:** uuidv4                                                                            | _string_          |
+| id      | **required:** uuidv4                                                                               | _string_          |
-| type      | **required:** 'extension' or 'theme'                                                            | _string_          |
+| name    | **required:** short name (e.g. 'frameless window')                                                 | _string_          |
-| name      | **required:** short name (e.g. 'frameless window')                                              | _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.                              | _string_          |
+| desc    | **optional:** 1-3 sentence description of what the module is/does, with basic markdown formatting. | _string_          |
-| version   | **required:** semver (e.g. '0.3.7')                                                             | _string_          |
+| version | **required:** semver (e.g. '0.3.7')                                                                | _string_          |
-| author    | **required:** github username                                                                   | _string_          |
+| author  | **required:** github username                                                                      | _string_          |
-| thumbnail | **optional:** image: relative file or url                                                       | _string_          |
+| 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_          |
-| hacks     | **optional:** see below: code inserted at various points                                        | _object_          |
 
 #### options
 

mods/core/client.js

@@ -21,30 +21,30 @@ module.exports = (defaults) =>
     // additional hotkeys
     document.defaultView.addEventListener('keyup', (event) => {
       if (event.code === 'F5') window.reload();
+      if (event.key === 'e' && (event.ctrlKey || event.metaKey))
+        electron.ipcRenderer.send('enhancer:open-extension-menu');
     });
 
-    const interval_attempts = {
+    const attempt_interval = setInterval(enhance, 500);
-      enhance: setInterval(enhance, 500),
-    };
     async function enhance() {
       if (!document.querySelector('.notion-frame')) return;
-      clearInterval(interval_attempts.enhance);
+      clearInterval(attempt_interval);
 
       // scrollbars
       if (settings.smooth_scrollbars) {
         document.body.classList.add('smooth-scrollbars');
-        interval_attempts.patchScrollbars = setInterval(patchScrollbars, 50);
+        // interval_attempts.patchScrollbars = setInterval(patchScrollbars, 100);
-        function patchScrollbars() {
+        // function patchScrollbars() {
-          const sidebar = document.querySelector(
+        //   const sidebar = document.querySelector(
-            '.notion-scroller.vertical[style*="overflow: hidden auto;"]'
+        //     '.notion-scroller.vertical[style*="overflow: hidden auto;"]'
-          );
+        //   );
-          if (!sidebar) return;
+        //   if (!sidebar) return;
-          clearInterval(interval_attempts.patchScrollbars);
+        //   clearInterval(interval_attempts.patchScrollbars);
-          sidebar.style.overflow = '';
+        //   sidebar.style.overflow = '';
-          setTimeout(() => {
+        //   setTimeout(() => {
-            sidebar.style.overflow = 'hidden auto';
+        //     sidebar.style.overflow = 'hidden auto';
-          }, 10);
+        //   }, 10);
-        }
+        // }
       }
 
       // frameless

mods/core/css/menu.css

@@ -28,6 +28,7 @@ body {
   height: 100%;
   margin: 0;
   padding: 0;
+  overflow: hidden;
 }
 
 body:not([style]) > * {
@@ -63,6 +64,39 @@ body:not([style])::after {
   background: var(--theme_light--main);
 }
 
+main {
+  padding: 1em;
+  height: 100%;
+  overflow: auto;
+}
+
+main section {
+  border-radius: 2px;
+  padding: 0.75em;
+  margin-bottom: 0.75em;
+}
+
+/* inline formatting */
+
+code {
+  border-radius: 0.1em;
+  padding: 0.2em 0.4em;
+}
+.notion-dark-theme code {
+  font: 0.85em var(--theme_dark--font_code);
+  /* color: var(--theme_dark--code_inline-text); */
+  background: var(--theme_dark--code_inline-background);
+}
+.notion-light-theme code {
+  font: 0.85em var(--theme_light--font_code);
+  /* color: var(--theme_light--code_inline-text); */
+  background: var(--theme_light--code_inline-background);
+}
+
+u {
+  text-decoration: underline;
+}
+
 .notion-dark-theme,
 .notion-dark-theme button {
   color: var(--theme_dark--text);
@@ -74,6 +108,18 @@ body:not([style])::after {
   font-family: var(--theme_light--font_sans);
 }
 
+/* titlebar */
+
+#menu-titlebar::before {
+  content: '';
+  position: absolute;
+  width: 100%;
+  -webkit-app-region: no-drag;
+  top: 0;
+  left: 0;
+  height: 2px;
+}
+
 #menu-titlebar {
   display: flex;
   padding: 0.4em;
@@ -92,14 +138,10 @@ body:not([style])::after {
   background: var(--theme_light--dragarea);
 }
 
-main {
+/* alerts */
-  padding: 1em;
-}
 
 #alerts [role='alert'] {
-  padding: 0.25em;
   display: flex;
-  margin-bottom: 0.75em;
 }
 #alerts [role='alert']::before {
   content: '!';
@@ -107,12 +149,12 @@ main {
   /* margin: auto 0; */
   font-weight: bold;
   font-size: 1.2em;
-  padding: 0.5rem;
+  padding-right: 0.5rem;
 }
 #alerts [role='alert'] p {
   font-size: 1rem;
   margin: auto 0;
-  padding: 0.5em;
+  padding-left: 0.5em;
 }
 
 .notion-dark-theme #alerts [role='alert'] p {
@@ -176,21 +218,66 @@ main {
   background: var(--theme_light--line_green);
 }
 
-code {
+/* modules */
-  border-radius: 0.1em;
+
-  padding: 0.2em 0.4em;
+.notion-dark-theme #modules section {
+  background: var(--theme_dark--sidebar);
+  border: 1px solid var(--theme_dark--table-border);
 }
-.notion-dark-theme code {
+.notion-light-theme #modules section {
-  font: 0.85em var(--theme_dark--font_code);
+  background: var(--theme_light--sidebar);
-  /* color: var(--theme_dark--code_inline-text); */
+  border: 1px solid var(--theme_light--card-border);
-  background: var(--theme_dark--code_inline-background);
-}
-.notion-light-theme code {
-  font: 0.85em var(--theme_light--font_code);
-  /* color: var(--theme_light--code_inline-text); */
-  background: var(--theme_light--code_inline-background);
 }
 
-u {
+#modules section h3,
-  text-decoration: underline;
+#modules section p {
+  margin: 0;
+  font-size: 1rem;
+}
+
+#modules section .desc {
+  margin: 0.3em 0 0.4em 0;
+  font-size: 0.9em;
+}
+#modules section .desc a {
+  color: currentColor;
+  text-decoration: underline dotted;
+}
+#modules section .desc s {
+  text-decoration: line-through;
+}
+#modules section .desc img {
+  width: 100%;
+  max-width: 20em;
+  margin: 0.5em 0;
+}
+#modules section .desc img:first-child {
+  margin-top: 0;
+}
+#modules section .desc img:last-child {
+  margin-bottom: 0;
+}
+
+#modules section .author {
+  color: currentColor;
+}
+#modules section .author img {
+  max-height: 1em;
+  max-width: 1em;
+  margin-bottom: 0.15625em;
+  display: inline-block;
+  vertical-align: middle;
+  border-radius: 50%;
+}
+#modules section .tags,
+#modules section .version {
+  font-size: 0.85em;
+}
+.notion-dark-theme #modules section .tags,
+.notion-dark-theme #modules section .version {
+  color: var(--theme_dark--text_ui);
+}
+.notion-light-theme #modules section .tags,
+.notion-light-theme #modules section .version {
+  color: var(--theme_light--text_ui);
 }

mods/core/menu.html

@@ -1,10 +1,11 @@
 <!DOCTYPE html>
-<html lang="en">
+<html class="smooth-scrollbars" lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>notion-enhancer menu</title>
     <link rel="stylesheet" href="./css/menu.css" />
+    <script src="https://unpkg.com/snarkdown@1.0.2/dist/snarkdown.umd.js"></script>
   </head>
   <body>
     <header id="menu-titlebar"></header>

mods/core/menu.js

@@ -9,14 +9,23 @@
 const __mod = require('./mod.js'),
   store = require('../../pkg/store.js'),
   helpers = require('../../pkg/helpers.js'),
-  electron = require('electron');
+  electron = require('electron'),
+  browser = electron.remote.getCurrentWindow();
 
 window['__start'] = async () => {
   const buttons = require('./buttons.js');
   document.querySelector('#menu-titlebar').appendChild(buttons.element);
 
+  document.defaultView.addEventListener('keyup', (event) => {
+    if (event.code === 'F5') window.reload();
+    if (event.key === 'e' && (event.ctrlKey || event.metaKey)) {
+      electron.remote.BrowserWindow.getAllWindows()[0].show();
+      browser.close();
+    }
+  });
+
   electron.ipcRenderer.on('enhancer:set-theme', (event, theme) => {
-    document.body.className = `notion-${theme.mode}-theme smooth-scrollbars`;
+    document.body.className = `notion-${theme.mode}-theme`;
     for (const style of theme.rules)
       document.body.style.setProperty(style[0], style[1]);
   });
@@ -85,6 +94,7 @@ window['__start'] = async () => {
       ).prepend();
     });
 
+  // mod loader
   const modules = helpers.getEnhancements();
   if (modules.loaded.length)
     console.info(
@@ -100,4 +110,44 @@ window['__start'] = async () => {
         .join(', ')}.`
     ).append();
   }
+
+  // mod options
+  function markdown(string) {
+    return snarkdown(
+      string
+        .split('\n')
+        .map((line) => line.trim())
+        .join('<br>')
+    ).replace(/([^\\])?~~([^\n]*[^\\])~~/g, '$1<s>$2</s>');
+  }
+  const $modules = document.querySelector('#modules');
+  for (let mod of modules.loaded.sort((a, b) =>
+    store('mods', { [mod.id]: { pinned: false } }).pinned
+      ? 1
+      : a.name.localeCompare(b.name)
+  )) {
+    $modules.append(
+      createElement(`
+      <section class="${
+        mod.type === 'core' ||
+        store('mods', { [mod.id]: { enabled: false } }).enabled
+          ? 'enabled'
+          : 'disabled'
+      }" id="${mod.id}">
+        <h3>${mod.name}</h3>
+        <p class="tags">${mod.tags
+          .map((tag) => (tag.startsWith('#') ? tag : `#${tag}`))
+          .join(' ')}</p>
+        <p class="desc">${markdown(mod.desc)}</p>
+        <p>
+          <a href="https://github.com/${mod.author}" class="author">
+            <img src="https://github.com/${mod.author}.png" />
+            ${mod.author}
+          </a>
+          <span class="version">v${mod.version}</span>
+        </p>
+      </section>
+    `)
+    );
+  }
 };

mods/core/mod.js

@@ -18,10 +18,10 @@ const defaults = {
 
 module.exports = {
   id: '0f0bf8b6-eae6-4273-b307-8fc43f2ee082',
-  type: 'core',
+  tags: ['core', 'extension'],
   name: 'notion-enhancer core',
-  desc:
+  desc: `the **modloader** itself, _including_: the [CLI](https://github.com), the menu, and ~~enabling/disabling/insertion/updating of~~ mods.
-    'the modloader itself, including: the CLI, the menu, and enabling/disabling/insertion/updating of mods.',
+    ![](https://preview.redd.it/vtiw9ulqlt951.png?width=1368&format=png&auto=webp&s=733d8b27ec62151c7858b4eca463f809ead6395a)`,
   version: require('../../package.json').version,
   author: 'dragonwocky',
   thumb:

mods/core/tray.js

@@ -35,6 +35,7 @@ module.exports = (defaults) =>
         if (!enhancer_menu) return;
         enhancer_menu.webContents.send('enhancer:set-theme', arg);
       });
+      electron.ipcMain.on('enhancer:open-extension-menu', openExtensionMenu);
 
       function calculateWindowPos(width, height) {
         const screen = electron.screen.getDisplayNearestPoint({
@@ -70,6 +71,43 @@ module.exports = (defaults) =>
         };
       }
 
+      function openExtensionMenu() {
+        if (enhancer_menu) return enhancer_menu.show();
+        const window_state = require(`${__notion.replace(
+          /\\/g,
+          '/'
+        )}/app/node_modules/electron-window-state/index.js`)({
+          file: 'menu-windowstate.json',
+          path: helpers.data_folder,
+          defaultWidth: 275,
+          defaultHeight: 600,
+        });
+        electron.shell.openExternal(JSON.stringify(window_state));
+        enhancer_menu = new electron.BrowserWindow({
+          show: true,
+          frame: false,
+          titleBarStyle: 'hiddenInset',
+          x:
+            window_state.x ||
+            calculateWindowPos(window_state.width, window_state.height).x,
+          y:
+            window_state.y ||
+            calculateWindowPos(window_state.width, window_state.height).y,
+          width: window_state.width,
+          height: window_state.height,
+          webPreferences: {
+            preload: path.resolve(`${__dirname}/menu.js`),
+            nodeIntegration: true,
+            session: electron.session.fromPartition('persist:notion'),
+          },
+        });
+        enhancer_menu.loadURL('enhancement://core/menu.html');
+        enhancer_menu.on('close', (e) => {
+          window_state.saveState(enhancer_menu);
+          enhancer_menu = null;
+        });
+      }
+
       const contextMenu = electron.Menu.buildFromTemplate([
         {
           type: 'normal',
@@ -104,42 +142,8 @@ module.exports = (defaults) =>
         {
           type: 'normal',
           label: 'Enhancements',
-          click: () => {
+          accelerator: 'CommandOrControl+E',
-            if (enhancer_menu) return enhancer_menu.show();
+          click: openExtensionMenu,
-            const window_state = require(`${__notion.replace(
-              /\\/g,
-              '/'
-            )}/app/node_modules/electron-window-state/index.js`)({
-              file: 'menu-windowstate.json',
-              path: helpers.data_folder,
-              defaultWidth: 275,
-              defaultHeight: 600,
-            });
-            electron.shell.openExternal(JSON.stringify(window_state));
-            enhancer_menu = new electron.BrowserWindow({
-              show: true,
-              frame: false,
-              titleBarStyle: 'hiddenInset',
-              x:
-                window_state.x ||
-                calculateWindowPos(window_state.width, window_state.height).x,
-              y:
-                window_state.y ||
-                calculateWindowPos(window_state.width, window_state.height).y,
-              width: window_state.width,
-              height: window_state.height,
-              webPreferences: {
-                preload: path.resolve(`${__dirname}/menu.js`),
-                nodeIntegration: true,
-                session: electron.session.fromPartition('persist:notion'),
-              },
-            });
-            enhancer_menu.loadURL('enhancement://core/menu.html');
-            enhancer_menu.on('close', (e) => {
-              window_state.saveState(enhancer_menu);
-              enhancer_menu = null;
-            });
-          },
         },
         {
           type: 'separator',

pkg/helpers.js

@@ -127,8 +127,7 @@ function getEnhancements() {
         modules.IDs.includes(mod.id) ||
         !mod.name ||
         !mod.version ||
-        !mod.author ||
+        !mod.author
-        !['extension', 'theme', 'core'].includes(mod.type)
       )
         throw Error;
       modules.loaded.push({

pkg/loader.js

@@ -48,7 +48,10 @@ module.exports = function (__file, __exports) {
         document.querySelector('head').appendChild(style);
       });
     }
-    if (mod.type === 'core' || store('mods', { [mod.id]: false })[mod.id]) {
+    if (
+      mod.type === 'core' ||
+      store('mods', { [mod.id]: { enabled: false } })[mod.id]
+    ) {
       if (mod.hacks && mod.hacks[__file])
         mod.hacks[__file](
           (...args) =>