From 7aa9063f79e3fe461ff96a1e8a2111c3d33e7bdc Mon Sep 17 00:00:00 2001
From: Amphiluke <amphiluke@gmail.com>
Date: Sun, 10 Dec 2023 15:35:14 +0700
Subject: [PATCH] Implement permalinking with GitHub gists

---
 package-lock.json                   |   4 +-
 package.json                        |   2 +-
 src/App.vue                         |   4 +-
 src/assets/icons.svg                |   2 +-
 src/components/PanelAbout.vue       |   2 +-
 src/components/PanelCollections.vue |  35 ++++----
 src/components/PanelSharing.vue     | 124 +++++++++++-----------------
 src/launchCtrl.mjs                  |  83 +++++++++++++++++++
 src/pwaCtrl.mjs                     |  36 --------
 src/stores/bank.mjs                 |   2 +-
 src/styles/interface.module.css     |  13 +++
 11 files changed, 175 insertions(+), 132 deletions(-)
 create mode 100644 src/launchCtrl.mjs

diff --git a/package-lock.json b/package-lock.json
index 403a3b5..f3e4ef6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "lindsvg-pwa",
-  "version": "2.2.2",
+  "version": "2.3.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "lindsvg-pwa",
-      "version": "2.2.2",
+      "version": "2.3.0",
       "dependencies": {
         "@vueuse/core": "^10.6.1",
         "lindsvg": "^1.3.2",
diff --git a/package.json b/package.json
index 29351d3..e54c295 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "lindsvg-pwa",
   "private": true,
-  "version": "2.2.2",
+  "version": "2.3.0",
   "type": "module",
   "scripts": {
     "lint": "eslint \"src/**/*.{mjs,vue}\"",
diff --git a/src/App.vue b/src/App.vue
index 06c9b47..d0832ff 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,11 @@
 <script setup>
 import {onMounted} from "vue";
-import {applyLaunchParams} from "./pwaCtrl.mjs";
+import {processLaunchOptions} from "./launchCtrl.mjs";
 import PlotArea from "./components/PlotArea.vue";
 import TheSidebar from "./components/TheSidebar.vue";
 import ThePopover from "./components/ThePopover.vue";
 
-onMounted(() => applyLaunchParams());
+onMounted(() => processLaunchOptions());
 </script>
 
 <template>
diff --git a/src/assets/icons.svg b/src/assets/icons.svg
index 598c48b..239b81d 100644
--- a/src/assets/icons.svg
+++ b/src/assets/icons.svg
@@ -1 +1 @@
-<svg width="200" height="25" viewBox="0 0 200 25" xmlns="http://www.w3.org/2000/svg"><g fill="#000" fill-rule="evenodd"><path d="M39 5.66c-.38-1.56-2.6-1.56-2.98 0a1.53 1.53 0 0 1-2.29.95c-1.37-.84-2.94.73-2.1 2.1.54.9.06 2.05-.95 2.3-1.56.37-1.56 2.6 0 2.97a1.53 1.53 0 0 1 .95 2.29c-.84 1.37.73 2.94 2.1 2.1a1.53 1.53 0 0 1 2.3.95c.37 1.56 2.6 1.56 2.97 0a1.53 1.53 0 0 1 2.29-.95c1.37.84 2.94-.73 2.1-2.1a1.53 1.53 0 0 1 .95-2.29c1.56-.38 1.56-2.6 0-2.98a1.53 1.53 0 0 1-.95-2.28c.84-1.38-.73-2.95-2.1-2.1A1.53 1.53 0 0 1 39 5.65zm-1.49 9.83a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM12.5 14.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/><path d="M2.96 12.5a10 10 0 0 1 19.08 0 10 10 0 0 1-19.08 0zm13.54 0a4 4 0 1 1-8 0 4 4 0 0 1 8 0zm70-8a1 1 0 0 0-.9.55l-.72 1.44H81.5a1 1 0 0 0 0 2v10a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-10a1 1 0 0 0 0-2h-3.38l-.73-1.44a1 1 0 0 0-.9-.56zm-2 6a1 1 0 0 1 2 0v6a1 1 0 0 1-2 0zm5-1a1 1 0 0 0-1 1v6a1 1 0 0 0 2 0v-6a1 1 0 0 0-1-1zm-27 11a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM61.22 9.77a1 1 0 1 0-1.4 1.42l1.28 1.3-1.29 1.28a1 1 0 1 0 1.41 1.42l1.3-1.3 1.3 1.3a1 1 0 1 0 1.4-1.42l-1.29-1.29 1.3-1.3a1 1 0 1 0-1.42-1.4l-1.3 1.29zM112.5 5.5a1 1 0 0 1 .7.3l3 3a1 1 0 1 1-1.4 1.41l-2.3-2.29-2.3 2.3a1 1 0 1 1-1.4-1.42l3-3a1 1 0 0 1 .7-.3zm-3.7 9.3a1 1 0 0 1 1.4 0l2.3 2.3 2.3-2.3a1 1 0 1 1 1.4 1.41l-3 3a1 1 0 0 1-1.4 0l-3-3a1 1 0 0 1 0-1.41zm21.7-9.3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3a1 1 0 0 1-.3.7l-4.7 4.71v3.59a1 1 0 0 1-.3.7l-2 2a1 1 0 0 1-1.7-.7v-5.59l-4.7-4.7a1 1 0 0 1-.3-.71z"/><circle cx="156.5" cy="12.5" r="2"/><circle cx="162.5" cy="12.5" r="2"/><circle cx="168.5" cy="12.5" r="2"/><path d="M180.05 2.05a3 3 0 0 0-3 3v15a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3v-15a3 3 0 0 0-3-3h-15zm.5 2h2.5v17h-2.5a1.5 1.5 0 0 1-1.5-1.5v-14c0-.84.66-1.5 1.5-1.5zm4.5 0h9.5c.82 0 1.5.66 1.5 1.5v14c0 .82-.68 1.5-1.5 1.5h-9.5v-17z"/><path d="m186.55 12.35 6.58-3.8v7.6l-3.3-1.9z"/></g></svg>
\ No newline at end of file
+<svg width="225" height="25" viewBox="0 0 225 25" xmlns="http://www.w3.org/2000/svg"><g fill="#000" fill-rule="evenodd"><path d="M39 5.66c-.38-1.56-2.6-1.56-2.98 0a1.53 1.53 0 0 1-2.29.95c-1.37-.84-2.94.73-2.1 2.1.54.9.06 2.05-.95 2.3-1.56.37-1.56 2.6 0 2.97a1.53 1.53 0 0 1 .95 2.29c-.84 1.37.73 2.94 2.1 2.1a1.53 1.53 0 0 1 2.3.95c.37 1.56 2.6 1.56 2.97 0a1.53 1.53 0 0 1 2.29-.95c1.37.84 2.94-.73 2.1-2.1a1.53 1.53 0 0 1 .95-2.29c1.56-.38 1.56-2.6 0-2.98a1.53 1.53 0 0 1-.95-2.28c.84-1.38-.73-2.95-2.1-2.1A1.53 1.53 0 0 1 39 5.65zm-1.49 9.83a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM12.5 14.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/><path d="M2.96 12.5a10 10 0 0 1 19.08 0 10 10 0 0 1-19.08 0zm13.54 0a4 4 0 1 1-8 0 4 4 0 0 1 8 0zm70-8a1 1 0 0 0-.9.55l-.72 1.44H81.5a1 1 0 0 0 0 2v10a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-10a1 1 0 0 0 0-2h-3.38l-.73-1.44a1 1 0 0 0-.9-.56zm-2 6a1 1 0 0 1 2 0v6a1 1 0 0 1-2 0zm5-1a1 1 0 0 0-1 1v6a1 1 0 0 0 2 0v-6a1 1 0 0 0-1-1zm-27 11a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM61.22 9.77a1 1 0 1 0-1.4 1.42l1.28 1.3-1.29 1.28a1 1 0 1 0 1.41 1.42l1.3-1.3 1.3 1.3a1 1 0 1 0 1.4-1.42l-1.29-1.29 1.3-1.3a1 1 0 1 0-1.42-1.4l-1.3 1.29zM112.5 5.5a1 1 0 0 1 .7.3l3 3a1 1 0 1 1-1.4 1.41l-2.3-2.29-2.3 2.3a1 1 0 1 1-1.4-1.42l3-3a1 1 0 0 1 .7-.3zm-3.7 9.3a1 1 0 0 1 1.4 0l2.3 2.3 2.3-2.3a1 1 0 1 1 1.4 1.41l-3 3a1 1 0 0 1-1.4 0l-3-3a1 1 0 0 1 0-1.41zm21.7-9.3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3a1 1 0 0 1-.3.7l-4.7 4.71v3.59a1 1 0 0 1-.3.7l-2 2a1 1 0 0 1-1.7-.7v-5.59l-4.7-4.7a1 1 0 0 1-.3-.71z"/><circle cx="156.5" cy="12.5" r="2"/><circle cx="162.5" cy="12.5" r="2"/><circle cx="168.5" cy="12.5" r="2"/><path d="M180.05 2.05a3 3 0 0 0-3 3v15a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3v-15a3 3 0 0 0-3-3zm.5 2h2.5v17h-2.5a1.5 1.5 0 0 1-1.5-1.5v-14c0-.84.66-1.5 1.5-1.5zm4.5 0h9.5c.82 0 1.5.66 1.5 1.5v14c0 .82-.68 1.5-1.5 1.5h-9.5z"/><path d="m186.55 12.35 6.58-3.8v7.6l-3.3-1.9z"/></g><path d="M215.44 4.5h.36c.55-.01 1.15.1 1.67.3a4.75 4.75 0 0 1 2.1 7.25c-.32.41-.69.76-1.05 1.13-.25.24-.44.48-.77.6a1.07 1.07 0 0 1-1.38-.6c-.04-.13-.04-.27-.04-.41.02-.74.87-1.3 1.32-1.82.78-.86.9-2.08.32-3.06-.12-.22-.26-.36-.42-.54a2.53 2.53 0 0 0-3.4-.14c-.4.33-1.07 1.14-1.46 1.34a1.19 1.19 0 0 1-.44.11c-1.04.05-1.46-1.1-.8-1.83l.56-.57A5.52 5.52 0 0 1 214 4.83c.54-.22.9-.25 1.45-.33zm-1.01 4.73c.7-.1 1.28.26 1.33 1 .05.66-.57 1.11-1 1.52l-3.48 3.48c-.36.36-.5.54-1.05.52-.56 0-.96-.45-1-1-.06-.66.57-1.12 1-1.53l2.82-2.84c.2-.19.88-.9 1.06-1.01.12-.07.2-.1.32-.14zm-6.95 1.9c.87-.1 1.43.73 1.07 1.52-.28.62-1.2 1.12-1.62 1.98a2.93 2.93 0 0 0-.29 1.16c0 .96.61 1.88 1.45 2.3.46.24.79.26 1.3.25.88 0 1.48-.59 2.05-1.16.39-.39.7-.84 1.3-.87.63-.02 1.15.46 1.11 1.11a1.2 1.2 0 0 1-.36.76c-.41.47-1.13 1.17-1.64 1.52a4.9 4.9 0 0 1-4.37.47 4.76 4.76 0 0 1-1.87-7.48l.82-.84c.36-.38.53-.62 1.05-.72z"/></svg>
\ No newline at end of file
diff --git a/src/components/PanelAbout.vue b/src/components/PanelAbout.vue
index 711c4b2..e740cde 100644
--- a/src/components/PanelAbout.vue
+++ b/src/components/PanelAbout.vue
@@ -22,7 +22,7 @@ let appVersion = __PACKAGE_VERSION__;
         There are a few L-system collections built in the app for demonstration purposes. These L-systems were gathered from various sources including the web, books, and articles. I appreciate the authors of these L-systems (you may find their names <a href="https://github.com/Amphiluke/lindsvg/blob/pwa/src/stores/bank.mjs" target="_blank" rel="noopener">in the app sources</a>).
       </p>
       <h3>Links</h3>
-      <ul>
+      <ul :class="interfaceStyles.list">
         <li>
           <a href="https://codepen.io/collection/DVzqWb" target="_blank" rel="noopener">Advanced examples</a>
         </li>
diff --git a/src/components/PanelCollections.vue b/src/components/PanelCollections.vue
index 7942b27..3094bd3 100644
--- a/src/components/PanelCollections.vue
+++ b/src/components/PanelCollections.vue
@@ -1,5 +1,5 @@
 <script setup>
-import {ref, computed, onMounted} from "vue";
+import {ref, computed} from "vue";
 import {refDebounced} from "@vueuse/core";
 import {useCollectionsStore, isUserDefined, USER_DEFINED_COLLECTION_ID} from "../stores/collections.mjs";
 import {useLSystemStore} from "../stores/lSystem.mjs";
@@ -52,14 +52,12 @@ function deleteLSystem(lid) {
   collectionsStore.deleteLSystem(lid);
 }
 
-onMounted(() => {
-  let searchParams = new URLSearchParams(location.search);
-  let cid = searchParams.get("cid");
-  let lid = searchParams.get("lid");
-  if (cid && lid) {
-    plot(cid, lid);
-  }
-});
+function copyPermalink(cid, lid) {
+  let url = new URL(location.origin + location.pathname);
+  url.searchParams.set("cid", cid);
+  url.searchParams.set("lid", lid);
+  navigator.clipboard.writeText(url.toString());
+}
 </script>
 
 <template>
@@ -117,6 +115,14 @@ onMounted(() => {
               title="Delete this L-system"
               @click="deleteLSystem(lid)"
             />
+            <button
+              v-else
+              type="button"
+              tabindex="-1"
+              :class="[$style.permalinkButton, interfaceStyles.iconButton, interfaceStyles.iconButtonLink]"
+              title="Copy L-system permalink"
+              @click="copyPermalink(cid, lid)"
+            />
             <button
               type="button"
               :class="[$style.exploreButton, interfaceStyles.iconButton, interfaceStyles.iconButtonConfig]"
@@ -207,18 +213,19 @@ onMounted(() => {
   .collectionItemName {
     cursor: default;
     flex-grow: 1;
+    overflow: hidden;
     padding: 5px 10px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
+  .permalinkButton,
   .exploreButton,
   .deleteLSystemButton {
     flex-shrink: 0;
   }
 
-  .collectionItems li:not(:hover, .active) {
-    .exploreButton:not(:focus),
-    .deleteLSystemButton:not(:focus) {
-      opacity: 0.01;
-    }
+  .collectionItems li:not(:hover, .active) :where(.permalinkButton, .exploreButton, .deleteLSystemButton):not(:focus) {
+    opacity: 0.01;
   }
 </style>
diff --git a/src/components/PanelSharing.vue b/src/components/PanelSharing.vue
index 75686c5..842bf78 100644
--- a/src/components/PanelSharing.vue
+++ b/src/components/PanelSharing.vue
@@ -1,6 +1,6 @@
 <script setup>
-import {computed, useCssModule} from "vue";
-import {useCollectionsStore, isUserDefined} from "../stores/collections.mjs";
+import {computed} from "vue";
+import {useCollectionsStore} from "../stores/collections.mjs";
 import {useLSystemStore} from "../stores/lSystem.mjs";
 import {useInterfaceStore} from "../stores/interface.mjs";
 import {useObjectUrl, useFileDialog, useShare} from "@vueuse/core";
@@ -10,7 +10,6 @@ import panelStyles from "../styles/panel.module.css";
 let collectionsStore = useCollectionsStore();
 let lSystemStore = useLSystemStore();
 let interfaceStore = useInterfaceStore();
-let cssModule = useCssModule();
 
 let fileDialog = useFileDialog({accept: ".lsvg", multiple: false, reset: true});
 fileDialog.onChange(async ([file]) => {
@@ -27,19 +26,17 @@ fileDialog.onChange(async ([file]) => {
 let svgBlob = computed(() => new Blob([lSystemStore.svgCode], {type: "image/svg+xml"}));
 let svgURL = useObjectUrl(svgBlob);
 
-let lsvgBlob = computed(() => {
-  let lsvg = JSON.stringify({
-    _version: __PACKAGE_VERSION__,
-    axiom: lSystemStore.axiom,
-    alpha: lSystemStore.alpha,
-    theta: lSystemStore.theta,
-    step: lSystemStore.step,
-    iterations: lSystemStore.iterations,
-    rules: lSystemStore.rules,
-    attributes: lSystemStore.attributes,
-  });
-  return new Blob([lsvg], {type: "application/json"});
-});
+let lsvg = computed(() => ({
+  _version: __PACKAGE_VERSION__,
+  axiom: lSystemStore.axiom,
+  alpha: lSystemStore.alpha,
+  theta: lSystemStore.theta,
+  step: lSystemStore.step,
+  iterations: lSystemStore.iterations,
+  rules: lSystemStore.rules,
+  attributes: lSystemStore.attributes,
+}));
+let lsvgBlob = computed(() => new Blob([JSON.stringify(lsvg.value)], {type: "application/json"}));
 let lsvgURL = useObjectUrl(lsvgBlob);
 
 let {share, isSupported: isShareSupported} = useShare();
@@ -51,21 +48,9 @@ function launchShare() {
   });
 }
 
-let permalink = computed(() => {
-  if (!collectionsStore.selectedCID || !collectionsStore.selectedLID || isUserDefined(collectionsStore.selectedCID)) {
-    return "";
-  }
-  let {location} = window;
-  let url = new URL(location.origin + location.pathname);
-  url.searchParams.set("cid", collectionsStore.selectedCID);
-  url.searchParams.set("lid", collectionsStore.selectedLID);
-  return url.toString();
-});
-
-async function copyPermalink({target}) {
-  await navigator.clipboard.writeText(permalink.value);
-  target.classList.add(cssModule.copySuccess);
-  setTimeout(() => target.classList.remove(cssModule.copySuccess), 4000);
+function copyLSVG() {
+  let text = JSON.stringify(lsvg.value, null, 2);
+  navigator.clipboard.writeText(text);
 }
 </script>
 
@@ -119,26 +104,33 @@ async function copyPermalink({target}) {
 
       <hr>
 
-      <h3>Permalink for the selected L-system</h3>
-      <textarea
-        :class="$style.permalinkField"
-        :value="permalink"
-        readonly
-        @click="$event.target.select()"
-      />
-      <button
-        type="button"
-        :class="[interfaceStyles.button, $style.permalinkCopyButton]"
-        :disabled="!permalink"
-        @click="copyPermalink"
-      >
-        <span :class="$style.permalinkCopyReady">Copy</span>
-        <span :class="$style.permalinkCopyDone">Copied!</span>
-      </button>
-      <p :class="$style.note">
-        Note that permalinks are only available for L-systems from the predefined collections.
-        Any manual changes in L-system parameters are not preserved.
-      </p>
+      <h3>Creating shareable permalink for an L-system</h3>
+      <!-- eslint-disable vue/max-attributes-per-line -->
+      <ol :class="interfaceStyles.list">
+        <li><a href="https://docs.github.com/en/get-started/writing-on-github/editing-and-sharing-content-with-gists/creating-gists#creating-a-gist" target="_blank" rel="noopener">Create</a> a <em>public</em> gist on GitHub.</li>
+        <li>
+          Copy LSVG file content
+          <svg
+            :class="$style.copyButton"
+            height="16"
+            width="16"
+            viewBox="0 0 16 16"
+            xmlns="http://www.w3.org/2000/svg"
+            @click="copyLSVG"
+          >
+            <title>Copy LSVG to clipboard</title>
+            <path d="M0 6.75C0 5.78.78 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .14.11.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z" />
+            <path d="M5 1.75C5 .78 5.78 0 6.75 0h7.5C15.22 0 16 .78 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .14.11.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z" />
+          </svg>
+          into the newly created public gist and save it as JSON.
+        </li>
+        <li>
+          Replace <b>{gist_id}</b> in the following hyperlink with the actual identifier of your gist<br>
+          <span :class="$style.permalink">https://amphiluke.github.io/lindsvg/?gist=<b>{gist_id}</b></span>.
+        </li>
+      </ol>
+      <p>Example: <a href="https://gist.github.com/Amphiluke/d90562f1aaf0f9ee28340c13ce13a6ca" target="_blank" rel="noopener">gist</a> &amp; <a href="https://amphiluke.github.io/lindsvg/?gist=d90562f1aaf0f9ee28340c13ce13a6ca" target="_blank">permalink</a>.</p>
+      <!-- eslint-enable vue/max-attributes-per-line -->
     </form>
   </section>
 </template>
@@ -174,30 +166,14 @@ async function copyPermalink({target}) {
     }
   }
 
-  .permalinkField {
-    box-sizing: border-box;
-    height: 55px;
-    margin-top: 10px;
-    resize: vertical;
-    width: 100%;
-  }
-
-  .permalinkCopyButton {
-    margin: 5px 0;
-    width: 100%;
-
-    &.copySuccess {
-      pointer-events: none;
-    }
-
-    &:not(.copySuccess) .permalinkCopyDone,
-    &.copySuccess .permalinkCopyReady {
-      display: none;
-    }
+  .copyButton {
+    cursor: pointer;
+    fill: var(--color-accent);
+    margin-inline: 4px;
   }
 
-  .note {
-    color: var(--color-on-surface-mid);
-    font-size: 0.85em;
+  .permalink {
+    color: var(--color-accent);
+    word-wrap: break-word;
   }
 </style>
diff --git a/src/launchCtrl.mjs b/src/launchCtrl.mjs
new file mode 100644
index 0000000..78958fc
--- /dev/null
+++ b/src/launchCtrl.mjs
@@ -0,0 +1,83 @@
+import {useInterfaceStore} from "./stores/interface.mjs";
+import {useLSystemStore} from "./stores/lSystem.mjs";
+import {useCollectionsStore} from "./stores/collections.mjs";
+
+export function processLaunchOptions() {
+  return processLaunchQueue() || processBundledPermalink() || processGistPermalink();
+}
+
+function extractQuery(...names) {
+  let url = new URL(location.href);
+  let params = Object.fromEntries(names.map((name) => [name, url.searchParams.get(name)]));
+  names.forEach((name) => url.searchParams.delete(name));
+  window.history.replaceState(null, "", url);
+  return params;
+}
+
+function processLaunchQueue() {
+  let launchParamsSupported = ("launchQueue" in window) && ("files" in window.LaunchParams.prototype);
+  /** @see https://github.com/WICG/web-app-launch/issues/92#issuecomment-1505562033 */
+  if (!launchParamsSupported || extractQuery("action").action !== "handleFile") {
+    return false;
+  }
+  /** @see https://github.com/WICG/file-handling/blob/main/explainer.md */
+  window.launchQueue.setConsumer(async ({files}) => {
+    if (!files.length) {
+      return;
+    }
+    try {
+      let blob = await files[0].getFile();
+      let config = JSON.parse(await blob.text());
+      let lSystemStore = useLSystemStore();
+      lSystemStore.setup(config);
+      lSystemStore.buildSVG();
+    } catch (error) {
+      useInterfaceStore().requestPopover({text: "Unfortunately, this file cannot be opened"});
+      console.error("Unable to open the file", error);
+    }
+  });
+  return true;
+}
+
+function processBundledPermalink() {
+  let {cid, lid} = extractQuery("cid", "lid");
+  if (!cid || !lid) {
+    return false;
+  }
+  let collectionsStore = useCollectionsStore();
+  collectionsStore.selectedCID = cid;
+  collectionsStore.selectedLID = lid;
+  let lSystemStore = useLSystemStore();
+  lSystemStore.setup(collectionsStore.selectedLSystem);
+  lSystemStore.buildSVG();
+  return true;
+}
+
+function processGistPermalink() {
+  let {gist} = extractQuery("gist");
+  if (!gist) {
+    return false;
+  }
+  fetch(`https://api.github.com/gists/${gist}`, {
+    method: "GET",
+    headers: {
+      Accept: "application/vnd.github+json",
+      "X-GitHub-Api-Version": "2022-11-28",
+    },
+    mode: "cors",
+    credentials: "omit",
+  })
+    .then((response) => response.json())
+    .then((data) => {
+      let {content} = Object.values(data.files)[0];
+      let config = JSON.parse(content);
+      let lSystemStore = useLSystemStore();
+      lSystemStore.setup(config);
+      lSystemStore.buildSVG();
+    })
+    .catch((reason) => {
+      useInterfaceStore().requestPopover({text: "Unfortunately, this gist cannot be opened"});
+      console.error("Unable to open the gist", reason);
+    });
+  return true;
+}
diff --git a/src/pwaCtrl.mjs b/src/pwaCtrl.mjs
index f460cee..02cd902 100644
--- a/src/pwaCtrl.mjs
+++ b/src/pwaCtrl.mjs
@@ -1,6 +1,5 @@
 import "./sw.js?worker";
 import {useInterfaceStore, POPOVER_ACCEPT} from "./stores/interface.mjs";
-import {useLSystemStore} from "./stores/lSystem.mjs";
 
 export const USING_PWA = import.meta.env.PROD && ("serviceWorker" in navigator);
 
@@ -36,38 +35,3 @@ async function suggestUpdate(newSW) {
     }
   });
 }
-
-let launchParamsSupported = ("launchQueue" in window) && ("files" in window.LaunchParams.prototype);
-
-/** @see https://github.com/WICG/web-app-launch/issues/92#issuecomment-1505562033 */
-function handleActionURL(action) {
-  let url = new URL(location.href);
-  if (url.searchParams.get("action") !== action) {
-    return false;
-  }
-  url.searchParams.delete("action");
-  window.history.replaceState(null, "", url);
-  return true;
-}
-
-export function applyLaunchParams() {
-  if (!launchParamsSupported || !handleActionURL("handleFile")) {
-    return;
-  }
-  /** @see https://github.com/WICG/file-handling/blob/main/explainer.md */
-  window.launchQueue.setConsumer(async ({files}) => {
-    if (!files.length) {
-      return;
-    }
-    try {
-      let blob = await files[0].getFile();
-      let config = JSON.parse(await blob.text());
-      let lSystemStore = useLSystemStore();
-      lSystemStore.setup(config);
-      lSystemStore.buildSVG();
-    } catch (error) {
-      useInterfaceStore().requestPopover({text: "Unfortunately, this file cannot be opened"});
-      console.error("Unable to open the file", error);
-    }
-  });
-}
diff --git a/src/stores/bank.mjs b/src/stores/bank.mjs
index 10a4d2d..1ec609e 100644
--- a/src/stores/bank.mjs
+++ b/src/stores/bank.mjs
@@ -275,7 +275,7 @@ export default [
         step: 15,
       },
       {
-        lid: "Sierpinski arrowhead curve",
+        lid: "Sierpinski arrowhead",
         axiom: "A",
         rules: {
           A: "FC-FA-FC",
diff --git a/src/styles/interface.module.css b/src/styles/interface.module.css
index 847b679..0f6f3fb 100644
--- a/src/styles/interface.module.css
+++ b/src/styles/interface.module.css
@@ -102,6 +102,11 @@
   mask-position: -75px 0;
 }
 
+.iconButtonLink::before {
+  -webkit-mask-position: -200px 0;
+  mask-position: -200px 0;
+}
+
 @keyframes add-breath {
   0% {
     transform: rotate(45deg) scale(0.8);
@@ -122,3 +127,11 @@
     animation: add-breath 1.2s ease-in-out infinite alternate;
   }
 }
+
+.list {
+  padding-left: 30px;
+
+  & > li {
+    margin-block: 0.3em;
+  }
+}