diff --git a/.changeset/clean-lands-follow.md b/.changeset/clean-lands-follow.md new file mode 100644 index 0000000000..0bbfdb30de --- /dev/null +++ b/.changeset/clean-lands-follow.md @@ -0,0 +1,5 @@ +--- +"website": minor +--- + +feat:Add sharing to playground diff --git a/js/_website/src/lib/assets/img/anchor_gray.svg b/js/_website/src/lib/assets/img/anchor_gray.svg new file mode 100644 index 0000000000..2170c4334a --- /dev/null +++ b/js/_website/src/lib/assets/img/anchor_gray.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/js/_website/src/lib/assets/img/anchor_orange.svg b/js/_website/src/lib/assets/img/anchor_orange.svg new file mode 100644 index 0000000000..b2d2c16992 --- /dev/null +++ b/js/_website/src/lib/assets/img/anchor_orange.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/js/_website/src/lib/assets/img/share_gray.svg b/js/_website/src/lib/assets/img/share_gray.svg new file mode 100644 index 0000000000..3e54de55e3 --- /dev/null +++ b/js/_website/src/lib/assets/img/share_gray.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/js/_website/src/lib/assets/style.css b/js/_website/src/lib/assets/style.css index 32034b4b40..860dcd5160 100644 --- a/js/_website/src/lib/assets/style.css +++ b/js/_website/src/lib/assets/style.css @@ -205,3 +205,10 @@ code.language-bash { .tip a { @apply text-orange-700; } + +.shared-link:before { + content: url("img/anchor_orange.svg"); + width: 15px; + display: inline-block; + margin-right: 5px; +} diff --git a/js/_website/src/lib/components/DemosLite.svelte b/js/_website/src/lib/components/DemosLite.svelte index e935307629..3ec1bc286c 100644 --- a/js/_website/src/lib/components/DemosLite.svelte +++ b/js/_website/src/lib/components/DemosLite.svelte @@ -4,6 +4,10 @@ import Slider from "./Slider.svelte"; import Fullscreen from "./icons/Fullscreen.svelte"; import Close from "./icons/Close.svelte"; + import { page } from "$app/stores"; + import share from "$lib/assets/img/share_gray.svg"; + import { svgCheck } from "$lib/assets/copy.js"; + import { browser } from "$app/environment"; export let demos: { name: string; @@ -13,6 +17,16 @@ }[]; export let current_selection: string; export let show_nav = true; + + let new_demo = { + name: "Blank", + dir: "Blank", + code: "# Write your own Gradio code here and see what it looks like!\nimport gradio as gr\n\n", + requirements: [] + }; + + demos.push(new_demo); + let mounted = false; let controller: any; @@ -54,6 +68,17 @@ let timeout: any; + let copied_link = false; + async function copy_link(name: string) { + let code_b64 = btoa(code); + name = name.replaceAll(" ", "_"); + await navigator.clipboard.writeText( + `${$page.url.href.split("?")[0]}?demo=${name}&code=${code_b64}` + ); + copied_link = true; + setTimeout(() => (copied_link = false), 2000); + } + $: code = demos.find((demo) => demo.name === current_selection)?.code || ""; $: requirements = demos.find((demo) => demo.name === current_selection)?.requirements || []; @@ -77,6 +102,19 @@ let lg_breakpoint = false; $: lg_breakpoint = preview_width - 13 >= 688; + + if (browser) { + let linked_demo = $page.url.searchParams.get("demo"); + let b64_code = $page.url.searchParams.get("code"); + + if (linked_demo && b64_code) { + current_selection = linked_demo.replaceAll("_", " "); + let demo = demos.find((demo) => demo.name === current_selection); + if (demo) { + demo.code = atob(b64_code); + } + } + } @@ -101,6 +139,22 @@ >

Code

+
+ +
import DemosLite from "../../lib/components/DemosLite.svelte"; import MetaTags from "$lib/components/MetaTags.svelte"; + import { page } from "$app/stores"; + import { browser } from "$app/environment"; export let data: { demos_by_category: { @@ -17,6 +19,15 @@ let all_demos = data.demos_by_category.flatMap((category) => category.demos); let current_selection = all_demos[0].name; + let shared = ""; + if (browser) { + let linked_demo = $page.url.searchParams.get("demo"); + if (linked_demo) { + current_selection = linked_demo.replaceAll("_", " "); + shared = current_selection; + } + } + let show_nav = true; $: show_nav; @@ -76,12 +87,19 @@ > {#if show_nav} + {#each data.demos_by_category as { category, demos } (category)}

{category}

{#each demos as demo, i} {/each} diff --git a/js/_website/svelte.config.js b/js/_website/svelte.config.js index f4a2bc60dd..4e35f6ea21 100644 --- a/js/_website/svelte.config.js +++ b/js/_website/svelte.config.js @@ -23,7 +23,6 @@ const config = { `/main/docs`, `/main/guides`, `/main/docs/js` - // "/main/docs/interface" ] }, files: {