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

upload progress of ported mods from extension repo

Browse Source
This commit is contained in:
dragonwocky 2021-10-03 19:47:11 +11:00
parent 95bf160ba9
commit d4b344900f
123 changed files with 3591 additions and 8617 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
repo/README.md Normal file
View File

@ -0,0 +1,3 @@
# repo
the collection of themes and extensions run by the notion enhancer

20
repo/alwaysontop/mod.js
View File

@ -1,20 +0,0 @@
/*
* always on top
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* under the MIT license
*/
'use strict';
// this is just a pseudo mod to "separate" the button
// from the core module - the core still handles actually
// making it work.
module.exports = {
id: '72886371-dada-49a7-9afc-9f275ecf29d3',
tags: ['extension'],
name: 'always on top',
desc:
"add an arrow/button to show the notion window on top of other windows even if it's not focused.",
version: '0.1.1',
author: 'dragonwocky',
};

24
repo/bracketed-links/app.css
View File

@ -1,24 +0,0 @@
/*
* bracketed links
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 Arecsu
* under the MIT license
*/
.notion-link-token span {
border-bottom: none !important;
}
.notion-link-token:before {
content: '[[';
opacity: 0.7;
transition: opacity 100ms ease-in;
}
.notion-link-token:after {
content: ']]';
opacity: 0.7;
transition: opacity 100ms ease-in;
}
.notion-link-token:hover::before,
.notion-link-token:hover::after {
opacity: 1;
}

16
repo/bracketed-links/mod.js
View File

@ -1,16 +0,0 @@
/*
* bracketed links
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* under the MIT license
*/
'use strict';
module.exports = {
id: '60e14feb-a81d-4ffb-9b12-7585d346bad8',
tags: ['extension'],
name: 'bracketed links',
desc: 'render links surrounded with [[brackets]] instead of __underlined__.',
version: '0.1.0',
author: 'arecsu',
};

9
repo/bypass-preview/app.css
View File

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

55
repo/bypass-preview/mod.js
View File

@ -1,55 +0,0 @@
/*
* bypass preview
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* under the MIT license
*/
'use strict';
module.exports = {
id: 'cb6fd684-f113-4a7a-9423-8f0f0cff069f',
tags: ['extension'],
name: 'bypass preview',
desc: 'go straight to the normal full view when opening a page.',
version: '0.1.2',
author: 'dragonwocky',
hacks: {
'renderer/preload.js'(store, __exports) {
document.addEventListener('readystatechange', (event) => {
if (document.readyState !== 'complete') return false;
let queue = [];
const observer = new MutationObserver((list, observer) => {
if (!queue.length) requestIdleCallback(() => handle(queue));
queue.push(...list);
});
observer.observe(document.body, {
childList: true,
subtree: true,
attributes: true,
});
let lastPageID;
function handle(list) {
queue = [];
const pageID = (location.search
.slice(1)
.split('&')
.map((opt) => opt.split('='))
.find((opt) => opt[0] === 'p') || [
'',
...location.pathname.split(/(-|\/)/g).reverse(),
])[1],
preview = document.querySelector(
'.notion-peek-renderer [style*="height: 45px;"] a'
);
if (!pageID) return;
if (preview) {
if (pageID === lastPageID) {
history.back();
} else preview.click();
} else lastPageID = pageID;
}
});
},
},
};

9
repo/bypass-preview@cb6fd684-f113-4a7a-9423-8f0f0cff069f/client.css Normal file
View File

@ -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;
}

33
repo/bypass-preview@cb6fd684-f113-4a7a-9423-8f0f0cff069f/client.mjs Normal file
View File

@ -0,0 +1,33 @@
/*
* 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 async function (api, db) {
const { web, components } = api;
await web.whenReady();
let _lastPage = {};
function getCurrentPage() {
if (web.queryParams().get('p')) return { type: 'preview', id: web.queryParams().get('p') };
return { type: 'page', id: location.pathname.split(/(-|\/)/g).reverse()[0] };
}
web.addDocumentObserver((event) => {
const currentPage = getCurrentPage();
if (currentPage.id !== _lastPage.id || currentPage.type !== _lastPage.type) {
const openAsPage = document.querySelector(
'.notion-peek-renderer [style*="height: 45px;"] a'
);
if (openAsPage) {
if (currentPage.id === _lastPage.id && currentPage.type === 'preview') {
history.back();
} else openAsPage.click();
}
_lastPage = getCurrentPage();
}
});
}

22
repo/bypass-preview@cb6fd684-f113-4a7a-9423-8f0f0cff069f/mod.json Normal file
View File

@ -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": []
}

79
repo/calendar-scroll/mod.js
View File

@ -1,79 +0,0 @@
/*
* calendar scroll
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* under the MIT license
*/
'use strict';
const { createElement } = require('../../pkg/helpers.js');
module.exports = {
id: 'b1c7db33-dfee-489a-a76c-0dd66f7ed29a',
tags: ['extension'],
name: 'calendar scroll',
desc:
'add a button to scroll down to the current week in fullpage/infinite-scroll calendars.',
version: '0.1.1',
author: 'dragonwocky',
hacks: {
'renderer/preload.js'(store, __exports) {
document.addEventListener('readystatechange', (event) => {
if (document.readyState !== 'complete') return false;
const attempt_interval = setInterval(enhance, 500);
function enhance() {
const notion_elem = document.querySelector('.notion-frame');
if (!notion_elem) return;
clearInterval(attempt_interval);
const button = createElement(
'<button id="calendar-scroll-to-week">Scroll</button>'
);
button.addEventListener('click', (event) => {
const collection_view = document.querySelector(
'.notion-collection-view-select'
);
if (!collection_view) return;
const day = [
...collection_view.parentElement.parentElement.parentElement.parentElement.getElementsByClassName(
'notion-calendar-view-day'
),
].find((day) => day.style.background);
if (!day) return;
const scroller = document.querySelector(
'.notion-frame .notion-scroller'
);
scroller.scroll({
top: day.offsetParent.offsetParent.offsetTop + 70,
});
setTimeout(
() =>
scroller.scroll({
top: day.offsetParent.offsetParent.offsetTop + 70,
}),
100
);
});
handle();
const observer = new MutationObserver(handle);
observer.observe(notion_elem, {
childList: true,
subtree: true,
});
function handle(list, observer) {
if (document.querySelector('#calendar-scroll-to-week')) return;
const arrow = document.querySelector(
'.notion-selectable.notion-collection_view_page-block .chevronLeft'
);
if (arrow)
arrow.parentElement.parentElement.insertBefore(
button,
arrow.parentElement
);
}
}
});
},
},
};

10
repo/calendar-scroll/app.css → repo/calendar-scroll@b1c7db33-dfee-489a-a76c-0dd66f7ed29a/client.css
View File

@ -1,11 +1,11 @@
/* /*
* calendar scroll * notion-enhancer: calendar-scroll
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/) * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* under the MIT license * (https://notion-enhancer.github.io/) under the MIT license
*/ */
#calendar-scroll-to-week { #calendar-scroll-to-week {
background: var(--theme--interactive_hover); background: var(--theme--button_hover);
border: 1px solid transparent; border: 1px solid transparent;
font-size: var(--theme--font_label-size); font-size: var(--theme--font_label-size);
color: var(--theme--text); color: var(--theme--text);
@ -17,5 +17,5 @@
} }
#calendar-scroll-to-week:hover { #calendar-scroll-to-week:hover {
background: transparent; background: transparent;
border: 1px solid var(--theme--interactive_hover); border: 1px solid var(--theme--button_hover);
} }

64
repo/calendar-scroll@b1c7db33-dfee-489a-a76c-0dd66f7ed29a/client.mjs Normal file
View File

@ -0,0 +1,64 @@
/*
* notion-enhancer core: bypass-preview
* (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/_.mjs';
const $button = web.createElement(
web.html`<button id="calendar-scroll-to-week">Scroll</button>`
);
$button.addEventListener('click', async (event) => {
let $day = document.querySelector('.notion-calendar-view-day[style*="background:"]');
while (!$day) {
const $toolbar = document.querySelector(
'.notion-calendar-view > :first-child > :first-child > :first-child'
),
year = +$toolbar.children[0].innerText.split(' ')[1],
month = {
'January': 0,
'February': 1,
'March': 2,
'April': 3,
'May': 4,
'June': 5,
'July': 6,
'August': 7,
'September': 8,
'October': 9,
'November': 10,
'December': 11,
}[$toolbar.children[0].innerText.split(' ')[0]],
now = new Date();
switch (true) {
case now.getFullYear() < year:
case now.getFullYear() === year && now.getMonth() < month:
$toolbar.children[3].click();
break;
case now.getFullYear() > year:
case now.getFullYear() === year && now.getMonth() > month:
$toolbar.children[5].click();
break;
default:
await new Promise((res, rej) => requestAnimationFrame(res));
$day = document.querySelector('.notion-calendar-view-day[style*="background:"]');
}
await new Promise((res, rej) => requestAnimationFrame(res));
}
const $scroller = document.querySelector('.notion-frame .notion-scroller');
$scroller.scroll({
top: $day.offsetParent.offsetParent.offsetTop + 70,
behavior: 'auto',
});
});
web.addDocumentObserver((event) => {
if (document.contains($button)) return;
const toolbar = document.querySelector(
'.notion-calendar-view > :first-child > :first-child > :first-child'
);
if (toolbar) toolbar.insertBefore($button, toolbar.children[2]);
});

22
repo/calendar-scroll@b1c7db33-dfee-489a-a76c-0dd66f7ed29a/mod.json Normal file
View File

@ -0,0 +1,22 @@
{
"name": "calendar-scroll",
"id": "b1c7db33-dfee-489a-a76c-0dd66f7ed29a",
"version": "0.2.0",
"description": "add a button to jump down to the current week in fullpage/infinite-scroll calendars.",
"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": []
}

12
repo/cherrycola/app.css
View File

@ -1,12 +0,0 @@
/*
* cherry cola
* (c) 2020 Alexa Baldon (https://github.com/runargs)
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* under the MIT license
*/
/* quotations as serif */
.notion-dark-theme .notion-quote-block {
font-family: Georgia, 'Times New Roman', Times, serif;
background-color: var(--cola-sec);
}

16
repo/cherrycola/mod.js
View File

@ -1,16 +0,0 @@
/*
* cherry cola
* (c) 2020 Alexa Baldon (https://github.com/runargs)
* under the MIT license
*/
'use strict';
module.exports = {
id: 'ec5c4640-68d4-4d25-aefd-62c7e9737cfb',
tags: ['theme', 'dark'],
name: 'cherry cola',
desc: 'a delightfully plummy, cherry cola flavored theme.',
version: '0.1.0',
author: 'runargs',
};

144
repo/cherrycola/variables.css
View File

@ -1,144 +0,0 @@
/*
* cherry cola
* (c) 2020 Alexa Baldon (https://github.com/runargs)
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* under the MIT license
*/
:root {
--cola-main: #180915;
--cola-sec: #1d0919;
--cola-tet: #492341;
--cola-info: #9b6890;
--cola-accent: #bf799b;
--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;
/* main */
--theme_dark--main: var(--cola-main);
--theme_dark--sidebar: var(--cola-sec);
--theme_dark--overlay: rgba(29, 9, 25, 0.5);
--theme_dark--dragarea: #210a1c;
--theme_dark--box-shadow: rgba(20, 0, 16, 0.2) 0px 0px 0px 1px,
rgba(20, 0, 16, 0.2) 0px 2px 4px;
--theme_dark--box-shadow_strong: rgba(20, 0, 16, 0.1) 0px 0px 0px 1px,
rgba(20, 0, 16, 0.2) 0px 3px 6px, rgba(20, 0, 16, 0.4) 0px 9px 24px;
/* scrollbar */
--theme_dark--scrollbar: var(--cola-sec);
--theme_dark--scrollbar_hover: var(--cola-accent);
/* database */
--theme_dark--card: var(--cola-sec);
--theme_dark--gallery: var(--cola-sec);
--theme_dark--select_input: var(--cola-tet);
--theme_dark--table-border: var(--cola-tet);
--theme_dark--ui-border: rgba(73, 35, 65, 0.7);
--theme_dark--interactive_hover: var(--cola-tet);
--theme_dark--button_close: var(--cola-accent);
/* select/hover/click */
--theme_dark--selected: rgba(78, 32, 69, 0.5);
--theme_dark--primary: var(--cola-accent);
--theme_dark--primary_hover: var(--cola-accent);
--theme_dark--primary_click: var(--cola-sec);
--theme_dark--primary_indicator: var(--cola-accent);
--theme_dark--option_active-background: var(--theme_dark--primary);
--theme_dark--option_hover-background: var(--theme_dark--primary_hover);
/* danger */
--theme_dark--danger_text: #eb5757;
--theme_dark--danger_border: rgba(235, 87, 87, 0.5);
/* default text colors */
--theme_dark--text: #ffffff;
--theme_dark--text_ui: var(--cola-info);
--theme_dark--text_ui_info: var(--cola-info);
/* text color options */
--theme_dark--text_gray: var(--cola-gray);
--theme_dark--text_brown: var(--cola-brown);
--theme_dark--text_orange: var(--cola-orange);
--theme_dark--text_yellow: var(--cola-yellow);
--theme_dark--text_green: var(--cola-green);
--theme_dark--text_blue: var(--cola-blue);
--theme_dark--text_purple: var(--cola-purple);
--theme_dark--text_pink: var(--cola-pink);
--theme_dark--text_red: var(--cola-red);
--theme_dark--select-text: var(--cola-main);
--theme_dark--select_gray: var(--cola-gray);
--theme_dark--select_brown: var(--cola-brown);
--theme_dark--select_brown-text: #ffffff;
--theme_dark--select_orange: var(--cola-orange);
--theme_dark--select_yellow: var(--cola-yellow);
--theme_dark--select_green: var(--cola-green);
--theme_dark--select_blue: var(--cola-blue);
--theme_dark--select_purple: var(--cola-purple);
--theme_dark--select_purple-text: #ffffff;
--theme_dark--select_pink: var(--cola-pink);
--theme_dark--select_red: var(--cola-red);
--theme_dark--select_red-text: #ffffff;
--theme_dark--line-text: var(--cola-main);
--theme_dark--line_gray: var(--cola-gray);
--theme_dark--line_brown: var(--cola-brown);
--theme_dark--line_orange: var(--cola-orange);
--theme_dark--line_yellow: var(--cola-yellow);
--theme_dark--line_green: var(--cola-green);
--theme_dark--line_blue: var(--cola-blue);
--theme_dark--line_purple: var(--cola-purple);
--theme_dark--line_pink: var(--cola-pink);
--theme_dark--line_red: var(--cola-red);
--theme_dark--bg-text: var(--theme_dark--select-text);
--theme_dark--bg_gray: var(--theme_dark--select_gray);
--theme_dark--bg_brown: var(--theme_dark--select_brown);
--theme_dark--bg_orange: var(--theme_dark--select_orange);
--theme_dark--bg_yellow: var(--theme_dark--select_yellow);
--theme_dark--bg_green: var(--theme_dark--select_green);
--theme_dark--bg_blue: var(--theme_dark--select_blue);
--theme_dark--bg_purple: var(--theme_dark--select_purple);
--theme_dark--bg_pink: var(--theme_dark--select_pink);
--theme_dark--bg_red: var(--theme_dark--select_red);
/* callout blocks */
--theme_dark--callout-text: var(--theme_dark--line-text);
--theme_dark--callout_gray: var(--theme_dark--line_gray);
--theme_dark--callout_brown: var(--theme_dark--line_brown);
--theme_dark--callout_orange: var(--theme_dark--line_orange);
--theme_dark--callout_yellow: var(--theme_dark--line_yellow);
--theme_dark--callout_green: var(--theme_dark--line_green);
--theme_dark--callout_blue: var(--theme_dark--line_blue);
--theme_dark--callout_purple: var(--theme_dark--line_purple);
--theme_dark--callout_pink: var(--theme_dark--line_pink);
--theme_dark--callout_red: var(--theme_dark--line_red);
/* incline/code text */
--theme_dark--code_inline-text: var(--cola-accent);
--theme_dark--code_inline-background: var(--cola-main);
--theme_dark--code-text: var(--theme_dark--text);
--theme_dark--code-background: var(--cola-sec);
--theme_dark--code_function: var(--theme_dark--text_blue);
--theme_dark--code_keyword: var(--theme_dark--text_pink);
--theme_dark--code_tag: var(--theme_dark--text_pink);
--theme_dark--code_operator: var(--theme_dark--text_yellow);
--theme_dark--code_important: var(--theme_dark--text_yellow);
--theme_dark--code_property: var(--theme_dark--text_pink);
--theme_dark--code_builtin: var(--theme_dark--text_yellow);
--theme_dark--code_attr-name: var(--theme_dark--text_yellow);
--theme_dark--code_comment: var(--theme_dark--text_gray);
--theme_dark--code_punctuation: var(--theme_dark--text_gray);
--theme_dark--code_doctype: var(--theme_dark--text_gray);
--theme_dark--code_number: var(--theme_dark--text_purple);
--theme_dark--code_string: var(--theme_dark--text_orange);
--theme_dark--code_attr-value: var(--theme_dark--text_orange);
}

27
repo/code-line-numbers/app.css
View File

@ -1,27 +0,0 @@
/*
* code line numbers
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 CloudHill
* under the MIT license
*/
.notion-code-block.line-numbers > div {
position: relative;
}
.code-numbered {
padding-left: 48px !important;
}
#code-line-numbers {
font-size: var(--theme--font_code-size);
font-family: var(--theme--font_code);
color: var(--theme--text_ui_info);
background: var(--theme--code-background);
text-align: right;
position: absolute;
left: 0;
right: calc(100% - 48px);
padding-right: 18px;
overflow: hidden;
pointer-events: none;
}

121
repo/code-line-numbers/mod.js
View File

@ -1,121 +0,0 @@
/*
* code line numbers
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 CloudHill
* under the MIT license
*/
'use strict';
const { createElement } = require('../../pkg/helpers.js');
module.exports = {
id: 'd61dc8a7-b195-465b-935f-53eea9efe74e',
tags: ['extension'],
name: 'code line numbers',
desc: 'adds line numbers to code blocks.',
version: '1.1.1',
author: 'CloudHill',
options: [
{
key: 'single_lined',
label: 'show line numbers on single-lined code blocks',
type: 'toggle',
value: false,
},
],
hacks: {
'renderer/preload.js'(store, __exports) {
document.addEventListener('readystatechange', (event) => {
if (document.readyState !== 'complete') return false;
let queue = [];
const observer = new MutationObserver((list, observer) => {
if (!queue.length) requestAnimationFrame(() => handle(queue));
queue.push(...list);
});
observer.observe(document.body, {
childList: true,
subtree: true,
});
const resizeObserver = new ResizeObserver(
(list, observer) => number(list[0].target)
);
function handle(list) {
queue = [];
for (let { addedNodes } of list) {
if (
addedNodes[0] &&
(
addedNodes[0].className === 'notion-page-content' ||
(
addedNodes[0].querySelector &&
addedNodes[0].querySelector('.notion-code-block.line-numbers')
)
)
) {
resizeObserver.disconnect();
const codeBlocks = document.querySelectorAll('.notion-code-block.line-numbers');
codeBlocks.forEach(block => {
number(block);
resizeObserver.observe(block);
});
}
}
}
function number(block) {
let codeLineNumbers = '';
let numbers = block.querySelector('#code-line-numbers');
if (!numbers) {
numbers = createElement(
'<span id="code-line-numbers"></span>'
);
const blockStyle = window.getComputedStyle(block.children[0]);
numbers.style.top = blockStyle.paddingTop;
numbers.style.bottom = blockStyle.paddingBottom;
block.append(numbers);
const temp = createElement('<span>A</span>');
block.firstChild.append(temp);
block.lineHeight = temp.getBoundingClientRect().height;
temp.remove();
}
const lines = block.firstChild.innerText.split(/\r\n|\r|\n/);
if (lines[lines.length - 1] === '') lines.pop();
let lineCounter = 0;
const wordWrap = block.firstChild.style.wordBreak === 'break-all';
for (let i = 0; i < lines.length; i++) {
lineCounter++;
codeLineNumbers += `${lineCounter}\n`;
if (wordWrap) {
const temp = document.createElement('span');
temp.innerText = lines[i];
block.firstChild.append(temp);
const lineHeight = temp.getBoundingClientRect().height;
temp.remove();
for (let j = 1; j < (lineHeight / block.lineHeight - 1); j++)
codeLineNumbers += '\n';
}
}
if (store().single_lined || codeLineNumbers.length > 2) {
block.firstChild.classList.add('code-numbered');
numbers.innerText = codeLineNumbers;
} else {
block.firstChild.classList.remove('code-numbered');
numbers.innerText = '';
}
}
});
},
},
};

86
repo/collapsible-headers/app.css
View File

@ -1,86 +0,0 @@
/*
* collapsible headers
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 CloudHill
* under the MIT license
*/
.notion-page-content .notion-selectable[collapsed] {
max-height: 0px;
overflow: hidden;
opacity: 0;
}
.notion-page-content .notion-selectable[collapsed] .notion-selectable {
pointer-events: none;
}
.collapse-header {
flex-grow: 0;
flex-shrink: 0;
align-self: center;
width: 24px;
height: 24px;
padding: 6px;
margin: 0 6px;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
cursor: pointer;
transition: 200ms ease-in;
}
.collapse-header:hover {
background: var(--theme--interactive_hover);
}
/* position: left */
.collapse-header:first-child {
margin-left: 2px;
}
/* position: right / inline */
.collapse-header:last-child {
opacity: 0;
}
/* show toggle on: collapsed, hover, focus */
[data-collapsed="true"] .collapse-header:last-child,
[data-collapsed]:hover .collapse-header:last-child,
[data-collapsed] :focus + .collapse-header:last-child {
opacity: 1;
}
.collapse-header svg {
width: 100%;
height: 100%;
transition: transform 200ms ease-out 0s;
}
/* position: left */
.collapse-header:first-child svg {
transform: rotateZ(90deg);
}
/* position: right / inline */
.collapse-header:last-child svg {
transform: rotateZ(270deg);
}
[data-collapsed="false"] .collapse-header svg {
transform: rotateZ(180deg);
}
/* position: inline */
[inline-toggle] {
position: relative;
overflow: hidden;
}
[inline-toggle] [placeholder] {
width: auto !important;
}
[inline-toggle] [placeholder]::after {
content: '';
position: absolute;
top: 0;
width: 100%;
height: 100%;
cursor: text;
}

475
repo/collapsible-headers/mod.js
View File

@ -1,475 +0,0 @@
/*
* collapsible headers
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 CloudHill
* under the MIT license
*/
'use strict';
const { createElement } = require('../../pkg/helpers.js');
module.exports = {
id: '548fe2d7-174a-44dd-88d8-35c7f9a093a7',
tags: ['extension'],
name: 'collapsible headers',
desc: 'adds toggles to collapse header sections.',
version: '1.0.0',
author: 'CloudHill',
options: [
{
key: 'toggle',
label: 'toggle position',
type: 'select',
value: ['left', 'right', 'inline'],
},
{
key: 'animate',
label: 'enable animation',
type: 'toggle',
value: true,
},
{
key: 'divBreak',
label: 'use divider blocks to break header sections',
type: 'toggle',
value: false,
},
],
hacks: {
'renderer/preload.js'(store, __exports) {
document.addEventListener('readystatechange', (event) => {
if (document.readyState !== 'complete') return false;
const attempt_interval = setInterval(enhance, 500);
function enhance() {
if (!document.querySelector('.notion-frame')) return;
clearInterval(attempt_interval);
if (!store().collapsed_ids) store().collapsed_ids = [];
window.addEventListener('hashchange', showSelectedHeader);
// add toggles to headers whenever blocks are added/removed
const contentObserver = new MutationObserver((list, observer) => {
list.forEach(m => {
let node = m.addedNodes[0] || m.removedNodes[0];
if (
(
node?.nodeType === Node.ELEMENT_NODE &&
(
node.className !== 'notion-selectable-halo' &&
!node.style.cssText.includes('z-index: 88;')
)
) &&
(
m.target.className === 'notion-page-content' ||
m.target.className.includes('notion-selectable')
)
) {
// if a collapsed header is removed
if (
node.dataset?.collapsed === 'true' &&
!node.nextElementSibling
) showHeaderContent(node);
initHeaderToggles();
}
})
});
// observe for page changes
let queue = [];
const pageObserver = new MutationObserver((list, observer) => {
if (!queue.length) requestAnimationFrame(() => process(queue));
queue.push(...list);
});
pageObserver.observe(document.body, {
childList: true,
subtree: true,
});
function process(list) {
queue = [];
for (let { addedNodes } of list) {
if (
addedNodes[0] &&
addedNodes[0].className === 'notion-page-content'
) {
showSelectedHeader();
initHeaderToggles();
contentObserver.disconnect();
contentObserver.observe(addedNodes[0], {
childList: true,
subtree: true,
});
}
}
}
// bind to ctrl + enter
document.addEventListener('keyup', e => {
const hotkey = {
key: 'Enter',
ctrlKey: true,
metaKey: false,
altKey: false,
shiftKey: false,
};
for (let prop in hotkey)
if (hotkey[prop] !== e[prop]) return;
// toggle active/selected headers
const active = document.activeElement;
let toggle;
if (
(toggle = active.nextElementSibling || active.previousElementSibling) &&
toggle.className === 'collapse-header'
) {
toggle.click();
} else {
toggleHeaders( getSelectedHeaders() );
}
});
function initHeaderToggles() {
const headerBlocks = document
.querySelectorAll('.notion-page-content [class*="header-block"]');
headerBlocks.forEach(header => {
const nextBlock = header.nextElementSibling;
// if header is moved
if (
header.dataset.collapsed &&
header.collapsedBlocks &&
header.collapsedBlocks[0] !== nextBlock
) {
showHeaderContent(header);
}
// if header has no content
if (
!nextBlock ||
getHeaderLevel(nextBlock) <= getHeaderLevel(header) ||
(
store().divBreak &&
nextBlock.classList &&
nextBlock.classList.contains('notion-divider-block')
)
) {
if (header.dataset.collapsed) {
delete header.dataset.collapsed;
const toggle = header.querySelector('.collapse-header');
if (toggle) toggle.remove();
}
return;
};
// if header already has a toggle
if (header.querySelector('.collapse-header')) return;
// add toggle to headers
const toggle = createElement(`
<div class="collapse-header">
<svg viewBox="0 0 100 100" class="triangle">
<polygon points="5.9,88.2 50,11.8 94.1,88.2" />
</svg>
</div>
`)
if (store().toggle === 'left') header.firstChild.prepend(toggle);
else header.firstChild.appendChild(toggle);
if (store().toggle === 'inline')
header.firstChild.setAttribute('inline-toggle', '');
toggle.header = header;
toggle.addEventListener('click', toggleHeaderContent);
// check store for header
header.dataset.collapsed = false;
if (store().collapsed_ids.includes(header.dataset.blockId))
collapseHeaderContent(header, false);
});
}
function toggleHeaderContent(e) {
e.stopPropagation();
const toggle = e.currentTarget;
const header = toggle.header;
const selected = getSelectedHeaders();
if (selected && selected.includes(header)) return toggleHeaders(selected);
if (header.dataset.collapsed === 'true') showHeaderContent(header);
else collapseHeaderContent(header);
}
function collapseHeaderContent(header, animate = true) {
if (
!header.className.includes('header-block') ||
header.dataset.collapsed === 'true'
) return;
header.dataset.collapsed = true;
// store collapsed headers
if (!store().collapsed_ids.includes(header.dataset.blockId)) {
store().collapsed_ids.push(header.dataset.blockId);
}
const headerLevel = getHeaderLevel(header);
const toggle = header.querySelector('.collapse-header');
header.collapsedBlocks = getHeaderContent(header);
header.collapsedBlocks.forEach(block => {
// don't collapse already collapsed blocks
if (block.hasAttribute('collapsed')) {
if (+(block.getAttribute('collapsed')) < headerLevel) {
block.setAttribute('collapsed', headerLevel);
if (block.storeAttributes) block.storeAttributes.header = header;
}
return;
};
block.storeAttributes = {
marginTop: block.style.marginTop,
marginBottom: block.style.marginBottom,
header: header,
}
block.style.marginTop = 0;
block.style.marginBottom = 0;
if (!store().animate) {
block.setAttribute('collapsed', headerLevel);
toggleInnerBlocks(block, true);
} else {
const height = block.offsetHeight;
block.storeAttributes.height = height + 'px';
block.setAttribute('collapsed', headerLevel);
if (!animate) toggleInnerBlocks(block, true);
else {
if (toggle) toggle.removeEventListener('click', toggleHeaderContent);
block.animate(
[
{
maxHeight: height + 'px',
opacity: 1,
marginTop: block.storeAttributes.marginTop,
marginBottom: block.storeAttributes.marginBottom,
},
{
maxHeight: (height - 100 > 0 ? height - 100 : 0) + 'px',
opacity: 0, marginTop: 0, marginBottom: 0,
},
{
maxHeight: 0, opacity: 0, marginTop: 0, marginBottom: 0,
}
],
{
duration: 300,
easing: 'ease-out'
}
).onfinish = () => {
if (toggle) toggle.addEventListener('click', toggleHeaderContent);
toggleInnerBlocks(block, true);
};
}
}
});
}
function showHeaderContent(header, animate = true) {
if (
!header.className.includes('header-block') ||
header.dataset.collapsed === 'false'
) return;
header.dataset.collapsed = false;
// remove header from store
const collapsed_ids = store().collapsed_ids;
if (collapsed_ids.includes(header.dataset.blockId)) {
store().collapsed_ids = collapsed_ids.filter(id => id !== header.dataset.blockId);
}
if (!header.collapsedBlocks) return;
const toggle = header.querySelector('.collapse-header');
showBlockHeader(header);
header.collapsedBlocks.forEach(block => {
// don't toggle blocks collapsed under other headers
if (
+(block.getAttribute('collapsed')) > getHeaderLevel(header) ||
!block.storeAttributes
) return;
block.style.marginTop = block.storeAttributes.marginTop;
block.style.marginBottom = block.storeAttributes.marginBottom;
if (!store().animate) {
block.removeAttribute('collapsed');
toggleInnerBlocks(block, false);
} else if (block.storeAttributes) {
toggleInnerBlocks(block, false);
if (!animate) block.removeAttribute('collapsed');
else {
const height = parseInt(block.storeAttributes.height);
if (toggle) toggle.removeEventListener('click', toggleHeaderContent);
block.animate(
[
{
maxHeight: 0, opacity: 0, marginTop: 0, marginBottom: 0,
},
{
maxHeight: (height - 100 > 0 ? height - 100 : 0) + 'px',
opacity: 1,
marginTop: block.storeAttributes.marginTop,
marginBottom: block.storeAttributes.marginBottom,
},
{
maxHeight: height + 'px',
opacity: 1,
marginTop: block.storeAttributes.marginTop,
marginBottom: block.storeAttributes.marginBottom,
}
],
{
duration: 300,
easing: 'ease-out'
}
).onfinish = () => {
if (toggle) toggle.addEventListener('click', toggleHeaderContent);
block.removeAttribute('collapsed');
};
}
}
delete block.storeAttributes;
});
delete header.collapsedBlocks;
}
// query for headers marked with the selection halo
function getSelectedHeaders() {
const selectedHeaders = Array.from(
document.querySelectorAll('[class*="header-block"] .notion-selectable-halo')
).map(halo => halo.parentElement);
if (selectedHeaders.length > 0) return selectedHeaders;
return null;
}
// toggle an array of headers
function toggleHeaders(headers) {
if (!headers) return;
headers = headers
.filter(h =>
!( h.hasAttribute('collapsed') && h.dataset.collapsed === 'false' )
);
if (headers && headers.length > 0) {
const collapsed = headers
.filter(h => h.dataset.collapsed === 'true').length;
headers.forEach(h => {
if (collapsed >= headers.length) showHeaderContent(h);
else collapseHeaderContent(h);
});
}
}
// get subsequent blocks
function getHeaderContent(header) {
let blockList = [];
let nextBlock = header.nextElementSibling;
while (nextBlock) {
if (
getHeaderLevel(nextBlock) <= getHeaderLevel(header) ||
(
store().divBreak &&
nextBlock.classList &&
nextBlock.classList.contains('notion-divider-block')
)
) break;
blockList.push(nextBlock);
nextBlock = nextBlock.nextElementSibling;
}
return blockList;
}
// toggles a header from one of its collapsed blocks
function showBlockHeader(block) {
if (
block?.hasAttribute('collapsed') &&
block.storeAttributes?.header
) {
showHeaderContent(block.storeAttributes.header);
return true;
}
return false;
}
function getHeaderLevel(header) {
if (!header.className || !header.className.includes('header-block')) return 9;
const subCount = header.classList[1].match(/sub/gi) || '';
let headerLevel = 1 + subCount.length;
return headerLevel;
}
// ensures that any columns and indented blocks are also hidden
// true => collapse, false => show
function toggleInnerBlocks(block, collapse) {
const header = block.storeAttributes?.header;
Array.from(
block.querySelectorAll('.notion-selectable')
).forEach(b => {
if (!b.getAttribute('collapsed')) {
if (collapse) {
if (!b.storeAttributes) {
b.storeAttributes = {
height: b.offsetHeight,
marginTop: b.style.marginTop,
marginBottom: b.style.marginBottom,
header: header,
};
}
b.setAttribute('collapsed', '')
}
else {
b.removeAttribute('collapsed');
delete b.storeAttributes;
}
}
});
}
function showSelectedHeader() {
setTimeout(() => {
const halo = document.querySelector('.notion-selectable-halo');
const header = halo?.parentElement;
if (!header?.className?.includes('header-block')) return;
// clear hash so that the same header can be toggled again
location.hash = '';
if (showBlockHeader(header)) {
setTimeout(
() => {
// is header in view?
var rect = header.getBoundingClientRect();
if (
(rect.top >= 0) &&
(rect.bottom <= window.innerHeight)
) return;
// if not, scroll to header
header.scrollIntoView({ behavior: 'smooth' });
}, 400
)
}
}, 0)
}
}
});
},
},
};

33
repo/components@36a2ffc9-27ff-480e-84a7-c7700a7d232d/mod.json Normal file
View File

@ -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 - will only work if a mod is making use of it."
}
]
}

65
repo/custom-inserts/mod.js
View File

@ -1,65 +0,0 @@
/*
* custom inserts
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* under the MIT license
*/
'use strict';
const { createElement } = require('../../pkg/helpers.js');
module.exports = {
id: 'b4b0aced-2059-43bf-8d1d-ccd757ee5ebb',
tags: ['extension'],
name: 'custom inserts',
desc: `link files for small client-side tweaks. (not sure how to do something? check out the
[tweaks](https://github.com/notion-enhancer/notion-enhancer/blob/master/TWEAKS.md) collection.)`,
version: '0.1.3',
author: 'dragonwocky',
options: [
{
key: 'css',
label: 'css insert',
type: 'file',
extensions: ['css'],
},
{
key: 'js',
label: 'client-side js insert',
type: 'file',
extensions: ['js'],
},
],
hacks: {
'renderer/preload.js'(store, __exports) {
const fs = require('fs-extra');
document.addEventListener('readystatechange', (event) => {
if (document.readyState !== 'complete') return false;
if (store().css) {
try {
document
.querySelector('head')
.appendChild(
createElement(
`<style type="text/css">${fs.readFileSync(
store().css
)}</style>`
)
);
} catch (err) {
console.warn('<custom-inserts> invalid css file... unsetting.');
store().css = '';
}
}
if (store().js) {
try {
require(store().js);
} catch (err) {
console.warn('<custom-inserts> invalid js file... unsetting.');
store().js = '';
}
}
});
},
},
};

52
repo/dark+/mod.js
View File

@ -1,52 +0,0 @@
/*
* dark+
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* under the MIT license
*/
'use strict';
module.exports = {
id: 'c86cfe98-e645-4822-aa6b-e2de1e08bafa',
tags: ['theme', 'dark'],
name: 'dark+',
desc: 'a vivid-colour near-black theme.',
version: '0.1.6',
author: 'dragonwocky',
options: [
{
key: 'primary',
label: 'primary colour',
type: 'color',
value: 'rgb(177, 24, 24)',
},
],
hacks: {
'renderer/preload.js'(store, __exports) {
const color = require('./one-color.js')(store().primary);
document.addEventListener('readystatechange', (event) => {
if (document.readyState !== 'complete') return false;
document.documentElement.style.setProperty(
'--theme_dark--selected',
color.lightness(0.35).alpha(0.2).cssa()
);
document.documentElement.style.setProperty(
'--theme_dark--primary',
color.hex()
);
document.documentElement.style.setProperty(
'--theme_dark--primary_hover',
color.lightness(0.5).hex()
);
document.documentElement.style.setProperty(
'--theme_dark--primary_click',
color.lightness(0.6).hex()
);
document.documentElement.style.setProperty(
'--theme_dark--primary_indicator',
color.lightness(0.4).hex()
);
});
},
},
};

2
repo/dark+/one-color.js
View File

File diff suppressed because one or more lines are too long

98
repo/dark+/variables.css
View File

@ -1,98 +0,0 @@
/*
* dark+
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 Alexa Baldon (https://github.com/runargs)
* under the MIT license
*/
:root {
--theme_dark--main: rgb(5, 5, 5);
--theme_dark--sidebar: rgb(1, 1, 1);
--theme_dark--dragarea: #000;
--theme_dark--box-shadow_strong: none;
--theme_dark--scrollbar: #23242599;
--theme_dark--scrollbar-border: transparent;
--theme_dark--scrollbar_hover: #37383899;
--theme_dark--card: rgb(8, 8, 8);
--theme_dark--gallery: rgba(26, 26, 26, 0.3);
--theme_dark--select_input: rgb(12, 12, 12);
--theme_dark--table-border: rgba(46, 46, 46, 0.7);
--theme_dark--ui-border: var(--theme_dark--table-border);
--theme_dark--interactive_hover:rgba(55, 56, 56, 0.3);
--theme_dark--option_hover-background: rgb(32, 32, 32);
--theme_dark--text: rgb(228, 228, 228);
--theme_dark--text_ui: rgba(211, 211, 211, 0.637);
--theme_dark--text_ui_info: rgba(211, 211, 211, 0.466);
--theme_dark--text_gray: rgba(151, 154, 155, 0.95);
--theme_dark--text_brown: rgb(147, 114, 100);
--theme_dark--text_orange: rgb(255, 163, 68);
--theme_dark--text_yellow: rgb(255, 220, 73);
--theme_dark--text_green: rgb(50, 169, 104);
--theme_dark--text_blue: rgb(82, 156, 202);
--theme_dark--text_purple: rgb(154, 109, 215);
--theme_dark--text_pink: rgb(226, 85, 161);
--theme_dark--text_red: rgb(218, 47, 35);
--theme_dark--select_gray: rgba(126, 128, 129, 0.5);
--theme_dark--select_brown: #50331f;
--theme_dark--select_orange: rgba(255, 155, 0, 0.58);
--theme_dark--select_yellow: rgba(183, 155, 0, 1);
--theme_dark--select_green: rgb(50, 129, 47);
--theme_dark--select_blue: rgba(0, 90, 146, 0.71);
--theme_dark--select_purple: rgba(91, 49, 148, 0.74);
--theme_dark--select_pink: rgba(243, 61, 159, 0.5);
--theme_dark--select_red: rgb(122, 20, 20);
--theme_dark--bg_gray: var(--theme_dark--select_gray);
--theme_dark--bg_brown: var(--theme_dark--select_brown);
--theme_dark--bg_orange: var(--theme_dark--select_orange);
--theme_dark--bg_yellow: var(--theme_dark--select_yellow);
--theme_dark--bg_green: var(--theme_dark--select_green);
--theme_dark--bg_blue: var(--theme_dark--select_blue);
--theme_dark--bg_purple: var(--theme_dark--select_purple);
--theme_dark--bg_pink: var(--theme_dark--select_pink);
--theme_dark--bg_red: var(--theme_dark--select_red);
--theme_dark--line_gray: rgba(126, 128, 129, 0.301);
--theme_dark--line_brown: #50331fad;
--theme_dark--line_orange: rgba(255, 153, 0, 0.315);
--theme_dark--line_yellow: rgba(183, 156, 0, 0.445);
--theme_dark--line_green: rgba(50, 129, 47, 0.39);
--theme_dark--line_blue: rgba(0, 90, 146, 0.521);
--theme_dark--line_purple: rgba(90, 49, 148, 0.349);
--theme_dark--line_pink: rgba(243, 61, 158, 0.301);
--theme_dark--line_red: rgba(122, 20, 20, 0.623);
--theme_dark--callout_gray: rgba(126, 128, 129, 0.089);
--theme_dark--callout_brown: #50331f59;
--theme_dark--callout_orange: rgba(255, 153, 0, 0.164);
--theme_dark--callout_yellow: rgba(183, 156, 0, 0.274);
--theme_dark--callout_green: rgba(50, 129, 47, 0.191);
--theme_dark--callout_blue: rgba(0, 90, 146, 0.294);
--theme_dark--callout_purple: rgba(90, 49, 148, 0.219);
--theme_dark--callout_pink: rgba(243, 61, 158, 0.191);
--theme_dark--callout_red: rgba(122, 20, 20, 0.376);
--theme_dark--code_inline-text: #7dc582;
--theme_dark--code_inline-background: rgb(8, 8, 8);
--theme_dark--code-background: rgb(8, 8, 8);
--theme_dark--code_function: #c7e1ff;
--theme_dark--code_keyword: #c397d8;
--theme_dark--code_tag: #82aed8;
--theme_dark--code_operator: rgb(166, 175, 201);
--theme_dark--code_important: #da265f;
--theme_dark--code_property: #82aed8;
--theme_dark--code_builtin: #ff6294;
--theme_dark--code_attr-name: #ff6294;
--theme_dark--code_comment: rgb(166, 175, 201);
--theme_dark--code_punctuation: rgb(166, 175, 201);
--theme_dark--code_doctype: rgb(166, 175, 201);
--theme_dark--code_number: #c397d8;
--theme_dark--code_string: #7dc582;
--theme_dark--code_attr-value: #7dc582;
}

97
repo/dracula/app.css
View File

@ -1,97 +0,0 @@
/*
* dracula
* (c) 2020 @mimishahzad386#5651
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 CloudHill
* 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
[style*='font-family: Fira Code, Menlo, Courier, monospace;'] {
filter: hue-rotate(170deg) !important;
}
.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;
}
.notion-dark-theme [class^="notion-outliner"] [style*="background: rgb(71, 76, 80);"] .triangle[fill] {
fill: var(--theme--text)
}

18
repo/dracula/mod.js
View File

@ -1,18 +0,0 @@
/*
* dracula
* (c) 2020 @mimishahzad386#5651
* (c) 2020 dracula
* under the MIT license
*/
'use strict';
module.exports = {
id: '033bff54-50ba-4cec-bdc0-b2ca7e307086',
tags: ['theme', 'dark'],
name: 'dracula',
desc:
'a theme based on the popular dracula color palette originally by zeno rocha and friends. ',
version: '0.2.0',
author: 'dracula',
};

195
repo/dracula/variables.css
View File

@ -1,195 +0,0 @@
/*
* dracula
* (c) 2020 @mimishahzad386#5651
* (c) 2020 dracula
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 Alexa Baldon (https://github.com/runargs)
* (c) 2020 CloudHill
* under the MIT license
*/
:root {
/* PALETTE */
--theme_dracula--bg: #282a36;
--theme_dracula--bg_lighter: #424450;
--theme_dracula--bg_light: #343746;
--theme_dracula--bg_dark: #21222c;
--theme_dracula--bg_darker: #191a21;
--theme_dracula--fg: #f8f8f2;
--theme_dracula--fg_dark: #babbba;
--theme_dracula--comment: #6272a4;
--theme_dracula--selection: #44475a;
--theme_dracula--line_highlight: #44475a75;
--theme_dracula--gray: var(--theme_dracula--fg_dark);
--theme_dracula--brown: #6272a4;
--theme_dracula--orange: #ffb86c;
--theme_dracula--yellow: #f1fa8c;
--theme_dracula--green: #50fa7b;
--theme_dracula--blue: #8be9fd;
--theme_dracula--purple: #bd93f9;
--theme_dracula--pink: #ff79c6;
--theme_dracula--red: #ff5555;
--theme_dracula--bg_gray: var(--theme_dracula--bg_light);
--theme_dracula--bg_brown: #465079;
--theme_dracula--bg_orange: #8a6345;
--theme_dracula--bg_yellow: #8e9656;
--theme_dracula--bg_green: #3f945f;
--theme_dracula--bg_blue: #498096;
--theme_dracula--bg_purple: #6a549b;
--theme_dracula--bg_pink: #8d4a7c;
--theme_dracula--bg_red: #943844;
/* MAIN */
--theme_dark--main: var(--theme_dracula--bg);
--theme_dark--sidebar: var(--theme_dracula--bg_dark);
--theme_dark--overlay: #0d0d0e80;
--theme_dark--dragarea: var(--theme_dracula--bg_dark);
--theme_dark--font_sans: -apple-system, BlinkMacSystemFont, 'Segoe UI',
Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji',
'Segoe UI Symbol';
--theme_dark--scrollbar: var(--theme_dracula--selection);
--theme_dark--scrollbar_hover: var(--theme_dracula--comment);
--theme_dark--card: var(--theme_dracula--bg_light);
--theme_dark--gallery: var(--theme_dracula--bg_dark);
--theme_dark--select_input: var(--theme_dracula--selection);
--theme_dark--table-border: var(--theme_dracula--bg_lighter);
--theme_dark--table-border_row: var(--theme_dark--table-border);
--theme_dark--table-border_column: var(--theme_dark--table-border);
--theme_dark--table-border_selected: var(--theme_dracula--purple);
--theme_dark--ui-border: var(--theme_dark--table-border);
--theme_dark--interactive_hover: var(--theme_dracula--line_highlight);
--theme_dark--button_close: var(--theme_dracula--red);
--theme_dark--selected: #bb8dfd3d;
--theme_dark--primary: var(--theme_dracula--purple);
--theme_dark--primary_hover: #b179ff;
--theme_dark--primary_click: #9f5ff8;
--theme_dark--primary_indicator: var(--theme_dracula--comment);
--theme_dark--primary_indicator_hover: var(--theme_dracula--bg_purple);
--theme_dark--option_active-background: var(--theme_dark--primary);
--theme_dark--option_hover-background: var(--theme_dark--bg_purple);
--theme_dark--danger_text: var(--theme_dracula--red);
--theme_dark--danger_border: var(--theme_dracula--bg_red);
/* TEXT */
--theme_dark--text: var(--theme_dracula--fg);
--theme_dark--text_ui: var(--theme_dracula--fg_dark);
--theme_dark--text_ui_info: var(--theme_dracula--comment);
--theme_dark--text_gray: var(--theme_dracula--gray);
--theme_dark--text_brown: var(--theme_dracula--brown);
--theme_dark--text_orange: var(--theme_dracula--orange);
--theme_dark--text_yellow: var(--theme_dracula--yellow);
--theme_dark--text_green: var(--theme_dracula--green);
--theme_dark--text_blue: var(--theme_dracula--blue);
--theme_dark--text_purple: var(--theme_dracula--purple);
--theme_dark--text_pink: var(--theme_dracula--pink);
--theme_dark--text_red: var(--theme_dracula--red);
/* SELECT */
--theme_dark--select-text: var(--theme_dracula--bg);
--theme_dark--select_gray: var(--theme_dracula--gray);
--theme_dark--select_brown: var(--theme_dracula--brown);
--theme_dark--select_brown-text: var(--theme_dracula--fg);
--theme_dark--select_orange: var(--theme_dracula--orange);
--theme_dark--select_yellow: var(--theme_dracula--yellow);
--theme_dark--select_green: var(--theme_dracula--green);
--theme_dark--select_blue: var(--theme_dracula--blue);
--theme_dark--select_purple: var(--theme_dracula--purple);
--theme_dark--select_pink: var(--theme_dracula--pink);
--theme_dark--select_red: var(--theme_dracula--red);
--theme_dark--select_red-text: var(--theme_dracula--fg);
/* BG */
--theme_dark--bg-text: var(--theme_dracula--fg);
--theme_dark--bg_gray: var(--theme_dracula--bg_gray);
--theme_dark--bg_brown: var(--theme_dracula--bg_brown);
--theme_dark--bg_orange: var(--theme_dracula--bg_orange);
--theme_dark--bg_yellow: var(--theme_dracula--bg_yellow);
--theme_dark--bg_green: var(--theme_dracula--bg_green);
--theme_dark--bg_blue: var(--theme_dracula--bg_blue);
--theme_dark--bg_purple: var(--theme_dracula--bg_purple);
--theme_dark--bg_pink: var(--theme_dracula--bg_pink);
--theme_dark--bg_red: var(--theme_dracula--bg_red);
/* LINE */
--theme_dark--line-text: var(--theme_dracula--fg);
--theme_dark--line_gray: var(--theme_dracula--bg_gray);
--theme_dark--line_brown: var(--theme_dracula--bg_brown);
--theme_dark--line_orange: var(--theme_dracula--bg_orange);
--theme_dark--line_yellow: var(--theme_dracula--bg_yellow);
--theme_dark--line_green: var(--theme_dracula--bg_green);
--theme_dark--line_blue: var(--theme_dracula--bg_blue);
--theme_dark--line_purple: var(--theme_dracula--bg_purple);
--theme_dark--line_pink: var(--theme_dracula--bg_pink);
--theme_dark--line_red: var(--theme_dracula--bg_red);
/* CALLOUT */
--theme_dark--callout-text: var(--theme_dracula--fg);
--theme_dark--callout_gray: var(--theme_dracula--bg_gray);
--theme_dark--callout_brown: var(--theme_dracula--bg_brown);
--theme_dark--callout_orange: var(--theme_dracula--bg_orange);
--theme_dark--callout_yellow: var(--theme_dracula--bg_yellow);
--theme_dark--callout_green: var(--theme_dracula--bg_green);
--theme_dark--callout_blue: var(--theme_dracula--bg_blue);
--theme_dark--callout_purple: var(--theme_dracula--bg_purple);
--theme_dark--callout_pink: var(--theme_dracula--bg_pink);
--theme_dark--callout_red: var(--theme_dracula--bg_red);
/* CODE */
--theme_dark--code_inline-text: var(--theme_dracula--green);
--theme_dark--code_inline-background: var(--theme_dracula--bg_light);
--theme_dark--code-text: var(--theme_dracula--fg);
--theme_dark--code-background: var(--theme_dracula--bg_light);
--theme_dark--code_function: var(--theme_dracula--green);
--theme_dark--code_parameter: var(--theme_dracula--orange);
--theme_dark--code_keyword: var(--theme_dracula--pink);
--theme_dark--code_constant: var(--theme_dracula--purple);
--theme_dark--code_tag: var(--theme_dracula--pink);
--theme_dark--code_operator: var(--theme_dracula--pink);
--theme_dark--code_important: var(--theme_dracula--pink);
--theme_dark--code_regex: var(--theme_dracula--red);
--theme_dark--code_property: var(--theme_dracula--blue);
--theme_dark--code_builtin: var(--theme_dracula--blue);
--theme_dark--code_class-name: var(--theme_dracula--blue);
--theme_dark--code_attr-name: var(--theme_dracula--green);
--theme_dark--code_attr-value: var(--theme_dracula--yellow);
--theme_dark--code_selector: var(--theme_dracula--pink);
--theme_dark--code_id: var(--theme_dracula--green);
--theme_dark--code_class: var(--theme_dracula--green);
--theme_dark--code_pseudo-element: var(--theme_dracula--green);
--theme_dark--code_pseudo-class: var(--theme_dracula--green);
--theme_dark--code_attribute: var(--theme_dracula--green);
--theme_dark--code_value: var(--theme_dracula--yellow);
--theme_dark--code_unit: var(--theme_dracula--pink);
--theme_dark--code_comment: var(--theme_dracula--comment);
--theme_dark--code_punctuation: var(--theme_dracula--text);
--theme_dark--code_annotation: var(--theme_dark--code_punctuation);
--theme_dark--code_decorator: var(--theme_dracula--green);
--theme_dark--code_doctype: var(--theme_dracula--fg_dark);
--theme_dark--code_number: var(--theme_dracula--purple);
--theme_dark--code_string: var(--theme_dracula--yellow);
--theme_dark--code_boolean: var(--theme_dracula--purple);
}

145
repo/emoji-sets/mod.js
View File

@ -1,145 +0,0 @@
/*
* emoji sets
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* under the MIT license
*/
'use strict';
module.exports = {
id: 'a2401ee1-93ba-4b8c-9781-7f570bf5d71e',
tags: ['extension'],
name: 'emoji sets',
desc: 'pick from a variety of emoji styles to use.',
version: '0.3.0',
author: 'dragonwocky',
options: [
{
key: 'style',
label: '',
type: 'select',
value: [
'twitter',
'apple',
'google',
'microsoft',
'samsung',
'whatsapp',
'facebook',
'joypixels',
'openmoji',
'emojidex',
'lg',
'htc',
'mozilla',
],
},
],
hacks: {
'renderer/preload.js'(store, __exports) {
let tweaked = false;
document.addEventListener('readystatechange', (event) => {
if (document.readyState !== 'complete') return false;
let queue = [];
const observer = new MutationObserver((list, observer) => {
if (!queue.length) requestAnimationFrame(handle);
queue.push(...list);
});
observer.observe(document.body, {
childList: true,
subtree: true,
characterData: true,
});
function handle() {
queue = [];
const isMac = process.platform === 'darwin',
native =
(store().style === 'microsoft' && process.platform === 'win32') ||
(store().style === 'apple' && isMac);
if (store().style !== (isMac ? 'apple' : 'twitter') || tweaked) {
if (isMac) {
if (native) {
document
.querySelectorAll('span[role="image"][aria-label]')
.forEach((el) => {
el.style.background = '';
el.style.color = 'currentColor';
});
} else {
document
.querySelectorAll('span[role="image"][aria-label]')
.forEach((el) => {
if (!el.style.background.includes(store().style)) {
el.style.background = `url(https://emojicdn.elk.sh/${el.getAttribute(
'aria-label'
)}?style=${store().style})`;
el.style.width = el.parentElement.style.fontSize;
el.style.backgroundSize = 'contain';
el.style.backgroundRepeat = 'no-repeat';
el.style.color = 'transparent';
}
});
}
} else {
document
.querySelectorAll(
'[src*="notion-emojis.s3"]:not(.notion-emoji)'
)
.forEach((el) => el.remove());
if (native) {
document.querySelectorAll('.notion-emoji').forEach((el) => {
if (
el.parentElement.querySelectorAll(
'span[role="image"][aria-label]'
).length !==
el.parentElement.querySelectorAll('.notion-emoji').length
) {
el.insertAdjacentHTML(
'beforebegin',
`<span
role="image"
aria-label="${el.getAttribute('alt')}"
style='font-family: "Apple Color Emoji", "Segoe UI Emoji",
NotoColorEmoji, "Noto Color Emoji", "Segoe UI Symbol",
"Android Emoji", EmojiSymbols; line-height: 1em;'
>${el.getAttribute('alt')}</span>`
);
el.style.display = 'none';
if (el.parentElement.getAttribute('contenteditable'))
el.remove();
} else if (
el.previousElementSibling.matches(
'span[role="image"][aria-label]'
)
) {
el.previousElementSibling.innerText = el.getAttribute(
'alt'
);
el.setAttribute('aria-label', el.getAttribute('alt'));
}
});
} else {
document.querySelectorAll('.notion-emoji').forEach((el) => {
el.parentElement
.querySelectorAll('span[role="image"][aria-label]')
.forEach((text) => text.remove());
el.style.display = 'inline-block';
if (!el.style.background.includes(store().style)) {
el.style.background = `url(https://emojicdn.elk.sh/${el.getAttribute(
'aria-label'
)}?style=${store().style})`;
el.style.backgroundSize = 'contain';
el.style.backgroundRepeat = 'no-repeat';
el.style.opacity = 1;
}
});
}
}
tweaked = true;
}
}
});
},
},
};

28
repo/focus-mode/app.css
View File

@ -1,28 +0,0 @@
/*
* focus mode
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 Arecsu
* under the MIT license
*/
.notion-sidebar-container[style*='width: 0px;'] + .notion-frame .notion-topbar {
opacity: 0 !important;
transition: opacity 200ms ease-in-out !important;
}
.notion-sidebar-container[style*='width: 0px;']
+ .notion-frame
.notion-topbar:hover {
opacity: 1 !important;
}
/* add space at the bottom of the main frame when sidebar is hidden
* -- matches space at top for titlebar */
[data-focusmode='padded'] .notion-dark-theme .notion-frame {
transition: height 100ms ease 0s;
}
[data-focusmode='padded']
.notion-sidebar-container[style*='width: 0px;']
+ .notion-frame {
height: calc(
100% - (var(--configured--dragarea_height, 10px) + 45px)
) !important;
}

36
repo/focus-mode/mod.js
View File

@ -1,36 +0,0 @@
/*
* focus mode
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 Arecsu
* under the MIT license
*/
'use strict';
module.exports = {
id: '5a08598d-bfac-4167-9ae8-2bd0e2ef141e',
tags: ['extension'],
name: 'focus mode',
desc:
'hide the titlebar/menubar if the sidebar is closed (will be shown on hover).',
version: '0.2.0',
author: 'arecsu',
options: [
{
key: 'padded',
label: 'add padding to bottom of the page',
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,
},
],
hacks: {
'renderer/preload.js': (store, __exports) => {
document.addEventListener('readystatechange', (event) => {
if (document.readyState !== 'complete') return false;
if (store().padded) document.body.dataset.focusmode = 'padded';
});
},
},
};

73
repo/font-chooser/mod.js
View File

@ -1,73 +0,0 @@
/*
* font chooser
* (c) 2020 torchatlas (https://bit.ly/torchatlas)
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 admiraldus (https://github.com/admiraldus)
* 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.<br/><br/>make sure the fonts you type are installed on your device.',
version: '0.3.0',
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: '',
},
{
key: 'quote',
label: 'quote:',
type: 'input',
value: '',
},
{
key: 'headings',
label: 'headings:',
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', 'quote', 'headings']) {
if (!store()[style]) continue;
document
.querySelector('.notion-app-inner')
.style.setProperty(`--theme--font_${style}`, store()[style]);
}
}
},
},
};

14
repo/gameish/app.css
View File

@ -1,14 +0,0 @@
/*
* gameish
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 u/LVL100ShrekCultist
* under the MIT license
*/
.notion-dark-theme
.notion-scroller.vertical.horizontal
.notion-table-view
.notion-selectable.notion-collection_view-block
> :first-child {
background: var(--theme--card) !important;
}

22
repo/gameish/mod.js
View File

@ -1,22 +0,0 @@
/*
* gameish
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 u/LVL100ShrekCultist
* under the MIT license
*/
'use strict';
module.exports = {
id: 'ad923617-e76e-408e-9f23-490738a3223f',
tags: ['theme', 'dark'],
name: 'gameish',
desc: 'a purple, "gamer-styled" theme with a blocky-font.',
version: '0.1.4',
author: {
name: 'LVL100ShrekCultist',
link: 'https://www.reddit.com/user/LVL100ShrekCultist/',
avatar:
'https://styles.redditmedia.com/t5_2js69j/styles/profileIcon_jvnzmo30fyq41.jpg',
},
};

71
repo/gameish/variables.css
View File

@ -1,71 +0,0 @@
/*
* gameish
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 u/LVL100ShrekCultist
* under the MIT license
*/
@import '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;
--theme_dark--dragarea: #19181f;
--theme_dark--font_sans: 'Offside', -apple-system, BlinkMacSystemFont,
'Segoe UI', Helvetica, 'Apple Color Emoji', Arial, sans-serif,
'Segoe UI Emoji', 'Segoe UI Symbol';
--theme_dark--font_mono: 'DM Mono', iawriter-mono, Nitti, Menlo, Courier,
monospace;
--theme_dark--font_code: 'DM Mono', SFMono-Regular, Consolas,
'Liberation Mono', Menlo, Courier, monospace;
--theme_dark--scrollbar: #221f29;
--theme_dark--scrollbar_hover: #312d3c;
--theme_dark--gallery: rgba(162, 162, 162, 0.01);
--theme_dark--table-border: rgba(148, 148, 184, 0.5);
--theme_dark--interactive_hover: #282632;
--theme_dark--selected: rgba(85, 68, 156, 0.3);
--theme_dark--primary: rgb(106, 47, 200);
--theme_dark--primary_hover: rgb(110, 48, 211);
--theme_dark--primary_click: rgb(117, 65, 200);
--theme_dark--primary_indicator: rgb(150, 84, 226);
--theme_dark--option_hover-background: rgb(20, 0, 51);
--theme_dark--danger_text: rgb(235, 87, 87);
--theme_dark--danger_border: rgba(235, 87, 87, 0.5);
--theme_dark--text: rgba(255, 255, 255, 0.9);
--theme_dark--text_ui: rgba(255, 255, 255, 0.6);
--theme_dark--text_ui_info: rgba(255, 255, 255, 0.4);
--theme_dark--text_gray: rgba(151, 154, 155, 0.95);
--theme_dark--text_brown: rgb(112, 87, 77);
--theme_dark--text_yellow: #ffe529;
--theme_dark--text_green: #64d97b;
--theme_dark--text_purple: #d43cc7;
--theme_dark--text_red: #d93939;
--theme_dark--select_red: rgba(216, 57, 46, 0.5);
--theme_dark--bg_brown: rgb(78, 57, 48);
--theme_dark--bg_orange: rgb(136, 80, 48);
--theme_dark--bg_yellow: #fbe2287c;
--theme_dark--bg_red: rgb(151, 62, 62);
--theme_dark--line_brown: var(--theme_dark--bg_brown);
--theme_dark--line_orange: var(--theme_dark--bg_orange);
--theme_dark--line_yellow: var(--theme_dark--bg_yellow);
--theme_dark--line_red: var(--theme_dark--bg_red);
--theme_dark--callout_brown: var(--theme_dark--bg_brown);
--theme_dark--callout_orange: var(--theme_dark--bg_orange);
--theme_dark--callout_yellow: var(--theme_dark--bg_yellow);
--theme_dark--callout_red: var(--theme_dark--bg_red);
--theme_dark--code_inline-text: #d9cbec;
--theme_dark--code_inline-background: #24222c;
}

101
repo/global-block-links/app.css
View File

@ -1,101 +0,0 @@
/*
* global linking blocks
* (c) 2020 admiraldus (https://github.com/admiraldus)
* under the MIT license
*/
/* ========== THE PAGE BUTTON ========== */
.admiraldus-glb-page-button
{
display: inline-flex;
align-items: center;
flex-shrink: 0;
border-radius: 3px;
height: 28px;
min-width: 0px;
padding-right: 8px;
padding-left: 6px;
white-space: nowrap;
font-size: 14px;
line-height: 1.2;
color: var(--theme--text);
cursor: pointer;
transition: background 20ms ease-in 0s;
user-select: none;
}
.admiraldus-glb-page-button:hover
{
background: var(--theme--interactive_hover);
box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border);
}
.admiraldus-glb-page-button > svg
{
backface-visibility: hidden;
display: block;
flex-shrink: 0;
margin-right: 6px;
height: 16px;
width: 16px;
fill: var(--theme--text_ui);
}
.admiraldus-glb-page-button > span {
opacity: 1;
transition: opacity .4s ease;
}
.admiraldus-glb-span-hide {
position: absolute;
top: -9999px;
opacity: 0 !important;
}
/* ========== THE BLOCK BUTTON ========== */
.admiraldus-glb-block-button {
display: flex;
align-items: center;
min-height: 28px;
width: 100%;
font-size: var(--theme--font_label-size);
line-height: 120%;
cursor: pointer;
transition: background 20ms ease-in 0s;
user-select: none;
}
.admiraldus-glb-block-button:hover
{
background: var(--theme--interactive_hover);
box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border);
}
.admiraldus-glb-block-button > svg {
backface-visibility: hidden;
display: flex;
display: block;
justify-content: center;
align-items: center;
flex-shrink: 0;
margin-left: 14px;
height: 17px;
width: 17px;
fill: var(--theme--text);
}
.admiraldus-glb-block-button > span {
margin-right: 14px;
margin-left: 8px;
min-width: 0px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1 1 auto;
}
/* ========== THE MENU ========== */
.--on-hover div[role="button"]:not(.admiraldus-glb-block-button) {
background: transparent !important;
box-shadow: none !important;
}

82
repo/global-block-links/helper.js
View File

@ -1,82 +0,0 @@
/*
* helper.js from admiraldus
* (c) 2020 admiraldus (https://github.com/admiraldus)
* use for your own modules but you have to attribute to me.
* under the MIT license
*/
'use strict';
const PATH = require('path');
const FS = require('fs-extra');
var x$ = {
sel: function(els, mode = false, base = null) {
base = base === null ? document : base;
return mode ? base.querySelectorAll(els) : base.querySelector(els);
},
cls: {
r: function(els, cls, mode = false, base = null) {
base = base === null ? document : base;
mode ? x$.sel(els, true).forEach((el) =>
el.classList.remove(cls)) : els.classList.remove(cls);
},
a: function(els, cls, mode = false, base = null) {
base = base === null ? document : base;
mode ? x$.sel(els, true).forEach((el) =>
el.classList.add(cls)) : els.classList.add(cls);
},
c: function(els, cls, mode = false, base = null) {
base = base === null ? document : base;
return mode ? x$.sel(els, true).forEach((el) =>
el.classList.contains(cls)) : els.classList.contains(cls);
},
},
svg: function(path) {
return FS.readFile(PATH.resolve(__dirname + path));
},
on: function(base, event, fn, flag = false) {
base.addEventListener(event, fn, flag);
},
sim: function(events, els) {
events.forEach((event) => els.dispatchEvent(
new MouseEvent(event, {
view: window,
bubbles: true,
cancelable: true,
buttons: 1,
})));
},
obs: function(fn, els, config) {
const observer = new MutationObserver(fn);
observer.observe(els, config);
},
clp: function(mode = true, value) {
switch (mode) {
case false:
navigator.clipboard.writeText(value);
break;
case true:
return navigator.clipboard.readText();
break;
}
},
el: function(html) {
const temp = document.createElement('template');
temp.innerHTML = html.trim();
return temp.content.firstElementChild;
},
};
module.exports = {
x$,
};

3
repo/global-block-links/icons/chain.svg
View File

@ -1,3 +0,0 @@
<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>
Side by Side

Before

Width:  |  Height:  |  Size: 631 B

58
repo/global-block-links/icons/globe.svg
View File

@ -1,58 +0,0 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M256,0C114.516,0,0,114.497,0,256c0,141.483,114.497,256,256,256c141.484,0,256-114.497,256-256
C512,114.517,397.503,0,256,0z M179.672,43.154c-18.976,24.15-32.411,54.72-41.322,84.252
c-14.826-9.037-28.655-19.814-41.172-32.171C120.97,71.723,149.058,54.11,179.672,43.154z M30,256
c0-50.725,16.604-98.895,47.232-138.315c16.079,15.678,34.043,29.063,53.365,39.92C123.981,188.356,120.5,221.677,120.5,256
s3.481,67.644,10.097,98.395c-19.322,10.857-37.286,24.242-53.365,39.92C46.604,354.895,30,306.725,30,256z M97.177,416.765
c12.517-12.357,26.346-23.134,41.172-32.171c8.908,29.518,22.341,60.094,41.322,84.252
C149.057,457.891,120.969,440.278,97.177,416.765z M241,479.476c-39.328-13.125-64.166-68.866-75.544-108.983
c23.765-10.401,49.312-16.72,75.544-18.472V479.476z M241,256v65.957c-28.585,1.685-56.481,8.155-82.582,18.927
c-5.195-26.628-7.918-55.305-7.918-84.884s2.723-58.256,7.918-84.884c26.1,10.772,53.996,17.242,82.582,18.927V256z M241,159.979
c-26.232-1.753-51.779-8.071-75.544-18.472c11.347-40.006,36.17-95.843,75.544-108.983V159.979z M414.823,95.235
c-12.517,12.357-26.346,23.134-41.172,32.171c-8.908-29.517-22.341-60.094-41.322-84.252
C362.943,54.109,391.031,71.722,414.823,95.235z M271,32.524c39.328,13.125,64.166,68.866,75.544,108.983
c-23.765,10.401-49.312,16.72-75.544,18.472V32.524z M271,256v-65.957c28.585-1.685,56.481-8.155,82.582-18.927
c5.195,26.628,7.918,55.305,7.918,84.884s-2.723,58.256-7.918,84.884c-26.1-10.772-53.996-17.242-82.582-18.927V256z M271,479.476
V352.021c26.232,1.753,51.779,8.071,75.544,18.472C335.197,410.499,310.374,466.336,271,479.476z M332.329,468.846
c18.974-24.15,32.41-54.72,41.322-84.252c14.826,9.037,28.656,19.814,41.172,32.171
C391.031,440.278,362.943,457.891,332.329,468.846z M434.769,394.314c-16.079-15.678-34.043-29.063-53.366-39.92
c6.616-30.75,10.097-64.071,10.097-98.395c0-34.324-3.481-67.644-10.097-98.395c19.322-10.856,37.286-24.241,53.366-39.92
C465.396,157.105,482,205.275,482,256C482,306.725,465.396,354.895,434.769,394.314z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.5 KiB

241
repo/global-block-links/mod.js
View File

@ -1,241 +0,0 @@
/*
* global linking blocks
* (c) 2020 admiraldus (https://github.com/admiraldus)
* under the MIT license
*/
'use strict';
const {x$} = require('./helper.js');
module.exports = {
id: '74856af4-6970-455d-bd86-0a385a402dd1',
name: 'global linking blocks',
tags: ['extension'],
desc: 'easily copy the global link of the page or the desired block.',
version: '0.1.0',
author: {
name: 'admiraldus',
link: 'https://github.com/admiraldus',
avatar: 'https://raw.githubusercontent.com/admiraldus/admiraldus/main/module.gif',
},
options: [
{
key: 'hidePageButton',
label: 'show the page link button',
type: 'toggle',
value: true,
},
],
hacks: {
'renderer/preload.js'(store, __exports) {
document.addEventListener('readystatechange', () => {
if (document.readyState !== 'complete') return false;
/**
* Prevent selectors from failing.
*
* @return {Function} Returns "wait()" until "main()" returns.
*/
const wait = !function wait() {
const els = [x$.sel('.notion-frame'), x$.sel('.notion-topbar')];
if (els.some((el) => el !== null)) return main();
setTimeout(() => wait(), 500);
}();
/**
* Everything happens here. ¯\_(ツ)_/¯
*/
async function main() {
const icons = {
globe: await x$.svg('/icons/globe.svg'),
chain: await x$.svg('/icons/chain.svg'),
};
const pageClass = 'admiraldus-glb-page-button';
const blockClass = 'admiraldus-glb-block-button';
const spanClass = 'admiraldus-glb-span-hide';
if (store().hidePageButton) {
/**
* Create the page link button and append it to the topbar.
*
* @return {create} Returns "create()" if not appended.
*/
const pageButton = function create() {
const target = x$.sel('.notion-topbar-share-menu');
if (target === null) return;
const attr = [
`class="${pageClass}" role="button" tabindex="0"`,
`class="${spanClass}"`,
];
const html = x$.el(
`<div ${attr[0]}>
${icons.chain}
<span>Copy link</span>
<span ${attr[1]}>Link copied!</span
</div>`);
target.before(html);
if (html === null) return create();
};
pageButton();
/**
* Observer for the topbar.
*/
x$.obs(() => {
if (x$.sel(`.${pageClass}`) !== null) return;
pageButton();
}, x$.sel('.notion-topbar'), {
subtree: true, childList: true,
});
}
/**
* Create the block link button and append it to the block menu.
*
* @param {HTMLDivElement} el The copy link button.
*
* @return {create} Returns "create()" if not appended.
*/
const blockButton = function create(el) {
const target = el;
const attr = `class="${blockClass}" role="button" tabindex="0"`;
const html = x$.el(
`<div ${attr}>
${icons.globe}
<span>Global link</span>
</div>`);
target.before(html);
if (html === null) return create();
};
let buttonDelay;
let link;
/**
* Copy the link to the clipboard.
*
* @param {boolean} page If the link is the link of the page.
*/
function copyLink(page) {
/**
* Change the button text to provide the copied feedback.
*/
const changeButtonText = function create() {
const span = x$.sel('span', true, x$.sel(`.${pageClass}`));
/**
* Set the classes of the button's div elements.
*
* @param {number} first A specific array items.
* @param {number} second A specific array items.
*/
function setClasses(first, second) {
x$.cls.a(span[first], spanClass);
x$.cls.r(span[second], spanClass);
}
clearTimeout(buttonDelay);
setClasses(0, 1);
buttonDelay = setTimeout(() => {
setClasses(1, 0);
}, 700);
};
switch (page) {
case true:
link = `https://${window.location.href}/`.replace(/notion:\/\//, '');
changeButtonText();
x$.clp(false, link);
break;
case false:
const events = ['mousedown', 'mouseup', 'click'];
x$.sim(events, x$.sel(`.${blockClass}`).nextSibling);
x$.clp().then((text) => {
x$.clp(false, `${text.replace(/(?<=so[\/]).*#/, '')}/`);
});
break;
}
}
/**
* Observer for the overlay container.
*/
x$.obs(() => {
/**
* Get the copy link button.
*
* @return {HTMLDivElement} Returns the copy link button.
*/
function getLinkButton() {
const lang = ['Copy link', '링크 복사'];
const overlay = x$.sel('.notion-overlay-container');
const record = x$.sel(
'[style*="text-overflow: ellipsis;"]', true, overlay);
return Array.from(record).find(
(div) => lang.some((text) => div.textContent === text));
}
if (x$.sel(`.${blockClass}`) !== null ||
x$.sel('.notion-selectable-halo') === null ||
getLinkButton() === undefined) return;
blockButton(getLinkButton().closest('[role="button"]'));
}, x$.sel('.notion-overlay-container'), {
subtree: true, childList: true,
});
/**
* Listen for click events to call "copyLink()"".
*
* @type {HTMLElement}
* @listens document.body#click
*/
x$.on(document.body, 'click', (event) => {
const target = event.target;
if (x$.cls.c(target, pageClass) ||
target.closest(`.${pageClass}`)) {
copyLink(/* page= */ true);
} else if (x$.cls.c(target, blockClass) ||
target.closest(`.${blockClass}`)) {
copyLink(/* page= */ false);
}
});
/**
* Listen for mouseenter events to add class.
*
* @type {HTMLElement}
* @listens document.body#mouseenter
*/
x$.on(document.body, 'mouseenter', (event) => {
const target = event.target;
if (x$.cls.c(target, 'admiraldus-glb-block-button')) {
const menu = target.closest('.notion-scroller.vertical');
x$.cls.a(menu, '--on-hover');
}
}, true);
/**
* Listen for mouseleave events to remove class.
*
* @type {HTMLElement}
* @listens document.body#mouseleave
*/
x$.on(document.body, 'mouseleave', (event) => {
const target = event.target;
if (x$.cls.c(target, 'admiraldus-glb-block-button')) {
const menu = target.closest('.notion-scroller.vertical');
x$.cls.r(menu, '--on-hover');
}
}, true);
}
});
},
},
};

105
repo/indentation-lines/mod.js
View File

@ -1,105 +0,0 @@
/*
* indentation lines
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 Alexa Baldon (https://github.com/runargs)
* (c) 2020 CloudHill
* under the MIT license
*/
'use strict';
const { createElement } = require('../../pkg/helpers.js');
module.exports = {
id: '35815b3b-3916-4dc6-8769-c9c2448f8b57',
tags: ['extension'],
name: 'indentation lines',
desc: 'adds vertical relationship lines to make list trees easier to follow.',
version: '1.0.0',
author: 'runargs',
options: [
{
key: 'style',
label: 'style',
type: 'select',
value: ['solid', 'dashed', 'dotted', 'soft'],
},
{
key: 'bulleted_list',
label: 'bulleted list',
type: 'toggle',
value: true,
},
{
key: 'numbered_list',
label: 'numbered list',
type: 'toggle',
value: true,
},
{
key: 'to_do',
label: 'to-do list',
type: 'toggle',
value: true,
},
{
key: 'toggle',
label: 'toggle list',
type: 'toggle',
value: true,
},
],
hacks: {
'renderer/preload.js'(store, __exports) {
document.addEventListener('readystatechange', (event) => {
if (document.readyState !== 'complete') return false;
const selectors =
['bulleted_list', 'numbered_list', 'to_do', 'toggle']
.filter(l => store()[l])
.map(l => `.notion-page-content .notion-${l}-block > div > div:last-child`);
let style = 'solid';
let opacity = 1;
switch(store().style) {
case 'dashed':
style = 'dashed';
break;
case 'dotted':
style = 'dotted';
break;
case 'soft':
opacity = 0.25;
break;
}
if (selectors.length > 0) {
document
.querySelector('head')
.appendChild(
createElement(`
<style type="text/css">
.notion-app-inner {
--indentation-lines-style: ${style};
--indentation-lines-opacity: ${opacity};
}
${selectors.join(',\n')} {
position: relative;
}
${selectors.join('::before,\n')}::before {
content: "";
position: absolute;
height: calc(100% - 2em);
top: 2em;
left: -14.48px;
border-left: 1px var(--indentation-lines-style);
opacity: var(--indentation-lines-opacity);
}
</style>
`)
)
}
});
},
},
};

88
repo/littlepig-dark/app.css
View File

@ -1,88 +0,0 @@
/*
* littlepig
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
* (c) 2020 Lizishan
* under the MIT license
*/
/* todo 颜色 */
.notion-body.dark .notion-dark-theme [style*='background: rgb(46, 170, 220)'],
.notion-body.dark
.notion-dark-theme
[style*='background-color: rgb(46, 170, 220)'] {
background: var(--theme_dark--option_active-background) !important;
}
/* ===================== header =========================== */
.notion-dark-theme [placeholder*='Heading 1'] {
color: var(--littlepig_dark--h1_text) !important;
}
.notion-dark-theme [placeholder*='Heading 2'] {
margin-bottom: 16px;
border-bottom: 4px solid var(--littlepig_dark--h2_text);
display: inline-block;
color: var(--littlepig_dark--h2_text) !important;
width: auto !important;
padding: 6px 12px 6px 0 !important;
position: relative;
}
.notion-dark-theme [placeholder*='Heading 2']::before {
content: '🔥 ';
}
.notion-dark-theme [placeholder*='Heading 3'] {
width: fit-content !important;
padding: 4px 10px !important;
border-radius: 10px;
border: 2px solid var(--littlepig_dark--h3_text);
color: var(--littlepig_dark--h3_text) !important;
background-color: #fbf8e7;
display: inline-block;
margin-bottom: 14px;
}
.notion-dark-theme [placeholder*='Heading 3']::before {
content: '📌 ';
}
/* list 样式 */
.notion-dark-theme
[style*='font-size: 1.5em; line-height: 1; margin-bottom: 0.1em;'] {
color: #a830fd !important;
}
/* quoteblock 样式 */
.notion-dark-theme
.notion-quote-block
[style*='caret-color: rgba(255, 255, 255, 0.9);'] {
font-size: 0.85em !important;
border-left: none !important;
padding: 0.5em 0.5em 0.5em 1.9em !important;
position: relative;
margin: 10px 0;
background: var(--theme_dark--card);
border-radius: 3px;
}
.notion-dark-theme
.notion-quote-block
[style*='caret-color: rgba(255, 255, 255, 0.9);']::before {
content: '\201C';
font-family: Georgia, serif;
font-size: 44px;
font-weight: bold;
color: #7b08fa;
position: absolute;
left: 0px;
top: -24px;
}
/* link style */
.notion-dark-theme .notion-link-token span {
border-bottom: 0.05em solid;
border-color: rgb(233, 51, 38) !important;
border-width: 3px !important;
opacity: 1 !important;
}
.notion-dark-theme .notion-link-token span:hover {
color: rgb(233, 51, 38) !important;
}

22
repo/littlepig-dark/mod.js
View File

@ -1,22 +0,0 @@
/*
* littlepig
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 Lizishan
* under the MIT license
*/
'use strict';
module.exports = {
id: 'ad923617-e76e-418e-9f23-490738a32299',
tags: ['theme', 'dark'],
name: 'littlepig dark',
desc: 'a purple monospaced theme using emojis and colourful text.',
version: '0.1.2',
author: {
name: 'Lizishan',
link: 'https://www.reddit.com/user/Lizishan/',
avatar:
'https://styles.redditmedia.com/t5_110nz4/styles/profileIcon_h1m3b16exoi51.jpg',
},
};

125
repo/littlepig-dark/variables.css
View File

@ -1,125 +0,0 @@
/*
* littlepig
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
* (c) 2020 Lizishan
* under the MIT license
*/
@import 'https://dev-cats.github.io/code-snippets/JetBrainsMono.css';
:root {
--theme_dark--main: #1e1c26;
--theme_dark--sidebar: #24222c;
--theme_dark--dragarea: #19181f;
--theme_dark--font_sans: 'JetBrains Mono';
--theme_dark--font_serif: 'JetBrains Mono';
--theme_dark--font_mono: 'JetBrains Mono';
--theme_dark--font_code: 'JetBrains Mono';
--theme_dark--scrollbar: #221f29;
--theme_dark--scrollbar_hover: #312d3c;
--theme_dark--card: #24222c;
--theme_dark--gallery: rgba(162, 162, 162, 0.01);
--theme_dark--table-border: rgba(148, 148, 184, 0.5);
--theme_dark--interactive_hover: #282632;
--theme_dark--selected: #9500ff6b;
--theme_dark--primary: rgb(106, 47, 200);
--theme_dark--primary_hover: rgb(110, 48, 211);
--theme_dark--primary_click: rgb(117, 65, 200);
--theme_dark--primary_indicator: rgb(150, 84, 226);
--theme_dark--option_hover-background: rgb(20, 0, 51);
--theme_dark--text: rgba(200, 200, 200, 0.8);
/* 文本颜色 */
--theme_dark--text_brown: rgb(177, 144, 131);
--theme_dark--text_green: rgb(66, 222, 137);
--theme_dark--text_blue: rgb(0, 157, 255);
--theme_dark--text_purple: rgb(162, 94, 255);
--theme_dark--text_red: rgb(240, 52, 38);
/* 文本背景色 */
--theme_dark--line_gray: rgb(69, 75, 78);
--theme_dark--line_brown: rgb(78, 57, 48);
--theme_dark--line_orange: rgb(136, 80, 48);
--theme_dark--line_yellow: #fbe2287c;
--theme_dark--line_red: rgb(151, 62, 62);
/* 标题色 */
--littlepig_dark--h1_text: #c264fe;
--littlepig_dark--h2_text: #e2bafe;
--littlepig_dark--h3_text: #7b08fa;
/* todo */
--theme_dark--option_active-color: #7b08fa;
--theme_dark--option_active-background: #1d1c26;
/* inline code */
--theme_dark--code_inline-text: #e0dfe2;
--theme_dark--code_inline-background: rgb(179, 39, 39);
--theme_dark--code_function: rgb(179, 146, 240);
--theme_dark--code_number: hsl(159, 69%, 39%);
/* 标签颜色 + 文本背景色 */
--theme_dark--bg_gray: rgb(234, 234, 234);
--theme_dark--bg_gray-text: rgb(17, 17, 17);
--theme_dark--bg_brown: rgb(206, 206, 206);
--theme_dark--bg_brown-text: rgb(85, 35, 1);
--theme_dark--bg_orange: rgb(254, 214, 155);
--theme_dark--bg_orange-text: rgb(199, 110, 0);
--theme_dark--bg_yellow: #fcffd8;
--theme_dark--bg_yellow-text: #ff8c22;
--theme_dark--bg_green: #d5fded;
--theme_dark--bg_green-text: #006a00;
--theme_dark--bg_blue: #e2f5ff;
--theme_dark--bg_blue-text: #00b2ff;
--theme_dark--bg_purple: #efe6ff;
--theme_dark--bg_purple-text: #8334ff;
--theme_dark--bg_pink: #ffe9f1;
--theme_dark--bg_pink-text: rgb(255, 0, 127);
--theme_dark--bg_red: rgb(251, 228, 228);
--theme_dark--bg_red-text: rgb(138, 0, 10);
--theme_dark--select_gray: rgb(234, 234, 234);
--theme_dark--select_gray-text: rgb(17, 17, 17);
--theme_dark--select_brown: rgb(206, 206, 206);
--theme_dark--select_brown-text: rgb(85, 35, 1);
--theme_dark--select_orange: rgb(254, 214, 155);
--theme_dark--select_orange-text: rgb(199, 110, 0);
--theme_dark--select_yellow: #fcffd8;
--theme_dark--select_yellow-text: #ff8c22;
--theme_dark--select_green: #d5fded;
--theme_dark--select_green-text: #006a00;
--theme_dark--select_blue: #e2f5ff;
--theme_dark--select_blue-text: #00b2ff;
--theme_dark--select_purple: #efe6ff;
--theme_dark--select_purple-text: #8334ff;
--theme_dark--select_pink: #ffe9f1;
--theme_dark--select_pink-text: rgb(255, 0, 127);
--theme_dark--select_red: rgb(251, 228, 228);
--theme_dark--select_red-text: rgb(138, 0, 10);
/* callout 颜色 */
--theme_dark--callout_gray: #e2e3e5;
--theme_dark--callout_gray-text: #383d41;
--theme_dark--callout_brown: rgb(130, 118, 111);
--theme_dark--callout_brown-text: rgb(85, 35, 1);
--theme_dark--callout_orange: rgb(254, 214, 155);
--theme_dark--callout_orange-text: rgb(255, 140, 0);
--theme_dark--callout_yellow: #fcffd8;
--theme_dark--callout_yellow-text: #c76e00;
--theme_dark--callout_green: #d4edda;
--theme_dark--callout_green-text: #155724;
--theme_dark--callout_blue: #cce5ff;
--theme_dark--callout_blue-text: #004085;
--theme_dark--callout_purple: rgb(199, 178, 230);
--theme_dark--callout_purple-text: rgb(90, 49, 148);
--theme_dark--callout_pink: rgb(255, 206, 228);
--theme_dark--callout_pink-text: rgb(255, 0, 127);
--theme_dark--callout_red: #f8d7da;
--theme_dark--callout_red-text: #721c24;
}

93
repo/littlepig-light/app.css
View File

@ -1,93 +0,0 @@
/*
* littlepig
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
* (c) 2020 Lizishan
* under the MIT license
*/
/* todo 颜色 */
.notion-body:not(.dark)
.notion-light-theme
[style*='background: rgb(46, 170, 220)'],
.notion-body:not(.dark)
.notion-light-theme
[style*='background-color: rgb(46, 170, 220)'] {
background: var(--theme_dark--option_active-background) !important;
}
.notion-body:not(.dark) [style*='background: rgb(46, 170, 220)'][role='button'],
.notion-body:not(.dark)
[style*='background: rgb(46, 170, 220);'][style*='width: 26px'] {
background: var(--theme_light--primary) !important;
}
/* ===================== header =========================== */
.notion-body:not(.dark) [placeholder*='Heading 1'] {
color: var(--littlepig_light--h1_text) !important;
}
.notion-body:not(.dark) [placeholder*='Heading 2'] {
margin-bottom: 16px;
border-bottom: 4px solid var(--littlepig_light--h2_text);
display: inline-block;
color: var(--littlepig_light--h2_text) !important;
width: auto !important;
padding: 6px 12px 6px 0 !important;
position: relative;
}
.notion-body:not(.dark) [placeholder*='Heading 2']::before {
content: '🔥 ';
}
.notion-body:not(.dark) [placeholder*='Heading 3'] {
width: fit-content !important;
padding: 4px 10px !important;
border-radius: 10px;
border: 2px solid #42b983;
color: var(--littlepig_light--h3_text) !important;
background-color: #fbf8e7;
display: inline-block;
margin-bottom: 14px;
}
.notion-body:not(.dark) [placeholder*='Heading 3']::before {
content: '📌 ';
}
/* list 样式 */
.notion-body:not(.dark)
[style*='font-size: 1.5em; line-height: 1; margin-bottom: 0.1em;'] {
color: #41b983 !important;
}
/* quoteblock 样式 */
.notion-body:not(.dark) .notion-quote-block [style*='rgb(55, 53, 47);'] {
font-size: 0.85em !important;
border-left: none !important;
padding: 0.5em 0.5em 0.5em 1.9em !important;
position: relative;
margin: 10px 0;
background: var(--theme_light--card);
border-radius: 3px;
}
.notion-body:not(.dark)
.notion-quote-block
[style*='caret-color: rgb(55, 53, 47);']::before {
content: '\201C';
font-family: Georgia, serif;
font-size: 44px;
font-weight: bold;
color: #42b983;
position: absolute;
left: 0px;
top: -24px;
}
/* link style */
.notion-body:not(.dark) .notion-link-token span {
border-bottom: 0.05em solid;
border-color: rgb(233, 51, 38) !important;
border-width: 3px !important;
opacity: 1 !important;
}
.notion-body:not(.dark) .notion-link-token span:hover {
color: rgb(233, 51, 38) !important;
}

22
repo/littlepig-light/mod.js
View File

@ -1,22 +0,0 @@
/*
* littlepig
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 Lizishan
* under the MIT license
*/
'use strict';
module.exports = {
id: 'ad923617-e76e-408e-9f23-490738a32238',
tags: ['theme', 'light'],
name: 'littlepig light',
desc: 'a bright monospaced theme using emojis and colourful text.',
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',
},
};

104
repo/littlepig-light/variables.css
View File

@ -1,104 +0,0 @@
/*
* littlepig
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
* (c) 2020 Lizishan
* under the MIT license
*/
@import 'https://dev-cats.github.io/code-snippets/JetBrainsMono.css';
:root {
--theme_light--font_sans: 'JetBrains Mono';
--theme_light--font_serif: 'JetBrains Mono';
--theme_light--font_mono: 'JetBrains Mono';
--theme_light--font_code: 'JetBrains Mono';
--theme_light--selected: rgba(177, 24, 24, 0.22);
--theme_light--primary: rgb(177, 24, 24);
--theme_light--primary_hover: rgb(202, 26, 26);
--theme_light--primary_click: rgb(219, 41, 41);
--theme_light--primary_indicator: rgb(202, 26, 26);
/* 文本颜色 */
--theme_light--text_gray: rgba(151, 154, 155, 0.95);
--theme_light--text_brown: rgb(167, 126, 100);
--theme_light--text_orange: rgb(255, 134, 0);
--theme_light--text_yellow: rgb(255, 195, 0);
--theme_light--text_green: rgb(0, 171, 0);
--theme_light--text_blue: rgb(0, 121, 255);
--theme_light--text_purple: rgb(126, 0, 255);
--theme_light--text_pink: rgb(255, 0, 208);
--theme_light--text_red: rgb(255, 0, 0);
/* 文本背景色 */
--theme_light--bg_gray: rgb(234, 234, 234);
--theme_light--bg_gray-text: rgb(17, 17, 17);
--theme_light--bg_brown: rgb(206, 206, 206);
--theme_light--bg_brown-text: rgb(85, 35, 1);
--theme_light--bg_orange: rgb(254, 214, 155);
--theme_light--bg_orange-text: rgb(199, 110, 0);
--theme_light--bg_yellow: #fcffd8;
--theme_light--bg_yellow-text: #ff8c22;
--theme_light--bg_green: #d5fded;
--theme_light--bg_green-text: #006a00;
--theme_light--bg_blue: #e2f5ff;
--theme_light--bg_blue-text: #00b2ff;
--theme_light--bg_purple: #efe6ff;
--theme_light--bg_purple-text: #8334ff;
--theme_light--bg_pink: #ffe9f1;
--theme_light--bg_pink-text: rgb(255, 0, 127);
--theme_light--bg_red: rgb(248, 215, 218);
--theme_light--bg_red-text: rgb(138, 0, 10);
--theme_light--select_gray: rgb(234, 234, 234);
--theme_light--select_gray-text: rgb(17, 17, 17);
--theme_light--select_brown: rgb(206, 206, 206);
--theme_light--select_brown-text: rgb(85, 35, 1);
--theme_light--select_orange: rgb(254, 214, 155);
--theme_light--select_orange-text: rgb(199, 110, 0);
--theme_light--select_yellow: #fcffd8;
--theme_light--select_yellow-text: #ff8c22;
--theme_light--select_green: #d5fded;
--theme_light--select_green-text: #006a00;
--theme_light--select_blue: #e2f5ff;
--theme_light--select_blue-text: #00b2ff;
--theme_light--select_purple: #efe6ff;
--theme_light--select_purple-text: #8334ff;
--theme_light--select_pink: #ffe9f1;
--theme_light--select_pink-text: rgb(255, 0, 127);
--theme_light--select_red: rgb(248, 215, 218);
--theme_light--select_red-text: rgb(138, 0, 10);
/* 标题色 */
--littlepig_light--h1_text: #008800;
--littlepig_light--h2_text: #006a00;
--littlepig_light--h3_text: #003e00;
/* todo */
--theme_light--option_active-color: #008800;
--theme_light--option_active-background: #ffffff;
/* inline code */
--theme_light--code_inline-text: #e0dfe2;
--theme_light--code_inline-background: rgb(179, 39, 39);
/* callout 颜色 */
--theme_light--callout_gray: #e2e3e5;
--theme_light--callout_gray-text: #383d41;
--theme_light--callout_brown: rgb(130, 118, 111);
--theme_light--callout_brown-text: rgb(85, 35, 1);
--theme_light--callout_orange: rgb(254, 214, 155);
--theme_light--callout_orange-text: rgb(255, 140, 0);
--theme_light--callout_yellow: #fcffd8;
--theme_light--callout_yellow-text: #c76e00;
--theme_light--callout_green: #d4edda;
--theme_light--callout_green-text: #155724;
--theme_light--callout_blue: #cce5ff;
--theme_light--callout_blue-text: #004085;
--theme_light--callout_purple: rgb(199, 178, 230);
--theme_light--callout_purple-text: rgb(90, 49, 148);
--theme_light--callout_pink: rgb(255, 206, 228);
--theme_light--callout_pink-text: rgb(255, 0, 127);
--theme_light--callout_red: #f8d7da;
--theme_light--callout_red-text: #721c24;
}

16
repo/material-ocean/mod.js
View File

@ -1,16 +0,0 @@
/*
* material ocean
* (c) 2020 Abubakar Yagoub <i@blacksuan19.me> (https://blacksuan19.tk)
* under the MIT license
*/
'use strict';
module.exports = {
id: '69e7ccb2-4aef-484c-876d-3de1b433d2b9',
tags: ['theme', 'dark'],
name: 'material ocean',
desc: 'an oceanic colour palette.',
version: '0.1.0',
author: 'blacksuan19',
};

126
repo/material-ocean/variables.css
View File

@ -1,126 +0,0 @@
/*
* material ocean
* (c) 2020 Abubakar Yagoub <i@blacksuan19.me> (https://blacksuan19.tk)
* under the MIT license
*/
:root {
--ocean-main: #0f111a;
--ocean-sec: #00010a;
--ocean-tet: #000108;
--ocean-accent: #ff4151;
--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_dark--main: var(--ocean-main);
--theme_dark--sidebar: var(--ocean-sec);
--theme_dark--overlay: rgba(0, 1, 10, 0.5);
--theme_dark--dragarea: var(--ocean-sec);
--theme_dark--scrollbar: var(--ocean-sec);
--theme_dark--scrollbar_hover: var(--ocean-accent);
--theme_dark--card: var(--ocean-sec);
--theme_dark--gallery: var(--ocean-sec);
--theme_dark--select_input: var(--ocean-tet);
--theme_dark--table-border: rgba(255, 255, 255, 0.1);
--theme_dark--ui-border: var(--theme_dark--table-border);
--theme_dark--interactive_hover: var(--ocean-tet);
--theme_dark--button_close: var(--ocean-accent);
--theme_dark--selected: rgba(255, 65, 81, 0.2);
--theme_dark--primary: var(--ocean-accent);
--theme_dark--primary_hover: var(--ocean-accent);
--theme_dark--primary_click: var(--ocean-sec);
--theme_dark--primary_indicator: var(--ocean-accent);
--theme_dark--option_active-background: var(--theme_dark--primary);
--theme_dark--option_hover-background: var(--theme_dark--primary_hover);
--theme_dark--danger_text: #eb5757;
--theme_dark--danger_border: rgba(235, 87, 87, 0.5);
--theme_dark--text: #ffffff;
--theme_dark--text_ui: var(--ocean-gray);
--theme_dark--text_ui_info: var(--ocean-gray);
--theme_dark--text_gray: var(--ocean-gray);
--theme_dark--text_brown: var(--ocean-brown);
--theme_dark--text_orange: var(--ocean-orange);
--theme_dark--text_yellow: var(--ocean-yellow);
--theme_dark--text_green: var(--ocean-green);
--theme_dark--text_blue: var(--ocean-blue);
--theme_dark--text_purple: var(--ocean-purple);
--theme_dark--text_pink: var(--ocean-pink);
--theme_dark--text_red: var(--ocean-red);
--theme_dark--bg-text: var(--ocean-main);
--theme_dark--bg_gray: var(--ocean-gray);
--theme_dark--bg_brown: var(--ocean-brown);
--theme_dark--bg_orange: var(--ocean-orange);
--theme_dark--bg_yellow: var(--ocean-yellow);
--theme_dark--bg_green: var(--ocean-green);
--theme_dark--bg_blue: var(--ocean-blue);
--theme_dark--bg_purple: var(--ocean-purple);
--theme_dark--bg_pink: var(--ocean-pink);
--theme_dark--bg_red: var(--ocean-red);
--theme_dark--line-text: var(--ocean-main);
--theme_dark--line_gray: #e0e0e089;
--theme_dark--line_brown: #d8b6a692;
--theme_dark--line_orange: #fde3c09f;
--theme_dark--line_yellow: #ffe6a6ad;
--theme_dark--line_green: #a3be8ca3;
--theme_dark--line_blue: #81a1c1a3;
--theme_dark--line_purple: #b48eada8;
--theme_dark--line_pink: #ffc0cbb1;
--theme_dark--line_red: #bf616a9e;
--theme_dark--select-text: var(--theme_dark--bg-text);
--theme_dark--select_gray: var(--theme_dark--bg_gray);
--theme_dark--select_brown: var(--theme_dark--bg_brown);
--theme_dark--select_orange: var(--theme_dark--bg_orange);
--theme_dark--select_yellow: var(--theme_dark--bg_yellow);
--theme_dark--select_green: var(--theme_dark--bg_green);
--theme_dark--select_blue: var(--theme_dark--bg_blue);
--theme_dark--select_purple: var(--theme_dark--bg_purple);
--theme_dark--select_pink: var(--theme_dark--bg_pink);
--theme_dark--select_red: var(--theme_dark--bg_red);
--theme_dark--callout-text: var(--theme_dark--line-text);
--theme_dark--callout_gray: var(--theme_dark--line_gray);
--theme_dark--callout_brown: var(--theme_dark--line_brown);
--theme_dark--callout_orange: var(--theme_dark--line_orange);
--theme_dark--callout_yellow: var(--theme_dark--line_yellow);
--theme_dark--callout_green: var(--theme_dark--line_green);
--theme_dark--callout_blue: var(--theme_dark--line_blue);
--theme_dark--callout_purple: var(--theme_dark--line_purple);
--theme_dark--callout_pink: var(--theme_dark--line_pink);
--theme_dark--callout_red: var(--theme_dark--line_red);
--theme_dark--code_inline-text: #b3f5c8;
--theme_dark--code_inline-background: var(--ocean-sec);
--theme_dark--code-text: var(--theme_dark--text);
--theme_dark--code-background: var(--ocean-sec);
--theme_dark--code_function: var(--theme_dark--text_blue);
--theme_dark--code_keyword: var(--theme_dark--text_pink);
--theme_dark--code_tag: var(--theme_dark--text_pink);
--theme_dark--code_operator: var(--theme_dark--text_yellow);
--theme_dark--code_important: var(--theme_dark--text_yellow);
--theme_dark--code_property: var(--theme_dark--text_pink);
--theme_dark--code_builtin: var(--theme_dark--text_yellow);
--theme_dark--code_attr-name: var(--theme_dark--text_yellow);
--theme_dark--code_comment: var(--theme_dark--text_gray);
--theme_dark--code_punctuation: var(--theme_dark--text_gray);
--theme_dark--code_doctype: var(--theme_dark--text_gray);
--theme_dark--code_number: var(--theme_dark--text_purple);
--theme_dark--code_string: var(--theme_dark--text_orange);
--theme_dark--code_attr-value: var(--theme_dark--text_orange);
}

237
repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/blocks.mjs Normal file
View File

@ -0,0 +1,237 @@
/*
* notion-enhancer core: 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/_.mjs';
import { notifications } from './notifications.mjs';
const profileDB = await registry.profileDB();
export const blocks = {
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) => web.html`<p class="mod-description markdown-inline">
${fmt.md.renderInline(description)}
</p>`,
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 checked = await profileDB.get([mod.id, opt.key], opt.value),
$toggle = blocks.toggle(opt.label, checked),
$tooltip = web.html`${await components.feather('info', { class: 'input-tooltip' })}`,
$label = $toggle.children[0],
$input = $toggle.children[1];
if (opt.tooltip) {
$label.prepend($tooltip);
components.tooltip($tooltip, opt.tooltip);
}
$input.addEventListener('change', async (event) => {
await profileDB.set([mod.id, opt.key], $input.checked);
notifications.onChange();
});
return $toggle;
},
select: async (mod, opt) => {
const value = await profileDB.get([mod.id, opt.key], opt.values[0]),
$tooltip = 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 ? $tooltip : '', 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.tooltip($tooltip, opt.tooltip);
$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 value = await profileDB.get([mod.id, opt.key], opt.value),
$tooltip = 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 ? $tooltip : '', 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.tooltip($tooltip, opt.tooltip);
$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 value = await profileDB.get([mod.id, opt.key], opt.value),
$tooltip = 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 ? $tooltip : '', 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.tooltip($tooltip, opt.tooltip);
$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 value = await profileDB.get([mod.id, opt.key], opt.value),
$tooltip = 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 ? $tooltip : '', 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();
$input.style.color = $picker.isLight() ? '#000' : '#fff';
$input.style.padding = '';
},
$picker = new web.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.tooltip($tooltip, opt.tooltip);
$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 { filename } = (await profileDB.get([mod.id, opt.key], {})) || {},
$tooltip = 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 ? $tooltip : '', 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.tooltip($tooltip, opt.tooltip);
$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 value = await profileDB.get([mod.id, opt.key], opt.value),
$tooltip = 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 ? $tooltip : '', 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.tooltip($tooltip, opt.tooltip);
$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.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);
},
};

69
repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/client.css Normal file
View File

@ -0,0 +1,69 @@
/*
* notion-enhancer core: 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[data-has-notifications] {
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;
}

59
repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/client.mjs Normal file
View File

@ -0,0 +1,59 @@
/*
* notion-enhancer core: menu
* (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) {
const { env, fs, storage, registry, web } = api;
web.addHotkeyListener(await db.get(['hotkey']), env.focusMenu);
const updateTheme = () =>
storage.set(['theme'], document.querySelector('.notion-dark-theme') ? 'dark' : 'light');
web.addDocumentObserver((mutation) => {
if (mutation.target === document.body && document.hasFocus()) updateTheme();
});
if (document.hasFocus()) updateTheme();
document.addEventListener('visibilitychange', updateTheme);
const sidebarSelector = '.notion-sidebar-container .notion-sidebar > div:nth-child(4)';
await web.whenReady([sidebarSelector]);
const $sidebarLink = web.html`<div class="enhancer--sidebarMenuLink" role="button" tabindex="0">
<div>
<div>${await fs.getText('icon/colour.svg')}</div>
<div><div>notion-enhancer</div></div>
</div>
</div>`;
$sidebarLink.addEventListener('click', env.focusMenu);
const notifications = {
cache: await storage.get(['notifications'], []),
provider: [
registry.welcomeNotification,
...(await fs.getJSON('https://notion-enhancer.github.io/notifications.json')),
],
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 (notifications.count) {
$sidebarLink.dataset.hasNotifications = true;
web.render(
$sidebarLink.children[0],
web.html`<div class="enhancer--notificationBubble"><div><span>${notifications.count}</span></div></div>`
);
}
web.render(document.querySelector(sidebarSelector), $sidebarLink);
}

165
repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/markdown.css Normal file
View File

@ -0,0 +1,165 @@
/*
* notion-enhancer core: 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 ul,
.markdown ol {
padding-left: 1.25rem;
}
.markdown li {
margin: 0.4rem 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.markdown-inline a {
opacity: 0.7;
text-decoration: none;
border-bottom: 0.05em solid var(--theme--text_secondary);
}
.markdown.markdown-inline 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.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;
}
/*
* https://prismjs.com/plugins/inline-color/
*/
.markdown .inline-color-wrapper {
/*
* base64 svg (https://stackoverflow.com/a/21626701/7595472 - prevents visual glitches)
* <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2">
* <path fill="gray" d="M0 0h2v2H0z"/>
* <path fill="white" d="M0 0h1v1H0zM1 1h1v1H1z"/>
* </svg>
*/
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyIDIiPjxwYXRoIGZpbGw9ImdyYXkiIGQ9Ik0wIDBoMnYySDB6Ii8+PHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0wIDBoMXYxSDB6TTEgMWgxdjFIMXoiLz48L3N2Zz4=');
background-position: center;
background-size: 110%;
display: inline-block;
height: 1.333ch;
width: 1.333ch;
margin: 0 0.333ch;
box-sizing: border-box;
border: 0.5px solid var(--theme--code_plain);
overflow: hidden;
}
.markdown .inline-color {
display: block;
height: 120%;
width: 120%;
}
/*
* https://prismjs.com/plugins/match-braces/
*/
.markdown .token.punctuation.brace-hover,
.markdown .token.punctuation.brace-selected {
outline: solid 1px;
}
/*
* https://prismjs.com/plugins/show-language/
* https://prismjs.com/plugins/copy-to-clipboard/
*/
.markdown .code-toolbar {
position: relative;
}
.markdown .code-toolbar .toolbar-item {
position: absolute;
top: 0.35rem;
display: inline-block;
transition: opacity 200ms ease-in-out;
opacity: 0;
}
.markdown .code-toolbar .toolbar-item:first-child {
left: 0.8rem;
}
.markdown .code-toolbar .toolbar-item:last-child {
right: 0.8rem;
}
.markdown .code-toolbar:hover .toolbar-item,
.markdown .code-toolbar:focus-within .toolbar-item {
opacity: 1;
}
.markdown .code-toolbar .toolbar-item > * {
padding: 0.25rem 0.35rem;
color: var(--theme--text_secondary);
font-size: 11px;
font-family: inherit;
}
.markdown .code-toolbar .toolbar-item .copy-to-clipboard-button {
border: none;
background: none;
cursor: pointer;
border-radius: 3px;
transition: background 100ms ease-in-out;
}
.markdown .code-toolbar .toolbar-item .copy-to-clipboard-button:hover {
background: var(--theme--button-hover);
}
.markdown .code-toolbar .toolbar-item .copy-to-clipboard-button svg {
width: 1em;
margin-right: 0.5em;
}

25
repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.css Normal file
View File

@ -0,0 +1,25 @@
/*
* notion-enhancer core: 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;
}

11
repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.html Normal file
View File

@ -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>

370
repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.mjs Normal file
View File

@ -0,0 +1,370 @@
/*
* notion-enhancer core: menu
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (https://notion-enhancer.github.io/) under the MIT license
*/
'use strict';
import { env, fs, storage, registry, web, components } from '../../api/_.mjs';
import { notifications } from './notifications.mjs';
import { blocks, options } from './blocks.mjs';
import './styles.mjs';
const db = await registry.db('a6621988-551d-495a-97d8-3c568bca2e9e'),
profileName = await registry.profileName(),
profileDB = await registry.profileDB();
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}`);
}
}
web.addHotkeyListener(await db.get(['hotkey']), env.focusNotion);
const loadTheme = async () => {
document.documentElement.className =
(await storage.get(['theme'], 'light')) === 'dark' ? 'dark' : '';
};
document.addEventListener('visibilitychange', loadTheme);
loadTheme();
window.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>`;
let _$profileConfig;
$profile.addEventListener('click', async (event) => {
for (const $selected of document.querySelectorAll('.mod-selected')) {
$selected.className = 'mod';
}
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', async (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) {
web.render(web.empty($error), 'Profile names cannot be empty.');
return false;
}
if (!$edit.value.match(/^[A-Za-z0-9_-]+$/)) {
web.render(
web.empty($error),
'Profile names can only contain letters, numbers, dashes 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.
Here they can be selected, renamed or deleted.
Profile names can only contain letters, numbers,
dashes and underscores. <br>
Be careful - deleting a profile deletes all configuration
related to it.
</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);
});
const _$modListCache = {},
generators = {
options: async (mod) => {
const $fragment = document.createDocumentFragment();
for (const opt of mod.options) {
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 = blocks.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(
(mod) =>
mod.environments.includes(env.name) &&
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', async (event) => {
if ($mod.className === 'mod-selected') return;
for (const $selected of document.querySelectorAll('.mod-selected')) {
$selected.className = 'mod';
}
$mod.className = 'mod-selected';
const fragment = [
web.render(blocks.title(mod.name), blocks.version(mod.version)),
blocks.tags(mod.tags),
await generators.options(mod),
];
web.render(web.empty($options), ...fragment);
});
return web.render(
web.html`<article class="mod-container"></article>`,
web.render(
$mod,
mod.preview
? blocks.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(blocks.title(mod.name), blocks.version(mod.version)),
blocks.tags(mod.tags),
blocks.description(mod.description),
blocks.authors(mod.authors),
mod.environments.includes(env.name) && !registry.core.includes(mod.id)
? $toggle
: ''
)
)
);
},
modList: async (category, message = '') => {
if (!_$modListCache[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);
}
_$modListCache[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.html`<p class="main-message">${web.escape(message)}</p>` : '',
$list
);
}
return _$modListCache[category];
},
};
const $notionNavItem = web.html`<h1 class="nav-notion">
${(await fs.getText('icon/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>`;
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,
web.html`<a href="https://notion-enhancer.github.io" class="nav-item">docs</a>`,
web.html`<a href="https://discord.gg/sFWPXtA" class="nav-item">community</a>`
),
$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';
}
import * as router from './router.mjs';
router.addView('core', async () => {
web.empty($main);
selectNavItem($coreNavItem);
return web.render($main, await generators.modList('core'));
});
router.addView('extensions', async () => {
web.empty($main);
selectNavItem($extensionsNavItem);
return web.render($main, await generators.modList('extension'));
});
router.addView('themes', async () => {
web.empty($main);
selectNavItem($themesNavItem);
return web.render(
$main,
await generators.modList(
'theme',
`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.loadView('extensions', $main);

31
repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/mod.json Normal file
View File

@ -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",
"value": "Ctrl+Alt+E",
"tooltip": "switches between notion & the enhancer menu"
}
]
}

86
repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/notifications.mjs Normal file
View File

@ -0,0 +1,86 @@
/*
* notion-enhancer core: menu
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (https://notion-enhancer.github.io/) under the MIT license
*/
'use strict';
import { env, fs, storage, fmt, registry, web, components } from '../../api/_.mjs';
import { tw } from './styles.mjs';
export const notifications = {
$container: web.html`<div class="notifications-container"></div>`,
cache: await storage.get(['notifications'], []),
provider: [
registry.welcomeNotification,
...(await fs.getJSON('https://notion-enhancer.github.io/notifications.json')),
],
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) {
if (
!notifications.cache.includes(notification.id) &&
notification.version === env.version &&
(!notification.environments || notification.environments.includes(env.name))
) {
notifications.add(notification);
}
}
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',
});
}

72
repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/router.mjs Normal file
View File

@ -0,0 +1,72 @@
/*
* notion-enhancer core: 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/_.mjs';
let _defaultView = '';
const _views = new Map();
export function addView(name, loadFunc) {
_views.set(name, loadFunc);
}
export function removeView(name) {
_views.delete(name);
}
function router(event) {
event.preventDefault();
const anchor = event.path
? event.path.find((anchor) => anchor.nodeName === 'A')
: event.target;
if (location.search !== anchor.getAttribute('href')) {
window.history.pushState(null, null, anchor.href);
loadView();
}
}
function navigator(event) {
event.preventDefault();
const anchor = event.path
? event.path.find((anchor) => anchor.nodeName === 'A')
: event.target,
hash = anchor.getAttribute('href').slice(1);
document.getElementById(hash).scrollIntoView(true);
document.documentElement.scrollTop = 0;
history.replaceState({ search: location.search, hash }, null, `#${hash}`);
}
export async function loadView(defaultView = null) {
if (defaultView) _defaultView = defaultView;
if (!_defaultView) throw new Error('no view root set.');
const query = web.queryParams(),
fallbackView = () => {
window.history.replaceState(null, null, `?view=${_defaultView}`);
return loadView();
};
if (!query.get('view') || document.body.dataset.view !== query.get('view')) {
if (_views.get(query.get('view'))) {
await _views.get(query.get('view'))();
} else return fallbackView();
} else return fallbackView();
}
window.addEventListener('popstate', (event) => {
if (event.state) loadView();
document.getElementById(location.hash.slice(1))?.scrollIntoView(true);
document.documentElement.scrollTop = 0;
});
web.addDocumentObserver((mutation) => {
mutation.target.querySelectorAll('a[href^="?"]').forEach((a) => {
a.removeEventListener('click', router);
a.addEventListener('click', router);
});
mutation.target.querySelectorAll('a[href^="#"]').forEach((a) => {
a.removeEventListener('click', navigator);
a.addEventListener('click', navigator);
});
});

157
repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/styles.mjs Normal file
View File

@ -0,0 +1,157 @@
/*
* notion-enhancer core: 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('""');
const mapColorVariables = (color) => ({
'text': `var(--theme--text_${color})`,
'highlight': `var(--theme--highlight_${color})`,
'highlight-text': `var(--theme--highlight_${color}-text)`,
'block': `var(--theme--block_${color})`,
'block-text': `var(--theme--block_${color}-text)`,
'tag': `var(--theme--tag_${color})`,
'tag-text': `var(--theme--tag_${color}-text)`,
'callout': `var(--theme--callout_${color})`,
'callout-text': `var(--theme--callout_${color}-text)`,
});
const customClasses = {
'notifications-container': apply`absolute bottom-0 right-0 px-4 py-3 max-w-full w-96`,
'notification': ([color = 'default']) =>
apply`p-2 ${
color === 'default'
? 'bg-tag text-tag-text hover:bg-interactive-hover border border-divider'
: `bg-${color}-tag text-${color}-tag-text border border-${color}-text hover:bg-${color}-text`
} flex items-center rounded-full mt-3 shadow-md cursor-pointer`,
'notification-text': apply`font-semibold text-xs mx-2 flex-auto`,
'notification-icon': apply`fill-current opacity-75 h-4 w-4 mx-2`,
'body-container': apply`flex w-full h-full overflow-hidden`,
'content-container': apply`h-full w-full-96`,
'nav': apply`px-4 py-3 flex flex-wrap items-center border-b border-divider h-64 sm:h-48 md:h-32 lg:h-16`,
'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`,
'main': apply`transition px-4 py-3 overflow-y-auto max-h-full-64 sm:max-h-full-48 md:max-h-full-32 lg:max-h-full-16`,
'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-focus`,
'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`,
'sidebar': apply`h-full w-96 px-4 pt-3 pb-32 flex flex-col bg-notion-secondary border-l border-divider`,
'profile-trigger': apply`block px-4 py-3 mb-2 rounded-md text-sm text-left font-semibold shadow-inner
bg-accent-red-hover border border-accent-red text-accent-red focus:(outline-none ring ring-inset ring-accent-red)`,
'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-focus outline-none) text-center`,
'profile-delete': apply`text-sm px-3 py-2 font-medium ml-3 mt-2 bg-red-tag text-red-tag-text rounded-md flex-grow
border border-red-text hover:bg-red-text focus:(outline-none bg-red-text) text-center`,
'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-focus)`,
'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`,
};
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_mono)'],
},
colors: {
'notion': 'var(--theme--bg)',
'notion-secondary': 'var(--theme--bg_secondary)',
'notion-popup': 'var(--theme--bg_popup)',
'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-focus': 'var(--theme--accent_blue-focus)',
'blue-text': 'var(--theme--accent_blue-text)',
'red': 'var(--theme--accent_red)',
'red-hover': 'var(--theme--accent_red-hover)',
'red-text': 'var(--theme--accent_red-text)',
},
'grey': mapColorVariables('grey'),
'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: {
width: {
'full-96': 'calc(100% - 24rem)',
},
maxHeight: {
'full-16': 'calc(100% - 4rem)',
'full-32': 'calc(100% - 8rem)',
'full-48': 'calc(100% - 12rem)',
'full-64': 'calc(100% - 16rem)',
},
},
},
plugins: customClasses,
});
tw`hidden ${Object.keys(customClasses).join(' ')}`;
export { tw };

19
repo/neutral/app.css
View File

@ -1,19 +0,0 @@
/*
* neutral
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 Arecsu
* 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;
}

17
repo/neutral/mod.js
View File

@ -1,17 +0,0 @@
/*
* neutral
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 Arecsu
* under the MIT license
*/
'use strict';
module.exports = {
id: 'c4435543-4705-4d68-8cf7-d11c342f8089',
tags: ['theme', 'dark'],
name: 'neutral',
desc: 'smoother colours and fonts, designed to be more pleasing to the eye.',
version: '0.1.4',
author: 'arecsu',
};

134
repo/neutral/variables.css
View File

@ -1,134 +0,0 @@
/*
* neutral
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 Arecsu
* under the MIT license
*/
@import 'https://rsms.me/inter/inter.css';
@import 'https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap';
:root {
/** dark **/
--theme_dark--main: #131313;
--theme_dark--sidebar: #161616;
--theme_dark--overlay: rgba(15, 15, 15, 0.6);
--theme_dark--dragarea: #111111;
--theme_dark--box-shadow: rgba(15, 15, 15, 0.5) 0px 0px 0px 1px,
rgba(15, 15, 15, 0.5) 0px 2px 4px;
--theme_dark--font_sans: 'Inter', -apple-system, BlinkMacSystemFont,
'Segoe UI', Helvetica, 'Apple Color Emoji', Arial, sans-serif,
'Segoe UI Emoji', 'Segoe UI Symbol';
--theme_dark--font_mono: 'Roboto Mono', iawriter-mono, Nitti, Menlo, Courier,
monospace;
--theme_dark--font_code: 'Roboto Mono', SFMono-Regular, Consolas,
'Liberation Mono', Menlo, Courier, monospace;
/* 1.3 supreme ratio. https://www.modularscale.com/ */
--theme_dark--font_title-size: 33px;
--theme_dark--font_heading1-size: 2.2em;
--theme_dark--font_heading2-size: 1.687em;
--theme_dark--font_heading3-size: 1.3em;
--theme_dark--font_label-size: 14px;
--theme_dark--font_body-size: 15px;
--theme_dark--font_body-size_small: 13.5px;
--theme_dark--font_code-size: 0.9em;
--theme_dark--font_sidebar-size: 14px;
--theme_dark--scrollbar: #232425;
--theme_dark--scrollbar-border: transparent;
--theme_dark--scrollbar_hover: #373838;
--theme_dark--card: #181818;
--theme_dark--gallery: rgba(105, 105, 105, 0.05);
--theme_dark--select_input: #1d1d1d;
--theme_dark--table-border: rgba(78, 78, 78, 0.7);
--theme_dark--ui-border: var(--theme_dark--table-border);
--theme_dark--interactive_hover: rgb(29, 29, 29);
--theme_dark--selected: #52525244;
--theme_dark--primary: #404040;
--theme_dark--primary_hover: #6d6d6d;
--theme_dark--primary_click: #cacaca;
--theme_dark--primary_indicator: #6d6d6d;
--theme_dark--option_hover-background: #484848;
--theme_dark--danger_text: #ce535f;
--theme_dark--danger_border: #8c3d3d;
--theme_dark--text: #dadada;
--theme_dark--text_ui: #dadadad0;
--theme_dark--text_ui_info: #dadadab4;
--theme_dark--text_gray: #858585;
--theme_dark--text_brown: #484848;
--theme_dark--text_orange: #ec9873;
--theme_dark--text_yellow: #e2c06f;
--theme_dark--text_green: #92b178;
--theme_dark--text_blue: #719cca;
--theme_dark--text_purple: #ab82bb;
--theme_dark--text_pink: #d285aa;
--theme_dark--text_red: #ce535f;
--theme_dark--bg_gray: #585858;
--theme_dark--bg_brown: #333333;
--theme_dark--bg_orange: #9a5a3f;
--theme_dark--bg_yellow: #b58a46;
--theme_dark--bg_green: #657953;
--theme_dark--bg_blue: #355475;
--theme_dark--bg_purple: #775186;
--theme_dark--bg_pink: #8e4b63;
--theme_dark--bg_red: #8c3d3d;
--theme_dark--line_gray: #585858;
--theme_dark--line_brown: #333333;
--theme_dark--line_orange: #9a5a3f;
--theme_dark--line_yellow: #b58a46;
--theme_dark--line_green: #657953;
--theme_dark--line_blue: #355475;
--theme_dark--line_purple: #775186;
--theme_dark--line_pink: #8e4b63;
--theme_dark--line_red: #8c3d3d;
--theme_dark--select_gray: var(--theme_dark--bg_gray);
--theme_dark--select_brown: var(--theme_dark--bg_brown);
--theme_dark--select_orange: var(--theme_dark--bg_orange);
--theme_dark--select_yellow: var(--theme_dark--bg_yellow);
--theme_dark--select_green: var(--theme_dark--bg_green);
--theme_dark--select_blue: var(--theme_dark--bg_blue);
--theme_dark--select_purple: var(--theme_dark--bg_purple);
--theme_dark--select_pink: var(--theme_dark--bg_pink);
--theme_dark--select_red: var(--theme_dark--bg_red);
--theme_dark--callout_gray: rgba(88, 88, 88, 0.175);
--theme_dark--callout_brown: rgb(51, 51, 51, 0.175);
--theme_dark--callout_orange: rgb(154, 90, 63, 0.175);
--theme_dark--callout_yellow: rgb(181, 138, 70, 0.175);
--theme_dark--callout_green: rgb(101, 121, 83, 0.175);
--theme_dark--callout_blue: rgb(53, 84, 117, 0.175);
--theme_dark--callout_purple: rgb(119, 81, 134, 0.175);
--theme_dark--callout_pink: rgb(142, 75, 99, 0.175);
--theme_dark--callout_red: rgb(140, 61, 61, 0.175);
--theme_dark--code_inline-text: var(--theme_dark--text);
--theme_dark--code_inline-background: #333333;
--theme_dark--code-text: var(--theme_dark--text);
--theme_dark--code-background: #0e0e0e;
--theme_dark--code_function: var(--theme_dark--text_blue);
--theme_dark--code_keyword: var(--theme_dark--text_pink);
--theme_dark--code_tag: var(--theme_dark--text_pink);
--theme_dark--code_operator: var(--theme_dark--text_yellow);
--theme_dark--code_important: var(--theme_dark--text_yellow);
--theme_dark--code_property: var(--theme_dark--text_pink);
--theme_dark--code_builtin: var(--theme_dark--text_yellow);
--theme_dark--code_attr-name: var(--theme_dark--text_yellow);
--theme_dark--code_comment: var(--theme_dark--text_gray);
--theme_dark--code_punctuation: var(--theme_dark--text_gray);
--theme_dark--code_doctype: var(--theme_dark--text_gray);
--theme_dark--code_number: var(--theme_dark--text_purple);
--theme_dark--code_string: var(--theme_dark--text_orange);
--theme_dark--code_attr-value: var(--theme_dark--text_orange);
}

47
repo/night-shift/mod.js
View File

@ -1,47 +0,0 @@
/*
* night shift
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* under the MIT license
*/
'use strict';
module.exports = {
id: '9a71bbff-e87d-4a0b-8a2c-a93473113c30',
tags: ['extension', 'theme'],
name: 'night shift',
desc:
'sync dark/light theme with the system (overrides normal theme setting).',
version: '0.1.2',
author: 'dragonwocky',
hacks: {
'renderer/preload.js'(store, __exports) {
document.addEventListener('readystatechange', (event) => {
if (document.readyState !== 'complete') return false;
const attempt_interval = setInterval(enhance, 500);
function enhance() {
const notion_elem = document.querySelector('.notion-app-inner');
if (!notion_elem) return;
clearInterval(attempt_interval);
handle([{ target: notion_elem }]);
const observer = new MutationObserver(handle);
observer.observe(notion_elem, {
attributes: true,
subtree: true,
});
function handle(list, observer) {
const mode = `notion-app-inner notion-${
window.matchMedia('(prefers-color-scheme: dark)').matches
? 'dark'
: 'light'
}-theme`;
if (notion_elem.className !== mode) notion_elem.className = mode;
window
.matchMedia('(prefers-color-scheme: dark)')
.addEventListener('change', handle);
}
}
});
},
},
};

8
repo/nord/app.css
View File

@ -1,8 +0,0 @@
/*
* nord v0.1.0
* (c) 2020 MANNEN
* dunno what to do here
* under the MIT license, probably?
*/
/*

17
repo/nord/mod.js
View File

@ -1,17 +0,0 @@
/*
* nord v0.1.0
* (c) 2020 MANNEN
* dunno what to do here
* under the MIT license, probably?
*/
'use strict';
module.exports = {
id: 'ff87ff66-4910-436f-a843-7598edde2a7f',
tags: ['theme', 'dark'],
name: 'nord',
desc: 'An arctic, north-bluish color palette.',
version: '0.1.0',
author: 'MANNEN',
};

186
repo/nord/variables.css
View File

@ -1,186 +0,0 @@
/*
* nord v0.1.0
* (c) 2020 MANNEN
* dunno what to do here
* under the MIT license, probably?
*/
@import 'https://rsms.me/inter/inter.css';
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');
:root {
/** dark **/
--nord0: #2e3440; /*dark1*/
--nord1: #3b4252; /*dark2*/
--nord2: #434c5e; /*dark3*/
--nord3: #4c566a; /*dark4*/
--nord4: #d8dee9; /*light1*/
--nord5: #e5e9f0; /*light2*/
--nord6: #eceff4; /*light3*/
--nord7: #8fbcbb; /*frost1*/
--nord8: #88c0d0; /*frost2*/
--nord9: #81a1c1; /*frost3*/
--nord10: #5e81ac; /*frost4*/
--nord11: #bf616a; /*red*/
--nord12: #d08770; /*orange*/
--nord13: #ebcb8b; /*yellow*/
--nord14: #a3be8c; /*green*/
--nord15: #b48ead; /*purple*/
--theme_dark--main: var(--nord0);
--theme_dark--sidebar: var(--nord1);
--theme_dark--overlay: rgb(41 37 37 / 60%);
--theme_dark--dragarea: var(--nord0);
--theme_dark--box-shadow: rgba(15, 15, 15, 0.2) 0px 0px 0px 1px,
rgba(15, 15, 15, 0.2) 0px 2px 4px;
--theme_dark--box-shadow_strong: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px,
rgba(15, 15, 15, 0.2) 0px 3px 6px, rgba(15, 15, 15, 0.4) 0px 9px 24px;
--theme_dark--font_sans: 'Inter', -apple-system, BlinkMacSystemFont,
'Segoe UI', Helvetica, 'Apple Color Emoji', Arial, sans-serif,
'Segoe UI Emoji', 'Segoe UI Symbol';
--theme_dark--font_code: 'Fira Code', monospace;
--theme_dark--scrollbar: var(--nord2);
--theme_dark--scrollbar-border: transparent;
--theme_dark--scrollbar_hover: var(--nord3);
--theme_dark--card: var(--nord1);
--theme_dark--gallery: var(--nord2);
--theme_dark--select_input: rgb(55, 60, 63);
--theme_dark--table-border: rgba(255, 255, 255, 0.1);
--theme_dark--ui-border: rgba(255, 255, 255, 0.07);
--theme_dark--interactive_hover: var(--nord3);
--theme_dark--interactive_hover-border: transparent;
--theme_dark--button_close: var(--nord11);
--theme_dark--button_close-fill: var(--nord6);
--theme_dark--selected: rgb(136 192 208 / 50%);
--theme_dark--primary: var(--nord8);
--theme_dark--primary_hover: var(--nord8);
--theme_dark--primary_click: var(--nord8);
--theme_dark--primary_indicator: var(--nord11);
--theme_dark--option-color: var(--nord4);
--theme_dark--option-background: transparent;
--theme_dark--option_active-color: var(--nord4);
--theme_dark--option_active-background: var(--theme_dark--primary);
--theme_dark--option_hover-color: var(--nord4);
--theme_dark--option_hover-background: var(--nord4);
--theme_dark--danger_text: var(--nord11);
--theme_dark--danger_border: rgba(235, 87, 87, 0.5);
--theme_dark--text: var(--nord4);
--theme_dark--text_ui: var(--nord4);
--theme_dark--text_ui_info: var(--nord4);
--theme_dark--text_gray: rgba(151, 154, 155, 0.95);
--theme_dark--text_brown: rgb(147, 114, 100);
--theme_dark--text_orange: var(--nord12);
--theme_dark--text_yellow: var(--nord13);
--theme_dark--text_green: var(--nord14);
--theme_dark--text_blue: var(--nord9);
--theme_dark--text_purple: var(--nord15);
--theme_dark--text_pink: rgb(193 106 153);
--theme_dark--text_red: var(--nord11);
--theme_dark--bg-text: var(--theme_dark--text);
--theme_dark--bg_gray: rgb(69, 75, 78);
--theme_dark--bg_gray-text: var(--theme_dark--bg-text);
--theme_dark--bg_brown: rgb(67, 64, 64);
--theme_dark--bg_brown-text: var(--theme_dark--bg-text);
--theme_dark--bg_orange: var(--nord12);
--theme_dark--bg_orange-text: var(--theme_light--bg-text);
--theme_dark--bg_yellow: var(--nord13);
--theme_dark--bg_yellow-text: var(--theme_light--bg-text);
--theme_dark--bg_green: var(--nord14);
--theme_dark--bg_green-text: var(--theme_dark--bg-text);
--theme_dark--bg_blue: var(--nord9);
--theme_dark--bg_blue-text: var(--theme_dark--bg-text);
--theme_dark--bg_purple: var(--nord15);
--theme_dark--bg_purple-text: var(--theme_dark--bg-text);
--theme_dark--bg_pink: rgb(193 106 153);
--theme_dark--bg_pink-text: var(--theme_dark--bg-text);
--theme_dark--bg_red: var(--nord11);
--theme_dark--bg_red-text: var(--theme_dark--bg-text);
--theme_dark--line-text: var(--theme_dark--text);
--theme_dark--line_gray: rgb(69, 75, 78);
--theme_dark--line_gray-text: var(--theme_dark--line-text);
--theme_dark--line_brown: rgb(67, 64, 64);
--theme_dark--line_brown-text: var(--theme_dark--line-text);
--theme_dark--line_orange: var(--nord12);
--theme_dark--line_orange-text: var(--theme_light--line-text);
--theme_dark--line_yellow: var(--nord13);
--theme_dark--line_yellow-text: var(--theme_light--line-text);
--theme_dark--line_green: var(--nord14);
--theme_dark--line_green-text: var(--theme_dark--line-text);
--theme_dark--line_blue: var(--nord9);
--theme_dark--line_blue-text: var(--theme_dark--line-text);
--theme_dark--line_purple: var(--nord15);
--theme_dark--line_purple-text: var(--theme_dark--line-text);
--theme_dark--line_pink: rgb(193 106 153);
--theme_dark--line_pink-text: var(--theme_dark--line-text);
--theme_dark--line_red: var(--nord11);
--theme_dark--line_red-text: var(--theme_dark--line-text);
--theme_dark--select-text: var(--theme_dark--text);
--theme_dark--select_gray: rgba(151, 154, 155, 0.5);
--theme_dark--select_gray-text: var(--theme_dark--select-text);
--theme_dark--select_brown: rgba(147, 114, 100, 0.5);
--theme_dark--select_brown-text: var(--theme_dark--select-text);
--theme_dark--select_orange: rgba(255, 163, 68, 0.5);
--theme_dark--select_orange-text: var(--theme_dark--select-text);
--theme_dark--select_yellow: rgba(255, 220, 73, 0.5);
--theme_dark--select_yellow-text: var(--theme_dark--select-text);
--theme_dark--select_green: rgba(77, 171, 154, 0.5);
--theme_dark--select_green-text: var(--theme_dark--select-text);
--theme_dark--select_blue: rgba(82, 156, 202, 0.5);
--theme_dark--select_blue-text: var(--theme_dark--select-text);
--theme_dark--select_purple: rgba(154, 109, 215, 0.5);
--theme_dark--select_purple-text: var(--theme_dark--select-text);
--theme_dark--select_pink: rgba(226, 85, 161, 0.5);
--theme_dark--select_pink-text: var(--theme_dark--select-text);
--theme_dark--select_red: rgba(255, 115, 105, 0.5);
--theme_dark--select_red-text: var(--theme_dark--select-text);
--theme_dark--callout-text: var(--theme_dark--text);
--theme_dark--callout_gray: rgba(69, 75, 78, 0.3);
--theme_dark--callout_gray-text: var(--theme_dark--callout-text);
--theme_dark--callout_brown: rgba(67, 64, 64, 0.3);
--theme_dark--callout_brown-text: var(--theme_dark--callout-text);
--theme_dark--callout_orange: rgba(89, 74, 58, 0.3);
--theme_dark--callout_orange-text: var(--theme_dark--callout-text);
--theme_dark--callout_yellow: rgba(89, 86, 59, 0.3);
--theme_dark--callout_yellow-text: var(--theme_dark--callout-text);
--theme_dark--callout_green: rgba(53, 76, 75, 0.3);
--theme_dark--callout_green-text: var(--theme_dark--callout-text);
--theme_dark--callout_blue: rgba(54, 73, 84, 0.3);
--theme_dark--callout_blue-text: var(--theme_dark--callout-text);
--theme_dark--callout_purple: rgba(68, 63, 87, 0.3);
--theme_dark--callout_purple-text: var(--theme_dark--callout-text);
--theme_dark--callout_pink: rgba(83, 59, 76, 0.3);
--theme_dark--callout_pink-text: var(--theme_dark--callout-text);
--theme_dark--callout_red: rgba(89, 65, 65, 0.3);
--theme_dark--callout_red-text: var(--theme_dark--callout-text);
--theme_dark--code_inline-text: var(--nord11);
--theme_dark--code_inline-background: rgba(135, 131, 120, 0.15);
--theme_dark--code-text: var(--theme_dark--text);
--theme_dark--code-background: var(--theme_dark--card);
--theme_dark--code_function: var(--theme_dark--text_blue);
--theme_dark--code_keyword: var(--theme_dark--text_pink);
--theme_dark--code_tag: var(--theme_dark--text_pink);
--theme_dark--code_operator: var(--theme_dark--text_yellow);
--theme_dark--code_important: var(--theme_dark--text_yellow);
--theme_dark--code_property: var(--theme_dark--text_pink);
--theme_dark--code_builtin: var(--theme_dark--text_yellow);
--theme_dark--code_attr-name: var(--theme_dark--text_yellow);
--theme_dark--code_comment: var(--theme_dark--text_gray);
--theme_dark--code_punctuation: var(--theme_dark--text_gray);
--theme_dark--code_doctype: var(--theme_dark--text_gray);
--theme_dark--code_number: var(--theme_dark--text_purple);
--theme_dark--code_string: var(--theme_dark--text_orange);
--theme_dark--code_attr-value: var(--theme_dark--text_orange);

411
repo/notion-icons/app.css
View File

@ -1,411 +0,0 @@
/*
* notion-icons
* (c) 2019 jayhxmo (https://jaymo.io/)
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 CloudHill
* under the MIT license
*/
/* tab */
[hide-active-bar] > :nth-child(2) {
display: none;
}
.notion-icons--tab,
.notion-icons--tab > div {
color: var(--theme--text) !important;
}
#notion-icons--active-bar {
border-bottom: 2px solid var(--theme--text);
position: absolute;
bottom: -1px;
left: 8px;
right: 8px;
}
.notion-icons--restore-button svg {
width: 16px;
height: 16px;
fill: var(--theme--text_ui_info);
}
/* interactive hover */
.notion-icons--tab > div:hover,
.notion-icons--icon:hover,
.notion-icons--toggle:hover,
.notion-icons--restore-button:hover,
.notion-icons--removed-set:hover {
background: var(--theme--interactive_hover);
box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border) !important;
}
/* container */
#notion-icons {
position: absolute;
top: 1px;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
display: flex;
flex-direction: column;
align-items: stretch;
background: var(--theme--card);
border-radius: 3px;
overflow: hidden;
}
/* search */
.notion-icons--search {
flex-shrink: 0;
height: 28px;
min-width: 0px;
margin: 9px 14px 10px;
padding: 3px 6px;
border-radius: 3px;
display: flex;
align-items: center;
position: relative;
font-size: 14px;
line-height: 1.2;
background: var(--theme--select_input);
box-shadow: rgba(15, 15, 15, 0.2) 0px 0px 0px 1px inset;
user-select: none;
cursor: text;
}
.notion-dark-theme .notion-icons--search {
background: rgba(15, 15, 15, 0.3);
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px inset;
}
.notion-icons--search input {
font-size: inherit;
line-height: inherit;
border: none;
background: none;
width: 100%;
display: block;
resize: none;
padding: 0px;
}
.notion-icons--search svg {
flex-grow: 0;
flex-shrink: 0;
width: 14px;
height: 14px;
display: block;
fill: inherit;
backface-visibility: hidden;
margin-right: 6px;
color: rgba(55, 53, 47, 0.8);
}
.notion-dark-theme .notion-icons--search svg {
color: rgb(202, 204, 206);
}
/* scroller */
.notion-icons--scroller {
padding: 8px 12px;
overflow: hidden auto;
display: flex;
flex-direction: column;
}
/* divider */
.notion-icons--divider {
height: 1px;
margin-bottom: 9px;
border-bottom: 1px solid var(--theme--table-border);
}
/* icon set */
.notion-icons--icon-set {
margin-bottom: 8px;
color: var(--theme--text);
font-size: 11px;
line-height: 1.5;
letter-spacing: 1px;
font-weight: 600;
border-radius: 2px;
}
.notion-icons--icon-set.error {
color: var(--theme--text_red);
background: var(--theme--line_red);
border: 1px solid var(--theme--select_red);
padding: 8px 16px;
}
.notion-icons--icon-set.error::after {
content: '!';
display: block;
font-size: 1.6em;
line-height: 0.9;
float: right;
}
/* icon set header/toggle */
.notion-icons--toggle {
display: flex;
align-items: center;
margin-bottom: 8px;
padding: 0.25em;
border-radius: 2px;
text-transform: uppercase;
user-select: none;
cursor: pointer;
transition: background 200ms, margin-bottom 200ms ease-in;
}
.notion-icons--icon-set.alert .notion-icons--toggle {
color: var(--theme--line_yellow-text);
background: var(--theme--line_yellow);
border: 1px solid var(--theme--select_yellow);
margin-left: -1px;
margin-right: -1px;
}
.notion-icons--icon-set.alert .notion-icons--toggle:hover {
background: var(--theme--select_yellow);
}
.notion-icons--toggle .triangle {
flex-grow: 0;
flex-shrink: 0;
width: 0.9em;
height: 1em;
margin: 0 0.75em 0 0.5em;
transition: transform 200ms ease-out 0s;
transform: rotateZ(180deg);
}
.notion-icons--author {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.notion-icons--author span,
.notion-icons--author a {
color: var(--theme--text_ui_info);
transition: color 20ms ease-in;
}
.notion-icons--toggle a:hover {
color: var(--theme--primary);
}
/* icon set body */
.notion-icons--body {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
flex-grow: 1;
margin-left: 1.2em;
overflow: hidden;
transition: height 200ms ease-in, opacity 200ms ease-in;
}
/* hidden icon set */
.notion-icons--icon-set[hidden-set] {
padding-bottom: 0;
}
.notion-icons--icon-set[hidden-set] .notion-icons--toggle {
margin-bottom: 0;
}
.notion-icons--icon-set[hidden-set] .triangle {
transform: rotateZ(90deg);
}
.notion-icons--icon-set[hidden-set] .notion-icons--body {
opacity: 0;
}
/* icons */
.notion-icons--icon {
width: 40px;
height: 40px;
padding: 4px;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
user-select: none;
cursor: pointer;
transition: background 20ms ease-in;
}
.notion-icons--icon img {
width: 100%;
height: 100%;
pointer-events: none;
}
/* spritesheet */
.notion-icons--icon div {
width: 32px;
height: 32px;
background-size: 32px;
background-repeat: no-repeat;
pointer-events: none;
}
.notion-icons--icon.error {
font-size: 20px;
background: var(--theme--line_yellow);
border: 1px solid var(--theme--select_yellow);
color: var(--theme--text_yellow);
}
.notion-icons--icon.error:hover {
background: var(--theme--select_yellow);
}
/* tooltip */
.notion-icons--tooltip {
position: fixed;
pointer-events: none;
z-index: 99;
}
.notion-icons--tooltip > div {
position: absolute;
top: 0px;
left: 0px;
width: 40px;
height: 40px;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
.notion-icons--tooltip-text {
bottom: calc(100% + 6px);
padding: 4px 8px;
border-radius: 3px;
display: flex;
align-items: center;
flex-direction: column;
position: relative;
max-width: calc(100vw - 24px);
background: rgb(15, 15, 15);
color: rgba(255, 255, 255, 0.9);
box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px;
font-size: 12px;
line-height: 1.4;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
}
.notion-dark-theme .notion-icons--tooltip-text {
background: rgb(202, 204, 206);
color: rgb(15, 15, 15);
}
/* actions */
.notion-icons--actions {
flex-grow: 0;
flex-shrink: 0;
margin-left: auto;
display: flex;
align-items: center;
}
/* spinner */
.notion-icons--spinner {
width: 12px;
height: 12px;
}
.notion-icons--spinner img {
width: 100%;
height: 100%;
animation: rotation 1.3s infinite linear;
}
/* remove button */
.notion-icons--remove-button {
display: flex;
justify-content: center;
align-items: center;
margin-left: 8px;
width: 16px;
height: 16px;
position: relative;
}
.notion-icons--remove-button::before {
content: 'Hide icon set';
position: absolute;
right: -3px;
padding: 4px 22px 4px 6px;
background: var(--theme--main);
box-shadow: var(--theme--box-shadow);
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 50ms ease-in;
}
.notion-icons--remove-button:hover::before {
opacity: 1;
pointer-events: auto;
}
.notion-icons--remove-button svg {
width: 100%;
height: 100%;
fill: var(--theme--text_ui_info);
z-index: 1;
}
/* restore icon sets modal */
.notion-icons--overlay-container {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
overflow: hidden;
}
.notion-icons--restore {
max-width: 320px;
max-height: 320px;
position: relative;
border-radius: 3px;
padding: 8px 0;
box-shadow: var(--theme--box-shadow_strong);
background: var(--theme--card);
overflow: hidden auto;
}
.notion-icons--removed-set {
display: flex;
align-items: center;
width: 100%;
padding: 8px 14px;
user-select: none;
cursor: pointer;
transition: background 0.4s ease;
}
/* animation */
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}

3
repo/notion-icons/icons/remove.svg
View File

@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<polygon class="cls-1" points="18.72 16.6 14.12 12 18.72 7.4 16.6 5.28 12 9.88 7.4 5.28 5.28 7.4 9.88 12 5.28 16.6 7.4 18.72 12 14.12 16.6 18.72 18.72 16.6"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 251 B

3
repo/notion-icons/icons/restore.svg
View File

@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<polygon class="cls-1" points="20 10.5 13.5 10.5 13.5 4 10.5 4 10.5 10.5 4 10.5 4 13.5 10.5 13.5 10.5 20 13.5 20 13.5 13.5 20 13.5 20 10.5"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 234 B

3
repo/notion-icons/icons/search.svg
View File

@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17">
<path d="M6.78027 13.6729C8.24805 13.6729 9.60156 13.1982 10.709 12.4072L14.875 16.5732C15.0684 16.7666 15.3232 16.8633 15.5957 16.8633C16.167 16.8633 16.5713 16.4238 16.5713 15.8613C16.5713 15.5977 16.4834 15.3516 16.29 15.1582L12.1504 11.0098C13.0205 9.86719 13.5391 8.45215 13.5391 6.91406C13.5391 3.19629 10.498 0.155273 6.78027 0.155273C3.0625 0.155273 0.0214844 3.19629 0.0214844 6.91406C0.0214844 10.6318 3.0625 13.6729 6.78027 13.6729ZM6.78027 12.2139C3.87988 12.2139 1.48047 9.81445 1.48047 6.91406C1.48047 4.01367 3.87988 1.61426 6.78027 1.61426C9.68066 1.61426 12.0801 4.01367 12.0801 6.91406C12.0801 9.81445 9.68066 12.2139 6.78027 12.2139Z" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 749 B

1
repo/notion-icons/icons/triangle.svg
View File

@ -1 +0,0 @@
<svg viewBox="0 0 100 100" class="triangle"><polygon points="5.9,88.2 50,11.8 94.1,88.2" /></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 97 B

653
repo/notion-icons/mod.js
View File

@ -1,653 +0,0 @@
/*
* notion-icons
* (c) 2020 jayhxmo (https://jaymo.io/)
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 CloudHill
* under the MIT license
*/
'use strict';
const { createElement } = require('../../pkg/helpers.js'),
fs = require('fs-extra'),
path = require('path'),
notionIconsUrl = 'https://raw.githubusercontent.com/notion-enhancer/icons/main/';
module.exports = {
id: '2d1f4809-9581-40dd-9bf3-4239db406483',
tags: ['extension'],
name: 'notion icons',
desc:
'use custom icon sets directly in notion.',
version: '1.2.0',
author: 'jayhxmo',
options: [
{
key: 'hide',
label: 'hide icon sets by default.',
type: 'toggle',
value: false,
},
{
key: 'json',
label: 'insert custom json',
type: 'file',
extensions: ['json'],
},
],
hacks: {
'renderer/preload.js'(store, __exports) {
let garbageCollector = [],
filterMap = new WeakMap();
function getAsync(urlString, callback) {
let httpReq = new XMLHttpRequest();
httpReq.onreadystatechange = function() {
if (httpReq.readyState == 4 && httpReq.status == 200) callback(httpReq.responseText);
};
httpReq.open('GET', urlString, true);
httpReq.send(null);
}
const menuIcons = {};
(async () => {
menuIcons.triangle = await fs.readFile( path.resolve(__dirname, 'icons/triangle.svg') );
menuIcons.remove = await fs.readFile( path.resolve(__dirname, 'icons/remove.svg' ) );
menuIcons.restore = await fs.readFile( path.resolve(__dirname, 'icons/restore.svg' ) );
menuIcons.search = await fs.readFile( path.resolve(__dirname, 'icons/search.svg' ) );
})();
// source => icon data
const enhancerIconSets = new Map();
getAsync(notionIconsUrl + 'icons.json', iconsData => {
const data = JSON.parse(iconsData);
(data.icons || data).forEach(set => {
enhancerIconSets.set(set.source, set);
})
});
// array
let customIconSets;
if (store().json) {
const customData = JSON.parse(
fs.readFileSync(store().json)
)
customIconSets = customData.icons || customData;
}
// notion icons overlay
function addIconsTab() {
// prevent icons tab duplication
if (getTab(5))
return removeIconsOverlay();
// change 'Upload an image' to 'Upload'
getTab(2, true).innerText = 'Upload';
// initialize icons tab
const iconsTab = getTab(3).cloneNode(true);
iconsTab.className = 'notion-icons--tab';
iconsTab.firstChild.innerText = 'Icons';
iconsTab.firstChild.addEventListener('click', renderIconsOverlay);
// insert icons tab
const tabStrip = getTab(1).parentElement;
tabStrip.insertBefore(iconsTab, tabStrip.lastChild);
initCloseTriggers();
}
function renderIconsOverlay() {
if (!isCurrentTab(4)) {
// switch to 3rd tab so that the link can be input in the underlay
if (!isCurrentTab(3)) getTab(3, true).click();
if (
store().removedSets?.length > 0 &&
enhancerIconSets.size > 0
)
addRestoreButton();
// set active bar on icons tab
const iconsTab = getTab(4),
activeBar = createElement(
`<div id="notion-icons--active-bar"></div>`
);
iconsTab.style.position = 'relative';
iconsTab.appendChild(activeBar);
getTab(3).setAttribute('hide-active-bar', '');
// create icons overlay
const notionIcons = createElement(
'<div id="notion-icons"></div>'
);
// render search bar
const search = createElement(`
<div class="notion-icons--search notion-focusable">
${menuIcons.search}
<input placeholder="Filter…" type="text">
</div>
`),
searchInput = search.lastElementChild;
searchInput.addEventListener('input', () => {
filterIcons(searchInput.value);
});
// render scroller and icon sets
const scroller = createElement(`
<div class="notion-icons--scroller"></div>
`);
scroller.appendChild( loadIconSets() );
notionIcons.append(search, scroller);
// insert icons overlay
document.querySelector('.notion-media-menu > .notion-scroller')
.appendChild(notionIcons);
// focus on search bar
requestAnimationFrame(() => {
searchInput.focus();
});
}
}
// convert icons data into renderable
function loadIconSets() {
const iconSets = new DocumentFragment();
if (customIconSets) {
customIconSets.forEach(i => {
iconSets.appendChild( renderIconSet(i) );
});
// divider
iconSets.appendChild(
createElement('<div class="notion-icons--divider"></div>')
);
}
if (enhancerIconSets.size > 0) {
enhancerIconSets.forEach((i, source) => {
// ignore removed icon sets
if ( store().removedSets?.includes(source) ) return;
i.sourceUrl = i.sourceUrl || (notionIconsUrl + source);
iconSets.appendChild( renderIconSet(i, true) );
});
}
return iconSets;
}
// returns icon set element
function renderIconSet(iconData, enhancerSet = false) {
const iconSet = createElement(
'<div class="notion-icons--icon-set"></div>'
);
try {
const author = iconData.author
? iconData.authorUrl
? ` by <a target="_blank" href="${iconData.authorUrl}">${iconData.author}</a>`
: ` by <span>${iconData.author}</span>`
: '';
const toggle = createElement(`
<div class="notion-icons--toggle">
${menuIcons.triangle}
<div class="notion-icons--author">${iconData.name}${author}</div>
<div class="notion-icons--actions">
<div class="notion-icons--spinner">
<img src="/images/loading-spinner.4dc19970.svg" />
</div>
</div>
</div>
`);
const iconSetBody = createElement(
'<div class="notion-icons--body"></div>'
);
iconSet.append(toggle, iconSetBody);
const promiseArray = [];
// render icons
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];
const icon = createElement(`<div class="notion-icons--icon"></div>`);
icon.innerHTML = enhancerSet
// load sprite sheet
? `<div style="background-image: url(${notionIconsUrl}${iconData.source}/sprite.png); background-position: 0 -${i * 32}px;"></div>`
: `<img src="${iconUrl}" />`;
// add filters to filterMap
const filters = [];
if (iconData.filter) {
if (iconData.filter === 'source') {
const filename = iconUrl.match(/.*\/(.+?)\./);
if (filename?.length > 1) {
filters.push(...filename[1].split(/[ \-_]/));
}
}
else if (Array.isArray(iconData.filter)) {
filters.push(...iconData.filter[i]);
}
icon.setAttribute('filter', filters.join(' '));
}
// add set name and author to filters
filters.push(...iconData.name.toLowerCase().split(' '));
if (iconData.author) filters.push(...iconData.author.toLowerCase().split(' '));
filterMap.set(icon, filters);
// make sure icons load
if (!enhancerSet) {
promiseArray.push(
new Promise((resolve, reject) => {
icon.firstChild.onload = resolve;
icon.firstChild.onerror = () => {
reject();
icon.classList.add('error');
icon.innerHTML = '!';
};
})
);
}
garbageCollector.push(icon);
icon.addEventListener('click', () => setPageIcon(iconUrl));
iconSetBody.appendChild(icon);
}
// hide spinner after all icons finish loading
(async () => {
const spinner = toggle.querySelector('.notion-icons--spinner'),
loadPromise = Promise.all(promiseArray);
loadPromise.then(
() => spinner.remove(),
() => {
iconSet.classList.add('alert')
spinner.remove();
}
);
})();
// add remove icon set button
if (enhancerSet) {
const removeButton = createElement(
`<div class="notion-icons--remove-button">${menuIcons.remove}</div>`
);
removeButton.addEventListener('click', e => {
e.stopPropagation();
removeIconSet(iconData);
});
iconSet.querySelector('.notion-icons--actions')
.appendChild(removeButton);
}
// set up toggle
toggle.addEventListener('click', e => {
if (e.target.nodeName === 'A') return;
toggleIconSet(iconSet);
});
// hide by default?
if (store().hide)
requestAnimationFrame(() => toggleIconSet(iconSet))
// tooltip
let timeout;
iconSetBody.addEventListener('mouseover', e => {
const el = e.target;
if (!el.hasAttribute('filter')) return;
document.querySelector('.notion-icons--tooltip')?.remove();
timeout = setTimeout(() => {
renderTooltip(el, el.getAttribute('filter'))
}, 300);
})
iconSetBody.addEventListener('mouseout', e => {
const el = e.target;
if (!el.hasAttribute('filter')) return;
document.querySelector('.notion-icons--tooltip')?.remove();
clearTimeout(timeout);
});
} catch (err) {
iconSet.classList.add('error');
iconSet.innerHTML = `Invalid Icon Set: ${iconData.name}`;
}
return iconSet;
}
function removeIconsOverlay() {
const elements = [
document.getElementById('notion-icons'),
document.getElementById('notion-icons--active-bar'),
document.querySelector('.notion-icons--restore-button'),
document.querySelector('.notion-icons--tooltip'),
]
elements.forEach(el => {
if (el) el.remove();
})
getTab(4).style.position = '';
if (getTab(3))
getTab(3).removeAttribute('hide-active-bar');
if (
document.querySelector('.notion-icons--overlay-container')
) closeRestoreOverlay();
if (garbageCollector.length) {
for (let i = 0; i < garbageCollector.length; i++) {
garbageCollector[i] = null;
}
garbageCollector = [];
}
}
function initCloseTriggers() {
// remove the icons overlay when clicking...
const triggers = [
// the fog layer
document.querySelector('.notion-overlay-container [style*="width: 100vw; height: 100vh;"]'),
// the first three buttons
...[1, 2, 3].map( n => getTab(n, true) ),
// the remove button
(getTab(5) || getTab(4)).lastElementChild,
];
triggers.forEach(t => {
t.addEventListener('click', removeIconsOverlay);
garbageCollector.push(t);
})
// remove the icons overlay when pressing the Escape key
document.querySelector('.notion-media-menu')
.addEventListener('keydown', e => {
if (e.keyCode === 27) removeIconsOverlay();
});
}
// restore overlay
function addRestoreButton() {
const buttons = getTab(1).parentElement.lastElementChild;
const restoreButton = buttons.lastElementChild.cloneNode(true);
restoreButton.className = 'notion-icons--restore-button';
restoreButton.innerHTML = menuIcons.restore;
restoreButton.addEventListener('click', renderRestoreOverlay);
buttons.prepend(restoreButton);
}
function renderRestoreOverlay() {
if (!store().removedSets) return;
store().removedSets.sort();
const overlayContainer = createElement(`
<div class="notion-icons--overlay-container"></div>
`);
overlayContainer.addEventListener('click', closeRestoreOverlay);
document.querySelector('.notion-app-inner').appendChild(overlayContainer);
const rect = document.querySelector('.notion-icons--restore-button')
.getBoundingClientRect();
const div = createElement(`
<div style="position: fixed; top: ${rect.top}px; left: ${rect.left}px; height: ${rect.height}px;">
<div style="position: relative; top: 100%; pointer-events: auto;"></div>
</div>
`);
const restoreOverlay = createElement(`
<div class="notion-icons--restore"></div>
`)
store().removedSets.forEach(source => {
restoreOverlay.appendChild( renderRestoreItem(source) );
})
overlayContainer.appendChild(div);
div.firstElementChild.appendChild(restoreOverlay);
// fade in
restoreOverlay.animate(
[ {opacity: 0}, {opacity: 1} ],
{ duration: 200 }
);
}
function renderRestoreItem(source) {
const iconData = enhancerIconSets.get(source);
const iconUrl = `
${iconData.sourceUrl || (notionIconsUrl + source)}/${source}_${0}.${iconData.extension}
`;
const restoreItem = createElement(`
<div class="notion-icons--removed-set">
<div style="flex-grow: 0; flex-shrink: 0; width: 32px; height: 32px;">
<img style="width: 100%; height: 100%" src="${iconUrl}" />
</div>
<span style="margin: 0 8px;">${iconData.name}</span>
</div>
`)
restoreItem.addEventListener('click', () => restoreIconSet(iconData));
return restoreItem;
}
function closeRestoreOverlay() {
const overlayContainer = document.querySelector('.notion-icons--overlay-container');
overlayContainer.removeEventListener('click', closeRestoreOverlay);
// fade out
document.querySelector('.notion-icons--restore').animate(
[ {opacity: 1}, {opacity: 0} ],
{ duration: 200 }
).onfinish = () => overlayContainer.remove();
}
// icon set actions
function toggleIconSet(iconSet, hide) {
const isHidden = iconSet.hasAttribute('hidden-set');
if (hide == null) hide = !isHidden;
const body = iconSet.lastChild;
if (hide && !isHidden) {
iconSet.setAttribute('hidden-set', '');
body.style.height = body.offsetHeight + 'px';
requestAnimationFrame(
() => body.style.height = 0
);
}
else if (!hide && isHidden) {
iconSet.removeAttribute('hidden-set');
// get height
body.style.height = '';
const height = body.offsetHeight;
body.style.height = 0;
requestAnimationFrame(
() => body.style.height = height + 'px'
);
setTimeout(
() => body.style.height = '', 200
);
}
}
function removeIconSet(iconData) {
if (!store().removedSets) store().removedSets = [];
if (!store().removedSets.includes(iconData.source))
store().removedSets.push(iconData.source);
removeIconsOverlay();
renderIconsOverlay();
}
function restoreIconSet(iconData) {
if (!store().removedSets) return;
store().removedSets = store().removedSets
.filter(source => source !== iconData.source);
removeIconsOverlay();
renderIconsOverlay();
}
// other actions
// submit the icon's url as an image link
function setPageIcon(iconUrl) {
const input = document.querySelector('.notion-media-menu input[type=url]');
const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
window.HTMLInputElement.prototype, 'value'
).set;
nativeInputValueSetter.call(input, iconUrl);
input.dispatchEvent(
new Event('input', { bubbles: true })
);
input.dispatchEvent(
new KeyboardEvent('keydown', { bubbles: true, cancelable: true, keyCode: 13 })
);
removeIconsOverlay();
}
function filterIcons(input) {
const iconSets = document.querySelectorAll('.notion-icons--icon-set');
if (!iconSets) return;
// show all sets and icons
if (!input) return iconSets.forEach(set => {
set.style.display = '';
set.querySelectorAll('.notion-icons--icon')
.forEach(i => i.style.display = '');
});
// split input into an array
else input = input.toLowerCase().trim().split(' ');
const findMatch = icon => {
const iconFilters = filterMap.get(icon).slice();
// match whole words for the first terms
if (input.length > 1) {
let index;
for (let i of input.slice(0, -1)) {
if (
( index = iconFilters.indexOf(i) ) >= 0
) {
iconFilters.splice(index, 1);
continue;
}
return false;
}
}
// match partially for the last term
for (let iconFilter of iconFilters) {
if (iconFilter.includes(input[input.length - 1])) {
return true;
};
}
return false;
}
iconSets.forEach(set => {
let found = false;
set.querySelectorAll('.notion-icons--icon')
.forEach(i => {
// hide icon set
if (!filterMap.has(i)) return;
if (findMatch(i)) {
i.style.display = '';
found = true;
} else i.style.display = 'none';
});
if (!found) set.style.display = 'none';
else {
set.style.display = '';
toggleIconSet(set, false);
}
})
}
function renderTooltip(el, text) {
const rect = el.getBoundingClientRect();
const overlayContainer = document.querySelector('.notion-overlay-container')
const tooltip = createElement(`
<div class="notion-icons--tooltip" style="left: ${rect.left}px; top: ${rect.top}px;">
<div></div>
</div>
`), tooltipText = createElement(
`<div class="notion-icons--tooltip-text">${text}</div>`
);
tooltip.firstElementChild.appendChild(tooltipText);
overlayContainer.appendChild(tooltip);
// prevent tooltip from rendering outside the window
const left = (tooltipText.offsetWidth / 2) - (rect.width / 2) - rect.left + 4;
if (left > 0) tooltipText.style.left = left + 'px';
}
document.addEventListener('readystatechange', () => {
if (document.readyState !== 'complete') return false;
const attempt_interval = setInterval(enhance, 500);
function enhance() {
const overlay = document.querySelector('.notion-overlay-container');
if (!overlay) return;
clearInterval(attempt_interval);
const observer = new MutationObserver((list, observer) => {
for ( let { addedNodes } of list) {
if (
addedNodes[0]?.querySelector?.('.notion-media-menu') &&
/^pointer-events: auto; position: relative; z-index: \d;$/
.test(addedNodes[0].style.cssText)
) {
addIconsTab();
}
}
});
observer.observe(overlay, {
childList: true,
subtree: true,
});
}
});
// helpers
function getTab(n, button = false) {
return document.querySelector(
`.notion-media-menu > :first-child > :first-child > :nth-child(${n}) ${button ? 'div' : ''}`
);
}
function isCurrentTab(n) {
return getTab(n).childNodes.length > 1;
}
},
},
};

64
repo/outliner/app.css
View File

@ -1,64 +0,0 @@
/*
* outliner
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 CloudHill
* under the MIT license
*/
.outliner {
max-height: 100%;
overflow: hidden auto;
}
.outline-header {
position: relative;
display: flex;
align-items: center;
height: 2.2em;
cursor: pointer;
user-select: none;
transition: background 20ms ease-in;
}
.outline-header:hover {
background: var(--theme--interactive_hover);
}
.outline-header .outline-link {
width: 100%;
height: 100%;
padding: 0 14px;
line-height: 2.2;
color: inherit;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.outline-header .outline-link:empty:before {
color: var(--theme--text_ui_info);
content: attr(outline-placeholder);
display: block;
}
.outline-header[header-level="2"] .outline-link {
text-indent: 18px;
}
.outline-header[header-level="3"] .outline-link {
text-indent: 36px;
}
.outliner[lined] .outline-header:not([header-level="1"])::before {
content: "";
border-left: solid 1px var(--theme--text_ui_info);
height: 2.2em;
opacity: 0.6;
position: absolute;
left: 18px;
pointer-events: none;
}
.outliner[lined] .outline-header[header-level="3"]::before {
border-right: solid 1px var(--theme--text_ui_info);
width: 18px;
}

8
repo/outliner/icon.svg
View File

@ -1,8 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<circle cx="5" cy="7" r="2.8"/>
<circle cx="5" cy="17" r="2.79"/>
<path d="M21,5.95H11c-0.55,0-1-0.45-1-1v0c0-0.55,0.45-1,1-1h10c0.55,0,1,0.45,1,1v0C22,5.5,21.55,5.95,21,5.95z"/>
<path d="M17,10.05h-6c-0.55,0-1-0.45-1-1v0c0-0.55,0.45-1,1-1h6c0.55,0,1,0.45,1,1v0C18,9.6,17.55,10.05,17,10.05z"/>
<path d="M21,15.95H11c-0.55,0-1-0.45-1-1v0c0-0.55,0.45-1,1-1h10c0.55,0,1,0.45,1,1v0C22,15.5,21.55,15.95,21,15.95z" />
<path d="M17,20.05h-6c-0.55,0-1-0.45-1-1v0c0-0.55,0.45-1,1-1h6c0.55,0,1,0.45,1,1v0C18,19.6,17.55,20.05,17,20.05z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 633 B

40
repo/outliner/mod.js
View File

@ -1,40 +0,0 @@
/*
* outliner
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 CloudHill
* under the MIT license
*/
'use strict';
const store = require("../../pkg/store");
module.exports = {
id: '87e077cc-5402-451c-ac70-27cc4ae65546',
tags: ['extension', 'panel'],
name: 'outliner',
desc: 'table of contents.',
version: '1.2.1',
author: 'CloudHill',
options: [
{
key: 'lined',
label: 'indentation lines',
type: 'toggle',
value: true
},
{
key: 'fullHeight',
label: 'full height',
type: 'toggle',
value: false
}
],
panel: {
html: "panel.html",
name: "Outline",
icon: "icon.svg",
js: "panel.js",
fullHeight: store('87e077cc-5402-451c-ac70-27cc4ae65546').fullHeight,
}
};

1
repo/outliner/panel.html
View File

@ -1 +0,0 @@
<div class="outliner"></div>

161
repo/outliner/panel.js
View File

@ -1,161 +0,0 @@
/*
* outliner
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 CloudHill
* under the MIT license
*/
'use strict';
const { createElement } = require("../../pkg/helpers");
module.exports = (store, __exports) => {
let lastSearch;
// Observe for page changes
const pageObserver = new MutationObserver((list, observer) => {
for ( let { addedNodes } of list) {
if (addedNodes[0]) {
if (addedNodes[0].className === 'notion-page-content') {
startContentObserver();
}
// Clear outline on database pages
else if (addedNodes[0].className === 'notion-scroller') {
contentObserver.disconnect();
const outline = document.querySelector('.outliner');
if (outline) outline.textContent = '';
}
}
}
});
// Observe for header changes
const contentObserver = new MutationObserver((list, observer) => {
list.forEach(m => {
let header;
if (
(
m.type === 'childList' &&
(
m.target.hasAttribute('placeholder') ||
m.target.className?.includes('header-block')
) &&
(
(header = getHeaderBlock(m.target)) ||
(header = getHeaderBlock(m.addedNodes[0]))
)
) ||
(
m.type === 'characterData' &&
(header = getHeaderBlock(m.target.parentElement))
)
) updateOutlineHeader(header);
else if (
m.type === 'childList' && m.removedNodes[0] &&
(
isHeaderElement(m.removedNodes[0]) ||
m.removedNodes[0].querySelector?.('[class*="header-block"]')
)
) findHeaders();
})
});
function startContentObserver() {
findHeaders();
contentObserver.disconnect();
contentObserver.observe(
document.querySelector('.notion-page-content'),
{
childList: true,
subtree: true,
characterData: true,
}
);
}
function findHeaders() {
// Add cooldown to prevent the function being run twice at the 'same' time
if (lastSearch >= (Date.now() - 10)) return;
lastSearch = Date.now();
const outline = document.querySelector('.outliner');
if (!outline) return;
outline.textContent = '';
const pageContent = document.querySelector('.notion-page-content'),
headerBlocks = pageContent.querySelectorAll('[class*="header-block"]'),
fragment = new DocumentFragment();
headerBlocks.forEach(header => {
const blockId = header.dataset.blockId.replace(/-/g, ''),
headerEl = header.querySelector('[placeholder]'),
placeholder = headerEl.getAttribute('placeholder');
const outlineHeader = createElement(`
<div class="outline-header" header-level="${placeholder.slice(-1)}">
<a href="${window.location.pathname}#${blockId}" class="outline-link"
outline-placeholder="${placeholder}"></a>
</div>
`);
header.outline = outlineHeader;
outlineHeader.firstElementChild.innerHTML = headerEl.innerHTML;
fragment.appendChild(outlineHeader);
})
outline.appendChild(fragment);
}
function updateOutlineHeader(header) {
const headerEl = header.querySelector('[placeholder]');
if (!(
headerEl &&
header.outline?.parentElement
)) return findHeaders();
const outlineHeader = header.outline;
outlineHeader.firstElementChild.innerHTML = headerEl.innerHTML;
setOutlineLevel(outlineHeader, headerEl.getAttribute('placeholder').slice(-1));
}
function setOutlineLevel(outlineHeader, level) {
outlineHeader.setAttribute('header-level', level);
outlineHeader.firstElementChild.setAttribute('outline-placeholder', `Header ${level}`)
}
function getHeaderBlock(el) {
return el?.closest?.('[class*="header-block"]');
}
function isHeaderElement(el) {
let placeholder;
if (el) {
placeholder = el.getAttribute?.('placeholder') ||
el.querySelector?.('[placeholder]')?.getAttribute('placeholder');
}
if (!placeholder) placeholder = '';
return placeholder.includes('Heading');
}
return {
onLoad() {
if (store().lined) {
const outline = document.querySelector('.outliner');
outline?.setAttribute('lined', '');
}
// Find headers when switching panels
if (document.querySelector('.notion-page-content')) {
startContentObserver();
};
pageObserver.observe(document.body, {
childList: true,
subtree: true,
});
},
onSwitch() {
pageObserver.disconnect();
contentObserver.disconnect();
}
}
}

12
repo/panel-sites/app.css
View File

@ -1,12 +0,0 @@
/*
* panel sites
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 CloudHill
* under the MIT license
*/
.panel-site {
border: none;
flex: 1;
background: white;
}

28
repo/panel-sites/mod.js
View File

@ -1,28 +0,0 @@
/*
* panel sites
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 CloudHill
* under the MIT license
*/
'use strict';
module.exports = {
id: '0d541743-eb2c-4d77-83a8-3b2f5e8e5dff',
tags: ['extension', 'panel'],
name: 'panel sites',
desc: 'embed sites on the site panel.',
version: '1.0.0',
author: 'CloudHill',
options: [
{
key: 'sites',
label: 'list of sites',
type: 'file',
extensions: ['json'],
},
],
panel: {
js: 'panel.js'
}
};

45
repo/panel-sites/panel.js
View File

@ -1,45 +0,0 @@
/*
* panel sites
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 CloudHill
* under the MIT license
*/
const electron = require('electron')
module.exports = (store) => {
let iframe;
const mainWindow = electron.remote.getCurrentWindow();
const originalUserAgent = mainWindow.webContents.getUserAgent();
const mobileUserAgent =
'Mozilla/5.0 (Linux; Android 7.0; SM-G930V Build/NRD90M) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.125 Mobile Safari/537.36'
// bypass x-frame-options
mainWindow.webContents.session.webRequest.onHeadersReceived((details, callback) => {
const responseHeaders = Object.entries(details.responseHeaders)
.filter( h => !/x-frame-options/i.test(h[0]) );
callback({
responseHeaders: Object.fromEntries(responseHeaders)
});
});
// handle opening mobile sites
function setUserAgent(userAgent) {
mainWindow.webContents.session.webRequest.onBeforeSendHeaders((details, callback) => {
details.requestHeaders['User-Agent'] = userAgent;
callback({ cancel: false, requestHeaders: details.requestHeaders });
});
}
return {
onLoad() {
iframe = document.querySelector('.panel-site');
if (iframe.hasAttribute('mobile-user-agent'))
setUserAgent(mobileUserAgent);
},
onSwitch() {
if (iframe.hasAttribute('mobile-user-agent'))
setUserAgent(originalUserAgent);
}
}
}

78
repo/pastel-dark/app.css
View File

@ -1,78 +0,0 @@
/*
* pastel dark
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 u/zenith_illinois
* 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
[style*='font-family: iawriter-mono, Nitti, Menlo, Courier, monospace;'] {
filter: hue-rotate(170deg) !important;
}
.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: rgb(235, 87, 87);'],
.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: rgb(63, 68, 71);'],
.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;
}

21
repo/pastel-dark/mod.js
View File

@ -1,21 +0,0 @@
/*
* pastel dark
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 u/zenith_illinois
* under the MIT license
*/
'use strict';
module.exports = {
id: '033bff54-50ba-4cec-bdc0-b2ca7e307085',
tags: ['theme', 'dark'],
name: 'pastel dark',
desc: 'a smooth-transition true dark theme with a hint of pastel.',
version: '0.1.4',
author: {
name: 'zenith_illinois',
link: 'https://www.reddit.com/user/zenith_illinois/',
avatar: 'https://www.redditstatic.com/avatars/avatar_default_18_46A508.png',
},
};

119
repo/pastel-dark/variables.css
View File

@ -1,119 +0,0 @@
/*
* pastel dark
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 u/zenith_illinois
* under the MIT license
*/
@import 'https://rsms.me/inter/inter.css';
:root {
--theme_dark--main: #0b0b0b;
--theme_dark--sidebar: #0f0f0f;
--theme_dark--overlay: rgba(15, 15, 15, 0.6);
--theme_dark--dragarea: #0d0d0d;
--theme_dark--font_sans: 'Inter', -apple-system, BlinkMacSystemFont,
'Segoe UI', Helvetica, 'Apple Color Emoji', Arial, sans-serif,
'Segoe UI Emoji', 'Segoe UI Symbol';
--theme_dark--scrollbar: #141414;
--theme_dark--scrollbar_hover: #1b1b1b;
--theme_dark--card: #0f0f0f;
--theme_dark--gallery: rgba(8, 8, 8, 0.05);
--theme_dark--select_input: #0d0d0d;
--theme_dark--table-border: rgba(255, 255, 255, 0.1);
--theme_dark--ui-border: var(--theme_dark--table-border);
--theme_dark--interactive_hover: #1e1e1e5c;
--theme_dark--button_close: #eb5757;
--theme_dark--selected: rgba(184, 135, 247, 0.3);
--theme_dark--primary: #b887f7;
--theme_dark--primary_hover: #08d7c2;
--theme_dark--primary_click: #b887f7;
--theme_dark--primary_indicator: #08d7c2;
--theme_dark--option_active-background: var(--theme_dark--primary);
--theme_dark--option_hover-background: var(--theme_dark--primary_hover);
--theme_dark--danger_text: #eb5757;
--theme_dark--danger_border: rgba(235, 87, 87, 0.5);
--theme_dark--text: #ffffff;
--theme_dark--text_ui: #909090;
--theme_dark--text_ui_info: #464646;
--theme_dark--text_gray: #b1aeab;
--theme_dark--text_brown: #d8b6a6;
--theme_dark--text_orange: #fde3c0;
--theme_dark--text_yellow: #fcde93;
--theme_dark--text_green: #b3f5c8;
--theme_dark--text_blue: #bfe0fd;
--theme_dark--text_purple: #dac7fa;
--theme_dark--text_pink: #f7b8dc;
--theme_dark--text_red: #f8acb4;
--theme_dark--bg-text: rgb(55, 53, 47);
--theme_dark--bg_gray: #b1aeab;
--theme_dark--bg_brown: #d8b6a6;
--theme_dark--bg_orange: #fde3c0;
--theme_dark--bg_yellow: #fcde93;
--theme_dark--bg_green: #b3f5c8;
--theme_dark--bg_blue: #bfe0fd;
--theme_dark--bg_purple: #dac7fa;
--theme_dark--bg_pink: #f7b8dc;
--theme_dark--bg_red: #f8acb4;
--theme_dark--line-text: rgb(34, 34, 34);
--theme_dark--line_gray: #c2c1c089;
--theme_dark--line_brown: #dacec992;
--theme_dark--line_orange: #fff0dc9f;
--theme_dark--line_yellow: #ffe6a6ad;
--theme_dark--line_green: #c8fdd9a3;
--theme_dark--line_blue: #d1e9ffa3;
--theme_dark--line_purple: #e3d3ffa8;
--theme_dark--line_pink: #fdcce8b1;
--theme_dark--line_red: #ffc8ce9e;
--theme_dark--select-text: var(--theme_dark--bg-text);
--theme_dark--select_gray: var(--theme_dark--bg_gray);
--theme_dark--select_brown: var(--theme_dark--bg_brown);
--theme_dark--select_orange: var(--theme_dark--bg_orange);
--theme_dark--select_yellow: var(--theme_dark--bg_yellow);
--theme_dark--select_green: var(--theme_dark--bg_green);
--theme_dark--select_blue: var(--theme_dark--bg_blue);
--theme_dark--select_purple: var(--theme_dark--bg_purple);
--theme_dark--select_pink: var(--theme_dark--bg_pink);
--theme_dark--select_red: var(--theme_dark--bg_red);
--theme_dark--callout-text: var(--theme_dark--line-text);
--theme_dark--callout_gray: var(--theme_dark--line_gray);
--theme_dark--callout_brown: var(--theme_dark--line_brown);
--theme_dark--callout_orange: var(--theme_dark--line_orange);
--theme_dark--callout_yellow: var(--theme_dark--line_yellow);
--theme_dark--callout_green: var(--theme_dark--line_green);
--theme_dark--callout_blue: var(--theme_dark--line_blue);
--theme_dark--callout_purple: var(--theme_dark--line_purple);
--theme_dark--callout_pink: var(--theme_dark--line_pink);
--theme_dark--callout_red: var(--theme_dark--line_red);
--theme_dark--code_inline-text: #b3f5c8;
--theme_dark--code_inline-background: rgb(8, 8, 8);
--theme_dark--code-text: var(--theme_dark--text);
--theme_dark--code-background: #0f0f0f;
--theme_dark--code_function: var(--theme_dark--text_blue);
--theme_dark--code_keyword: var(--theme_dark--text_pink);
--theme_dark--code_tag: var(--theme_dark--text_pink);
--theme_dark--code_operator: var(--theme_dark--text_yellow);
--theme_dark--code_important: var(--theme_dark--text_yellow);
--theme_dark--code_property: var(--theme_dark--text_pink);
--theme_dark--code_builtin: var(--theme_dark--text_yellow);
--theme_dark--code_attr-name: var(--theme_dark--text_yellow);
--theme_dark--code_comment: var(--theme_dark--text_gray);
--theme_dark--code_punctuation: var(--theme_dark--text_gray);
--theme_dark--code_doctype: var(--theme_dark--text_gray);
--theme_dark--code_number: var(--theme_dark--text_purple);
--theme_dark--code_string: var(--theme_dark--text_orange);
--theme_dark--code_attr-value: var(--theme_dark--text_orange);
}

16
repo/pinky-boom-light/mod.js
View File

@ -1,16 +0,0 @@
/*
* Pinky Booooom Theme!
* (c) 2020 mugiwarafx (https://github.com/mugiwarafx)
* under the MIT license
*/
'use strict';
module.exports = {
id: "fbef391c-58ff-4938-bd45-b85ae0435e4e",
name: "pinky boom theme",
tags: ['theme', 'light', 'pink'],
desc: "pinkify your light theme",
version: "1.0.0",
author: "mugiwarafx",
};

384
repo/pinky-boom-light/variables.css
View File

@ -1,384 +0,0 @@
/*
* Pinky Booooom Theme!
* (c) 2020 mugiwarafx (https://github.com/mugiwarafx)
* under the MIT license
*/
:root {
/** light **/
--light_pinky-deep-pink: deeppink;
--light_pinky-lighten-1: #fce4ec;
--light_pinky-lighten-2: #f8bbd0;
--light_pinky-lighten-3: #f48fb1;
--light_pinky-lighten-4: #ff80ab;
--light_pinky-darken: #880e4f;
--light_pinky-alt-colors-white: #fefafa;
--light_pinky-alt-colors-transparent: transparent;
--light_pinky-deep-purple: #1e114e;
--light_pinky-trans-purple-1: #37352f06;
--light_pinky-trans-purple-2: #8868ff1a;
--light_pinky-trans-purple-3: #880e4f38;
--light_pinky-trans-purple-4: #8968ff42;
--light_pinky-trans-1: #ffc0cb61;
--light_pinky-trans-2: #ffc0cb96;
--light_pinky-trans-3: #ffc0cbb8;
--light_pinky-trans-4: #ffc0cbda;
--light_pinky-trans-5: #ffb6c175;
--light_pinky-trans-6: #ffc0cb99;
--light_pinky-brown: #a52a2a80;
--light_pinky-orange: #ffa60080;
--light_pinky-yellow: #ffff0080;
--light_pinky-green: #00ff0080;
--light_pinky-blue: #00ffff80;
--light_pinky-purple: #9b00ff80;
--light_pinky-pink: #ff149180;
--light_pinky-red: #ff000080;
--light_pinky-black: black;
--light_pinky-white: white;
--theme_light--main: var(--light_pinky-alt-colors-white);
--theme_light--sidebar: var(--light_pinky-alt-colors-transparent);
--theme_light--overlay: var(--light_pinky-trans-6);
--theme_light--dragarea: var(--light_pinky-lighten-1);
--theme_light--box-shadow: var(--light_pinky-trans-1) 0px 0px 0px 1px, var(--light_pinky-trans-1) 0px 2px 4px;
--theme_light--box-shadow_strong: var(--light_pinky-trans-4) 0px 0px 0px 1px, var(--light_pinky-trans-2) 0px 3px 6px, var(--light_pinky-trans-3) 0px 9px 24px;
--theme_light--page_normal-width: 900px;
--theme_light--page_full-width: 100%;
--theme_light--page-padding: calc(96px + env(safe-area-inset-left));
--theme_light--page_banner-height: 30vh;
--theme_light--preview-width: 977px;
--theme_light--preview-padding: 8rem;
--theme_light--preview_banner-height: 20vh;
--theme_light--font_sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol';
--theme_light--font_serif: Lyon-Text, Georgia, YuMincho, 'Yu Mincho', 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Songti TC', 'Songti SC', SimSun, 'Nanum Myeongjo', NanumMyeongjo, Batang, serif;
--theme_light--font_mono: iawriter-mono, Nitti, Menlo, Courier, monospace;
--theme_light--font_code: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace;
--theme_light--font_quote: var(--theme_light--font_sans);
--theme_light--font_headings: var(--theme_light--font_sans);
--theme_light--font_title-size: 40px;
--theme_light--font_heading1-size: 1.875em;
--theme_light--font_heading2-size: 1.5em;
--theme_light--font_heading3-size: 1.25em;
--theme_light--font_label-size: 14px;
--theme_light--font_body-size: 16px;
--theme_light--font_body-size_small: 14px;
--theme_light--font_code-size: 0.796875em;
--theme_light--font_sidebar-size: 14px;
--theme_light--text-block_line-height: 1.5;
--theme_light--text-block_margin-top: 1px;
--theme_light--scrollbar: var(--light_pinky-lighten-3);
--theme_light--scrollbar-border: var(--theme_pinky--helpers-transparent);
--theme_light--scrollbar_hover: var(--light_pinky-lighten-2);
--theme_light--card: var(--light_pinky-lighten-1);
--theme_light--gallery: var(--light_pinky-trans-purple-1);
--theme_light--select_input: var(--light_pinky-trans-purple-2);
--theme_light--table-border: var(--light_pinky-trans-purple-2);
--theme_light--ui-border: var(--light_pinky-trans-purple-2);
--theme_light--interactive_hover: var(--light_pinky-trans-purple-4);
--theme_light--interactive_hover-border: var(--light_pinky-alt-colors-transparent);
--theme_light--button_close: #e81123;
--theme_light--button_close-fill: var(--light_pinky-white);
--theme_light--selected: var(--light_pinky-trans-purple-4);
--theme_light--primary: var(--light_pinky-deep-pink);
--theme_light--primary_hover: var(--light_pinky-lighten-4);
--theme_light--primary_click: var(--light_pinky-lighten-4);
--theme_light--primary_indicator: rgb(235, 87, 87);
--theme_light--option-color: var(--light_pinky-darken);
--theme_light--option-background: var(--light_pinky-alt-colors-transparent);
--theme_light--option_hover-color: var(--light_pinky-darken);
--theme_light--option_hover-background: var(--light_pinky-trans-purple-3);
--theme_light--option_active-color: var(--light_pinky-white);
--theme_light--option_active-background: var(--theme_light--primary);
--theme_light--danger_text: rgb(235, 87, 87);
--theme_light--danger_border: rgba(235, 87, 87, 0.5);
--theme_light--text: var(--theme_light--text);
--theme_light--text_ui: var(--light_pinky-deep-purple);
--theme_light--text_ui_info: var(--light_pinky-deep-pink);
--theme_light--text_gray: rgb(155, 154, 151);
--theme_light--text_brown: rgb(100, 71, 58);
--theme_light--text_orange: rgb(217, 115, 13);
--theme_light--text_yellow: rgb(223, 171, 1);
--theme_light--text_green: rgb(15, 123, 108);
--theme_light--text_blue: rgb(11, 110, 153);
--theme_light--text_purple: var(--light_pinky-purple);
--theme_light--text_pink: var(--light_pinky-deep-pink);
--theme_light--text_red: rgb(224, 62, 62);
--theme_light--bg-text: var(--theme_light--text);
--theme_light--bg_gray: rgba(128, 128, 128, 0.25);
--theme_light--bg_gray-text: var(--theme_light--bg-text);
--theme_light--bg_brown: var(--light_pinky-brown);
--theme_light--bg_brown-text: var(--theme_light--bg-text);
--theme_light--bg_orange: var(--light_pinky-orange);
--theme_light--bg_orange-text: var(--light_pinky-black);
--theme_light--bg_yellow: var(--light_pinky-yellow);
--theme_light--bg_yellow-text: var(--light_pinky-black);
--theme_light--bg_green: var(--light_pinky-green);
--theme_light--bg_green-text: var(--light_pinky-black);
--theme_light--bg_blue: var(--light_pinky-blue);
--theme_light--bg_blue-text: var(--light_pinky-black);
--theme_light--bg_purple: var(--light_pinky-purple);
--theme_light--bg_purple-text: var(--light_pinky-white);
--theme_light--bg_pink: var(--light_pinky-pink);
--theme_light--bg_pink-text: var(--light_pinky-white);
--theme_light--bg_red: var(--light_pinky-red);
--theme_light--bg_red-text: var(--theme_light--bg-text);
--theme_light--line-text: var(--theme_light--text);
--theme_light--line_gray: rgba(128, 128, 128, 0.5);
--theme_light--line_gray-text: var(--theme_light--line-text);
--theme_light--line_brown: var(--light_pinky-brown);
--theme_light--line_brown-text: var(--theme_light--line-text);
--theme_light--line_orange: var(--light_pinky-orange);
--theme_light--line_orange-text: var(--theme_light--line-text);
--theme_light--line_yellow: var(--light_pinky-yellow);
--theme_light--line_yellow-text: var(--theme_light--line-text);
--theme_light--line_green: var(--light_pinky-green);
--theme_light--line_green-text: var(--theme_light--line-text);
--theme_light--line_blue: var(--light_pinky-blue);
--theme_light--line_blue-text: var(--theme_light--line-text);
--theme_light--line_purple: var(--light_pinky-purple);
--theme_light--line_purple-text: var(--theme_light--line-text);
--theme_light--line_pink: var(--light_pinky-pink);
--theme_light--line_pink-text: var(--theme_light--line-text);
--theme_light--line_red: var(--light_pinky-red);
--theme_light--line_red-text: var(--theme_light--line-text);
--theme_light--select-text: var(--theme_light--text);
--theme_light--select_gray: rgba(128, 128, 128, 0.25);
--theme_light--select_gray-text: var(--light_pinky-white);
--theme_light--select_brown: var(--light_pinky-brown);
--theme_light--select_brown-text: var(--light_pinky-white);
--theme_light--select_orange: var(--light_pinky-orange);
--theme_light--select_orange-text: var(--light_pinky-black);
--theme_light--select_yellow: var(--light_pinky-yellow);
--theme_light--select_yellow-text: var(--light_pinky-black);
--theme_light--select_green: var(--light_pinky-green);
--theme_light--select_green-text: var(--light_pinky-black);
--theme_light--select_blue: var(--light_pinky-blue);
--theme_light--select_blue-text: var(--light_pinky-black);
--theme_light--select_purple: var(--light_pinky-purple);
--theme_light--select_purple-text: var(--light_pinky-white);
--theme_light--select_pink: var(--light_pinky-pink);
--theme_light--select_pink-text: var(--light_pinky-white);
--theme_light--select_red: var(--light_pinky-red);
--theme_light--select_red-text: var(--light_pinky-white);
--theme_light--callout-text: var(--theme_light--text);
--theme_light--callout_gray: rgba(128, 128, 128, 0.25);
--theme_light--callout_gray-text: var(--light_pinky-black);
--theme_light--callout_brown: var(--light_pinky-brown);
--theme_light--callout_brown-text: var(--light_pinky-white);
--theme_light--callout_orange: var(--light_pinky-orange);
--theme_light--callout_orange-text: var(--light_pinky-black);
--theme_light--callout_yellow: var(--light_pinky-yellow);
--theme_light--callout_yellow-text: var(--light_pinky-black);
--theme_light--callout_green: var(--light_pinky-green);
--theme_light--callout_green-text: var(--light_pinky-black);
--theme_light--callout_blue: var(--light_pinky-blue);
--theme_light--callout_blue-text: var(--light_pinky-black);
--theme_light--callout_purple: var(--light_pinky-purple);
--theme_light--callout_purple-text: var(--light_pinky-white);
--theme_light--callout_pink: var(--light_pinky-pink);
--theme_light--callout_pink-text: var(--light_pinky-white);
--theme_light--callout_red: var(--light_pinky-red);
--theme_light--callout_red-text: var(--light_pinky-white);
--theme_light--code_inline-text: #eb5757;
--theme_light--code_inline-background: rgba(135, 131, 120, 0.15);
--theme_light--code-text: var(--theme_light--text);
--theme_light--code-background: #8868ff1f;
--theme_light--code_function: #dd4a68;
--theme_light--code_keyword: #07a;
--theme_light--code_tag: #905;
--theme_light--code_operator: #9a6e3a;
--theme_light--code_important: #e90;
--theme_light--code_property: #905;
--theme_light--code_builtin: #690;
--theme_light--code_attr-name: #690;
--theme_light--code_comment: slategray;
--theme_light--code_punctuation: #999;
--theme_light--code_doctype: slategray;
--theme_light--code_number: #905;
--theme_light--code_string: #690;
--theme_light--code_attr-value: #07a;
}
.notion-light-theme {
--theme--main: var(--theme_light--main);
--theme--sidebar: var(--theme_light--sidebar);
--theme--overlay: var(--theme_light--overlay);
--theme--dragarea: var(--theme_light--dragarea);
--theme--box-shadow: var(--theme_light--box-shadow);
--theme--box-shadow_strong: var(--theme_light--box-shadow_strong);
--theme--page_normal-width: var(--theme_light--page_normal-width);
--theme--page_full-width: var(--theme_light--page_full-width);
--theme--page-padding: var(--theme_light--page-padding);
--theme--page_banner-height: var(--theme_light--page_banner-height);
--theme--preview-width: var(--theme_light--preview-width);
--theme--preview-padding: var(--theme_light--preview-padding);
--theme--preview_banner-height: var(--theme_light--preview_banner-height);
--theme--font_sans: var(--theme_light--font_sans);
--theme--font_serif: var(--theme_light--font_serif);
--theme--font_mono: var(--theme_light--font_mono);
--theme--font_code: var(--theme_light--font_code);
--theme--font_quote: var(--theme_light--font_quote);
--theme--font_headings: var(--theme_light--font_headings);
--theme--font_title-size: var(--theme_light--font_title-size);
--theme--font_heading1-size: var(--theme_light--font_heading1-size);
--theme--font_heading2-size: var(--theme_light--font_heading2-size);
--theme--font_heading3-size: var(--theme_light--font_heading3-size);
--theme--font_label-size: var(--theme_light--font_label-size);
--theme--font_body-size: var(--theme_light--font_body-size);
--theme--font_body-size_small: var(--theme_light--font_body-size_small);
--theme--font_code-size: var(--theme_light--font_code-size);
--theme--font_sidebar-size: var(--theme_light--font_sidebar-size);
--theme--text-block_line-height: var(--theme_light--text-block_line-height);
--theme--text-block_margin-top: var(--theme_light--text-block_margin-top);
--theme--scrollbar: var(--theme_light--scrollbar);
--theme--scrollbar-border: var(--theme_light--scrollbar-border);
--theme--scrollbar_hover: var(--theme_light--scrollbar_hover);
--theme--card: var(--theme_light--card);
--theme--gallery: var(--theme_light--gallery);
--theme--select_input: var(--theme_light--select_input);
--theme--table-border: var(--theme_light--table-border);
--theme--ui-border: var(--theme_light--ui-border);
--theme--interactive_hover: var(--theme_light--interactive_hover);
--theme--interactive_hover-border: var(--theme_light--interactive_hover-border);
--theme--button_close: var(--theme_light--button_close);
--theme--button_close-fill: var(--theme_light--button_close-fill);
--theme--selected: var(--theme_light--selected);
--theme--primary: var(--theme_light--primary);
--theme--primary_hover: var(--theme_light--primary_hover);
--theme--primary_click: var(--theme_light--primary_click);
--theme--primary_indicator: var(--theme_light--primary_indicator);
--theme--option-color: var(--theme_light--option-color);
--theme--option-background: var(--theme_light--option-background);
--theme--option_hover-color: var(--theme_light--option_hover-color);
--theme--option_hover-background: var(--theme_light--option_hover-background);
--theme--option_active-color: var(--theme_light--option_active-color);
--theme--option_active-background: var(--theme_light--option_active-background);
--theme--danger_text: var(--theme_light--danger_text);
--theme--danger_border: var(--theme_light--danger_border);
--theme--text: var(--theme_light--text);
--theme--text_ui: var(--theme_light--text_ui);
--theme--text_ui_info: var(--theme_light--text_ui_info);
--theme--text_gray: var(--theme_light--text_gray);
--theme--text_brown: var(--theme_light--text_brown);
--theme--text_orange: var(--theme_light--text_orange);
--theme--text_yellow: var(--theme_light--text_yellow);
--theme--text_green: var(--theme_light--text_green);
--theme--text_blue: var(--theme_light--text_blue);
--theme--text_purple: var(--theme_light--text_purple);
--theme--text_pink: var(--theme_light--text_pink);
--theme--text_red: var(--theme_light--text_red);
--theme--select-text: var(--theme_light--select-text);
--theme--bg-text: var(--theme_light--bg-text);
--theme--bg_gray: var(--theme_light--bg_gray);
--theme--bg_gray-text: var(--theme_light--bg_gray-text);
--theme--bg_brown: var(--theme_light--bg_brown);
--theme--bg_brown-text: var(--theme_light--bg_brown-text);
--theme--bg_orange: var(--theme_light--bg_orange);
--theme--bg_orange-text: var(--theme_light--bg_orange-text);
--theme--bg_yellow: var(--theme_light--bg_yellow);
--theme--bg_yellow-text: var(--theme_light--bg_yellow-text);
--theme--bg_green: var(--theme_light--bg_green);
--theme--bg_green-text: var(--theme_light--bg_green-text);
--theme--bg_blue: var(--theme_light--bg_blue);
--theme--bg_blue-text: var(--theme_light--bg_blue-text);
--theme--bg_purple: var(--theme_light--bg_purple);
--theme--bg_purple-text: var(--theme_light--bg_purple-text);
--theme--bg_pink: var(--theme_light--bg_pink);
--theme--bg_pink-text: var(--theme_light--bg_pink-text);
--theme--bg_red: var(--theme_light--bg_red);
--theme--bg_red-text: var(--theme_light--bg_red-text);
--theme--line-text: var(--theme_light--line-text);
--theme--line_gray: var(--theme_light--line_gray);
--theme--line_gray-text: var(--theme_light--line_gray-text);
--theme--line_brown: var(--theme_light--line_brown);
--theme--line_brown-text: var(--theme_light--line_brown-text);
--theme--line_orange: var(--theme_light--line_orange);
--theme--line_orange-text: var(--theme_light--line_orange-text);
--theme--line_yellow: var(--theme_light--line_yellow);
--theme--line_yellow-text: var(--theme_light--line_yellow-text);
--theme--line_green: var(--theme_light--line_green);
--theme--line_green-text: var(--theme_light--line_green-text);
--theme--line_blue: var(--theme_light--line_blue);
--theme--line_blue-text: var(--theme_light--line_blue-text);
--theme--line_purple: var(--theme_light--line_purple);
--theme--line_purple-text: var(--theme_light--line_purple-text);
--theme--line_pink: var(--theme_light--line_pink);
--theme--line_pink-text: var(--theme_light--line_pink-text);
--theme--line_red: var(--theme_light--line_red);
--theme--line_red-text: var(--theme_light--line_red-text);
--theme--select_gray: var(--theme_light--select_gray);
--theme--select_gray-text: var(--theme_light--select_gray-text);
--theme--select_brown: var(--theme_light--select_brown);
--theme--select_brown-text: var(--theme_light--select_brown-text);
--theme--select_orange: var(--theme_light--select_orange);
--theme--select_orange-text: var(--theme_light--select_orange-text);
--theme--select_yellow: var(--theme_light--select_yellow);
--theme--select_yellow-text: var(--theme_light--select_yellow-text);
--theme--select_green: var(--theme_light--select_green);
--theme--select_green-text: var(--theme_light--select_green-text);
--theme--select_blue: var(--theme_light--select_blue);
--theme--select_blue-text: var(--theme_light--select_blue-text);
--theme--select_purple: var(--theme_light--select_purple);
--theme--select_purple-text: var(--theme_light--select_purple-text);
--theme--select_pink: var(--theme_light--select_pink);
--theme--select_pink-text: var(--theme_light--select_pink-text);
--theme--select_red: var(--theme_light--select_red);
--theme--select_red-text: var(--theme_light--select_red-text);
--theme--callout-text: var(--theme_light--callout-text);
--theme--callout_gray: var(--theme_light--callout_gray);
--theme--callout_gray-text: var(--theme_light--callout_gray-text);
--theme--callout_brown: var(--theme_light--callout_brown);
--theme--callout_brown-text: var(--theme_light--callout_brown-text);
--theme--callout_orange: var(--theme_light--callout_orange);
--theme--callout_orange-text: var(--theme_light--callout_orange-text);
--theme--callout_yellow: var(--theme_light--callout_yellow);
--theme--callout_yellow-text: var(--theme_light--callout_yellow-text);
--theme--callout_green: var(--theme_light--callout_green);
--theme--callout_green-text: var(--theme_light--callout_green-text);
--theme--callout_blue: var(--theme_light--callout_blue);
--theme--callout_blue-text: var(--theme_light--callout_blue-text);
--theme--callout_purple: var(--theme_light--callout_purple);
--theme--callout_purple-text: var(--theme_light--callout_purple-text);
--theme--callout_pink: var(--theme_light--callout_pink);
--theme--callout_pink-text: var(--theme_light--callout_pink-text);
--theme--callout_red: var(--theme_light--callout_red);
--theme--callout_red-text: var(--theme_light--callout_red-text);
--theme--code_inline-text: var(--theme_light--code_inline-text);
--theme--code_inline-background: var(--theme_light--code_inline-background);
--theme--code-text: var(--theme_light--code-text);
--theme--code-background: var(--theme_light--code-background);
--theme--code_function: var(--theme_light--code_function);
--theme--code_keyword: var(--theme_light--code_keyword);
--theme--code_tag: var(--theme_light--code_tag);
--theme--code_operator: var(--theme_light--code_operator);
--theme--code_important: var(--theme_light--code_important);
--theme--code_property: var(--theme_light--code_property);
--theme--code_builtin: var(--theme_light--code_builtin);
--theme--code_attr-name: var(--theme_light--code_attr-name);
--theme--code_comment: var(--theme_light--code_comment);
--theme--code_punctuation: var(--theme_light--code_punctuation);
--theme--code_doctype: var(--theme_light--code_doctype);
--theme--code_number: var(--theme_light--code_number);
--theme--code_string: var(--theme_light--code_string);
--theme--code_attr-value: var(--theme_light--code_attr-value);
}
.notion-sidebar{background-color: pink;}

48
repo/property-layout/app.css
View File

@ -1,48 +0,0 @@
/*
* property layout
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 alexander-kazakov
* under the MIT license
*/
.propertylayout-enhanced {
overflow: hidden;
transition: max-height 200ms ease-in, opacity 200ms ease-in;
}
.propertylayout-hidden {
max-height: 0 !important;
opacity: 0;
}
.propertylayout-toggle {
width: 100%;
text-align: left;
font-size: 0.85em;
font-weight: 600;
padding: 0.25em;
background: transparent;
color: var(--theme--text_ui);
border: none;
border-radius: 2px;
transition: background 200ms, margin-bottom 200ms ease-in;
}
.notion-scroller.vertical > div > :first-child .propertylayout-toggle {
margin-top: 1em;
}
.propertylayout-toggle[data-action='show'] {
margin-bottom: 1em;
}
.propertylayout-toggle:hover {
background: var(--theme--interactive_hover);
}
.propertylayout-toggle .triangle {
width: 0.6875em;
height: 0.6875em;
margin: 0 0.75em 0 0.5em;
transition: transform 200ms ease-out 0s;
transform: rotateZ(90deg);
}
.propertylayout-toggle[data-action="hide"] .triangle {
transform: rotateZ(180deg);
}

78
repo/property-layout/mod.js
View File

@ -1,78 +0,0 @@
/*
* property layout
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 alexander-kazakov
* under the MIT license
*/
'use strict';
const { createElement } = require('../../pkg/helpers.js');
module.exports = {
id: '4034a578-7dd3-4633-80c6-f47ac5b7b160',
tags: ['extension'],
name: 'property layout',
desc: 'auto-collapse page properties that usually push down page content.',
version: '0.2.4',
author: 'alexander-kazakov',
hacks: {
'renderer/preload.js'(store, __exports) {
document.addEventListener('readystatechange', (event) => {
if (document.readyState !== 'complete') return false;
let queue = [];
const observer = new MutationObserver((list, observer) => {
if (!queue.length) requestAnimationFrame(() => handle(queue));
queue.push(...list);
});
observer.observe(document.body, {
childList: true,
subtree: true,
});
function handle(list) {
queue = [];
let properties = document.querySelector(
'.notion-scroller.vertical [style*="env(safe-area-inset-left)"] > [style="width: 100%; font-size: 14px;"]'
);
if (
properties &&
!properties.classList.contains('propertylayout-enhanced')
) {
properties.classList.add(
'propertylayout-enhanced',
'propertylayout-hidden'
);
const toggle = createElement(
'<button class="propertylayout-toggle" data-action="show">Properties</button>'
);
toggle.prepend(
createElement('<svg viewBox="0 0 100 100" class="triangle"><polygon points="5.9,88.2 50,11.8 94.1,88.2 "></polygon></svg>')
);
toggle.addEventListener('click', (event) => {
properties.style.maxHeight = properties.children[0].offsetHeight + 'px';
setTimeout(() => {
properties.classList.toggle('propertylayout-hidden');
toggle.setAttribute(
'data-action',
properties.classList.contains('propertylayout-hidden')
? 'show'
: 'hide'
);
}, 0);
});
const propObserver = new MutationObserver(() => {
properties.style.maxHeight = '';
});
propObserver.observe(properties, {
childList: true,
subtree: true,
});
if (properties.previousElementSibling) {
properties.previousElementSibling.append(toggle);
} else properties.parentElement.prepend(toggle);
}
}
});
},
},
};

8
repo/registry.json Normal file
View File

@ -0,0 +1,8 @@
[
"menu@a6621988-551d-495a-97d8-3c568bca2e9e",
"theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082",
"components@36a2ffc9-27ff-480e-84a7-c7700a7d232d",
"tweaks@5174a483-c88d-4bf8-a95f-35cd330b76e2",
"bypass-preview@cb6fd684-f113-4a7a-9423-8f0f0cff069f",
"calendar-scroll@b1c7db33-dfee-489a-a76c-0dd66f7ed29a"
]

67
repo/right-to-left/mod.js
View File

@ -1,67 +0,0 @@
/*
* right-to-left
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 Omar Bahareth
* under the MIT license
*/
'use strict';
module.exports = {
id: 'b28ee2b9-4d34-4e36-be8a-ab5be3d79f51',
tags: ['extension'],
name: 'right-to-left',
desc: 'enables auto rtl/ltr text direction detection.',
version: '1.4.1',
author: 'obahareth',
hacks: {
'renderer/preload.js'(store, __exports) {
document.addEventListener('readystatechange', (event) => {
if (document.readyState !== 'complete') return false;
let queue = [];
const DOCUMENT_OBSERVER = new MutationObserver((list, observer) => {
if (!queue.length) requestIdleCallback(() => handle(queue));
queue.push(...list);
}),
PAGE_OBSERVER = new MutationObserver(autoAlignPageContent);
DOCUMENT_OBSERVER.observe(document.body, {
childList: true,
subtree: true,
});
function handle(list) {
queue = [];
for (let { addedNodes } of list) {
if (
addedNodes[0] &&
addedNodes[0].className === 'notion-page-content'
) {
autoAlignPageContent();
PAGE_OBSERVER.disconnect();
PAGE_OBSERVER.observe(addedNodes[0], {
childList: true,
subtree: false,
});
}
}
}
function autoAlignPageContent() {
document
.querySelectorAll(
`.notion-page-content > div[data-block-id]:not([dir]):not(.notion-column_list-block),
[placeholder="Untitled"]:not([dir]),
.notion-column-block > div[data-block-id]:not([dir])`
)
.forEach((block) => block.setAttribute('dir', 'auto'));
document
.querySelectorAll(
"div[placeholder='List'], div[placeholder='To-do']"
)
.forEach((item) => {
item.style['text-align'] = '-webkit-auto';
});
}
});
},
},
};

60
repo/scroll-to-top/app.css
View File

@ -1,60 +0,0 @@
/*
* scroll-to-top
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 CloudHill
* under the MIT license
*/
.bottom-right-buttons {
position: absolute;
bottom: 33px;
right: 33px;
z-index: 101;
cursor: default;
pointer-events: none;
}
.bottom-right-buttons > div {
margin-top: 8px;
pointer-events: auto;
user-select: none;
transition: opacity 700ms ease 0s, color 700ms ease 0s,
transform 700ms ease 0s;
cursor: pointer;
position: static !important;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
font-size: 20px;
background: var(--theme--interactive_hover);
box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border);
}
.notion-scroll-button {
display: flex !important;
}
.notion-scroll-button.hidden {
pointer-events: none;
visibility: hidden;
opacity: 0;
transform: translateY(10px);
transition-property: opacity, transform, visibility;
transition-delay: 0, 0, 700ms;
}
.notion-scroll-button > svg {
width: 18px;
height: 18px;
}

1
repo/scroll-to-top/arrow.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" fill="currentColor" viewBox="0 0 250 250"><path fill="currentColor" d="M102.683 234.52V110.968H67.5474L124.859 12.184L182.459 110.968H147.323V234.52H102.683Z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 231 B

137
repo/scroll-to-top/mod.js
View File

@ -1,137 +0,0 @@
/*
* scroll-to-top
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 CloudHill
* under the MIT license
*/
'use strict';
const { createElement } = require('../../pkg/helpers.js'),
path = require('path'),
fs = require('fs-extra');
module.exports = {
id: '0a958f5a-17c5-48b5-8713-16190cae1959',
tags: ['extension'],
name: 'scroll to top',
desc:
'add an arrow above the help button to scroll back to the top of a page.',
version: '1.0.0',
author: 'CloudHill',
options: [
{
key: 'smooth',
label: 'smooth scrolling',
type: 'toggle',
value: true,
},
{
key: 'top',
label: 'distance scrolled until button is shown:',
type: 'input',
value: 50,
},
{
key: 'unit',
label: 'unit to measure distance with:',
type: 'select',
value: ['percent', 'pixels'],
},
],
hacks: {
'renderer/preload.js'(store, __exports) {
document.addEventListener('readystatechange', (event) => {
if (document.readyState !== 'complete') return false;
const attempt_interval = setInterval(enhance, 500);
function enhance() {
if (!document.querySelector('.notion-frame')) return;
clearInterval(attempt_interval);
const $container = document.createElement('div');
const $help = document.querySelector('.notion-help-button');
const $scroll = createElement(
'<div class="notion-scroll-button" role="button"></div>'
);
(async () => {
$scroll.innerHTML = await fs.readFile(
path.resolve(`${__dirname}/arrow.svg`) // 🠙;
)
})();
$container.className = 'bottom-right-buttons';
$help.after($container);
$container.append($scroll);
$container.append($help);
if (store().top > 0) $scroll.classList.add('hidden');
$scroll.addEventListener('click', () => {
document.querySelector('.notion-frame > .notion-scroller').scroll({
top: 0,
left: 0,
behavior: store().smooth ? 'smooth' : 'auto',
});
});
let queue = [];
let $scroller = document.querySelector(
'.notion-frame > .notion-scroller'
);
let top = store().top || 0;
const observer = new MutationObserver((list, observer) => {
if (!queue.length) requestAnimationFrame(() => handle(queue));
queue.push(...list);
});
observer.observe(document.body, {
childList: true,
subtree: true,
});
function handle(list) {
queue = [];
setScrollDistance();
for (let { addedNodes } of list) {
if (
addedNodes[0] &&
(addedNodes[0].className === 'notion-page-content' ||
addedNodes[0].className === 'notion-scroller') &&
top > 0
) {
$scroll.classList.add('hidden');
$scroller = document.querySelector(
'.notion-frame > .notion-scroller'
);
setScrollDistance();
$scroller.addEventListener('scroll', (event) => {
if (
Math.ceil(event.target.scrollTop) < $scroller.top_distance
)
$scroll.classList.add('hidden');
else $scroll.classList.remove('hidden');
});
}
}
}
function setScrollDistance() {
$scroller.top_distance = top;
if (top > 0 && store().unit === 'percent') {
let content_height = Array.from($scroller.children).reduce(
(h, c) => h + c.offsetHeight,
0
);
$scroller.top_distance *=
(content_height - $scroller.offsetHeight) / 100;
}
}
}
});
},
},
};

219
repo/side-panel/app.css
View File

@ -1,219 +0,0 @@
/*
* side panel
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 CloudHill
* under the MIT license
*/
.notion-frame {
transition: padding-right 300ms ease-in-out;
}
.enhancer-panel--container {
flex-grow: 0;
flex-shrink: 0;
position: absolute;
top: 0;
bottom: 0;
right: 0;
z-index: 99;
height: 100vh;
background: var(--theme--sidebar);
color: var(--theme--text_ui);
font-weight: 500;
cursor: default;
transition: box-shadow 300ms ease-in, width 300ms ease-in-out;
}
#enhancer-panel {
display: flex;
flex-direction: column;
position: relative;
pointer-events: auto;
background: var(--theme--sidebar);
cursor: auto;
max-height: 100%;
transition: transform 300ms ease-in-out,
opacity 300ms ease-in-out,
right 300ms ease-in-out;
}
#enhancer-panel[data-locked="false"] {
max-height: calc(100vh - 120px);
box-shadow: var(--theme--box-shadow_strong) !important;
}
#enhancer-panel[data-full-height="true"] {
height: 100%;
}
#enhancer-panel[data-locked="false"][data-full-height="true"] {
height: calc(100vh - 120px);
}
.enhancer-panel--header {
flex-grow: 0;
flex-shrink: 0;
display: flex;
align-items: center;
height: 45px;
width: 100%;
color: var(--theme--text);
font-size: 14px;
padding: 2px 14px;
overflow: hidden;
user-select: none;
cursor: pointer;
transition: color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}
.enhancer-panel--header:hover {
background: var(--theme--interactive_hover);
}
.enhancer-panel--icon {
flex-grow: 0;
flex-shrink: 0;
border-radius: 3px;
width: 22px;
height: 22px;
margin-right: 8px;
display: flex;
align-items: center;
justify-content: center;
}
.enhancer-panel--icon svg {
width: 100%;
height: 100%;
}
.enhancer-panel--title {
margin-right: 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.enhancer-panel--reload-button {
flex-grow: 0;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 6px;
margin-right: 6px;
border-radius: 3px;
transition: background 20ms ease-in;
}
.enhancer-panel--reload-button:hover {
background: var(--theme--main)
}
.enhancer-panel--switcher-icon {
flex-grow: 0;
flex-shrink: 0;
width: 12px;
height: 12px;
fill: var(--theme--text_ui);
}
.enhancer-panel--reload-button svg,
.enhancer-panel--switcher-icon svg {
width: 100%;
height: 100%;
display: block;
fill: var(--theme--text_ui_info);
}
.enhancer-panel--toggle {
flex-grow: 0;
flex-shrink: 0;
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin-left: auto;
height: 24px;
width: 24px;
border-radius: 3px;
cursor: pointer;
opacity: 0;
transition: background 20ms ease-in, opacity 300ms ease-in;
}
#enhancer-panel:hover .enhancer-panel--toggle {
opacity: 1;
}
.enhancer-panel--toggle:hover {
background: var(--theme--interactive_hover);
}
.enhancer-panel--toggle svg {
width: 14px;
height: 14px;
fill: var(--theme--text_ui);
transition: transform 400ms ease-in;
fill: var(--theme--text_ui_info);
}
#enhancer-panel[data-locked="false"] .enhancer-panel--toggle svg {
transform: rotateZ(-180deg);
}
#enhancer-panel--content {
flex: 1;
width: 100%;
color: var(--theme--text);
font-size: var(--theme--font_body-size);
display: flex;
flex-direction: column;
position: relative;
min-height: 0;
}
.enhancer-panel--resize {
position: absolute;
top: 0px;
left: 0px;
height: 100vh;
width: 0px;
z-index: 1;
}
#enhancer-panel[data-locked="false"] .enhancer-panel--resize {
height: 100%;
}
.enhancer-panel--resize div {
height: 100%;
width: 6px;
}
.enhancer-panel--overlay-container {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
overflow: hidden;
}
.enhancer-panel--switcher {
max-width: 320px;
position: relative;
right: 14px;
border-radius: 3px;
padding: 8px 0;
box-shadow: var(--theme--box-shadow_strong);
background: var(--theme--card);
overflow: hidden;
}
.enhancer-panel--switcher-item {
display: flex;
align-items: center;
width: 100%;
padding: 8px 14px;
color: var(--theme--text);
font-size: 14px;
user-select: none;
cursor: pointer;
overflow: hidden;
transition: background 300ms ease;
}
.enhancer-panel--switcher-item:hover,
.enhancer-panel--switcher-item:focus {
background: var(--theme--interactive_hover);
}

3
repo/side-panel/icons/double-chevron.svg
View File

@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
<path d="M7 12.025L8.225 13.25L14 7.125L8.225 1L7 2.225L11.55 7.125L7 12.025ZM0 12.025L1.225 13.25L7 7.125L1.225 1L8.56743e-07 2.225L4.55 7.125L0 12.025Z" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 250 B

3
repo/side-panel/icons/reload.svg
View File

@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M14.66.27l-.81,3.56a8.35,8.35,0,0,1-3.7,16.28,8.35,8.35,0,0,1-6.29-10A8.42,8.42,0,0,1,5,7.39l2.64,2.72L10.05.27l-9.92,2L2.45,4.72a12,12,0,0,0,6.89,19A11.55,11.55,0,0,0,12,24,12,12,0,0,0,14.66.27Z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 277 B

3
repo/side-panel/icons/switcher.svg
View File

@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="9" height="11" viewBox="-1 -1 9 11">
<path d="M 3.5 0L 3.98809 -0.569442L 3.5 -0.987808L 3.01191 -0.569442L 3.5 0ZM 3.5 9L 3.01191 9.56944L 3.5 9.98781L 3.98809 9.56944L 3.5 9ZM 0.488094 3.56944L 3.98809 0.569442L 3.01191 -0.569442L -0.488094 2.43056L 0.488094 3.56944ZM 3.01191 0.569442L 6.51191 3.56944L 7.48809 2.43056L 3.98809 -0.569442L 3.01191 0.569442ZM -0.488094 6.56944L 3.01191 9.56944L 3.98809 8.43056L 0.488094 5.43056L -0.488094 6.56944ZM 3.98809 9.56944L 7.48809 6.56944L 6.51191 5.43056L 3.01191 8.43056L 3.98809 9.56944Z" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 596 B

506
repo/side-panel/mod.js
View File

@ -1,506 +0,0 @@
/*
* side panel
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 CloudHill
* under the MIT license
*/
'use strict';
const { createElement, getEnhancements } = require('../../pkg/helpers.js'),
path = require('path'),
fs = require('fs-extra');
module.exports = {
id: 'c8b1db83-ee37-45b4-bdb3-a7f3d36113db',
tags: ['extension', 'panel'],
name: 'side panel',
desc: 'adds a side panel to notion.',
version: '1.1.0',
author: 'CloudHill',
hacks: {
'renderer/preload.js'(store, __exports) {
// Load icons
let icons = {};
(async () => {
icons.doubleChevron = await fs.readFile( path.resolve(__dirname, 'icons/double-chevron.svg') );
icons.switcher = await fs.readFile( path.resolve(__dirname, 'icons/switcher.svg') );
icons.reload = await fs.readFile( path.resolve(__dirname, 'icons/reload.svg') );
})();
// Load panel mods
let panelMods =
getEnhancements().loaded.filter(
mod => (mod.panel && (store('mods')[mod.id] || {}).enabled)
);
panelMods.forEach(mod => initMod(mod));
document.addEventListener('readystatechange', (event) => {
if (document.readyState !== 'complete') return false;
if (panelMods.length < 1) return;
const attempt_interval = setInterval(enhance, 500);
function enhance() {
if (!store().width) store().width = 220;
let curPanel = {};
const frame = document.querySelector('.notion-frame');
if (!frame) return;
clearInterval(attempt_interval);
// Initialize panel
const container = createElement(
'<div class="enhancer-panel--container"></div>'
);
const panel = createElement(
`<div id="enhancer-panel"></div>`
);
frame.after(container);
container.appendChild(panel);
// Panel contents
const header = createElement(`
<div class="enhancer-panel--header">
<div class="enhancer-panel--icon"></div>
<div class="enhancer-panel--title"></div>
</div>
`);
const toggle = createElement(
`<div class="enhancer-panel--toggle">${icons.doubleChevron}</div>`
);
const content = createElement(
'<div id="enhancer-panel--content"></div>'
);
const resize = createElement(`
<div class="enhancer-panel--resize">
<div style="cursor: col-resize;"></div>
</div>
`);
panel.append(header, content, resize);
// Add switcher if there is more than one panel mods
if (panelMods.length > 1) {
header.addEventListener('click', renderSwitcher);
const switcherIcon = createElement(
`<div class="enhancer-panel--switcher-icon">${icons.switcher}</div>`
)
header.appendChild(switcherIcon);
} else {
header.addEventListener('click', togglePanel);
}
header.appendChild(toggle);
toggle.addEventListener('click', togglePanel);
// Keybind
document.addEventListener('keyup', e => {
const hotkey = {
code: 'Backslash',
ctrlKey: true,
shiftKey: true,
metaKey: false,
altKey: false,
};
for (let prop in hotkey)
if (hotkey[prop] !== e[prop]) return;
togglePanel();
});
// Restore lock state
if (store().locked === 'false') unlockPanel(false);
else lockPanel();
enableResize();
// Attempt to load last opened mod
let loaded = false;
if (store().last_open) {
panelMods.forEach(mod => {
if (mod.id === store().last_open) {
loadContent(mod);
loaded = true;
}
});
}
if (!loaded) loadContent(panelMods[0]);
function loadContent(mod) {
if (curPanel.js && curPanel.js.onSwitch) curPanel.js.onSwitch();
curPanel = mod.panel;
store().last_open = mod.id;
panel.querySelector('.enhancer-panel--title').innerHTML = mod.panel.name || mod.name;
// Reload button
let reloadButton = panel.querySelector('.enhancer-panel--reload-button');
if (reloadButton) reloadButton.remove();
if (mod.panel.reload) {
reloadButton = createElement(
`<div class="enhancer-panel--reload-button">${icons.reload}</div>`
)
reloadButton.addEventListener('click', e => {
e.stopPropagation();
loadContent(mod);
})
panel.querySelector('.enhancer-panel--title').after(reloadButton);
}
panel.querySelector('.enhancer-panel--icon').innerHTML = mod.panel.icon;
document.getElementById('enhancer-panel--content').innerHTML = mod.panel.html;
panel.dataset.fullHeight = mod.panel.fullHeight || false;
if (curPanel.js && curPanel.js.onLoad)
curPanel.js.onLoad();
}
function unlockPanel(animate) {
panel.dataset.locked = 'false';
setPanelWidth(store().width);
if (animate) {
panel.animate(
[
{ opacity: 1, transform: 'none' },
{ opacity: 1, transform: 'translateY(60px)', offset: 0.4},
{ opacity: 0, transform: `translateX(${store().width - 30}px) translateY(60px)`},
],
{ duration: 600, easing: 'ease-out' }
).onfinish = () => {
panel.addEventListener('mouseover', showPanel);
panel.addEventListener('mouseleave', hidePanel);
}
} else {
panel.addEventListener('mouseover', showPanel);
panel.addEventListener('mouseleave', hidePanel);
}
hidePanel();
if (curPanel.js && curPanel.js.onUnlock) {
curPanel.js.onUnlock();
}
}
function lockPanel() {
panel.dataset.locked = 'true';
setPanelWidth(store().width);
// Reset animation styles
panel.style.opacity = '';
panel.style.transform = '';
// Hover event listeners
panel.removeEventListener('mouseover', showPanel);
panel.removeEventListener('mouseleave', hidePanel);
if (curPanel.js && curPanel.js.onLock) {
curPanel.js.onLock();
}
}
function togglePanel(e) {
if (e) e.stopPropagation();
if (isLocked()) unlockPanel(true);
else lockPanel();
store().locked = panel.dataset.locked;
}
function showPanel() {
if (!isLocked()) {
panel.style.opacity = 1;
panel.style.transform = 'translateY(60px)';
}
}
function hidePanel() {
if (!isLocked()) {
panel.style.opacity = 0;
panel.style.transform = `translateX(${store().width - 30}px) translateY(60px)`;
}
}
function renderSwitcherItem(mod) {
if (mod.panel) {
const item = createElement(
`<div class="enhancer-panel--switcher-item" tabindex="0">
<div class="enhancer-panel--icon">${mod.panel.icon}</div>
<div class="enhancer-panel--title">${mod.panel.name || mod.name}</div>
</div>`
);
item.addEventListener('click', () => loadContent(mod));
return item;
}
}
function renderSwitcher() {
if (document.querySelector('.enhancer-panel--overlay-container')) return;
// Layer to close switcher
const overlayContainer = createElement(
'<div class="enhancer-panel--overlay-container"></div>'
);
overlayContainer.addEventListener('click', hideSwitcher)
document
.querySelector('.notion-app-inner')
.appendChild(overlayContainer);
// Position switcher below header
const rect = panel.querySelector('.enhancer-panel--header').getBoundingClientRect();
const div = createElement(`
<div style="position: fixed; top: ${rect.top}px; left: ${rect.left}px; width: ${rect.width}px; height: ${rect.height}px ">
<div style="position: relative; top: 100%; pointer-events: auto;"></div>
</div>
`);
// Render switcher
const switcher = createElement(
'<div class="enhancer-panel--switcher"></div>'
);
panelMods.forEach(mod =>
switcher.append(renderSwitcherItem(mod))
);
overlayContainer.appendChild(div);
div.firstElementChild.appendChild(switcher);
switcher.firstElementChild.focus();
// Fade in
switcher.animate(
[ {opacity: 0}, {opacity: 1} ],
{ duration: 200 }
);
// Prevent panel from closing if unlocked
panel.removeEventListener('mouseleave', hidePanel);
// Escape key listener
document.addEventListener('keydown', switcherKeyEvent);
}
function hideSwitcher() {
const overlayContainer = document.querySelector('.enhancer-panel--overlay-container');
overlayContainer.removeEventListener('click', hideSwitcher);
document.removeEventListener('keydown', switcherKeyEvent);
// Fade out
document.querySelector('.enhancer-panel--switcher').animate(
[ {opacity: 1}, {opacity: 0} ],
{ duration: 200 }
).onfinish = () => overlayContainer.remove();
if (!isLocked()) panel.addEventListener('mouseleave', hidePanel);
}
function setPanelWidth(width) {
store().width = width;
panel.style.width = width + 'px';
if (isLocked()) {
container.style.width = width + 'px';
frame.style.paddingRight = width + 'px';
panel.style.right = 0;
} else {
container.style.width = 0;
frame.style.paddingRight = 0;
panel.style.right = width + 'px';
}
}
function enableResize() {
const handle = panel.querySelector('.enhancer-panel--resize div');
handle.addEventListener('mousedown', initDrag);
let startX, startWidth;
const div = createElement(
'<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 99;"></div>'
);
function initDrag(e) {
startX = e.clientX;
startWidth = store().width;
panel.appendChild(div);
// Set transitions
container.style.transition = 'width 50ms ease-in';
panel.style.transition = 'width 50ms ease-in, right 50ms ease-in';
frame.style.transition = 'padding-right 50ms ease-in';
handle.style.cursor = '';
// Prevent panel from closing if unlocked
panel.removeEventListener('mouseleave', hidePanel);
document.body.addEventListener('mousemove', drag);
document.body.addEventListener('mouseup', stopDrag);
}
function drag(e) {
e.preventDefault();
let width = startWidth + (startX - e.clientX);
if (width < 190) width = 190;
if (width > 480) width = 480;
setPanelWidth(width);
if (curPanel.js && curPanel.js.onResize) {
curPanel.js.onResize();
}
}
function stopDrag() {
handle.style.cursor = 'col-resize';
panel.removeChild(div);
// Reset transitions
container.style.transition =
panel.style.transition =
frame.style.transition = '';
if (!isLocked()) panel.addEventListener('mouseleave', hidePanel);
document.body.removeEventListener('mousemove', drag);
document.body.removeEventListener('mouseup', stopDrag);
}
}
function isLocked() {
if (panel.dataset.locked === 'true') return true;
else return false;
}
function switcherKeyEvent(e) {
e.stopPropagation();
if (e.key === 'Escape') return hideSwitcher();
const currentFocus = document.activeElement;
if ([' ', 'Enter'].includes(e.key)) return currentFocus.click();
const focusNext = () => {
const nextEl = currentFocus.nextElementSibling;
if (nextEl) nextEl.focus();
else currentFocus.parentElement.firstElementChild.focus();
}
const focusPrevious = () => {
const prevEl = currentFocus.previousElementSibling;
if (prevEl) prevEl.focus();
else currentFocus.parentElement.lastElementChild.focus();
}
if (e.key === 'ArrowUp') focusPrevious();
else if (e.key === 'ArrowDown') focusNext();
else if (e.key === 'Tab') {
if (e.shiftKey) focusPrevious();
else focusNext();
e.preventDefault();
}
}
}
});
// INITIALIZATION FUNCTIONS
async function initMod(mod) {
// load panel sites
if (mod.id === '0d541743-eb2c-4d77-83a8-3b2f5e8e5dff') {
panelMods = panelMods.filter(panelMod => panelMod !== mod);
return panelMods.push(...initPanelSites(mod));
}
try {
if (typeof mod.panel === 'object') {
// html
mod.panel.html = await fs.readFile(
path.resolve(__dirname, `../${mod.dir}/${mod.panel.html}`)
);
// name
if (!mod.panel.name) mod.panel.name = mod.name;
// icon
if (mod.panel.icon) {
const iconPath = path.resolve(__dirname, `../${mod.dir}/${mod.panel.icon}`);
if (await fs.pathExists(iconPath))
mod.panel.icon = await fs.readFile(iconPath);
} else {
mod.panel.icon = mod.panel.name[0];
}
// js
if (mod.panel.js) {
const jsPath = `../${mod.dir}/${mod.panel.js}`;
if (await fs.pathExists(path.resolve(__dirname, jsPath))) {
mod.panel.js = require(jsPath)(loadStore(mod), __exports);
}
}
} else if (typeof mod.panel === 'string') {
mod.panel.icon = mod.name[0];
mod.panel.html = await fs.readFile(
path.resolve(__dirname, `../${mod.dir}/${mod.panel}`)
);
} else throw Error;
} catch (err) {
console.log('invalid panel mod: ' + mod.name);
panelMods = panelMods.filter(panelMod => panelMod !== mod);
}
}
function initPanelSites(mod) {
let panelSites = [];
const sitesPath = store(mod.id).sites;
if (sitesPath) {
try {
const sites = require(sitesPath);
const invalid = false;
const sitePanelJs = require('../panel-sites/panel.js')(loadStore(mod), __exports);
const frameUrl = function(url, mobile) {
if (!/(^https?:\/\/)/.test(url)) url = 'https://' + url;
return `<iframe src=${url} class="panel-site" ${mobile ? 'mobile-user-agent' : ''}></iframe>`;
}
sites.forEach(site => {
if (site.url && site.name) {
// get url and icon
const iframe = frameUrl(site.url, site.mobile);
const icon = `<img style="width: 100%; height: 100%;"
src="${site.icon || `https://www.google.com/s2/favicons?domain=${site.url}`}" />`;
const panelMod = {
id: `${mod.id}-${site.url}`,
panel: {
name: site.name,
html: iframe,
icon: icon,
js: sitePanelJs,
fullHeight: true,
reload: true,
},
}
panelSites.push(panelMod);
} else invalid = true;
});
if (invalid) throw Error;
}
catch (err) {
console.log('panel site error');
}
}
return panelSites;
}
function loadStore(mod) {
return (...args) => {
if (!args.length) return store(mod.id, mod.defaults);
if (args.length === 1 && typeof args[0] === 'object')
return store(mod.id, { ...mod.defaults, ...args[0] });
const other_mod = modules.find((m) => m.id === args[0]);
return store(args[0], {
...(other_mod ? other_mod.defaults : {}),
...(args[1] || {})
})
}
}
},
},
};

370
repo/simpler-databases/app.css
View File

@ -1,370 +0,0 @@
/*
* simpler databases
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 CloudHill
* under the MIT license
*/
.simpler-databases--config-button:hover {
background: var(--theme--interactive_hover);
}
.simpler-databases--config-button svg {
width: 12px;
height: 12px;
fill: var(--theme--text_ui_info);
}
.simpler-databases--overlay-container {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
overflow: hidden;
}
.simpler-databases--config-menu {
position: relative;
width: 220px;
max-height: 70vh;
padding: 8px 0;
border-radius: 3px;
box-shadow: var(--theme--box-shadow_strong);
background: var(--theme--card);
overflow: hidden auto;
}
.simpler-databases--config-item-toggle,
.simpler-databases--config-item-input {
display: flex;
align-items: center;
width: 100%;
min-height: 28px;
font-size: var(--theme--font_label-size);
line-height: 1.2;
user-select: none;
}
.simpler-databases--config-item-toggle {
cursor: pointer;
}
.simpler-databases--config-item-toggle:hover,
.simpler-databases--config-item-toggle:focus {
background: var(--theme--interactive_hover);
}
.simpler-databases--config-title {
margin: 0 14px;
min-width: 0;
flex: 1 1 auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.simpler-databases--config-toggle {
flex-shrink: 0;
position: relative;
height: 14px;
width: 26px;
margin-left: auto;
margin-right: 14px;
padding: 2px;
border-radius: 44px;
cursor: pointer;
user-select: none;
box-sizing: content-box;
background: rgba(202, 204, 206, 0.3);
transition: background 200ms ease 0s, box-shadow 200ms ease 0s;
}
.simpler-databases--config-toggle[data-toggled="true"] {
background: var(--theme--primary);
}
.simpler-databases--config-toggle::before {
content: '';
position: absolute;
width: 14px;
height: 14px;
border-radius: 44px;
background: white;
transition: transform 200ms ease-out 0s, background 200ms ease-out 0s;
}
.simpler-databases--config-toggle[data-toggled="true"]::before {
transform: translateX(12px);
}
.simpler-databases--config-item-input {
padding: 6px 0;
}
.simpler-databases--config-input {
display: flex;
align-items: center;
height: 28px;
margin: 0 14px;
padding: 3px 6px;
background: var(--theme--select_input);
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px inset;
border-radius: 3px;
font-size: 14px;
line-height: 20px;
cursor: text;
}
.notion-dark-theme .simpler-databases--config-input {
background: rgba(15, 15, 15, 0.3);
box-shadow: rgba(15, 15, 15, 0.2) 0px 0px 0px 1px inset;
}
.simpler-databases--config-input input {
font-size: inherit;
line-height: inherit;
border: none;
background: none;
width: 100%;
display: block;
resize: none;
padding: 0;
}
.simpler-databases--config-divider {
border-bottom: 1px solid var(--theme--ui-border);
width: 100%;
margin: 6px 0;
}
.notion-collection_view-block[data-tweaks*="[config-open]"] [style*=" height: 42px;"] > :not(:first-child) {
opacity: 1 !important;
}
/* TWEAKS */
/* Toggle */
.simpler-databases--toggle {
flex-shrink: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
cursor: pointer;
transition: background 20ms ease-in 0s;
}
.simpler-databases--toggle svg {
width: 12px;
height: 12px;
transform: rotateZ(180deg);
transition: transform 200ms ease-out 0s;
}
.simpler-databases--toggle:hover {
background: var(--theme--interactive_hover);
}
.notion-collection_view-block[data-tweaks*="[toggle]"][data-toggled-hidden="true"]
.simpler-databases--toggle svg {
transform: rotateZ(90deg);
}
.notion-collection_view-block[data-tweaks*="[toggle]"] > .notion-scroller {
transition: height 200ms ease-in, opacity 200ms ease-in;
}
.notion-collection_view-block[data-tweaks*="[toggle]"][data-toggled-hidden="true"] > .notion-scroller {
opacity: 0;
height: 0 !important;
}
.notion-collection_view-block[data-tweaks*="[toggle]"][data-toggled-hidden="true"]
[data-hide-items] .notion-collection-item {
display: none !important;
}
/* Title */
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[title]"])
[style*=" height: 42px;"] > [style*="white-space: nowrap; overflow: hidden;"] .notion-record-icon,
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[title]"])
[style*=" height: 42px;"] > [style*="white-space: nowrap; overflow: hidden;"] [placeholder] {
display: none !important;
}
/* Link Arrow - linked databases */
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[link]"])
[style*=" height: 42px;"] a :first-child[style*="margin-right: 6px"] {
display: none !important;
}
/* Views */
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[views]"])
[style*=" height: 42px;"] > [role="button"] {
display: none !important;
}
/* Toolbar */
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[toolbar]"])
.simpler-databases--config-button ~ * {
display: none !important;
}
/* Header - table, calendar */
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[header_row]"])
.notion-table-view > .notion-collection_view-block > :first-child,
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[header_row]"])
.notion-table-view > .notion-collection_view-block > :first-child + div {
display: none !important;
}
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[header_row]"])
.notion-table-view .notion-collection_view-block > [style*="height: 34px"] + div {
border-top: 1px solid var(--theme--table-border_row);
}
/* New Item - table, board, timeline, list, gallery */
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[new_item]"])
.notion-table-view-add-row,
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[new_item]"])
.notion-board-view .notion-board-group > [role="button"]:not(.notion-collection-item),
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[new_item]"])
.notion-timeline-item-row:last-child,
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[new_item]"])
.notion-list-view > .notion-collection_view-block > [role="button"]:not(.notion-collection-item),
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[new_item]"])
.notion-gallery-view > .notion-collection_view-block > [role="button"]:not(.notion-collection-item) {
display: none !important;
}
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[new_item]"])
.notion-timeline-view > [style*="padding-bottom: 34px;"] {
padding-bottom: 0 !important;
}
/* Calc Row - table, timeline */
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[calc_row]"])
.notion-table-view-add-row ~ div:not(.notion-selectable-halo):not([role="button"]),
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[calc_row]"])
.notion-timeline-view > [style*="z-index: 4;"]:last-child {
display: none !important;
}
/* Hidden Columns - board */
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[hidden_column]"])
.notion-board-view > .notion-collection_view-block [style*="width: 220px;"] {
display: none !important;
}
/* Add Group - board */
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[add_group]"])
.notion-board-view > .notion-collection_view-block [style*="width: 180px;"] {
display: none !important;
}
/* New Column - table */
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[new_column]"])
.notion-table-view-add-column,
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[new_column]"])
.notion-table-view .notion-collection-item > [style*="width: 32px;"] {
display: none !important;
}
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[new_column]"])
.notion-table-view-add-row + [style*="padding-right: 32px;"] {
padding-right: 0 !important;
}
/* Full Width - table */
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[full_width]"])
.notion-table-view > .notion-collection_view-block {
max-width: fit-content;
}
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[full_width]"])
.notion-table-view .notion-collection_view-block > [style*="min-width"] {
min-width: 0 !important;
}
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[full_width]"])
.notion-table-view .notion-collection-item {
width: fit-content;
}
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[full_width]"])
.notion-table-view .notion-collection_view-block > [style*="height: 34px"] + div,
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[full_width]"])
.notion-table-view .notion-collection_view-block > :first-child {
border-left: 1px solid var(--theme--table-border_row);
}
/* COMPOUND TWEAKS */
/* Title and Link disabled > Hide title container */
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[title]"]):not([data-tweaks*="[link]"])
[style*=" height: 42px;"] > [style*="white-space: nowrap; overflow: hidden;"] {
display: none !important;
}
/* New Row and Calc Row disabled > Add bottom border - table */
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[calc_row]"]):not([data-tweaks*="[new_item]"])
.notion-table-view .notion-collection_view-block > [style*="height: 34px"] + div {
border-bottom: 1px solid var(--theme--table-border_row);
}
/* New Column enabled with Full Width disabled > Add right border - table */
.notion-collection_view-block[data-tweaks][data-tweaks*="[new_column]"]:not([data-tweaks*="[full_width]"])
.notion-table-view .notion-collection_view-block > [style*="height: 34px"] + div,
.notion-collection_view-block[data-tweaks][data-tweaks*="[new_column]"]:not([data-tweaks*="[full_width]"])
.notion-table-view .notion-collection_view-block > :first-child {
border-right: 1px solid var(--theme--table-border_row);
}
/* REMOVE DATABASE HEADER < Title, Link, Toggle, Views, and Toolbar disabled */
/* Hide Header */
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[title]"]):not([data-tweaks*="[link]"]):not([data-tweaks*="[toggle]"]):not([data-tweaks*="[views"]):not([data-tweaks*="[toolbar]"])
[style*="min-height: 42px"] {
min-height: 0 !important;
max-height: 0;
pointer-events: none;
}
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[title]"]):not([data-tweaks*="[link]"]):not([data-tweaks*="[toggle]"]):not([data-tweaks*="[views"]):not([data-tweaks*="[toolbar]"])
[style*="height: 42px"] {
overflow: visible !important;
}
/* Config Button */
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[title]"]):not([data-tweaks*="[link]"]):not([data-tweaks*="[toggle]"]):not([data-tweaks*="[views"]):not([data-tweaks*="[toolbar]"])
[style*=" height: 42px;"] > :last-child {
position: absolute;
top: 4px;
right: 0;
z-index: 99;
pointer-events: auto;
}
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[title]"]):not([data-tweaks*="[link]"]):not([data-tweaks*="[toggle]"]):not([data-tweaks*="[views"]):not([data-tweaks*="[toolbar]"])
.simpler-databases--config-button {
background: var(--theme--main);
box-shadow: var(--theme--box-shadow);
}
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[title]"]):not([data-tweaks*="[link]"]):not([data-tweaks*="[toggle]"]):not([data-tweaks*="[views"]):not([data-tweaks*="[toolbar]"])
.simpler-databases--config-button:hover {
background: var(--theme--interactive_hover);
}
/* Hide Top Border */
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[title]"]):not([data-tweaks*="[link]"]):not([data-tweaks*="[toggle]"]):not([data-tweaks*="[views"]):not([data-tweaks*="[toolbar]"])
:not(.notion-table-view) > .notion-collection_view-block > [style*="box-shadow"] {
box-shadow: none !important;
}
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[title]"]):not([data-tweaks*="[link]"]):not([data-tweaks*="[toggle]"]):not([data-tweaks*="[views"]):not([data-tweaks*="[toolbar]"])
:not(.notion-table-view) > .notion-collection_view-block[style*="border-top"],
.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[title]"]):not([data-tweaks*="[link]"]):not([data-tweaks*="[toggle]"]):not([data-tweaks*="[views"]):not([data-tweaks*="[toolbar]"])
:not(.notion-table-view) > .notion-collection_view-block > [style*="border-top"] {
border-top: none !important;
}

540
repo/simpler-databases/mod.js
View File

@ -1,540 +0,0 @@
/*
* simpler databases
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 CloudHill
* under the MIT license
*/
'use strict';
const { createElement } = require('../../pkg/helpers.js');
module.exports = {
id: '752933b5-1258-44e3-b49a-61b4885f8bda',
tags: ['extension'],
name: 'simpler databases',
desc: 'adds a menu to inline databases to toggle ui elements.',
version: '1.0.0',
author: 'CloudHill',
hacks: {
'renderer/preload.js'(store, __exports) {
if (!store().blocks) store().blocks = {};
const menuItems = [
{
key: 'replace_title',
name: 'Replace title...',
type: 'input',
linkedOnly: true,
default: '',
action: replaceTitle,
},
{
key: 'title',
name: 'Title',
type: 'toggle',
default: true,
},
{
key: 'toggle',
name: 'Toggle',
type: 'toggle',
default: false,
action: toggle,
},
{
key: 'link',
name: 'Link arrow',
type: 'toggle',
default: true,
linkedOnly: true,
},
{
key: 'views',
name: 'Views',
type: 'toggle',
default: true,
},
{
key: 'toolbar',
name: 'Toolbar',
type: 'toggle',
default: true,
},
{
key: 'divider',
views: ['table', 'board', 'timeline', 'list', 'gallery'],
},
{
key: 'header_row',
name: 'Header row',
type: 'toggle',
default: true,
views: ['table'],
},
{
key: 'new_item',
name: 'New row',
type: 'toggle',
default: true,
views: ['table', 'timeline'],
},
{
key: 'new_item',
name: 'New item',
type: 'toggle',
default: true,
views: ['board', 'list', 'gallery'],
},
{
key: 'calc_row',
name: 'Calculation row',
type: 'toggle',
default: true,
views: ['table', 'timeline'],
},
{
key: 'divider',
views: ['table', 'board'],
},
{
key: 'hidden_column',
name: 'Hidden columns',
type: 'toggle',
default: true,
views: ['board'],
},
{
key: 'add_group',
name: 'Add group',
type: 'toggle',
default: true,
views: ['board'],
},
{
key: 'new_column',
name: 'New column',
type: 'toggle',
default: true,
views: ['table'],
},
{
key: 'full_width',
name: 'Full width',
type: 'toggle',
default: true,
views: ['table'],
},
]
document.addEventListener('readystatechange', (event) => {
if (document.readyState !== 'complete') return false;
// observe for new or moved collection blocks
const contentObserver = new MutationObserver((list, observer) => {
for (let { addedNodes } of list) {
if (
addedNodes[0] &&
addedNodes[0].querySelector &&
addedNodes[0].querySelector('.notion-collection_view-block')
)
findInlineCollections();
}
});
// observe for page changes
let queue = [];
const pageObserver = new MutationObserver((list, observer) => {
if (!queue.length) requestAnimationFrame(() => process(queue));
queue.push(...list);
});
pageObserver.observe(document.body, {
childList: true,
subtree: true,
});
function process(list) {
queue = [];
for (let { addedNodes } of list) {
if (
addedNodes[0] &&
addedNodes[0].className === 'notion-page-content'
) {
findInlineCollections();
contentObserver.disconnect();
contentObserver.observe(addedNodes[0],
{
childList: true,
subtree: true,
}
);
}
}
}
});
function findInlineCollections() {
const collections = document.querySelectorAll('.notion-collection_view-block[style*="width"][style*="max-width"]');
collections.forEach(collection => {
if (collection.querySelector('.simpler-databases--config-button')) return;
const blockId = collection.dataset.blockId;
// config button
const add = collection.querySelector('.notion-collection-view-item-add');
if (!add) return;
const configButton = add.previousElementSibling.cloneNode();
configButton.className = 'simpler-databases--config-button';
configButton.innerHTML = `<svg viewBox="0 0 14 14"><path d="M14,7.77 L14,6.17 L12.06,5.53 L11.61,4.44 L12.49,2.6 L11.36,1.47 L9.55,2.38 L8.46,1.93 L7.77,0.01 L6.17,0.01 L5.54,1.95 L4.43,2.4 L2.59,1.52 L1.46,2.65 L2.37,4.46 L1.92,5.55 L0,6.23 L0,7.82 L1.94,8.46 L2.39,9.55 L1.51,11.39 L2.64,12.52 L4.45,11.61 L5.54,12.06 L6.23,13.98 L7.82,13.98 L8.45,12.04 L9.56,11.59 L11.4,12.47 L12.53,11.34 L11.61,9.53 L12.08,8.44 L14,7.75 L14,7.77 Z M7,10 C5.34,10 4,8.66 4,7 C4,5.34 5.34,4 7,4 C8.66,4 10,5.34 10,7 C10,8.66 8.66,10 7,10 Z" /></svg>`;
configButton.collectionBlock = collection;
configButton.addEventListener('click', renderConfig);
add.parentElement.prepend(configButton);
// initialize store variable
if (!store().blocks[blockId]) store().blocks[blockId] = {};
// restore stored states
menuItems.forEach(
item => {
if (item.key === 'divider') return;
let storedValue = store().blocks[blockId][item.key];
if (storedValue == null) // set defaults
storedValue = store().blocks[blockId][item.key] = item.default;
if (item.action) item.action(storedValue, collection);
if (
item.type !== 'input' &&
!item.linkedOnly || isLinked(collection)
) {
toggleDataTweaks(collection, item.key, storedValue);
}
}
);
});
}
// config
function renderConfig(e) {
if (document.querySelector('.simpler-databases--overlay-container')) return;
const button = e.currentTarget;
const collection = button.collectionBlock;
if (!collection) return;
const collectionView = getView(collection);
if (!collectionView) return;
// layer to close config
const overlayContainer = createElement(
'<div class="simpler-databases--overlay-container"></div>'
);
overlayContainer.addEventListener('click', hideConfig)
document
.querySelector('.notion-app-inner')
.appendChild(overlayContainer);
const div = createElement(`
<div style="position: fixed;">
<div style="position: relative; pointer-events: auto;"></div>
</div>
`);
// render config
toggleDataTweaks(collection, 'config-open', true);
const config = createElement(
'<div class="simpler-databases--config-menu"></div>'
);
// get menu items relevant to current view
const viewMenu = menuItems.filter(
item => (!item.views || item.views.includes(collectionView)) &&
(!item.linkedOnly || isLinked(collection))
);
config.append(...viewMenu.map(
item => renderConfigItem(item, collection)
));
overlayContainer.appendChild(div);
div.firstElementChild.appendChild(config);
focusConfigItem(config.firstElementChild);
// config positioning
const rect = button.getBoundingClientRect();
div.style.left = Math.min(
rect.left + rect.width / 2,
window.innerWidth - (config.offsetWidth + 14)
) + 'px';
div.style.top = Math.min(
rect.top + rect.height / 2,
window.innerHeight - (config.offsetHeight + 14)
) + 'px';
// fade in
config.animate(
[ {opacity: 0}, {opacity: 1} ],
{ duration: 200 }
);
// key bindings
document.addEventListener('keydown', configKeyEvent);
}
function hideConfig() {
const overlayContainer = document.querySelector('.simpler-databases--overlay-container');
if (!overlayContainer) return;
overlayContainer.removeEventListener('click', hideConfig);
document.removeEventListener('keydown', configKeyEvent);
toggleDataTweaks(
document.querySelector('[data-tweaks*="config-open"]'),
'config-open', false
);
// fade out
document.querySelector('.simpler-databases--config-menu').animate(
[ {opacity: 1}, {opacity: 0} ],
{ duration: 200 }
).onfinish = () => overlayContainer.remove();
}
function renderConfigItem(menuItem, collection) {
if (menuItem.key === 'divider')
return createElement('<div class="simpler-databases--config-divider"></div');
const blockId = collection.dataset.blockId;
const item = createElement(`
<div class="simpler-databases--config-item-${menuItem.type}">
</div>
`);
const storedValue = store().blocks[blockId][menuItem.key];
switch (menuItem.type) {
case 'toggle':
const toggleLabel = createElement(`
<div class="simpler-databases--config-title">${menuItem.name}</div>
`)
const toggle = createElement(`
<div class="simpler-databases--config-toggle"
data-toggled="${storedValue || false}">
</div>
`);
item.append(toggleLabel, toggle)
item.setAttribute('tabindex', 0);
item.addEventListener('click', e => {
e.stopPropagation();
const newState = !(toggle.dataset.toggled === 'true');
toggle.dataset.toggled = newState;
store().blocks[blockId][menuItem.key] = newState;
toggleDataTweaks(collection, menuItem.key, newState);
if (menuItem.action) menuItem.action(newState, collection);
});
break;
case 'input':
const input = createElement(`
<div class="simpler-databases--config-input notion-focusable">
<input placeholder="${menuItem.name}"
type="text" value="${storedValue || ''}">
</div>
`);
item.appendChild(input)
item.addEventListener('click', e => e.stopPropagation());
if (menuItem.action) {
input.firstElementChild.addEventListener('input', e => {
e.stopPropagation();
const newValue = e.target.value;
store().blocks[blockId][menuItem.key] = newValue;
menuItem.action(newValue, collection);
});
}
break;
}
return item;
}
function focusConfigItem(item) {
(
item.getElementsByTagName('input')[0] || item
).focus();
}
function configKeyEvent(e) {
e.stopPropagation();
if (e.key === 'Escape') return hideConfig();
let currentFocus = document.activeElement
.closest('[class^="simpler-databases--config-item"]');
const parentEl = currentFocus.parentElement;
if (
[' ', 'Enter'].includes(e.key)
) return currentFocus.click();
const focusNext = () => {
let nextEl = currentFocus.nextElementSibling;
if (nextEl) {
if (nextEl.className.includes('divider'))
nextEl = nextEl.nextElementSibling;
focusConfigItem(nextEl);
}
else focusConfigItem(parentEl.firstElementChild);
}
const focusPrevious = () => {
let prevEl = currentFocus.previousElementSibling;
if (prevEl) {
if (prevEl.className.includes('divider'))
prevEl = prevEl.previousElementSibling;
if (prevEl.className.includes('input'))
prevEl.getElementsByTagName('input')[0].focus();
focusConfigItem(prevEl);
}
else focusConfigItem(parentEl.lastElementChild);
}
if (e.key === 'ArrowUp') focusPrevious();
else if (e.key === 'ArrowDown') focusNext();
else if (e.key === 'Tab') {
if (e.shiftKey) {
if (currentFocus === parentEl.firstElementChild) {
focusConfigItem(parentEl.lastElementChild);
e.preventDefault();
}
}
else if (currentFocus === parentEl.lastElementChild) {
focusConfigItem(parentEl.firstElementChild);
e.preventDefault();
}
}
}
// get collection info
function isLinked(collection) {
return collection.querySelector('[style*=" height: 42px;"] .alias');
}
function getView(collection) {
return collection.querySelector('.notion-scroller [class$="view"]')
?.className.split('-')[1]
}
// add/remove keys to data-tweaks
function toggleDataTweaks(collection, key, state) {
if (!collection.dataset.tweaks) collection.dataset.tweaks = '';
const isActive = collection.dataset.tweaks.includes(`[${key}]`);
if (state == null) state = !isActive;
if (state && !isActive) {
collection.dataset.tweaks += `[${key}]`;
} else if (!state && isActive) {
collection.dataset.tweaks = collection.dataset.tweaks
.replace(`[${key}]`, '');
}
}
// menu actions
// replace and add observer to linked database titles
function replaceTitle(value, collection) {
const titleDiv = collection.querySelector('[style*="height: 42px;"] a [placeholder]');
if (!titleDiv) return;
if (!titleDiv.originalTitle && value) titleDiv.originalTitle = titleDiv.innerText;
if (!titleDiv.titleObserver) {
if (!value) return;
// store reference to observer to disconnect() in future calls
titleDiv.titleObserver = new MutationObserver(() => {
const title = store().blocks[collection.dataset.blockId]['replace_title'];
if (title && titleDiv.innerText !== title) titleDiv.innerText = title;
});
} else {
titleDiv.titleObserver.disconnect();
}
if (value) { // observe
titleDiv.innerText = value
titleDiv.titleObserver.observe(titleDiv, {characterData: true, childList: true})
} else { // reset
titleDiv.titleObserver.disconnect();
titleDiv.innerText = titleDiv.originalTitle;
delete titleDiv.originalTitle;
}
}
// show or hide toggle
function toggle(state, collection) {
const header = collection.querySelector('[style*=" height: 42px"]');
if (!header) return;
// define functions
const collectionView = collection.querySelector('.notion-scroller');
const hideCollection = () => {
collectionView.style.height = collectionView.offsetHeight + 'px';
requestAnimationFrame(() => {
collection.dataset.toggledHidden = true;
setTimeout(() => collectionView.dataset.hideItems = 'true', 200); // hide drag handles
});
}
const showCollection = () => {
// get height
collection.dataset.toggledHidden = false;
collectionView.style.height = '';
collectionView.style.height = collectionView.offsetHeight + 'px';
collection.dataset.toggledHidden = true;
delete collectionView.dataset.hideItems;
requestAnimationFrame(() =>{
collection.dataset.toggledHidden = false;
setTimeout(() => collectionView.style.height = '', 200);
});
}
// restore previous state
if (!collection.dataset.toggledHidden) {
const storedState = store().blocks[collection.dataset.blockId].toggledHidden || false;
if (storedState) hideCollection();
}
let toggle = header.querySelector('.simpler-databases--toggle');
if (toggle) {
// return if toggle is already there
if (!state) toggle.remove();
return;
} else if (state) {
// add toggle
toggle = createElement(`
<div class="simpler-databases--toggle">
<svg viewBox="0 0 100 100" class="triangle">
<polygon points="5.9,88.2 50,11.8 94.1,88.2" />
</svg>
</div>
`);
toggle.addEventListener('click', () => {
const hide = !(collection.dataset.toggledHidden === 'true');
store().blocks[collection.dataset.blockId].toggledHidden = hide;
if (hide) hideCollection();
else showCollection();
});
header.prepend(toggle);
}
}
},
},
};

Some files were not shown because too many files have changed in this diff Show More