Merge branch 'master' into feature/material-v9

src/assets/javascripts/components/content/code/mermaid/index.ts

@@ -107,15 +107,21 @@ export function mountMermaid(
   mermaid$.subscribe(() => {
     el.classList.add("mermaid") // Hack: mitigate https://bit.ly/3CiN6Du
     const id = `__mermaid_${sequence++}`
+
+    /* Create host element to replace code block */
     const host = h("div", { class: "mermaid" })
-    mermaid.mermaidAPI.render(id, el.textContent, (svg: string) => {
+    const text = el.textContent
+
+    /* Render and inject diagram */
+    mermaid.mermaidAPI.render(id, text, (svg: string, fn: Function) => {
 
       /* Create a shadow root and inject diagram */
       const shadow = host.attachShadow({ mode: "closed" })
       shadow.innerHTML = svg
 
-      /* Replace code block with diagram */
+      /* Replace code block with diagram and bind functions */
       el.replaceWith(host)
+      fn?.(shadow)
     })
   })
 

src/assets/javascripts/extra/bundle.ts

@@ -0,0 +1,104 @@
+/*
+ * Copyright (c) 2016-2022 Martin Donath <martin.donath@squidfunk.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+import {
+  NEVER,
+  ReplaySubject,
+  delay,
+  distinctUntilChanged,
+  filter,
+  finalize,
+  fromEvent,
+  interval,
+  merge,
+  mergeMap,
+  of,
+  repeat,
+  switchMap,
+  take,
+  takeUntil,
+  tap,
+  withLatestFrom
+} from "rxjs"
+
+/* ----------------------------------------------------------------------------
+ * Script
+ * ------------------------------------------------------------------------- */
+
+/* Append container for instances */
+const container = document.createElement("div")
+document.body.appendChild(container)
+
+/* Append button next to palette toggle */
+const header = document.querySelector(".md-header__title")
+if (header) {
+  const button = document.createElement("button")
+  button.className = "md-header__button md-icon ᴴₒᴴₒᴴₒ__button"
+  if (header.parentElement)
+    header.insertAdjacentElement("afterend", button)
+
+  /* Toggle animation */
+  const on$ = new ReplaySubject<boolean>(1)
+  on$
+    .pipe(
+      distinctUntilChanged()
+    )
+      .subscribe(on => {
+        sessionStorage.setItem("ᴴₒᴴₒᴴₒ", `${on}`)
+        button.hidden = !on
+      })
+
+  /* Load state from session storage */
+  on$.next(JSON.parse(sessionStorage.getItem("ᴴₒᴴₒᴴₒ") || "true"))
+  fromEvent(button, "click")
+    .pipe(
+      withLatestFrom(on$)
+    )
+      .subscribe(([, on]) => on$.next(!on))
+
+  /* Generate instances */
+  interval(250)
+    .pipe(
+      takeUntil(on$.pipe(filter(on => !on))),
+      take(75),
+      repeat({ delay: () => on$.pipe(filter(on => on)) }),
+      mergeMap(() => {
+        const instance = document.createElement("div")
+        instance.className = "ᴴₒᴴₒᴴₒ"
+        instance.ariaHidden = "true"
+        container.appendChild(instance)
+        return merge(NEVER, of(instance))
+          .pipe(
+            finalize(() => instance.remove()),
+            takeUntil(on$.pipe(filter(on => !on))),
+            switchMap(el => fromEvent(el, "click")
+              .pipe(
+                tap(() => el.classList.add("ᴴₒᴴₒᴴₒ--ᵍₒᵗ꜀ᴴₐ")),
+                delay(1000),
+                tap(() => el.classList.remove("ᴴₒᴴₒᴴₒ--ᵍₒᵗ꜀ᴴₐ"))
+              )
+            )
+          )
+      })
+    )
+      .subscribe()
+}