mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-06 05:29:02 +00:00
refactor twind to classes + support notion.site + bugfixes
This commit is contained in:
parent
ea30d01296
commit
8c1b5c0835
@ -10,14 +10,15 @@
|
||||
|
||||
/** environment-specific methods and constants */
|
||||
export * as env from './env.mjs';
|
||||
/** environment-specific data persistence */
|
||||
export * as storage from './storage.mjs';
|
||||
|
||||
/** helpers for formatting or parsing text */
|
||||
export * as fmt from './fmt.mjs';
|
||||
/** environment-specific filesystem reading */
|
||||
export * as fs from './fs.mjs';
|
||||
/** interactions with the enhancer's repository of mods */
|
||||
export * as registry from './registry.mjs';
|
||||
/** environment-specific data persistence */
|
||||
export * as storage from './storage.mjs';
|
||||
/** pattern and type validators */
|
||||
export * as validation from './validation.mjs';
|
||||
/** helpers for manipulation of a webpage */
|
||||
|
||||
@ -30,8 +30,7 @@ export const supported = ['linux', 'win32', 'darwin', 'extension'];
|
||||
export const version = chrome.runtime.getManifest().version;
|
||||
|
||||
/** open the enhancer's menu */
|
||||
export const openEnhancerMenu = () =>
|
||||
chrome.runtime.sendMessage({ action: 'openEnhancerMenu' });
|
||||
export const focusMenu = () => chrome.runtime.sendMessage({ action: 'focusMenu' });
|
||||
|
||||
/** focus an active notion tab */
|
||||
export const focusNotion = () => chrome.runtime.sendMessage({ action: 'focusNotion' });
|
||||
|
||||
@ -11,6 +11,8 @@
|
||||
* @module notion-enhancer/api/fmt
|
||||
*/
|
||||
|
||||
import * as web from './web.mjs';
|
||||
|
||||
import '../dep/prism.min.js';
|
||||
/** syntax highlighting using https://prismjs.com/ */
|
||||
export const prism = Prism;
|
||||
@ -19,7 +21,7 @@ Prism.hooks.add('complete', async (event) => {
|
||||
event.element.parentElement.removeAttribute('tabindex');
|
||||
event.element.parentElement.parentElement
|
||||
.querySelector('.copy-to-clipboard-button')
|
||||
.prepend(web.createElement(await web.getIcon('fa/regular/copy')));
|
||||
.prepend(web.html`${await web.icon('clipboard')}`);
|
||||
});
|
||||
|
||||
import '../dep/markdown-it.min.js';
|
||||
@ -27,7 +29,7 @@ import '../dep/markdown-it.min.js';
|
||||
export const md = new markdownit({
|
||||
linkify: true,
|
||||
highlight: (str, lang) =>
|
||||
web.html`<pre class="language-${lang || 'plaintext'} match-braces"><code>${web.escapeHtml(
|
||||
web.html`<pre class="language-${lang || 'plaintext'} match-braces"><code>${web.escape(
|
||||
str
|
||||
)}</code></pre>`,
|
||||
});
|
||||
@ -36,7 +38,7 @@ md.renderer.rules.code_block = (tokens, idx, options, env, slf) => {
|
||||
if (attrIdx === -1) {
|
||||
tokens[idx].attrPush(['class', 'match-braces language-plaintext']);
|
||||
} else tokens[idx].attrs[attrIdx][1] = 'match-braces language-plaintext';
|
||||
return web.html`<pre${slf.renderAttrs(tokens[idx])}><code>${web.escapeHtml(
|
||||
return web.html`<pre${slf.renderAttrs(tokens[idx])}><code>${web.escape(
|
||||
tokens[idx].content
|
||||
)}</code></pre>\n`;
|
||||
};
|
||||
@ -47,7 +49,7 @@ md.core.ruler.push(
|
||||
state.tokens.forEach(function (token, i) {
|
||||
if (token.type === 'heading_open') {
|
||||
const text = md.renderer.render(state.tokens[i + 1].children, md.options),
|
||||
slug = fmt.slugger(text, slugs);
|
||||
slug = slugger(text, slugs);
|
||||
slugs.add(slug);
|
||||
const attrIdx = token.attrIndex('id');
|
||||
if (attrIdx === -1) {
|
||||
|
||||
@ -242,8 +242,7 @@ export const list = async (filter = (mod) => true) => {
|
||||
const mod = await getJSON(`repo/${dir}/mod.json`);
|
||||
mod._dir = dir;
|
||||
if (await validate(mod)) _cache.push(mod);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
} catch {
|
||||
_errors.push({ source: dir, message: 'invalid mod.json' });
|
||||
}
|
||||
}
|
||||
|
||||
@ -18,7 +18,7 @@ const _hotkeyEventListeners = [],
|
||||
_documentObserverListeners = [],
|
||||
_documentObserverEvents = [];
|
||||
|
||||
let _$featherStylesheet, _$tooltip, _$tooltipStylesheet, _hotkeyEvent, _documentObserver;
|
||||
let _$tooltip, _$tooltipStylesheet, _hotkeyEvent, _documentObserver;
|
||||
|
||||
import '../dep/jscolor.min.js';
|
||||
/** color picker with alpha channel using https://jscolor.com/ */
|
||||
@ -152,22 +152,13 @@ export const loadStylesheet = (path) => {
|
||||
* @returns {string} an svg string
|
||||
*/
|
||||
export const icon = (name, attrs = {}) => {
|
||||
if (!_$featherStylesheet) {
|
||||
_$featherStylesheet = html`<style data-enhancer-api-style="feather">
|
||||
.enhancer--feather {
|
||||
stroke: currentColor;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
fill: none;
|
||||
}
|
||||
</style>`;
|
||||
render(document.head, _$featherStylesheet);
|
||||
}
|
||||
attrs.class = ((attrs.class || '') + ' enhancer--feather').trim();
|
||||
return `<svg ${Object.entries(attrs).map(
|
||||
([key, val]) => `${escape(key)}="${escape(val)}"`
|
||||
)}><use xlink:href="${localPath('dep/feather-sprite.svg')}#${name}" /></svg>`;
|
||||
attrs.style = (
|
||||
(attrs.style || '') +
|
||||
';stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none;'
|
||||
).trim();
|
||||
return `<svg ${Object.entries(attrs)
|
||||
.map(([key, val]) => `${escape(key)}="${escape(val)}"`)
|
||||
.join(' ')}><use xlink:href="${localPath('dep/feather-sprite.svg')}#${name}" /></svg>`;
|
||||
};
|
||||
|
||||
/**
|
||||
@ -177,9 +168,9 @@ export const icon = (name, attrs = {}) => {
|
||||
*/
|
||||
export const tooltip = ($ref, text) => {
|
||||
if (!_$tooltip) {
|
||||
_$tooltip = html`<div class="enhancer--tooltip"></div>`;
|
||||
_$tooltipStylesheet = html`<style data-enhancer-api-style="tooltip">
|
||||
.enhancer--tooltip {
|
||||
_$tooltip = html`<div id="enhancer--tooltip"></div>`;
|
||||
_$tooltipStylesheet = html`<style>
|
||||
#enhancer--tooltip {
|
||||
position: absolute;
|
||||
background: var(--theme--ui_tooltip);
|
||||
font-size: 11.5px;
|
||||
@ -189,13 +180,13 @@ export const tooltip = ($ref, text) => {
|
||||
max-width: 20rem;
|
||||
display: none;
|
||||
}
|
||||
.enhancer--tooltip p {
|
||||
#enhancer--tooltip p {
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
.enhancer--tooltip p:first-child {
|
||||
#enhancer--tooltip p:first-child {
|
||||
color: var(--theme--ui_tooltip-title);
|
||||
}
|
||||
.enhancer--tooltip p:not(:first-child) {
|
||||
#enhancer--tooltip p:not(:first-child) {
|
||||
color: var(--theme--ui_tooltip-description);
|
||||
}
|
||||
</style>`;
|
||||
|
||||
@ -6,11 +6,12 @@
|
||||
|
||||
'use strict';
|
||||
|
||||
// only load if user is logged into notion and viewing a page
|
||||
if (
|
||||
localStorage['LRU:KeyValueStore2:current-user-id'] &&
|
||||
location.pathname.split(/[/-]/g).reverse()[0].length === 32
|
||||
) {
|
||||
const site = location.host.endsWith('.notion.site'),
|
||||
loggedIn = localStorage['LRU:KeyValueStore2:current-user-id'],
|
||||
page = location.pathname.split(/[/-]/g).reverse()[0].length === 32,
|
||||
home = location.pathname === '/';
|
||||
|
||||
if (site || (loggedIn && (page || home))) {
|
||||
import(chrome.runtime.getURL('api/_.mjs')).then(async (api) => {
|
||||
const { registry, web } = api;
|
||||
for (const mod of await registry.list((mod) => registry.enabled(mod.id))) {
|
||||
|
||||
@ -19,15 +19,15 @@
|
||||
"web_accessible_resources": [
|
||||
{
|
||||
"resources": ["api/*", "dep/*", "icon/*", "repo/*"],
|
||||
"matches": ["https://*.notion.so/*"]
|
||||
"matches": ["https://*.notion.so/*", "https://*.notion.site/*"]
|
||||
}
|
||||
],
|
||||
"content_scripts": [
|
||||
{
|
||||
"matches": ["https://*.notion.so/*"],
|
||||
"matches": ["https://*.notion.so/*", "https://*.notion.site/*"],
|
||||
"js": ["launcher.js"]
|
||||
}
|
||||
],
|
||||
"permissions": ["tabs", "storage", "unlimitedStorage"],
|
||||
"host_permissions": ["https://*.notion.so/*", "<all_urls>"]
|
||||
"host_permissions": ["https://*.notion.so/*", "https://*.notion.site/*", "<all_urls>"]
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
"name": "calendar-scroll",
|
||||
"id": "b1c7db33-dfee-489a-a76c-0dd66f7ed29a",
|
||||
"version": "0.2.0",
|
||||
"description": "add a button to scroll down to the current week in fullpage/infinite-scroll calendars.",
|
||||
"description": "add a button to jump down to the current week in fullpage/infinite-scroll calendars.",
|
||||
"tags": ["extension", "shortcut"],
|
||||
"authors": [
|
||||
{
|
||||
|
||||
@ -7,8 +7,18 @@
|
||||
'use strict';
|
||||
|
||||
export default async function (api, db) {
|
||||
const { env, fs, registry, web } = api,
|
||||
sidebarSelector = '.notion-sidebar-container .notion-sidebar > div:nth-child(4)';
|
||||
const { env, fs, registry, web } = api;
|
||||
|
||||
web.addHotkeyListener(await db.get(['hotkey']), env.focusMenu);
|
||||
|
||||
const updateTheme = () =>
|
||||
db.set(['theme'], document.querySelector('.notion-dark-theme') ? 'dark' : 'light');
|
||||
web.addDocumentObserver((mutation) => {
|
||||
if (mutation.target === document.body) updateTheme();
|
||||
});
|
||||
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">
|
||||
@ -17,15 +27,7 @@ export default async function (api, db) {
|
||||
<div><div>notion-enhancer</div></div>
|
||||
</div>
|
||||
</div>`;
|
||||
$sidebarLink.addEventListener('click', env.openEnhancerMenu);
|
||||
web.addHotkeyListener(await db.get(['hotkey']), env.openEnhancerMenu);
|
||||
|
||||
const updateTheme = () =>
|
||||
db.set(['theme'], document.querySelector('.notion-dark-theme') ? 'dark' : 'light');
|
||||
web.addDocumentObserver((mutation) => {
|
||||
if (mutation.target === document.body) updateTheme();
|
||||
});
|
||||
updateTheme();
|
||||
$sidebarLink.addEventListener('click', env.focusMenu);
|
||||
|
||||
const notifications = {
|
||||
cache: await db.get(['notifications'], []),
|
||||
|
||||
@ -4,64 +4,65 @@
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
.enhancer--markdown table {
|
||||
.markdown table {
|
||||
border-spacing: 0;
|
||||
border: 1px solid var(--theme--ui_divider);
|
||||
}
|
||||
.enhancer--markdown table th {
|
||||
.markdown table th {
|
||||
text-align: left;
|
||||
}
|
||||
.enhancer--markdown table th,
|
||||
.enhancer--markdown table td {
|
||||
.markdown table th,
|
||||
.markdown table td {
|
||||
padding: 5px 8px 6px;
|
||||
border: 1px solid var(--theme--ui_divider);
|
||||
}
|
||||
.enhancer--markdown h1 {
|
||||
.markdown h1 {
|
||||
font-size: 1.875rem;
|
||||
margin: 1rem 0 0.5rem 0;
|
||||
}
|
||||
.enhancer--markdown h2 {
|
||||
.markdown h2 {
|
||||
font-size: 1.5rem;
|
||||
margin: 1rem 0 0.5rem 0;
|
||||
}
|
||||
.enhancer--markdown h3 {
|
||||
.markdown h3 {
|
||||
font-size: 1.25rem;
|
||||
margin: 1rem 0 0.5rem 0;
|
||||
}
|
||||
.enhancer--markdown ul,
|
||||
.enhancer--markdown ol {
|
||||
.markdown ul,
|
||||
.markdown ol {
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
.enhancer--markdown li {
|
||||
.markdown li {
|
||||
margin: 0.4rem 0;
|
||||
}
|
||||
.enhancer--markdown ol li {
|
||||
.markdown ol li {
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
.enhancer--markdown blockquote {
|
||||
.markdown blockquote {
|
||||
border-left: 2px solid currentColor;
|
||||
padding-left: 0.75rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
.enhancer--markdown hr {
|
||||
.markdown hr {
|
||||
border: 0.5px solid var(--theme--ui_divider);
|
||||
}
|
||||
.enhancer--markdown a {
|
||||
.markdown.markdown-inline a {
|
||||
opacity: 0.7;
|
||||
text-decoration: none;
|
||||
border-bottom: 0.05em solid var(--theme--text_ui);
|
||||
}
|
||||
.enhancer--markdown a:hover {
|
||||
.markdown.markdown-inline a:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.enhancer--markdown :not(pre) > code {
|
||||
.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);
|
||||
}
|
||||
.enhancer--markdown pre {
|
||||
.markdown pre {
|
||||
padding: 2em 1.25em;
|
||||
border-radius: 3px;
|
||||
tab-size: 2;
|
||||
@ -70,8 +71,8 @@
|
||||
background: var(--theme--code);
|
||||
color: var(--theme--code_plain);
|
||||
}
|
||||
.enhancer--markdown pre,
|
||||
.enhancer--markdown code {
|
||||
.markdown pre,
|
||||
.markdown.markdown-inline code {
|
||||
font-family: var(--theme--font_code);
|
||||
font-size: 0.796875rem;
|
||||
text-align: left;
|
||||
@ -85,7 +86,7 @@
|
||||
/*
|
||||
* https://prismjs.com/plugins/inline-color/
|
||||
*/
|
||||
.enhancer--markdown .inline-color-wrapper {
|
||||
.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">
|
||||
@ -104,7 +105,7 @@
|
||||
border: 0.5px solid var(--theme--code_plain);
|
||||
overflow: hidden;
|
||||
}
|
||||
.enhancer--markdown .inline-color {
|
||||
.markdown .inline-color {
|
||||
display: block;
|
||||
height: 120%;
|
||||
width: 120%;
|
||||
@ -113,8 +114,8 @@
|
||||
/*
|
||||
* https://prismjs.com/plugins/match-braces/
|
||||
*/
|
||||
.enhancer--markdown .token.punctuation.brace-hover,
|
||||
.enhancer--markdown .token.punctuation.brace-selected {
|
||||
.markdown .token.punctuation.brace-hover,
|
||||
.markdown .token.punctuation.brace-selected {
|
||||
outline: solid 1px;
|
||||
}
|
||||
|
||||
@ -122,43 +123,43 @@
|
||||
* https://prismjs.com/plugins/show-language/
|
||||
* https://prismjs.com/plugins/copy-to-clipboard/
|
||||
*/
|
||||
.enhancer--markdown .code-toolbar {
|
||||
.markdown .code-toolbar {
|
||||
position: relative;
|
||||
}
|
||||
.enhancer--markdown .code-toolbar .toolbar-item {
|
||||
.markdown .code-toolbar .toolbar-item {
|
||||
position: absolute;
|
||||
top: 0.35rem;
|
||||
display: inline-block;
|
||||
transition: opacity 200ms ease-in-out;
|
||||
opacity: 0;
|
||||
}
|
||||
.enhancer--markdown .code-toolbar .toolbar-item:first-child {
|
||||
.markdown .code-toolbar .toolbar-item:first-child {
|
||||
left: 0.8rem;
|
||||
}
|
||||
.enhancer--markdown .code-toolbar .toolbar-item:last-child {
|
||||
.markdown .code-toolbar .toolbar-item:last-child {
|
||||
right: 0.8rem;
|
||||
}
|
||||
.enhancer--markdown .code-toolbar:hover .toolbar-item,
|
||||
.enhancer--markdown .code-toolbar:focus-within .toolbar-item {
|
||||
.markdown .code-toolbar:hover .toolbar-item,
|
||||
.markdown .code-toolbar:focus-within .toolbar-item {
|
||||
opacity: 1;
|
||||
}
|
||||
.enhancer--markdown .code-toolbar .toolbar-item > * {
|
||||
.markdown .code-toolbar .toolbar-item > * {
|
||||
padding: 0.25rem 0.35rem;
|
||||
color: var(--theme--text_ui);
|
||||
font-size: 11px;
|
||||
font-family: inherit;
|
||||
}
|
||||
.enhancer--markdown .code-toolbar .toolbar-item .copy-to-clipboard-button {
|
||||
.markdown .code-toolbar .toolbar-item .copy-to-clipboard-button {
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
transition: background 100ms ease-in-out;
|
||||
}
|
||||
.enhancer--markdown .code-toolbar .toolbar-item .copy-to-clipboard-button:hover {
|
||||
.markdown .code-toolbar .toolbar-item .copy-to-clipboard-button:hover {
|
||||
background: var(--theme--button-hover);
|
||||
}
|
||||
.enhancer--markdown .code-toolbar .toolbar-item .copy-to-clipboard-button svg {
|
||||
.markdown .code-toolbar .toolbar-item .copy-to-clipboard-button svg {
|
||||
width: 1em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
@ -6,94 +6,14 @@
|
||||
|
||||
'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)`,
|
||||
});
|
||||
|
||||
setup({
|
||||
preflight: {
|
||||
html: apply`w-full h-full`,
|
||||
body: apply`w-full h-full bg-notion-bg font-sans text-foreground`,
|
||||
},
|
||||
theme: {
|
||||
fontFamily: {
|
||||
sans: ['var(--theme--font_sans)'],
|
||||
mono: ['var(--theme--font_mono)'],
|
||||
},
|
||||
colors: {
|
||||
'notion': {
|
||||
'bg': 'var(--theme--bg)',
|
||||
'secondary': 'var(--theme--bg_secondary)',
|
||||
'popup': 'var(--theme--bg_popup)',
|
||||
'divider': 'var(--theme--ui_divider)',
|
||||
'input': 'var(--theme--ui_input)',
|
||||
},
|
||||
'icon': 'var(--theme--icon)',
|
||||
'icon-ui': 'var(--theme--icon_ui)',
|
||||
'foreground': 'var(--theme--text)',
|
||||
'foreground-ui': 'var(--theme--text_ui)',
|
||||
'interactive': 'var(--theme--ui_interactive)',
|
||||
'interactive-hover': 'var(--theme--ui_interactive-hover)',
|
||||
'tag': 'var(--theme--tag_default)',
|
||||
'tag-text': 'var(--theme--tag_default-text)',
|
||||
'toggle': {
|
||||
'on': 'var(--theme--ui_toggle-on)',
|
||||
'off': 'var(--theme--ui_toggle-off)',
|
||||
'feature': 'var(--theme--ui_toggle-feature)',
|
||||
},
|
||||
'accent': {
|
||||
'blue': 'var(--theme--accent_blue)',
|
||||
'blue-hover': 'var(--theme--accent_blue-hover)',
|
||||
'blue-active': 'var(--theme--accent_blue-active)',
|
||||
'blue-text': 'var(--theme--accent_blue-text)',
|
||||
'red': 'var(--theme--accent_red)',
|
||||
'red-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)',
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// initialisation and external interactions
|
||||
|
||||
import * as api from '../../api/_.mjs';
|
||||
import { render } from '../../api/web.mjs';
|
||||
const { env, fmt, fs, registry, storage, web } = api,
|
||||
const { env, fmt, fs, registry, web } = api,
|
||||
db = await registry.db('a6621988-551d-495a-97d8-3c568bca2e9e');
|
||||
|
||||
import { tw } from './styles.mjs';
|
||||
|
||||
web.addHotkeyListener(await db.get(['hotkey']), env.focusNotion);
|
||||
|
||||
for (const mod of await registry.list((mod) => registry.enabled(mod.id))) {
|
||||
@ -110,29 +30,25 @@ document.addEventListener('visibilitychange', loadTheme);
|
||||
loadTheme();
|
||||
|
||||
const notifications = {
|
||||
$container: web.html`<div class="${tw`absolute bottom-0 right-0 px-4 py-3 max-w-full w-96`}"></div>`,
|
||||
$container: web.html`<div class="notifications-container"></div>`,
|
||||
cache: await db.get(['notifications'], []),
|
||||
provider: [
|
||||
env.welcomeNotification,
|
||||
...(await fs.getJSON('https://notion-enhancer.github.io/notifications.json')),
|
||||
],
|
||||
add({ icon, message, id = undefined, color = undefined, link = undefined }) {
|
||||
const style = tw`p-2 ${
|
||||
color
|
||||
? `bg-${color}-tag text-${color}-tag-text border border-${color}-text hover:bg-${color}-text`
|
||||
: 'bg-tag text-tag-text hover:bg-interactive-hover border border-notion-divider'
|
||||
} flex items-center rounded-full mt-3 shadow-md cursor-pointer`,
|
||||
$notification = web.render(
|
||||
link
|
||||
? web.html`<a href="${web.escape(
|
||||
link
|
||||
)}" class="${style}" role="alert" target="_blank"></a>`
|
||||
: web.html`<p class="${style}" role="alert" tabindex="0"></p>`,
|
||||
web.html`<span class="${tw`font-semibold mx-2 flex-auto`}">
|
||||
${message}
|
||||
</span>`,
|
||||
web.html`${web.icon(icon, { class: tw`fill-current opacity-75 h-4 w-4 mx-2` })}`
|
||||
),
|
||||
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);
|
||||
@ -144,7 +60,16 @@ const notifications = {
|
||||
$notification.addEventListener('keyup', (event) => {
|
||||
if (['Enter', ' '].includes(event.key)) resolve();
|
||||
});
|
||||
web.render(notifications.$container, $notification);
|
||||
web.render(
|
||||
notifications.$container,
|
||||
web.render(
|
||||
$notification,
|
||||
web.html`<span class="notification-text markdown-inline">
|
||||
${fmt.md.renderInline(message)}
|
||||
</span>`,
|
||||
web.html`${web.icon(icon, { class: 'notification-icon' })}`
|
||||
)
|
||||
);
|
||||
return $notification;
|
||||
},
|
||||
_changes: false,
|
||||
@ -158,7 +83,7 @@ const notifications = {
|
||||
$notification.addEventListener('click', env.reload);
|
||||
},
|
||||
};
|
||||
render(document.body, notifications.$container);
|
||||
web.render(document.body, notifications.$container);
|
||||
for (const notification of notifications.provider) {
|
||||
if (
|
||||
!notifications.cache.includes(notification.id) &&
|
||||
@ -182,135 +107,59 @@ if (errors.length) {
|
||||
|
||||
// mod config
|
||||
|
||||
const $container = web.html`<div class="${tw`flex w-full h-full overflow-hidden`}"></div>`,
|
||||
$nav = web.html`<nav class="${tw`px-4 py-3 flex flex-wrap items-center border-b border-notion-divider h-48 sm:h-32 lg:h-16`}"></nav>`,
|
||||
$main = web.html`<main class="${tw`transition px-4 py-3 overflow-y-auto max-h-full-48 sm:max-h-full-32 lg:max-h-full-16`}">abc</main>`,
|
||||
// $footer = web.html`<footer></footer>`,
|
||||
$sidebar = web.html`<article class="${tw`h-full w-96 bg-notion-secondary border-l border-notion-divider`}"></article>`;
|
||||
|
||||
const notionNavStyle = tw`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)`,
|
||||
$notion = web.html`<h1 class="${notionNavStyle}">
|
||||
${(await fs.getText('icon/colour.svg')).replace(
|
||||
/width="\d+" height="\d+"/,
|
||||
`class="${tw`h-12 w-12 mr-5 sm:(h-6 w-6 mr-3)`}"`
|
||||
)}
|
||||
<a href="https://notion-enhancer.github.io/" target="_blank">notion-enhancer</a>
|
||||
</h1>`;
|
||||
$notion.children[0].addEventListener('click', env.focusNotion);
|
||||
|
||||
const navItemStyle = tw`ml-4 px-3 py-2 rounded-md text-sm font-medium bg-interactive hover:bg-interactive-hover`,
|
||||
selectedNavItemStyle = tw`ml-4 px-3 py-2 rounded-md text-sm font-medium ring-1 ring-notion-divider bg-notion-secondary`;
|
||||
|
||||
const $coreNavItem = web.html`<a href="?view=core" class="${navItemStyle}">core</a>`,
|
||||
$extensionsNavItem = web.html`<a href="?view=extensions" class="${navItemStyle}">extensions</a>`,
|
||||
$themesNavItem = web.html`<a href="?view=themes" class="${navItemStyle}">themes</a>`,
|
||||
$supportNavItem = web.html`<a href="https://discord.gg/sFWPXtA" class="${navItemStyle}">support</a>`;
|
||||
|
||||
web.render(
|
||||
document.body,
|
||||
web.render(
|
||||
$container,
|
||||
web.render(
|
||||
web.html`<div class="${tw`h-full w-full-96`}"></div>`,
|
||||
web.render(
|
||||
$nav,
|
||||
$notion,
|
||||
$coreNavItem,
|
||||
$extensionsNavItem,
|
||||
$themesNavItem,
|
||||
$supportNavItem
|
||||
),
|
||||
$main
|
||||
// $footer
|
||||
),
|
||||
$sidebar
|
||||
)
|
||||
);
|
||||
|
||||
const components = {
|
||||
preview: (url) => web.html`<img
|
||||
class="${tw`object-cover w-full h-32`}"
|
||||
class="mod-preview"
|
||||
src="${web.escape(url)}"
|
||||
alt=""
|
||||
/>`,
|
||||
title: (title) => {
|
||||
const style = tw`mb-2 text-xl font-semibold tracking-tight flex items-center`;
|
||||
return web.html`<h4 class="${style}"><span>${web.escape(title)}</span></h4>`;
|
||||
},
|
||||
version: (version) => {
|
||||
const style = tw`mt-px ml-3 p-1 font-normal text-xs leading-none bg-tag text-tag-text rounded`;
|
||||
return web.html`<span class="${style}">v${web.escape(version)}</span>`;
|
||||
},
|
||||
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="${tw`text-foreground-ui mb-2 text-xs`}"></p>`,
|
||||
web.html`<p class="mod-tags"></p>`,
|
||||
tags.map((tag) => `#${web.escape(tag)}`).join(' ')
|
||||
);
|
||||
},
|
||||
description: (description) => {
|
||||
return web.html`<p class="${tw`mb-2 text-sm`} enhancer--markdown">
|
||||
${fmt.md.renderInline(description)}
|
||||
</p>`;
|
||||
},
|
||||
description: (description) => web.html`<p class="mod-description markdown-inline">
|
||||
${fmt.md.renderInline(description)}
|
||||
</p>`,
|
||||
authors: (authors) => {
|
||||
const author = (author) => web.html`<a class="${tw`flex items-center mb-2`}"
|
||||
href="${web.escape(author.homepage)}"
|
||||
>
|
||||
<img class="${tw`inline object-cover w-5 h-5 rounded-full mr-2`}"
|
||||
const author = (author) => web.html`<a class="mod-author" href="${web.escape(
|
||||
author.homepage
|
||||
)}">
|
||||
<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="${tw`text-sm font-medium`}"></p>`,
|
||||
...authors.map(author)
|
||||
);
|
||||
return web.render(web.html`<p class="mod-authors-container"></p>`, ...authors.map(author));
|
||||
},
|
||||
toggle: (
|
||||
checked,
|
||||
{
|
||||
customLabelStyle = '',
|
||||
customCheckStyle = '',
|
||||
customBoxStyle = '',
|
||||
customFeatureStyle = '',
|
||||
}
|
||||
) => {
|
||||
const checkStyle = tw`appearance-none checked:sibling:(bg-toggle-on after::translate-x-4) ${customCheckStyle}`,
|
||||
boxStyle = tw`w-9 h-5 p-0.5 flex items-center bg-toggle-off rounded-full duration-300 ease-in-out ${customBoxStyle}`,
|
||||
featureStyle = tw`after::(${pseudoContent} w-4 h-4 bg-toggle-feature rounded-full duration-300) ${customFeatureStyle}`,
|
||||
$label = web.html`<label tabindex="0" class="${tw`relative text-sm ${customLabelStyle}`}"></label>`,
|
||||
$input = web.html`<input tabindex="-1" type="checkbox" class="${checkStyle}" ${
|
||||
checked ? 'checked' : ''
|
||||
}/>`;
|
||||
toggle: (checked) => {
|
||||
const $label = web.html`<label tabindex="0" class="toggle-label-full"></label>`,
|
||||
$input = web.html`<input tabindex="-1" type="checkbox" class="toggle-check-right"
|
||||
${checked ? 'checked' : ''}/>`;
|
||||
$label.addEventListener('keyup', (event) => {
|
||||
if (['Enter', ' '].includes(event.key)) {
|
||||
$input.checked = !$input.checked;
|
||||
}
|
||||
if (['Enter', ' '].includes(event.key)) $input.checked = !$input.checked;
|
||||
});
|
||||
return web.render(
|
||||
$label,
|
||||
$input,
|
||||
web.html`<span class="${boxStyle} ${featureStyle}"></span>`
|
||||
web.html`<span class="toggle-box toggle-feature"></span>`
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
components.mod = async (mod) => {
|
||||
const $toggle = components.toggle(await registry.enabled(mod.id), {
|
||||
customLabelStyle: 'flex w-full mt-auto',
|
||||
customCheckStyle: 'ml-auto',
|
||||
});
|
||||
const $toggle = components.toggle(await registry.enabled(mod.id));
|
||||
$toggle.addEventListener('change', (event) => {
|
||||
registry.profile.set(['_mods', mod.id], event.target.checked);
|
||||
notifications.changes();
|
||||
});
|
||||
const style = tw`relative h-full w-full flex flex-col overflow-hidden rounded-lg shadow-lg
|
||||
bg-notion-secondary border border-notion-divider`;
|
||||
return web.render(
|
||||
web.html`<article class="${tw`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`}"></article>`,
|
||||
web.html`<article class="mod-container"></article>`,
|
||||
web.render(
|
||||
web.html`<div class="${style}"></div>`,
|
||||
web.html`<div class="mod"></div>`,
|
||||
mod.preview
|
||||
? components.preview(
|
||||
mod.preview.startsWith('http')
|
||||
@ -319,7 +168,7 @@ components.mod = async (mod) => {
|
||||
)
|
||||
: '',
|
||||
web.render(
|
||||
web.html`<div class="${tw`px-4 py-3 flex flex-col flex-auto`}"></div>`,
|
||||
web.html`<div class="mod-body"></div>`,
|
||||
web.render(components.title(mod.name), components.version(mod.version)),
|
||||
components.tags(mod.tags),
|
||||
components.description(mod.description),
|
||||
@ -331,21 +180,18 @@ components.mod = async (mod) => {
|
||||
};
|
||||
|
||||
components.modList = async (category) => {
|
||||
const $search = web.html`<input type="search" class="${tw`transition block w-full px-3 py-2 text-sm rounded-md flex
|
||||
bg-notion-input text-foreground
|
||||
hover:(ring ring-accent-blue-hover) focus:(outline-none ring ring-accent-blue-active)`}"
|
||||
const $search = web.html`<input type="search" class="search"
|
||||
placeholder="Search ('/' to focus)">`,
|
||||
$list = web.html`<div class="${tw`flex flex-wrap`}"></div>`,
|
||||
$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(),
|
||||
hiddenStyle = tw`hidden`;
|
||||
const query = $search.value.toLowerCase();
|
||||
for (const $mod of $list.children) {
|
||||
const matches = !query || $mod.innerText.toLowerCase().includes(query);
|
||||
$mod.classList[matches ? 'remove' : 'add'](hiddenStyle);
|
||||
$mod.classList[matches ? 'remove' : 'add']('hidden');
|
||||
}
|
||||
});
|
||||
for (const mod of mods) {
|
||||
@ -355,34 +201,72 @@ components.modList = async (category) => {
|
||||
}
|
||||
return web.render(
|
||||
web.html`<div></div>`,
|
||||
web.render(web.html`<div class="${tw`mx-2.5 my-2.5`}"></div>`, $search),
|
||||
web.render(web.html`<div class="search-container"></div>`, $search),
|
||||
$list
|
||||
);
|
||||
};
|
||||
|
||||
const $main = web.html`<main class="main"></main>`,
|
||||
$sidebar = web.html`<article class="sidebar"></article>`;
|
||||
|
||||
const $notionNavItem = web.html`<h1 class="nav-notion">
|
||||
${(await fs.getText('icon/colour.svg')).replace(
|
||||
/width="\d+" height="\d+"/,
|
||||
`class="nav-notion-icon"`
|
||||
)}
|
||||
<a href="https://notion-enhancer.github.io/" target="_blank">notion-enhancer</a>
|
||||
</h1>`;
|
||||
$notionNavItem.children[0].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>`,
|
||||
$supportNavItem = web.html`<a href="https://discord.gg/sFWPXtA" class="nav-item">support</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,
|
||||
$supportNavItem
|
||||
),
|
||||
$main
|
||||
),
|
||||
$sidebar
|
||||
)
|
||||
);
|
||||
|
||||
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 () => {
|
||||
$extensionsNavItem.className = navItemStyle;
|
||||
$themesNavItem.className = navItemStyle;
|
||||
$coreNavItem.className = selectedNavItemStyle;
|
||||
web.empty($main);
|
||||
selectNavItem($coreNavItem);
|
||||
return web.render($main, await components.modList('core'));
|
||||
});
|
||||
|
||||
router.addView('extensions', async () => {
|
||||
$coreNavItem.className = navItemStyle;
|
||||
$themesNavItem.className = navItemStyle;
|
||||
$extensionsNavItem.className = selectedNavItemStyle;
|
||||
web.empty($main);
|
||||
selectNavItem($extensionsNavItem);
|
||||
return web.render($main, await components.modList('extension'));
|
||||
});
|
||||
|
||||
router.addView('themes', async () => {
|
||||
$coreNavItem.className = navItemStyle;
|
||||
$extensionsNavItem.className = navItemStyle;
|
||||
$themesNavItem.className = selectedNavItemStyle;
|
||||
web.empty($main);
|
||||
selectNavItem($themesNavItem);
|
||||
return web.render($main, await components.modList('theme'));
|
||||
});
|
||||
|
||||
|
||||
@ -0,0 +1,137 @@
|
||||
/*
|
||||
* 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-notion-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 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-notion-divider h-48 sm: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 bg-interactive hover:bg-interactive-hover`,
|
||||
'nav-item-selected': apply`ml-4 px-3 py-2 rounded-md text-sm font-medium ring-1 ring-notion-divider bg-notion-secondary`,
|
||||
'main': apply`transition px-4 py-3 overflow-y-auto max-h-full-48 sm:max-h-full-32 lg:max-h-full-16`,
|
||||
'sidebar': apply`h-full w-96 bg-notion-secondary border-l border-notion-divider`,
|
||||
'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-notion-divider`,
|
||||
'mod-body': apply`px-4 py-3 flex flex-col flex-auto`,
|
||||
'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-ui 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`,
|
||||
'toggle-box': apply`w-9 h-5 p-0.5 flex items-center bg-toggle-off rounded-full duration-300 ease-in-out`,
|
||||
'toggle-label': apply`relative text-sm`,
|
||||
'toggle-label-full': apply`relative text-sm flex w-full mt-auto`,
|
||||
'toggle-check': apply`appearance-none checked:sibling:(bg-toggle-on after::translate-x-4)`,
|
||||
'toggle-check-right': 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)`,
|
||||
'search-container': apply`mx-2.5 my-2.5`,
|
||||
'search': apply`transition block w-full px-3 py-2 text-sm rounded-md flex bg-notion-input text-foreground
|
||||
hover:(ring ring-accent-blue-hover) focus:(outline-none ring ring-accent-blue-active)`,
|
||||
};
|
||||
|
||||
setup({
|
||||
preflight: {
|
||||
html: apply`w-full h-full`,
|
||||
body: apply`w-full h-full bg-notion-bg font-sans text-foreground`,
|
||||
},
|
||||
theme: {
|
||||
fontFamily: {
|
||||
sans: ['var(--theme--font_sans)'],
|
||||
mono: ['var(--theme--font_mono)'],
|
||||
},
|
||||
colors: {
|
||||
'notion': {
|
||||
'bg': 'var(--theme--bg)',
|
||||
'secondary': 'var(--theme--bg_secondary)',
|
||||
'popup': 'var(--theme--bg_popup)',
|
||||
'divider': 'var(--theme--ui_divider)',
|
||||
'input': 'var(--theme--ui_input)',
|
||||
},
|
||||
'icon': 'var(--theme--icon)',
|
||||
'icon-ui': 'var(--theme--icon_ui)',
|
||||
'foreground': 'var(--theme--text)',
|
||||
'foreground-ui': 'var(--theme--text_ui)',
|
||||
'interactive': 'var(--theme--ui_interactive)',
|
||||
'interactive-hover': 'var(--theme--ui_interactive-hover)',
|
||||
'tag': 'var(--theme--tag_default)',
|
||||
'tag-text': 'var(--theme--tag_default-text)',
|
||||
'toggle': {
|
||||
'on': 'var(--theme--ui_toggle-on)',
|
||||
'off': 'var(--theme--ui_toggle-off)',
|
||||
'feature': 'var(--theme--ui_toggle-feature)',
|
||||
},
|
||||
'accent': {
|
||||
'blue': 'var(--theme--accent_blue)',
|
||||
'blue-hover': 'var(--theme--accent_blue-hover)',
|
||||
'blue-active': 'var(--theme--accent_blue-active)',
|
||||
'blue-text': 'var(--theme--accent_blue-text)',
|
||||
'red': 'var(--theme--accent_red)',
|
||||
'red-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)',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: customClasses,
|
||||
});
|
||||
|
||||
tw`hidden ${Object.keys(customClasses).join(' ')}`;
|
||||
|
||||
export { tw };
|
||||
@ -2,7 +2,7 @@
|
||||
"name": "tweaks",
|
||||
"id": "5174a483-c88d-4bf8-a95f-35cd330b76e2",
|
||||
"version": "0.2.0",
|
||||
"description": "common style/layout changes and custom inserts.",
|
||||
"description": "common style/layout changes and custom CSS insertion.",
|
||||
"tags": ["extension", "customisation"],
|
||||
"authors": [
|
||||
{
|
||||
|
||||
@ -6,47 +6,45 @@
|
||||
|
||||
'use strict';
|
||||
|
||||
function openEnhancerMenu() {
|
||||
chrome.tabs.query({ windowId: chrome.windows.WINDOW_ID_CURRENT }, (tabs) => {
|
||||
const enhancerMenuURL = chrome.runtime.getURL(
|
||||
'repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.html'
|
||||
),
|
||||
enhancerMenuTab = tabs.find((tab) => tab.url.startsWith(enhancerMenuURL));
|
||||
if (enhancerMenuTab) {
|
||||
chrome.tabs.highlight({ 'tabs': enhancerMenuTab.index });
|
||||
} else chrome.tabs.create({ url: enhancerMenuURL });
|
||||
});
|
||||
async function focusMenu() {
|
||||
const tabs = await chrome.tabs.query({ windowId: chrome.windows.WINDOW_ID_CURRENT }),
|
||||
url = chrome.runtime.getURL('repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.html'),
|
||||
menu = tabs.find((tab) => tab.url.startsWith(url));
|
||||
if (menu) {
|
||||
chrome.tabs.highlight({ 'tabs': menu.index });
|
||||
} else chrome.tabs.create({ url });
|
||||
}
|
||||
chrome.action.onClicked.addListener(openEnhancerMenu);
|
||||
chrome.action.onClicked.addListener(focusMenu);
|
||||
|
||||
function focusNotion() {
|
||||
chrome.tabs.query(
|
||||
{ url: 'https://*.notion.so/*', windowId: chrome.windows.WINDOW_ID_CURRENT },
|
||||
(tabs) => {
|
||||
if (tabs.length) {
|
||||
chrome.tabs.highlight({ 'tabs': tabs[0].index });
|
||||
} else chrome.tabs.create({ url: 'https://notion.so/' });
|
||||
}
|
||||
);
|
||||
async function focusNotion() {
|
||||
const tabs = await chrome.tabs.query({ windowId: chrome.windows.WINDOW_ID_CURRENT }),
|
||||
notion = tabs.find(
|
||||
(tab) =>
|
||||
new URL(tab.url).host.endsWith('.notion.so') ||
|
||||
new URL(tab.url).host.endsWith('.notion.site')
|
||||
);
|
||||
if (notion) {
|
||||
chrome.tabs.highlight({ 'tabs': notion.index });
|
||||
} else chrome.tabs.create({ url: 'https://notion.so/' });
|
||||
}
|
||||
|
||||
function reload() {
|
||||
chrome.tabs.query({ url: 'https://*.notion.so/*' }, (tabs) => {
|
||||
(tabs || []).forEach((tab) => chrome.tabs.reload(tab.id));
|
||||
});
|
||||
chrome.tabs.query({ windowId: chrome.windows.WINDOW_ID_CURRENT }, (tabs) => {
|
||||
const enhancerMenuURL = chrome.runtime.getURL(
|
||||
'repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.html'
|
||||
),
|
||||
enhancerMenuTabs = (tabs || []).filter((tab) => tab.url.startsWith(enhancerMenuURL));
|
||||
enhancerMenuTabs.forEach((tab) => chrome.tabs.reload(tab.id));
|
||||
async function reload() {
|
||||
const tabs = await chrome.tabs.query({ windowId: chrome.windows.WINDOW_ID_CURRENT }),
|
||||
menu = chrome.runtime.getURL('repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.html');
|
||||
tabs.forEach((tab) => {
|
||||
const url = new URL(tab.url),
|
||||
matches =
|
||||
url.host.endsWith('.notion.so') ||
|
||||
url.host.endsWith('.notion.site') ||
|
||||
tab.url.startsWith(menu);
|
||||
if (matches) chrome.tabs.reload(tab.id);
|
||||
});
|
||||
}
|
||||
|
||||
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
|
||||
switch (request.action) {
|
||||
case 'openEnhancerMenu':
|
||||
openEnhancerMenu();
|
||||
case 'focusMenu':
|
||||
focusMenu();
|
||||
break;
|
||||
case 'focusNotion':
|
||||
focusNotion();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user