From aee46460251d02729df2546f45f89131c44bb10e Mon Sep 17 00:00:00 2001
From: johannchopin <johannchopin@pm.me>
Date: Thu, 16 Dec 2021 11:04:05 +0100
Subject: [PATCH 1/3] add share repl panel

---
 .../_components/AppControls/SharePanel.svelte | 117 ++++++++++++++++++
 .../[id]/_components/AppControls/index.svelte |  22 ++++
 .../src/routes/repl/[id]/index.svelte         |   2 +-
 .../src/routes/repl/_utils/setClipboard.js    |   3 +
 sites/svelte.dev/static/svelte-share-repl.svg |  12 ++
 5 files changed, 155 insertions(+), 1 deletion(-)
 create mode 100644 sites/svelte.dev/src/routes/repl/[id]/_components/AppControls/SharePanel.svelte
 create mode 100644 sites/svelte.dev/src/routes/repl/_utils/setClipboard.js
 create mode 100644 sites/svelte.dev/static/svelte-share-repl.svg

diff --git a/sites/svelte.dev/src/routes/repl/[id]/_components/AppControls/SharePanel.svelte b/sites/svelte.dev/src/routes/repl/[id]/_components/AppControls/SharePanel.svelte
new file mode 100644
index 00000000..1d723b10
--- /dev/null
+++ b/sites/svelte.dev/src/routes/repl/[id]/_components/AppControls/SharePanel.svelte
@@ -0,0 +1,117 @@
+<script>
+  import { createEventDispatcher } from 'svelte';
+  import { fade, fly } from 'svelte/transition';
+  import { Icon } from '@sveltejs/site-kit';
+  import setClipboard from '../../../_utils/setClipboard'
+  const dispatch = createEventDispatcher();
+  export let name;
+  export let gist;
+  export let version;
+  const REPL_BUTTON_URL = `${window.location.origin}/svelte-share-repl.svg`
+  let linkCopied = false
+  $: canShare = gist?.uid && version;
+	function getForkedReplUrl() {
+		return `${window.location.origin}/repl/${gist.uid}?version=${version}`
+	}
+  function copyLink() {
+    linkCopied = true;
+    setClipboard(getForkedReplUrl());
+    setTimeout(() => {
+      dispatch('close')
+    }, 500);
+  }
+</script>
+<div class="share-panel" transition:fly="{{ y: -5, duration: 500 }}">
+  {#if canShare}
+    <h4>Share REPL Button</h4>
+    <img src="/svelte-share-repl.svg" alt="share REPL icon" width="150" />
+    <h5>Markdown</h5>
+    <textarea name="markdown" rows="2" readonly>[![Edit {name}]({REPL_BUTTON_URL})]({getForkedReplUrl()})</textarea>
+    <h5>HTML</h5>
+    <textarea name="html" rows="2" readonly><a href="{getForkedReplUrl()}"><img alt="Edit {name}" src="{REPL_BUTTON_URL}"></a></textarea>
+    <hr>
+    <div class="actions">
+      <button class="cancel" on:click={() => dispatch('close')}>Cancel</button>
+      <button 
+        class="copy-link" 
+        class:click={linkCopied}
+        on:click={copyLink}
+      >
+        <span>Copy REPL link</span>
+        {#if linkCopied}
+          <div transition:fade="{{ duration: 200 }}">
+           <Icon  name="check" />
+          </div>
+        {/if}
+      </button>
+    </div>
+  {:else}
+     <p>You need to save the REPL to share it!</p>
+  {/if}
+  </div>
+<style>
+  p {
+    color: #333;
+    margin: 0;
+  }
+  .share-panel {
+    position: absolute;
+    left: 0;
+    top: 150%;
+    min-width: 300px;
+    padding: 1em;
+    text-align: left;
+    border: 1px solid #eee;
+    border-radius: var(--border-r);
+    background-color: var(--back);
+    transform: translateX(-50%);
+    z-index: 15;
+  }
+  textarea {
+    resize: none;
+    width: 100%;
+    padding: .3em;
+    font-family: var(--font);
+    line-height: 1.3em;
+    white-space: nowrap;
+  }
+  h5, hr {
+    margin-top: .5em;
+  }
+  hr {
+    display: block;
+    height: 1px;
+    border: 0; 
+    border-top: 1px solid #eee;
+    margin-bottom: .5em;
+  }
+  .actions {
+    display: flex;
+    justify-content: flex-end;
+  }
+  button {
+    color: var(--heading);
+    font-size: .8em;
+    padding: .3em;
+    border: 1px solid #eee;
+    border-radius: var(--border-r);
+  }
+  .cancel {
+    background-color: var(--back-light);
+  }
+  .copy-link {
+    position: relative;
+    color: var(--prime);
+    border-color: var(--prime);
+    margin-left: .5em;
+  }
+  .copy-link.click span {
+    color: transparent;
+  }
+  .copy-link :global(.icon) {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%)
+  }
+</style>
diff --git a/sites/svelte.dev/src/routes/repl/[id]/_components/AppControls/index.svelte b/sites/svelte.dev/src/routes/repl/[id]/_components/AppControls/index.svelte
index aa593a99..cd1c568e 100644
--- a/sites/svelte.dev/src/routes/repl/[id]/_components/AppControls/index.svelte
+++ b/sites/svelte.dev/src/routes/repl/[id]/_components/AppControls/index.svelte
@@ -2,6 +2,7 @@
 	import { createEventDispatcher, getContext } from 'svelte';
 	import { session } from '$app/stores';
 	import UserMenu from './UserMenu.svelte';
+	import SharePanel from './SharePanel.svelte';
 	import { Icon } from '@sveltejs/site-kit';
 	import * as doNotZip from 'do-not-zip';
 	import downloadBlob from '../../../_utils/downloadBlob.js';
@@ -16,11 +17,14 @@
 	export let name;
 	export let zen_mode;
 	export let modified_count;
+	export let version;
 
 	let saving = false;
 	let downloading = false;
 	let justSaved = false;
 	let justForked = false;
+	let share = false;
+
 
 	function wait(ms) {
 		return new Promise((f) => setTimeout(f, ms));
@@ -198,6 +202,19 @@ export default app;`
 			<Icon name="download" />
 		</button>
 
+		<div class="share-ctn">
+			<button class="icon" title="share" on:click={() => share = !share}>
+				<!-- TODO: Add Icon 'check-2' to @sveltejs/site-kit -->
+				<svg xmlns="http://www.w3.org/2000/svg" style="vertical-align: middle;" x="0px" y="0px" viewBox="0 0 512 512" xml:space="preserve">
+					<path fill="currentColor" d="M406,332c-29.636,0-55.969,14.402-72.378,36.571l-141.27-72.195C194.722,288.324,196,279.809,196,271    c0-11.931-2.339-23.324-6.574-33.753l148.06-88.958C354.006,167.679,378.59,180,406,180c49.626,0,90-40.374,90-90    c0-49.626-40.374-90-90-90c-49.626,0-90,40.374-90,90c0,11.47,2.161,22.443,6.09,32.54l-148.43,89.18    C157.152,192.902,132.941,181,106,181c-49.626,0-90,40.374-90,90c0,49.626,40.374,90,90,90c30.122,0,56.832-14.876,73.177-37.666    l140.86,71.985C317.414,403.753,316,412.714,316,422c0,49.626,40.374,90,90,90c49.626,0,90-40.374,90-90    C496,372.374,455.626,332,406,332z M406,30c33.084,0,60,26.916,60,60s-26.916,60-60,60s-60-26.916-60-60S372.916,30,406,30z     M106,331c-33.084,0-60-26.916-60-60s26.916-60,60-60s60,26.916,60,60S139.084,331,106,331z M406,482c-33.084,0-60-26.916-60-60    s26.916-60,60-60s60,26.916,60,60S439.084,482,406,482z"/>
+				</svg>		
+			</button>
+
+			{#if share}
+				<SharePanel {name} {gist} {version} on:close={() => share = false} />
+			{/if}	
+		</div>
+
 		<button
 			class="icon"
 			disabled={saving || !$session.user}
@@ -317,6 +334,11 @@ export default app;`
 		right: 0px;
 	}
 
+	.share-ctn {
+		position: relative;
+		display: inline;
+	} 
+
 	@media (min-width: 600px) {
 		.icon[title^='fullscreen'] {
 			display: inline;
diff --git a/sites/svelte.dev/src/routes/repl/[id]/index.svelte b/sites/svelte.dev/src/routes/repl/[id]/index.svelte
index 160c5541..eb20934e 100644
--- a/sites/svelte.dev/src/routes/repl/[id]/index.svelte
+++ b/sites/svelte.dev/src/routes/repl/[id]/index.svelte
@@ -113,7 +113,7 @@
 <svelte:window bind:innerWidth={width} />
 
 <div class="repl-outer {zen_mode ? 'zen-mode' : ''}" class:mobile>
-	<AppControls {gist} {repl} bind:name bind:zen_mode bind:modified_count on:forked={handle_fork} />
+	<AppControls {gist} {repl} {version} bind:name bind:zen_mode bind:modified_count on:forked={handle_fork} />
 
 	{#if browser}
 		<div class="viewport" class:offset={checked}>
diff --git a/sites/svelte.dev/src/routes/repl/_utils/setClipboard.js b/sites/svelte.dev/src/routes/repl/_utils/setClipboard.js
new file mode 100644
index 00000000..41ea821c
--- /dev/null
+++ b/sites/svelte.dev/src/routes/repl/_utils/setClipboard.js
@@ -0,0 +1,3 @@
+export default function setClipboard(text) { 
+	navigator.clipboard.writeText(text);
+}
diff --git a/sites/svelte.dev/static/svelte-share-repl.svg b/sites/svelte.dev/static/svelte-share-repl.svg
new file mode 100644
index 00000000..4b78bb7c
--- /dev/null
+++ b/sites/svelte.dev/static/svelte-share-repl.svg
@@ -0,0 +1,12 @@
+<svg width="182" height="44" viewBox="0 0 182 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.775009" width="182" height="43.225" rx="3" fill="#FB3E00"/>
+<g clip-path="url(#clip0)">
+<path d="M39.0477 12.511C36.573 8.93929 31.6463 7.89279 28.1045 10.1678L21.861 14.149C20.1582 15.2183 18.9776 16.97 18.6371 18.9493C18.3419 20.61 18.5917 22.3163 19.3863 23.795C18.8414 24.614 18.4781 25.524 18.3192 26.4795C17.956 28.5043 18.4327 30.5973 19.6133 32.258C22.1107 35.8298 27.0147 36.8763 30.5565 34.624L36.8 30.6428C38.5028 29.5735 39.6834 27.8218 40.0239 25.8425C40.3191 24.1818 40.0693 22.4755 39.2747 20.9968C39.8196 20.1778 40.1828 19.2678 40.3418 18.3123C40.705 16.2648 40.251 14.1718 39.0477 12.511V12.511ZM27.4915 32.5993C25.4709 33.1225 23.3594 32.3263 22.1788 30.62C21.4523 29.619 21.1799 28.3678 21.3842 27.1393C21.4296 26.9345 21.475 26.7525 21.5204 26.5478L21.6339 26.1838L21.9518 26.4113C22.701 26.9573 23.5183 27.3668 24.4038 27.6398L24.6308 27.708L24.6081 27.9355C24.5854 28.254 24.6762 28.5953 24.8579 28.8683C25.2211 29.3915 25.8568 29.6418 26.4698 29.4825C26.606 29.437 26.7423 29.3915 26.8558 29.3233L33.0766 25.342C33.3944 25.1373 33.5988 24.8415 33.6669 24.4775C33.735 24.1135 33.6442 23.7268 33.4399 23.431C33.0766 22.9078 32.4409 22.6803 31.8279 22.8395C31.6917 22.885 31.5554 22.9305 31.4419 22.9988L29.0807 24.5003C28.6948 24.7505 28.2634 24.9325 27.8093 25.0463C25.7887 25.5695 23.6773 24.7733 22.4967 23.067C21.7929 22.066 21.4977 20.8148 21.7248 19.5863C21.9291 18.4033 22.6556 17.334 23.6773 16.697L29.8981 12.7158C30.284 12.4655 30.7154 12.2835 31.1695 12.147C33.1901 11.6238 35.3016 12.42 36.4821 14.1263C37.2087 15.1273 37.4811 16.3785 37.2768 17.607C37.2314 17.8118 37.186 17.9938 37.1178 18.1985L37.0043 18.5625L36.6865 18.335C35.9373 17.789 35.1199 17.3795 34.2345 17.1065L34.0074 17.0383L34.0301 16.8108C34.0529 16.4923 33.962 16.151 33.7804 15.878C33.4171 15.3548 32.7814 15.1273 32.1684 15.2865C32.0322 15.332 31.896 15.3775 31.7825 15.4458L25.5617 19.4498C25.2438 19.6545 25.0395 19.9503 24.9714 20.3143C24.9033 20.6783 24.9941 21.065 25.1984 21.3608C25.5617 21.884 26.1974 22.1115 26.8104 21.9523C26.9466 21.9068 27.0828 21.8613 27.1963 21.793L29.5802 20.2688C29.9662 20.0185 30.3976 19.8365 30.8516 19.7C32.8723 19.1768 34.9837 19.973 36.1643 21.6793C36.8908 22.6803 37.1633 23.9315 36.9589 25.16C36.7546 26.343 36.0281 27.4123 35.0064 28.0493L28.7856 32.0305C28.3769 32.2808 27.9456 32.4628 27.4915 32.5993" fill="white"/>
+</g>
+<path d="M53.83 28.93C52.4433 28.93 51.3367 28.4367 50.51 27.45C49.6967 26.45 49.29 25.1567 49.29 23.57C49.29 21.9034 49.7033 20.5967 50.53 19.65C51.3567 18.7034 52.4567 18.23 53.83 18.23C55.0567 18.23 56.0633 18.6434 56.85 19.47C57.65 20.2834 58.05 21.49 58.05 23.09C58.05 23.4634 58.03 23.85 57.99 24.25H51.07C51.1367 25.1834 51.4233 25.9367 51.93 26.51C52.45 27.07 53.0967 27.35 53.87 27.35C54.7233 27.35 55.4567 27.0434 56.07 26.43L57.13 27.61C56.25 28.49 55.15 28.93 53.83 28.93ZM51.05 22.77H56.29C56.2767 21.7167 56.0233 20.9567 55.53 20.49C55.05 20.01 54.4833 19.77 53.83 19.77C53.0433 19.77 52.3967 20.0234 51.89 20.53C51.3833 21.0234 51.1033 21.77 51.05 22.77ZM64.2717 28.93C62.9784 28.93 61.9517 28.45 61.1917 27.49C60.4317 26.53 60.0517 25.2234 60.0517 23.57C60.0517 21.9034 60.4317 20.5967 61.1917 19.65C61.9651 18.7034 62.9917 18.23 64.2717 18.23C65.2717 18.23 66.1317 18.55 66.8517 19.19V15.07L68.5917 14.25V28.69H66.8517V27.89C66.1851 28.5834 65.3251 28.93 64.2717 28.93ZM64.5117 27.31C65.5251 27.31 66.3051 26.85 66.8517 25.93V21.13C66.3051 20.2634 65.5251 19.83 64.5117 19.83C63.6451 19.83 62.9784 20.1567 62.5117 20.81C62.0451 21.45 61.8117 22.37 61.8117 23.57C61.8117 24.65 62.0517 25.5434 62.5317 26.25C63.0251 26.9567 63.6851 27.31 64.5117 27.31ZM73.5422 16.31C73.3289 16.51 73.0689 16.61 72.7622 16.61C72.4555 16.61 72.1955 16.5034 71.9822 16.29C71.7822 16.0767 71.6822 15.8234 71.6822 15.53C71.6822 15.2233 71.7889 14.9634 72.0022 14.75C72.2155 14.5234 72.4689 14.41 72.7622 14.41C73.0689 14.41 73.3289 14.5234 73.5422 14.75C73.7555 14.9634 73.8622 15.2233 73.8622 15.53C73.8622 15.8367 73.7555 16.0967 73.5422 16.31ZM71.9022 28.69V18.47H73.6422V28.69H71.9022ZM79.7203 28.93C78.2803 28.93 77.5603 28.1167 77.5603 26.49V19.99H75.9003V18.47H77.5603V15.09L79.3003 14.25V18.47H81.8203V19.99H79.3003V25.91C79.3003 26.3634 79.3737 26.71 79.5203 26.95C79.667 27.19 79.947 27.31 80.3603 27.31C80.8137 27.31 81.3203 27.13 81.8803 26.77L81.6803 28.47C81.0937 28.7767 80.4403 28.93 79.7203 28.93ZM96.3678 27.51C95.5545 28.4567 94.4545 28.93 93.0678 28.93C91.6812 28.93 90.5812 28.4567 89.7678 27.51C88.9545 26.5634 88.5478 25.2567 88.5478 23.59C88.5478 21.9234 88.9545 20.6167 89.7678 19.67C90.5812 18.71 91.6812 18.23 93.0678 18.23C94.4545 18.23 95.5545 18.7034 96.3678 19.65C97.1812 20.5967 97.5878 21.9034 97.5878 23.57C97.5878 25.2367 97.1812 26.55 96.3678 27.51ZM91.0278 26.33C91.5212 26.9834 92.2012 27.31 93.0678 27.31C93.9345 27.31 94.6078 26.9834 95.0878 26.33C95.5812 25.6634 95.8278 24.7434 95.8278 23.57C95.8278 22.41 95.5812 21.4967 95.0878 20.83C94.6078 20.1634 93.9345 19.83 93.0678 19.83C92.2012 19.83 91.5212 20.1634 91.0278 20.83C90.5478 21.4834 90.3078 22.4034 90.3078 23.59C90.3078 24.75 90.5478 25.6634 91.0278 26.33ZM106.6 28.69V22.51C106.6 21.59 106.4 20.9167 106 20.49C105.614 20.05 105.08 19.83 104.4 19.83C102.827 19.83 102.04 20.71 102.04 22.47V28.69H100.3V18.47H102.04V19.51C102.667 18.6567 103.547 18.23 104.68 18.23C105.88 18.23 106.787 18.5967 107.4 19.33C108.027 20.05 108.34 21.21 108.34 22.81V28.69H106.6ZM116.317 28.69V14.69H122.517C124.13 14.69 125.297 15.09 126.017 15.89C126.75 16.69 127.117 17.71 127.117 18.95C127.117 19.8167 126.87 20.63 126.377 21.39C125.883 22.15 125.17 22.67 124.237 22.95L127.037 28.69H124.337L121.637 23.21H118.717V28.69H116.317ZM118.717 20.93H122.557C123.277 20.93 123.803 20.7434 124.137 20.37C124.47 19.9967 124.637 19.5234 124.637 18.95C124.637 18.39 124.477 17.9234 124.157 17.55C123.837 17.1634 123.303 16.97 122.557 16.97H118.717V20.93ZM130.008 28.69V14.69H139.128V16.95H132.408V20.33H136.548V22.59H132.408V26.43H139.568V28.69H130.008ZM142.274 28.69V14.69H148.094C149.707 14.69 150.894 15.11 151.654 15.95C152.414 16.79 152.794 17.8167 152.794 19.03C152.794 20.1767 152.394 21.19 151.594 22.07C150.807 22.95 149.64 23.39 148.094 23.39H144.674V28.69H142.274ZM148.214 21.11C148.92 21.11 149.447 20.9034 149.794 20.49C150.14 20.0767 150.314 19.59 150.314 19.03C150.314 18.4967 150.147 18.0234 149.814 17.61C149.494 17.1834 148.96 16.97 148.214 16.97H144.674V21.11H148.214ZM154.989 28.69V14.69H157.389V26.39H164.189V28.69H154.989Z" fill="white"/>
+<defs>
+<clipPath id="clip0">
+<rect width="22.295" height="26.845" fill="white" transform="translate(18.2 8.965)"/>
+</clipPath>
+</defs>
+</svg>

From f25419b89e5d3bed88da01d30e41386d261092c7 Mon Sep 17 00:00:00 2001
From: johannchopin <johannchopin@pm.me>
Date: Thu, 16 Dec 2021 11:39:51 +0100
Subject: [PATCH 2/3] better dropdown visibility

---
 .../_components/AppControls/SharePanel.svelte | 28 +++++++++++++++++--
 .../[id]/_components/AppControls/index.svelte |  7 ++++-
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/sites/svelte.dev/src/routes/repl/[id]/_components/AppControls/SharePanel.svelte b/sites/svelte.dev/src/routes/repl/[id]/_components/AppControls/SharePanel.svelte
index 1d723b10..f5ba05af 100644
--- a/sites/svelte.dev/src/routes/repl/[id]/_components/AppControls/SharePanel.svelte
+++ b/sites/svelte.dev/src/routes/repl/[id]/_components/AppControls/SharePanel.svelte
@@ -3,16 +3,22 @@
   import { fade, fly } from 'svelte/transition';
   import { Icon } from '@sveltejs/site-kit';
   import setClipboard from '../../../_utils/setClipboard'
+
   const dispatch = createEventDispatcher();
+
   export let name;
   export let gist;
   export let version;
+
   const REPL_BUTTON_URL = `${window.location.origin}/svelte-share-repl.svg`
   let linkCopied = false
+
   $: canShare = gist?.uid && version;
+
 	function getForkedReplUrl() {
 		return `${window.location.origin}/repl/${gist.uid}?version=${version}`
 	}
+
   function copyLink() {
     linkCopied = true;
     setClipboard(getForkedReplUrl());
@@ -21,7 +27,12 @@
     }, 500);
   }
 </script>
-<div class="share-panel" transition:fly="{{ y: -5, duration: 500 }}">
+
+<div
+  class="share-panel"
+  aria-labelledby="shareReplDropdown" 
+  transition:fly="{{ y: -5, duration: 500 }}"
+>
   {#if canShare}
     <h4>Share REPL Button</h4>
     <img src="/svelte-share-repl.svg" alt="share REPL icon" width="150" />
@@ -29,7 +40,9 @@
     <textarea name="markdown" rows="2" readonly>[![Edit {name}]({REPL_BUTTON_URL})]({getForkedReplUrl()})</textarea>
     <h5>HTML</h5>
     <textarea name="html" rows="2" readonly><a href="{getForkedReplUrl()}"><img alt="Edit {name}" src="{REPL_BUTTON_URL}"></a></textarea>
+
     <hr>
+
     <div class="actions">
       <button class="cancel" on:click={() => dispatch('close')}>Cancel</button>
       <button 
@@ -48,12 +61,14 @@
   {:else}
      <p>You need to save the REPL to share it!</p>
   {/if}
-  </div>
+</div>
+
 <style>
   p {
     color: #333;
     margin: 0;
   }
+
   .share-panel {
     position: absolute;
     left: 0;
@@ -67,6 +82,7 @@
     transform: translateX(-50%);
     z-index: 15;
   }
+
   textarea {
     resize: none;
     width: 100%;
@@ -75,9 +91,11 @@
     line-height: 1.3em;
     white-space: nowrap;
   }
+
   h5, hr {
     margin-top: .5em;
   }
+
   hr {
     display: block;
     height: 1px;
@@ -85,10 +103,12 @@
     border-top: 1px solid #eee;
     margin-bottom: .5em;
   }
+
   .actions {
     display: flex;
     justify-content: flex-end;
   }
+
   button {
     color: var(--heading);
     font-size: .8em;
@@ -96,18 +116,22 @@
     border: 1px solid #eee;
     border-radius: var(--border-r);
   }
+
   .cancel {
     background-color: var(--back-light);
   }
+
   .copy-link {
     position: relative;
     color: var(--prime);
     border-color: var(--prime);
     margin-left: .5em;
   }
+
   .copy-link.click span {
     color: transparent;
   }
+
   .copy-link :global(.icon) {
     position: absolute;
     top: 50%;
diff --git a/sites/svelte.dev/src/routes/repl/[id]/_components/AppControls/index.svelte b/sites/svelte.dev/src/routes/repl/[id]/_components/AppControls/index.svelte
index cd1c568e..f384449f 100644
--- a/sites/svelte.dev/src/routes/repl/[id]/_components/AppControls/index.svelte
+++ b/sites/svelte.dev/src/routes/repl/[id]/_components/AppControls/index.svelte
@@ -203,7 +203,12 @@ export default app;`
 		</button>
 
 		<div class="share-ctn">
-			<button class="icon" title="share" on:click={() => share = !share}>
+			<button
+				id="shareReplDropdown"
+				class="icon"
+				title="share"
+				on:click={() => share = !share} aria-expanded={share ? "true" : "false"}
+			>
 				<!-- TODO: Add Icon 'check-2' to @sveltejs/site-kit -->
 				<svg xmlns="http://www.w3.org/2000/svg" style="vertical-align: middle;" x="0px" y="0px" viewBox="0 0 512 512" xml:space="preserve">
 					<path fill="currentColor" d="M406,332c-29.636,0-55.969,14.402-72.378,36.571l-141.27-72.195C194.722,288.324,196,279.809,196,271    c0-11.931-2.339-23.324-6.574-33.753l148.06-88.958C354.006,167.679,378.59,180,406,180c49.626,0,90-40.374,90-90    c0-49.626-40.374-90-90-90c-49.626,0-90,40.374-90,90c0,11.47,2.161,22.443,6.09,32.54l-148.43,89.18    C157.152,192.902,132.941,181,106,181c-49.626,0-90,40.374-90,90c0,49.626,40.374,90,90,90c30.122,0,56.832-14.876,73.177-37.666    l140.86,71.985C317.414,403.753,316,412.714,316,422c0,49.626,40.374,90,90,90c49.626,0,90-40.374,90-90    C496,372.374,455.626,332,406,332z M406,30c33.084,0,60,26.916,60,60s-26.916,60-60,60s-60-26.916-60-60S372.916,30,406,30z     M106,331c-33.084,0-60-26.916-60-60s26.916-60,60-60s60,26.916,60,60S139.084,331,106,331z M406,482c-33.084,0-60-26.916-60-60    s26.916-60,60-60s60,26.916,60,60S439.084,482,406,482z"/>

From 5966e701c5dbff2b87be9cab3f13ba6ff2d43081 Mon Sep 17 00:00:00 2001
From: johannchopin <johannchopin@pm.me>
Date: Thu, 16 Dec 2021 11:45:39 +0100
Subject: [PATCH 3/3] add missing semis

---
 .../[id]/_components/AppControls/SharePanel.svelte     | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/sites/svelte.dev/src/routes/repl/[id]/_components/AppControls/SharePanel.svelte b/sites/svelte.dev/src/routes/repl/[id]/_components/AppControls/SharePanel.svelte
index f5ba05af..6fc6b942 100644
--- a/sites/svelte.dev/src/routes/repl/[id]/_components/AppControls/SharePanel.svelte
+++ b/sites/svelte.dev/src/routes/repl/[id]/_components/AppControls/SharePanel.svelte
@@ -2,7 +2,7 @@
   import { createEventDispatcher } from 'svelte';
   import { fade, fly } from 'svelte/transition';
   import { Icon } from '@sveltejs/site-kit';
-  import setClipboard from '../../../_utils/setClipboard'
+  import setClipboard from '../../../_utils/setClipboard';
 
   const dispatch = createEventDispatcher();
 
@@ -10,20 +10,20 @@
   export let gist;
   export let version;
 
-  const REPL_BUTTON_URL = `${window.location.origin}/svelte-share-repl.svg`
-  let linkCopied = false
+  const REPL_BUTTON_URL = `${window.location.origin}/svelte-share-repl.svg`;
+  let linkCopied = false;
 
   $: canShare = gist?.uid && version;
 
 	function getForkedReplUrl() {
-		return `${window.location.origin}/repl/${gist.uid}?version=${version}`
+		return `${window.location.origin}/repl/${gist.uid}?version=${version}`;
 	}
 
   function copyLink() {
     linkCopied = true;
     setClipboard(getForkedReplUrl());
     setTimeout(() => {
-      dispatch('close')
+      dispatch('close');
     }, 500);
   }
 </script>