diff --git a/extension/helpers.js b/extension/helpers.js
index a2c2133..d8bfc48 100644
--- a/extension/helpers.js
+++ b/extension/helpers.js
@@ -124,6 +124,7 @@ import './dep/prism.js';
fmt.Prism = Prism;
fmt.Prism.manual = true;
fmt.Prism.hooks.add('complete', async (event) => {
+ event.element.parentElement.removeAttribute('tabindex');
event.element.parentElement.parentElement
.querySelector('.copy-to-clipboard-button')
.prepend(web.createElement(await fs.getText('icons/fontawesome/copy.svg')));
@@ -138,15 +139,15 @@ import './dep/markdown-it.min.js';
fmt.md = new markdownit({
linkify: true,
highlight: (str, lang) =>
- web.html`<pre${
- lang ? ` class="language-${lang} match-braces"` : ''
- }><code>${web.escapeHtml(str)}</code></pre>`,
+ web.html`<pre class="language-${lang || 'plaintext'} match-braces"><code>${web.escapeHtml(
+ str
+ )}</code></pre>`,
});
fmt.md.renderer.rules.code_block = (tokens, idx, options, env, slf) => {
const attrIdx = tokens[idx].attrIndex('class');
if (attrIdx === -1) {
- tokens[idx].attrPush(['class', 'match-braces']);
- } else tokens[idx].attrs[attrIdx][1] = 'match-braces';
+ 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(
tokens[idx].content
)}</code></pre>\n`;
diff --git a/extension/icons/fontawesome/discord.svg b/extension/icons/fontawesome/discord.svg
new file mode 100644
index 0000000..c5653f0
--- /dev/null
+++ b/extension/icons/fontawesome/discord.svg
@@ -0,0 +1,2 @@
+<!-- https://fontawesome.com/icons/discord?style=solid -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M297.216 243.2c0 15.616-11.52 28.416-26.112 28.416-14.336 0-26.112-12.8-26.112-28.416s11.52-28.416 26.112-28.416c14.592 0 26.112 12.8 26.112 28.416zm-119.552-28.416c-14.592 0-26.112 12.8-26.112 28.416s11.776 28.416 26.112 28.416c14.592 0 26.112-12.8 26.112-28.416.256-15.616-11.52-28.416-26.112-28.416zM448 52.736V512c-64.494-56.994-43.868-38.128-118.784-107.776l13.568 47.36H52.48C23.552 451.584 0 428.032 0 398.848V52.736C0 23.552 23.552 0 52.48 0h343.04C424.448 0 448 23.552 448 52.736zm-72.96 242.688c0-82.432-36.864-149.248-36.864-149.248-36.864-27.648-71.936-26.88-71.936-26.88l-3.584 4.096c43.52 13.312 63.744 32.512 63.744 32.512-60.811-33.329-132.244-33.335-191.232-7.424-9.472 4.352-15.104 7.424-15.104 7.424s21.248-20.224 67.328-33.536l-2.56-3.072s-35.072-.768-71.936 26.88c0 0-36.864 66.816-36.864 149.248 0 0 21.504 37.12 78.08 38.912 0 0 9.472-11.52 17.152-21.248-32.512-9.728-44.8-30.208-44.8-30.208 3.766 2.636 9.976 6.053 10.496 6.4 43.21 24.198 104.588 32.126 159.744 8.96 8.96-3.328 18.944-8.192 29.44-15.104 0 0-12.8 20.992-46.336 30.464 7.68 9.728 16.896 20.736 16.896 20.736 56.576-1.792 78.336-38.912 78.336-38.912z"></path></svg>
\ No newline at end of file
diff --git a/extension/icons/fontawesome/info.svg b/extension/icons/fontawesome/info.svg
new file mode 100644
index 0000000..508b38b
--- /dev/null
+++ b/extension/icons/fontawesome/info.svg
@@ -0,0 +1,2 @@
+<!-- https://fontawesome.com/icons/info?style=solid -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path fill="currentColor" d="M20 424.229h20V279.771H20c-11.046 0-20-8.954-20-20V212c0-11.046 8.954-20 20-20h112c11.046 0 20 8.954 20 20v212.229h20c11.046 0 20 8.954 20 20V492c0 11.046-8.954 20-20 20H20c-11.046 0-20-8.954-20-20v-47.771c0-11.046 8.954-20 20-20zM96 0C56.235 0 24 32.235 24 72s32.235 72 72 72 72-32.235 72-72S135.764 0 96 0z"></path></svg>
\ No newline at end of file
diff --git a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/markdown.css b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/markdown.css
index eaac224..1ab8d7c 100644
--- a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/markdown.css
+++ b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/markdown.css
@@ -89,7 +89,7 @@
/*
* https://prismjs.com/plugins/inline-color/
*/
-span.inline-color-wrapper {
+.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">
@@ -108,7 +108,7 @@ span.inline-color-wrapper {
border: 0.5px solid var(--theme--code_plain);
overflow: hidden;
}
-span.inline-color {
+.inline-color {
display: block;
height: 120%;
width: 120%;
diff --git a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.css b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.css
index 54bc89e..d460fe4 100644
--- a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.css
+++ b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.css
@@ -20,7 +20,8 @@ html[class] {
}
body {
- padding: 1.5rem;
+ padding: 2rem 2.5rem;
+ margin: 0;
background: var(--theme--sidebar);
color: var(--theme--text);
font-family: var(--theme--font_sans);
@@ -38,13 +39,27 @@ header > * {
margin: 0 1.25rem 0 0;
font-size: var(--theme--font_heading1-size);
}
-header img {
- height: 100%;
- width: 24px;
-}
header h1 a:not([data-active]) {
text-decoration: none;
}
+header h1 img {
+ width: 0.95em;
+ height: 0.95em;
+ margin-right: 0.5em;
+ margin-bottom: -0.1em;
+}
+header h1 svg {
+ width: 1em;
+ height: 1em;
+ padding-top: 0.3em;
+ margin-right: 0.2em;
+}
+header h1 svg[data-fa='info'] {
+ margin-right: 0em;
+}
+header h1 svg[data-fa='code'] {
+ margin-right: 0.3em;
+}
img[data-target='notion'] {
cursor: pointer;
@@ -218,7 +233,9 @@ img[data-target='notion'] {
.library--number_label *,
.library--file_label * {
appearance: none;
+ font-family: var(--theme--font_sans);
font-size: var(--theme--font_ui-size);
+ color: var(--theme--text);
}
label p:not([class]),
label p > span:not([class]),
@@ -355,6 +372,57 @@ label > span:not([class]) {
overflow-x: auto;
}
+.alert--list {
+ position: absolute;
+ bottom: 1.5rem;
+ right: 1.5rem;
+}
+[role='alert'] {
+ max-width: calc(100vw - 3rem);
+ width: 25rem;
+ background: var(--theme--block_blue);
+ color: var(--theme--block_blue-text);
+ font-size: var(--theme--font_ui-size);
+ border-top: 4px currentColor solid;
+ border-bottom-left-radius: 3px;
+ border-bottom-right-radius: 3px;
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+ padding: 1.25em 1.5em;
+ display: flex;
+ margin-top: 1rem;
+ position: relative;
+}
+[role='alert'] svg {
+ height: 1.5rem;
+ width: 1.5rem;
+ margin-top: 0.25rem;
+ margin-right: 1rem;
+}
+[role='alert'] h3 {
+ margin: 0 0 0.25rem 0;
+ font-weight: bold;
+}
+[role='alert'] p {
+ margin: 0.25rem 0 0.5rem 0;
+}
+[role='alert'] .alert--dismiss {
+ position: absolute;
+ top: 0.5rem;
+ right: 0.75rem;
+ background: none;
+ border: none;
+ padding: 0.25rem 0.35rem;
+ font-size: var(--theme--font_body-size);
+ color: currentColor;
+ cursor: pointer;
+ transition: opacity 200ms ease-in-out;
+ opacity: 0;
+}
+[role='alert']:hover .alert--dismiss,
+[role='alert']:focus-within .alert--dismiss {
+ opacity: 1;
+}
+
::-webkit-scrollbar {
background: transparent;
width: 10px;
diff --git a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.html b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.html
index 6dc09a4..14f00a8 100644
--- a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.html
+++ b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.html
@@ -7,15 +7,59 @@
</head>
<body>
<header>
- <p><img data-target="notion" alt="" width="24" src="../../icons/colour.svg" /></p>
- <h1><a href="?view=library" data-target="library">library</a></h1>
- <h1><a href="?view=alerts" data-target="alerts">alerts</a></h1>
- <h1><a href="https://github.com/notion-enhancer/extension">github</a></h1>
- <h1><a href="https://discord.gg/sFWPXtA">discord</a></h1>
+ <h1>
+ <img data-target="notion" alt="" width="24" src="../../icons/colour.svg" /><a
+ href="?view=library"
+ data-target="library"
+ >library</a
+ >
+ </h1>
+ <h1>
+ <span data-fa="info"></span><a href="https://notion-enhancer.github.io/">website</a>
+ </h1>
+ <h1>
+ <span data-fa="code"></span
+ ><a href="https://github.com/notion-enhancer/extension">source code</a>
+ </h1>
+ <h1><span data-fa="discord"></span><a href="https://discord.gg/sFWPXtA">support</a></h1>
</header>
<main>
<section data-container></section>
</main>
+ <footer class="alert--list">
+ <div role="alert">
+ <div>
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+ <path
+ fill="currentColor"
+ d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"
+ />
+ </svg>
+ </div>
+ <div>
+ <h3>v0.11.0 released</h3>
+ <p>
+ <a href="chrome://extensions">read the changelog</a> and
+ <a href="">update the extension</a>
+ </p>
+ </div>
+ <button class="alert--dismiss">×</button>
+ </div>
+ <div role="alert">
+ <div>
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+ <path
+ fill="currentColor"
+ d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"
+ />
+ </svg>
+ </div>
+ <div>
+ <h3>alert</h3>
+ <p>description</p>
+ </div>
+ </div>
+ </footer>
<script src="./menu.js" type="module"></script>
</body>
</html>
diff --git a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.js b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.js
index 2b5f923..8d68a25 100644
--- a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.js
+++ b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.js
@@ -15,9 +15,15 @@ for (let mod of await registry.get()) {
}
}
+
document.querySelector('img[data-target="notion"]').addEventListener('click', env.focusNotion);
web.hotkeyListener(['Ctrl', 'Alt', 'E'], env.focusNotion);
+document.querySelectorAll('[data-fa]').forEach(icon => fs.getText(`icons/fontawesome/${icon.dataset.fa}.svg`).then(svg => {
+ svg = web.createElement(svg);
+ svg.dataset.fa = icon.dataset.fa; icon.replaceWith(svg);
+}))
+
const components = {};
components.card = {
preview: ({ preview = '' }) =>
@@ -254,9 +260,6 @@ const views = {
.map((query) => query.split('='))
);
switch (search.get('view')) {
- case 'alerts':
- await this.alerts();
- break;
case 'mod':
const mod = (await registry.get()).find((mod) => mod.id === search.get('id'));
if (mod) {
@@ -289,12 +292,6 @@ const views = {
.querySelectorAll('a[href^="#"]')
.forEach((a) => a.addEventListener('click', this._navigator));
},
- async alerts() {
- this.$container.dataset.container = 'alerts';
- document.querySelector('header [data-target="alerts"]').dataset.active = true;
- for (let mod of await registry.get())
- this.$container.append(await components.card._generate(mod));
- },
async mod(mod) {
this.$container.dataset.container = 'mod';
document.querySelector('header [data-target="library"]').dataset.active = true;