dragonwocky/notion-enhancer
1
0
Fork 0
mirror of https://github.com/notion-enhancer/notion-enhancer.git synced 2025-04-04 04:39:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

README feature list updates: new mods + options

Browse Source
This commit is contained in:
dragonwocky 2020-11-01 22:53:11 +11:00
parent 64c1e8bc5c
commit 27525428fc
Signed by: dragonwocky
GPG Key ID: C7A48B7846AA706D
9 changed files with 162 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -51,6 +51,7 @@ a flexibility update.
so system dark/light mode can be properly detected.
- bugfix: make ctrl+f popover shadow less extreme.
- bugfix: "weekly" calendar view name made case insensitive.
- bugfix: re-show hidden windows when clicking on the dock.
- tweak: sticky table/list rows.
- theme: "material ocean" = an oceanic colour palette.
- theme: "dracula" = a theme based on the popular dracula color palette

2
CONTRIBUTING.md
View File

@ -46,7 +46,7 @@ npm unlink
## conventions
the enhancer can be categorised as a **core** extended by included **modules**.
the enhancer is a **core** extended by included **modules**.
the core can be further split into the **installer** and the **modloader**.
modules are either **extensions** or **themes**.

26
DOCUMENTATION.md
View File

@ -51,9 +51,14 @@ module.exports = {
options?: Array<{
key: String,
label: String,
description?: String,
desc?: String,
type: String in ['toggle', 'select', 'input', 'file'],
value: Boolean or Array<String> or String or Number or null
value: Boolean or Array<String> or String or Number or null,
platformOverwrite?: {
darwin?: Boolean or Array<String> or String or Number or null,
win32?: Boolean or Array<String> or String or Number or null,
linux?: Boolean or Array<String> or String or Number or null,
}
}>,
fonts: Array<String> of font_urls,
hacks?: {
@ -95,14 +100,15 @@ if you'd rather customise this, pass this object:
#### options
| key | value | type |
| ----------- | ---------------------------------------------------------------------------------------- | ----------------- |
| key | **required:** key to save value to the mod `store` | _string_ |
| label | **required:** short description/name of option to be shown in menu | _string_ |
| description | **optional:** extended information to be shown on hover | _string_ |
| type | **required:** input type (see below) | _string_ |
| extensions | **optional:** allowed file extensions (only use with a file option), e.g. `['js', 'ts']` | _array\<string\>_ |
| value | **optional:** default or possible value/s for option | see below |
| key | value | type |
| ----------------- | ---------------------------------------------------------------------------------------- | ------------------------- |
| key | **required:** key to save value to the mod `store` | _string_ |
| label | **required:** short description/name of option to be shown in menu | _string_ |
| desc | **optional:** extended information to be shown on hover | _string_ |
| type | **required:** input type (see below) | _string_ |
| extensions | **optional:** allowed file extensions (only use with a file option), e.g. `['js', 'ts']` | _array\<string\>_ |
| value | **optional:** default or possible value/s for option | see below |
| platformOverwrite | **optional:** remove the option from the menu and force a value on a specific platform | _<object>_ as shown above |
| type | value |
| ------ | -------------------- |

139
README.md
View File

@ -46,7 +46,6 @@ then execute the following lines in the terminal:
```
sudo chmod -R a+wr /usr/local/lib/node_modules
sudo chmod -R a+wr /usr/local/bin
sudo chmod -R a+wr /Applications/Notion/Contents/Resources
sudo chmod -R a+wr /Applications/Notion.app/Contents/Resources
npm i -g notion-enhancer
```
@ -92,35 +91,37 @@ For more info, run any command with the `--help` flag:
Options:
-y, --yes : skip prompts (may overwrite data)
-n, --no : skip prompts (may cause failures)
-d, --dev : show detailed error messages (not recommended)
-d, --dev : show detailed error messages (for debug purposes)
-h, --help : display usage information
-v, --version : display version number
```
### faq
**the themes aren't working?**
**when will the update be out?**
i code this in my free time, in-between my other commitments. there are no ETAs.
**the themes aren't working?**
if you pick a dark theme it will only be applied if notion is in dark mode,
and if you pick a light theme it will only work if notion is in light mode.
do `CMD/CTRL+SHIFT+L` to toggle between them.
**is this against notion's terms of service? can i get in trouble for using it?**
definitely not! i contacted their support team to check, and the response was awesome:
"Thanks for taking the time to share this with us. Userscripts and userstyles are definitely
cool ideas and would be helpful for many users! ... I'll also share this with the rest of the
team to take to heart for future improvements."
> "Thanks for taking the time to share this with us. Userscripts and userstyles are definitely
> cool ideas and would be helpful for many users! ... I'll also share this with the rest of the
> team to take to heart for future improvements."
**how do i uninstall the enhancer?**
run `npm remove -g notion-enhancer`.
## features
most of the enhancer's functionality is split into configurable enhancement modules,
but some basic improvements are built in by default:
but some basic improvements necessary for things to work are built in by values:
- the notion:// url scheme/protocol is patched to work on linux.
- in-page columns are disabled/wrapped and pages are wider when
the window is narrower than 600px for improved responsiveness.
- a tray/menubar icon: links relevant to the enhancer + buttons to manage notion windows.
once applied, modules can be configured via the graphical menu,
@ -137,22 +138,54 @@ these include:
**description:** the cli, modloader, menu, & tray.
**author**: [dragonwocky](https://github.com/dragonwocky/)
**author:** [dragonwocky](https://github.com/dragonwocky/)
| option | type | default |
| ----------------------------- | --------------------------------------------------------------------------------------------- | -------------------------- |
| hide app on open | toggle | no |
| auto-maximise windows | toggle | no |
| close window to the tray | toggle | yes |
| integrated titlebar | toggle | yes |
| height of frameless dragarea | number input | `15` |
| tiling window manager mode | toggle | no |
| integrated scrollbars | toggle | yes |
| window display hotkey | [accelerator](https://github.com/electron/electron/blob/master/docs/api/accelerator.md) input | `CommandOrControl+Shift+A` |
| open enhancements menu hotkey | [accelerator](https://github.com/electron/electron/blob/master/docs/api/accelerator.md) input | `Alt+E` |
| option | extended description | type | values/defaults | platform-specific details |
| ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | -------------------------- | ------------------------- |
| auto-resolve theme conflicts | when a theme is enabled any other themes of the same mode (light/dark) will be disabled. | toggle | no | |
| hide app on open | app can be made visible by clicking the tray icon or using the hotkey. | toggle | no | |
| auto-maximise windows | whenever a window is un-hidden or is created it will be maximised. | toggle | no | |
| close window to the tray | pressing the × close button will hide the app instead of quitting it. it can be re-shown by clicking the tray icon or using the hotkey. | toggle | yes | |
| integrated titlebar | replace the native titlebar with buttons inset into the app. | toggle | yes | macOS: forced on |
| tiling window manager mode | completely remove the close/minimise/maximise buttons - this is for a special type of window manager. if you don't understand it, don't use it. | toggle | no | macOS: forced off |
| window display hotkey | used to toggle hiding/showing all app windows. | [accelerator](https://github.com/electron/electron/blob/master/docs/api/accelerator.md) input | `CommandOrControl+Shift+A` | |
| open enhancements menu hotkey | used to toggle opening/closing this menu while notion is focused. | [accelerator](https://github.com/electron/electron/blob/master/docs/api/accelerator.md) input | `Alt+E` | |
| values/defaults page id/url | every new tab/window that isn't opening a url via the notion:// protocol will load this page. to get a page link from within the app, go to the triple-dot menu and click "copy link". leave blank to just load the last page you opened. | text input | `Alt+E` | |
![](https://user-images.githubusercontent.com/16874139/93667628-c98cb100-faca-11ea-85e2-5fdca2a93a36.png)
### tabs
**tags:** #core #extension
**description:** have multiple notion pages open in a single window.
**author:** [dragonwocky](https://github.com/dragonwocky/)
| option | type | values/defaults |
| --------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
| tab select modifier (key+1, +2, +3, ... +9 and key+left/right arrows) | select | `Alt`, `Command`, `Control`, `Super`, `Alt+Shift`, `Command+Shift`, `Control+Shift`, `Super+Shift` |
| new tab keybinding | [accelerator](https://github.com/electron/electron/blob/master/docs/api/accelerator.md) input | `CommandOrControl+T` |
| close tab keybinding | [accelerator](https://github.com/electron/electron/blob/master/docs/api/accelerator.md) input | `CommandOrControl+W` |
### tweaks
**tags:** #core #extension
**description:** common style/layout changes.
**author:** [dragonwocky](https://github.com/dragonwocky/)
| option | extended description | type | values/defaults | platform-specific details |
| ---------------------------- | ---------------------------------------------------------------------------------------------------------- | ------------ | --------------- | ------------------------- |
| height of frameless dragarea | the rectangle added at the top of a window in "integrated titlebar" mode, used to drag/move the window. | number input | 15 | macOS: forced to 0 |
| width to wrap columns at | the size in pixels below which in-page columns are resized to appear full width so content isn't squished. | number input | 600 | |
| integrated scrollbars | use scrollbars that fit better into notion's ui instead of the default chrome ones. | toggle | yes | |
| snappy transitions | | toggle | no | |
| thicker bold text | | toggle | yes | |
| more readable line spacing | | toggle | no | |
| hide help button | | toggle | no | |
### always on top
**tags:** #extension
@ -160,7 +193,7 @@ these include:
**description:** add an arrow/button to show the notion window
on top of other windows even if it's not focused.
**author**: [dragonwocky](https://github.com/dragonwocky/)
**author:** [dragonwocky](https://github.com/dragonwocky/)
![](https://user-images.githubusercontent.com/16874139/93692700-ad742880-fb39-11ea-9650-57a61e15a37e.png)
@ -170,7 +203,7 @@ on top of other windows even if it's not focused.
**description:** render links surrounded with \[\[brackets]] instead of underlined.
**author**: [arecsu](https://github.com/arecsu/)
**author:** [arecsu](https://github.com/arecsu/)
![](https://user-images.githubusercontent.com/16874139/93692762-5458c480-fb3a-11ea-94e4-b7cbfab24274.png)
@ -192,6 +225,14 @@ on top of other windows even if it's not focused.
![](https://user-images.githubusercontent.com/16874139/93692788-ce894900-fb3a-11ea-8b65-8fc6c955fe6d.png)
### cherry cola
**tags:** #theme #dark
**description:** a delightfully plummy, cherry cola flavored theme.
**author:** [runargs](https://github.com/runargs)
### custom inserts
**tags:** #extension
@ -199,7 +240,7 @@ on top of other windows even if it's not focused.
**description:** link files for small client-side tweaks. (not sure how to do something? check out the
[tweaks](https://github.com/dragonwocky/notion-enhancer/blob/master/TWEAKS.md) collection.)
**author**: [dragonwocky](https://github.com/dragonwocky/)
**author:** [dragonwocky](https://github.com/dragonwocky/)
| option | type |
| --------------------- | ---- |
@ -214,12 +255,20 @@ on top of other windows even if it's not focused.
**author:** [dragonwocky](https://github.com/dragonwocky/)
| option | type | default |
| option | type | values/defaults |
| -------------- | ----- | ------------------ |
| primary colour | color | `rgb(177, 24, 24)` |
![](https://user-images.githubusercontent.com/16874139/93667588-84687f00-faca-11ea-86c9-7d05325a22a1.png)
### dracula
**tags:** #theme #dark
**description:** a theme based on the popular dracula color palette originally by zeno rocha and friends.
**author:** //todo
### emoji sets
**tags:** #extension
@ -228,7 +277,7 @@ on top of other windows even if it's not focused.
**author:** [dragonwocky](https://github.com/dragonwocky/)
| option | type | values |
| option | type | values/defaults |
| ------ | ------ | -------------------------------------------------------------------------------------------------------------------------- |
| style | select | twitter, apple, google, microsoft, samsung, whatsapp, facebook, joypixels, openmoji, emojidex, messenger, lg, htc, mozilla |
@ -242,6 +291,10 @@ on top of other windows even if it's not focused.
**author:** [arecsu](https://github.com/arecsu/)
| option | extended description | type | values/defaults |
| --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | --------------- |
| add padding to bottom of the page | will only take effect when the sidebar is hidden. aims to make the canvas as symmetrical/consistent as possible: if there is empty space on 3 sides, the 4th should follow. | toggle | on |
![](https://user-images.githubusercontent.com/16874139/93694447-2336bf00-fb4f-11ea-82f3-84c14e000602.png)
### font chooser
@ -272,16 +325,6 @@ the font you would like to use, or leave it blank to not change anything.
![](https://user-images.githubusercontent.com/16874139/93667677-1bcdd200-facb-11ea-89a2-f2a674d70d6c.png)
### hide help
**tags:** #extension
**description:** hide the help button if you don't need it.
**author**: [coryzibell](https://github.com/coryzibell/)
![](https://user-images.githubusercontent.com/16874139/93692964-01ccd780-fb3d-11ea-9c58-893d37c4a53b.png)
### littlepig dark
**tags:** #theme #dark
@ -292,6 +335,14 @@ the font you would like to use, or leave it blank to not change anything.
![](https://user-images.githubusercontent.com/16874139/93667715-55064200-facb-11ea-949e-3f7494dfa498.png)
### material ocean
**tags:** #theme #dark
**description:** an oceanic colour palette.
**author:** [blacksuan19](https://github.com/blacksuan19)
### littlepig light
**tags:** #theme #light
@ -350,6 +401,20 @@ the font you would like to use, or leave it blank to not change anything.
![](https://user-images.githubusercontent.com/16874139/93693026-bd8e0700-fb3d-11ea-9808-c259ef075d53.png)
### scroll to top
**tags:** #extension
**description:** add an arrow above the help button to scroll back to the top of a page.
**author:** [CloudHill](https://github.com/CloudHill/)
| option | type | values/defaults |
| --------------------------------------- | ------------ | --------------- |
| smooth scrolling | toggle | on |
| distance scrolled until button is shown | number input | 50 |
| unit to measure distance with | select | percent, pixels |
### weekly view
**tags:** #extension

2
bin.js
View File

@ -21,7 +21,7 @@ const cli = require('cac')('notion-enhancer'),
cli.option('-y, --yes', ': skip prompts (may overwrite data)');
cli.option('-n, --no', ': skip prompts (may cause failures)');
cli.option('-d, --dev', ': show detailed error messages');
cli.option('-d, --dev', ': show detailed error messages (for debug purposes)');
cli
.command('apply', ': add the enhancer to the notion app')

57
mods/core/enhancerMenu.js
View File

@ -403,10 +403,10 @@ window['__start'] = async () => {
).toString();
function createOption(opt, id) {
let $opt;
const description = opt.description
const desc = opt.desc
? question_icon.replace(
'<svg',
`<svg data-tooltip="${opt.description.replace(/"/g, '&quot;')}"`
`<svg data-tooltip="${opt.desc.replace(/"/g, '&quot;')}"`
)
: '';
switch (opt.type) {
@ -415,16 +415,14 @@ window['__start'] = async () => {
<input type="checkbox" id="${opt.type}_${id}--${opt.key}"
${store(id, { [opt.key]: opt.value })[opt.key] ? 'checked' : ''}/>
<label for="${opt.type}_${id}--${opt.key}">
<span class="name">${opt.label}${description}</span>
<span class="name">${opt.label}${desc}</span>
<span class="switch"><span class="dot"></span></span>
</label>
`;
break;
case 'select':
$opt = `
<label for="${opt.type}_${id}--${opt.key}">${
opt.label
}${description}</label>
<label for="${opt.type}_${id}--${opt.key}">${opt.label}${desc}</label>
<select id="${opt.type}_${id}--${opt.key}">
${opt.value
.map((val) => `<option value="${val}">${val}</option>`)
@ -434,9 +432,7 @@ window['__start'] = async () => {
break;
case 'input':
$opt = `
<label for="${opt.type}_${id}--${opt.key}">${
opt.label
}${description}</label>
<label for="${opt.type}_${id}--${opt.key}">${opt.label}${desc}</label>
<input type="${typeof value === 'number' ? 'number' : 'text'}" id="${
opt.type
}_${id}--${opt.key}">
@ -444,7 +440,7 @@ window['__start'] = async () => {
break;
case 'color':
$opt = `
<label for="${opt.type}_${id}--${opt.key}">${opt.label}${description}</label>
<label for="${opt.type}_${id}--${opt.key}">${opt.label}${desc}</label>
<input type="button" id="${opt.type}_${id}--${opt.key}">
`;
break;
@ -460,7 +456,7 @@ window['__start'] = async () => {
}>
<label for="${opt.type}_${id}--${opt.key}">
<span class="label">
<span class="name">${opt.label}${description}</span>
<span class="name">${opt.label}${desc}</span>
<button class="clear"></button>
</span>
<span class="choose">
@ -639,25 +635,6 @@ window['__start'] = async () => {
.forEach((checkbox) =>
checkbox.addEventListener('click', (event) => event.target.blur())
);
const $tooltip = document.querySelector('#tooltip');
document.querySelectorAll('[data-tooltip]').forEach((el) => {
el.addEventListener('mouseenter', (e) => {
$tooltip.innerText = el.getAttribute('data-tooltip');
$tooltip.classList.add('active');
});
el.addEventListener('mouseover', (e) => {
$tooltip.style.top = e.clientY - $tooltip.clientHeight + 'px';
$tooltip.style.left =
e.clientX < window.innerWidth / 2 ? e.clientX + 'px' : '';
$tooltip.style.right =
e.clientX > window.innerWidth / 2
? window.innerWidth - e.clientX + 'px'
: '';
});
el.addEventListener('mouseleave', (e) =>
$tooltip.classList.remove('active')
);
});
conflicts.check();
// draggable re-ordering
@ -750,4 +727,24 @@ window['__start'] = async () => {
.forEach((input) => (input.disabled = draggable.state));
search();
});
const $tooltip = document.querySelector('#tooltip');
document.querySelectorAll('[data-tooltip]').forEach((el) => {
el.addEventListener('mouseenter', (e) => {
$tooltip.innerText = el.getAttribute('data-tooltip');
$tooltip.classList.add('active');
});
el.addEventListener('mouseover', (e) => {
$tooltip.style.top = e.clientY - $tooltip.clientHeight + 'px';
$tooltip.style.left =
e.clientX < window.innerWidth / 2 ? e.clientX + 'px' : '';
$tooltip.style.right =
e.clientX > window.innerWidth / 2
? window.innerWidth - e.clientX + 'px'
: '';
});
el.addEventListener('mouseleave', (e) =>
$tooltip.classList.remove('active')
);
});
};

19
mods/core/mod.js
View File

@ -18,7 +18,7 @@ module.exports = {
{
key: 'autoresolve',
label: 'auto-resolve theme conflicts',
description:
desc:
'when a theme is enabled any other themes of the same mode (light/dark) will be disabled.',
type: 'toggle',
value: false,
@ -26,7 +26,7 @@ module.exports = {
{
key: 'openhidden',
label: 'hide app on open',
description:
desc:
'app can be made visible by clicking the tray icon or using the hotkey.',
type: 'toggle',
value: false,
@ -34,7 +34,7 @@ module.exports = {
{
key: 'maximized',
label: 'auto-maximise windows',
description:
desc:
'whenever a window is un-hidden or is created it will be maximised.',
type: 'toggle',
value: false,
@ -42,7 +42,7 @@ module.exports = {
{
key: 'close_to_tray',
label: 'close window to the tray',
description: `pressing the × close button will hide the app instead of quitting it.\
desc: `pressing the × close button will hide the app instead of quitting it.\
it can be re-shown by clicking the tray icon or using the hotkey.`,
type: 'toggle',
value: true,
@ -53,7 +53,7 @@ module.exports = {
{
key: 'frameless',
label: 'integrated titlebar',
description: `replace the native titlebar with buttons inset into the app.`,
desc: `replace the native titlebar with buttons inset into the app.`,
type: 'toggle',
value: true,
platformOverwrite: {
@ -63,7 +63,7 @@ module.exports = {
{
key: 'tiling_mode',
label: 'tiling window manager mode',
description: `completely remove the close/minimise/maximise buttons -
desc: `completely remove the close/minimise/maximise buttons -
this is for a special type of window manager. if you don't understand it, don't use it.`,
type: 'toggle',
value: false,
@ -71,22 +71,21 @@ module.exports = {
{
key: 'hotkey',
label: 'window display hotkey:',
description: 'used to toggle hiding/showing all app windows.',
desc: 'used to toggle hiding/showing all app windows.',
type: 'input',
value: 'CommandOrControl+Shift+A',
},
{
key: 'menu_toggle',
label: 'open enhancements menu hotkey:',
description:
'used to toggle opening/closing this menu while notion is focused.',
desc: 'used to toggle opening/closing this menu while notion is focused.',
type: 'input',
value: 'Alt+E',
},
{
key: 'default_page',
label: 'default page id/url:',
description: `every new tab/window that isn't opening a url via the notion://\
desc: `every new tab/window that isn't opening a url via the notion://\
protocol will load this page. to get a page link from within the app,\
go to the triple-dot menu and click "copy link".\
leave blank to just load the last page you opened.`,

4
mods/focus-mode/mod.js
View File

@ -19,8 +19,8 @@ module.exports = {
{
key: 'padded',
label: 'add padding to bottom of the page',
description: `will only take effect when the sidebar is hidden. aims to make the canvas\
as symmetrical/consistent as possible: if there is empty space on 3 sides, the 4th should follow.z`,
desc: `will only take effect when the sidebar is hidden. aims to make the canvas\
as symmetrical/consistent as possible: if there is empty space on 3 sides, the 4th should follow.`,
type: 'toggle',
value: true,
},

6
mods/tweaks/mod.js
View File

@ -18,7 +18,7 @@ module.exports = {
{
key: 'dragarea_height',
label: 'height of frameless dragarea:',
description: `the rectangle added at the top of a window in "integrated titlebar" mode,\
desc: `the rectangle added at the top of a window in "integrated titlebar" mode,\
used to drag/move the window.`,
type: 'input',
value: 15,
@ -29,7 +29,7 @@ module.exports = {
{
key: 'responsive_breakpoint',
label: 'width to wrap columns at:',
description: `the size in pixels below which in-page columns are resized to appear\
desc: `the size in pixels below which in-page columns are resized to appear\
full width so content isn't squished.`,
type: 'input',
value: 600,
@ -37,7 +37,7 @@ module.exports = {
{
key: 'smooth_scrollbars',
label: 'integrated scrollbars',
description:
desc:
"use scrollbars that fit better into notion's ui instead of the default chrome ones.",
type: 'toggle',
value: true,