[feat] add share button in REPL

sites/svelte.dev/src/routes/repl/[id]/_components/AppControls/SharePanel.svelte

@@ -0,0 +1,141 @@
+<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"
+ 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" />
+ <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>

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,24 @@ export default app;`
  <Icon name="download" />
  </button>
 
+ <div class="share-ctn">
+ <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"/>
+ </svg> 
+ </button>
+
+ {#if share}
+ <SharePanel {name} {gist} {version} on:close={() => share = false} />
+ {/if} 
+ </div>
+
  <button
  class="icon"
  disabled={saving || !$session.user}
@@ -317,6 +339,11 @@ export default app;`
  right: 0px;
  }
 
+ .share-ctn {
+ position: relative;
+ display: inline;
+ } 
+
  @media (min-width: 600px) {
  .icon[title^='fullscreen'] {
  display: inline;

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}>

sites/svelte.dev/src/routes/repl/_utils/setClipboard.js

@@ -0,0 +1,3 @@
+export default function setClipboard(text) { 
+ navigator.clipboard.writeText(text);
+}