Add 3.x docs to the website! (#6549)

* add 3.x version to docs

* support for 3.x

* fix guide links in docs

* changes

* changes

* working

* working

* fix

* add changeset

* formatting

* fix 3.50.2

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/stupid-brooms-cut.md

@@ -0,0 +1,5 @@
+---
+"website": minor
+---
+
+feat:Add 3.x docs to the website! 

js/_website/src/lib/components/Demos.svelte

@@ -2,8 +2,8 @@
 	export let name: string;
 	export let code: string;
 	export let highlighted_code: string;
-	export let on_main: boolean = false;
-	$: on_main;
+	export let url_version: string;
+	$: url_version;
 </script>
 
 <div class="codeblock" id="{name}_code">
@@ -22,8 +22,10 @@
 </div>
 
 {#key name}
-	{#if on_main}
+	{#if url_version === "main"}
 		<gradio-app space={"gradio/" + name + "_main"} />
+	{:else if url_version === "3.50.2"}
+		<gradio-app space={"gradio/" + name + "_3-x"} />
 	{:else}
 		<gradio-app space={"gradio/" + name} />
 	{/if}

js/_website/src/lib/components/VersionDropdown.svelte

@@ -3,9 +3,8 @@
 	import { browser } from "$app/environment";
 	import { goto } from "$app/navigation";
 	import { version } from "$lib/json/version.json";
-	import path from "path";
 
-	export let choices = [version, "main"];
+	export let choices = [version, "3.50.2", "main"];
 	export let value: string = $page.params?.version || version;
 	export let docs_type = "python";
 
@@ -13,9 +12,6 @@
 	$: is_docs = $page.route.id?.includes("/docs/");
 
 	$: docs_url = `${value === version ? "" : `/${value}`}/docs/${
-		docs_type == "js" ? "js/" : ""
-	}${
-		$page.params?.jsdoc ||
 		$page.params?.doc ||
 		(is_dynamic || path_parts.length !== 4
 			? ""
@@ -32,12 +28,33 @@
 			: path_parts[path_parts.length - 1])
 	}`;
 
+	function reload() {
+		if (browser) {
+			if (is_docs) {
+				window.location.href = docs_url;
+			}
+			if (is_guide) {
+				window.location.href = guide_url;
+			}
+		}
+	}
+
+	$: browser && is_docs && goto(docs_url);
 	$: browser && is_docs && goto(docs_url);
-	$: browser && is_guide && goto(guide_url);
 </script>
 
+<svelte:head>
+	<script
+		type="module"
+		src="https://gradio.s3-us-west-2.amazonaws.com/{value === 'main'
+			? version
+			: value}/gradio.js"
+	></script>
+</svelte:head>
+
 <select
 	bind:value
+	on:change={reload}
 	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"
 >
 	{#each choices as choice}

js/_website/src/routes/+layout.svelte

@@ -23,8 +23,6 @@
 	if (browser) {
 		window.__gradio_mode__ = "website";
 	}
-	import version_json from "$lib/json/version.json";
-	let version = version_json.version;
 
 	import CopyButton from "$lib/components/CopyButton.svelte";
 	import { afterNavigate } from "$app/navigation";
@@ -73,11 +71,6 @@
 			cookie_flags: "samesite=none;secure"
 		});
 	</script>
-
-	<script
-		type="module"
-		src="https://gradio.s3-us-west-2.amazonaws.com/{version}/gradio.js"
-	></script>
 </svelte:head>
 
 <Header />

js/_website/src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { version } from "$lib/json/version.json";
+	import version_json from "$lib/json/version.json";
 	import DemosLanding from "$lib/components/DemosLanding.svelte";
 	import MetaTags from "$lib/components/MetaTags.svelte";
 	import gradio_banner from "$lib/assets/img/header-image.jpg";
@@ -20,10 +20,20 @@
 		}[];
 		star_count: any;
 	};
+
+	let version = version_json.version;
 </script>
 
 <MetaTags url={"https://gradio.app"} canonical={"https://gradio.app"} />
 
+<svelte:head>
+	<script
+		id="gradio-js-script"
+		type="module"
+		src="https://gradio.s3-us-west-2.amazonaws.com/{version}/gradio.js"
+	></script>
+</svelte:head>
+
 <div class="container relative mx-auto px-4 pt-8 pb-12">
 	<div class="flex flex-col items-center lg:flex-row">
 		<img

js/_website/src/routes/[[version]]/docs/+layout.server.ts

@@ -40,6 +40,8 @@ export async function load({ params, url }) {
 	let wheel: string = WHEEL;
 	let pages: string[] = docs_json.pages;
 
+	let url_version = params?.version || VERSION;
+
 	return {
 		docs,
 		components,
@@ -52,6 +54,7 @@ export async function load({ params, url }) {
 		on_main,
 		wheel,
 		pages,
-		js_client
+		js_client,
+		url_version
 	};
 }

js/_website/src/routes/[[version]]/docs/[doc]/+page.server.ts

@@ -24,7 +24,8 @@ export async function load({ params, parent }) {
 		routes,
 		on_main,
 		wheel,
-		pages
+		pages,
+		url_version
 	} = await parent();
 
 	let name = params.doc;
@@ -137,6 +138,7 @@ export async function load({ params, parent }) {
 		headers,
 		method_headers,
 		on_main,
-		wheel
+		wheel,
+		url_version
 	};
 }

js/_website/src/routes/[[version]]/docs/[doc]/+page.svelte

@@ -20,6 +20,7 @@
 	let py_client = data.py_client;
 	let on_main: boolean;
 	let wheel: string = data.wheel;
+	let url_version: string = data.url_version;
 
 	let headers: [string, string][];
 	let method_headers: [string, string][];
@@ -67,6 +68,7 @@
 	$: modals = data.modals;
 	$: routes = data.routes;
 	$: py_client = data.py_client;
+	$: url_version = data.url_version;
 </script>
 
 <MetaTags
@@ -193,12 +195,18 @@
 							<div class="embedded-component">
 								{#key obj.name}
 									{#if obj.name !== "State"}
-										{#if on_main}
+										{#if url_version === "main"}
 											<gradio-app
 												space={"gradio/" +
 													obj.name.toLowerCase() +
 													"_component_main"}
 											/>
+										{:else if url_version === "3.50.2"}
+											<gradio-app
+												space={"gradio/" +
+													obj.name.toLowerCase() +
+													"_component_3-x"}
+											/>
 										{:else}
 											<gradio-app
 												space={"gradio/" +
@@ -420,7 +428,7 @@
 															name={demo[0]}
 															code={demo[1]}
 															highlighted_code={demo[2]}
-															{on_main}
+															{url_version}
 														/>
 													</div>
 												{/each}
@@ -489,7 +497,7 @@
 											class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow bg-gradient-to-r {data
 												.COLOR_SETS[i][0]} {data.COLOR_SETS[i][1]}"
 											target="_blank"
-											href={guide.url}
+											href="..{guide.url}"
 										>
 											<div class="flex flex-col p-4 h-min">
 												<p class="group-hover:underline text-l">

js/_website/src/routes/[[version]]/docs/flagging/+page.svelte

@@ -400,7 +400,7 @@
 											class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow bg-gradient-to-r {data
 												.COLOR_SETS[i][0]} {data.COLOR_SETS[i][1]}"
 											target="_blank"
-											href={guide.url}
+											href="..{guide.url}"
 										>
 											<div class="flex flex-col p-4 h-min">
 												<p class="group-hover:underline text-l">

js/_website/src/routes/[[version]]/docs/themes/+page.svelte

@@ -418,7 +418,7 @@
 											class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow bg-gradient-to-r {data
 												.COLOR_SETS[i][0]} {data.COLOR_SETS[i][1]}"
 											target="_blank"
-											href={guide.url}
+											href="..{guide.url}"
 										>
 											<div class="flex flex-col p-4 h-min">
 												<p class="group-hover:underline text-l">

js/_website/svelte.config.js

@@ -18,12 +18,13 @@ const config = {
 				"*",
 				`/${version}/docs`,
 				`/${version}/guides`,
-				`/${version}/docs/js`,
-				`/${version}/docs/js/storybook`,
-				`/${version}/docs/js/`,
 				`/main/docs`,
 				`/main/guides`,
 				`/main/docs/js`,
+				`/main/docs/js/storybook`,
+				`/main/docs/js/`,
+				`/3.50.2/docs`,
+				`/3.50.2/guides`,
 				...Object.keys(redirects)
 			]
 		},