layout sharing via url

[deploy]
2026-01-19 08:22:53 +00:00 · 2023-07-08 23:19:58 +02:00
parent 3a167030da
commit 391c9d8837
7 changed files with 395 additions and 8 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "cccs",
-  "version": "0.0.1",
+  "version": "0.2.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "cccs",
-      "version": "0.0.1",
+      "version": "0.2.0",
      "license": "AGPL-3.0-or-later",
      "devDependencies": {
        "@fontsource-variable/material-symbols-rounded": "^5.0.4",
@@ -36,9 +36,11 @@
        "svelte": "^4.0.0",
        "svelte-check": "^3.4.3",
        "svelte-preprocess": "^5.0.4",
+        "tippy.js": "^6.3.7",
        "ts-node": "^10.9.1",
        "typescript": "^5.0.0",
        "vite": "^4.3.6",
+        "vite-plugin-mkcert": "^1.16.0",
        "vite-plugin-pwa": "^0.16.4",
        "vitest": "^0.33.0"
      }
@@ -2421,6 +2423,177 @@
        "node": ">= 8"
      }
    },
+    "node_modules/@octokit/auth-token": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-3.0.4.tgz",
+      "integrity": "sha512-TWFX7cZF2LXoCvdmJWY7XVPi74aSY0+FfBZNSXEXFkMpjcqsQwDSYVv5FhRFaI0V1ECnwbz4j59T/G+rXNWaIQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@octokit/core": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/@octokit/core/-/core-4.2.4.tgz",
+      "integrity": "sha512-rYKilwgzQ7/imScn3M9/pFfUf4I1AZEH3KhyJmtPdE2zfaXAn2mFfUy4FbKewzc2We5y/LlKLj36fWJLKC2SIQ==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/auth-token": "^3.0.0",
+        "@octokit/graphql": "^5.0.0",
+        "@octokit/request": "^6.0.0",
+        "@octokit/request-error": "^3.0.0",
+        "@octokit/types": "^9.0.0",
+        "before-after-hook": "^2.2.0",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@octokit/endpoint": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-7.0.6.tgz",
+      "integrity": "sha512-5L4fseVRUsDFGR00tMWD/Trdeeihn999rTMGRMC1G/Ldi1uWlWJzI98H4Iak5DB/RVvQuyMYKqSK/R6mbSOQyg==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/types": "^9.0.0",
+        "is-plain-object": "^5.0.0",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@octokit/graphql": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-5.0.6.tgz",
+      "integrity": "sha512-Fxyxdy/JH0MnIB5h+UQ3yCoh1FG4kWXfFKkpWqjZHw/p+Kc8Y44Hu/kCgNBT6nU1shNumEchmW/sUO1JuQnPcw==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/request": "^6.0.0",
+        "@octokit/types": "^9.0.0",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@octokit/openapi-types": {
+      "version": "18.0.0",
+      "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-18.0.0.tgz",
+      "integrity": "sha512-V8GImKs3TeQRxRtXFpG2wl19V7444NIOTDF24AWuIbmNaNYOQMWRbjcGDXV5B+0n887fgDcuMNOmlul+k+oJtw==",
+      "dev": true
+    },
+    "node_modules/@octokit/plugin-paginate-rest": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-6.1.2.tgz",
+      "integrity": "sha512-qhrmtQeHU/IivxucOV1bbI/xZyC/iOBhclokv7Sut5vnejAIAEXVcGQeRpQlU39E0WwK9lNvJHphHri/DB6lbQ==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/tsconfig": "^1.0.2",
+        "@octokit/types": "^9.2.3"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "@octokit/core": ">=4"
+      }
+    },
+    "node_modules/@octokit/plugin-request-log": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-request-log/-/plugin-request-log-1.0.4.tgz",
+      "integrity": "sha512-mLUsMkgP7K/cnFEw07kWqXGF5LKrOkD+lhCrKvPHXWDywAwuDUeDwWBpc69XK3pNX0uKiVt8g5z96PJ6z9xCFA==",
+      "dev": true,
+      "peerDependencies": {
+        "@octokit/core": ">=3"
+      }
+    },
+    "node_modules/@octokit/plugin-rest-endpoint-methods": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-7.2.3.tgz",
+      "integrity": "sha512-I5Gml6kTAkzVlN7KCtjOM+Ruwe/rQppp0QU372K1GP7kNOYEKe8Xn5BW4sE62JAHdwpq95OQK/qGNyKQMUzVgA==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/types": "^10.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "@octokit/core": ">=3"
+      }
+    },
+    "node_modules/@octokit/plugin-rest-endpoint-methods/node_modules/@octokit/types": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-10.0.0.tgz",
+      "integrity": "sha512-Vm8IddVmhCgU1fxC1eyinpwqzXPEYu0NrYzD3YZjlGjyftdLBTeqNblRC0jmJmgxbJIsQlyogVeGnrNaaMVzIg==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/openapi-types": "^18.0.0"
+      }
+    },
+    "node_modules/@octokit/request": {
+      "version": "6.2.8",
+      "resolved": "https://registry.npmjs.org/@octokit/request/-/request-6.2.8.tgz",
+      "integrity": "sha512-ow4+pkVQ+6XVVsekSYBzJC0VTVvh/FCTUUgTsboGq+DTeWdyIFV8WSCdo0RIxk6wSkBTHqIK1mYuY7nOBXOchw==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/endpoint": "^7.0.0",
+        "@octokit/request-error": "^3.0.0",
+        "@octokit/types": "^9.0.0",
+        "is-plain-object": "^5.0.0",
+        "node-fetch": "^2.6.7",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@octokit/request-error": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-3.0.3.tgz",
+      "integrity": "sha512-crqw3V5Iy2uOU5Np+8M/YexTlT8zxCfI+qu+LxUB7SZpje4Qmx3mub5DfEKSO8Ylyk0aogi6TYdf6kxzh2BguQ==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/types": "^9.0.0",
+        "deprecation": "^2.0.0",
+        "once": "^1.4.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@octokit/rest": {
+      "version": "19.0.13",
+      "resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-19.0.13.tgz",
+      "integrity": "sha512-/EzVox5V9gYGdbAI+ovYj3nXQT1TtTHRT+0eZPcuC05UFSWO3mdO9UY1C0i2eLF9Un1ONJkAk+IEtYGAC+TahA==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/core": "^4.2.1",
+        "@octokit/plugin-paginate-rest": "^6.1.2",
+        "@octokit/plugin-request-log": "^1.0.4",
+        "@octokit/plugin-rest-endpoint-methods": "^7.1.2"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@octokit/tsconfig": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@octokit/tsconfig/-/tsconfig-1.0.2.tgz",
+      "integrity": "sha512-I0vDR0rdtP8p2lGMzvsJzbhdOWy405HcGovrspJ8RRibHnyRgggUSNO5AIox5LmqiwmatHKYsvj6VGFHkqS7lA==",
+      "dev": true
+    },
+    "node_modules/@octokit/types": {
+      "version": "9.3.2",
+      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-9.3.2.tgz",
+      "integrity": "sha512-D4iHGTdAnEEVsB8fl95m1hiz7D5YiRdQ9b/OEb3BYRVwbLsGHcRVPz+u+BgRLNk0Q0/4iZCBqDN96j2XNxfXrA==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/openapi-types": "^18.0.0"
+      }
+    },
    "node_modules/@pkgjs/parseargs": {
      "version": "0.11.0",
      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -2437,6 +2610,16 @@
      "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
      "dev": true
    },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
    "node_modules/@rollup/pluginutils": {
      "version": "5.0.2",
      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz",
@@ -3015,6 +3198,17 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/axios": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz",
+      "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
+      "dev": true,
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
    "node_modules/axobject-query": {
      "version": "3.2.1",
      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
@@ -3089,6 +3283,12 @@
        }
      ]
    },
+    "node_modules/before-after-hook": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-2.2.3.tgz",
+      "integrity": "sha512-NzUnlZexiaH/46WDhANlyR2bXRopNg4F/zuSA3OpZnllCUgRaOF2znDioDWrmbNVsuZk6l9pMquQB38cfBZwkQ==",
+      "dev": true
+    },
    "node_modules/binary-extensions": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -3708,6 +3908,12 @@
        "node": ">=0.4.0"
      }
    },
+    "node_modules/deprecation": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/deprecation/-/deprecation-2.3.1.tgz",
+      "integrity": "sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==",
+      "dev": true
+    },
    "node_modules/dequal": {
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -4239,6 +4445,26 @@
      "integrity": "sha512-XGozTsMPYkm+6b5QL3Z9wQcJjNYxp0CYn3U1gO7dwD6PAqU1SVWZxI9CCg3z+ml3YfqdPnrBehaBrnH2AGKbNA==",
      "dev": true
    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/fontkit": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/fontkit/-/fontkit-2.0.2.tgz",
@@ -5868,6 +6094,48 @@
        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
      }
    },
+    "node_modules/node-fetch": {
+      "version": "2.6.12",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.12.tgz",
+      "integrity": "sha512-C/fGU2E8ToujUivIO0H+tpQ6HWo4eEmchoPIoXtxCrVghxdKq+QOHqEZW7tuP3KlV3bC8FRMO5nMCC7Zm1VP6g==",
+      "dev": true,
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/node-fetch/node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
+      "dev": true
+    },
+    "node_modules/node-fetch/node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
+      "dev": true
+    },
+    "node_modules/node-fetch/node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "dev": true,
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
    "node_modules/node-releases": {
      "version": "2.0.12",
      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.12.tgz",
@@ -6349,6 +6617,12 @@
        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
      }
    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "dev": true
+    },
    "node_modules/psl": {
      "version": "1.9.0",
      "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
@@ -7784,6 +8058,15 @@
        "node": ">=14.0.0"
      }
    },
+    "node_modules/tippy.js": {
+      "version": "6.3.7",
+      "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz",
+      "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==",
+      "dev": true,
+      "dependencies": {
+        "@popperjs/core": "^2.9.0"
+      }
+    },
    "node_modules/to-fast-properties": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -8067,6 +8350,12 @@
        "node": ">=8"
      }
    },
+    "node_modules/universal-user-agent": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-6.0.0.tgz",
+      "integrity": "sha512-isyNax3wXoKaulPDZWHQqbmIx1k2tb9fb3GGDBRxCscfYV2Ch7WxPArBsFEG8s/safwXTT7H4QGhaIkTp9447w==",
+      "dev": true
+    },
    "node_modules/universalify": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
@@ -8228,6 +8517,24 @@
        "url": "https://opencollective.com/vitest"
      }
    },
+    "node_modules/vite-plugin-mkcert": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-mkcert/-/vite-plugin-mkcert-1.16.0.tgz",
+      "integrity": "sha512-5r+g8SB9wZzLNUFekGwZo3e0P6QlS6rbxK5p9z/itxNAimsYohgjK/YfVPVxM9EuglP9hjridq0lUejo9v1nVg==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/rest": "^19.0.5",
+        "axios": "^1.2.2",
+        "debug": "^4.3.4",
+        "picocolors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=v16.7.0"
+      },
+      "peerDependencies": {
+        "vite": ">=3"
+      }
+    },
    "node_modules/vite-plugin-pwa": {
      "version": "0.16.4",
      "resolved": "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-0.16.4.tgz",
--- a/package.json
+++ b/package.json
@@ -45,6 +45,8 @@
    "vite-plugin-pwa": "^0.16.4",
    "@modyfi/vite-plugin-yaml": "^1.0.4",
    "svelte-preprocess": "^5.0.4",
+    "vite-plugin-mkcert": "^1.16.0",
+    "tippy.js": "^6.3.7",
    "autoprefixer": "^10.4.14",
    "sass": "^1.63.6"
  },
--- a/src/lib/components/Navigation.svelte
+++ b/src/lib/components/Navigation.svelte
@@ -2,7 +2,8 @@
  import {serialPort, syncStatus} from "$lib/serial/connection"
  import {browser} from "$app/environment"
  import {page} from "$app/stores"
-  import {slide} from "svelte/transition"
+  import {slide, fly} from "svelte/transition"
+  import {canShare, triggerShare} from "$lib/share"

  const training = [
    {slug: "cpm", title: "CPM - Characters Per Minute", icon: "music_note"},
@@ -29,6 +30,10 @@
  </div>

  <div class="actions">
+    {#if $canShare}
+      <a transition:fly={{x: -8}} class="icon" on:click={triggerShare}>share</a>
+      <div transition:slide class="separator" />
+    {/if}
    {#await import("$lib/components/PwaStatus.svelte") then { default: PwaStatus }}
      <PwaStatus />
    {/await}
@@ -63,7 +68,7 @@
    >
      cable
    </a>
-    <a href="/" title="Statistics" class="icon account">person</a>
+    <a href="/stats/" title="Statistics" class="icon account">person</a>
  </div>
 </nav>

@@ -119,6 +124,12 @@
    border-radius: 4px;
  }

+  .separator {
+    width: 1px;
+    height: 24px;
+    background: var(--md-sys-color-outline-variant);
+  }
+
  nav {
    display: flex;
    gap: 4px;
@@ -143,6 +154,10 @@

    position: relative;

+    display: flex;
+    align-items: center;
+    justify-content: center;
+
    aspect-ratio: 1;
    padding: 4px;

@@ -168,6 +183,9 @@
  }

  .steps {
+    position: absolute;
+    left: 50%;
+    translate: -50% 0;
    display: flex;

    > a.icon {
--- a/src/lib/serial/serialization.ts
+++ b/src/lib/serial/serialization.ts
@@ -21,9 +21,7 @@ export async function getSharableUrl(name: string, data: any, baseHref = window.
  return new Promise(async resolve => {
    const reader = new FileReader()
    reader.onloadend = function () {
-      const base64String = (reader.result as string)
-        .replace(/^data:application\/octet-stream;base64,/, "")
-        .replace(/==$/, "")
+      const base64String = (reader.result as string).replace(/^data:application\/octet-stream;base64,/, "")
      const url = new URL(baseHref)
      url.searchParams.set(name, base64String)
      resolve(url)
@@ -31,3 +29,15 @@ export async function getSharableUrl(name: string, data: any, baseHref = window.
    reader.readAsDataURL(await stringifyCompressed(data))
  })
 }
+
+export async function parseSharableUrl<T>(
+  name: string,
+  url: string = window.location.href,
+): Promise<T | undefined> {
+  const searchParams = new URL(url).searchParams
+  if (!searchParams.has(name)) return
+
+  return await fetch(`data:application/octet-stream;base64,${searchParams.get(name)}`)
+    .then(it => it.blob())
+    .then(it => parseCompressed(it))
+}
--- a/src/lib/share.ts
+++ b/src/lib/share.ts
@@ -0,0 +1,22 @@
+import type {Action} from "svelte/action"
+import {readonly, writable} from "svelte/store"
+
+const setCanShare = writable(false)
+export const canShare = readonly(setCanShare)
+
+let shareCallback: ((event: Event) => void) | undefined
+export function triggerShare(event: Event) {
+  shareCallback?.(event)
+}
+
+export const share: Action<Window, (event: Event) => void> = (node, callback: (event: Event) => void) => {
+  setCanShare.set(true)
+  shareCallback = callback
+
+  return {
+    destroy() {
+      setCanShare.set(false)
+      shareCallback = undefined
+    },
+  }
+}
--- a/src/routes/config/layout/+page.svelte
+++ b/src/routes/config/layout/+page.svelte
@@ -1,7 +1,35 @@
-<script>
+<script lang="ts">
  import LayoutCC1 from "$lib/components/LayoutCC1.svelte"
+  import {share} from "$lib/share"
+  import {getSharableUrl, parseSharableUrl} from "$lib/serial/serialization"
+  import {layout} from "$lib/serial/connection"
+  import type {CharaLayout} from "$lib/serial/connection"
+  import tippy from "tippy.js"
+  import {onMount} from "svelte"
+
+  onMount(async () => {
+    const sharedLayout = await parseSharableUrl<CharaLayout>("layout")
+    if (sharedLayout) {
+      $layout = sharedLayout
+    }
+  })
+
+  async function shareLayout(event) {
+    const data = await getSharableUrl("layout", $layout)
+    await navigator.clipboard.writeText(data.toString())
+    tippy(event.target, {
+      content: "Share url copied!",
+      hideOnClick: true,
+      duration: 4000,
+      onHidden(instance) {
+        instance.destroy()
+      },
+    }).show()
+  }
 </script>

+<svelte:window use:share={shareLayout} />
+
 <section>
  <LayoutCC1 />
 </section>
--- a/src/routes/stats/+page.svelte
+++ b/src/routes/stats/+page.svelte