common tweaks ext: #168, #176 - scrollbars, thicker bold, responsiveness, hide help, snappy transitions, dragarea height

repo/calendar-scroll/mod.js

@@ -6,7 +6,7 @@
 
 'use strict';
 
-const helpers = require('../../pkg/helpers.js');
+const { createElement } = require('../../pkg/helpers.js');
 
 module.exports = {
   id: 'b1c7db33-dfee-489a-a76c-0dd66f7ed29a',
@@ -26,7 +26,7 @@ module.exports = {
           if (!notion_elem) return;
           clearInterval(attempt_interval);
 
-          const button = helpers.createElement(
+          const button = createElement(
             '<button id="calendar-scroll-to-week">Scroll</button>'
           );
           button.addEventListener('click', (event) => {

repo/core/client.js

@@ -79,12 +79,6 @@ module.exports = (store, __exports) => {
       return;
     clearInterval(attempt_interval);
 
-    // toggleable styles
-    if (store().smooth_scrollbars)
-      document.body.classList.add('smooth-scrollbars');
-    if (store().snappy_transitions)
-      document.body.classList.add('snappy-transitions');
-
     // frameless
     if (store().frameless && !store().tiling_mode && !tabsEnabled) {
       document.body.classList.add('frameless');
@@ -92,10 +86,6 @@ module.exports = (store, __exports) => {
       document
         .querySelector('.notion-topbar')
         .prepend(helpers.createElement('<div class="window-dragarea"></div>'));
-      document.documentElement.style.setProperty(
-        '--configured--dragarea_height',
-        `${store().dragarea_height + 2}px`
-      );
     }
 
     // window buttons

repo/core/css/responsive.css

@@ -1,26 +0,0 @@
-/*
- * notion-enhancer
- * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
- * under the MIT license
- */
-
-@media (max-width: 600px) {
-  .notion-column_list-block [style='display: flex;'] > div {
-    width: 100% !important;
-  }
-  .notion-column_list-block [style='display: flex;'] {
-    flex-direction: column !important;
-  }
-
-  .notion-app-inner {
-    --theme_dark--page_normal-width: 100%;
-    --theme_dark--page-padding: calc(48px + env(safe-area-inset-left));
-    --theme_light--page_normal-width: 100%;
-    --theme_light--page-padding: calc(48px + env(safe-area-inset-left));
-  }
-}
-
-.snappy-transitions * {
-  animation-duration: 0s !important;
-  transition-duration: 0s !important;
-}

repo/core/css/scrollbars.css

@@ -5,25 +5,25 @@
  * under the MIT license
  */
 
-.smooth-scrollbars .notion-scroller {
+[data-tweaks*='[smooth_scrollbars]'] .notion-scroller {
   cursor: auto;
 }
-.smooth-scrollbars ::-webkit-scrollbar {
+[data-tweaks*='[smooth_scrollbars]'] ::-webkit-scrollbar {
   width: 8px; /* vertical */
   height: 8px; /* horizontal */
   -webkit-app-region: no-drag;
 }
-.smooth-scrollbars ::-webkit-scrollbar-corner {
+[data-tweaks*='[smooth_scrollbars]'] ::-webkit-scrollbar-corner {
   background-color: transparent; /* overlap */
 }
-.smooth-scrollbars ::-webkit-scrollbar-thumb {
+[data-tweaks*='[smooth_scrollbars]'] ::-webkit-scrollbar-thumb {
   border-radius: 5px;
 }
 
-.smooth-scrollbars ::-webkit-scrollbar-thumb {
+[data-tweaks*='[smooth_scrollbars]'] ::-webkit-scrollbar-thumb {
   background-color: var(--theme--scrollbar);
   border: 1px solid var(--theme--scrollbar-border);
 }
-.smooth-scrollbars ::-webkit-scrollbar-thumb:hover {
+[data-tweaks*='[smooth_scrollbars]'] ::-webkit-scrollbar-thumb:hover {
   background: var(--theme--scrollbar_hover);
 }

repo/core/enhancerMenu.js

@@ -503,8 +503,11 @@ window['__start'] = async () => {
         );
     }
 
-    const enabled = store('mods', { [mod.id]: { enabled: false } })[mod.id]
+    const enabled =
-        .enabled,
+        mod.alwaysActive ||
+        store('mods', {
+          [mod.id]: { enabled: false },
+        })[mod.id].enabled,
       author =
         typeof mod.author === 'object'
           ? mod.author
@@ -514,14 +517,10 @@ window['__start'] = async () => {
               avatar: `https://github.com/${mod.author}.png`,
             };
     mod.elem = helpers.createElement(`
-    <section class="${
+    <section class="${enabled ? 'enabled' : 'disabled'}" id="${mod.id}">
-      mod.id === '0f0bf8b6-eae6-4273-b307-8fc43f2ee082' || enabled
-        ? 'enabled'
-        : 'disabled'
-    }" id="${mod.id}">
         <div class="meta">
         <h3 ${
-          mod.id === '0f0bf8b6-eae6-4273-b307-8fc43f2ee082'
+          mod.alwaysActive
             ? `>${mod.name}`
             : `class="toggle">
               <input type="checkbox" id="enable_${mod.id}"

repo/core/menu.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="smooth-scrollbars" lang="en">
+<html data-tweaks="[smooth_scrollbars]" lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

repo/core/mod.js

@@ -8,6 +8,7 @@
 
 module.exports = {
   id: '0f0bf8b6-eae6-4273-b307-8fc43f2ee082',
+  alwaysActive: true,
   tags: ['core'],
   name: 'notion-enhancer core',
   desc: 'the cli, modloader, menu, & tray.',
@@ -53,14 +54,6 @@ module.exports = {
       type: 'toggle',
       value: true,
     },
-    {
-      key: 'dragarea_height',
-      label: 'height of frameless dragarea:',
-      description: `the rectangle added at the top of a window in "integrated titlebar" mode,
-        used to drag/move the window.`,
-      type: 'input',
-      value: 15,
-    },
     {
       key: 'tiling_mode',
       label: 'tiling window manager mode',
@@ -69,18 +62,6 @@ module.exports = {
       type: 'toggle',
       value: false,
     },
-    {
-      key: 'smooth_scrollbars',
-      label: 'integrated scrollbars',
-      type: 'toggle',
-      value: true,
-    },
-    {
-      key: 'snappy_transitions',
-      label: 'snappy transitions',
-      type: 'toggle',
-      value: false,
-    },
     {
       key: 'hotkey',
       label: 'window display hotkey:',

repo/core/render.js

@@ -1071,7 +1071,7 @@ module.exports = (store, __exports) => {
             dragarea.setAttribute(
               'style',
               `${default_styles} top: 2px; height: ${
-                store().dragarea_height
+                store('cf8a7b27-5a4c-4d45-a4cb-1d2bbc9e9014').dragarea_height
               }px; left: ${event.args[0]};`
             );
           });

repo/core/styles.css

@@ -8,4 +8,3 @@
 @import './css/variables.css';
 @import './css/scrollbars.css';
 @import './css/titlebar.css';
-@import './css/responsive.css';

repo/custom-inserts/mod.js

@@ -6,7 +6,7 @@
 
 'use strict';
 
-const helpers = require('../../pkg/helpers.js');
+const { createElement } = require('../../pkg/helpers.js');
 
 module.exports = {
   id: 'b4b0aced-2059-43bf-8d1d-ccd757ee5ebb',
@@ -40,7 +40,7 @@ module.exports = {
             document
               .querySelector('head')
               .appendChild(
-                helpers.createElement(
+                createElement(
                   `<style type="text/css">${fs.readFileSync(
                     store().css
                   )}</style>`

repo/hide-help/mod.js

@@ -1,16 +0,0 @@
-/*
- * hide help button
- * (c) 2020 coryzibell
- * under the MIT license
- */
-
-'use strict';
-
-module.exports = {
-  id: 'd4ebe9f3-974a-4c01-a6a9-94bc4296851d',
-  tags: ['extension'],
-  name: 'hide help',
-  desc: "hide the help button if you don't need it.",
-  version: '1.0.0',
-  author: 'coryzibell',
-};

repo/hide-help/styles.css

@@ -1,9 +0,0 @@
-/*
- * hide help button
- * (c) 2020 coryzibell
- * under the MIT license
- */
-
-.notion-help-button {
-  display: none !important;
-}

repo/property-layout/mod.js

@@ -7,7 +7,7 @@
 
 'use strict';
 
-const helpers = require('../../pkg/helpers.js');
+const { createElement } = require('../../pkg/helpers.js');
 
 module.exports = {
   id: '4034a578-7dd3-4633-80c6-f47ac5b7b160',
@@ -42,7 +42,7 @@ module.exports = {
               'propertylayout-enhanced',
               'propertylayout-hidden'
             );
-            const toggle = helpers.createElement(
+            const toggle = createElement(
               '<button class="propertylayout-toggle" data-action="show">properties</button>'
             );
             toggle.addEventListener('click', (event) => {

repo/tweaks/mod.js

@@ -0,0 +1,91 @@
+/*
+ * tweaks
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * under the MIT license
+ */
+
+'use strict';
+
+module.exports = {
+  id: 'cf8a7b27-5a4c-4d45-a4cb-1d2bbc9e9014',
+  alwaysActive: true,
+  tags: ['core', 'extension'],
+  name: 'tweaks',
+  desc: 'common style/layout changes.',
+  version: '0.1.0',
+  author: 'dragonwocky',
+  options: [
+    {
+      key: 'dragarea_height',
+      label: 'height of frameless dragarea:',
+      description: `the rectangle added at the top of a window in "integrated titlebar" mode,
+        used to drag/move the window.`,
+      type: 'input',
+      value: 15,
+    },
+    {
+      key: 'responsive_breakpoint',
+      label: 'width to wrap columns at:',
+      description: `the size in pixels below which in-page columns are resized to appear
+        full width so content isn't squished.`,
+      type: 'input',
+      value: 600,
+    },
+    {
+      key: 'smooth_scrollbars',
+      label: 'integrated scrollbars',
+      description:
+        "use scrollbars that fit better into notion's ui instead of the default chrome ones.",
+      type: 'toggle',
+      value: true,
+    },
+    {
+      key: 'snappy_transitions',
+      label: 'snappy transitions',
+      type: 'toggle',
+      value: false,
+    },
+    {
+      key: 'thicker_bold',
+      label: 'thicker bold text',
+      type: 'toggle',
+      value: false,
+    },
+    {
+      key: 'hide_help',
+      label: 'hide help button',
+      type: 'toggle',
+      value: false,
+    },
+  ],
+  hacks: {
+    'renderer/preload.js': (store, __exports) => {
+      document.addEventListener('readystatechange', (event) => {
+        if (document.readyState !== 'complete') return false;
+        document.body.dataset.tweaks = [
+          'smooth_scrollbars',
+          'snappy_transitions',
+          'hide_help',
+          'thicker_bold',
+        ]
+          .filter((tweak) => store()[tweak])
+          .map((tweak) => `[${tweak}]`)
+          .join('');
+        document.documentElement.style.setProperty(
+          '--configured--dragarea_height',
+          `${store().dragarea_height + 2}px`
+        );
+        const addResponsiveBreakpoint = () => {
+          document.body.dataset.tweaks = document.body.dataset.tweaks.replace(
+            /\[responsive_breakpoint\]/g,
+            ''
+          );
+          if (window.outerWidth <= store().responsive_breakpoint)
+            document.body.dataset.tweaks += '[responsive_breakpoint]';
+        };
+        window.addEventListener('resize', addResponsiveBreakpoint);
+        addResponsiveBreakpoint();
+      });
+    },
+  },
+};

repo/tweaks/styles.css

@@ -0,0 +1,38 @@
+/*
+ * tweaks
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * under the MIT license
+ */
+
+[data-tweaks*='[responsive_breakpoint]']
+  .notion-column_list-block
+  [style='display: flex;']
+  > div {
+  width: 100% !important;
+}
+[data-tweaks*='[responsive_breakpoint]']
+  .notion-column_list-block
+  [style='display: flex;'] {
+  flex-direction: column !important;
+}
+[data-tweaks*='[responsive_breakpoint]'] .notion-app-inner {
+  --theme_dark--page_normal-width: 100%;
+  --theme_dark--page-padding: calc(48px + env(safe-area-inset-left));
+  --theme_light--page_normal-width: 100%;
+  --theme_light--page-padding: calc(48px + env(safe-area-inset-left));
+}
+
+[data-tweaks*='[snappy_transitions]'] * {
+  animation-duration: 0s !important;
+  transition-duration: 0s !important;
+}
+
+[data-tweaks*='[hide_help]'] .notion-help-button {
+  display: none !important;
+}
+
+[data-tweaks*='[thicker_bold]']
+  .notion-page-content
+  span[style*='font-weight:600'] {
+  font-weight: 700 !important;
+}

repo/weekly-view/mod.js

@@ -16,41 +16,38 @@ module.exports = {
   author: 'adihd',
   hacks: {
     'renderer/preload.js'(store, __exports) {
-      document.addEventListener('readystatechange', (event) => {
+      const attempt_interval = setInterval(enhance, 500);
-        if (document.readyState !== 'complete') return false;
+      function enhance() {
-        const attempt_interval = setInterval(enhance, 500);
+        const notion_elem = document.querySelector('.notion-frame');
-        function enhance() {
+        if (!notion_elem) return;
-          const notion_elem = document.querySelector('.notion-frame');
+        clearInterval(attempt_interval);
-          if (!notion_elem) return;
+        process([{ target: notion_elem }]);
-          clearInterval(attempt_interval);
+        const observer = new MutationObserver(process);
-          process([{ target: notion_elem }]);
+        observer.observe(notion_elem, {
-          const observer = new MutationObserver(process);
+          childList: true,
-          observer.observe(notion_elem, {
+          subtree: true,
-            childList: true,
+        });
-            subtree: true,
+        function process(list, observer) {
-          });
+          document
-          function process(list, observer) {
+            .querySelectorAll('.notion-collection-view-select')
-            document
+            .forEach((collection_view) => {
-              .querySelectorAll('.notion-collection-view-select')
+              if (collection_view.innerText != 'weekly') return;
-              .forEach((collection_view) => {
+              const days = collection_view.parentElement.parentElement.parentElement.parentElement.getElementsByClassName(
-                if (collection_view.innerText != 'weekly') return;
+                  'notion-calendar-view-day'
-                const days = collection_view.parentElement.parentElement.parentElement.parentElement.getElementsByClassName(
+                ),
-                    'notion-calendar-view-day'
+                today = [...days].find((day) => day.style.background),
-                  ),
+                height = today
-                  today = [...days].find((day) => day.style.background),
+                  ? getComputedStyle(
-                  height = today
+                      today.parentElement.parentElement
-                    ? getComputedStyle(
+                    ).getPropertyValue('height')
-                        today.parentElement.parentElement
+                  : 0;
-                      ).getPropertyValue('height')
+              for (let day of days)
-                    : 0;
+                day.parentElement.parentElement.style.height = 0;
-                for (let day of days)
+              if (today)
-                  day.parentElement.parentElement.style.height = 0;
+                today.parentElement.parentElement.style.height = height;
-                if (today)
+            });
-                  today.parentElement.parentElement.style.height = height;
-              });
-          }
         }
-      });
+      }
     },
   },
 };

repo/word-counter/mod.js

@@ -6,9 +6,7 @@
 
 'use strict';
 
-const { createElement } = require('../../pkg/helpers.js'),
+const { createElement } = require('../../pkg/helpers.js');
-  fs = require('fs-extra'),
-  path = require('path');
 
 module.exports = {
   id: 'b99deb52-6955-43d2-a53b-a31540cd19a5',
@@ -44,10 +42,7 @@ module.exports = {
             if (2 <= secs) readable += 's';
           }
           return readable;
-        },
+        };
-        questionBubble = fs
-          .readFileSync(path.resolve(`${__dirname}/../core/icons/question.svg`))
-          .toString();
 
       document.addEventListener('readystatechange', (event) => {
         if (document.readyState !== 'complete') return false;
@@ -109,12 +104,24 @@ module.exports = {
               (prev, key) =>
                 prev +
                 (Array.isArray(details[key])
-                  ? `<p><b>${
+                  ? `<p>
-                      details[key][0]
+                      <b>${details[key][0]}</b> ${key} 
-                    }</b> ${key} ${questionBubble.replace(
+                      <!-- from https://fontawesome.com/icons/question-circle?style=regular -->
-                      '<svg',
+                      <svg data-tooltip="${details[key][1]}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-                      `<svg data-tooltip="${details[key][1]}"`
+                        <path
-                    )}</p>`
+                          fill="currentColor"
+                          d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003
+                          248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200
+                          0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200
+                          200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627
+                          0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579
+                          0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666
+                          2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112
+                          261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841
+                          42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z"
+                        ></path>
+                      </svg>
+                    </p>`
                   : `<p><b>${details[key]}</b> ${key}</p>`),
               ''
             )}`;