Merge submodule contents for repo/dev

repo/.github/workflows/update-parents.yml

@@ -0,0 +1,29 @@
+name: 'update parent repositories'
+
+on:
+  push:
+    branches:
+      - dev
+
+jobs:
+  sync:
+    name: update parent
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        repo: ['notion-enhancer/extension', 'notion-enhancer/desktop']
+    steps:
+      - name: checkout repo
+        uses: actions/checkout@v2
+        with:
+          token: ${{ secrets.CI_TOKEN }}
+          submodules: true
+          repository: ${{ matrix.repo }}
+      - name: pull updates
+        run: |
+          git pull --recurse-submodules
+          git submodule update --remote --recursive
+      - name: commit changes
+        uses: stefanzweifel/git-auto-commit-action@v4
+        with:
+          commit_message: '[${{ github.event.repository.name }}] ${{ github.event.head_commit.message }}'

repo/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

repo/README.md

@@ -0,0 +1,5 @@
+# notion-enhancer/repo
+
+the collection of mods run by the notion-enhancer
+
+[read the docs online](https://notion-enhancer.github.io/getting-started/features)

repo/always-on-top/button.css

@@ -0,0 +1,47 @@
+/**
+ * notion-enhancer: integrated titlebar
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+.always_on_top--button {
+  display: flex;
+  align-items: center;
+}
+.sidebar > .always_on_top--button {
+  margin: 0 0 0.75rem auto;
+}
+
+.always_on_top--button button {
+  user-select: none;
+  transition: background 20ms ease-in 0s;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: 3px;
+  height: 28px;
+  width: 33px;
+  padding: 0 0.25px 0 0;
+
+  margin-left: 2px;
+  border: none;
+  background: transparent;
+  font-size: 18px;
+}
+.always_on_top--button button svg {
+  display: block;
+  width: 20px;
+  height: 20px;
+  fill: var(--theme--icon);
+  color: var(--theme--icon);
+}
+
+.always_on_top--button button:focus,
+.always_on_top--button button:hover {
+  background: var(--theme--ui_interactive-hover);
+}
+.always_on_top--button button:active {
+  background: var(--theme--ui_interactive-active);
+}

repo/always-on-top/button.mjs

@@ -0,0 +1,45 @@
+/**
+ * notion-enhancer: always on top
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+export const createButton = async ({ electron, web, components }, db) => {
+  let pinIcon =
+      (await db.get(['pin_icon'])) ||
+      `<svg viewBox="0 0 20 20" fill="currentColor">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5036 1.13488C14.3765 0.925602 14.2483 0.707495 14.1174 0.479601L14.9536 0C15.6901 1.28291 16.3103 2.18846 17.0583 2.94838C17.8041 3.70619 18.6966 4.33897 20 5.04819L19.5391 5.89451C19.3035 5.76631 19.0792 5.63964 18.865 5.5134L15.0521 9.80084C15.4553 11.0798 15.495 12.4878 15.0464 13.8871C14.727 14.8833 14.1631 15.8645 13.3206 16.7832C13.1407 16.9793 12.8358 16.9926 12.6396 16.8128C12.6328 16.8065 12.6262 16.8001 12.6198 16.7936C12.6184 16.7923 12.6171 16.7909 12.6158 16.7896L12.6157 16.7896L8.83994 13.0156L0.819221 19.8752C0.357424 20.2701 -0.27004 19.6423 0.124825 19.1811L6.98768 11.1642L3.21189 7.39021L3.21188 7.39019C3.21074 7.38905 3.2096 7.38791 3.20847 7.38676C3.19722 7.37583 3.18639 7.36425 3.17604 7.35202C3.00408 7.1489 3.02943 6.84489 3.23266 6.67301C3.87295 6.13148 4.53111 5.70968 5.19581 5.39767C6.91511 4.59063 8.64205 4.5275 10.1724 4.98295L14.5036 1.13488ZM15.0286 1.95762L11.1853 5.37229C12.6878 6.08669 13.9221 7.31677 14.6512 8.80124L16.2331 7.02243L14.6084 5.39847C14.4202 5.21031 14.4202 4.90525 14.6084 4.7171C14.7967 4.52895 15.1019 4.52895 15.2901 4.7171L16.8747 6.30098L18.0377 4.99329C17.4012 4.56407 16.861 4.12205 16.371 3.62414C15.8839 3.12926 15.4531 2.58595 15.0286 1.95762ZM4.26612 7.08121L7.97786 10.7912C7.97786 10.7912 7.97787 10.7912 7.97788 10.7912C8.15977 10.973 8.171 11.264 8.00385 11.4593L8.00384 11.4593L4.79816 15.204L8.54467 11.9999C8.54468 11.9999 8.54468 11.9999 8.54468 11.9999C8.74012 11.8328 9.03128 11.8441 9.21312 12.0258L12.9392 15.7502C13.5101 15.0445 13.8964 14.3165 14.1283 13.5931C15.6562 8.82761 10.5772 3.93621 5.60561 6.26987C5.15973 6.47917 4.71155 6.74739 4.26612 7.08121ZM0.193019 19.1425C0.19283 19.1427 0.192641 19.1428 0.192451 19.143L0.499031 19.5011L0.491164 19.4944L0.499031 19.5011L0.505838 19.5091L0.499032 19.5011L0.857328 19.8076C0.85747 19.8074 0.857613 19.8072 0.857755 19.8071L0.857333 19.8076L0.499031 19.5011L0.192456 19.143L0.193019 19.1425ZM0.499031 19.5011H0.499031L0.499031 19.5011H0.499032L0.499031 19.5011Z"/>
+      </svg>`,
+    unpinIcon =
+      (await db.get(['unpin_icon'])) ||
+      `<svg viewBox="0 0 20 20" fill="currentColor">
+        <path d="M14.5036 1.13488C14.3765 0.925602 14.2483 0.707495 14.1174 0.479601L14.9536 0C15.6901 1.28291 16.3103 2.18846 17.0583 2.94839C17.8041 3.70619 18.6966 4.33897 20 5.04819L19.5391 5.89451C19.3035 5.76631 19.0792 5.63965 18.865 5.5134L15.0521 9.80084C15.4553 11.0798 15.495 12.4878 15.0464 13.8871C14.727 14.8833 14.1631 15.8645 13.3206 16.7832C13.1407 16.9793 12.8358 16.9926 12.6396 16.8128C12.6328 16.8065 12.6262 16.8001 12.6198 16.7936L12.6158 16.7896L8.83994 13.0156L0.819221 19.8752C0.357424 20.2701 -0.27004 19.6423 0.124825 19.1811L6.98768 11.1642L3.21189 7.39021L3.20847 7.38676C3.19722 7.37583 3.18639 7.36425 3.17604 7.35203C3.00408 7.1489 3.02943 6.84489 3.23266 6.67301C3.87295 6.13148 4.53111 5.70968 5.19581 5.39767C6.91511 4.59063 8.64205 4.5275 10.1724 4.98295L14.5036 1.13488Z"/>
+      </svg>`;
+  pinIcon = pinIcon.trim();
+  unpinIcon = unpinIcon.trim();
+
+  pinIcon =
+    pinIcon.startsWith('<svg') && pinIcon.endsWith('</svg>') ? pinIcon : web.escape(pinIcon);
+  unpinIcon =
+    unpinIcon.startsWith('<svg') && unpinIcon.endsWith('</svg>')
+      ? unpinIcon
+      : web.escape(unpinIcon);
+
+  const $button = web.html`<div class="always_on_top--button"></div>`,
+    $pin = web.html`<button id="always_on_top--pin">${pinIcon}</button>`,
+    $unpin = web.html`<button id="always_on_top--unpin">${unpinIcon}</button>`;
+  components.addTooltip($pin, '**Pin window to top**');
+  components.addTooltip($unpin, '**Unpin window from top**');
+  web.render($button, $pin);
+
+  $pin.addEventListener('click', () => {
+    $pin.replaceWith($unpin);
+    electron.browser.setAlwaysOnTop(true);
+  });
+  $unpin.addEventListener('click', () => {
+    $unpin.replaceWith($pin);
+    electron.browser.setAlwaysOnTop(false);
+  });
+
+  return $button;
+};

repo/always-on-top/client.mjs

@@ -0,0 +1,17 @@
+/**
+ * notion-enhancer: always on top
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+import { createButton } from './button.mjs';
+
+export default async function (api, db) {
+  const { web } = api,
+    topbarActionsSelector = '.notion-topbar-action-buttons';
+
+  await web.whenReady([topbarActionsSelector]);
+  const $topbarActions = document.querySelector(topbarActionsSelector),
+    $button = await createButton(api, db);
+  $topbarActions.after($button);
+}

repo/always-on-top/menu.mjs

@@ -0,0 +1,20 @@
+/**
+ * notion-enhancer: always on top
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+import { createButton } from './button.mjs';
+
+export default async function (api, db) {
+  const { web } = api,
+    sidebarSelector = '.sidebar',
+    windowButtonsSelector = '.integrated_titlebar--buttons';
+
+  await web.whenReady([sidebarSelector]);
+  await new Promise(requestAnimationFrame);
+  const $sidebar = document.querySelector(sidebarSelector),
+    $windowButtons = document.querySelector(windowButtonsSelector),
+    $button = await createButton(api, db);
+  ($windowButtons || $sidebar).prepend($button);
+}

repo/always-on-top/mod.json

@@ -0,0 +1,41 @@
+{
+  "name": "always on top",
+  "id": "be2d75f5-48f5-4ece-98bd-772244e559f3",
+  "environments": ["linux", "win32", "darwin"],
+  "version": "0.2.0",
+  "description": "adds a button that can be used to pin the notion window on top of all other windows at all times.",
+  "preview": "always-on-top.jpg",
+  "tags": ["extension", "app"],
+  "authors": [
+    {
+      "name": "dragonwocky",
+      "email": "thedragonring.bod@gmail.com",
+      "homepage": "https://dragonwocky.me/",
+      "avatar": "https://dragonwocky.me/avatar.jpg"
+    }
+  ],
+  "css": {
+    "client": ["button.css"],
+    "menu": ["button.css"]
+  },
+  "js": {
+    "client": ["client.mjs"],
+    "menu": ["menu.mjs"]
+  },
+  "options": [
+    {
+      "type": "text",
+      "key": "pin_icon",
+      "label": "pin window icon",
+      "tooltip": "**may be an svg string or any unicode symbol e.g. an emoji** (the default icon will be used if this field is left empty)",
+      "value": ""
+    },
+    {
+      "type": "text",
+      "key": "unpin_icon",
+      "label": "unpin window icon",
+      "tooltip": "**may be an svg string or any unicode symbol e.g. an emoji** (the default icon will be used if this field is left empty)",
+      "value": ""
+    }
+  ]
+}

repo/bypass-preview/client.css

@@ -0,0 +1,9 @@
+/**
+ * notion-enhancer: bypass preview
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+.notion-peek-renderer {
+  display: none;
+}

repo/bypass-preview/client.mjs

@@ -0,0 +1,37 @@
+/**
+ * notion-enhancer: bypass preview
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+"use strict";
+
+export default function ({ web, notion }, db) {
+  let _openPage = {};
+
+  const getCurrentPage = () => ({
+    type: web.queryParams().get("p") ? "preview" : "page",
+    id: notion.getPageID(),
+  });
+
+  const interceptPreview = () => {
+    const currentPage = getCurrentPage();
+    if (
+      currentPage.id !== _openPage.id ||
+      currentPage.type !== _openPage.type
+    ) {
+      const $openAsPage = document.querySelector(
+        ".notion-peek-renderer a > div"
+      );
+
+      if ($openAsPage) {
+        if (currentPage.id === _openPage.id && currentPage.type === "preview") {
+          history.back();
+        } else $openAsPage.click();
+      }
+
+      _openPage = getCurrentPage();
+    }
+  };
+  web.addDocumentObserver(interceptPreview, [".notion-peek-renderer"]);
+}

repo/bypass-preview/mod.json

@@ -0,0 +1,22 @@
+{
+  "name": "bypass preview",
+  "id": "cb6fd684-f113-4a7a-9423-8f0f0cff069f",
+  "version": "0.2.0",
+  "description": "go straight to the normal full view when opening a page.",
+  "tags": ["extension", "automation"],
+  "authors": [
+    {
+      "name": "dragonwocky",
+      "email": "thedragonring.bod@gmail.com",
+      "homepage": "https://dragonwocky.me/",
+      "avatar": "https://dragonwocky.me/avatar.jpg"
+    }
+  ],
+  "js": {
+    "client": ["client.mjs"]
+  },
+  "css": {
+    "client": ["client.css"]
+  },
+  "options": []
+}

repo/calendar-scroll/client.css

@@ -0,0 +1,25 @@
+/**
+ * notion-enhancer: calendar scroll
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+#enhancer--calendar-scroll {
+  background: var(--theme--ui_interactive-hover);
+  border: 1px solid transparent;
+  font-size: 14px;
+  color: var(--theme--text);
+  height: 24px;
+  border-radius: 3px;
+  line-height: 1.2;
+  padding: 0 0.5em;
+  margin-right: 5px;
+}
+#enhancer--calendar-scroll:focus,
+#enhancer--calendar-scroll:hover {
+  background: transparent;
+  border: 1px solid var(--theme--ui_interactive-hover);
+}
+#enhancer--calendar-scroll:active {
+  background: var(--theme--ui_interactive-active);
+}

repo/calendar-scroll/client.mjs

@@ -0,0 +1,41 @@
+/**
+ * notion-enhancer: calendar scroll
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+'use strict';
+
+const pageSelector = '.notion-page-content',
+  calendarSelector = '.notion-calendar-view:not([data-calendar-scroll])',
+  scrollerSelector = '.notion-frame > .notion-scroller',
+  toolbarSelector = '.notion-calendar-view > :first-child > :first-child > :first-child',
+  todaySelector = '.notion-calendar-view-day[style*="background:"]';
+
+export default function ({ web }, db) {
+  const insertButton = () => {
+    document.querySelectorAll(calendarSelector).forEach(($calendar) => {
+      $calendar.dataset.calendarScroll = true;
+      const $page = document.querySelector(pageSelector);
+      if ($page) return;
+      const $toolbar = $calendar.querySelector(toolbarSelector),
+        $pageScroller = document.querySelector(scrollerSelector),
+        $scrollButton = web.html`<button id="enhancer--calendar-scroll">Scroll</button>`;
+      $scrollButton.addEventListener('click', async (event) => {
+        let $today = $calendar.querySelector(todaySelector);
+        if (!$today) {
+          $toolbar.children[4].click();
+          await new Promise((res, rej) => setTimeout(res, 500));
+          $today = $calendar.querySelector(todaySelector);
+        }
+        $pageScroller.scroll({
+          top: $today.offsetParent.offsetParent.offsetTop + 70,
+          behavior: 'auto',
+        });
+      });
+      $toolbar.insertBefore($scrollButton, $toolbar.children[2]);
+    });
+  };
+  web.addDocumentObserver(insertButton, [calendarSelector]);
+  insertButton();
+}

repo/calendar-scroll/mod.json

@@ -0,0 +1,23 @@
+{
+  "name": "calendar scroll",
+  "id": "b1c7db33-dfee-489a-a76c-0dd66f7ed29a",
+  "version": "0.2.0",
+  "description": "adds a button to jump down to the current week in fullpage/infinite-scroll calendars.",
+  "preview": "calendar-scroll.png",
+  "tags": ["extension", "shortcut"],
+  "authors": [
+    {
+      "name": "dragonwocky",
+      "email": "thedragonring.bod@gmail.com",
+      "homepage": "https://dragonwocky.me/",
+      "avatar": "https://dragonwocky.me/avatar.jpg"
+    }
+  ],
+  "js": {
+    "client": ["client.mjs"]
+  },
+  "css": {
+    "client": ["client.css"]
+  },
+  "options": []
+}

repo/cherry-cola/mod.json

@@ -0,0 +1,23 @@
+{
+  "name": "cherry cola",
+  "id": "ec5c4640-68d4-4d25-aefd-62c7e9737cfb",
+  "version": "0.2.0",
+  "description": "a delightfully plummy, cherry cola flavored theme.",
+  "preview": "cherry-cola.png",
+  "tags": ["theme", "dark"],
+  "authors": [
+    {
+      "name": "runargs",
+      "email": "alnbaldon@gmail.com",
+      "homepage": "http://github.com/runargs",
+      "avatar": "https://avatars.githubusercontent.com/u/39810066"
+    }
+  ],
+  "css": {
+    "frame": ["variables.css"],
+    "client": ["variables.css"],
+    "menu": ["variables.css"]
+  },
+  "js": {},
+  "options": []
+}

repo/cherry-cola/variables.css

@@ -0,0 +1,172 @@
+/**
+ * notion-enhancer: cherry cola
+ * (c) 2020 Alexa Baldon <alnbaldon@gmail.com> (https://github.com/runargs)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+:root.dark {
+  --cola--main: #180915;
+  --cola--sec: #1d0919;
+  --cola--tet: #492341;
+  --cola--info: #9b6890;
+  --cola--accent: #bf799b;
+  --cola--light_gray: #ADADAD;
+  --cola--gray: #8a8a8a;
+  --cola--brown: #755241;
+  --cola--orange: #e6846b;
+  --cola--yellow: #d7b56e;
+  --cola--green: #8f9b4f;
+  --cola--blue: #6ebdb7;
+  --cola--purple: #813d63;
+  --cola--pink: #d86f71;
+  --cola--red: #a33232;
+
+  --theme--accent_blue: var(--cola--accent);
+  --theme--accent_blue-selection: rgba(78, 32, 69, 0.5);
+  --theme--accent_blue-hover: #bd6992;
+  --theme--accent_blue-active: #cc86a8;
+  --theme--accent_blue-text: #fff;
+  --theme--accent_red: var(--cola--accent);
+  --theme--accent_red-button: #bf799b63;
+  --theme--accent_red-text: #fff;
+
+  --theme--bg: var(--cola--main);
+  --theme--bg_secondary: var(--cola--sec);
+  --theme--bg_card: var(--cola--sec);
+
+  --theme--scrollbar_track: transparent;
+  --theme--scrollbar_thumb: var(--cola--sec);
+  --theme--scrollbar_thumb-hover: var(--cola--accent);
+
+  --theme--ui_divider: rgba(73, 35, 65, 0.7);
+  --theme--ui_interactive-hover: var(--cola--tet);
+  --theme--ui_interactive-active: var(--cola--tet);
+  --theme--ui_toggle-off: rgba(73, 35, 65, 0.7);
+  --theme--ui_corner_action: var(--theme--bg_card);
+  --theme--ui_corner_action-hover: var(--theme--ui_interactive-hover);
+  --theme--ui_corner_action-active: var(--theme--ui_interactive-active);
+
+  --theme--icon: #fff;
+  --theme--icon_secondary: var(--cola--info);
+
+  --theme--text: #fff;
+  --theme--text_secondary: var(--cola--info);
+  --theme--text_gray: var(--cola--gray);
+  --theme--text_brown: var(--cola--brown);
+  --theme--text_orange: var(--cola--orange);
+  --theme--text_yellow: var(--cola--yellow);
+  --theme--text_green: var(--cola--green);
+  --theme--text_blue: var(--cola--blue);
+  --theme--text_purple: var(--cola--purple);
+  --theme--text_pink: var(--cola--pink);
+  --theme--text_red: var(--cola--red);
+
+  --theme--highlight_gray: var(--theme--tag_gray);
+  --theme--highlight_gray-text: var(--theme--tag-text);
+  --theme--highlight_brown: var(--theme--tag_brown);
+  --theme--highlight_brown-text: var(--theme--tag-text);
+  --theme--highlight_orange: var(--theme--tag_orange);
+  --theme--highlight_orange-text: var(--theme--tag-text);
+  --theme--highlight_yellow: var(--theme--tag_yellow);
+  --theme--highlight_yellow-text: var(--theme--tag-text);
+  --theme--highlight_green: var(--theme--tag_green);
+  --theme--highlight_green-text: var(--theme--tag-text);
+  --theme--highlight_blue: var(--theme--tag_blue);
+  --theme--highlight_blue-text: var(--theme--tag-text);
+  --theme--highlight_purple: var(--theme--tag_purple);
+  --theme--highlight_purple-text: var(--theme--tag-text);
+  --theme--highlight_pink: var(--theme--tag_pink);
+  --theme--highlight_pink-text: var(--theme--tag-text);
+  --theme--highlight_red: var(--theme--tag_red);
+  --theme--highlight_red-text: var(--theme--tag-text);
+
+  --theme--callout_gray: var(--theme--tag_gray);
+  --theme--callout_gray-text: var(--theme--tag-text);
+  --theme--callout_brown: var(--theme--tag_brown);
+  --theme--callout_brown-text: var(--theme--tag-text);
+  --theme--callout_orange: var(--theme--tag_orange);
+  --theme--callout_orange-text: var(--theme--tag-text);
+  --theme--callout_yellow: var(--theme--tag_yellow);
+  --theme--callout_yellow-text: var(--theme--tag-text);
+  --theme--callout_green: var(--theme--tag_green);
+  --theme--callout_green-text: var(--theme--tag-text);
+  --theme--callout_blue: var(--theme--tag_blue);
+  --theme--callout_blue-text: var(--theme--tag-text);
+  --theme--callout_purple: var(--theme--tag_purple);
+  --theme--callout_purple-text: var(--theme--tag-text);
+  --theme--callout_pink: var(--theme--tag_pink);
+  --theme--callout_pink-text: var(--theme--tag-text);
+  --theme--callout_red: var(--theme--tag_red);
+  --theme--callout_red-text: var(--theme--tag-text);
+
+  --theme--tag_light_gray: var(--cola--light_gray);
+  --theme--tag_light_gray-text: var(--cola--main);
+  --theme--tag_gray: var(--cola--gray);
+  --theme--tag_gray-text: var(--cola--main);
+  --theme--tag_brown: var(--cola--brown);
+  --theme--tag_brown-text: #ffffff;
+  --theme--tag_orange: var(--cola--orange);
+  --theme--tag_orange-text: var(--cola--main);
+  --theme--tag_yellow: var(--cola--yellow);
+  --theme--tag_yellow-text: var(--cola--main);
+  --theme--tag_green: var(--cola--green);
+  --theme--tag_green-text: var(--cola--main);
+  --theme--tag_blue: var(--cola--blue);
+  --theme--tag_blue-text: var(--cola--main);
+  --theme--tag_purple: var(--cola--purple);
+  --theme--tag_purple-text: #ffffff;
+  --theme--tag_pink: var(--cola--pink);
+  --theme--tag_pink-text: var(--cola--main);
+  --theme--tag_red: var(--cola--red);
+  --theme--tag_red-text: #ffffff;
+
+  --theme--board_light_gray: var(--cola--light_gray);
+  --theme--board_light_gray-text: var(--cola--main);
+  --theme--board_light_gray-card: var(--theme--tag_light_gray);
+  --theme--board_gray: var(--cola--gray);
+  --theme--board_gray-text: var(--cola--main);
+  --theme--board_gray-card: var(--theme--tag_gray);
+  --theme--board_brown: var(--cola--brown);
+  --theme--board_brown-text: var(--cola--main);
+  --theme--board_brown-card: var(--theme--tag_brown);
+  --theme--board_orange: var(--cola--orange);
+  --theme--board_orange-text: var(--cola--main);
+  --theme--board_orange-card: var(--theme--tag_orange);
+  --theme--board_yellow: var(--cola--yellow);
+  --theme--board_yellow-text: var(--cola--main);
+  --theme--board_yellow-card: var(--theme--tag_yellow);
+  --theme--board_green: var(--cola--green);
+  --theme--board_green-text: var(--cola--main);
+  --theme--board_green-card: var(--theme--tag_green);
+  --theme--board_blue: var(--cola--blue);
+  --theme--board_blue-text: var(--cola--main);
+  --theme--board_blue-card: var(--theme--tag_blue);
+  --theme--board_purple: var(--cola--purple);
+  --theme--board_purple-text: var(--cola--main);
+  --theme--board_purple-card: var(--theme--tag_purple);
+  --theme--board_pink: var(--cola--pink);
+  --theme--board_pink-text: var(--cola--main);
+  --theme--board_pink-card: var(--theme--tag_pink);
+  --theme--board_red: var(--cola--red);
+  --theme--board_red-text: var(--cola--main);
+  --theme--board_red-card: var(--theme--tag_red);
+
+  --theme--code_inline: var(--cola--main);
+  --theme--code_inline-text: var(--cola--accent);
+
+  --theme--code: var(--cola--sec);
+  --theme--code_function: var(--theme--text_blue);
+  --theme--code_keyword: var(--theme--text_pink);
+  --theme--code_tag: var(--theme--text_pink);
+  --theme--code_operator: var(--theme--text_yellow);
+  --theme--code_property: var(--theme--text_pink);
+  --theme--code_builtin: var(--theme--text_yellow);
+  --theme--code_attr-name: var(--theme--text_yellow);
+  --theme--code_comment: var(--theme--text_gray);
+  --theme--code_punctuation: var(--theme--text_gray);
+  --theme--code_doctype: var(--theme--text_gray);
+  --theme--code_number: var(--theme--text_purple);
+  --theme--code_selector: var(--theme--text_orange);
+  --theme--code_atrule: var(--theme--text_orange);
+  --theme--code_regex: var(--theme--text_yellow);
+}

repo/code-line-numbers/client.css

@@ -0,0 +1,63 @@
+/**
+ * notion-enhancer: code line numbers
+ * (c) 2020 CloudHill <rl.cloudhill@gmail.com> (https://github.com/CloudHill)
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+.notion-code-block.line-numbers {
+  position: relative;
+}
+.code_line_numbers--plain:not(:empty) + div,
+.code_line_numbers--background:not(:empty) + div,
+.code_line_numbers--border:not(:empty) + div {
+  padding-left: 64px !important;
+}
+
+.code_line_numbers--plain,
+.code_line_numbers--background,
+.code_line_numbers--border {
+  position: absolute;
+  left: 0;
+  right: calc(100% - 64px);
+  top: 34px;
+  bottom: 32px;
+  padding-right: 27px;
+
+  font-size: 85%;
+  font-family: var(--theme--font_code);
+  text-align: right;
+  line-height: 1.5;
+  opacity: 0.8;
+  color: var(--theme--text_secondary);
+
+  overflow: hidden;
+  pointer-events: none;
+}
+.code_line_numbers--plain:empty,
+.code_line_numbers--background:empty,
+.code_line_numbers--border:empty {
+  display: none;
+}
+.code_line_numbers--background::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 7.25px;
+  width: calc(100% - 27px);
+  height: 100%;
+  display: block;
+  background-color: var(--theme--bg);
+  border-radius: 4px;
+  z-index: -1;
+}
+.code_line_numbers--border::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: calc(100% - 52px);
+  width: 2px;
+  height: 100%;
+  display: block;
+  background-color: var(--theme--ui_divider);
+}

repo/code-line-numbers/client.mjs

@@ -0,0 +1,62 @@
+/**
+ * notion-enhancer: code line numbers
+ * (c) 2020 CloudHill <rl.cloudhill@gmail.com> (https://github.com/CloudHill)
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+export default async function ({ web }, db) {
+  const singleLined = await db.get(['single_lined']),
+    codeBlockSelector = '.notion-code-block.line-numbers',
+    numbersClass = `code_line_numbers--${await db.get(['style'])}`,
+    $temp = web.html`<span></span>`;
+
+  const numberCodeBlock = ($codeBlock) => {
+      const $numbers =
+        $codeBlock.querySelector(`.${numbersClass}`) ||
+        web.html`<span class="${numbersClass}">1</span>`;
+      if (!$codeBlock.contains($numbers)) $codeBlock.prepend($numbers);
+
+      const lines = $codeBlock.lastElementChild.innerText.split(/\r\n|\r|\n/),
+        wordWrap = $codeBlock.lastElementChild.style.wordBreak === 'break-all';
+      if (lines.reverse()[0] === '') lines.pop();
+
+      let lineNumbers = '';
+      for (let i = 1; i <= lines.length + 1; i++) {
+        lineNumbers += `${i}\n`;
+        if (wordWrap && lines[i - 1]) {
+          $temp.innerText = lines[i - 1];
+          web.render($codeBlock.lastElementChild, $temp);
+          const height = parseFloat($temp.getBoundingClientRect().height);
+          $temp.remove();
+          for (let j = 1; j < height / 20.4; j++) lineNumbers += '\n';
+        }
+      }
+
+      if (!singleLined && lines.length < 2) lineNumbers = '';
+      if ($numbers.innerText !== lineNumbers) $numbers.innerText = lineNumbers;
+    },
+    numberAllCodeBlocks = () => {
+      for (const $codeBlock of document.querySelectorAll(codeBlockSelector)) {
+        numberCodeBlock($codeBlock);
+      }
+    },
+    observeCodeBlocks = (event) => {
+      const tempEvent = [...event.addedNodes, ...event.removedNodes].includes($temp),
+        numbersEvent =
+          event.target.classList.contains(numbersClass) ||
+          [...event.addedNodes, ...event.removedNodes].some(($node) =>
+            $node?.classList?.contains(numbersClass)
+          ),
+        codeEvent = event.target.matches(`${codeBlockSelector}, ${codeBlockSelector} *`);
+      if (tempEvent || numbersEvent || !codeEvent) return;
+
+      let $codeBlock = event.target;
+      while (!$codeBlock.matches(codeBlockSelector)) $codeBlock = $codeBlock.parentElement;
+      numberCodeBlock($codeBlock);
+    };
+
+  await web.whenReady();
+  numberAllCodeBlocks();
+  web.addDocumentObserver(observeCodeBlocks, [codeBlockSelector]);
+}

repo/code-line-numbers/mod.json

@@ -0,0 +1,36 @@
+{
+  "name": "code line numbers",
+  "id": "d61dc8a7-b195-465b-935f-53eea9efe74e",
+  "version": "0.4.0",
+  "description": "adds line numbers to code blocks.",
+  "preview": "code-line-numbers.png",
+  "tags": ["extension", "usability"],
+  "authors": [
+    {
+      "name": "CloudHill",
+      "email": "rh.cloudhill@gmail.com",
+      "homepage": "https://github.com/CloudHill",
+      "avatar": "https://avatars.githubusercontent.com/u/54142180"
+    }
+  ],
+  "js": {
+    "client": ["client.mjs"]
+  },
+  "css": {
+    "client": ["client.css"]
+  },
+  "options": [
+    {
+      "type": "toggle",
+      "key": "single_lined",
+      "label": "number single-lined code blocks",
+      "value": false
+    },
+    {
+      "type": "select",
+      "key": "style",
+      "label": "line number style",
+      "values": ["plain", "background", "border"]
+    }
+  ]
+}

repo/collapsible-properties/client.css

@@ -0,0 +1,56 @@
+/**
+ * notion-enhancer: collapse properties
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+#enhancer--collapse-properties {
+  display: flex;
+  background: var(--theme--ui_interactive-hover);
+  border: 1px solid transparent;
+  font-size: 14px;
+  border-radius: 3px;
+  line-height: 1.2;
+  font-weight: 600;
+  padding: 0.3em 0.5em;
+  margin: 1em 0;
+  width: 100%;
+}
+#enhancer--collapse-properties:focus,
+#enhancer--collapse-properties:hover {
+  background: transparent;
+  border: 1px solid var(--theme--ui_interactive-hover);
+}
+#enhancer--collapse-properties:active {
+  background: var(--theme--ui_interactive-active);
+}
+
+#enhancer--collapse-properties > span {
+  text-align: left;
+  color: var(--theme--text);
+}
+#enhancer--collapse-properties > span:before {
+  content: 'Properties';
+}
+#enhancer--collapse-properties > svg {
+  fill: var(--theme--icon);
+  height: 0.8em;
+  width: 0.8em;
+  margin: auto 0.5em auto 0;
+  transition: transform 200ms ease-out 0s;
+}
+
+#enhancer--collapse-properties[data-collapsed='false'] > svg {
+  transform: rotateZ(180deg);
+}
+#enhancer--collapse-properties[data-collapsed='true'] > svg {
+  transform: rotateZ(90deg);
+}
+
+#enhancer--collapse-properties + div {
+  overflow: hidden;
+}
+#enhancer--collapse-properties[data-collapsed='true'] + div {
+  max-height: 0 !important;
+  opacity: 0;
+}

repo/collapsible-properties/client.mjs

@@ -0,0 +1,35 @@
+/**
+ * notion-enhancer: collapse properties
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+'use strict';
+
+export default function ({ web, notion }, db) {
+  const propertyListSelector =
+      '.notion-scroller.vertical [style*="env(safe-area-inset-left)"] > [style="width: 100%; font-size: 14px;"]',
+    $collapseButton = web.html`<button id="enhancer--collapse-properties">
+      <svg viewBox="0 0 100 100"><polygon points="5.9,88.2 50,11.8 94.1,88.2"></polygon></svg>
+      <span></span>
+    </button>`;
+  $collapseButton.addEventListener('click', async (event) => {
+    if ($collapseButton.dataset.collapsed === 'true') {
+      await db.set([notion.getPageID()], false);
+      $collapseButton.dataset.collapsed = false;
+    } else {
+      await db.set([notion.getPageID()], true);
+      $collapseButton.dataset.collapsed = true;
+    }
+  });
+  const insertButton = async () => {
+    if (document.contains($collapseButton)) return;
+    const $propertyList = document.querySelector(propertyListSelector);
+    if ($propertyList) {
+      $collapseButton.dataset.collapsed = await db.get([notion.getPageID()], true);
+      $propertyList.before($collapseButton);
+    }
+  };
+  web.addDocumentObserver(insertButton, [propertyListSelector]);
+  insertButton();
+}

repo/collapsible-properties/mod.json

@@ -0,0 +1,23 @@
+{
+  "name": "collapsible properties",
+  "id": "4034a578-7dd3-4633-80c6-f47ac5b7b160",
+  "version": "0.3.0",
+  "description": "adds a button to quickly collapse/expand page properties that usually push down page content.",
+  "preview": "collapsible-properties.jpg",
+  "tags": ["extension", "layout"],
+  "authors": [
+    {
+      "name": "dragonwocky",
+      "email": "thedragonring.bod@gmail.com",
+      "homepage": "https://dragonwocky.me/",
+      "avatar": "https://dragonwocky.me/avatar.jpg"
+    }
+  ],
+  "css": {
+    "client": ["client.css"]
+  },
+  "js": {
+    "client": ["client.mjs"]
+  },
+  "options": []
+}

repo/components/mod.json

@@ -0,0 +1,33 @@
+{
+  "__comment": "pseudo-mod to allow configuration of api-provided components",
+  "name": "components",
+  "id": "36a2ffc9-27ff-480e-84a7-c7700a7d232d",
+  "version": "0.2.0",
+  "description": "shared notion-style elements.",
+  "tags": ["core"],
+  "authors": [
+    {
+      "name": "dragonwocky",
+      "email": "thedragonring.bod@gmail.com",
+      "homepage": "https://dragonwocky.me/",
+      "avatar": "https://dragonwocky.me/avatar.jpg"
+    },
+    {
+      "name": "CloudHill",
+      "email": "rh.cloudhill@gmail.com",
+      "homepage": "https://github.com/CloudHill",
+      "avatar": "https://avatars.githubusercontent.com/u/54142180"
+    }
+  ],
+  "js": {},
+  "css": {},
+  "options": [
+    {
+      "type": "hotkey",
+      "key": "panel.hotkey",
+      "label": "toggle panel hotkey",
+      "value": "Ctrl+Alt+\\",
+      "tooltip": "**opens/closes the side panel in notion** if a mod that uses it has been enabled"
+    }
+  ]
+}

repo/dark+/mod.json

@@ -0,0 +1,42 @@
+{
+  "name": "dark+",
+  "id": "c86cfe98-e645-4822-aa6b-e2de1e08bafa",
+  "version": "0.2.0",
+  "description": "a vivid-colour near-black theme, with configurable accents.",
+  "preview": "dark+.png",
+  "tags": ["theme", "dark"],
+  "authors": [
+    {
+      "name": "dragonwocky",
+      "email": "thedragonring.bod@gmail.com",
+      "homepage": "https://dragonwocky.me/",
+      "avatar": "https://dragonwocky.me/avatar.jpg"
+    }
+  ],
+  "css": {
+    "frame": ["variables.css"],
+    "client": ["variables.css"],
+    "menu": ["variables.css"]
+  },
+  "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)"
+    }
+  ]
+}

repo/dark+/theme.mjs

@@ -0,0 +1,55 @@
+/**
+ * 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] = primary
+        .slice(5, -1)
+        .split(',')
+        .map((i) => parseInt(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] = secondary
+        .slice(5, -1)
+        .split(',')
+        .map((i) => parseInt(i));
+    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

@@ -0,0 +1,132 @@
+/**
+ * notion-enhancer: dark+
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+:root.dark {
+  --theme--accent_blue: var(--dark_plus--accent_blue, rgb(46, 170, 220));
+  --theme--accent_blue-selection: var(
+    --dark_plus--accent_blue-selection,
+    rgb(46, 170, 220, 0.25)
+  );
+  --theme--accent_blue-hover: var(--dark_plus--accent_blue-hover, rgb(6, 156, 205));
+  --theme--accent_blue-active: var(--dark_plus--accent_blue-active, rgb(0, 141, 190));
+  --theme--accent_blue-text: var(--dark_plus--accent_blue-text, #fff);
+  --theme--accent_red: var(--dark_plus--accent_red, #eb5757);
+  --theme--accent_red-button: var(--dark_plus--accent_red-button, rgba(235, 87, 87, 0.1));
+  --theme--accent_red-text: var(--dark_plus--accent_red-text, #fff);
+
+  --theme--bg: rgb(14, 14, 14);
+  --theme--bg_secondary: rgb(0, 0, 0);
+  --theme--bg_card: rgb(0, 0, 0);
+
+  --theme--scrollbar_track: transparent;
+  --theme--scrollbar_thumb: #181818;
+  --theme--scrollbar_thumb-hover: #222222;
+
+  --theme--ui_divider: rgba(36, 36, 36, 0.7);
+  --theme--ui_interactive-hover: rgba(55, 56, 56, 0.3);
+  --theme--ui_interactive-active: rgba(55, 56, 56, 0.402);
+  --theme--ui_toggle-on: var(--theme--accent_blue);
+  --theme--ui_toggle-off: rgb(40, 40, 40);
+  --theme--ui_corner_action: var(--theme--bg_card);
+  --theme--ui_corner_action-hover: var(--theme--ui_interactive-hover);
+  --theme--ui_corner_action-active: var(--theme--ui_interactive-active);
+
+  --theme--icon: rgb(228, 228, 228);
+  --theme--icon_secondary: rgba(211, 211, 211, 0.637);
+
+  --theme--text: rgb(255, 255, 255);
+  --theme--text_secondary: rgb(228, 228, 228);
+  --theme--text_gray: rgba(151, 154, 155, 0.95);
+  --theme--text_brown: rgb(147, 114, 100);
+  --theme--text_orange: rgb(255, 163, 68);
+  --theme--text_yellow: rgb(255, 220, 73);
+  --theme--text_green: rgb(50, 169, 104);
+  --theme--text_blue: rgb(82, 156, 202);
+  --theme--text_purple: rgb(154, 109, 215);
+  --theme--text_pink: rgb(226, 85, 161);
+  --theme--text_red: rgb(218, 47, 35);
+
+  --theme--highlight_gray: var(--theme--tag_gray);
+  --theme--highlight_brown: var(--theme--tag_brown);
+  --theme--highlight_orange: var(--theme--tag_orange);
+  --theme--highlight_yellow: var(--theme--tag_yellow);
+  --theme--highlight_green: var(--theme--tag_green);
+  --theme--highlight_blue: var(--theme--tag_blue);
+  --theme--highlight_purple: var(--theme--tag_purple);
+  --theme--highlight_pink: var(--theme--tag_pink);
+  --theme--highlight_red: var(--theme--tag_red);
+
+  --theme--callout_gray: rgba(126, 128, 129, 0.301);
+  --theme--callout_brown: #50331fad;
+  --theme--callout_orange: rgba(255, 153, 0, 0.315);
+  --theme--callout_yellow: rgba(183, 156, 0, 0.445);
+  --theme--callout_green: rgba(50, 129, 47, 0.39);
+  --theme--callout_blue: rgba(0, 90, 146, 0.521);
+  --theme--callout_purple: rgba(90, 49, 148, 0.349);
+  --theme--callout_pink: rgba(243, 61, 158, 0.301);
+  --theme--callout_red: rgba(122, 20, 20, 0.623);
+
+  --theme--tag_light_gray: rgba(165, 166, 167, 0.5);
+  --theme--tag_gray: rgba(126, 128, 129, 0.5);
+  --theme--tag_brown: #50331f;
+  --theme--tag_orange: rgba(255, 155, 0, 0.58);
+  --theme--tag_yellow: rgba(183, 155, 0, 1);
+  --theme--tag_green: rgb(50, 129, 47);
+  --theme--tag_blue: rgba(0, 90, 146, 0.71);
+  --theme--tag_purple: rgba(91, 49, 148, 0.74);
+  --theme--tag_pink: rgba(243, 61, 159, 0.5);
+  --theme--tag_red: rgb(122, 20, 20);
+
+  --theme--board_light_gray: rgba(165, 166, 167, 0.089);
+  --theme--board_light_gray-card: var(--theme--tag_light_gray);
+  --theme--board_light_gray-card_text: var(--theme--tag_light_gray-text);
+  --theme--board_gray: rgba(126, 128, 129, 0.089);
+  --theme--board_gray-card: var(--theme--tag_gray);
+  --theme--board_gray-card_text: var(--theme--tag_gray-text);
+  --theme--board_brown: #50331f59;
+  --theme--board_brown-card: var(--theme--tag_brown);
+  --theme--board_brown-card_text: var(--theme--tag_brown-text);
+  --theme--board_orange: rgba(255, 153, 0, 0.164);
+  --theme--board_orange-card: var(--theme--tag_orange);
+  --theme--board_orange-card_text: var(--theme--tag_orange-text);
+  --theme--board_yellow: rgba(183, 156, 0, 0.274);
+  --theme--board_yellow-card: var(--theme--tag_yellow);
+  --theme--board_yellow-card_text: var(--theme--tag_yellow-text);
+  --theme--board_green: rgba(50, 129, 47, 0.191);
+  --theme--board_green-card: var(--theme--tag_green);
+  --theme--board_green-card_text: var(--theme--tag_green-text);
+  --theme--board_blue: rgba(0, 90, 146, 0.294);
+  --theme--board_blue-card: var(--theme--tag_blue);
+  --theme--board_purple: rgba(90, 49, 148, 0.219);
+  --theme--board_purple-card: var(--theme--tag_purple);
+  --theme--board_purple-card_text: var(--theme--tag_purple-text);
+  --theme--board_pink: rgba(243, 61, 158, 0.191);
+  --theme--board_pink-card: var(--theme--tag_pink);
+  --theme--board_pink-card_text: var(--theme--tag_pink-text);
+  --theme--board_red: rgba(122, 20, 20, 0.376);
+  --theme--board_red-card: var(--theme--tag_red);
+  --theme--board_red-card_text: var(--theme--tag_red-text);
+
+  --theme--code_inline-text: #7dc582;
+  --theme--code_inline-background: rgb(0, 0, 0);
+
+  --theme--code: rgb(0, 0, 0);
+  --theme--code_plain: var(--theme--text);
+  --theme--code_function: #c7e1ff;
+  --theme--code_keyword: #c397d8;
+  --theme--code_property: #82aed8;
+  --theme--code_operator: rgb(166, 175, 201);
+  --theme--code_regex: #da265f;
+  --theme--code_property: #82aed8;
+  --theme--code_builtin: #ff6294;
+  --theme--code_selector: #ff6294;
+  --theme--code_comment: rgb(166, 175, 201);
+  --theme--code_punctuation: rgb(166, 175, 201);
+  --theme--code_doctype: rgb(166, 175, 201);
+  --theme--code_number: #c397d8;
+  --theme--code_string: #7dc582;
+  --theme--code_atrule: #7dc582;
+}

repo/dracula/app.css

@@ -0,0 +1,84 @@
+/**
+ * notion-enhancer: dracula
+ * (c) 2016 Dracula Theme
+ * (c) 2020 CloudHill
+ * (c) 2020 mimishahzad
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+.notion-dark-theme img[src*='/images/onboarding/use-case-note.png'],
+.notion-dark-theme img[src*='/images/onboarding/team-features-illustration.png'] {
+  filter: invert(1) !important;
+}
+.notion-dark-theme img[src*='/images/onboarding/checked.svg'] {
+  filter: hue-rotate(45deg) !important;
+}
+.notion-dark-theme
+  img[style*='display: block; object-fit: cover; border-radius: 100%; width: 90px; height: 90px;'],
+.notion-dark-theme
+  img[style*='display: block; object-fit: cover; border-radius: 3px; width: 56.832px; height: 56.832px; transition: opacity 100ms ease-out 0s;'] {
+  transition: filter 0.4s ease !important;
+}
+.notion-dark-theme
+  img[style*='display: block; object-fit: cover; border-radius: 100%; width: 90px; height: 90px;']:hover,
+.notion-dark-theme
+  img[style*='display: block; object-fit: cover; border-radius: 3px; width: 56.832px; height: 56.832px; transition: opacity 100ms ease-out 0s;']:hover {
+  filter: brightness(1.2);
+}
+
+.notion-dark-theme .notion-token-remove-button[role*='button'][tabindex*='0']:hover,
+.notion-dark-theme .notion-record-icon {
+  background: transparent !important;
+}
+
+.notion-dark-theme .notion-focusable:focus-within,
+.notion-dark-theme .notion-to_do-block > div > div > div[style*='background:'],
+.notion-dark-theme div[role='button'],
+[style*='height: 4px;'] > .notion-selectable.notion-collection_view_page-block > *,
+.notion-dark-theme .notion-calendar-view-day[style*='background: #282a36;'],
+.DayPicker-Day--today,
+.notion-dark-theme
+  .DayPicker:not(.DayPicker--interactionDisabled)
+  .DayPicker-Day--outside:hover,
+.notion-dark-theme
+  .DayPicker:not(.DayPicker--interactionDisabled)
+  .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--value)
+  .DayPicker-Day.DayPicker-Day--start.DayPicker-Day--selected,
+.notion-dark-theme .DayPicker-Day.DayPicker-Day--range.DayPicker-Day--start,
+.notion-dark-theme .DayPicker-Day.DayPicker-Day--range.DayPicker-Day--end {
+  transition: color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease !important;
+}
+
+.notion-dark-theme [style*='background: #282a36;'],
+.notion-dark-theme
+  [style*='background: rgb(80, 85, 88);'][style*='color: rgba(255, 255, 255, 0.7)'],
+.notion-dark-theme
+  [style*='background: rgb(80, 85, 88);'][style*='width: 18px;'][style*='height: 18px;'],
+.notion-dark-theme
+  [style*='box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.2) 0px 5px 10px, rgba(15, 15, 15, 0.4) 0px 15px 40px;'],
+.notion-dark-theme [style*='background: rgba(151, 154, 155, 0.5);'],
+.notion-dark-theme [style*='background: rgba(147, 114, 100, 0.5)'],
+.notion-dark-theme [style*='background: rgba(255, 163, 68, 0.5)'],
+.notion-dark-theme [style*='background: rgba(255, 220, 73, 0.5)'],
+.notion-dark-theme [style*='background: rgba(77, 171, 154, 0.5)'],
+.notion-dark-theme [style*='background: rgba(82, 156, 202, 0.5)'],
+.notion-dark-theme [style*='background: rgba(154, 109, 215, 0.5)'],
+.notion-dark-theme [style*='background: rgba(226, 85, 161, 0.5)'],
+.notion-dark-theme [style*='background: rgba(255, 115, 105, 0.5)'] {
+  box-shadow: 0 2px 4px rgb(0 0 0 / 66%) !important;
+}
+
+.notion-dark-theme .notion-code-block .token.parameter,
+.notion-dark-theme .notion-code-block .token.decorator,
+.notion-dark-theme .notion-code-block .token.id,
+.notion-dark-theme .notion-code-block .token.class,
+.notion-dark-theme .notion-code-block .token.pseudo-element,
+.notion-dark-theme .notion-code-block .token.pseudo-class,
+.notion-dark-theme .notion-code-block .token.attribute {
+  font-style: italic;
+}
+
+.notion-dark-theme .notion-code-block .token.punctuation {
+  opacity: 1;
+}

repo/dracula/mod.json

@@ -0,0 +1,28 @@
+{
+  "name": "dracula",
+  "id": "033bff54-50ba-4cec-bdc0-b2ca7e307086",
+  "version": "0.3.0",
+  "description": "a theme based on the popular dracula color palette originally by zeno rocha and friends.",
+  "preview": "dracula.png",
+  "tags": ["theme", "dark"],
+  "authors": [
+    {
+      "name": "dracula",
+      "email": "zno.rocha@gmail.com",
+      "homepage": "https://draculatheme.com/",
+      "avatar": "https://draculatheme.com/static/icons/pack-1/045-dracula.svg"
+    },
+    {
+      "name": "mimishahzad",
+      "homepage": "https://github.com/mimishahzad",
+      "avatar": "https://avatars.githubusercontent.com/u/34081810"
+    }
+  ],
+  "css": {
+    "frame": ["variables.css"],
+    "client": ["variables.css", "app.css"],
+    "menu": ["variables.css"]
+  },
+  "js": {},
+  "options": []
+}

repo/dracula/variables.css

@@ -0,0 +1,213 @@
+/**
+ * notion-enhancer: dracula
+ * (c) 2016 Dracula Theme
+ * (c) 2020 mimishahzad
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+:root.dark {
+  --dracula--bg: #282a36;
+  --dracula--bg_lighter: #424450;
+  --dracula--bg_light: #343746;
+  --dracula--bg_dark: #21222c;
+  --dracula--bg_darker: #191a21;
+
+  --dracula--fg: #f8f8f2;
+  --dracula--fg_dark: #babbba;
+
+  --dracula--comment: #6272a4;
+  --dracula--selection: #44475a;
+  --dracula--block_highlight: #44475a75;
+
+  --dracula--light_gray: #CFCFCF;
+  --dracula--gray: var(--dracula--fg_dark);
+  --dracula--brown: #6272a4;
+  --dracula--orange: #ffb86c;
+  --dracula--yellow: #f1fa8c;
+  --dracula--green: #50fa7b;
+  --dracula--blue: #8be9fd;
+  --dracula--purple: #bd93f9;
+  --dracula--pink: #ff79c6;
+  --dracula--red: #ff5555;
+
+  --dracula--bg_light_gray: #71737E;
+  --dracula--bg_gray: var(--dracula--bg_light);
+  --dracula--bg_brown: #465079;
+  --dracula--bg_orange: #8a6345;
+  --dracula--bg_yellow: #8e9656;
+  --dracula--bg_green: #3f945f;
+  --dracula--bg_blue: #498096;
+  --dracula--bg_purple: #6a549b;
+  --dracula--bg_pink: #8d4a7c;
+  --dracula--bg_red: #943844;
+
+  --theme--accent_blue: var(--dracula--purple);
+  --theme--accent_blue-selection: #bb8dfd3d;
+  --theme--accent_blue-hover: #b179ff;
+  --theme--accent_blue-active: #9f5ff8;
+  --theme--accent_red: var(--dracula--comment);
+  --theme--accent_red-button: #6273a439;
+
+  --theme--danger_text: var(--dracula--red);
+  --theme--danger_border: var(--dracula--bg_red);
+
+  --theme--bg: var(--dracula--bg);
+  --theme--bg_secondary: var(--dracula--bg_dark);
+  --theme--bg_card: var(--dracula--bg_light);
+
+  --theme--scrollbar_track: transparent;
+  --theme--scrollbar_thumb: var(--dracula--selection);
+  --theme--scrollbar_thumb-hover: var(--dracula--comment);
+
+  --theme--ui_divider: var(--dracula--bg_lighter);
+  --theme--ui_interactive-hover: var(--dracula--block_highlight);
+  --theme--ui_interactive-active: var(--dracula--bg_lighter);
+  --theme--ui_toggle-off: var(--dracula--block_highlight);
+  --theme--ui_corner_action: var(--theme--bg_card);
+  --theme--ui_corner_action-hover: var(--theme--ui_interactive-hover);
+  --theme--ui_corner_action-active: var(--theme--ui_interactive-active);
+
+  --theme--icon: var(--dracula--comment);
+  --theme--icon_secondary: var(--dracula--comment);
+
+  --theme--text: var(--dracula--fg);
+  --theme--text_secondary: var(--dracula--fg_dark);
+  --theme--text_gray: var(--dracula--gray);
+  --theme--text_brown: var(--dracula--brown);
+  --theme--text_orange: var(--dracula--orange);
+  --theme--text_yellow: var(--dracula--yellow);
+  --theme--text_green: var(--dracula--green);
+  --theme--text_blue: var(--dracula--blue);
+  --theme--text_purple: var(--dracula--purple);
+  --theme--text_pink: var(--dracula--pink);
+  --theme--text_red: var(--dracula--red);
+
+  --theme--highlight_gray: var(--dracula--gray);
+  --theme--highlight_gray-text: var(--dracula--bg);
+  --theme--highlight_brown: var(--dracula--brown);
+  --theme--highlight_brown-text: var(--dracula--fg);
+  --theme--highlight_orange: var(--dracula--orange);
+  --theme--highlight_orange-text: var(--dracula--bg);
+  --theme--highlight_yellow: var(--dracula--yellow);
+  --theme--highlight_yellow-text: var(--dracula--bg);
+  --theme--highlight_green: var(--dracula--green);
+  --theme--highlight_green-text: var(--dracula--bg);
+  --theme--highlight_blue: var(--dracula--blue);
+  --theme--highlight_blue-text: var(--dracula--bg);
+  --theme--highlight_purple: var(--dracula--purple);
+  --theme--highlight_purple-text: var(--dracula--bg);
+  --theme--highlight_pink: var(--dracula--pink);
+  --theme--highlight_pink-text: var(--dracula--bg);
+  --theme--highlight_red: var(--dracula--red);
+  --theme--highlight_red-text: var(--dracula--fg);
+
+  --theme--callout_gray: var(--dracula--bg_gray);
+  --theme--callout_brown: var(--dracula--bg_brown);
+  --theme--callout_orange: var(--dracula--bg_orange);
+  --theme--callout_yellow: var(--dracula--bg_yellow);
+  --theme--callout_green: var(--dracula--bg_green);
+  --theme--callout_blue: var(--dracula--bg_blue);
+  --theme--callout_purple: var(--dracula--bg_purple);
+  --theme--callout_pink: var(--dracula--bg_pink);
+  --theme--callout_red: var(--dracula--bg_red);
+
+  --theme--tag_default: var(--dracula--comment);
+  --theme--tag_default-text: var(--dracula--fg);
+  --theme--tag_light_gray: var(--dracula--light_gray);
+  --theme--tag_light_gray-text: var(--dracula--bg);
+  --theme--tag_gray: var(--dracula--gray);
+  --theme--tag_gray-text: var(--dracula--bg);
+  --theme--tag_brown: var(--dracula--brown);
+  --theme--tag_brown-text: var(--dracula--fg);
+  --theme--tag_orange: var(--dracula--orange);
+  --theme--tag_orange-text: var(--dracula--bg);
+  --theme--tag_yellow: var(--dracula--yellow);
+  --theme--tag_yellow-text: var(--dracula--bg);
+  --theme--tag_green: var(--dracula--green);
+  --theme--tag_green-text: var(--dracula--bg);
+  --theme--tag_blue: var(--dracula--blue);
+  --theme--tag_blue-text: var(--dracula--bg);
+  --theme--tag_purple: var(--dracula--purple);
+  --theme--tag_purple-text: var(--dracula--bg);
+  --theme--tag_pink: var(--dracula--pink);
+  --theme--tag_pink-text: var(--dracula--bg);
+  --theme--tag_red: var(--dracula--red);
+  --theme--tag_red-text: var(--dracula--fg);
+
+  --theme--board_light_gray: var(--dracula--bg_light_gray);
+  --theme--board_light_gray-card: var(--theme--tag_light_gray);
+  --theme--board_light_gray-card_text: var(--theme--tag_light_gray-text);
+  --theme--board_light_gray-text: var(--dracula--fg);
+  --theme--board_gray: var(--dracula--bg_gray);
+  --theme--board_gray-card: var(--theme--tag_gray);
+  --theme--board_gray-card_text: var(--theme--tag_gray-text);
+  --theme--board_gray-text: var(--dracula--fg);
+  --theme--board_brown: var(--dracula--bg_brown);
+  --theme--board_brown-card: var(--theme--tag_brown);
+  --theme--board_brown-card_text: var(--theme--tag_brown-text);
+  --theme--board_brown-text: var(--dracula--fg);
+  --theme--board_orange: var(--dracula--bg_orange);
+  --theme--board_orange-card: var(--theme--tag_orange);
+  --theme--board_orange-card_text: var(--theme--tag_orange-text);
+  --theme--board_orange-text: var(--dracula--fg);
+  --theme--board_yellow: var(--dracula--bg_yellow);
+  --theme--board_yellow-card: var(--theme--tag_yellow);
+  --theme--board_yellow-card_text: var(--theme--tag_yellow-text);
+  --theme--board_yellow-text: var(--dracula--fg);
+  --theme--board_green: var(--dracula--bg_green);
+  --theme--board_green-card: var(--theme--tag_green);
+  --theme--board_green-card_text: var(--theme--tag_green-text);
+  --theme--board_green-text: var(--dracula--fg);
+  --theme--board_blue: var(--dracula--bg_blue);
+  --theme--board_blue-card: var(--theme--tag_blue);
+  --theme--board_blue-card_text: var(--theme--tag_blue-text);
+  --theme--board_blue-text: var(--dracula--fg);
+  --theme--board_purple: var(--dracula--bg_purple);
+  --theme--board_purple-card: var(--theme--tag_purple);
+  --theme--board_purple-card_text: var(--theme--tag_purple-text);
+  --theme--board_purple-text: var(--dracula--fg);
+  --theme--board_pink: var(--dracula--bg_pink);
+  --theme--board_pink-card: var(--theme--tag_pink);
+  --theme--board_pink-card_text: var(--theme--tag_pink-text);
+  --theme--board_pink-text: var(--dracula--fg);
+  --theme--board_red: var(--dracula--bg_red);
+  --theme--board_red-card: var(--theme--tag_red);
+  --theme--board_red-card_text: var(--theme--tag_red-text);
+  --theme--board_red-text: var(--dracula--fg);
+
+  --theme--code_inline: var(--dracula--bg_light);
+  --theme--code_inline-text: var(--dracula--green);
+
+  --theme--code: var(--dracula--bg_light);
+  --theme--code_plain: var(--dracula--fg);
+  --theme--code_function: var(--dracula--green);
+  --theme--code_parameter: var(--dracula--orange);
+  --theme--code_keyword: var(--dracula--pink);
+  --theme--code_constant: var(--dracula--purple);
+  --theme--code_tag: var(--dracula--pink);
+  --theme--code_operator: var(--dracula--pink);
+  --theme--code_important: var(--dracula--pink);
+  --theme--code_regex: var(--dracula--red);
+  --theme--code_property: var(--dracula--blue);
+  --theme--code_builtin: var(--dracula--blue);
+  --theme--code_class-name: var(--dracula--blue);
+  --theme--code_attr-name: var(--dracula--green);
+  --theme--code_attr-value: var(--dracula--yellow);
+  --theme--code_selector: var(--dracula--pink);
+  --theme--code_id: var(--dracula--green);
+  --theme--code_class: var(--dracula--green);
+  --theme--code_pseudo-element: var(--dracula--green);
+  --theme--code_pseudo-class: var(--dracula--green);
+  --theme--code_attribute: var(--dracula--green);
+  --theme--code_value: var(--dracula--yellow);
+  --theme--code_unit: var(--dracula--pink);
+  --theme--code_comment: var(--dracula--comment);
+  --theme--code_punctuation: var(--dracula--text);
+  --theme--code_annotation: var(--theme--code_punctuation);
+  --theme--code_decorator: var(--dracula--green);
+  --theme--code_doctype: var(--dracula--fg_dark);
+  --theme--code_number: var(--dracula--purple);
+  --theme--code_string: var(--dracula--yellow);
+  --theme--code_boolean: var(--dracula--purple);
+}

repo/emoji-sets/client.css

@@ -0,0 +1,10 @@
+/**
+ * notion-enhancer: emoji sets
+ * (c) 2021 Arecsu
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+[aria-label][role='image'][style*='Apple Color Emoji']:not([data-emoji-sets-unsupported]) {
+  margin-left: 2.5px !important;
+}

repo/emoji-sets/client.mjs

@@ -0,0 +1,71 @@
+/**
+ * notion-enhancer: emoji sets
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+export default async function ({ web, env }, db) {
+  const style = await db.get(['style']),
+    // real emojis are used on macos instead of the twitter set
+    nativeEmojiSelector = `[aria-label][role="image"][style*="Apple Color Emoji"]:not([data-emoji-sets-unsupported])`,
+    imgEmojiSelector = '.notion-emoji:not([data-emoji-sets-unsupported])',
+    imgEmojiOverlaySelector = `${imgEmojiSelector} + [src*="notion-emojis"]`;
+
+  await Promise.any([web.whenReady([nativeEmojiSelector]), web.whenReady([imgEmojiSelector])]);
+
+  const nativeEmojis = document.querySelectorAll(nativeEmojiSelector).length,
+    imgEmojis = document.querySelectorAll(imgEmojiSelector).length;
+
+  const unsupportedEmojis = [],
+    emojiReqs = new Map(),
+    getEmoji = async (emoji) => {
+      emoji = encodeURIComponent(emoji);
+      if (unsupportedEmojis.includes(emoji)) return undefined;
+      try {
+        if (!emojiReqs.get(emoji)) {
+          emojiReqs.set(emoji, fetch(`https://emojicdn.elk.sh/${emoji}?style=${style}`));
+        }
+        const res = await emojiReqs.get(emoji);
+        if (!res.ok) throw new Error();
+        return `url("https://emojicdn.elk.sh/${emoji}?style=${style}") 100% 100% / 100%`;
+      } catch {
+        unsupportedEmojis.push(emoji);
+        return undefined;
+      }
+    };
+
+  if (nativeEmojis) {
+    const updateEmojis = async () => {
+      const $emojis = document.querySelectorAll(nativeEmojiSelector);
+      for (const $emoji of $emojis) {
+        const emojiSrc = await getEmoji($emoji.ariaLabel);
+        if (emojiSrc) {
+          $emoji.style.background = emojiSrc;
+          $emoji.style.width = '1em';
+          $emoji.style.height = '1em';
+          $emoji.style.display = 'inline-block';
+          $emoji.innerText = '';
+        } else $emoji.dataset.emojiSetsUnsupported = true;
+      }
+    };
+    web.addDocumentObserver(updateEmojis, [nativeEmojiSelector]);
+  }
+
+  if (style !== 'twitter' && imgEmojis) {
+    const updateEmojis = async () => {
+      const $emojis = document.querySelectorAll(imgEmojiSelector);
+      for (const $emoji of $emojis) {
+        const emojiSrc = await getEmoji($emoji.ariaLabel);
+        if (emojiSrc) {
+          $emoji.style.background = emojiSrc;
+          $emoji.style.opacity = 1;
+          if ($emoji.nextElementSibling?.matches?.(imgEmojiOverlaySelector)) {
+            $emoji.nextElementSibling.style.opacity = 0;
+          }
+        } else $emoji.dataset.emojiSetsUnsupported = true;
+      }
+    };
+    updateEmojis();
+    web.addDocumentObserver(updateEmojis, [imgEmojiSelector, imgEmojiOverlaySelector]);
+  }
+}

repo/emoji-sets/mod.json

@@ -0,0 +1,46 @@
+{
+  "name": "emoji sets",
+  "id": "a2401ee1-93ba-4b8c-9781-7f570bf5d71e",
+  "version": "0.4.0",
+  "description": "pick from a variety of emoji styles to use.",
+  "preview": "emoji-sets.jpg",
+  "tags": ["extension", "customisation"],
+  "authors": [
+    {
+      "name": "dragonwocky",
+      "email": "thedragonring.bod@gmail.com",
+      "homepage": "https://dragonwocky.me/",
+      "avatar": "https://dragonwocky.me/avatar.jpg"
+    }
+  ],
+  "js": {
+    "client": ["client.mjs"]
+  },
+  "css": {
+    "client": ["client.css"]
+  },
+  "options": [
+    {
+      "type": "select",
+      "key": "style",
+      "label": "emoji style",
+      "tooltip": "**initial use may involve some lag and load-time for emojis until they have all been cached**",
+      "values": [
+        "twitter",
+        "apple",
+        "google",
+        "microsoft",
+        "samsung",
+        "whatsapp",
+        "facebook",
+        "messenger",
+        "joypixels",
+        "openmoji",
+        "emojidex",
+        "lg",
+        "htc",
+        "mozilla"
+      ]
+    }
+  ]
+}

repo/focus-mode/client.css

@@ -0,0 +1,21 @@
+/**
+ * notion-enhancer: focus mode
+ * (c) 2020 Arecsu
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+.notion-sidebar-container[style*='width: 0px;'] ~ div .notion-topbar > :first-child {
+  opacity: 0 !important;
+  transition: opacity 200ms ease-in-out !important;
+}
+.notion-sidebar-container[style*='width: 0px;'] ~ div .notion-topbar > :first-child:hover {
+  opacity: 1 !important;
+}
+
+[data-focus-mode='padded']
+  .notion-sidebar-container[style*='width: 0px;']
+  ~ div
+  .notion-frame {
+  height: calc(100vh - 90px) !important;
+}

repo/focus-mode/client.mjs

@@ -0,0 +1,12 @@
+/**
+ * notion-enhancer: focus mode
+ * (c) 2020 Arecsu
+ * (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 (api, db) {
+  if (await db.get(['padded'])) document.body.dataset.focusMode = 'padded';
+}

repo/focus-mode/mod.json

@@ -0,0 +1,39 @@
+{
+  "name": "focus mode",
+  "id": "5a08598d-bfac-4167-9ae8-2bd0e2ef141e",
+  "version": "0.3.0",
+  "description": "hide the titlebar/menubar when the sidebar is closed (returns on hover).",
+  "tags": ["extension", "layout"],
+  "authors": [
+    {
+      "name": "arecsu",
+      "email": "alejandro9r@gmail.com",
+      "homepage": "https://github.com/Arecsu",
+      "avatar": "https://avatars.githubusercontent.com/u/12679098"
+    }
+  ],
+  "css": {
+    "frame": ["tabs.css"],
+    "client": ["client.css"]
+  },
+  "js": {
+    "frame": ["tabs.mjs"],
+    "client": ["client.mjs"]
+  },
+  "options": [
+    {
+      "type": "toggle",
+      "key": "padded",
+      "label": "even padding",
+      "tooltip": "matches the empty space at the top and sides of the frame with **extra padding at the bottom when the sidebar is hidden**",
+      "value": true
+    },
+    {
+      "type": "toggle",
+      "key": "tabs",
+      "label": "hide tabs",
+      "tooltip": "makes the tab bar transparent unless hovered over",
+      "value": false
+    }
+  ]
+}

repo/focus-mode/tabs.css

@@ -0,0 +1,14 @@
+/**
+ * notion-enhancer: focus mode
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+[data-focus-mode='hide-tabs'] header:not(:hover) {
+  background: var(--theme--bg);
+  border-bottom-color: transparent;
+}
+[data-focus-mode='hide-tabs'] header:not(:hover) > * {
+  opacity: 0;
+  transition: opacity 200ms ease-in-out;
+}

repo/focus-mode/tabs.mjs

@@ -0,0 +1,12 @@
+/**
+ * notion-enhancer: focus mode
+ * (c) 2020 Arecsu
+ * (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 (api, db) {
+  if (await db.get(['tabs'])) document.body.dataset.focusMode = 'hide-tabs';
+}

repo/font-chooser/fonts.css

@@ -0,0 +1,25 @@
+/**
+ * notion-enhancer: font chooser
+ * (c) 2021 TorchAtlas (https://github.com/torchatlas/)
+ * (c) 2021 admiraldus (https://github.com/admiraldus)
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+:root {
+  --theme--font_sans: var(--font_chooser--sans);
+  --theme--font_serif: var(--font_chooser--serif);
+  --theme--font_mono: var(--font_chooser--mono);
+  --theme--font_code: var(--font_chooser--code);
+}
+
+.notion-quote-block {
+  font-family: var(--font_chooser--quotes, inherit) !important;
+}
+
+[placeholder='Untitled'],
+[placeholder='Heading 1'],
+[placeholder='Heading 2'],
+[placeholder='Heading 3'] {
+  font-family: var(--font_chooser--headings, inherit) !important;
+}

repo/font-chooser/fonts.mjs

@@ -0,0 +1,28 @@
+/**
+ * notion-enhancer: font chooser
+ * (c) 2021 TorchAtlas (https://github.com/torchatlas/)
+ * (c) 2021 admiraldus (https://github.com/admiraldus
+ * (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 ({}, db) {
+  const defaults = {
+    sans: " -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol'",
+    serif:
+      "Lyon-Text, Georgia, YuMincho, 'Yu Mincho', 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Songti TC', 'Songti SC', SimSun, 'Nanum Myeongjo', NanumMyeongjo, Batang, serif",
+    mono: 'iawriter-mono, Nitti, Menlo, Courier, monospace',
+    code: "SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace",
+    quotes: 'inherit',
+    headings: 'inherit',
+  };
+  for (let style of ['sans', 'serif', 'mono', 'code', 'quotes', 'headings']) {
+    const font = await db.get([style]);
+    document.documentElement.style.setProperty(
+      `--font_chooser--${style}`,
+      font || defaults[style]
+    );
+  }
+}

repo/font-chooser/mod.json

@@ -0,0 +1,68 @@
+{
+  "name": "font chooser",
+  "id": "e0d8d148-45e7-4d79-8313-e7b2ad8abe16",
+  "version": "0.4.0",
+  "description": "set custom fonts.",
+  "tags": ["extension", "customisation"],
+  "authors": [
+    {
+      "name": "TorchAtlas",
+      "homepage": "https://github.com/torchatlas/",
+      "avatar": "https://avatars.githubusercontent.com/u/12666855"
+    }
+  ],
+  "js": {
+    "client": ["fonts.mjs"],
+    "menu": ["fonts.mjs"],
+    "frame": ["fonts.mjs"]
+  },
+  "css": {
+    "client": ["fonts.css"],
+    "menu": ["fonts.css"],
+    "frame": ["fonts.css"]
+  },
+  "options": [
+    {
+      "type": "text",
+      "key": "sans",
+      "label": "sans-serif (inc. ui)",
+      "tooltip": "**this font needs to be installed on your device** - leave the option blank to use notion's default font",
+      "value": ""
+    },
+    {
+      "type": "text",
+      "key": "serif",
+      "label": "serif",
+      "tooltip": "**this font needs to be installed on your device** - leave the option blank to use notion's default font",
+      "value": ""
+    },
+    {
+      "type": "text",
+      "key": "mono",
+      "label": "monospace",
+      "tooltip": "**this font needs to be installed on your device** - leave the option blank to use notion's default font",
+      "value": ""
+    },
+    {
+      "type": "text",
+      "key": "code",
+      "label": "code",
+      "tooltip": "**this font needs to be installed on your device** - leave the option blank to use notion's default font",
+      "value": ""
+    },
+    {
+      "type": "text",
+      "key": "quotes",
+      "label": "quotes",
+      "tooltip": "**this font needs to be installed on your device** - leave the option blank to use notion's default font",
+      "value": ""
+    },
+    {
+      "type": "text",
+      "key": "headings",
+      "label": "headings",
+      "tooltip": "**this font needs to be installed on your device** - leave the option blank to use notion's default font",
+      "value": ""
+    }
+  ]
+}

repo/global-block-links/client.css

@@ -0,0 +1,73 @@
+/**
+ * notion-enhancer: global block links
+ * (c) 2021 admiraldus (https://github.com/admiraldus)
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+.global_block_links--topbar_copy {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 3px;
+  height: 28px;
+  min-width: 0px;
+  padding-right: 8px;
+  padding-left: 6px;
+  font-size: 14px;
+  line-height: 1.2;
+  color: var(--theme--text);
+  cursor: pointer;
+  transition: background 20ms ease-in 0s;
+  user-select: none;
+}
+.global_block_links--topbar_copy > svg {
+  display: block;
+  height: 16px;
+  width: 16px;
+  fill: var(--theme--icon);
+}
+.global_block_links--topbar_copy > span {
+  margin-left: 2px;
+  opacity: 1;
+  transition: opacity 0.4s ease;
+}
+.global_block_links--topbar_copy > svg + span {
+  margin-left: 6px;
+}
+
+.global_block_links--block_copy {
+  display: flex;
+  align-items: center;
+  height: 28px;
+  width: 100%;
+  font-size: 14px;
+  line-height: 1.2;
+  cursor: pointer;
+  transition: background 20ms ease-in 0s;
+  user-select: none;
+}
+.global_block_links--block_copy > svg {
+  display: block;
+  margin-left: 14px;
+  height: 17px;
+  width: 17px;
+  color: var(--theme--icon);
+}
+.global_block_links--block_copy > span {
+  margin-right: 14px;
+  margin-left: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.global_block_links--topbar_copy:hover,
+.global_block_links--block_copy:hover {
+  background: var(--theme--ui_interactive-hover);
+}
+
+.global_block_links--hidden {
+  position: absolute;
+  top: -9999px;
+  opacity: 0 !important;
+}

repo/global-block-links/client.mjs

@@ -0,0 +1,109 @@
+/**
+ * notion-enhancer: global block links
+ * (c) 2021 admiraldus (https://github.com/admiraldus)
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+export default async function ({ web, components, notion }, db) {
+  const topbarShareSelector = '.notion-topbar-share-menu',
+    blockActionSelector =
+      '.notion-overlay-container .notion-scroller.vertical .notion-focusable > div > div > [style*="text-overflow: ellipsis;"]',
+    hoveredActionSelector =
+      '.notion-overlay-container .notion-scroller.vertical .notion-focusable[style*="background:"]',
+    topbarCopyClass = 'global_block_links--topbar_copy',
+    blockCopyClass = 'global_block_links--block_copy',
+    hiddenClass = 'global_block_links--hidden';
+
+  const topbarCopyIcon = await db.get(['topbar_copy_icon']),
+    topbarCopyText = await db.get(['topbar_copy_text']);
+  if (topbarCopyIcon || topbarCopyText) {
+    const $topbarCopyTemplate = web.render(
+      web.html`<div class="${topbarCopyClass}" role="button" tabindex="0"></div>`,
+      topbarCopyIcon
+        ? web.html`<svg viewBox="0 0 30 30">
+            <path d="M2,12c0-3.309,2.691-6,6-6h8c3.309,0,6,2.691,6,6s-2.691,6-6,6h-6c0,0.736,
+            0.223,1.41,0.574,2H16c4.418,0,8-3.582,8-8 c0-4.418-3.582-8-8-8H8c-4.418,0-8,3.582-8,
+            8c0,2.98,1.634,5.575,4.051,6.951C4.021,18.638,4,18.321,4,18 c0-0.488,0.046-0.967,
+            0.115-1.436C2.823,15.462,2,13.827,2,12z M25.953,11.051C25.984,11.363,26,11.68,26,12
+            c0,0.489-0.047,0.965-0.117,1.434C27.176,14.536,28,16.172,28,18c0,3.309-2.691,6-6,6h-8c-3.309,
+            0-6-2.691-6-6s2.691-6,6-6h6 c0-0.731-0.199-1.413-0.545-2H14c-4.418,0-8,3.582-8,8c0,
+            4.418,3.582,8,8,8h8c4.418,0,8-3.582,8-8 C30,15.021,28.368,12.428,25.953,11.051z"></path>
+          </svg>`
+        : '',
+      topbarCopyText
+        ? web.html`
+            <span data-copy>Copy link</span>
+            <span data-copied class="${hiddenClass}">Link copied!</span>
+          `
+        : ''
+    );
+
+    const insertTopbarCopy = () => {
+      const $btns = document.querySelectorAll(topbarShareSelector);
+      $btns.forEach(($btn) => {
+        if (!$btn.previousElementSibling?.classList?.contains?.(topbarCopyClass)) {
+          const $copy = $topbarCopyTemplate.cloneNode(true);
+          components.addTooltip($copy, '**Copy page link**');
+          $btn.before($copy);
+
+          let resetButtonDelay;
+          $copy.addEventListener('click', () => {
+            if (topbarCopyText) {
+              const $copyText = $copy.querySelector('[data-copy]'),
+                $copiedText = $copy.querySelector('[data-copied]');
+              $copyText.classList.add(hiddenClass);
+              $copiedText.classList.remove(hiddenClass);
+              clearTimeout(resetButtonDelay);
+              resetButtonDelay = setTimeout(() => {
+                $copyText.classList.remove(hiddenClass);
+                $copiedText.classList.add(hiddenClass);
+              }, 1250);
+            }
+
+            web.copyToClipboard(`https://notion.so/${notion.getPageID().replace(/-/g, '')}`);
+          });
+        }
+      });
+    };
+    insertTopbarCopy();
+    web.addDocumentObserver(insertTopbarCopy, [topbarShareSelector]);
+  }
+
+  const $blockCopyTemplate = web.html`
+    <div class="${blockCopyClass}" role="button" tabindex="0">
+      ${await components.feather('globe')}
+      <span>Global link</span>
+    </div>`;
+
+  const getLinkButtons = () =>
+      [...document.querySelectorAll(blockActionSelector)]
+        .filter(($action) =>
+          ['Copy link', '링크 복사', 'リンクをコピー'].includes($action.textContent)
+        )
+        .map(($action) => $action.closest('.notion-focusable')),
+    insertBlockCopy = () => {
+      const $btns = getLinkButtons();
+      $btns.forEach(($btn) => {
+        if (!$btn.previousElementSibling?.classList?.contains?.(blockCopyClass)) {
+          const $copy = $blockCopyTemplate.cloneNode(true);
+          $btn.before($copy);
+
+          $copy.addEventListener('mouseover', () => {
+            document.querySelectorAll(hoveredActionSelector).forEach(($action) => {
+              $action.style.background = '';
+            });
+          });
+
+          $copy.addEventListener('click', async () => {
+            $btn.click();
+            const link = await web.readFromClipboard(),
+              id = link.replace(/.+#(?=\w+)/, '');
+            web.copyToClipboard(id.length === 32 ? `https://notion.so/${id}` : link);
+          });
+        }
+      });
+    };
+  insertBlockCopy();
+  web.addDocumentObserver(insertBlockCopy, [blockActionSelector]);
+}

repo/global-block-links/mod.json

@@ -0,0 +1,35 @@
+{
+  "name": "global block links",
+  "id": "74856af4-6970-455d-bd86-0a385a402dd1",
+  "version": "0.1.0",
+  "description": "easily copy the global link of a page or block.",
+  "preview": "global-block-links.jpg",
+  "tags": ["extension", "shortcut"],
+  "authors": [
+    {
+      "name": "admiraldus",
+      "homepage": "https://github.com/admiraldus",
+      "avatar": "https://raw.githubusercontent.com/admiraldus/admiraldus/main/module.gif"
+    }
+  ],
+  "js": {
+    "client": ["client.mjs"]
+  },
+  "css": {
+    "client": ["client.css"]
+  },
+  "options": [
+    {
+      "key": "topbar_copy_icon",
+      "label": "copy page links from the topbar (icon)",
+      "type": "toggle",
+      "value": true
+    },
+    {
+      "key": "topbar_copy_text",
+      "label": "copy page links from the topbar (text)",
+      "type": "toggle",
+      "value": true
+    }
+  ]
+}

repo/gruvbox-dark/mod.json

@@ -0,0 +1,29 @@
+{
+  "name": "gruvbox dark",
+  "id": "ad0f5c5c-8b62-4b20-8a54-929e663ea368",
+  "version": "0.3.0",
+  "description": "a gray, 'retro groove' palette based on the vim theme of the same name.",
+  "preview": "gruvbox-dark.png",
+  "tags": ["theme", "dark"],
+  "authors": [
+    {
+      "name": "morhetz",
+      "email": "morhetz@gmail.com",
+      "homepage": "https://github.com/morhetz",
+      "avatar": "https://avatars.githubusercontent.com/u/554231"
+    },
+    {
+      "name": "jordanrobinson",
+      "email": "me@jordanrobinson.co.uk",
+      "homepage": "https://jordanrobinson.co.uk/",
+      "avatar": "https://avatars.githubusercontent.com/u/1202911"
+    }
+  ],
+  "css": {
+    "frame": ["variables.css"],
+    "client": ["variables.css"],
+    "menu": ["variables.css"]
+  },
+  "js": {},
+  "options": []
+}

repo/gruvbox-dark/variables.css

@@ -0,0 +1,191 @@
+/**
+ * notion-enhancer: gruvbox dark
+ * (c) 2015-2020 morhetz <morhetz@gmail.com>
+ * (c) 2021 jordanrobinson <me@jordanrobinson.co.uk> (https://jordanrobinson.co.uk/)
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+:root.dark {
+  --gruvbox_dark--bg: #282828;
+  --gruvbox_dark--light_gray_dark: #B3A89E;
+  --gruvbox_dark--gray_dark: #928374;
+  --gruvbox_dark--red_dark: #cc241d;
+  --gruvbox_dark--red_light: #fb4934;
+  --gruvbox_dark--green_dark: #98971a;
+  --gruvbox_dark--green_light: #b8bb26;
+  --gruvbox_dark--yellow_dark: #d79921;
+  --gruvbox_dark--yellow_light: #fabd2f;
+  --gruvbox_dark--blue_dark: #458588;
+  --gruvbox_dark--blue_light: #83a598;
+  --gruvbox_dark--purple_dark: #b16286;
+  --gruvbox_dark--purple_light: #d3869b;
+  --gruvbox_dark--aqua_dark: #689d6a;
+  --gruvbox_dark--aqua_light: #8ec07c;
+  --gruvbox_dark--gray_light: #a89984;
+  --gruvbox_dark--orange_dark: #d65d0e;
+  --gruvbox_dark--orange_light: #fe8019;
+  --gruvbox_dark--fg: #ebdbb2;
+  --gruvbox_dark--bg0_h: #1d2021;
+  --gruvbox_dark--bg0: #282828;
+  --gruvbox_dark--bg1: #3c3836;
+  --gruvbox_dark--bg2: #504945;
+  --gruvbox_dark--bg3: #665c54;
+  --gruvbox_dark--bg4: #7c6f64;
+  --gruvbox_dark--bg0_s: #32302f;
+  --gruvbox_dark--fg4: #a89984;
+  --gruvbox_dark--fg3: #bdae93;
+  --gruvbox_dark--fg2: #d5c4a1;
+  --gruvbox_dark--fg1: #ebdbb2;
+  --gruvbox_dark--fg0: #fbf1c7;
+
+  --theme--accent_blue: var(--gruvbox_dark--bg3);
+  --theme--accent_blue-selection: rgba(80, 73, 69, 0.5);
+  --theme--accent_blue-hover: var(--gruvbox_dark--fg3);
+  --theme--accent_blue-active: var(--gruvbox_dark--fg3);
+  --theme--accent_red: var(--gruvbox_dark--blue_dark);
+  --theme--accent_red-button: var(--gruvbox_dark--blue_light);
+
+  --theme--bg: var(--gruvbox_dark--bg0);
+  --theme--bg_secondary: var(--gruvbox_dark--bg1);
+  --theme--bg_card: var(--gruvbox_dark--bg3);
+
+  --theme--scrollbar_track: transparent;
+  --theme--scrollbar_thumb: var(--gruvbox_dark--bg0_s);
+  --theme--scrollbar_thumb-hover: var(--gruvbox_dark--bg3);
+
+  --theme--ui_divider: var(--gruvbox_dark--gray_light);
+  --theme--ui_interactive-hover: rgba(80, 73, 69, 0.7);
+  --theme--ui_interactive-active: rgba(80, 73, 69, 0.9);
+  --theme--ui_toggle-off: var(--gruvbox_dark--bg4);
+  --theme--ui_toggle-feature: var(--gruvbox_dark--fg);
+  --theme--ui_corner_action: var(--theme--bg_card);
+  --theme--ui_corner_action-hover: var(--theme--ui_interactive-hover);
+  --theme--ui_corner_action-active: var(--theme--ui_interactive-active);
+
+  --theme--icon: var(--gruvbox_dark--fg0);
+  --theme--icon_secondary: var(--gruvbox_dark--fg3);
+
+  --theme--text: var(--gruvbox_dark--fg0);
+  --theme--text_secondary: var(--gruvbox_dark--fg3);
+  --theme--text_gray: var(--gruvbox_dark--gray_dark);
+  --theme--text_brown: var(--gruvbox_dark--bg4);
+  --theme--text_orange: var(--gruvbox_dark--orange_dark);
+  --theme--text_yellow: var(--gruvbox_dark--yellow_dark);
+  --theme--text_green: var(--gruvbox_dark--green_dark);
+  --theme--text_blue: var(--gruvbox_dark--blue_dark);
+  --theme--text_purple: var(--gruvbox_dark--purple_dark);
+  --theme--text_pink: var(--gruvbox_dark--purple_light);
+  --theme--text_red: var(--gruvbox_dark--red_dark);
+
+  --theme--highlight_gray: var(--gruvbox_dark--gray_dark);
+  --theme--highlight_gray-text: var(--gruvbox_dark--bg0);
+  --theme--highlight_brown: var(--theme--tag_brown);
+  --theme--highlight_brown-text: var(--gruvbox_dark--bg0);
+  --theme--highlight_orange: var(--gruvbox_dark--orange_dark);
+  --theme--highlight_orange-text: var(--gruvbox_dark--bg0);
+  --theme--highlight_yellow: var(--gruvbox_dark--yellow_dark);
+  --theme--highlight_yellow-text: var(--gruvbox_dark--bg0);
+  --theme--highlight_green: var(--gruvbox_dark--green_dark);
+  --theme--highlight_green-text: var(--gruvbox_dark--bg0);
+  --theme--highlight_blue: var(--gruvbox_dark--blue_dark);
+  --theme--highlight_blue-text: var(--gruvbox_dark--bg0);
+  --theme--highlight_purple: var(--gruvbox_dark--purple_dark);
+  --theme--highlight_purple-text: var(--gruvbox_dark--bg0);
+  --theme--highlight_pink: var(--theme--tag_pink);
+  --theme--highlight_pink-text: var(--gruvbox_dark--bg0);
+  --theme--highlight_red: var(--gruvbox_dark--red_dark);
+  --theme--highlight_red-text: var(--gruvbox_dark--bg0);
+
+  --theme--callout_gray: var(--theme--highlight_gray);
+  --theme--callout_gray-text: var(--gruvbox_dark--bg0);
+  --theme--callout_brown: var(--theme--highlight_brown);
+  --theme--callout_brown-text: var(--gruvbox_dark--bg0);
+  --theme--callout_orange: var(--theme--highlight_orange);
+  --theme--callout_orange-text: var(--gruvbox_dark--bg0);
+  --theme--callout_yellow: var(--theme--highlight_yellow);
+  --theme--callout_yellow-text: var(--gruvbox_dark--bg0);
+  --theme--callout_green: var(--theme--highlight_green);
+  --theme--callout_green-text: var(--gruvbox_dark--bg0);
+  --theme--callout_blue: var(--theme--highlight_blue);
+  --theme--callout_blue-text: var(--gruvbox_dark--bg0);
+  --theme--callout_purple: var(--theme--highlight_purple);
+  --theme--callout_purple-text: var(--gruvbox_dark--bg0);
+  --theme--callout_pink: var(--theme--highlight_pink);
+  --theme--callout_pink-text: var(--gruvbox_dark--bg0);
+  --theme--callout_red: var(--theme--highlight_red);
+  --theme--callout_red-text: var(--gruvbox_dark--bg0);
+
+  --theme--tag_default: var(--gruvbox_dark--gray_dark);
+  --theme--tag_default-text: var(--gruvbox_dark--bg2);
+  --theme--tag_light_gray: var(--gruvbox_dark--light_gray_dark);
+  --theme--tag_light_gray-text: var(--gruvbox_dark--bg2);
+  --theme--tag_gray: var(--gruvbox_dark--gray_dark);
+  --theme--tag_gray-text: var(--gruvbox_dark--bg2);
+  --theme--tag_brown: var(--gruvbox_dark--fg3);
+  --theme--tag_brown-text: var(--gruvbox_dark--bg2);
+  --theme--tag_orange: var(--gruvbox_dark--orange_dark);
+  --theme--tag_orange-text: var(--gruvbox_dark--bg0);
+  --theme--tag_yellow: var(--gruvbox_dark--yellow_dark);
+  --theme--tag_yellow-text: var(--gruvbox_dark--bg0);
+  --theme--tag_green: var(--gruvbox_dark--green_dark);
+  --theme--tag_green-text: var(--gruvbox_dark--bg0);
+  --theme--tag_blue: var(--gruvbox_dark--blue_dark);
+  --theme--tag_blue-text: var(--gruvbox_dark--bg0);
+  --theme--tag_purple: var(--gruvbox_dark--purple_dark);
+  --theme--tag_purple-text: var(--gruvbox_dark--bg0);
+  --theme--tag_pink: var(--gruvbox_dark--purple_light);
+  --theme--tag_pink-text: var(--gruvbox_dark--bg0);
+  --theme--tag_red: var(--gruvbox_dark--red_dark);
+  --theme--tag_red-text: var(--gruvbox_dark--bg0);
+
+  --theme--board_light_gray: var(--gruvbox_dark--light_gray_dark);
+  --theme--board_light_gray-text: var(--gruvbox_dark--bg0);
+  --theme--board_light_gray-card: var(--theme--tag_light_gray);
+  --theme--board_gray: var(--theme--text_gray);
+  --theme--board_gray-text: var(--gruvbox_dark--bg0);
+  --theme--board_gray-card: var(--theme--tag_gray);
+  --theme--board_brown: var(--theme--text_brown);
+  --theme--board_brown-text: var(--gruvbox_dark--bg0);
+  --theme--board_brown-card: var(--theme--tag_brown);
+  --theme--board_orange: var(--theme--text_orange);
+  --theme--board_orange-text: var(--gruvbox_dark--bg0);
+  --theme--board_orange-card: var(--theme--tag_orange);
+  --theme--board_yellow: var(--theme--text_yellow);
+  --theme--board_yellow-text: var(--gruvbox_dark--bg0);
+  --theme--board_yellow-card: var(--theme--tag_yellow);
+  --theme--board_green: var(--theme--text_green);
+  --theme--board_green-text: var(--gruvbox_dark--bg0);
+  --theme--board_green-card: var(--theme--tag_green);
+  --theme--board_blue: var(--theme--text_blue);
+  --theme--board_blue-text: var(--gruvbox_dark--bg0);
+  --theme--board_blue-card: var(--theme--tag_blue);
+  --theme--board_purple: var(--theme--text_purple);
+  --theme--board_purple-text: var(--gruvbox_dark--bg0);
+  --theme--board_purple-card: var(--theme--tag_purple);
+  --theme--board_pink: var(--theme--text_pink);
+  --theme--board_pink-text: var(--gruvbox_dark--bg0);
+  --theme--board_pink-card: var(--theme--tag_pink);
+  --theme--board_red: var(--theme--text_red);
+  --theme--board_red-text: var(--gruvbox_dark--bg0);
+  --theme--board_red-card: var(--theme--tag_red);
+
+  --theme--code_inline: var(--gruvbox_dark--bg1);
+  --theme--code_inline-text: var(--gruvbox_dark--blue_light);
+
+  --theme--code: var(--gruvbox_dark--bg1);
+  --theme--code_function: var(--theme--text_blue);
+  --theme--code_keyword: var(--theme--text_pink);
+  --theme--code_tag: var(--theme--text_pink);
+  --theme--code_operator: var(--theme--text_yellow);
+  --theme--code_important: var(--theme--text_yellow);
+  --theme--code_property: var(--theme--text_pink);
+  --theme--code_builtin: var(--theme--text_yellow);
+  --theme--code_attr-name: var(--theme--text_yellow);
+  --theme--code_comment: var(--theme--text_ui);
+  --theme--code_punctuation: var(--gruvbox_dark--aqua_light);
+  --theme--code_doctype: var(--gruvbox_dark--aqua_light);
+  --theme--code_number: var(--theme--text_purple);
+  --theme--code_string: var(--theme--text_orange);
+  --theme--code_attr-value: var(--theme--text_orange);
+}

repo/gruvbox-light/mod.json

@@ -0,0 +1,29 @@
+{
+  "name": "gruvbox light",
+  "id": "54f01911-60fc-4c9d-85b5-5c5ca3dd6b81",
+  "version": "0.3.0",
+  "description": "a sepia, 'retro groove' palette based on the vim theme of the same name.",
+  "preview": "gruvbox-light.png",
+  "tags": ["theme", "light"],
+  "authors": [
+    {
+      "name": "morhetz",
+      "email": "morhetz@gmail.com",
+      "homepage": "https://github.com/morhetz",
+      "avatar": "https://avatars.githubusercontent.com/u/554231"
+    },
+    {
+      "name": "jordanrobinson",
+      "email": "me@jordanrobinson.co.uk",
+      "homepage": "https://jordanrobinson.co.uk/",
+      "avatar": "https://avatars.githubusercontent.com/u/1202911"
+    }
+  ],
+  "css": {
+    "frame": ["variables.css"],
+    "client": ["variables.css"],
+    "menu": ["variables.css"]
+  },
+  "js": {},
+  "options": []
+}

repo/gruvbox-light/variables.css

@@ -0,0 +1,196 @@
+/**
+ * notion-enhancer: gruvbox light
+ * (c) 2015-2020 morhetz <morhetz@gmail.com>
+ * (c) 2021 jordanrobinson <me@jordanrobinson.co.uk> (https://jordanrobinson.co.uk/)
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+:root.light {
+  /*
+   * variables are named for consistency with gruvbox dark,
+   * but the _light variants are actually darker here
+   */
+  --gruvbox_light--bg: #fbf1c7;
+  --gruvbox_light--light_gray_dark: #B3A89E;
+  --gruvbox_light--gray_dark: #928374;
+  --gruvbox_light--red_dark: #cc241d;
+  --gruvbox_light--red_light: #9d0006;
+  --gruvbox_light--green_dark: #98971a;
+  --gruvbox_light--green_light: #79740e;
+  --gruvbox_light--yellow_dark: #d79921;
+  --gruvbox_light--yellow_light: #b57614;
+  --gruvbox_light--blue_dark: #458588;
+  --gruvbox_light--blue_light: #076678;
+  --gruvbox_light--purple_dark: #b16286;
+  --gruvbox_light--purple_light: #b16286;
+  --gruvbox_light--aqua_dark: #689d6a;
+  --gruvbox_light--aqua_light: #427b58;
+  --gruvbox_light--gray_light: #7c6f64;
+  --gruvbox_light--orange_dark: #d65d0e;
+  --gruvbox_light--orange_light: #af3a03;
+  --gruvbox_light--fg: #3c3836;
+  --gruvbox_light--bg0_h: #f9f5d7;
+  --gruvbox_light--bg0: #fbf1c7;
+  --gruvbox_light--bg1: #ebdbb2;
+  --gruvbox_light--bg2: #d5c4a1;
+  --gruvbox_light--bg3: #bdae93;
+  --gruvbox_light--bg4: #a89984;
+  --gruvbox_light--bg0_s: #f2e5bc;
+  --gruvbox_light--fg4: #7c6f64;
+  --gruvbox_light--fg3: #665c54;
+  --gruvbox_light--fg2: #504945;
+  --gruvbox_light--fg1: #3c3836;
+  --gruvbox_light--fg0: #282828;
+
+  --theme--accent_blue: var(--gruvbox_light--bg3);
+  --theme--accent_blue-selection: rgba(189, 175, 147, 0.5);
+  --theme--accent_blue-hover: var(--gruvbox_light--fg3);
+  --theme--accent_blue-active: var(--gruvbox_light--fg3);
+  --theme--accent_red: var(--gruvbox_light--blue_light);
+  --theme--accent_red-button: var(--gruvbox_light--blue_dark);
+
+  --theme--bg: var(--gruvbox_light--bg0);
+  --theme--bg_secondary: var(--gruvbox_light--bg1);
+  --theme--bg_card: var(--gruvbox_light--bg2);
+
+  --theme--scrollbar_track: transparent;
+  --theme--scrollbar_thumb: var(--gruvbox_light--bg0_s);
+  --theme--scrollbar_thumb-hover: var(--gruvbox_light--bg3);
+
+  --theme--ui_divider: var(--gruvbox_light--gray_light);
+  --theme--ui_interactive-hover: rgba(124, 111, 100, 0.3);
+  --theme--ui_interactive-active: rgba(124, 111, 100, 0.4);
+  --theme--ui_input: var(--gruvbox_light--bg3);
+  --theme--ui_toggle-off: var(--gruvbox_light--bg4);
+  --theme--ui_toggle-feature: var(--gruvbox_light--bg);
+  --theme--ui_corner_action: var(--theme--bg_card);
+  --theme--ui_corner_action-hover: var(--theme--ui_interactive-hover);
+  --theme--ui_corner_action-active: var(--theme--ui_interactive-active);
+
+  --theme--icon: var(--gruvbox_light--fg0);
+  --theme--icon_secondary: var(--gruvbox_light--fg3);
+
+  --theme--text: var(--gruvbox_light--fg0);
+  --theme--text_secondary: var(--gruvbox_light--fg3);
+  --theme--text_gray: var(--gruvbox_light--gray_dark);
+  --theme--text_brown: var(--gruvbox_light--bg4);
+  --theme--text_orange: var(--gruvbox_light--orange_dark);
+  --theme--text_yellow: var(--gruvbox_light--yellow_dark);
+  --theme--text_green: var(--gruvbox_light--green_dark);
+  --theme--text_blue: var(--gruvbox_light--blue_dark);
+  --theme--text_purple: var(--gruvbox_light--purple_dark);
+  --theme--text_pink: var(--gruvbox_light--purple_light);
+  --theme--text_red: var(--gruvbox_light--red_dark);
+
+  --theme--highlight_gray: var(--gruvbox_light--gray_dark);
+  --theme--highlight_gray-text: var(--gruvbox_light--bg0);
+  --theme--highlight_brown: var(--theme--tag_brown);
+  --theme--highlight_brown-text: var(--gruvbox_light--bg0);
+  --theme--highlight_orange: var(--gruvbox_light--orange_dark);
+  --theme--highlight_orange-text: var(--gruvbox_light--bg0);
+  --theme--highlight_yellow: var(--gruvbox_light--yellow_dark);
+  --theme--highlight_yellow-text: var(--gruvbox_light--bg0);
+  --theme--highlight_green: var(--gruvbox_light--green_dark);
+  --theme--highlight_green-text: var(--gruvbox_light--bg0);
+  --theme--highlight_blue: var(--gruvbox_light--blue_dark);
+  --theme--highlight_blue-text: var(--gruvbox_light--bg0);
+  --theme--highlight_purple: var(--gruvbox_light--purple_dark);
+  --theme--highlight_purple-text: var(--gruvbox_light--bg0);
+  --theme--highlight_pink: var(--theme--tag_pink);
+  --theme--highlight_pink-text: var(--gruvbox_light--bg0);
+  --theme--highlight_red: var(--gruvbox_light--red_dark);
+  --theme--highlight_red-text: var(--gruvbox_light--bg0);
+
+  --theme--callout_gray: var(--theme--highlight_gray);
+  --theme--callout_gray-text: var(--gruvbox_light--bg0);
+  --theme--callout_brown: var(--theme--highlight_brown);
+  --theme--callout_brown-text: var(--gruvbox_light--bg0);
+  --theme--callout_orange: var(--theme--highlight_orange);
+  --theme--callout_orange-text: var(--gruvbox_light--bg0);
+  --theme--callout_yellow: var(--theme--highlight_yellow);
+  --theme--callout_yellow-text: var(--gruvbox_light--bg0);
+  --theme--callout_green: var(--theme--highlight_green);
+  --theme--callout_green-text: var(--gruvbox_light--bg0);
+  --theme--callout_blue: var(--theme--highlight_blue);
+  --theme--callout_blue-text: var(--gruvbox_light--bg0);
+  --theme--callout_purple: var(--theme--highlight_purple);
+  --theme--callout_purple-text: var(--gruvbox_light--bg0);
+  --theme--callout_pink: var(--theme--highlight_pink);
+  --theme--callout_pink-text: var(--gruvbox_light--bg0);
+  --theme--callout_red: var(--theme--highlight_red);
+  --theme--callout_red-text: var(--gruvbox_light--bg0);
+
+  --theme--tag_default: var(--gruvbox_light--gray_dark);
+  --theme--tag_default-text: var(--gruvbox_light--bg2);
+  --theme--tag_light_gray: var(--gruvbox_light--light_gray_dark);
+  --theme--tag_light_gray-text: var(--gruvbox_light--bg0);
+  --theme--tag_gray: var(--gruvbox_light--gray_dark);
+  --theme--tag_gray-text: var(--gruvbox_light--bg2);
+  --theme--tag_brown: var(--gruvbox_light--fg3);
+  --theme--tag_brown-text: var(--gruvbox_light--bg2);
+  --theme--tag_orange: var(--gruvbox_light--orange_dark);
+  --theme--tag_orange-text: var(--gruvbox_light--bg0);
+  --theme--tag_yellow: var(--gruvbox_light--yellow_dark);
+  --theme--tag_yellow-text: var(--gruvbox_light--bg0);
+  --theme--tag_green: var(--gruvbox_light--green_dark);
+  --theme--tag_green-text: var(--gruvbox_light--bg0);
+  --theme--tag_blue: var(--gruvbox_light--blue_dark);
+  --theme--tag_blue-text: var(--gruvbox_light--bg0);
+  --theme--tag_purple: var(--gruvbox_light--purple_dark);
+  --theme--tag_purple-text: var(--gruvbox_light--bg0);
+  --theme--tag_pink: var(--gruvbox_light--purple_light);
+  --theme--tag_pink-text: var(--gruvbox_light--bg0);
+  --theme--tag_red: var(--gruvbox_light--red_dark);
+  --theme--tag_red-text: var(--gruvbox_light--bg0);
+
+  --theme--board_light_gray: var(--gruvbox_light--light_gray_dark);
+  --theme--board_light_gray-text: var(--gruvbox_light--bg0_h);
+  --theme--board_light_gray-card: var(--theme--tag_light_gray);
+  --theme--board_gray: var(--theme--text_gray);
+  --theme--board_gray-text: var(--gruvbox_light--bg0);
+  --theme--board_gray-card: var(--theme--tag_gray);
+  --theme--board_brown: var(--theme--text_brown);
+  --theme--board_brown-text: var(--gruvbox_light--bg0);
+  --theme--board_brown-card: var(--theme--tag_brown);
+  --theme--board_orange: var(--theme--text_orange);
+  --theme--board_orange-text: var(--gruvbox_light--bg0);
+  --theme--board_orange-card: var(--theme--tag_orange);
+  --theme--board_yellow: var(--theme--text_yellow);
+  --theme--board_yellow-text: var(--gruvbox_light--bg0);
+  --theme--board_yellow-card: var(--theme--tag_yellow);
+  --theme--board_green: var(--theme--text_green);
+  --theme--board_green-text: var(--gruvbox_light--bg0);
+  --theme--board_green-card: var(--theme--tag_green);
+  --theme--board_blue: var(--theme--text_blue);
+  --theme--board_blue-text: var(--gruvbox_light--bg0);
+  --theme--board_blue-card: var(--theme--tag_blue);
+  --theme--board_purple: var(--theme--text_purple);
+  --theme--board_purple-text: var(--gruvbox_light--bg0);
+  --theme--board_purple-card: var(--theme--tag_purple);
+  --theme--board_pink: var(--theme--text_pink);
+  --theme--board_pink-text: var(--gruvbox_light--bg0);
+  --theme--board_pink-card: var(--theme--tag_pink);
+  --theme--board_red: var(--theme--text_red);
+  --theme--board_red-text: var(--gruvbox_light--bg0);
+  --theme--board_red-card: var(--theme--tag_red);
+
+  --theme--code_inline: var(--gruvbox_light--bg1);
+  --theme--code_inline-text: var(--gruvbox_light--blue_light);
+
+  --theme--code: var(--gruvbox_light--bg1);
+  --theme--code_function: var(--theme--text_blue);
+  --theme--code_keyword: var(--theme--text_pink);
+  --theme--code_tag: var(--theme--text_pink);
+  --theme--code_operator: var(--theme--text_yellow);
+  --theme--code_important: var(--theme--text_yellow);
+  --theme--code_property: var(--theme--text_pink);
+  --theme--code_builtin: var(--theme--text_yellow);
+  --theme--code_attr-name: var(--theme--text_yellow);
+  --theme--code_comment: var(--theme--text_ui);
+  --theme--code_punctuation: var(--gruvbox_light--aqua_light);
+  --theme--code_doctype: var(--gruvbox_light--aqua_light);
+  --theme--code_number: var(--theme--text_purple);
+  --theme--code_string: var(--theme--text_orange);
+  --theme--code_attr-value: var(--theme--text_orange);
+}

repo/icon-sets/client.css

@@ -0,0 +1,236 @@
+/**
+ * notion-enhancer: icon sets
+ * (c) 2019 jayhxmo (https://jaymo.io/)
+ * (c) 2020 CloudHill <rl.cloudhill@gmail.com> (https://github.com/CloudHill)
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+.icon_sets--tab_button {
+  position: relative;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  flex-shrink: 0;
+}
+.icon_sets--tab_button > .notion-focusable {
+  user-select: none;
+  transition: background 20ms ease-in 0s;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  height: 28px;
+  border-radius: 3px;
+  font-size: 14px;
+  line-height: 1.2;
+  padding-left: 8px;
+  padding-right: 8px;
+  color: var(--theme--text);
+}
+.icon_sets--tab_button:hover > .notion-focusable {
+  background: var(--theme--ui_interactive-hover);
+}
+.icon_sets--tab_button:active > .notion-focusable {
+  background: var(--theme--ui_interactive-active);
+}
+
+.icon_sets--view {
+  padding: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  z-index: 1;
+}
+.icon_sets--actions {
+  display: flex;
+  padding: 10px 14px;
+}
+
+.icon_sets--actions > .notion-focusable-within {
+  flex-grow: 1;
+}
+.icon_sets--link_input {
+  flex-grow: 1;
+  font-size: 14px;
+  line-height: 20px;
+  padding: 4px 6px;
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+  box-shadow: var(--theme--ui_shadow) 0px 0px 0px 1px inset;
+  background: var(--theme--ui_input);
+  cursor: text;
+  height: 28px;
+}
+.icon_sets--link_input > input {
+  font-size: inherit;
+  line-height: inherit;
+  border: none;
+  background: none;
+  width: 100%;
+  display: block;
+  resize: none;
+  padding: 0px;
+}
+
+.icon_sets--link_submit {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+
+.icon_sets--upload,
+.icon_sets--link_submit {
+  user-select: none;
+  transition: background 20ms ease-in 0s;
+  cursor: pointer;
+  border: none;
+  background: var(--theme--accent_blue);
+  color: var(--theme--accent_blue-text);
+  line-height: 1.2;
+  padding: 6px 8px;
+  height: 28px;
+  font-size: 14px;
+  font-weight: 500;
+}
+.icon_sets--upload:hover,
+.icon_sets--link_submit:hover {
+  background: var(--theme--accent_blue-hover);
+}
+.icon_sets--upload:active,
+.icon_sets--link_submit:active {
+  background: var(--theme--accent_blue-active);
+}
+
+.icon_sets--upload {
+  margin-left: 0.5em;
+  border-radius: 3px;
+}
+
+.icon_sets--list {
+  /* scroller */
+  height: 100%;
+  word-break: break-all;
+  overflow: hidden auto;
+  padding: 0 14px 10px 14px;
+}
+
+.icon_sets--error {
+  color: var(--theme--accent_red);
+}
+.icon_sets--title,
+.icon_sets--error {
+  margin: 6px 0 8px 0;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.2;
+  user-select: none;
+  text-transform: uppercase;
+  border-radius: 2px;
+  padding: 0.25em;
+  display: flex;
+  align-items: center;
+}
+
+.icon_sets--title {
+  cursor: pointer;
+  color: var(--theme--text_secondary);
+}
+.icon_sets--title:hover {
+  background: var(--theme--ui_interactive-hover);
+}
+.icon_sets--title:active {
+  background: var(--theme--ui_interactive-active);
+}
+
+.icon_sets--title .info {
+  /* tooltips */
+  height: 1em;
+  margin-left: 0.5em;
+}
+
+.icon_sets--spinner {
+  margin-left: 0.5em;
+  height: 1em;
+  width: 1em;
+}
+.icon_sets--spinner img {
+  width: 100%;
+  height: 100%;
+  animation: rotation 1.3s infinite linear;
+}
+@keyframes rotation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+}
+
+.icon_sets--title a {
+  color: currentColor;
+  transition: color 100ms ease-in;
+}
+.icon_sets--title a:hover {
+  color: var(--theme--accent_blue);
+}
+
+.icon_sets--title .triangle {
+  height: 1em;
+  width: 0.9em;
+  margin: 0 0.5em 0 0.25em;
+  transition: transform 200ms ease-out 0s;
+  transform: rotateZ(180deg);
+}
+.icon_sets--title[data-collapsed='true'] .triangle {
+  transform: rotateZ(90deg);
+}
+.icon_sets--title[data-collapsed='true'] + .icon_sets--set {
+  height: 0 !important;
+}
+
+.icon_sets--set {
+  display: flex;
+  flex-wrap: wrap;
+  overflow: hidden;
+  transition: height 200ms ease-out 0s;
+}
+.icon_sets--icon {
+  user-select: none;
+  transition: background 20ms ease-in 0s;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 3px;
+  width: 32px;
+  height: 32px;
+  font-size: 24px;
+}
+.icon_sets--icon:hover {
+  background: var(--theme--ui_interactive-hover);
+}
+.icon_sets--icon:active {
+  background: var(--theme--ui_interactive-active);
+}
+.icon_sets--icon > img {
+  max-width: 24px;
+  max-height: 24px;
+}
+.icon_sets--sprite {
+  width: 24px;
+  height: 24px;
+  background-size: 24px;
+  background-repeat: no-repeat;
+  pointer-events: none;
+}
+
+.icon_sets--divider {
+  height: 1px;
+  margin: 1em 0;
+  border-bottom: 1px solid var(--theme--ui_divider);
+}
+.icon_sets--title[data-collapsed='true'] + .icon_sets--set + .icon_sets--divider {
+  margin-top: 0.5em;
+}

repo/icon-sets/client.mjs

@@ -0,0 +1,313 @@
+/**
+ * notion-enhancer: icon sets
+ * (c) 2019 jayhxmo (https://jaymo.io/)
+ * (c) 2020 CloudHill <rl.cloudhill@gmail.com> (https://github.com/CloudHill)
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+const getImgData = (url) =>
+  new Promise(async (res, rej) => {
+    const blob = await fetch(url).then((res) => res.blob()),
+      reader = new FileReader();
+    reader.onload = (e) => res(e.target.result);
+    reader.readAsDataURL(blob);
+  });
+
+export default async function ({ web, fs, components, notion }, db) {
+  const recentUploads = await db.get(['recent_uploads'], []),
+    preventQualityReduction = await db.get(['prevent_quality_reduction']),
+    $triangleSvg = web.html`<svg viewBox="0 0 100 100" class="triangle">
+      <polygon points="5.9,88.2 50,11.8 94.1,88.2" />
+    </svg>`;
+
+  const customIconSets = [],
+    customIconsFile = await db.get(['json']);
+  if (customIconsFile?.content) {
+    const iconsData = JSON.parse(customIconsFile.content);
+    customIconSets.push(...(iconsData.icons || iconsData));
+  }
+
+  const enhancerIconSets = [],
+    enhancerIconsUrl = 'https://raw.githubusercontent.com/notion-enhancer/icons/main/';
+  if (await db.get(['default_sets'])) {
+    const iconsData = await fs.getJSON(`${enhancerIconsUrl}/icons.json`);
+    enhancerIconSets.push(...(iconsData.icons || iconsData));
+  }
+
+  const mediaMenuSelector = '.notion-media-menu',
+    mediaScrollerSelector = '.notion-media-menu > .notion-scroller',
+    mediaFilterSelector = '.notion-media-menu > :first-child > :last-child',
+    mediaLinkInputSelector = '.notion-focusable-within > input[type=url]',
+    tabBtnSelector = (n) =>
+      `.notion-media-menu > :first-child > :first-child > :nth-child(${n})`;
+
+  const renderSetTitle = async (title, loadPromises = [], $tooltip = undefined) => {
+    const isCollapsed = await db.get(['collapsed', title], false),
+      $title = web.html`<p class="icon_sets--title"
+            ${isCollapsed ? 'data-collapsed="true"' : ''}></p>`,
+      $spinner = web.html`<span class="icon_sets--spinner">
+        <img src="/images/loading-spinner.4dc19970.svg" />
+      </span>`;
+    web.render(
+      $title,
+      $triangleSvg.cloneNode(true),
+      web.html`<span>${title}</span>`,
+      $spinner
+    );
+    $title.addEventListener('click', () => {
+      const newState = $title.dataset.collapsed !== 'true';
+      db.set(['collapsed', title], newState);
+      $title.dataset.collapsed = newState;
+    });
+    // hide spinner after all icons finish loading
+    // doesn't need to be waited on by renderers
+    (async () => {
+      await Promise.all(loadPromises);
+      $spinner.remove();
+      if ($tooltip) {
+        const $infoSvg = web.html`${await components.feather('info', { class: 'info' })}`;
+        components.addTooltip($infoSvg, $tooltip, { offsetDirection: 'right' });
+        web.render($title, $infoSvg);
+      }
+    })();
+    return $title;
+  };
+
+  const $iconsTab = web.html`<div class="icon_sets--tab_button">
+      <div class="notion-focusable" role="button" tabindex="0">Icons</div>
+    </div>`,
+    // actions
+    $iconsLinkInput = web.html`<div class="icon_sets--link_input">
+      <input placeholder="Paste an image link…" type="url">
+    </div>`,
+    $iconsLinkSubmit = web.html`<button class="icon_sets--link_submit">Submit</button>`,
+    $iconsUploadFile = web.html`<input type="file" accept="image/*" style="display:none">`,
+    $iconsUploadSubmit = web.render(
+      web.html`<button class="icon_sets--upload"></button>`,
+      'Upload an image',
+      $iconsUploadFile
+    ),
+    // sets
+    $setsList = web.html`<div class="icon_sets--list"></div>`,
+    // container
+    $iconsView = web.render(
+      web.html`<div class="icon_sets--view" style="display:none"></div>`,
+      web.render(
+        web.html`<div class="icon_sets--actions"></div>`,
+        web.render(
+          web.html`<div class="notion-focusable-within" style="display:flex;border-radius:3px;"></div>`,
+          $iconsLinkInput,
+          $iconsLinkSubmit
+        ),
+        $iconsUploadSubmit
+      ),
+      web.render($setsList)
+    );
+
+  let $mediaMenu, $activeTabUnderline;
+  const insertIconsTab = async () => {
+    if (document.contains($mediaMenu)) return;
+
+    // prevent injection into file upload menus
+    $mediaMenu = document.querySelector(mediaMenuSelector);
+    if (!$mediaMenu || !$mediaMenu.textContent.includes('Emoji')) return;
+
+    const $emojiTab = document.querySelector(tabBtnSelector(1)),
+      $emojiScroller = document.querySelector(mediaScrollerSelector),
+      $emojiFilter = document.querySelector(mediaFilterSelector),
+      $uploadTab = document.querySelector(tabBtnSelector(2)),
+      $linkTab = document.querySelector(tabBtnSelector(3));
+    $uploadTab.style.display = 'none';
+    $linkTab.style.display = 'none';
+    if ($activeTabUnderline) $activeTabUnderline.remove();
+    $activeTabUnderline =
+      $emojiTab.children[1] || $uploadTab.children[1] || $linkTab.children[1];
+    $emojiTab.after($iconsTab);
+    $emojiScroller.after($iconsView);
+
+    const renderRecentUploads = async () => {
+        const $recentUploads = web.html`<div class="icon_sets--set"></div>`,
+          loadPromises = [];
+        for (let i = recentUploads.length - 1; i >= 0; i--) {
+          const { signed, url } = recentUploads[i],
+            $icon = web.html`<span class="icon_sets--icon">
+              <img src="${web.escape(signed)}">
+            </span>`;
+          web.render($recentUploads, $icon);
+          $icon.addEventListener('click', (event) => {
+            if (event.shiftKey) {
+              recentUploads.splice(i, 1);
+              db.set(['recent_uploads'], recentUploads);
+              $icon.remove();
+            } else setIcon({ signed, url });
+          });
+          loadPromises.push(
+            new Promise((res, rej) => {
+              $icon.firstElementChild.onload = res;
+              $icon.firstElementChild.onerror = res;
+            })
+          );
+        }
+
+        const $recentUploadsTitle = await renderSetTitle(
+          'Recent',
+          loadPromises,
+          web.html`<p><b>Click</b> to reuse an icon <br><b>Shift-click</b> to remove it</p>`
+        );
+        web.render($setsList, $recentUploadsTitle, $recentUploads);
+      },
+      renderIconSet = async (iconData, enhancerSet = false) => {
+        try {
+          const $set = web.html`<div class="icon_sets--set"></div>`;
+          if (iconData.sourceUrl?.endsWith?.('/')) {
+            iconData.sourceUrl = iconData.sourceUrl.slice(0, -1);
+          }
+
+          const loadPromises = [];
+          for (let i = 0; i < (iconData.count || iconData.source.length); i++) {
+            const iconUrl = iconData.sourceUrl
+                ? Array.isArray(iconData.source)
+                  ? `${iconData.sourceUrl}/${iconData.source[i]}.${iconData.extension}`
+                  : `${iconData.sourceUrl}/${iconData.source}_${i}.${iconData.extension}`
+                : iconData.source[i],
+              sprite = enhancerSet
+                ? `style="
+                    background-image: url(${enhancerIconsUrl}${iconData.source}/sprite.png);
+                    background-position: 0 -${i * 24}px;
+                  "`
+                : '',
+              $img = sprite
+                ? web.html`<div class="icon_sets--sprite" ${sprite}></div>`
+                : web.html`<img src="${web.escape(iconUrl)}">`,
+              $icon = web.render(web.html`<span class="icon_sets--icon"></span>`, $img);
+            web.render($set, $icon);
+            $icon.addEventListener('click', (event) => {
+              if (!event.shiftKey) setIcon({ signed: iconUrl, url: iconUrl });
+            });
+            if (!sprite) {
+              loadPromises.push(
+                new Promise((res, rej) => {
+                  $img.onload = res;
+                  $img.onerror = res;
+                })
+              );
+            }
+          }
+
+          const author = iconData.author
+              ? iconData.authorUrl
+                ? web.raw`by <a target="_blank" href="${web.escape(iconData.authorUrl)}">
+                  ${iconData.author}
+                </a>`
+                : web.raw`by ${web.escape(iconData.author)}`
+              : '',
+            $title = await renderSetTitle(
+              `${web.escape(iconData.name)} ${author}`,
+              loadPromises
+            );
+          web.render($setsList, $title, $set);
+        } catch (err) {
+          console.error(err);
+          web.render(
+            $setsList,
+            web.html`<div class="icon_sets--error">
+              Invalid set: ${web.escape(iconData?.name || 'Unknown')}
+            </div>`
+          );
+        }
+      },
+      renderCustomIconSets = async () => {
+        if (customIconSets.length) {
+          web.render($setsList, web.html`<div class="icon_sets--divider"></div>`);
+        }
+        await Promise.all(customIconSets.map((set) => renderIconSet(set)));
+      },
+      renderEnhancerIconSets = async () => {
+        if (enhancerIconSets.length) {
+          web.render($setsList, web.html`<div class="icon_sets--divider"></div>`);
+        }
+        await Promise.all(
+          enhancerIconSets.map((set) => {
+            set.sourceUrl = set.sourceUrl || enhancerIconsUrl + set.source;
+            return renderIconSet(set, true);
+          })
+        );
+      };
+
+    const displayIconsTab = async (force = false) => {
+        if ($iconsTab.contains($activeTabUnderline) && !force) return;
+        web.render($iconsTab, $activeTabUnderline);
+        $iconsView.style.display = '';
+        $emojiScroller.style.display = 'none';
+        $emojiFilter.style.display = 'none';
+        web.empty($setsList);
+        await renderRecentUploads();
+        await renderCustomIconSets();
+        await renderEnhancerIconSets();
+        $iconsView.querySelectorAll('.icon_sets--set').forEach(($set) => {
+          $set.style.height = `${$set.scrollHeight}px`;
+        });
+      },
+      displayEmojiTab = (force = false) => {
+        if ($emojiTab.contains($activeTabUnderline) && !force) return;
+        web.render($emojiTab, $activeTabUnderline);
+        $iconsView.style.display = 'none';
+        $emojiScroller.style.display = '';
+        $emojiFilter.style.display = '';
+      };
+    // use onclick instead of eventlistener to override prev
+    $iconsTab.onclick = displayIconsTab;
+    $emojiTab.onclick = displayEmojiTab;
+    // otherwise both may be visible on reopen
+    displayEmojiTab(true);
+
+    async function setIcon({ signed, url }) {
+      // without this react gets upset
+      displayEmojiTab();
+      $linkTab.firstChild.click();
+      await new Promise(requestAnimationFrame);
+
+      $mediaMenu.parentElement.style.opacity = '0';
+      const iconUrl = preventQualityReduction ? await getImgData(signed) : url;
+
+      // call native setter, imitate human input
+      const $notionLinkInput = $mediaMenu.querySelector(mediaLinkInputSelector),
+        proto = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value');
+      proto.set.call($notionLinkInput, iconUrl);
+      const inputEvent = new Event('input', { bubbles: true }),
+        enterKeydownEvent = new KeyboardEvent('keydown', {
+          bubbles: true,
+          cancelable: true,
+          keyCode: 13,
+        });
+      $notionLinkInput.dispatchEvent(inputEvent);
+      $notionLinkInput.dispatchEvent(enterKeydownEvent);
+    }
+
+    const submitLinkIcon = () => {
+      const url = $iconsLinkInput.firstElementChild.value;
+      if (!url) return;
+      const icon = { signed: notion.sign(url, notion.getPageID()), url: url };
+      setIcon(icon);
+      recentUploads.push(icon);
+      db.set(['recent_uploads'], recentUploads);
+    };
+    $iconsLinkInput.onkeyup = (event) => {
+      if (event.code === 13) submitLinkIcon();
+    };
+    $iconsLinkSubmit.onclick = submitLinkIcon;
+
+    // upload file to aws, then submit link
+    $iconsUploadSubmit.onclick = () => $iconsUploadFile.click();
+    $iconsUploadFile.onchange = async (event) => {
+      const file = event.target.files[0],
+        url = await notion.upload(file),
+        icon = { signed: notion.sign(url, notion.getPageID()), url: url };
+      setIcon(icon);
+      recentUploads.push(icon);
+      db.set(['recent_uploads'], recentUploads);
+    };
+  };
+  web.addDocumentObserver(insertIconsTab, [mediaMenuSelector]);
+}

repo/icon-sets/mod.json

@@ -0,0 +1,43 @@
+{
+  "name": "icon sets",
+  "id": "2d1f4809-9581-40dd-9bf3-4239db406483",
+  "version": "0.4.0",
+  "description": "upload, save and reuse custom icons directly from the icon picker. check out the [icons page](https://notion-enhancer.github.io/advanced/icons) for instructions on loading entire sets.",
+  "preview": "icon-sets.jpg",
+  "tags": ["integration", "customisation"],
+  "authors": [
+    {
+      "name": "dragonwocky",
+      "email": "thedragonring.bod@gmail.com",
+      "homepage": "https://dragonwocky.me/",
+      "avatar": "https://dragonwocky.me/avatar.jpg"
+    }
+  ],
+  "js": {
+    "client": ["client.mjs"]
+  },
+  "css": {
+    "client": ["client.css"]
+  },
+  "options": [
+    {
+      "type": "toggle",
+      "key": "default_sets",
+      "label": "load default icon sets from github",
+      "value": true
+    },
+    {
+      "type": "toggle",
+      "key": "prevent_quality_reduction",
+      "label": "prevent icon quality reduction",
+      "tooltip": "**this may break icons in widgets or be rejected by notion if images are too high quality** - encodes and submits images as data urls to prevent notion from optimising them (reduces image quality by ~20%)",
+      "value": true
+    },
+    {
+      "type": "file",
+      "key": "json",
+      "label": "custom icon sets (.json)",
+      "extensions": [".json"]
+    }
+  ]
+}

repo/indentation-lines/client.css

@@ -0,0 +1,101 @@
+/**
+ * notion-enhancer: indentation lines
+ * (c) 2020 Alexa Baldon <alnbaldon@gmail.com> (https://github.com/runargs)
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+.notion-page-content .notion-bulleted_list-block > div > div:last-child,
+.notion-page-content .notion-numbered_list-block > div > div:last-child,
+.notion-page-content .notion-to_do-block > div > div:last-child,
+.notion-page-content .notion-toggle-block > div > div:last-child,
+.notion-page-content [class$='header-block'] > div > div > div:last-child,
+.notion-page-content .notion-table_of_contents-block > div > div > a > div > div {
+  position: relative;
+}
+
+.notion-page-content .notion-bulleted_list-block > div > div:last-child::before,
+.notion-page-content .notion-numbered_list-block > div > div:last-child::before,
+.notion-page-content .notion-to_do-block > div > div:last-child::before,
+.notion-page-content .notion-toggle-block > div > div:last-child::before,
+.notion-page-content [class$='header-block'] > div > div > div:last-child::before,
+.notion-page-content .pseudoSelection > div > div:last-child::before {
+  content: '';
+  position: absolute;
+  height: calc(100% - 2em);
+  top: 2em;
+  margin-inline-start: -14.48px;
+}
+.notion-page-content [class$='header-block'] > div > div > div:last-child::before {
+  margin-inline-start: -15.48px;
+}
+
+.notion-page-content
+  .notion-table_of_contents-block
+  > div
+  > div
+  > a
+  > div
+  > div:not([style*='margin-left: 0px'])
+  > div::before {
+  content: '';
+  position: absolute;
+  height: 100%;
+  top: 0;
+  margin-inline-start: -14.48px;
+}
+
+/* add background to block dragger */
+.notion-frame
+  > [style*='position: absolute; top: 0px; left: 0px;']
+  [style*='position: absolute; top: 3px; left: -20px; width: 18px; height: 24px; pointer-events: auto; cursor: -webkit-grab;']
+  [data-block-id],
+.notion-peek-renderer
+  > div
+  > [style*='position: absolute; top: 0px; left: 0px;']
+  [style*='position: absolute; top: 3px; left: -20px; width: 18px; height: 24px; pointer-events: auto; cursor: -webkit-grab;']
+  [data-block-id] {
+  background: var(--theme--bg) !important;
+  border-radius: 3px;
+}
+.notion-frame
+  > [style*='position: absolute; top: 0px; left: 0px;']
+  [style*='position: absolute; top: 3px; left: -20px; width: 18px; height: 24px; pointer-events: auto; cursor: -webkit-grab;']
+  + .notion-focusable,
+.notion-peek-renderer
+  > div
+  > [style*='position: absolute; top: 0px; left: 0px;']
+  [style*='position: absolute; top: 3px; left: -20px; width: 18px; height: 24px; pointer-events: auto; cursor: -webkit-grab;']
+  + .notion-focusable {
+  left: -42px !important;
+  background: transparent !important;
+}
+.notion-frame
+  > [style*='position: absolute; top: 0px; left: 0px;']
+  [style*='position: absolute; top: 3px; left: -20px; width: 18px; height: 24px; pointer-events: auto; cursor: -webkit-grab;']
+  + .notion-focusable
+  > .plus,
+.notion-peek-renderer
+  > div
+  > [style*='position: absolute; top: 0px; left: 0px;']
+  [style*='position: absolute; top: 3px; left: -20px; width: 18px; height: 24px; pointer-events: auto; cursor: -webkit-grab;']
+  + .notion-focusable
+  > .plus {
+  border-radius: 3px;
+  width: 18px !important;
+  padding: 0 1px !important;
+  background: var(--theme--bg) !important;
+}
+.notion-frame
+  > [style*='position: absolute; top: 0px; left: 0px;']
+  [style*='position: absolute; top: 3px; left: -20px; width: 18px; height: 24px; pointer-events: auto; cursor: -webkit-grab;']
+  + .notion-focusable
+  > .plus:hover,
+.notion-peek-renderer
+  > div
+  > [style*='position: absolute; top: 0px; left: 0px;']
+  [style*='position: absolute; top: 3px; left: -20px; width: 18px; height: 24px; pointer-events: auto; cursor: -webkit-grab;']
+  + .notion-focusable
+  > .plus:hover {
+  background: var(--theme--ui_interactive-hover) !important;
+}

repo/indentation-lines/client.mjs

@@ -0,0 +1,109 @@
+/**
+ * notion-enhancer: indentation lines
+ * (c) 2020 Alexa Baldon <alnbaldon@gmail.com> (https://github.com/runargs)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+'use strict';
+
+export default async function ({ web }, db) {
+  let style = 'solid',
+    opacity = 1,
+    rainbow = false;
+  switch (await db.get(['style'])) {
+    case 'dashed':
+      style = 'dashed';
+      break;
+    case 'dotted':
+      style = 'dotted';
+      break;
+    case 'soft':
+      opacity = 0.25;
+      break;
+    case 'rainbow':
+      opacity = 0.7;
+      rainbow = true;
+      break;
+  }
+
+  let css = '';
+  const colors = ['red', 'pink', 'purple', 'blue', 'green', 'yellow'];
+  colors.push(...colors, ...colors, ...colors, 'gray');
+
+  for (const listType of ['bulleted_list', 'numbered_list', 'to_do', 'toggle']) {
+    if (!(await db.get([listType]))) continue;
+    css += `
+      .notion-page-content .notion-${listType}-block > div > div:last-child::before {
+        border-left: 1px ${style} var(--indentation_lines--color, currentColor);
+        opacity: ${opacity};
+      }`;
+
+    if (rainbow) {
+      for (let i = 0; i < colors.length; i++) {
+        css += `
+          .notion-page-content ${`.notion-${listType}-block `.repeat(i + 1)}
+            > div > div:last-child::before {
+            --indentation_lines--color: var(--theme--text_${colors[i]});
+          }`;
+      }
+    }
+  }
+
+  if (await db.get(['toggle_header'])) {
+    css += `
+      .notion-page-content [class$=header-block] > div > div > div:last-child::before {
+        border-left: 1px ${style} var(--indentation_lines--color, currentColor);
+        opacity: ${opacity};
+      }`;
+
+    if (rainbow) {
+      for (let i = 0; i < colors.length; i++) {
+        css += `
+        .notion-page-content ${`[class$=header-block] `.repeat(i + 1)}
+          > div > div > div:last-child::before{
+          --indentation_lines--color: var(--theme--text_${colors[i]});
+        }`;
+      }
+    }
+  }
+
+  if (await db.get(['table_of_contents'])) {
+    css += `
+      .notion-page-content .notion-table_of_contents-block > div > div > a > div
+        > div:not([style*='margin-left: 0px']) > div::before {
+        border-left: 1px ${style} var(--indentation_lines--color, currentColor);
+        opacity: ${opacity};
+      }`;
+
+    if (rainbow) {
+      css += `
+        .notion-page-content .notion-table_of_contents-block > div > div > a > div
+          > div[style*='margin-left: 24px'] > div::before {
+          --indentation_lines--color: var(--theme--text_${colors[0]});
+        }
+        .notion-page-content .notion-table_of_contents-block > div > div > a > div
+          > div[style*='margin-left: 48px'] > div::before {
+          --indentation_lines--color: var(--theme--text_${colors[1]});
+        }`;
+    }
+  }
+
+  if (await db.get(['outliner'])) {
+    css += `
+      .outliner--header:not([style='--outliner--indent:0px;'])::before {
+        border-left: 1px ${style} var(--indentation_lines--color, currentColor);
+        opacity: ${opacity};
+      }`;
+    if (rainbow) {
+      css += `
+        .outliner--header[style='--outliner--indent:18px;']::before {
+          --indentation_lines--color: var(--theme--text_${colors[0]});
+        }
+        .outliner--header[style='--outliner--indent:36px;']::before {
+          --indentation_lines--color: var(--theme--text_${colors[1]});
+        }`;
+    }
+  }
+
+  web.render(document.head, web.html`<style>${css}</style>`);
+}

repo/indentation-lines/mod.json

@@ -0,0 +1,72 @@
+{
+  "name": "indentation lines",
+  "id": "35815b3b-3916-4dc6-8769-c9c2448f8b57",
+  "version": "0.2.0",
+  "description": "adds vertical relationship lines to make list trees easier to follow.",
+  "preview": "indentation-lines.jpg",
+  "tags": ["extension", "usability"],
+  "authors": [
+    {
+      "name": "runargs",
+      "email": "alnbaldon@gmail.com",
+      "homepage": "http://github.com/runargs",
+      "avatar": "https://avatars.githubusercontent.com/u/39810066"
+    }
+  ],
+  "css": {
+    "client": ["client.css"]
+  },
+  "js": {
+    "client": ["client.mjs"]
+  },
+  "options": [
+    {
+      "type": "select",
+      "key": "style",
+      "label": "style",
+      "values": ["solid", "dashed", "dotted", "soft", "rainbow"]
+    },
+    {
+      "type": "toggle",
+      "key": "bulleted_list",
+      "label": "bulleted lists",
+      "value": true
+    },
+    {
+      "type": "toggle",
+      "key": "numbered_list",
+      "label": "numbered lists",
+      "value": true
+    },
+    {
+      "type": "toggle",
+      "key": "to_do",
+      "label": "to-do lists",
+      "value": true
+    },
+    {
+      "type": "toggle",
+      "key": "toggle",
+      "label": "toggle lists",
+      "value": true
+    },
+    {
+      "type": "toggle",
+      "key": "toggle_header",
+      "label": "toggle headers",
+      "value": true
+    },
+    {
+      "type": "toggle",
+      "key": "table_of_contents",
+      "label": "tables of contents",
+      "value": true
+    },
+    {
+      "type": "toggle",
+      "key": "outliner",
+      "label": "outliner (panel extension)",
+      "value": true
+    }
+  ]
+}

repo/integrated-titlebar/buttons.css

@@ -0,0 +1,76 @@
+/**
+ * notion-enhancer: integrated titlebar
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+.integrated_titlebar--dragarea {
+  width: 100%;
+  display: block;
+  -webkit-app-region: drag;
+  background: var(--theme--bg_secondary);
+  height: var(--integrated_titlebar--dragarea-height);
+}
+
+.integrated_titlebar--buttons {
+  display: flex;
+  align-items: center;
+}
+.sidebar > .integrated_titlebar--buttons {
+  margin: -0.5rem 0 0.75rem auto;
+}
+
+.integrated_titlebar--buttons button {
+  user-select: none;
+  transition: background 20ms ease-in 0s;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: 3px;
+  height: 28px;
+  width: 33px;
+  padding: 0 0.25px 0 0;
+
+  margin-left: 2px;
+  border: none;
+  background: transparent;
+  font-size: 18px;
+  -webkit-app-region: no-drag;
+}
+.integrated_titlebar--buttons button svg {
+  display: block;
+  width: 20px;
+  height: 20px;
+  fill: var(--theme--icon);
+  color: var(--theme--icon);
+}
+
+.integrated_titlebar--buttons button:focus,
+.integrated_titlebar--buttons button:hover {
+  background: var(--theme--ui_interactive-hover);
+}
+.integrated_titlebar--buttons button:active {
+  background: var(--theme--ui_interactive-active);
+}
+#integrated_titlebar--close:focus,
+#integrated_titlebar--close:hover,
+#integrated_titlebar--close:active {
+  background: var(--theme--accent_red);
+  color: var(--theme--accent_red-text);
+}
+
+.notion-update-sidebar [style*='margin-top: 45px;'] {
+  margin-top: calc(45px + var(--integrated_titlebar--dragarea-height, 0px)) !important;
+}
+.notion-topbar {
+  height: calc(45px + var(--integrated_titlebar--dragarea-height, 0px)) !important;
+}
+.notion-frame {
+  height: calc(100vh - 45px - var(--integrated_titlebar--dragarea-height, 0px)) !important;
+}
+
+body > .body-container {
+  height: calc(100% - var(--integrated_titlebar--dragarea-height, 0px)) !important;
+}

repo/integrated-titlebar/buttons.mjs

@@ -0,0 +1,73 @@
+/**
+ * notion-enhancer: integrated titlebar
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+'use strict';
+
+export const createWindowButtons = async ({ electron, web, components }, db) => {
+  let minimizeIcon = (await db.get(['minimize_icon'])) || (await components.feather('minus')),
+    maximizeIcon = (await db.get(['maximize_icon'])) || (await components.feather('maximize')),
+    unmaximizeIcon =
+      (await db.get(['unmaximize_icon'])) || (await components.feather('minimize')),
+    closeIcon = (await db.get(['close_icon'])) || (await components.feather('x'));
+  minimizeIcon = minimizeIcon.trim();
+  maximizeIcon = maximizeIcon.trim();
+  unmaximizeIcon = unmaximizeIcon.trim();
+  closeIcon = closeIcon.trim();
+
+  minimizeIcon =
+    minimizeIcon.startsWith('<svg') && minimizeIcon.endsWith('</svg>')
+      ? minimizeIcon
+      : web.escape(minimizeIcon);
+  maximizeIcon =
+    maximizeIcon.startsWith('<svg') && maximizeIcon.endsWith('</svg>')
+      ? maximizeIcon
+      : web.escape(maximizeIcon);
+  unmaximizeIcon =
+    unmaximizeIcon.startsWith('<svg') && unmaximizeIcon.endsWith('</svg>')
+      ? unmaximizeIcon
+      : web.escape(unmaximizeIcon);
+  closeIcon =
+    closeIcon.startsWith('<svg') && closeIcon.endsWith('</svg>')
+      ? closeIcon
+      : web.escape(closeIcon);
+
+  const $windowButtons = web.html`<div class="integrated_titlebar--buttons"></div>`,
+    $minimize = web.html`<button id="integrated_titlebar--minimize">
+      ${minimizeIcon}
+    </button>`,
+    $maximize = web.html`<button id="integrated_titlebar--maximize">
+      ${maximizeIcon}
+    </button>`,
+    $unmaximize = web.html`<button id="integrated_titlebar--unmaximize">
+      ${unmaximizeIcon}
+    </button>`,
+    $close = web.html`<button id="integrated_titlebar--close">
+      ${closeIcon}
+    </button>`;
+  components.addTooltip($minimize, '**Minimize window**');
+  components.addTooltip($maximize, '**Maximize window**');
+  components.addTooltip($unmaximize, '**Unmaximize window**');
+  components.addTooltip($close, '**Close window**');
+
+  $minimize.addEventListener('click', () => electron.browser.minimize());
+  $maximize.addEventListener('click', () => electron.browser.maximize());
+  $unmaximize.addEventListener('click', () => electron.browser.unmaximize());
+  $close.addEventListener('click', () => electron.browser.close());
+  electron.browser.on('maximize', () => {
+    $maximize.replaceWith($unmaximize);
+  });
+  electron.browser.on('unmaximize', () => {
+    $unmaximize.replaceWith($maximize);
+  });
+
+  web.render(
+    $windowButtons,
+    $minimize,
+    electron.browser.isMaximized() ? $unmaximize : $maximize,
+    $close
+  );
+  return $windowButtons;
+};

repo/integrated-titlebar/client.mjs

@@ -0,0 +1,58 @@
+/**
+ * notion-enhancer: integrated titlebar
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+'use strict';
+
+import { createWindowButtons } from './buttons.mjs';
+
+export default async function (api, db) {
+  const { web, registry, electron } = api,
+    tilingMode = await db.get(['tiling']),
+    dragareaHeight = await db.get(['dragarea_height']),
+    tabsEnabled = await registry.enabled('e1692c29-475e-437b-b7ff-3eee872e1a42'),
+    sidebarSelector = '.notion-sidebar',
+    panelSelector = '#enhancer--panel',
+    topbarSelector = '.notion-topbar',
+    topbarActionsSelector = '.notion-topbar-action-buttons';
+  if (tilingMode || tabsEnabled) return;
+
+  let sidebarWidth = '0px',
+    panelWidth = '0px';
+  const updateDragareaOffsets = () => {
+    const $sidebar = document.querySelector(sidebarSelector),
+      newSidebarWidth =
+        !$sidebar || $sidebar.style.height === 'auto' ? '0px' : $sidebar.style.width,
+      $panel = document.querySelector(panelSelector),
+      newPanelWidth =
+        $panel && $panel.dataset.enhancerPanelPinned === 'true'
+          ? window
+              .getComputedStyle(document.documentElement)
+              .getPropertyValue('--component--panel-width')
+          : '0px';
+    if (newSidebarWidth !== sidebarWidth) {
+      sidebarWidth = newSidebarWidth;
+      electron.sendMessageToHost('sidebar-width', sidebarWidth);
+    }
+    if (newPanelWidth !== panelWidth) {
+      panelWidth = newPanelWidth;
+      electron.sendMessageToHost('panel-width', panelWidth);
+    }
+  };
+  web.addDocumentObserver(updateDragareaOffsets);
+
+  await web.whenReady([topbarSelector, topbarActionsSelector]);
+  const $topbar = document.querySelector(topbarSelector),
+    $dragarea = web.html`<div class="integrated_titlebar--dragarea"></div>`;
+  $topbar.prepend($dragarea);
+  document.documentElement.style.setProperty(
+    '--integrated_titlebar--dragarea-height',
+    dragareaHeight + 'px'
+  );
+
+  const $topbarActions = document.querySelector(topbarActionsSelector),
+    $windowButtons = await createWindowButtons(api, db);
+  web.render($topbarActions.parentElement, $windowButtons);
+}

repo/integrated-titlebar/createWindow.cjs

@@ -0,0 +1,18 @@
+/**
+ * notion-enhancer: integrated titlebar
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+'use strict';
+
+module.exports = function (api, db, __exports, __eval) {
+  __eval(`
+    const notionRectFromFocusedWindow = getRectFromFocusedWindow;
+    getRectFromFocusedWindow = (windowState) => {
+      const rect = notionRectFromFocusedWindow(windowState);
+      rect.frame = false;
+      return rect;
+    };
+  `);
+};

repo/integrated-titlebar/frame.mjs

@@ -0,0 +1,43 @@
+/**
+ * notion-enhancer: integrated titlebar
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+'use strict';
+
+import { createWindowButtons } from './buttons.mjs';
+
+export default async function (api, db) {
+  const { web, registry } = api,
+    tilingMode = await db.get(['tiling']),
+    dragareaHeight = await db.get(['dragarea_height']),
+    tabsEnabled = await registry.enabled('e1692c29-475e-437b-b7ff-3eee872e1a42');
+
+  if (tabsEnabled && !tilingMode) {
+    const windowActionsSelector = '#window-actions';
+    await web.whenReady([windowActionsSelector]);
+
+    const $topbarActions = document.querySelector(windowActionsSelector),
+      $windowButtons = await createWindowButtons(api, db);
+    web.render($topbarActions, $windowButtons);
+  } else {
+    const dragareaSelector = '[style*="-webkit-app-region: drag;"]';
+    await web.whenReady([dragareaSelector]);
+
+    const dragarea = document.querySelector(dragareaSelector);
+    dragarea.style.top = '2px';
+    dragarea.style.height = tilingMode ? '0' : `${dragareaHeight}px`;
+
+    document.getElementById('notion').addEventListener('ipc-message', (event) => {
+      switch (event.channel) {
+        case 'notion-enhancer:sidebar-width':
+          dragarea.style.left = event.args[0];
+          break;
+        case 'notion-enhancer:panel-width':
+          dragarea.style.right = event.args[0];
+          break;
+      }
+    });
+  }
+}

repo/integrated-titlebar/menu.mjs

@@ -0,0 +1,29 @@
+/**
+ * notion-enhancer: integrated titlebar
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+'use strict';
+
+import { createWindowButtons } from './buttons.mjs';
+
+export default async function (api, db) {
+  const { web } = api,
+    tilingMode = await db.get(['tiling']),
+    dragareaHeight = await db.get(['dragarea_height']),
+    sidebarSelector = '.sidebar';
+  if (tilingMode) return;
+
+  await web.whenReady([sidebarSelector]);
+  const $dragarea = web.html`<div class="integrated_titlebar--dragarea"></div>`;
+  document.body.prepend($dragarea);
+  document.documentElement.style.setProperty(
+    '--integrated_titlebar--dragarea-height',
+    dragareaHeight + 'px'
+  );
+
+  const $sidebar = document.querySelector(sidebarSelector),
+    $windowButtons = await createWindowButtons(api, db);
+  $sidebar.prepend($windowButtons);
+}

repo/integrated-titlebar/mod.json

@@ -0,0 +1,72 @@
+{
+  "name": "integrated titlebar",
+  "id": "a5658d03-21c6-4088-bade-fa4780459133",
+  "environments": ["linux", "win32"],
+  "version": "0.11.0",
+  "description": "replaces the native window titlebar with buttons inset into the app.",
+  "preview": "integrated-titlebar.jpg",
+  "tags": ["extension", "layout"],
+  "authors": [
+    {
+      "name": "dragonwocky",
+      "email": "thedragonring.bod@gmail.com",
+      "homepage": "https://dragonwocky.me/",
+      "avatar": "https://dragonwocky.me/avatar.jpg"
+    }
+  ],
+  "css": {
+    "frame": ["buttons.css"],
+    "client": ["buttons.css"],
+    "menu": ["buttons.css"]
+  },
+  "js": {
+    "frame": ["frame.mjs"],
+    "client": ["client.mjs"],
+    "menu": ["menu.mjs"],
+    "electron": [{ "source": "createWindow.cjs", "target": "main/createWindow.js" }]
+  },
+  "options": [
+    {
+      "type": "toggle",
+      "key": "tiling",
+      "label": "tiling window manager mode",
+      "tooltip": "**completely remove the close/minimise/maximise buttons** (only for advanced use, not recommended)",
+      "value": false
+    },
+    {
+      "type": "number",
+      "key": "dragarea_height",
+      "label": "dragarea height (px)",
+      "tooltip": "**the height of the rectangle added to the top of the window, used to drag/move the window around** (dragging is not possible in a frameless window without this bar)",
+      "value": 12
+    },
+    {
+      "type": "text",
+      "key": "minimize_icon",
+      "label": "minimize window icon",
+      "tooltip": "**may be an svg string or any unicode symbol e.g. an emoji** (the default icon will be used if this field is left empty)",
+      "value": ""
+    },
+    {
+      "type": "text",
+      "key": "maximize_icon",
+      "label": "maximize window icon",
+      "tooltip": "**may be an svg string or any unicode symbol e.g. an emoji** (the default icon will be used if this field is left empty)",
+      "value": ""
+    },
+    {
+      "type": "text",
+      "key": "unmaximize_icon",
+      "label": "unmaximize window icon",
+      "tooltip": "**may be an svg string or any unicode symbol e.g. an emoji** (the default icon will be used if this field is left empty)",
+      "value": ""
+    },
+    {
+      "type": "text",
+      "key": "close_icon",
+      "label": "close window icon",
+      "tooltip": "**may be an svg string or any unicode symbol e.g. an emoji** (the default icon will be used if this field is left empty)",
+      "value": ""
+    }
+  ]
+}

repo/light+/mod.json

@@ -0,0 +1,48 @@
+{
+  "name": "light+",
+  "id": "336cbc54-67b9-4b00-b4a2-9cc86eef763b",
+  "version": "0.2.0",
+  "description": "a simple white theme that brightens coloured text and blocks, with configurable accents.",
+  "preview": "light+.png",
+  "tags": ["theme", "light"],
+  "authors": [
+    {
+      "name": "Lizishan",
+      "homepage": "https://www.reddit.com/user/Lizishan",
+      "avatar": "https://styles.redditmedia.com/t5_110nz4/styles/profileIcon_h1m3b16exoi51.jpg"
+    }
+  ],
+  "css": {
+    "frame": ["variables.css"],
+    "client": ["variables.css"],
+    "menu": ["variables.css"]
+  },
+  "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)"
+    },
+    {
+      "type": "color",
+      "key": "highlight",
+      "label": "highlight accent color",
+      "tooltip": "**affects dividers, text, icons and hovered scrollbars. set this to rgba(0,0,0,0) to disable it**",
+      "value": "rgba(0,0,0,0)"
+    }
+  ]
+}

repo/light+/theme.mjs

@@ -0,0 +1,70 @@
+/**
+ * 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] = primary
+        .slice(5, -1)
+        .split(',')
+        .map((i) => parseInt(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] = secondary
+        .slice(5, -1)
+        .split(',')
+        .map((i) => parseInt(i));
+    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)
+      );
+    }
+  }
+
+  {
+    const highlight = await db.get(['highlight']),
+      [r, g, b, a] = highlight
+        .slice(5, -1)
+        .split(',')
+        .map((i) => parseFloat(i));
+    if (!(r === 0 && g === 0 && b === 0 && a === 0)) {
+      document.documentElement.style.setProperty('--light_plus--accent_highlight', highlight);
+      document.documentElement.style.setProperty(
+        '--light_plus--accent_highlight-shaded',
+        fmt.rgbLogShade(0.1, highlight)
+      );
+    }
+  }
+}

repo/light+/variables.css

@@ -0,0 +1,137 @@
+/**
+ * notion-enhancer: light+
+ * (c) 2020 Lizishan
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+:root.light {
+  --theme--accent_blue: var(--light_plus--accent_blue, rgb(46, 170, 220));
+  --theme--accent_blue-selection: var(
+    --light_plus--accent_blue-selection,
+    rgb(46, 170, 220, 0.25)
+  );
+  --theme--accent_blue-hover: var(--light_plus--accent_blue-hover, rgb(6, 156, 205));
+  --theme--accent_blue-active: var(--light_plus--accent_blue-active, rgb(0, 141, 190));
+  --theme--accent_blue-text: var(--light_plus--accent_blue-text, #fff);
+  --theme--accent_red: var(--light_plus--accent_red, #eb5757);
+  --theme--accent_red-button: var(--light_plus--accent_red-button, rgba(235, 87, 87, 0.1));
+  --theme--accent_red-text: var(--light_plus--accent_red-text, #fff);
+
+  --theme--scrollbar_thumb-hover: var(--light_plus--accent_highlight, #aeaca6);
+
+  --theme--ui_divider: var(--light_plus--accent_highlight, rgb(237, 237, 236));
+  --theme--ui_corner_action: var(--theme--bg_card);
+  --theme--ui_corner_action-hover: var(--theme--ui_interactive-hover);
+  --theme--ui_corner_action-active: var(--theme--ui_interactive-active);
+
+  --theme--icon: var(--light_plus--accent_highlight, rgba(55, 53, 47, 0.8));
+  --theme--icon_secondary: var(--light_plus--accent_highlight, rgba(55, 53, 47, 0.4));
+
+  --theme--text: var(--light_plus--accent_highlight, rgb(55, 43, 47));
+  --theme--text_secondary: var(--light_plus--accent_highlight-shaded, rgba(55, 43, 47, 0.6));
+
+  --theme--text_gray: rgba(151, 154, 155, 0.95);
+  --theme--text_brown: rgb(167, 126, 100);
+  --theme--text_orange: rgb(255, 134, 0);
+  --theme--text_yellow: rgb(255, 195, 0);
+  --theme--text_green: rgb(0, 171, 0);
+  --theme--text_blue: rgb(0, 121, 255);
+  --theme--text_purple: rgb(126, 0, 255);
+  --theme--text_pink: rgb(255, 0, 208);
+  --theme--text_red: rgb(255, 0, 0);
+
+  --theme--highlight_gray: rgb(234, 234, 234);
+  --theme--highlight_gray-text: rgb(17, 17, 17);
+  --theme--highlight_brown: rgb(206, 206, 206);
+  --theme--highlight_brown-text: rgb(85, 35, 1);
+  --theme--highlight_orange: rgb(254, 214, 155);
+  --theme--highlight_orange-text: rgb(199, 110, 0);
+  --theme--highlight_yellow: #fcffd8;
+  --theme--highlight_yellow-text: #ff8c22;
+  --theme--highlight_green: #d5fded;
+  --theme--highlight_green-text: #006a00;
+  --theme--highlight_blue: #e2f5ff;
+  --theme--highlight_blue-text: #00b2ff;
+  --theme--highlight_purple: #efe6ff;
+  --theme--highlight_purple-text: #8334ff;
+  --theme--highlight_pink: #ffe9f1;
+  --theme--highlight_pink-text: rgb(255, 0, 127);
+  --theme--highlight_red: rgb(248, 215, 218);
+  --theme--highlight_red-text: rgb(138, 0, 10);
+
+  --theme--callout_gray: #e2e3e5;
+  --theme--callout_gray-text: #383d41;
+  --theme--callout_brown: rgb(130, 118, 111);
+  --theme--callout_brown-text: rgb(85, 35, 1);
+  --theme--callout_orange: rgb(254, 214, 155);
+  --theme--callout_orange-text: rgb(255, 140, 0);
+  --theme--callout_yellow: #fcffd8;
+  --theme--callout_yellow-text: #c76e00;
+  --theme--callout_green: #d4edda;
+  --theme--callout_green-text: #155724;
+  --theme--callout_blue: #cce5ff;
+  --theme--callout_blue-text: #004085;
+  --theme--callout_purple: rgb(199, 178, 230);
+  --theme--callout_purple-text: rgb(90, 49, 148);
+  --theme--callout_pink: rgb(255, 206, 228);
+  --theme--callout_pink-text: rgb(255, 0, 127);
+  --theme--callout_red: #f8d7da;
+  --theme--callout_red-text: #721c24;
+
+  --theme--tag_default: rgb(234, 234, 234);
+  --theme--tag_light_gray: rgb(240, 240, 240);
+  --theme--tag_light_gray-text: rgb(65, 65, 65);
+  --theme--tag_gray: rgb(234, 234, 234);
+  --theme--tag_gray-text: rgb(17, 17, 17);
+  --theme--tag_brown: rgb(206, 206, 206);
+  --theme--tag_brown-text: rgb(85, 35, 1);
+  --theme--tag_orange: rgb(254, 214, 155);
+  --theme--tag_orange-text: rgb(199, 110, 0);
+  --theme--tag_yellow: #fcffd8;
+  --theme--tag_yellow-text: #ff8c22;
+  --theme--tag_green: #d5fded;
+  --theme--tag_green-text: #006a00;
+  --theme--tag_blue: #e2f5ff;
+  --theme--tag_blue-text: #00b2ff;
+  --theme--tag_purple: #efe6ff;
+  --theme--tag_purple-text: #8334ff;
+  --theme--tag_pink: #ffe9f1;
+  --theme--tag_pink-text: rgb(255, 0, 127);
+  --theme--tag_red: rgb(248, 215, 218);
+  --theme--tag_red-text: rgb(138, 0, 10);
+
+  --theme--board_light_gray: #EBEBED;
+  --theme--board_light_gray-text: #616366;
+  --theme--board_light_gray-card: var(--theme--tag_light_gray);
+  --theme--board_gray: #e2e3e5;
+  --theme--board_gray-text: #383d41;
+  --theme--board_gray-card: var(--theme--tag_gray);
+  --theme--board_brown: rgb(130, 118, 111);
+  --theme--board_brown-text: rgb(85, 35, 1);
+  --theme--board_brown-card: var(--theme--tag_brown);
+  --theme--board_orange: rgb(254, 214, 155);
+  --theme--board_orange-text: rgb(255, 140, 0);
+  --theme--board_orange-card: var(--theme--tag_orange);
+  --theme--board_yellow: #fcffd8;
+  --theme--board_yellow-text: #c76e00;
+  --theme--board_yellow-card: var(--theme--tag_yellow);
+  --theme--board_green: #d4edda;
+  --theme--board_green-text: #155724;
+  --theme--board_green-card: var(--theme--tag_green);
+  --theme--board_blue: #cce5ff;
+  --theme--board_blue-text: #004085;
+  --theme--board_blue-card: var(--theme--tag_blue);
+  --theme--board_purple: rgb(199, 178, 230);
+  --theme--board_purple-text: rgb(90, 49, 148);
+  --theme--board_purple-card: var(--theme--tag_purple);
+  --theme--board_pink: rgb(255, 206, 228);
+  --theme--board_pink-text: rgb(255, 0, 127);
+  --theme--board_pink-card: var(--theme--tag_pink);
+  --theme--board_red: #f8d7da;
+  --theme--board_red-text: #721c24;
+  --theme--board_red-card: var(--theme--tag_red);
+
+  --theme--code_inline: rgb(179, 39, 39);
+  --theme--code_inline-text: #e0dfe2;
+}

repo/material-ocean/mod.json

@@ -0,0 +1,23 @@
+{
+  "name": "material ocean",
+  "id": "69e7ccb2-4aef-484c-876d-3de1b433d2b9",
+  "version": "0.2.0",
+  "description": "an oceanic colour palette.",
+  "preview": "material-ocean.png",
+  "tags": ["theme", "dark"],
+  "authors": [
+    {
+      "name": "blacksuan19",
+      "email": "abubakaryagob@gmail.com",
+      "homepage": "http://github.com/blacksuan19",
+      "avatar": "https://avatars.githubusercontent.com/u/10248473"
+    }
+  ],
+  "css": {
+    "frame": ["variables.css"],
+    "client": ["variables.css"],
+    "menu": ["variables.css"]
+  },
+  "js": {},
+  "options": []
+}

repo/material-ocean/variables.css

@@ -0,0 +1,173 @@
+/**
+ * notion-enhancer: material ocean
+ * (c) 2020 Abubakar Yagoub <i@blacksuan19.me> (https://blacksuan19.tk)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+:root.dark {
+  --ocean--main: #0f111a;
+  --ocean--sec: #00010a;
+  --ocean--tet: #000108;
+  --ocean--accent: #ff4151;
+  --ocean--light_gray: #E9E9E9;
+  --ocean--gray: #e0e0e0;
+  --ocean--brown: #d8b6a6;
+  --ocean--orange: #fde3c0;
+  --ocean--yellow: #ebcb8b;
+  --ocean--green: #a3be8c;
+  --ocean--blue: #81a1c1;
+  --ocean--purple: #b48ead;
+  --ocean--pink: #ffc0cb;
+  --ocean--red: #bf616a;
+
+  --theme--accent_blue: var(--ocean--accent);
+  --theme--accent_blue-selection: rgba(255, 65, 81, 0.2);
+  --theme--accent_blue-hover: #fc3747;
+  --theme--accent_blue-active: #ff4d5c;
+  --theme--accent_blue-text: #fff;
+  --theme--accent_red: var(--ocean--accent);
+  --theme--accent_red-button: #ff41514b;
+  --theme--accent_red-text: #fff;
+
+  --theme--bg: var(--ocean--main);
+  --theme--bg_secondary: var(--ocean--sec);
+  --theme--bg_card: var(--ocean--sec);
+
+  --theme--scrollbar_track: transparent;
+  --theme--scrollbar_thumb: var(--ocean--sec);
+  --theme--scrollbar_thumb-hover: var(--ocean--accent);
+
+  --theme--ui_divider: rgba(255, 255, 255, 0.1);
+  --theme--ui_interactive-hover: rgb(0, 1, 8, 0.3);
+  --theme--ui_interactive-active: rgb(0, 1, 8, 0.6);
+  --theme--ui_toggle-off: #30313c;
+  --theme--ui_corner_action: var(--theme--bg_card);
+  --theme--ui_corner_action-hover: var(--theme--ui_interactive-hover);
+  --theme--ui_corner_action-active: var(--theme--ui_interactive-active);
+
+  --theme--icon: var(--ocean--gray);
+  --theme--icon_secondary: var(--ocean--gray);
+
+  --theme--text: #fff;
+  --theme--text_secondary: var(--ocean--gray);
+  --theme--text_gray: var(--ocean--gray);
+  --theme--text_brown: var(--ocean--brown);
+  --theme--text_orange: var(--ocean--orange);
+  --theme--text_yellow: var(--ocean--yellow);
+  --theme--text_green: var(--ocean--green);
+  --theme--text_blue: var(--ocean--blue);
+  --theme--text_purple: var(--ocean--purple);
+  --theme--text_pink: var(--ocean--pink);
+  --theme--text_red: var(--ocean--red);
+
+  --theme--highlight_gray: var(--ocean--gray);
+  --theme--highlight_gray-text: var(--ocean--main);
+  --theme--highlight_brown: var(--ocean--brown);
+  --theme--highlight_brown-text: var(--ocean--main);
+  --theme--highlight_orange: var(--ocean--orange);
+  --theme--highlight_orange-text: var(--ocean--main);
+  --theme--highlight_yellow: var(--ocean--yellow);
+  --theme--highlight_yellow-text: var(--ocean--main);
+  --theme--highlight_green: var(--ocean--green);
+  --theme--highlight_green-text: var(--ocean--main);
+  --theme--highlight_blue: var(--ocean--blue);
+  --theme--highlight_blue-text: var(--ocean--main);
+  --theme--highlight_purple: var(--ocean--purple);
+  --theme--highlight_purple-text: var(--ocean--main);
+  --theme--highlight_pink: var(--ocean--pink);
+  --theme--highlight_pink-text: var(--ocean--main);
+  --theme--highlight_red: var(--ocean--red);
+  --theme--highlight_red-text: var(--ocean--main);
+
+  --theme--callout_gray: #e0e0e089;
+  --theme--callout_gray-text: var(--ocean--main);
+  --theme--callout_brown: #d8b6a692;
+  --theme--callout_brown-text: var(--ocean--main);
+  --theme--callout_orange: #fde3c09f;
+  --theme--callout_orange-text: var(--ocean--main);
+  --theme--callout_yellow: #ffe6a6ad;
+  --theme--callout_yellow-text: var(--ocean--main);
+  --theme--callout_green: #a3be8ca3;
+  --theme--callout_green-text: var(--ocean--main);
+  --theme--callout_blue: #81a1c1a3;
+  --theme--callout_blue-text: var(--ocean--main);
+  --theme--callout_purple: #b48eada8;
+  --theme--callout_purple-text: var(--ocean--main);
+  --theme--callout_pink: #ffc0cbb1;
+  --theme--callout_pink-text: var(--ocean--main);
+  --theme--callout_red: #bf616a9e;
+  --theme--callout_red-text: var(--ocean--main);
+
+  --theme--tag_default: var(--ocean--gray);
+  --theme--tag_default-text: var(--ocean--main);
+  --theme--tag_light_gray: var(--ocean--light_gray);
+  --theme--tag_light_gray-text: var(--ocean--main);
+  --theme--tag_gray: var(--theme--highlight_gray);
+  --theme--tag_gray-text: var(--ocean--main);
+  --theme--tag_brown: var(--theme--highlight_brown);
+  --theme--tag_brown-text: var(--ocean--main);
+  --theme--tag_orange: var(--theme--highlight_orange);
+  --theme--tag_orange-text: var(--ocean--main);
+  --theme--tag_yellow: var(--theme--highlight_yellow);
+  --theme--tag_yellow-text: var(--ocean--main);
+  --theme--tag_green: var(--theme--highlight_green);
+  --theme--tag_green-text: var(--ocean--main);
+  --theme--tag_blue: var(--theme--highlight_blue);
+  --theme--tag_blue-text: var(--ocean--main);
+  --theme--tag_purple: var(--theme--highlight_purple);
+  --theme--tag_purple-text: var(--ocean--main);
+  --theme--tag_pink: var(--theme--highlight_pink);
+  --theme--tag_pink-text: var(--ocean--main);
+  --theme--tag_red: var(--theme--highlight_red);
+  --theme--tag_red-text: var(--ocean--main);
+
+  --theme--board_light_gray: var(--ocean--light_gray);
+  --theme--board_light_gray-text: var(--ocean--main);
+  --theme--board_light_gray-card: rgba(0, 0, 0, 0.075);
+  --theme--board_gray: var(--theme--highlight_gray);
+  --theme--board_gray-text: var(--theme--highlight_gray-text);
+  --theme--board_gray-card: rgba(0, 0, 0, 0.075);
+  --theme--board_brown: var(--theme--highlight_brown);
+  --theme--board_brown-text: var(--theme--highlight_brown-text);
+  --theme--board_brown-card: rgba(0, 0, 0, 0.075);
+  --theme--board_orange: var(--theme--highlight_orange);
+  --theme--board_orange-text: var(--theme--highlight_orange-text);
+  --theme--board_orange-card: rgba(0, 0, 0, 0.075);
+  --theme--board_yellow: var(--theme--highlight_yellow);
+  --theme--board_yellow-text: var(--theme--highlight_yellow-text);
+  --theme--board_yellow-card: rgba(0, 0, 0, 0.075);
+  --theme--board_green: var(--theme--highlight_green);
+  --theme--board_green-text: var(--theme--highlight_green-text);
+  --theme--board_green-card: rgba(0, 0, 0, 0.075);
+  --theme--board_blue: var(--theme--highlight_blue);
+  --theme--board_blue-text: var(--theme--highlight_blue-text);
+  --theme--board_blue-card: rgba(0, 0, 0, 0.075);
+  --theme--board_purple: var(--theme--highlight_purple);
+  --theme--board_purple-text: var(--theme--highlight_purple-text);
+  --theme--board_purple-card: rgba(0, 0, 0, 0.075);
+  --theme--board_pink: var(--theme--highlight_pink);
+  --theme--board_pink-text: var(--theme--highlight_pink-text);
+  --theme--board_pink-card: rgba(0, 0, 0, 0.075);
+  --theme--board_red: var(--theme--highlight_red);
+  --theme--board_red-text: var(--theme--highlight_red-text);
+  --theme--board_red-card: rgba(0, 0, 0, 0.075);
+
+  --theme--code_inline: var(--ocean--sec);
+  --theme--code_inline-text: #b3f5c8;
+
+  --theme--code: var(--ocean--sec);
+  --theme--code_function: var(--theme--text_blue);
+  --theme--code_keyword: var(--theme--text_pink);
+  --theme--code_tag: var(--theme--text_pink);
+  --theme--code_operator: var(--theme--text_yellow);
+  --theme--code_property: var(--theme--text_pink);
+  --theme--code_builtin: var(--theme--text_yellow);
+  --theme--code_attr-name: var(--theme--text_yellow);
+  --theme--code_comment: var(--theme--text_gray);
+  --theme--code_punctuation: var(--theme--text_gray);
+  --theme--code_doctype: var(--theme--text_gray);
+  --theme--code_number: var(--theme--text_purple);
+  --theme--code_selector: var(--theme--text_orange);
+  --theme--code_atrule: var(--theme--text_orange);
+  --theme--code_regex: var(--theme--text_yellow);
+}

repo/menu/client.css

@@ -0,0 +1,69 @@
+/**
+ * notion-enhancer: menu
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+.enhancer--sidebarMenuLink {
+  user-select: none;
+  -webkit-user-select: none;
+  transition: background 20ms ease-in 0s;
+  cursor: pointer;
+  color: var(--theme--text_secondary);
+}
+.enhancer--sidebarMenuLink:hover {
+  background: var(--theme--ui_interactive-hover);
+}
+.enhancer--sidebarMenuLink svg {
+  width: 16px;
+  height: 16px;
+  margin-left: 2px;
+}
+.enhancer--sidebarMenuLink > div {
+  display: flex;
+  align-items: center;
+  min-height: 27px;
+  font-size: 14px;
+  padding: 2px 14px;
+  width: 100%;
+}
+.enhancer--sidebarMenuLink > div > :first-child {
+  flex-shrink: 0;
+  flex-grow: 0;
+  border-radius: 3px;
+  width: 22px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 8px;
+}
+.enhancer--sidebarMenuLink > div > :nth-child(2) {
+  flex: 1 1 auto;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.enhancer--sidebarMenuLink:active {
+  color: var(--theme--text);
+}
+.enhancer--sidebarMenuLink > div > .enhancer--notificationBubble {
+  display: flex;
+}
+.enhancer--sidebarMenuLink > div > .enhancer--notificationBubble > div {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  font-size: 10px;
+  font-weight: 600;
+  border-radius: 3px;
+  color: var(--theme--accent_red-text);
+  background: var(--theme--accent_red);
+}
+.enhancer--sidebarMenuLink > div > .enhancer--notificationBubble > div > span {
+  margin-bottom: 1px;
+  margin-left: -0.5px;
+}

repo/menu/client.mjs

@@ -0,0 +1,48 @@
+/**
+ * notion-enhancer: menu
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+'use strict';
+
+const notificationsURL = 'https://notion-enhancer.github.io/notifications.json';
+
+export default async function ({ env, fs, storage, registry, web }, db) {
+  web.addHotkeyListener(await db.get(['hotkey']), env.focusMenu);
+
+  const sidebarSelector = '.notion-sidebar-container .notion-sidebar > div:nth-child(3) > div > div:nth-child(2)';
+  await web.whenReady([sidebarSelector]);
+
+  const $sidebarLink = web.html`<div class="enhancer--sidebarMenuLink" role="button" tabindex="0">
+      <div>
+        <div>${await fs.getText('media/colour.svg')}</div>
+        <div><div>notion-enhancer</div></div>
+      </div>
+    </div>`;
+  $sidebarLink.addEventListener('click', env.focusMenu);
+
+  const notifications = {
+    cache: await storage.get(['notifications'], []),
+    provider: await fs.getJSON(notificationsURL),
+    count: (await registry.errors()).length,
+  };
+  for (const notification of notifications.provider) {
+    if (
+      !notifications.cache.includes(notification.id) &&
+      notification.version === env.version &&
+      (!notification.environments || notification.environments.includes(env.name))
+    ) {
+      notifications.count++;
+    }
+  }
+  if ((await storage.get(['last_read_changelog'])) !== env.version) notifications.count++;
+  if (notifications.count) {
+    web.render(
+      $sidebarLink.children[0],
+      web.html`<div class="enhancer--notificationBubble"><div><span>${notifications.count}</span></div></div>`
+    );
+  }
+
+  web.render(document.querySelector(sidebarSelector), $sidebarLink);
+}

repo/menu/components.mjs

@@ -0,0 +1,292 @@
+/**
+ * notion-enhancer: menu
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+'use strict';
+
+import { fmt, web, registry, components } from '../../api/index.mjs';
+import { notifications } from './notifications.mjs';
+import '../../dep/jscolor.min.js';
+
+import '../../dep/markdown-it.min.js';
+const md = markdownit({ linkify: true });
+
+export const modComponents = {
+  preview: (url) => web.html`<img
+    class="mod-preview"
+    src="${web.escape(url)}"
+    alt=""
+  >`,
+  title: (title) => web.html`<h4 class="mod-title"><span>${web.escape(title)}</span></h4>`,
+  version: (version) => web.html`<span class="mod-version">v${web.escape(version)}</span>`,
+  tags: (tags) => {
+    if (!tags.length) return '';
+    return web.render(
+      web.html`<p class="mod-tags"></p>`,
+      tags.map((tag) => `#${web.escape(tag)}`).join(' ')
+    );
+  },
+  description: (description) => {
+    const $description = web.html`<p class="mod-description markdown-inline">
+      ${md.renderInline(description)}
+    </p>`;
+    $description.querySelectorAll('a').forEach((a) => {
+      a.target = '_blank';
+    });
+    return $description;
+  },
+  authors: (authors) => {
+    const author = (author) => web.html`<a
+      class="mod-author"
+      href="${web.escape(author.homepage)}"
+      target="_blank"
+    >
+      <img class="mod-author-avatar"
+        src="${web.escape(author.avatar)}" alt="${web.escape(author.name)}'s avatar"
+      > <span>${web.escape(author.name)}</span>
+    </a>`;
+    return web.render(web.html`<p class="mod-authors-container"></p>`, ...authors.map(author));
+  },
+  toggle: (label, checked) => {
+    const $label = web.html`<label tabindex="0" class="toggle-label">
+      <span>${web.escape(label)}</span>
+    </label>`,
+      $input = web.html`<input tabindex="-1" type="checkbox" class="toggle-check"
+        ${checked ? 'checked' : ''}>`,
+      $feature = web.html`<span class="toggle-box toggle-feature"></span>`;
+    $label.addEventListener('keyup', (event) => {
+      if (['Enter', ' '].includes(event.key)) $input.checked = !$input.checked;
+    });
+    return web.render($label, $input, $feature);
+  },
+};
+
+export const options = {
+  toggle: async (mod, opt) => {
+    const profileDB = await registry.profileDB(),
+      checked = await profileDB.get([mod.id, opt.key], opt.value),
+      $toggle = modComponents.toggle(opt.label, checked),
+      $tooltipIcon = web.html`${await components.feather('info', { class: 'input-tooltip' })}`,
+      $label = $toggle.children[0],
+      $input = $toggle.children[1];
+    if (opt.tooltip) {
+      $label.prepend($tooltipIcon);
+      components.addTooltip($tooltipIcon, opt.tooltip, {
+        offsetDirection: 'left',
+        maxLines: 3,
+      });
+    }
+    $input.addEventListener('change', async (_event) => {
+      await profileDB.set([mod.id, opt.key], $input.checked);
+      notifications.onChange();
+    });
+    return $toggle;
+  },
+
+  select: async (mod, opt) => {
+    const profileDB = await registry.profileDB(),
+      value = await profileDB.get([mod.id, opt.key], opt.values[0]),
+      $tooltipIcon = web.html`${await components.feather('info', { class: 'input-tooltip' })}`,
+      $label = web.render(
+        web.html`<label class="input-label"></label>`,
+        web.render(web.html`<p></p>`, opt.tooltip ? $tooltipIcon : '', opt.label)
+      ),
+      $options = opt.values.map(
+        (option) => web.raw`<option
+          class="select-option"
+          value="${web.escape(option)}"
+          ${option === value ? 'selected' : ''}
+        >${web.escape(option)}</option>`
+      ),
+      $select = web.html`<select class="input">
+        ${$options.join('')}
+      </select>`,
+      $icon = web.html`${await components.feather('chevron-down', { class: 'input-icon' })}`;
+    if (opt.tooltip)
+      components.addTooltip($tooltipIcon, opt.tooltip, {
+        offsetDirection: 'left',
+        maxLines: 3,
+      });
+    $select.addEventListener('change', async (_event) => {
+      await profileDB.set([mod.id, opt.key], $select.value);
+      notifications.onChange();
+    });
+    return web.render($label, $select, $icon);
+  },
+
+  text: async (mod, opt) => {
+    const profileDB = await registry.profileDB(),
+      value = await profileDB.get([mod.id, opt.key], opt.value),
+      $tooltipIcon = web.html`${await components.feather('info', { class: 'input-tooltip' })}`,
+      $label = web.render(
+        web.html`<label class="input-label"></label>`,
+        web.render(web.html`<p></p>`, opt.tooltip ? $tooltipIcon : '', opt.label)
+      ),
+      $input = web.html`<input type="text" class="input" value="${web.escape(value)}">`,
+      $icon = web.html`${await components.feather('type', { class: 'input-icon' })}`;
+    if (opt.tooltip)
+      components.addTooltip($tooltipIcon, opt.tooltip, {
+        offsetDirection: 'left',
+        maxLines: 3,
+      });
+    $input.addEventListener('change', async (_event) => {
+      await profileDB.set([mod.id, opt.key], $input.value);
+      notifications.onChange();
+    });
+    return web.render($label, $input, $icon);
+  },
+
+  number: async (mod, opt) => {
+    const profileDB = await registry.profileDB(),
+      value = await profileDB.get([mod.id, opt.key], opt.value),
+      $tooltipIcon = web.html`${await components.feather('info', { class: 'input-tooltip' })}`,
+      $label = web.render(
+        web.html`<label class="input-label"></label>`,
+        web.render(web.html`<p></p>`, opt.tooltip ? $tooltipIcon : '', opt.label)
+      ),
+      $input = web.html`<input type="number" class="input" value="${value}">`,
+      $icon = web.html`${await components.feather('hash', { class: 'input-icon' })}`;
+    if (opt.tooltip)
+      components.addTooltip($tooltipIcon, opt.tooltip, {
+        offsetDirection: 'left',
+        maxLines: 3,
+      });
+    $input.addEventListener('change', async (_event) => {
+      await profileDB.set([mod.id, opt.key], $input.value);
+      notifications.onChange();
+    });
+    return web.render($label, $input, $icon);
+  },
+
+  color: async (mod, opt) => {
+    const profileDB = await registry.profileDB(),
+      value = await profileDB.get([mod.id, opt.key], opt.value),
+      $tooltipIcon = web.html`${await components.feather('info', { class: 'input-tooltip' })}`,
+      $label = web.render(
+        web.html`<label class="input-label"></label>`,
+        web.render(web.html`<p></p>`, opt.tooltip ? $tooltipIcon : '', opt.label)
+      ),
+      $input = web.html`<input type="text" class="input">`,
+      $icon = web.html`${await components.feather('droplet', { class: 'input-icon' })}`,
+      paint = () => {
+        $input.style.background = $picker.toBackground();
+        const [r, g, b] = $picker
+          .toRGBAString()
+          .slice(5, -1)
+          .split(',')
+          .map((i) => parseInt(i));
+        $input.style.color = fmt.rgbContrast(r, g, b);
+        $input.style.padding = '';
+      },
+      $picker = new JSColor($input, {
+        value,
+        format: 'rgba',
+        previewSize: 0,
+        borderRadius: 3,
+        borderColor: 'var(--theme--ui_divider)',
+        controlBorderColor: 'var(--theme--ui_divider)',
+        backgroundColor: 'var(--theme--bg)',
+        onInput: paint,
+        onChange: paint,
+      });
+    if (opt.tooltip)
+      components.addTooltip($tooltipIcon, opt.tooltip, {
+        offsetDirection: 'left',
+        maxLines: 3,
+      });
+    $input.addEventListener('change', async (_event) => {
+      await profileDB.set([mod.id, opt.key], $input.value);
+      notifications.onChange();
+    });
+    paint();
+    return web.render($label, $input, $icon);
+  },
+
+  file: async (mod, opt) => {
+    const profileDB = await registry.profileDB(),
+      { filename } = (await profileDB.get([mod.id, opt.key], {})) || {},
+      $tooltipIcon = web.html`${await components.feather('info', { class: 'input-tooltip' })}`,
+      $label = web.render(
+        web.html`<label class="input-label"></label>`,
+        web.render(web.html`<p></p>`, opt.tooltip ? $tooltipIcon : '', opt.label)
+      ),
+      $pseudo = web.html`<span class="input"><span class="input-placeholder">Upload file...</span></span>`,
+      $input = web.html`<input type="file" class="hidden" accept=${web.escape(
+        opt.extensions.join(',')
+      )}>`,
+      $icon = web.html`${await components.feather('file', { class: 'input-icon' })}`,
+      $filename = web.html`<span>${web.escape(filename || 'none')}</span>`,
+      $latest = web.render(web.html`<button class="file-latest">Latest: </button>`, $filename);
+    if (opt.tooltip)
+      components.addTooltip($tooltipIcon, opt.tooltip, {
+        offsetDirection: 'left',
+        maxLines: 3,
+      });
+    $input.addEventListener('change', (event) => {
+      const file = event.target.files[0],
+        reader = new FileReader();
+      reader.onload = async (progress) => {
+        $filename.innerText = file.name;
+        await profileDB.set([mod.id, opt.key], {
+          filename: file.name,
+          content: progress.currentTarget.result,
+        });
+        notifications.onChange();
+      };
+      reader.readAsText(file);
+    });
+    $latest.addEventListener('click', (_event) => {
+      $filename.innerText = 'none';
+      profileDB.set([mod.id, opt.key], {});
+    });
+    return web.render(
+      web.html`<div></div>`,
+      web.render($label, $input, $pseudo, $icon),
+      $latest
+    );
+  },
+
+  hotkey: async (mod, opt) => {
+    const profileDB = await registry.profileDB(),
+      value = await profileDB.get([mod.id, opt.key], opt.value),
+      $tooltipIcon = web.html`${await components.feather('info', { class: 'input-tooltip' })}`,
+      $label = web.render(
+        web.html`<label class="input-label"></label>`,
+        web.render(web.html`<p></p>`, opt.tooltip ? $tooltipIcon : '', opt.label)
+      ),
+      $input = web.html`<input type="text" class="input" value="${web.escape(value)}">`,
+      $icon = web.html`${await components.feather('command', { class: 'input-icon' })}`;
+    if (opt.tooltip)
+      components.addTooltip($tooltipIcon, opt.tooltip, {
+        offsetDirection: 'left',
+        maxLines: 3,
+      });
+    $input.addEventListener('keydown', async (event) => {
+      event.preventDefault();
+      const pressed = [],
+        modifiers = {
+          metaKey: 'Meta',
+          ctrlKey: 'Control',
+          altKey: 'Alt',
+          shiftKey: 'Shift',
+        };
+      for (const modifier in modifiers) {
+        if (event[modifier]) pressed.push(modifiers[modifier]);
+      }
+      const empty = ['Backspace', 'Delete'].includes(event.key) && !pressed.length;
+      if (!empty && !pressed.includes(event.key)) {
+        let key = event.key;
+        if (key === ' ') key = 'Space';
+        if (key === '+') key = 'Plus';
+        if (key.length === 1) key = event.key.toUpperCase();
+        pressed.push(key);
+      }
+      $input.value = pressed.join('+');
+      await profileDB.set([mod.id, opt.key], $input.value);
+      notifications.onChange();
+    });
+    return web.render($label, $input, $icon);
+  },
+};

repo/menu/markdown.css

@@ -0,0 +1,97 @@
+/**
+ * notion-enhancer: menu
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+.markdown table {
+  border-spacing: 0;
+  border: 1px solid var(--theme--ui_divider);
+}
+.markdown table th {
+  text-align: left;
+}
+.markdown table th,
+.markdown table td {
+  padding: 5px 8px 6px;
+  border: 1px solid var(--theme--ui_divider);
+}
+.markdown h1 {
+  font-size: 1.875rem;
+  margin: 1rem 0 0.5rem 0;
+}
+.markdown h2 {
+  font-size: 1.5rem;
+  margin: 1rem 0 0.5rem 0;
+}
+.markdown h3 {
+  font-size: 1.25rem;
+  margin: 1rem 0 0.5rem 0;
+}
+.markdown h4 {
+  font-weight: bold;
+  margin: 0.5rem 0;
+}
+.markdown ul,
+.markdown ol {
+  padding-left: 1.25rem;
+}
+.markdown ul {
+  list-style: disc;
+}
+.markdown ol {
+  list-style: decimal;
+}
+.markdown li {
+  margin: 1px 0;
+}
+.markdown ol li {
+  padding-left: 0.25rem;
+}
+.markdown blockquote {
+  border-left: 2px solid currentColor;
+  padding-left: 0.75rem;
+  margin: 0.5rem 0;
+}
+.markdown hr {
+  border: 0.5px solid var(--theme--ui_divider);
+}
+.markdown-inline a,
+.markdown a {
+  opacity: 0.7;
+  text-decoration: none;
+  border-bottom: 0.05em solid var(--theme--text_secondary);
+}
+.markdown-inline a:hover,
+.markdown a:hover {
+  opacity: 0.9;
+}
+
+.markdown :not(pre) > code,
+.markdown-inline code {
+  padding: 0.2em 0.4em;
+  border-radius: 3px;
+  background: var(--theme--code_inline);
+  color: var(--theme--code_inline-text);
+}
+.markdown pre {
+  padding: 2em 1.25em;
+  border-radius: 3px;
+  tab-size: 2;
+  white-space: pre;
+  overflow-x: auto;
+  background: var(--theme--code);
+  color: var(--theme--code_plain);
+}
+.markdown pre,
+.markdown code,
+.markdown-inline code {
+  font-family: var(--theme--font_code);
+  font-size: 0.796875rem;
+  text-align: left;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  hyphens: none;
+  line-height: 1.5;
+}

repo/menu/menu.css

@@ -0,0 +1,25 @@
+/**
+ * notion-enhancer: menu
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+::selection {
+  background: var(--theme--accent_blue-selection);
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+  background: transparent;
+}
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-corner {
+  background: var(--theme--scrollbar_track) !important;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--theme--scrollbar_thumb) !important;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--theme--scrollbar_thumb-hover) !important;
+}

repo/menu/menu.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>notion-enhancer menu</title>
+  </head>
+  <body>
+    <script src="./menu.mjs" type="module"></script>
+  </body>
+</html>

repo/menu/menu.mjs

@@ -0,0 +1,448 @@
+/**
+ * notion-enhancer: menu
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+'use strict';
+
+import * as api from '../../api/index.mjs';
+import { notifications, $changelogModal } from './notifications.mjs';
+import { modComponents, options } from './components.mjs';
+import * as router from './router.mjs';
+import './styles.mjs';
+
+(async () => {
+  const { env, fs, storage, electron, registry, web, components } = api;
+
+  for (const mod of await registry.list((mod) => registry.enabled(mod.id))) {
+    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.error('[notion-enhancer] registry errors:');
+    console.table(errors);
+    const $errNotification = await notifications.add({
+      icon: 'alert-circle',
+      message: 'Failed to load mods (check console).',
+      color: 'red',
+    });
+    if (['win32', 'linux', 'darwin'].includes(env.name)) {
+      $errNotification.addEventListener('click', () => electron.browser.openDevTools());
+    }
+  }
+
+  const db = await registry.db('a6621988-551d-495a-97d8-3c568bca2e9e'),
+    profileName = await registry.profileName(),
+    profileDB = await registry.profileDB();
+
+  web.addHotkeyListener(await db.get(['hotkey']), env.focusNotion);
+
+  globalThis.addEventListener('beforeunload', (_event) => {
+    // trigger input save
+    document.activeElement.blur();
+  });
+
+  const $main = web.html`<main class="main"></main>`,
+    $sidebar = web.html`<article class="sidebar"></article>`,
+    $options = web.html`<div class="options-container">
+    <p class="options-placeholder">Select a mod to view and configure its options.</p>
+  </div>`,
+    $profile = web.html`<button class="profile-trigger">
+    Profile: ${web.escape(profileName)}
+  </button>`;
+
+  // profile
+
+  let _$profileConfig;
+  const openProfileMenu = async () => {
+    if (!_$profileConfig) {
+      const profileNames = [
+          ...new Set([
+            ...Object.keys(await storage.get(['profiles'], { default: {} })),
+            profileName,
+          ]),
+        ],
+        $options = profileNames.map(
+          (profile) => web.raw`<option
+          class="select-option"
+          value="${web.escape(profile)}"
+          ${profile === profileName ? 'selected' : ''}
+        >${web.escape(profile)}</option>`
+        ),
+        $select = web.html`<select class="input">
+        <option class="select-option" value="--">-- new --</option>
+        ${$options.join('')}
+      </select>`,
+        $edit = web.html`<input
+        type="text"
+        class="input"
+        value="${web.escape(profileName)}"
+        pattern="/^[A-Za-z0-9_-]+$/"
+      >`,
+        $export = web.html`<button class="profile-export">
+        ${await components.feather('download', { class: 'profile-icon-action' })}
+      </button>`,
+        $import = web.html`<label class="profile-import">
+        <input type="file" class="hidden" accept="application/json">
+        ${await components.feather('upload', { class: 'profile-icon-action' })}
+      </label>`,
+        $save = web.html`<button class="profile-save">
+        ${await components.feather('save', { class: 'profile-icon-text' })} Save
+      </button>`,
+        $delete = web.html`<button class="profile-delete">
+        ${await components.feather('trash-2', { class: 'profile-icon-text' })} Delete
+      </button>`,
+        $error = web.html`<p class="profile-error"></p>`;
+
+      $export.addEventListener('click', async (_event) => {
+        const now = new Date(),
+          $a = web.html`<a
+          class="hidden"
+          download="notion-enhancer_${web.escape($select.value)}_${now.getFullYear()}-${
+            now.getMonth() + 1
+          }-${now.getDate()}.json"
+          href="data:text/plain;charset=utf-8,${encodeURIComponent(
+            JSON.stringify(await storage.get(['profiles', $select.value], {}), null, 2)
+          )}"
+        ></a>`;
+        web.render(document.body, $a);
+        $a.click();
+        $a.remove();
+      });
+
+      $import.addEventListener('change', (event) => {
+        const file = event.target.files[0],
+          reader = new FileReader();
+        reader.onload = async (progress) => {
+          try {
+            const profileUpload = JSON.parse(progress.currentTarget.result);
+            if (!profileUpload) throw Error;
+            await storage.set(['profiles', $select.value], profileUpload);
+            env.reload();
+          } catch {
+            web.render(web.empty($error), 'Invalid JSON uploaded.');
+          }
+        };
+        reader.readAsText(file);
+      });
+
+      $select.addEventListener('change', (_event) => {
+        if ($select.value === '--') {
+          $edit.value = '';
+        } else $edit.value = $select.value;
+      });
+
+      $save.addEventListener('click', async (_event) => {
+        if (profileNames.includes($edit.value) && $select.value !== $edit.value) {
+          web.render(
+            web.empty($error),
+            `The profile "${web.escape($edit.value)}" already exists.`
+          );
+          return false;
+        }
+        if (!$edit.value || !$edit.value.match(/^[A-Za-z0-9_-]+$/)) {
+          web.render(
+            web.empty($error),
+            'Profile names may not be empty & may only contain letters, numbers, hyphens and underscores.'
+          );
+          return false;
+        }
+        await storage.set(['currentprofile'], $edit.value);
+        if ($select.value === '--') {
+          await storage.set(['profiles', $edit.value], {});
+        } else if ($select.value !== $edit.value) {
+          await storage.set(
+            ['profiles', $edit.value],
+            await storage.get(['profiles', $select.value], {})
+          );
+          await storage.set(['profiles', $select.value], undefined);
+        }
+        env.reload();
+      });
+
+      $delete.addEventListener('click', async (_event) => {
+        await storage.set(['profiles', $select.value], undefined);
+        await storage.set(
+          ['currentprofile'],
+          profileNames.find((profile) => profile !== $select.value) || 'default'
+        );
+        env.reload();
+      });
+
+      _$profileConfig = web.render(
+        web.html`<div></div>`,
+        web.html`<p class="options-placeholder">
+        Profiles are used to switch entire configurations.<br>
+        Be careful - deleting a profile deletes all configuration
+        related to it.<br>
+      </p>`,
+        web.render(
+          web.html`<label class="input-label"></label>`,
+          $select,
+          web.html`${await components.feather('chevron-down', { class: 'input-icon' })}`
+        ),
+        web.render(
+          web.html`<label class="input-label"></label>`,
+          $edit,
+          web.html`${await components.feather('type', { class: 'input-icon' })}`
+        ),
+        web.render(
+          web.html`<p class="profile-actions"></p>`,
+          $export,
+          $import,
+          $save,
+          $delete
+        ),
+        $error
+      );
+    }
+    web.render(web.empty($options), _$profileConfig);
+  };
+  $profile.addEventListener('click', () => openSidebarMenu('profile'));
+
+  // mods
+
+  const $modLists = {},
+    generators = {
+      options: async (mod) => {
+        const $fragment = document.createDocumentFragment();
+        for (const opt of mod.options) {
+          if (!opt.environments.includes(env.name)) continue;
+          web.render($fragment, await options[opt.type](mod, opt));
+        }
+        if (!mod.options.length) {
+          web.render($fragment, web.html`<p class="options-placeholder">No options.</p>`);
+        }
+        return $fragment;
+      },
+      mod: async (mod) => {
+        const $mod = web.html`<div class="mod" data-id="${web.escape(mod.id)}"></div>`,
+          $toggle = modComponents.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',
+              id = mod.id,
+              mods = await registry.list(
+                async (mod) =>
+                  (await registry.enabled(mod.id)) &&
+                  mod.tags.includes('theme') &&
+                  mod.tags.includes(mode) &&
+                  mod.id !== id
+              );
+            for (const mod of mods) {
+              profileDB.set(['_mods', mod.id], false);
+              document.querySelector(
+                `[data-id="${web.escape(mod.id)}"] .toggle-check`
+              ).checked = false;
+            }
+          }
+          profileDB.set(['_mods', mod.id], event.target.checked);
+          notifications.onChange();
+        });
+        $mod.addEventListener('click', () => openSidebarMenu(mod.id));
+        return web.render(
+          web.html`<article class="mod-container"></article>`,
+          web.render(
+            $mod,
+            mod.preview
+              ? modComponents.preview(
+                  mod.preview.startsWith('http')
+                    ? mod.preview
+                    : fs.localPath(`repo/${mod._dir}/${mod.preview}`)
+                )
+              : '',
+            web.render(
+              web.html`<div class="mod-body"></div>`,
+              web.render(modComponents.title(mod.name), modComponents.version(mod.version)),
+              modComponents.tags(mod.tags),
+              modComponents.description(mod.description),
+              modComponents.authors(mod.authors),
+              mod.environments.includes(env.name) && !registry.core.includes(mod.id)
+                ? $toggle
+                : ''
+            )
+          )
+        );
+      },
+      modList: async (category, message = '') => {
+        if (!$modLists[category]) {
+          const $search = web.html`<input type="search" class="search"
+          placeholder="Search ('/' to focus)">`,
+            $list = web.html`<div class="mods-list"></div>`,
+            mods = await registry.list(
+              (mod) => mod.environments.includes(env.name) && mod.tags.includes(category)
+            );
+          web.addHotkeyListener(['/'], () => $search.focus());
+          $search.addEventListener('input', (_event) => {
+            const query = $search.value.toLowerCase();
+            for (const $mod of $list.children) {
+              const matches = !query || $mod.innerText.toLowerCase().includes(query);
+              $mod.classList[matches ? 'remove' : 'add']('hidden');
+            }
+          });
+          for (const mod of mods) {
+            mod.tags = mod.tags.filter((tag) => tag !== category);
+            web.render($list, await generators.mod(mod));
+            mod.tags.unshift(category);
+          }
+          $modLists[category] = web.render(
+            web.html`<div></div>`,
+            web.render(
+              web.html`<label class="search-container"></label>`,
+              $search,
+              web.html`${await components.feather('search', { class: 'input-icon' })}`
+            ),
+            message ? web.render(web.html`<p class="main-message"></p>`, message) : '',
+            $list
+          );
+        }
+        return $modLists[category];
+      },
+    };
+
+  async function openModMenu(id) {
+    let $mod;
+    for (const $list of Object.values($modLists)) {
+      $mod = $list.querySelector(`[data-id="${web.escape(id)}"]`);
+      if ($mod) break;
+    }
+    const mod = await registry.get(id);
+    if (!$mod || !mod || $mod.className === 'mod-selected') return;
+
+    $mod.className = 'mod-selected';
+    const fragment = [
+      web.render(modComponents.title(mod.name), modComponents.version(mod.version)),
+      modComponents.tags(mod.tags),
+      await generators.options(mod),
+    ];
+    web.render(web.empty($options), ...fragment);
+  }
+
+  // views
+
+  const $notionNavItem = web.html`<h1 class="nav-notion">
+    ${(await fs.getText('media/colour.svg')).replace(
+      /width="\d+" height="\d+"/,
+      `class="nav-notion-icon"`
+    )}
+    <span>notion-enhancer</span>
+  </h1>`;
+  $notionNavItem.addEventListener('click', env.focusNotion);
+
+  const $coreNavItem = web.html`<a href="?view=core" class="nav-item">core</a>`,
+    $extensionsNavItem = web.html`<a href="?view=extensions" class="nav-item">extensions</a>`,
+    $themesNavItem = web.html`<a href="?view=themes" class="nav-item">themes</a>`,
+    $integrationsNavItem = web.html`<a href="?view=integrations" class="nav-item">integrations</a>`,
+    $changelogNavItem = web.html`<button class="nav-item nav-changelog">
+    ${await components.feather('clock', { class: 'nav-changelog-icon' })}
+  </button>`;
+  components.addTooltip($changelogNavItem, '**Update changelog & welcome message**');
+  $changelogNavItem.addEventListener('click', () => {
+    $changelogModal.scrollTop = 0;
+    $changelogModal.classList.add('modal-visible');
+  });
+
+  web.render(
+    document.body,
+    web.render(
+      web.html`<div class="body-container"></div>`,
+      web.render(
+        web.html`<div class="content-container"></div>`,
+        web.render(
+          web.html`<nav class="nav"></nav>`,
+          $notionNavItem,
+          $coreNavItem,
+          $extensionsNavItem,
+          $themesNavItem,
+          $integrationsNavItem,
+          web.html`<a href="https://notion-enhancer.github.io" target="_blank" class="nav-item">docs</a>`,
+          web.html`<a href="https://discord.gg/sFWPXtA" target="_blank" class="nav-item">community</a>`,
+          $changelogNavItem
+        ),
+        $main
+      ),
+      web.render($sidebar, $profile, $options)
+    )
+  );
+
+  function selectNavItem($item) {
+    for (const $selected of document.querySelectorAll('.nav-item-selected')) {
+      $selected.className = 'nav-item';
+    }
+    $item.className = 'nav-item-selected';
+  }
+
+  await generators.modList(
+    'core',
+    `Core mods provide the basics required for
+   all other extensions and themes to work. They
+   can't be disabled, but they can be configured
+   - just click on a mod to access its options.`
+  );
+  router.addView('core', async () => {
+    web.empty($main);
+    selectNavItem($coreNavItem);
+    return web.render($main, await generators.modList('core'));
+  });
+
+  await generators.modList(
+    'extension',
+    `Extensions build on the functionality and layout of
+   the Notion client, modifying and interacting with
+   existing interfaces.`
+  );
+  router.addView('extensions', async () => {
+    web.empty($main);
+    selectNavItem($extensionsNavItem);
+    return web.render($main, await generators.modList('extension'));
+  });
+
+  await generators.modList(
+    'theme',
+    `Themes change Notion's colour scheme.
+   Dark themes will only work when Notion is in dark mode,
+   and light themes will only work when Notion is in light mode.
+   Only one theme of each mode can be enabled at a time.`
+  );
+  router.addView('themes', async () => {
+    web.empty($main);
+    selectNavItem($themesNavItem);
+    return web.render($main, await generators.modList('theme'));
+  });
+
+  await generators.modList(
+    'integration',
+    web.html`<span class="danger">Integrations are extensions that use an unofficial API
+   to access and modify content. They are used just like
+   normal extensions, but may be more dangerous to use.</span>`
+  );
+  router.addView('integrations', async () => {
+    web.empty($main);
+    selectNavItem($integrationsNavItem);
+    return web.render($main, await generators.modList('integration'));
+  });
+
+  router.setDefaultView('extensions');
+
+  router.addQueryListener('id', openSidebarMenu);
+  function openSidebarMenu(id) {
+    if (!id) return;
+    id = web.escape(id);
+
+    const deselectedMods = `.mod-selected:not([data-id="${id}"])`;
+    for (const $list of Object.values($modLists)) {
+      for (const $selected of $list.querySelectorAll(deselectedMods)) {
+        $selected.className = 'mod';
+      }
+    }
+    router.updateQuery(`?id=${id}`);
+
+    if (id === 'profile') {
+      openProfileMenu();
+    } else openModMenu(id);
+  }
+})();

repo/menu/mod.json

@@ -0,0 +1,31 @@
+{
+  "name": "menu",
+  "id": "a6621988-551d-495a-97d8-3c568bca2e9e",
+  "version": "0.11.0",
+  "description": "the enhancer's graphical menu, related buttons and shortcuts.",
+  "tags": ["core"],
+  "authors": [
+    {
+      "name": "dragonwocky",
+      "email": "thedragonring.bod@gmail.com",
+      "homepage": "https://dragonwocky.me/",
+      "avatar": "https://dragonwocky.me/avatar.jpg"
+    }
+  ],
+  "css": {
+    "client": ["client.css"],
+    "menu": ["menu.css", "markdown.css"]
+  },
+  "js": {
+    "client": ["client.mjs"]
+  },
+  "options": [
+    {
+      "type": "hotkey",
+      "key": "hotkey",
+      "label": "toggle focus hotkey",
+      "tooltip": "**switches between notion & the enhancer menu**",
+      "value": "Ctrl+Alt+E"
+    }
+  ]
+}

repo/menu/notifications.mjs

@@ -0,0 +1,146 @@
+/**
+ * notion-enhancer: menu
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+import { env, fs, storage, web, components } from '../../api/index.mjs';
+import { tw } from './styles.mjs';
+
+import '../../dep/markdown-it.min.js';
+const md = markdownit({ linkify: true });
+
+const notificationsURL = 'https://notion-enhancer.github.io/notifications.json';
+export const notifications = {
+  $container: web.html`<div class="notifications-container"></div>`,
+  async add({ icon, message, id = undefined, color = undefined, link = undefined }) {
+    const $notification = link
+        ? web.html`<a
+          href="${web.escape(link)}"
+          class="${tw`notification-${color || 'default'}`}"
+          role="alert"
+          target="_blank"
+        ></a>`
+        : web.html`<p
+          class="${tw`notification-${color || 'default'}`}"
+          role="alert"
+          tabindex="0"
+        ></p>`,
+      resolve = async () => {
+        if (id !== undefined) {
+          notifications.cache.push(id);
+          await storage.set(['notifications'], notifications.cache);
+        }
+        $notification.remove();
+      };
+    $notification.addEventListener('click', resolve);
+    $notification.addEventListener('keyup', (event) => {
+      if (['Enter', ' '].includes(event.key)) resolve();
+    });
+    web.render(
+      notifications.$container,
+      web.render(
+        $notification,
+        web.html`<span class="notification-text markdown-inline">
+          ${md.renderInline(message)}
+        </span>`,
+        web.html`${await components.feather(icon, { class: 'notification-icon' })}`
+      )
+    );
+    return $notification;
+  },
+  _onChange: false,
+  async onChange() {
+    if (this._onChange) return;
+    this._onChange = true;
+    const $notification = await this.add({
+      icon: 'refresh-cw',
+      message: 'Reload to apply changes.',
+    });
+    $notification.addEventListener('click', env.reload);
+  },
+};
+
+(async () => {
+  notifications.cache = await storage.get(['notifications'], []);
+  notifications.provider = await fs.getJSON(notificationsURL);
+
+  web.render(document.body, notifications.$container);
+  for (const notification of notifications.provider) {
+    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);
+  }
+})();
+
+export const $changelogModal = web.render(
+  web.html`<div class="modal" role="dialog" aria-modal="true">
+    <div class="modal-overlay" aria-hidden="true"></div>
+  </div>`
+);
+
+(async () => {
+  const $changelogModalButton = web.html`<button type="button" class="modal-button">
+    Accept & Continue
+  </button>`;
+  $changelogModalButton.addEventListener('click', async () => {
+    $changelogModal.classList.remove('modal-visible');
+    await storage.set(['last_read_changelog'], env.version);
+  });
+
+  web.render(
+    $changelogModal,
+    web.render(
+      web.html`<div class="modal-box"></div>`,
+      web.html`<div class="modal-body">
+        <div class="modal-title">
+          ${(await fs.getText('media/colour.svg')).replace(
+            /width="\d+" height="\d+"/,
+            `class="modal-title-icon"`
+          )}
+          <div>
+            <h1 class="modal-title-heading">
+              notion-enhancer v${env.version}
+            </h1>
+            <p class="modal-title-description">
+              an enhancer/customiser for the all-in-one productivity workspace notion.so
+            </p>
+          </div>
+        </div>
+        <div class="modal-content">
+          <p>
+            Welcome to the notion-enhancer! For help getting started, check out the
+            <a href="https://notion-enhancer.github.io/getting-started/basic-usage/" class="link" target="_blank">
+            basic usage</a> guide. If you've upgraded from a previous version of the notion-enhancer, you can see
+            what's new <a href="https://notion-enhancer.github.io/about/changelog/" class="link">here</a>.
+          </p>
+          <p>
+            If you spot a bug or have a new feature idea, have a read through the
+            <a href="https://notion-enhancer.github.io/about/contributing/" class="link">Contributing</a>
+            guide to learn how & where to talk to us about it. For extra support, come join our
+            <a href="https://discord.com/invite/sFWPXtA" class="link" target="_blank">Discord community</a>.
+          </p>
+          <p>
+            Maintaining and updating the notion-enhancer does take a lot of time and work,
+            so if you'd like to support future development
+            <a href="https://github.com/sponsors/dragonwocky" class="important-link" target="_blank">
+            please consider making a donation</a>.
+          </p>
+          <p>
+            By clicking &quot;Accept & Continue&quot; below you agree to the notion-enhancer's
+            <a href="https://notion-enhancer.github.io/about/privacy-policy/" class="link">Privacy Policy</a> and
+            <a href="https://notion-enhancer.github.io/about/terms-and-conditions/" class="link">Terms & Conditions</a>.
+          </p>
+        </div>
+      </div>`,
+      web.render(web.html`<div class="modal-actions"></div>`, $changelogModalButton)
+    )
+  );
+
+  const lastReadChangelog = await storage.get(['last_read_changelog']);
+  web.render(document.body, $changelogModal);
+  if (lastReadChangelog !== env.version) {
+    $changelogModal.classList.add('modal-visible');
+  }
+})();

repo/menu/router.mjs

@@ -0,0 +1,88 @@
+/**
+ * notion-enhancer: menu
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+'use strict';
+
+import { web } from '../../api/index.mjs';
+
+const _queryListeners = new Set();
+
+export function addView(name, loadFunc) {
+  const handlerFunc = (newView) => {
+    if (newView === name) return loadFunc();
+    return false;
+  };
+  _queryListeners.add({ param: 'view', viewName: name, handlerFunc });
+  handlerFunc(web.queryParams().get('view'), null);
+}
+export function removeView(name) {
+  const view = [..._queryListeners].find((view) => view.viewName === name);
+  if (view) _queryListeners.delete(view);
+}
+export async function setDefaultView(viewName) {
+  const viewList = [..._queryListeners].filter((q) => q.viewName).map((v) => v.viewName);
+  if (!viewList.includes(web.queryParams().get('view'))) {
+    updateQuery(`?view=${viewName}`, true);
+  }
+}
+
+export function addQueryListener(param, handlerFunc) {
+  _queryListeners.add({ param: param, handlerFunc });
+  handlerFunc(web.queryParams().get(param), null);
+}
+export function removeQueryListener(handlerFunc) {
+  const listener = [..._queryListeners].find((view) => view.handlerFunc === handlerFunc);
+  if (listener) _queryListeners.delete(listener);
+}
+
+export const updateQuery = (search, replace = false) => {
+  let query = web.queryParams();
+  for (const [key, val] of new URLSearchParams(search)) {
+    query.set(key, val);
+  }
+  query = `?${query.toString()}`;
+  if (location.search !== query) {
+    if (replace) {
+      window.history.replaceState(null, null, query);
+    } else {
+      window.history.pushState(null, null, query);
+    }
+    triggerQueryListeners();
+  }
+};
+
+function router(event) {
+  event.preventDefault();
+  const anchor = event.path
+    ? event.path.find((anchor) => anchor.nodeName === 'A')
+    : event.target;
+  updateQuery(anchor.getAttribute('href'));
+}
+
+let queryCache = '';
+async function triggerQueryListeners() {
+  if (location.search === queryCache) return;
+  const newQuery = web.queryParams(),
+    oldQuery = new URLSearchParams(queryCache);
+  queryCache = location.search;
+  for (const listener of _queryListeners) {
+    const newParam = newQuery.get(listener.param),
+      oldParam = oldQuery.get(listener.param);
+    if (newParam !== oldParam) listener.handlerFunc(newParam, oldParam);
+  }
+}
+
+window.addEventListener('popstate', triggerQueryListeners);
+
+web.addDocumentObserver(
+  (mutation) => {
+    mutation.target.querySelectorAll('a[href^="?"]').forEach((a) => {
+      a.removeEventListener('click', router);
+      a.addEventListener('click', router);
+    });
+  },
+  ['a[href^="?"]']
+);

repo/menu/styles.mjs

@@ -0,0 +1,182 @@
+/**
+ * notion-enhancer: menu
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+'use strict';
+
+// css-in-js for better component generation
+
+import { tw, apply, setup } from '../../dep/twind.mjs';
+import { content } from '../../dep/twind-content.mjs';
+
+const pseudoContent = content('""'),
+  mapColorVariables = (color) => ({
+    'text': `var(--theme--text_${color})`,
+    'highlight': `var(--theme--highlight_${color})`,
+    'highlight-text': `var(--theme--highlight_${color}-text)`,
+    'callout': `var(--theme--callout_${color})`,
+    'callout-text': `var(--theme--callout_${color}-text)`,
+    'tag': `var(--theme--tag_${color})`,
+    'tag-text': `var(--theme--tag_${color}-text)`,
+    'board': `var(--theme--board_${color})`,
+    'board-text': `var(--theme--board_${color}-text)`,
+    'board-card': `var(--theme--board_${color}-card)`,
+    'board-card_text': `var(--theme--board_${color}-card_text)`,
+  });
+
+const customClasses = {
+  'notifications-container': apply`absolute bottom-0 right-0 px-4 py-3 max-w-full w-96 z-10`,
+  'notification': ([color = 'default']) =>
+    apply`p-2 border group hover:(filter brightness-125) ${
+      color === 'default'
+        ? 'bg-tag text-tag-text border-divider'
+        : `bg-${color}-tag text-${color}-tag-text border-${color}-text`
+    } flex items-center rounded-full mt-3 shadow-md cursor-pointer`,
+  'notification-text': apply`text-xs mx-2 flex-auto font-semibold group-hover:(filter brightness-75)`,
+  'notification-icon': apply`fill-current opacity-75 h-4 w-4 mx-2`,
+  'body-container': apply`flex w-full h-full overflow-hidden`,
+  'sidebar': apply`h-full w-96 max-w-3/7 flex-shrink-0 px-4 pt-3 pb-16 overflow-y-auto flex flex-col
+    bg-notion-secondary border-l border-divider`,
+  'content-container': apply`h-full w-full flex flex-col`,
+  'nav': apply`px-4 mx-2.5 py-1 flex flex-wrap items-center border-b border-divider
+    justify-center xl:justify-start`,
+  'nav-notion': apply`flex items-center font-semibold text-xl cursor-pointer select-none my-4
+    w-full justify-center xl:(mr-4 w-auto justify-start)`,
+  'nav-notion-icon': apply`h-6 w-6 mr-2.5`,
+  'nav-item': apply`mr-2 px-3 py-2 rounded-md text-sm font-medium
+    hover:bg-interactive-hover focus:bg-interactive-active mb-2 xl:(mt-1 mb-0)`,
+  'nav-item-selected': apply`nav-item ring-1 ring-divider bg-notion-secondary
+    hover:bg-notion-secondary focus:bg-notion-secondary`,
+  'nav-changelog': apply`xl:ml-auto focus:outline-none`,
+  'nav-changelog-icon': apply`w-4 h-4`,
+  'main': apply`transition px-4 py-3 overflow-y-auto flex-grow`,
+  'main-message': apply`mx-2.5 my-2.5 px-px text-sm text-foreground-secondary text-justify`,
+  'mods-list': apply`flex flex-wrap`,
+  'mod-container': apply`w-full md:w-1/2 lg:w-1/3 xl:w-1/4 2xl:w-1/5 px-2.5 py-2.5 box-border`,
+  'mod': apply`relative h-full w-full flex flex-col overflow-hidden rounded-lg shadow-lg
+    bg-notion-secondary border border-divider cursor-pointer`,
+  'mod-selected': apply`mod ring ring-accent-blue-active`,
+  'mod-body': apply`px-4 py-3 flex flex-col flex-auto children:cursor-pointer`,
+  'mod-preview': apply`object-cover w-full h-32`,
+  'mod-title': apply`mb-2 text-xl font-semibold tracking-tight flex items-center`,
+  'mod-version': apply`mt-px ml-3 p-1 font-normal text-xs leading-none bg-tag text-tag-text rounded`,
+  'mod-tags': apply`text-foreground-secondary mb-2 text-xs`,
+  'mod-description': apply`mb-2 text-sm`,
+  'mod-authors-container': apply`text-sm font-medium`,
+  'mod-author': apply`flex items-center mb-2`,
+  'mod-author-avatar': apply`inline object-cover w-5 h-5 rounded-full mr-2`,
+  'profile-trigger': apply`block px-4 py-3 mb-2 rounded-md text-sm text-left font-semibold shadow-inner
+    hover:bg-accent-red-button border border-accent-red text-accent-red focus:(outline-none bg-accent-red-button)`,
+  'profile-actions': apply`flex`,
+  'profile-save': apply`text-sm px-3 py-2 font-medium mt-2 bg-accent-blue text-accent-blue-text rounded-md flex-grow
+    hover:bg-accent-blue-hover focus:(bg-accent-blue-active outline-none) text-center`,
+  'profile-delete': apply`profile-trigger px-3 py-2 mb-0 ml-2 mt-2 text-center font-medium`,
+  'profile-export': apply`profile-save mr-2`,
+  'profile-import': apply`profile-save mr-2`,
+  'profile-error': apply`text-xs mt-2 text-red-text`,
+  'profile-icon-action': apply`w-4 h-4 -mt-1 inline-block`,
+  'profile-icon-text': apply`w-4 h-4 -mt-1 inline-block mr-1`,
+  'options-container': apply`px-4 py-3 shadow-inner rounded-lg bg-notion border border-divider space-y-3`,
+  'options-placeholder': apply`text-sm text-foreground-secondary`,
+  'toggle-box': apply`w-9 h-5 p-0.5 flex items-center bg-toggle-off rounded-full duration-300 ease-in-out cursor-pointer`,
+  'toggle-label': apply`relative text-sm flex w-full mt-auto`,
+  'toggle-check': apply`appearance-none ml-auto checked:sibling:(bg-toggle-on after::translate-x-4)`,
+  'toggle-feature': apply`after::(${pseudoContent} w-4 h-4 bg-toggle-feature rounded-full duration-300) cursor-pointer`,
+  'input-label': apply`block text-sm mt-2 relative`,
+  'input': apply`transition block w-full mt-2 pl-3 pr-14 py-2 text-sm rounded-md flex bg-input text-foreground
+    appearance-none placeholder-foreground-secondary ring-1 ring-divider focus:(outline-none ring ring-accent-blue-active)`,
+  'input-tooltip': apply`h-4 w-4 -mt-1 inline-block mr-2`,
+  'input-icon': apply`absolute w-11 h-9 right-0 bottom-0 py-2 px-3 bg-notion-secondary rounded-r-md text-icon`,
+  'input-placeholder': apply`text-foreground-secondary`,
+  'select-option': apply`bg-notion-secondary`,
+  'file-latest': apply`block w-full text-left text-foreground-secondary text-xs mt-2 hover:line-through cursor-pointer`,
+  'search-container': apply`block mx-2.5 my-2.5 relative`,
+  'search': apply`input pr-12`,
+  'important-link': apply`text-accent-red border-b border-accent-red opacity-80 hover:opacity-100`,
+  'danger': apply`text-red-text`,
+  'link': apply`no-underline border-b border-foreground-secondary opacity-70 hover:opacity-90`,
+  'modal': apply`fixed flex z-10 inset-0 overflow-y-auto min-h-screen text-center
+    ease-out duration-300 transition-opacity opacity-0 pointer-events-none`,
+  'modal-visible': {
+    '@apply': apply`ease-in duration-200 opacity-100 pointer-events-auto`,
+    '& .modal-box': apply`ease-out duration-300 opacity-100 scale-100`,
+  },
+  'modal-overlay': apply`fixed inset-0 bg-black bg-opacity-50 transition-opacity`,
+  'modal-box': apply`inline-block rounded-lg text-left overflow-hidden shadow-xl
+    transform transition-all m-auto align-middle
+    ease-in duration-200 opacity-0 scale-95`,
+  'modal-body': apply`bg-notion-secondary p-6 pt-4 max-w-xl w-full`,
+  'modal-actions': apply`bg-notion py-3 px-6 flex flex-row-reverse`,
+  'modal-title': apply`flex`,
+  'modal-title-icon': apply`w-20 mr-6`,
+  'modal-title-heading': apply`text-xl leading-6 font-medium`,
+  'modal-title-description': apply`mt-2 text-sm text-foreground-secondary`,
+  'modal-content': {
+    '@apply': apply`mt-4 text-sm`,
+    'p': apply`mt-2`,
+  },
+  'modal-button': apply`w-full inline-flex justify-center rounded-md text-base font-medium shadow-sm px-4 py-2
+    not-focus:hover:bg-interactive-hover focus:bg-interactive-active focus:outline-none`,
+};
+
+setup({
+  preflight: {
+    html: apply`w-full h-full`,
+    body: apply`w-full h-full bg-notion font-sans text-foreground`,
+  },
+  theme: {
+    fontFamily: {
+      sans: ['var(--theme--font_sans)'],
+      mono: ['var(--theme--font_code)'],
+    },
+    colors: {
+      'black': 'rgba(0,0,0,var(--tw-bg-opacity));',
+      'notion': 'var(--theme--bg)',
+      'notion-secondary': 'var(--theme--bg_secondary)',
+      'notion-card': 'var(--theme--bg_card)',
+      'divider': 'var(--theme--ui_divider)',
+      'input': 'var(--theme--ui_input)',
+      'icon': 'var(--theme--icon)',
+      'icon-secondary': 'var(--theme--icon_secondary)',
+      'foreground': 'var(--theme--text)',
+      'foreground-secondary': 'var(--theme--text_secondary)',
+      'interactive-hover': 'var(--theme--ui_interactive-hover)',
+      'interactive-active': 'var(--theme--ui_interactive-active)',
+      'tag': 'var(--theme--tag_default)',
+      'tag-text': 'var(--theme--tag_default-text)',
+      'toggle': {
+        'on': 'var(--theme--ui_toggle-on)',
+        'off': 'var(--theme--ui_toggle-off)',
+        'feature': 'var(--theme--ui_toggle-feature)',
+      },
+      'accent': {
+        'blue': 'var(--theme--accent_blue)',
+        'blue-hover': 'var(--theme--accent_blue-hover)',
+        'blue-active': 'var(--theme--accent_blue-active)',
+        'blue-text': 'var(--theme--accent_blue-text)',
+        'red': 'var(--theme--accent_red)',
+        'red-button': 'var(--theme--accent_red-button)',
+        'red-text': 'var(--theme--accent_red-text)',
+      },
+      'gray': mapColorVariables('gray'),
+      'brown': mapColorVariables('brown'),
+      'orange': mapColorVariables('orange'),
+      'yellow': mapColorVariables('yellow'),
+      'green': mapColorVariables('green'),
+      'blue': mapColorVariables('blue'),
+      'purple': mapColorVariables('purple'),
+      'pink': mapColorVariables('pink'),
+      'red': mapColorVariables('red'),
+    },
+    extend: {
+      maxWidth: { '3/7': 'calc((3 / 7) * 100%);' },
+    },
+  },
+  plugins: customClasses,
+});
+
+tw`hidden ${Object.keys(customClasses).join(' ')}`;
+
+export { tw };

repo/neutral/app.css

@@ -0,0 +1,48 @@
+/**
+ * notion-enhancer: neutral
+ * (c) 2020 Arecsu
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+.notion-dark-theme [placeholder='Heading 1'],
+.notion-dark-theme [placeholder='Heading 2'],
+.notion-dark-theme [placeholder='Heading 3'] {
+  padding: 3px 1px !important;
+}
+
+/* hide sidebar "new page" button */
+.notion-dark-theme .notion-sidebar > [style*='flex: 0 0 auto; margin-top: auto;'] {
+  display: none !important;
+}
+
+/* 1.3 supreme ratio. https://www.modularscale.com/ */
+.notion-collection_view_page-block > div[placeholder='Untitled'],
+.notion-frame .notion-page-block > div[placeholder='Untitled'],
+.notion-overlay-container .notion-page-block > div[placeholder='Untitled'] {
+  font-size: 33px !important;
+}
+[placeholder='Heading 1'] {
+  font-size: 2.2rem !important;
+}
+[placeholder='Heading 2'] {
+  font-size: 1.687rem !important;
+}
+[placeholder='Heading 3'] {
+  font-size: 1.3rem !important;
+}
+.notion-frame .notion-scroller.vertical.horizontal .notion-page-content,
+.notion-overlay-container .notion-scroller.vertical .notion-page-content {
+  font-size: 15px !important;
+}
+.notion-frame
+  .notion-scroller.vertical.horizontal
+  .notion-page-content[style*='font-size: 14px'],
+.notion-overlay-container
+  .notion-scroller.vertical
+  .notion-page-content[style*='font-size: 14px'] {
+  font-size: 13.5px !important;
+}
+.notion-code-block [placeholder=' '] {
+  font-size: 0.9em !important;
+}

repo/neutral/mod.json

@@ -0,0 +1,23 @@
+{
+  "name": "neutral",
+  "id": "c4435543-4705-4d68-8cf7-d11c342f8089",
+  "version": "0.2.0",
+  "description": "smoother colours and text sizing, designed to be more pleasing to the eye.",
+  "preview": "neutral.png",
+  "tags": ["theme", "dark"],
+  "authors": [
+    {
+      "name": "arecsu",
+      "email": "alejandro9r@gmail.com",
+      "homepage": "https://github.com/Arecsu",
+      "avatar": "https://avatars.githubusercontent.com/u/12679098"
+    }
+  ],
+  "css": {
+    "frame": ["variables.css"],
+    "client": ["variables.css", "app.css"],
+    "menu": ["variables.css"]
+  },
+  "js": {},
+  "options": []
+}

repo/neutral/variables.css

@@ -0,0 +1,141 @@
+/**
+ * notion-enhancer: neutral
+ * (c) 2020 Arecsu
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+:root.dark {
+  --theme--accent_blue: #404040;
+  --theme--accent_blue-selection: #52525244;
+  --theme--accent_blue-hover: #6d6d6d;
+  --theme--accent_blue-active: #cacaca;
+  --theme--accent_red: #ce535f;
+  --theme--accent_red-button: #8c3d3dad;
+
+  --theme--bg: #131313;
+  --theme--bg_secondary: #161616;
+  --theme--bg_card: #181818;
+
+  --theme--scrollbar_track: transparent;
+  --theme--scrollbar_thumb: #232425;
+  --theme--scrollbar_thumb-hover: #373838;
+
+  --theme--ui_shadow: rgba(15, 15, 15, 0.5);
+  --theme--ui_divider: rgba(78, 78, 78, 0.7);
+  --theme--ui_interactive-hover: rgb(29, 29, 29);
+  --theme--ui_interactive-active: rgba(29, 29, 29, 0.7);
+  --theme--ui_input: #1d1d1d;
+  --theme--ui_corner_action: var(--theme--bg_card);
+  --theme--ui_corner_action-hover: var(--theme--ui_interactive-hover);
+  --theme--ui_corner_action-active: var(--theme--ui_interactive-active);
+
+  --theme--icon: #dadada;
+  --theme--icon_secondary: #dadadac0;
+
+  --theme--text: #dadada;
+  --theme--text_secondary: #dadadac0;
+  --theme--text_gray: #858585;
+  --theme--text_brown: #484848;
+  --theme--text_orange: #ec9873;
+  --theme--text_yellow: #e2c06f;
+  --theme--text_green: #92b178;
+  --theme--text_blue: #719cca;
+  --theme--text_purple: #ab82bb;
+  --theme--text_pink: #d285aa;
+  --theme--text_red: #ce535f;
+
+  --theme--highlight_gray: #585858;
+  --theme--highlight_brown: #333333;
+  --theme--highlight_orange: #9a5a3f;
+  --theme--highlight_yellow: #b58a46;
+  --theme--highlight_green: #657953;
+  --theme--highlight_blue: #355475;
+  --theme--highlight_purple: #775186;
+  --theme--highlight_pink: #8e4b63;
+  --theme--highlight_red: #8c3d3d;
+
+  --theme--callout_gray: #585858;
+  --theme--callout_brown: #333333;
+  --theme--callout_orange: #9a5a3f;
+  --theme--callout_yellow: #b58a46;
+  --theme--callout_green: #657953;
+  --theme--callout_blue: #355475;
+  --theme--callout_purple: #775186;
+  --theme--callout_pink: #8e4b63;
+  --theme--callout_red: #8c3d3d;
+
+  --theme--tag-text: var(--theme--text);
+  --theme--tag_default: var(--theme--highlight_gray);
+  --theme--tag_light_gray: #8A8A8A;
+  --theme--tag_gray: var(--theme--highlight_gray);
+  --theme--tag_brown: var(--theme--highlight_brown);
+  --theme--tag_orange: var(--theme--highlight_orange);
+  --theme--tag_yellow: var(--theme--highlight_yellow);
+  --theme--tag_green: var(--theme--highlight_green);
+  --theme--tag_blue: var(--theme--highlight_blue);
+  --theme--tag_purple: var(--theme--highlight_purple);
+  --theme--tag_pink: var(--theme--highlight_pink);
+  --theme--tag_red: var(--theme--highlight_red);
+
+  --theme--board_light_gray: rgba(112, 112, 112, 0.175);
+  --theme--board_light_gray-text: #AAAAAA;
+  --theme--board_light_gray-card: var(--theme--tag_light_gray);
+  --theme--board_light_gray-card_text: var(--theme--tag_light_gray-text);
+  --theme--board_gray: rgba(88, 88, 88, 0.175);
+  --theme--board_gray-text: var(--theme--text_gray);
+  --theme--board_gray-card: var(--theme--tag_gray);
+  --theme--board_gray-card_text: var(--theme--tag_gray-text);
+  --theme--board_brown: rgb(51, 51, 51, 0.175);
+  --theme--board_brown-text: var(--theme--text_brown);
+  --theme--board_brown-card: var(--theme--tag_brown);
+  --theme--board_brown-card_text: var(--theme--tag_brown-text);
+  --theme--board_orange: rgb(154, 90, 63, 0.175);
+  --theme--board_orange-text: var(--theme--text_orange);
+  --theme--board_orange-card: var(--theme--tag_orange);
+  --theme--board_orange-card_text: var(--theme--tag_orange-text);
+  --theme--board_yellow: rgb(181, 138, 70, 0.175);
+  --theme--board_yellow-text: var(--theme--text_yellow);
+  --theme--board_yellow-card: var(--theme--tag_yellow);
+  --theme--board_yellow-card_text: var(--theme--tag_yellow-text);
+  --theme--board_green: rgb(101, 121, 83, 0.175);
+  --theme--board_green-text: var(--theme--text_green);
+  --theme--board_green-card: var(--theme--tag_green);
+  --theme--board_green-card_text: var(--theme--tag_green-text);
+  --theme--board_blue: rgb(53, 84, 117, 0.175);
+  --theme--board_blue-text: var(--theme--text_blue);
+  --theme--board_blue-card: var(--theme--tag_blue);
+  --theme--board_blue-card_text: var(--theme--tag_blue-text);
+  --theme--board_purple: rgb(119, 81, 134, 0.175);
+  --theme--board_purple-text: var(--theme--text_purple);
+  --theme--board_purple-card: var(--theme--tag_purple);
+  --theme--board_purple-card_text: var(--theme--tag_purple-text);
+  --theme--board_pink: rgb(142, 75, 99, 0.175);
+  --theme--board_pink-text: var(--theme--text_pink);
+  --theme--board_pink-card: var(--theme--tag_pink);
+  --theme--board_pink-card_text: var(--theme--tag_pink-text);
+  --theme--board_red: rgb(140, 61, 61, 0.175);
+  --theme--board_red-text: var(--theme--text_red);
+  --theme--board_red-card: var(--theme--tag_red);
+  --theme--board_red-card_text: var(--theme--tag_red-text);
+
+  --theme--code_inline: #333333;
+  --theme--code_inline-text: var(--theme--text);
+
+  --theme--code: #0e0e0e;
+  --theme--code_plain: var(--theme--text);
+  --theme--code_function: var(--theme--text_blue);
+  --theme--code_keyword: var(--theme--text_pink);
+  --theme--code_tag: var(--theme--text_pink);
+  --theme--code_operator: var(--theme--text_yellow);
+  --theme--code_important: var(--theme--text_yellow);
+  --theme--code_property: var(--theme--text_pink);
+  --theme--code_builtin: var(--theme--text_yellow);
+  --theme--code_attr-name: var(--theme--text_yellow);
+  --theme--code_comment: var(--theme--text_gray);
+  --theme--code_punctuation: var(--theme--text_gray);
+  --theme--code_doctype: var(--theme--text_gray);
+  --theme--code_number: var(--theme--text_purple);
+  --theme--code_string: var(--theme--text_orange);
+  --theme--code_attr-value: var(--theme--text_orange);
+}

repo/nord/mod.json

@@ -0,0 +1,28 @@
+{
+  "name": "nord",
+  "id": "d64ad391-1494-4112-80ae-0a3b6f4b0c3f",
+  "version": "0.2.0",
+  "description": "an arctic, north-bluish color palette.",
+  "preview": "nord.png",
+  "tags": ["theme", "dark"],
+  "authors": [
+    {
+      "name": "Artic Ice Studio",
+      "email": "development@arcticicestudio.com",
+      "homepage": "https://www.nordtheme.com/",
+      "avatar": "https://avatars.githubusercontent.com/u/7836623"
+    },
+    {
+      "name": "MANNNNEN",
+      "homepage": "https://github.com/MANNNNEN",
+      "avatar": "https://avatars.githubusercontent.com/u/35939149"
+    }
+  ],
+  "css": {
+    "frame": ["variables.css"],
+    "client": ["variables.css"],
+    "menu": ["variables.css"]
+  },
+  "js": {},
+  "options": []
+}

repo/nord/variables.css

@@ -0,0 +1,160 @@
+/**
+ * notion-enhancer: dracula
+ * (c) 2016 Artic Ice Studio
+ * (c) 2020 MANNNNEN
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+:root.dark {
+  --nord--dark1: #2e3440;
+  --nord--dark2: #3b4252;
+  --nord--dark3: #434c5e;
+  --nord--dark4: #4c566a;
+  --nord--light1: #d8dee9;
+  --nord--light2: #e5e9f0;
+  --nord--light3: #eceff4;
+  --nord--frost1: #8fbcbb;
+  --nord--frost2: #88c0d0;
+  --nord--frost3: #81a1c1;
+  --nord--frost4: #5e81ac;
+  --nord--red: #bf616a;
+  --nord--orange: #d08770;
+  --nord--yellow: #ebcb8b;
+  --nord--green: #a3be8c;
+  --nord--purple: #b48ead;
+
+  --theme--accent_blue: var(--nord--frost2);
+  --theme--accent_blue-selection: rgb(136 192 208 / 50%);
+  --theme--accent_blue-hover: var(--nord--frost1);
+  --theme--accent_blue-active: var(--nord--frost2);
+  --theme--accent_red: var(--nord--red);
+  --theme--accent_red-button: rgba(235, 87, 87, 0.2);
+
+  --theme--bg: var(--nord--dark1);
+  --theme--bg_secondary: var(--nord--dark2);
+  --theme--bg_card: var(--nord--dark2);
+
+  --theme--scrollbar_track: transparent;
+  --theme--scrollbar_thumb: var(--nord--dark3);
+  --theme--scrollbar_thumb-hover: var(--nord--dark4);
+
+  --theme--ui_divider: rgba(255, 255, 255, 0.1);
+  --theme--ui_interactive-hover: var(--nord--dark4);
+  --theme--ui_interactive-active: #4c566ade;
+  --theme--ui_toggle-off: var(--nord--dark4);
+  --theme--ui_toggle-feature: var(--nord--light1);
+  --theme--ui_corner_action: var(--theme--bg_card);
+  --theme--ui_corner_action-hover: var(--theme--ui_interactive-hover);
+  --theme--ui_corner_action-active: var(--theme--ui_interactive-active);
+
+  --theme--icon: var(--nord--light1);
+  --theme--icon_secondary: var(--nord--light1);
+
+  --theme--text: var(--nord--light1);
+  --theme--text_secondary: var(--nord--light1);
+
+  --theme--text_gray: rgba(151, 154, 155, 0.95);
+  --theme--text_brown: rgb(147, 114, 100);
+  --theme--text_orange: var(--nord--orange);
+  --theme--text_yellow: var(--nord--yellow);
+  --theme--text_green: var(--nord--green);
+  --theme--text_blue: var(--nord--frost3);
+  --theme--text_purple: var(--nord--purple);
+  --theme--text_pink: rgb(193 106 153);
+  --theme--text_red: var(--nord--red);
+
+  --theme--highlight_gray: rgb(69, 75, 78);
+  --theme--highlight_brown: rgb(67, 64, 64);
+  --theme--highlight_orange: var(--nord--orange);
+  --theme--highlight_yellow: var(--nord--yellow);
+  --theme--highlight_yellow-text: var(--nord--dark1);
+  --theme--highlight_green: var(--nord--green);
+  --theme--highlight_blue: var(--nord--frost3);
+  --theme--highlight_purple: var(--nord--purple);
+  --theme--highlight_pink: rgb(193 106 153);
+  --theme--highlight_red: var(--nord--red);
+
+  --theme--callout_gray: rgb(69, 75, 78);
+  --theme--callout_brown: rgb(67, 64, 64);
+  --theme--callout_orange: var(--nord--orange);
+  --theme--callout_yellow: var(--nord--yellow);
+  --theme--callout_yellow-text: var(--nord--dark1);
+  --theme--callout_green: var(--nord--green);
+  --theme--callout_blue: var(--nord--frost3);
+  --theme--callout_purple: var(--nord--purple);
+  --theme--callout_pink: rgb(193 106 153);
+  --theme--callout_red: var(--nord--red);
+
+  --theme--tag_default: rgba(151, 154, 155, 0.5);
+  --theme--tag_light_gray: rgba(182, 184, 185, 0.5);
+  --theme--tag_gray: rgba(151, 154, 155, 0.5);
+  --theme--tag_brown: rgba(147, 114, 100, 0.5);
+  --theme--tag_orange: rgba(255, 163, 68, 0.5);
+  --theme--tag_yellow: rgba(255, 220, 73, 0.5);
+  --theme--tag_green: rgba(77, 171, 154, 0.5);
+  --theme--tag_blue: rgba(82, 156, 202, 0.5);
+  --theme--tag_purple: rgba(154, 109, 215, 0.5);
+  --theme--tag_pink: rgba(226, 85, 161, 0.5);
+  --theme--tag_red: rgba(255, 115, 105, 0.5);
+
+  --theme--board_light_gray: rgba(69, 75, 78, 0.3);
+  --theme--board_light_gray-card: var(--theme--tag_light_gray);
+  --theme--board_light_gray-card_text: var(--theme--tag_light_gray-text);
+  --theme--board_light_gray-text: rgba(161, 162, 163, 0.95);
+  --theme--board_gray: rgba(69, 75, 78, 0.3);
+  --theme--board_gray-card: var(--theme--tag_gray);
+  --theme--board_gray-card_text: var(--theme--tag_gray-text);
+  --theme--board_gray-text: var(--theme--text_gray);
+  --theme--board_brown: rgba(67, 64, 64, 0.3);
+  --theme--board_brown-card: var(--theme--tag_brown);
+  --theme--board_brown-card_text: var(--theme--tag_brown-text);
+  --theme--board_brown-text: var(--theme--text_brown);
+  --theme--board_orange: rgba(89, 74, 58, 0.3);
+  --theme--board_orange-card: var(--theme--tag_orange);
+  --theme--board_orange-card_text: var(--theme--tag_orange-text);
+  --theme--board_orange-text: var(--theme--text_orange);
+  --theme--board_yellow: rgba(89, 86, 59, 0.3);
+  --theme--board_yellow-card: var(--theme--tag_yellow);
+  --theme--board_yellow-card_text: var(--theme--tag_yellow-text);
+  --theme--board_yellow-text: var(--theme--text_yellow);
+  --theme--board_green: rgba(53, 76, 75, 0.3);
+  --theme--board_green-card: var(--theme--tag_green);
+  --theme--board_green-card_text: var(--theme--tag_green-text);
+  --theme--board_green-text: var(--theme--text_green);
+  --theme--board_blue: rgba(54, 73, 84, 0.3);
+  --theme--board_blue-card: var(--theme--tag_blue);
+  --theme--board_blue-card_text: var(--theme--tag_blue-text);
+  --theme--board_blue-text: var(--theme--text_blue);
+  --theme--board_purple: rgba(68, 63, 87, 0.3);
+  --theme--board_purple-card: var(--theme--tag_purple);
+  --theme--board_purple-card_text: var(--theme--tag_purple-text);
+  --theme--board_purple-text: var(--theme--text_purple);
+  --theme--board_pink: rgba(83, 59, 76, 0.3);
+  --theme--board_pink-card: var(--theme--tag_pink);
+  --theme--board_pink-card_text: var(--theme--tag_pink-text);
+  --theme--board_pink-text: var(--theme--text_pink);
+  --theme--board_red: rgba(89, 65, 65, 0.3);
+  --theme--board_red-card: var(--theme--tag_red);
+  --theme--board_red-card_text: var(--theme--tag_red-text);
+  --theme--board_red-text: var(--theme--text_red);
+
+  --theme--code_inline: rgba(135, 131, 120, 0.15);
+  --theme--code_inline-text: var(--nord--red);
+
+  --theme--code: var(--theme--bg_card);
+  --theme--code_function: var(--theme--text_blue);
+  --theme--code_keyword: var(--theme--text_pink);
+  --theme--code_tag: var(--theme--text_pink);
+  --theme--code_operator: var(--theme--text_yellow);
+  --theme--code_important: var(--theme--text_yellow);
+  --theme--code_property: var(--theme--text_pink);
+  --theme--code_builtin: var(--theme--text_yellow);
+  --theme--code_attr-name: var(--theme--text_yellow);
+  --theme--code_comment: var(--theme--text_gray);
+  --theme--code_punctuation: var(--theme--text_gray);
+  --theme--code_doctype: var(--theme--text_gray);
+  --theme--code_number: var(--theme--text_purple);
+  --theme--code_string: var(--theme--text_orange);
+  --theme--code_attr-value: var(--theme--text_orange);
+}

repo/outliner/client.css

@@ -0,0 +1,47 @@
+/**
+ * notion-enhancer: outliner
+ * (c) 2020 CloudHill <rl.cloudhill@gmail.com> (https://github.com/CloudHill)
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+#outliner--notice {
+  color: var(--theme--text_secondary);
+  font-size: 14px;
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+.outliner--header {
+  position: relative;
+  margin: 0 -1rem;
+  padding: 0 1rem;
+  display: block;
+  font-size: 14px;
+  line-height: 2.2;
+  white-space: nowrap;
+  overflow: hidden;
+  user-select: none;
+  text-overflow: ellipsis;
+  text-decoration: none;
+  text-indent: var(--outliner--indent);
+  color: inherit;
+  cursor: pointer !important;
+  transition: background 20ms ease-in;
+}
+.outliner--header:hover {
+  background: var(--theme--ui_interactive-hover);
+}
+
+.outliner--header:empty::after {
+  color: var(--theme--text_secondary);
+  content: attr(placeholder);
+}
+
+/* indentation lines */
+.outliner--header:not([style='--outliner--indent:0px;'])::before {
+  content: '';
+  height: 100%;
+  position: absolute;
+  left: calc((1rem + var(--outliner--indent)) - 11px);
+}