JS READMEs and Storybook on Docs (#6142)

* changes * changes * working * remove storybook path * add changeset * pin code --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
gradio-app · Oct 30, 2023 · 103416d · 103416d
1 parent 90318b1
commit 103416d
Show file tree

Hide file tree

Showing 20 changed files with 773 additions and 39 deletions.
diff --git a/.changeset/loud-cloths-wait.md b/.changeset/loud-cloths-wait.md
@@ -0,0 +1,7 @@
+---
+"@gradio/audio": minor
+"gradio": minor
+"website": minor
+---
+
+feat:JS READMEs and Storybook on Docs
diff --git a/js/_website/generate_jsons/src/docs/__init__.py b/js/_website/generate_jsons/src/docs/__init__.py
@@ -8,6 +8,7 @@
 DIR = os.path.dirname(__file__)
 DEMOS_DIR = os.path.abspath(os.path.join(DIR, "../../../../../demo"))
 JS_CLIENT_README = os.path.abspath(os.path.join(DIR, "../../../../../client/js/README.md"))
+JS_DIR = os.path.abspath(os.path.join(DIR, "../../../../../js/"))
 
 docs = generate_documentation()
 docs["component"].sort(key=lambda x: x["name"])
@@ -267,7 +268,6 @@ def organize_docs(d):
             organized["py-client"][cls]["prev_obj"] = organized["py-client"][
                 c_keys[len(c_keys) - 2]
             ]["name"]
-            organized["py-client"][cls]["next_obj"] = "JS-Client"
         else:
             organized["py-client"][cls]["prev_obj"] = organized["py-client"][
                 c_keys[i - 1]
@@ -300,9 +300,28 @@ def organize_docs(d):
     organized["events_matrix"] = component_events
     organized["events"] = events
 
+    js = {}
+    js_pages = []
+
+    for js_component in os.listdir(JS_DIR):
+        if not js_component.startswith("_") and js_component not in ["app", "highlighted-text", "playground", "preview", "upload-button"]:
+            if os.path.exists(os.path.join(JS_DIR, js_component, "README.md")):
+                with open(os.path.join(JS_DIR, js_component, "README.md")) as f:
+                    readme_content = f.read()
+                js[js_component] = readme_content
+                js_pages.append(js_component)
+
+
     with open(JS_CLIENT_README) as f:
         readme_content = f.read()
-    return {"docs": organized, "pages": pages, "js_client": readme_content}
+    js_pages.append("js-client")
+
+    js["js-client"] = readme_content
+
+    js_pages.sort()
+
+
+    return {"docs": organized, "pages": pages, "js": js, "js_pages": js_pages}
 
 
 docs = organize_docs(docs)

diff --git a/js/_website/package.json b/js/_website/package.json
@@ -27,7 +27,7 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@gradio/code": "workspace:^",
+		"@gradio/code": "0.2.0-beta.6",
 		"@sindresorhus/slugify": "^2.2.0",
 		"@sveltejs/adapter-vercel": "^3.0.3",
 		"hast-util-to-string": "^3.0.0",

diff --git a/js/_website/src/lib/components/DemosLite.svelte b/js/_website/src/lib/components/DemosLite.svelte
@@ -97,7 +97,7 @@
 			{#each demos as demo, i}
 				<div
 					hidden={current_selection !== demo.name}
-					class="code-editor w-full border-r hidden sm:block"
+					class="code-editor w-full border-r"
 					style="width: {position * 100}%"
 				>
 					<div class="flex justify-between align-middle h-8 border-b pl-4 pr-2">

diff --git a/js/_website/src/lib/components/DocsNav.svelte b/js/_website/src/lib/components/DocsNav.svelte
@@ -9,6 +9,7 @@
 	export let py_client: any;
 
 	export let current_nav_link = "";
+	let docs_type = "python";
 
 	let show_nav = false;
 	let searchTerm = "";
@@ -41,6 +42,7 @@
 	}
 
 	import DropDown from "$lib/components/VersionDropdown.svelte";
+	
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
@@ -104,6 +106,18 @@
 			autocomplete="off"
 		/>
 		<DropDown></DropDown>
+		<select
+		bind:value={docs_type} on:change={() => {
+			if (docs_type == "js") {
+				window.location.href = "../docs/js/";
+			}
+		}}
+		class="rounded-md border-gray-200 focus:placeholder-transparent focus:shadow-none focus:border-orange-500 focus:ring-0 text-xs mt-2 py-1 pl-2 pr-7 font-mono"
+		>
+			<option value="js">js</option>
+			<option value="python">python</option>
+		</select>
+
 	</div>
 
 	<p class="font-semibold px-4 my-2 block">Building Demos</p>
@@ -221,9 +235,4 @@
 			href="./{name}/">{obj.name}</a
 		>
 	{/each}
-	<a
-		class:current_nav_link={current_nav_link == "js-client"}
-		class="link px-4 my-2 block"
-		href="./js-client/">JavaScript Client</a
-	>
 </div>
diff --git a/js/_website/src/lib/components/Header.svelte b/js/_website/src/lib/components/Header.svelte
@@ -11,8 +11,8 @@
 	// $: selected_version === version && is_versioned && goto("/guides/quickstart");
 </script>
 
-<div>
 <!-- 4.0 Launch BANNER  -->
+<div class="flex-row">
 <div class="relative isolate flex items-center gap-x-6 overflow-hidden bg-gradient-to-r from-white via-yellow-200 to-white px-6 py-2 sm:px-3.5 sm:before:flex-1">
 	<div class="flex flex-wrap items-center gap-x-4 gap-y-2">
 	  <p class="text-md leading-6 text-gray-700">

diff --git a/js/_website/src/lib/components/JSDocsNav.svelte b/js/_website/src/lib/components/JSDocsNav.svelte
@@ -0,0 +1,152 @@
+<script lang="ts">
+	// @ts-nocheck
+	import { clickOutside } from "./clickOutside.js";
+
+	export let js_components: any;
+
+	export let current_nav_link = "";
+    export let version_dropdown = true;
+	let docs_type = "js";
+
+	let show_nav = false;
+	let searchTerm = "";
+	let searchBar: HTMLInputElement;
+
+	const search = () => {
+		let links = document.querySelectorAll(
+			".navigation a"
+		) as NodeListOf<HTMLAnchorElement>;
+		links.forEach((link) => {
+			let linkText = link.innerText.toLowerCase();
+			if (linkText.includes(searchTerm.toLowerCase())) {
+				link.style.display = "block";
+			} else {
+				link.style.display = "none";
+			}
+		});
+	};
+
+	function onKeyDown(e: KeyboardEvent) {
+		if (e.key.toLowerCase() === "k" && (e.metaKey || e.ctrlKey)) {
+			e.preventDefault();
+			searchBar.focus();
+		}
+		if (e.key == "Escape") {
+			searchTerm = "";
+			searchBar.blur();
+			search();
+		}
+	}
+
+	import DropDown from "$lib/components/VersionDropdown.svelte";
+	
+</script>
+
+<svelte:window on:keydown={onKeyDown} />
+
+<section
+	class="top-0 fixed -ml-4 flex items-center p-4 rounded-br-lg backdrop-blur-lg z-50 bg-gray-200/50 lg:hidden"
+	id="menu-bar"
+>
+	<button
+		on:click={() => (show_nav = !show_nav)}
+		type="button"
+		class="text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300"
+	>
+		<svg width="24" height="24"
+			><path
+				d="M5 6h14M5 12h14M5 18h14"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+			/></svg
+		>
+	</button>
+</section>
+
+<div
+	use:clickOutside
+	on:click_outside={() => (show_nav = false)}
+	class:hidden={!show_nav}
+	class="min-w-[200px] navigation mobile-nav overflow-y-auto fixed backdrop-blur-lg z-50 bg-gray-200/50 pr-6 pl-4 py-4 -ml-4 h-full inset-0 w-5/6 lg:inset-auto lg:ml-0 lg:z-0 lg:backdrop-blur-none lg:navigation lg:p-0 lg:pb-4 lg:h-screen lg:leading-relaxed lg:sticky lg:top-0 lg:text-md lg:block rounded-t-xl lg:bg-gradient-to-r lg:from-white lg:to-gray-50 lg:overflow-x-clip lg:w-2/12"
+	id="mobile-nav"
+>
+	<button
+		on:click={() => (show_nav = !show_nav)}
+		type="button"
+		class="absolute z-10 top-4 right-4 w-2/12 h-4 flex items-center justify-center text-grey-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300 p-4 lg:hidden"
+		tabindex="0"
+	>
+		<svg viewBox="0 0 10 10" class="overflow-visible" style="width: 10px"
+			><path
+				d="M0 0L10 10M10 0L0 10"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+			/></svg
+		>
+	</button>
+
+	<div
+		class="w-full sticky top-0 bg-gradient-to-r from-white to-gray-50 z-10 hidden lg:block my-4 ml-4"
+	>
+		<input
+			bind:value={searchTerm}
+			on:input={search}
+			bind:this={searchBar}
+			id="search"
+			type="search"
+			class="w-4/5 rounded-md border-gray-200 focus:placeholder-transparent focus:shadow-none focus:border-orange-500 focus:ring-0"
+			placeholder="Search ⌘-k / ctrl-k"
+			autocomplete="off"
+		/>
+        {#if version_dropdown}
+		    <DropDown docs_type="js"></DropDown>
+        {/if}
+		<select
+		bind:value={docs_type} on:change={() => {
+			if (docs_type == "python") {
+				window.location.href = "../../docs/";
+			}
+		}}
+		class="rounded-md border-gray-200 focus:placeholder-transparent focus:shadow-none focus:border-orange-500 focus:ring-0 text-xs mt-2 py-1 pl-2 pr-7 font-mono"
+		>
+			<option value="js">js</option>
+			<option value="python">python</option>
+		</select>
+
+	</div>
+
+    <p
+					class="mx-4 block bg-gradient-to-r from-orange-100 to-orange-50 border border-orange-200 px-4 py-0.5 mr-2 rounded-full text-orange-800 mb-1 w-fit hover:shadow-lg "
+				>
+					<a class="inline-block" href="./storybook"
+						>
+                        <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" role="presentation" class="w-4 inline-block mb-1">
+                            <path d="M.62 18.43 0 1.92A1.006 1.006 0 0 1 .944.88L14.984.002a1.005 1.005 0 0 1 1.069 1.004v17.989a1.006 1.006 0 0 1-1.051 1.004L1.58 19.396a1.006 1.006 0 0 1-.96-.967Z" fill="#FF4785"></path>
+                            <path fill-rule="evenodd" clip-rule="evenodd" d="m13.88.071-1.932.12-.094 2.267a.15.15 0 0 0 .24.126l.88-.668.744.586a.15.15 0 0 0 .243-.123l-.08-2.308Zm-1.504 7.59c-.353.275-2.989.462-2.989.071.056-1.493-.612-1.558-.984-1.558-.352 0-.946.106-.946.906 0 .815.868 1.275 1.887 1.815 1.447.767 3.2 1.696 3.2 4.032 0 2.24-1.82 3.476-4.14 3.476-2.395 0-4.488-.969-4.252-4.328.093-.394 3.138-.3 3.138 0-.038 1.386.278 1.794 1.076 1.794.613 0 .891-.338.891-.906 0-.861-.904-1.369-1.945-1.953-1.409-.791-3.067-1.722-3.067-3.859 0-2.132 1.466-3.554 4.084-3.554 2.618 0 4.047 1.4 4.047 4.064Z" fill="#fff"></path>
+                        </svg>
+
+
+                        Storybook &rarr;</a
+					>
+				</p>
+
+    <p class="font-semibold px-4 my-2 block">Components</p>
+
+	{#each js_components as name}
+		<a
+			class:current-nav-link={current_nav_link == name}
+			class="px-4 block thin-link"
+			href="./{name}/">{name}</a
+		>
+	{/each}
+	<p class="font-semibold px-4 my-2 block">Client</p>
+    <a
+        class:current-nav-link={current_nav_link == "js-client"}
+        class="px-4 block thin-link"
+        href="./js-client/">JS Client</a
+    >
+</div>
diff --git a/js/_website/src/lib/components/VersionDropdown.svelte b/js/_website/src/lib/components/VersionDropdown.svelte
@@ -7,12 +7,15 @@
 
 	export let choices = [version, "main"];
 	export let value: string = $page.params?.version || version;
+	export let docs_type = "python";
 
 	$: is_guide = $page.route.id?.includes("/guides");
 	$: is_docs = $page.route.id?.includes("/docs/");
 
 	$: docs_url = `${value === version ? "" : `/${value}`}/docs/${
-		$page.params?.doc ||
+		docs_type == "js" ? "js/" : ""	
+	}${
+		$page.params?.jsdoc || $page.params?.doc || 
 		(is_dynamic || path_parts.length !== 4
 			? ""
 			: path_parts[path_parts.length - 1])

diff --git a/js/_website/src/routes/[[version]]/docs/+layout.server.ts b/js/_website/src/routes/[[version]]/docs/+layout.server.ts
@@ -33,7 +33,8 @@ export async function load({ params, url }) {
 	let modals = docs_json.docs.modals || [];
 	let routes = docs_json.docs.routes;
 	let py_client = docs_json.docs["py-client"];
-	let js_client = docs_json.js_client;
+	let js = docs_json.js || {};
+	let js_pages = docs_json.js_pages || [];
 	let on_main = params.version === "main";
 	let wheel: string = WHEEL;
 	let pages: string[] = docs_json.pages;
@@ -45,7 +46,8 @@ export async function load({ params, url }) {
 		modals,
 		routes,
 		py_client,
-		js_client,
+		js, 
+		js_pages,
 		on_main,
 		wheel,
 		pages

diff --git a/js/_website/src/routes/[[version]]/docs/[doc]/+page.svelte b/js/_website/src/routes/[[version]]/docs/[doc]/+page.svelte
@@ -67,6 +67,7 @@
 	$: modals = data.modals;
 	$: routes = data.routes;
 	$: py_client = data.py_client;
+
 </script>
 
 <MetaTags

diff --git a/js/_website/src/routes/[[version]]/docs/js-client/+page.server.ts b/js/_website/src/routes/[[version]]/docs/js-client/+page.server.ts
@@ -46,16 +46,7 @@ function highlight(code: string, lang: string | undefined) {
 }
 
 export async function load({ parent }) {
-	const {
-		components,
-		helpers,
-		modals,
-		py_client,
-		routes,
-		js_client,
-		on_main,
-		wheel
-	} = await parent();
+	const { components, helpers, modals, py_client, routes, js_client, on_main, wheel } = await parent();
 
 	const guide_slug = [];
 
@@ -119,4 +110,4 @@ export async function load({ parent }) {
 		routes,
 		py_client
 	};
-}
+}
diff --git a/js/_website/src/routes/[[version]]/docs/js-client/+page.svelte b/js/_website/src/routes/[[version]]/docs/js-client/+page.svelte
@@ -71,14 +71,14 @@
 				</div>
 			</div>
 		</div>
-		<div
-			class="float-right top-8 hidden sticky h-screen overflow-y-auto lg:w-2/12 lg:block"
-		></div>
+		<div class="float-right top-8 hidden sticky h-screen overflow-y-auto lg:w-2/12 lg:block">
+
+		</div>
 	</div>
 </main>
 
 <style>
 	code {
 		font-size: 1rem;
 	}
-</style>
+</style>
diff --git a/js/_website/src/routes/[[version]]/docs/js/+page.server.ts b/js/_website/src/routes/[[version]]/docs/js/+page.server.ts
@@ -0,0 +1,7 @@
+import { redirect } from "@sveltejs/kit";
+
+export const prerender = true;
+
+export function load({ params }) {
+	throw redirect(302, `./js/accordion`);
+}