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`${web.escapeHtml(str)}`, + web.html`
${web.escapeHtml(
+      str
+    )}
`, }); 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`${web.escapeHtml( tokens[idx].content )}\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 @@ + + \ 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 @@ + + \ 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) * @@ -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 @@
-

-

library

-

alerts

-

github

-

discord

+

+ library +

+

+ website +

+

+ source code +

+

support

+ 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;