mockup alerts, add header icons, copy plaintext code button

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${
+    web.html`<pre class="language-${lang || 'plaintext'} match-braces"><code>${web.escapeHtml(
-      lang ? ` class="language-${lang} match-braces"` : ''
+      str
-    }><code>${web.escapeHtml(str)}</code></pre>`,
+    )}</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']);
+    tokens[idx].attrPush(['class', 'match-braces language-plaintext']);
-  } else tokens[idx].attrs[attrIdx][1] = 'match-braces';
+  } 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`;

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>

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>

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

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;

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>
-      <h1><a href="?view=library" data-target="library">library</a></h1>
+        <img data-target="notion" alt="" width="24" src="../../icons/colour.svg" /><a
-      <h1><a href="?view=alerts" data-target="alerts">alerts</a></h1>
+          href="?view=library"
-      <h1><a href="https://github.com/notion-enhancer/extension">github</a></h1>
+          data-target="library"
-      <h1><a href="https://discord.gg/sFWPXtA">discord</a></h1>
+          >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">&times;</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>

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;