added welcome/changelog/license acceptance modal

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/font-chooser/fonts.css

@@ -1,6 +1,6 @@
 /*
  * notion-enhancer: font chooser
- * (c) 2021 TorchAtlas (https://torchatlas.netlify.app/)
+ * (c) 2021 TorchAtlas (https://bit.ly/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

repo/font-chooser/fonts.mjs

@@ -1,6 +1,6 @@
 /*
  * notion-enhancer: font chooser
- * (c) 2021 TorchAtlas (https://torchatlas.netlify.app/)
+ * (c) 2021 TorchAtlas (https://bit.ly/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

repo/font-chooser/mod.json

@@ -7,7 +7,7 @@
   "authors": [
     {
       "name": "TorchAtlas",
-      "homepage": "https://torchatlas.netlify.app/",
+      "homepage": "https://bit.ly/torchatlas/",
       "avatar": "https://avatars.githubusercontent.com/u/12666855"
     }
   ],

repo/menu/client.mjs

@@ -6,6 +6,8 @@
 
 '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);
 
@@ -30,7 +32,7 @@ export default async function ({ env, fs, storage, registry, web }, db) {
 
   const notifications = {
     cache: await storage.get(['notifications'], []),
-    provider: [registry.welcomeNotification, ...(await fs.getJSON(registry.notificationsURL))],
+    provider: await fs.getJSON(notificationsURL),
     count: (await registry.errors()).length,
   };
   for (const notification of notifications.provider) {

repo/menu/components.mjs

@@ -7,7 +7,7 @@
 'use strict';
 
 import { fmt, web, registry, components } from '../../api/_.mjs';
-import { notifications } from './launcher.mjs';
+import { notifications } from './notifications.mjs';
 const profileDB = await registry.profileDB();
 
 export const modComponents = {

repo/menu/launcher.mjs

@@ -1,90 +0,0 @@
-/*
- * notion-enhancer core: menu
- * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
- * (https://notion-enhancer.github.io/) under the MIT license
- */
-
-import * as api from '../../api/_.mjs';
-const { env, fs, storage, fmt, registry, web, components } = api;
-import { tw } from './styles.mjs';
-
-for (const mod of await registry.list((mod) => registry.enabled(mod.id))) {
-  for (const sheet of mod.css?.menu || []) {
-    web.loadStylesheet(`repo/${mod._dir}/${sheet}`);
-  }
-  for (let script of mod.js?.menu || []) {
-    script = await import(fs.localPath(`repo/${mod._dir}/${script}`));
-    script.default(api, await registry.db(mod.id));
-  }
-}
-const errors = await registry.errors();
-if (errors.length) {
-  console.log('[notion-enhancer] registry errors:');
-  console.table(errors);
-}
-
-export const notifications = {
-  $container: web.html`<div class="notifications-container"></div>`,
-  cache: await storage.get(['notifications'], []),
-  provider: [registry.welcomeNotification, ...(await fs.getJSON(registry.notificationsURL))],
-  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">
-          ${fmt.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);
-  },
-};
-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);
-}
-if (errors.length) {
-  notifications.add({
-    icon: 'alert-circle',
-    message: 'Failed to load mods (check console).',
-    color: 'red',
-  });
-}

repo/menu/markdown.css

@@ -28,12 +28,22 @@
   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: 0.4rem 0;
+  margin: 1px 0;
 }
 .markdown ol li {
   padding-left: 0.25rem;

repo/menu/menu.mjs

@@ -6,13 +6,33 @@
 
 'use strict';
 
-import './launcher.mjs';
-import './styles.mjs';
+import * as api from '../../api/_.mjs';
+import { notifications, $welcomeModal } from './notifications.mjs';
+const { env, fs, storage, registry, web, components } = api;
+
+for (const mod of await registry.list((mod) => registry.enabled(mod.id))) {
+  for (const sheet of mod.css?.menu || []) {
+    web.loadStylesheet(`repo/${mod._dir}/${sheet}`);
+  }
+  for (let script of mod.js?.menu || []) {
+    script = await import(fs.localPath(`repo/${mod._dir}/${script}`));
+    script.default(api, await registry.db(mod.id));
+  }
+}
+const errors = await registry.errors();
+if (errors.length) {
+  console.log('[notion-enhancer] registry errors:');
+  console.table(errors);
+  notifications.add({
+    icon: 'alert-circle',
+    message: 'Failed to load mods (check console).',
+    color: 'red',
+  });
+}
 
-import { env, fs, storage, registry, web, components } from '../../api/_.mjs';
-import { notifications } from './launcher.mjs';
 import { modComponents, options } from './components.mjs';
 import * as router from './router.mjs';
+import './styles.mjs';
 
 const db = await registry.db('a6621988-551d-495a-97d8-3c568bca2e9e'),
   profileName = await registry.profileName(),
@@ -323,7 +343,14 @@ $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>`;
+  $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>`;
+$changelogNavItem.addEventListener('click', () => {
+  $welcomeModal.scrollTop = 0;
+  $welcomeModal.classList.add('modal-visible');
+});
 
 web.render(
   document.body,
@@ -339,7 +366,8 @@ web.render(
         $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>`
+        web.html`<a href="https://discord.gg/sFWPXtA" target="_blank" class="nav-item">community</a>`,
+        $changelogNavItem
       ),
       $main
     ),

repo/menu/notifications.mjs

@@ -0,0 +1,150 @@
+/*
+ * notion-enhancer core: menu
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+import { env, fs, storage, fmt, web, components } from '../../api/_.mjs';
+import { tw } from './styles.mjs';
+
+const notificationsURL = 'https://notion-enhancer.github.io/notifications.json';
+export const notifications = {
+  $container: web.html`<div class="notifications-container"></div>`,
+  cache: await storage.get(['notifications'], []),
+  provider: await fs.getJSON(notificationsURL),
+  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">
+          ${fmt.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);
+  },
+};
+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);
+}
+
+const $welcomeModalButton = web.html`<button type="button" class="modal-button">
+    Accept & Continue
+  </button>`;
+export const $welcomeModal = web.render(
+  web.html`<div class="modal" role="dialog" aria-modal="true">
+    <div class="modal-overlay" aria-hidden="true"></div>
+  </div>`,
+  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">
+          <h3 class="modal-content-heading">welcome</h3>
+          <p>
+            hi! i'm dragonwocky, the creator of the notion-enhancer. if you're seeing this,
+            you've either installed the enhancer for the first time or just updated to a
+            new version. you should check out the
+            <a href="https://notion-enhancer.github.io/getting-started" class="link" target="_blank">getting started</a>
+            guide for a quick overview of how to use the enhancer. for extra support
+            or to chat with others who use the enhancer, you can join our
+            <a href="https://discord.com/invite/sFWPXtA" class="link" target="_blank">discord server</a>.
+          </p>
+          <p class="mt-1">
+            maintaining and updating the enhancer takes a lot of time and work.
+            if you would like to support future development of the enhancer, please consider
+            <a href="https://buy.stripe.com/00gdR93R6csIgDKeUV" class="link" target="_blank">making a donation</a>.
+          </p>
+          <h3 class="modal-content-heading">license</h3>
+          <p>
+            the enhancer is developed publicly on
+            <a href="https://github.com/notion-enhancer/" class="link" target="_blank">github</a>
+            as an open-source project under the
+            <a href="https://notion-enhancer.github.io/license" class="link" target="_blank">mit license</a>.
+            in summary:
+          </p>
+          <ul class="modal-content-list">
+            <li>you are free to use or modify the enhancer in any way</li>
+            <li>
+              copyright of the enhancer and its parts goes to their respective
+              creators and must be attributed
+            </li>
+            <li>
+              though the enhancer aims for high quality,
+              it comes with no warranty and its creators are not
+              liable for any potential consequences of use
+              nor do they have any legal responsibility to provide
+              continued updates or support
+            </li>
+          </ul>
+          <h3 class="modal-content-heading">what's new</h3>
+          <div class="markdown">
+            ${fmt.md.render(await fs.getText('repo/menu/whats-new.md'))}
+          </div>
+        </div>
+      </div>`,
+    web.render(web.html`<div class="modal-actions"></div>`, $welcomeModalButton)
+  )
+);
+web.render(document.body, $welcomeModal);
+
+const lastAcceptedWelcome = await storage.get(['last_accepted_welcome']);
+if (lastAcceptedWelcome !== env.version) {
+  $welcomeModal.classList.add('modal-visible');
+}
+$welcomeModalButton.addEventListener('click', async () => {
+  $welcomeModal.classList.remove('modal-visible');
+  await storage.set(['last_accepted_welcome'], env.version);
+});

repo/menu/styles.mjs

@@ -38,12 +38,16 @@ const customClasses = {
   '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 flex flex-col`,
-  'nav': apply`px-4 py-3 flex flex-wrap items-center border-b border-divider`,
+  'nav': apply`pr-4 pl-2 py-3 flex flex-wrap items-center border-b border-divider`,
   'nav-notion': apply`flex items-center font-semibold text-xl cursor-pointer select-none mr-4
-      ml-4 sm:mb-4 md:w-full lg:(w-auto ml-0 mb-0)`,
-  'nav-notion-icon': apply`h-12 w-12 mr-5 sm:(h-6 w-6 mr-3)`,
-  'nav-item': apply`ml-4 px-3 py-2 rounded-md text-sm font-medium hover:bg-interactive-hover focus:bg-interactive-active`,
-  'nav-item-selected': apply`ml-4 px-3 py-2 rounded-md text-sm font-medium ring-1 ring-divider bg-notion-secondary`,
+      ml-4 my-4 w-full lg:w-auto`,
+  'nav-notion-icon': apply`h-6 w-6 mr-3`,
+  'nav-item': apply`ml-4 px-3 py-2 rounded-md text-sm font-medium hover:bg-interactive-hover focus:bg-interactive-active
+    mb-2 lg:mb-0`,
+  'nav-item-selected': apply`ml-4 px-3 py-2 rounded-md text-sm font-medium ring-1 ring-divider bg-notion-secondary
+    mb-2 lg:mb-0`,
+  'nav-changelog': apply`lg: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`,
@@ -88,6 +92,34 @@ const customClasses = {
   'search-container': apply`block mx-2.5 my-2.5 relative`,
   'search': apply`input pr-12`,
   'danger': apply`bg-red-paragraph text-red-paragraph-text`,
+  'link': apply`no-underline border-b border-foreground-secondary opacity-70 hover:opacity-90`,
+  'modal': apply`fixed 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-8 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`,
+    '& .markdown h4': apply`px-2 py-1 inline-block rounded-md bg-tag text-tag-text`,
+  },
+  'modal-content-heading': apply`mt-2 text-lg font-bold`,
+  'modal-content-list': {
+    '@apply': apply`list-disc pl-5`,
+    '& li': apply`my-px`,
+  },
+  '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({
@@ -101,9 +133,10 @@ setup({
       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-popup': 'var(--theme--bg_card)',
+      'notion-card': 'var(--theme--bg_card)',
       'divider': 'var(--theme--ui_divider)',
       'input': 'var(--theme--ui_input)',
       'icon': 'var(--theme--icon)',

repo/menu/whats-new.md

@@ -0,0 +1,77 @@
+a complete rework of the enhancer, with new features and a port to the browser as a chrome extension.
+
+#### new
+
+- cross-environment and properly documented api to replace helpers.
+- cross-environment mod loader structure.
+- "integrations", a category of mods that can access/use an unofficial notion api.
+- notifications sourced from an online endpoint for sending global user alerts.
+- simplify user installations by depending on the chrome web store and [notion-repackaged](https://github.com/notion-enhancer/notion-repackaged).
+- separate menu profiles for mod configurations.
+- a hotkey option type that allows typing in/pressing a hotkey to enter it, instead of typing.
+- a rainbow indentation lines style.
+- border & background style options for the code line numbers extension.
+
+#### improved
+
+- split the core mod into separate mods for specific features.
+- theming variables that are applied more specifically, less laggy, and less complicated.
+- merged bracketed-links into tweaks.
+- a redesigned menu with nicer ui, separate categories for mods and a sidebar for configuration.
+- simplified and smoothened the side panel + moved it to the core so any mod can hook into it.
+- font chooser option for heading fonts.
+- renamed "property-layout" to "collapsible properties", added per-page memory of collapse state.
+- chevron icon instead of arrow for scroll to top.
+- moved word counter to display in the side panel instead of within the page,
+  implemented a more accurate word counter method.
+- the topbar icons extension defaults to the notion default topbar icons for comment/updates/favorite/more,
+  but can revert them to text (it still adds a custom icon for the share button).
+- relative indenting in outliner.
+- rtl support for toggles, indentation lines, table of contents and databases + force inline math to ltr.
+- replaced the "truncated table titles" extension with a "truncated titles" extension
+  with an option to truncate timeline item titles.
+- renamed "notion icons" to "icon sets" with new support for uploading/reusing custom icons
+  directly within the icon picker.
+
+#### removed
+
+- integrated scrollbar tweak (notion now includes by default).
+- js insert. css insert moved to tweaks mod.
+- majority of layout and font size variables - better to leave former to notion and use `ctrl +`/`ctrl -` for latter.
+- the "panel sites" extension, due to it's limited/buggy functionality and incompatibility with reimplementation.
+
+#### fixed
+
+- bypass csp restrictions.
+- many. like many many. all the bugfixes. (mostly a side effect of completely rewriting everything,
+  but reported extension-specific bugs were all intentionally fixed.)
+
+#### themes
+
+- "nord" = an arctic, north-bluish color palette.
+- "gruvbox light" = a sepia, 'retro groove' palette based on the vim theme of the same name.
+- "gruvbox dark" = a gray, 'retro groove' palette based on the vim theme of the same name.
+- "light+" = a simple white theme that brightens coloured text and blocks,
+  with configurable accents (formerly littlepig light).
+- "playful purple" = a purple-shaded theme with bright highlights (formerly littlepig dark and gameish).
+- "pinky boom" = pinkify your life.
+
+#### extensions
+
+- "calendar scroll" = add a button to jump down to the current week in fullpage/infinite-scroll calendars.
+- "global block links" = easily copy the global link of a page or block.
+- "collapsible headers" = adds toggles to collapse header sections of pages.
+- "simpler databases" = adds a menu to inline databases to toggle ui elements.
+
+#### tweaks
+
+- wrap tables to page width. - hide "Type '/' for commands".
+- quote block quotation marks.
+- responsive columns breakpoint (%).
+- accented links.
+- full width pages.
+- image alignment (center/left/right).
+
+#### integrations
+
+- "quick note" = adds a hotkey & a button in the bottom right corner to jump to a new page in a notes database (target database id must be set).