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

font imports working in menu + font-chooser improvements

Browse Source
This commit is contained in:
dragonwocky 2020-09-02 11:10:01 +10:00
parent 6c7e1cec9d
commit 1e1808fd09
Signed by: dragonwocky
GPG Key ID: C7A48B7846AA706D
18 changed files with 126 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
CHANGELOG.md
View File

@ -11,27 +11,26 @@
a feature and cleanup update.
- improved: halved the number of css rules used -> much better performance.
- improved: font imports must be define in the `mod.js` so that they can also be used in
the enhancements menu.
- bugfix: enhancer settings should no longer reset on update (though this will not have
effect until the release after this one).
bugfix: blue select tags are no longer purple.
- bugfix: blue select tags are no longer purple.
- themes: "littlepig" (light + dark) = monospaced themes using emojis and colourful text.
- extension: "font chooser" = customize fonts. for each option, type in the name of the font you would like to use,
or leave it blank to not change anything.
// todo
<!-- - improved: extension menu will now receive style rules from extensions (prev. only got css vars) = necessary for
custom fonts. javascript is still not executable in the menu. (e.g. the "font chooser" will work, but only
because all it thing it does is change variables - if it were to try dynamically adding new font import rules
things things would break). -->
- improved: added individual text-colour rules for different background colours.
- improved: added variables for callout backgrounds.
- improved: tiling window-manager support (can hide titlebars entirely without dragarea/buttons).
- bugfix: made the open enhancements menu hotkey configurable and changed the default to `option/alt + e`
to remove conflict with the inline code highlight shortcut.
- bugfix: block-level text colours are now changed properly.
- bugfix: page titles now respond to small-text mode.
- bugfix: update property-layout to match notion changes again.
- extension: "calendar scroll" = a button to scroll down to the current week for you.
notion-deb-builder has been discovered to not generate an app.asar and so is no longer supported.
@ -40,6 +39,8 @@ notion-deb-builder has been discovered to not generate an app.asar and so is no
- bugfix: separate text highlight and select tag variables.
- bugfix: bypass CSP for the `enhancement://` protocol - was failing on some platforms?
> 📥 `npm i -g notion-enhancer@0.8.5`
### v0.8.4 (2020-08-29)
- bugfix: property-layout now works consistently with or without a banner.

25
DOCUMENTATION.md
View File

@ -54,6 +54,7 @@ module.exports = {
type: String in ['toggle', 'select', 'input', 'file'],
value: Boolean or Array<String> or String or Number or null
}>,
fonts: Array<String> of font_urls,
hacks?: {
[k: 'insert-point' (e.g. 'main/createWindow.js')]: function (
store, // used for configuration and persisting of data (explanation below).
@ -63,16 +64,17 @@ module.exports = {
};
```
| key | value | type |
| ------- | ----------------------------------------------------------------------------------------------- | ---------------------- |
| id | **required:** uuidv4 - generate a new one [here](https://www.uuidgenerator.net) | _string_ |
| name | **required:** short name (e.g. `'ocean theme'`) | _string_ |
| tags | **required:** categories/type (e.g. `'extension'`, `'theme'`, `'light'`, `'dark'`) | _array\<string\>_ |
| desc | **optional:** 1-3 sentence description of what the module is/does, with basic markdown support. | _string_ |
| version | **required:** semver (e.g. `'0.3.7'`) | _string_ |
| author | **required:** see below: original extension creator | _string_ or \<object\> |
| options | **optional:** see below: options made available in the enhancer menu (accessible from the tray) | _array\<object\>_ |
| hacks | **optional:** see below: code inserted at various points | _object_ |
| key | value | type |
| ------- | --------------------------------------------------------------------------------------------------------------------- | ---------------------- |
| id | **required:** uuidv4 - generate a new one [here](https://www.uuidgenerator.net) | _string_ |
| name | **required:** short name (e.g. `'ocean theme'`) | _string_ |
| tags | **required:** categories/type (e.g. `'extension'`, `'theme'`, `'light'`, `'dark'`) | _array\<string\>_ |
| desc | **optional:** 1-3 sentence description of what the module is/does, with basic markdown support. | _string_ |
| version | **required:** semver (e.g. `'0.3.7'`) | _string_ |
| author | **required:** see below: original extension creator | _string_ or \<object\> |
| options | **optional:** see below: options made available in the enhancer menu (accessible from the tray) | _array\<object\>_ |
| fonts | **optional:** a list of any font imports - should be `https://` or [`enhancement://`](#the-enhancement-protocol) urls | _array\<string\>_ |
| hacks | **optional:** see below: code inserted at various points | _object_ |
> a module that with the primary function of being a hack should be tagged as an extension,
> while a module that has the primary function of adding styles should be tagged as a theme.
@ -174,6 +176,9 @@ the full/up-to-date list of variables and their default values can be found in t
these are all made possible by the core module. if you believe this set of variables is buggy or lacking in any way,
consider opening a pull request to fix those issues - please do not try and reinvent the wheel unnecessarily.
**want to import an external font or import an included font file? do that in the `mod.js` file, otherwise it**
**won't be used for the enhancements menu.**
### using variables
variables should be used without specifying which mode they are relevant to. for example:

5
mods/core/buttons.js
View File

@ -7,13 +7,13 @@
'use strict';
module.exports = (store) => {
const electron = require('electron'),
const helpers = require('../../pkg/helpers.js'),
path = require('path'),
fs = require('fs-extra'),
browser = require('electron').remote.getCurrentWindow(),
is_mac = process.platform === 'darwin',
buttons = {
element: document.createElement('div'),
element: helpers.createElement('<div class="window-buttons-area"></div>'),
insert: [
'alwaysontop',
...(store().frameless && !is_mac
@ -77,7 +77,6 @@ module.exports = (store) => {
};
(async () => {
buttons.element.className = 'window-buttons-area';
for (let btn of buttons.insert) {
buttons.element.innerHTML += `<button class="window-button" id="btn-${btn}">${await buttons.icons[
btn

5
mods/core/client.js
View File

@ -40,8 +40,9 @@ module.exports = (store, __exports) => {
if (store().frameless) {
document.body.classList.add('frameless');
// draggable area
const dragarea = document.createElement('div');
dragarea.className = 'window-dragarea';
const dragarea = helpers.createElement(
'<div class="window-dragarea"></div>'
);
document.querySelector('.notion-topbar').prepend(dragarea);
document.documentElement.style.setProperty(
'--configured--dragarea_height',

36
mods/core/menu.js
View File

@ -47,15 +47,10 @@ window['__start'] = async () => {
document.body.style.setProperty(style[0], style[1]);
});
function createElement(html) {
const template = document.createElement('template');
template.innerHTML = html.trim();
return template.content.firstElementChild;
}
function createAlert(type, message) {
if (!type)
throw Error('<notion-enhancer> @ createAlert: no alert type specified');
const el = createElement(`
const el = helpers.createElement(`
<section class="${type}" role="alert">
<p>${message}</p>
</section>
@ -152,7 +147,9 @@ window['__start'] = async () => {
document
.querySelector('#colorpicker')
.appendChild(createElement('<button class="close-modal"></button>'));
.appendChild(
helpers.createElement('<button class="close-modal"></button>')
);
document.querySelectorAll('#popup .close-modal').forEach((el) =>
el.addEventListener('click', (event) => {
$popup.classList.remove('visible');
@ -195,7 +192,7 @@ window['__start'] = async () => {
throw Error('<notion-enhancer> @ createTag: no tagname specified');
if (!onclick)
throw Error('<notion-enhancer> @ createTag: no action specified');
const el = createElement(
const el = helpers.createElement(
`<span class="selected" ${
color ? `style="--tag_color: ${color}" ` : ''
}tabindex="0">${tagname}</span>`
@ -345,7 +342,7 @@ window['__start'] = async () => {
</label>
`;
}
$opt = createElement(`<p class="${opt.type}">${$opt}</p>`);
$opt = helpers.createElement(`<p class="${opt.type}">${$opt}</p>`);
if (opt.type === 'color') {
$opt
.querySelector(`#${opt.type}_${id}--${opt.key}`)
@ -377,18 +374,13 @@ window['__start'] = async () => {
? 1
: a.name.localeCompare(b.name)
)) {
// mod styling - necessary for fonts
// if (
// fs.pathExistsSync(path.resolve(`${__dirname}/../${mod.dir}/styles.css`))
// ) {
// document
// .querySelector('head')
// .appendChild(
// createElement(
// `<link rel="stylesheet" href="enhancement://${mod.dir}/styles.css">`
// )
// );
// }
for (let fonts of mod.fonts || []) {
document
.querySelector('head')
.appendChild(
helpers.createElement(`<link rel="stylesheet" href="${fonts}">`)
);
}
const enabled = store('mods', { [mod.id]: { enabled: false } })[mod.id]
.enabled,
@ -400,7 +392,7 @@ window['__start'] = async () => {
link: `https://github.com/${mod.author}`,
avatar: `https://github.com/${mod.author}.png`,
};
mod.elem = createElement(`
mod.elem = helpers.createElement(`
<section class="${
mod.tags.includes('core') || enabled ? 'enabled' : 'disabled'
}" id="${mod.id}">

136
mods/font-chooser/mod.js
View File

@ -1,95 +1,59 @@
/*
* font chooser
* (c) 2020 torchatlas (https://bit.ly/torchatlas)
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* under the MIT license
*/
'use strict';
module.exports = {
id: 'e0d8d148-45e7-4d79-8313-e7b2ad8abe16',
tags: ['extension'],
name: 'font chooser',
desc: 'customize fonts. for each option, type in the name of the font you would like to use, or leave it blank to not change anything.',
version: '0.1.0',
author: 'torchatlas',
options: [
{
key: 'sansSerif',
label: 'Sans Serif and UI',
type: 'input',
value: '',
},
{
key: 'serif',
label: 'Serif',
type: 'input',
value: ''
},
{
key: 'mono',
label: 'Monospace',
type: 'input',
value: ''
},
{
key: 'code',
label: 'Code',
type: 'input',
value: ''
}
],
hacks: {
'renderer/preload.js'(store, __exports) {
document.addEventListener('readystatechange', (event) => {
if (document.readyState !== 'complete') return false;
if (store().sansSerif != '') {
document.documentElement.style.setProperty(
'--theme_dark--font_sans',
store().sansSerif
);
document.documentElement.style.setProperty(
'--theme_light--font_sans',
store().sansSerif
);
}
if (store().serif != '') {
document.documentElement.style.setProperty(
'--theme_dark--font_serif',
store().serif
);
document.documentElement.style.setProperty(
'--theme_light--font_serif',
store().serif
);
}
if (store().mono != '') {
document.documentElement.style.setProperty(
'--theme_dark--font_mono',
store().mono
);
document.documentElement.style.setProperty(
'--theme_light--font_mono',
store().mono
);
}
if (store().code != '') {
document.documentElement.style.setProperty(
'--theme_dark--font_code',
store().code
);
document.documentElement.style.setProperty(
'--theme_light--font_code',
store().code
);
}
});
}
}
}
id: 'e0d8d148-45e7-4d79-8313-e7b2ad8abe16',
tags: ['extension'],
name: 'font chooser',
desc:
'customize fonts. for each option, type in the name of the font you would like to use, or leave it blank to not change anything.',
version: '0.1.1',
author: 'torchatlas',
options: [
{
key: 'sans',
label: 'sans-serif (inc. ui):',
type: 'input',
value: '',
},
{
key: 'serif',
label: 'serif:',
type: 'input',
value: '',
},
{
key: 'mono',
label: 'monospace:',
type: 'input',
value: '',
},
{
key: 'code',
label: 'code:',
type: 'input',
value: '',
},
],
hacks: {
'renderer/preload.js'(store, __exports) {
const attempt_interval = setInterval(enhance, 500);
async function enhance() {
if (!document.querySelector('.notion-app-inner')) return;
clearInterval(attempt_interval);
for (let style of ['sans', 'serif', 'mono', 'code']) {
if (!store()[style]) return;
document
.querySelector('.notion-app-inner')
.style.setProperty(`--theme--font_${style}`, store()[style]);
}
}
},
},
};

5
mods/gameish/mod.js
View File

@ -12,11 +12,14 @@ module.exports = {
tags: ['theme', 'dark'],
name: 'gameish',
desc: 'a purple, "gamer-styled" theme with a blocky-font.',
version: '0.1.2',
version: '0.1.3',
author: {
name: 'LVL100ShrekCultist',
link: 'https://www.reddit.com/user/LVL100ShrekCultist/',
avatar:
'https://styles.redditmedia.com/t5_2js69j/styles/profileIcon_jvnzmo30fyq41.jpg',
},
fonts: [
'https://fonts.googleapis.com/css2?family=Baumans&family=Comfortaa&family=DM+Mono&family=Gruppo&family=Nova+Mono&family=Offside&family=Press+Start+2P&family=Righteous&display=swap',
],
};

2
mods/gameish/styles.css
View File

@ -5,8 +5,6 @@
* under the MIT license
*/
@import url('https://fonts.googleapis.com/css2?family=Baumans&family=Comfortaa&family=DM+Mono&family=Gruppo&family=Nova+Mono&family=Offside&family=Press+Start+2P&family=Righteous&display=swap');
:root {
--theme_dark--main: #1e1c26;
--theme_dark--sidebar: #24222c;

3
mods/littilepig-dark/mod.js
View File

@ -12,11 +12,12 @@ module.exports = {
tags: ['theme', 'dark'],
name: 'littlepig dark',
desc: 'a purple monospaced theme using emojis and colourful text.',
version: '0.1.0',
version: '0.1.1',
author: {
name: 'Lizishan',
link: 'https://www.reddit.com/user/Lizishan/',
avatar:
'https://styles.redditmedia.com/t5_110nz4/styles/profileIcon_h1m3b16exoi51.jpg',
},
fonts: ['https://dev-cats.github.io/code-snippets/JetBrainsMono.css'],
};

2
mods/littilepig-dark/styles.css
View File

@ -5,8 +5,6 @@
* under the MIT license
*/
@import url('https://dev-cats.github.io/code-snippets/JetBrainsMono.css');
:root {
--theme_dark--main: #1e1c26;
--theme_dark--sidebar: #24222c;

3
mods/littlepig-light/mod.js
View File

@ -12,11 +12,12 @@ module.exports = {
tags: ['theme', 'light'],
name: 'littlepig light',
desc: 'a bright monospaced theme using emojis and colourful text.',
version: '0.1.0',
version: '0.1.1',
author: {
name: 'Lizishan',
link: 'https://www.reddit.com/user/Lizishan/',
avatar:
'https://styles.redditmedia.com/t5_110nz4/styles/profileIcon_h1m3b16exoi51.jpg',
},
fonts: ['https://dev-cats.github.io/code-snippets/JetBrainsMono.css'],
};

2
mods/littlepig-light/styles.css
View File

@ -5,8 +5,6 @@
* under the MIT license
*/
@import url('https://dev-cats.github.io/code-snippets/JetBrainsMono.css');
:root {
--theme_light--font_sans: 'JetBrains Mono';
--theme_light--font_mono: 'JetBrains Mono';

6
mods/neutral/mod.js
View File

@ -12,6 +12,10 @@ module.exports = {
tags: ['theme', 'dark'],
name: 'neutral',
desc: 'smoother colours and fonts, designed to be more pleasing to the eye.',
version: '0.1.1',
version: '0.1.2',
author: 'arecsu',
fonts: [
'https://rsms.me/inter/inter.css',
'https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap',
],
};

3
mods/neutral/styles.css
View File

@ -5,9 +5,6 @@
* under the MIT license
*/
@import url('https://rsms.me/inter/inter.css');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap');
:root {
/** dark **/

3
mods/pastel-dark/mod.js
View File

@ -12,11 +12,12 @@ module.exports = {
tags: ['theme', 'dark'],
name: 'pastel dark',
desc: 'a smooth-transition true dark theme with a hint of pastel.',
version: '0.1.1',
version: '0.1.2',
author: {
name: 'zenith_illinois',
link: 'https://www.reddit.com/user/zenith_illinois/',
avatar:
'https://cdn.discordapp.com/avatars/565182533940150283/54f36546ab586298a5df5c238cbaaa4b.png?size=128',
},
fonts: ['https://rsms.me/inter/inter.css'],
};

2
mods/pastel-dark/styles.css
View File

@ -5,8 +5,6 @@
* under the MIT license
*/
@import url('https://rsms.me/inter/inter.css');
:root {
--theme_dark--main: #0b0b0b;
--theme_dark--sidebar: #0f0f0f;

12
pkg/helpers.js
View File

@ -9,8 +9,7 @@
const os = require('os'),
path = require('path'),
fs = require('fs-extra'),
{ exec, execSync } = require('child_process'),
{ promisify } = require('util');
{ execSync } = require('child_process');
// used to differentiate between "enhancer failed" and "code broken" errors.
class EnhancerError extends Error {
@ -128,6 +127,7 @@ function getEnhancements() {
!mod.name ||
!mod.version ||
!mod.author ||
(mod.fonts && !mod.fonts.every((font) => typeof font === 'string')) ||
(mod.options &&
!mod.options.every((opt) =>
['toggle', 'select', 'input', 'file', 'color'].includes(opt.type)
@ -169,6 +169,13 @@ function readline() {
});
}
// construct a HTMLElement from a string
function createElement(html) {
const template = document.createElement('template');
template.innerHTML = html.trim();
return template.content.firstElementChild;
}
module.exports = {
EnhancerError,
is_wsl,
@ -178,4 +185,5 @@ module.exports = {
getEnhancements,
getJSON,
readline,
createElement,
};

14
pkg/loader.js
View File

@ -69,10 +69,16 @@ module.exports = function (__file, __exports) {
) {
document.addEventListener('readystatechange', (event) => {
if (document.readyState !== 'complete') return false;
const style = document.createElement('link');
style.rel = 'stylesheet';
style.href = `enhancement://${mod.dir}/styles.css`;
document.querySelector('head').appendChild(style);
for (let rules of [
`enhancement://${mod.dir}/styles.css`,
...(mod.fonts || []),
]) {
document
.querySelector('head')
.appendChild(
helpers.createElement(`<link rel="stylesheet" href="${rules}">`)
);
}
});
}
if (mod.hacks && mod.hacks[__file]) {