Styling fixes to guides (#5608)

* fix code font * add prev and next guides * fix broken links * fix * add changeset --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
gradio-app · Sep 19, 2023 · eebf9d7 · eebf9d7
1 parent 88d43bd
commit eebf9d7
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 4 deletions.
diff --git a/.changeset/hot-words-sin.md b/.changeset/hot-words-sin.md
@@ -0,0 +1,5 @@
+---
+"website": patch
+---
+
+fix:Styling fixes to guides
diff --git a/guides/01_getting-started/02_key-features.md b/guides/01_getting-started/02_key-features.md
@@ -23,7 +23,7 @@ $demo_calculator
 
 You can load a large dataset into the examples to browse and interact with the dataset through Gradio. The examples will be automatically paginated (you can configure this through the `examples_per_page` argument of `Interface`).
 
-Continue learning about examples in the [More On Examples](https://gradio.app/more-on-examples) guide.
+Continue learning about examples in the [More On Examples](https://gradio.app/guides/more-on-examples) guide.
 
 ## Alerts
 

diff --git a/guides/01_getting-started/03_sharing-your-app.md b/guides/01_getting-started/03_sharing-your-app.md
@@ -151,7 +151,7 @@ Note: if you use IFrames, you'll probably want to add a fixed `height` attribute
 
 You can use almost any Gradio app as an API! In the footer of a Gradio app [like this one](https://huggingface.co/spaces/gradio/hello_world), you'll see a "Use via API" link.
 
-![Use via API](https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/gradio-guides/api3.gif)
+![Use via API](https://github.com/gradio-app/gradio/blob/main/guides/assets/use_via_api.png?raw=true)
 
 This is a page that lists the endpoints that can be used to query the Gradio app, via our supported clients: either [the Python client](https://gradio.app/guides/getting-started-with-the-python-client/), or [the JavaScript client](https://gradio.app/guides/getting-started-with-the-js-client/). For each endpoint, Gradio automatically generates the parameters and their types, as well as example inputs.
 

diff --git a/js/_website/src/lib/assets/prism.css b/js/_website/src/lib/assets/prism.css
@@ -67,7 +67,7 @@ pre[class*="language-"] {
 
 .prose code[class*="language-"],
 .prose pre[class*="language-"] {
-	font-size: 0.8em;
+	font-size: 0.9em;
 }
 
 /* Inline code */

diff --git a/js/_website/src/routes/[[version]]/guides/[guide]/+page.svelte b/js/_website/src/routes/[[version]]/guides/[guide]/+page.svelte
@@ -49,6 +49,12 @@
 		});
 	}
 
+	let flattened_guides = guide_names
+		.map((category) => category.guides)
+		.flat();
+	let prev_guide: any;
+	let next_guide: any;
+
 	$: if (sidebar) {
 		if (
 			target_link?.previousElementSibling?.classList.contains("category-link")
@@ -59,6 +65,11 @@
 	}
 	$: guide_page = data.guide;
 	$: guide_slug = data.guide_slug;
+	$: prev_guide = flattened_guides[
+		flattened_guides.findIndex((guide) => guide.url === guide_page.url) - 1];
+	$: next_guide = flattened_guides[
+		flattened_guides.findIndex((guide) => guide.url === guide_page.url) + 1];
+
 </script>
 
 <MetaTags
@@ -131,7 +142,36 @@
 			{/each}
 		{/each}
 	</div>
-	<div class="w-10/12 mx-auto">
+	<div class="w-full lg:w-10/12 mx-auto">
+		<div class="w-full flex justify-between my-4">
+			{#if prev_guide}
+				<a
+					href="{prev_guide.url}"
+					class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline max-w-[48%]"
+				>	
+					<div class="flex text-lg">
+						<span class="text-orange-500 mr-1">&#8592;</span>
+						<p class="whitespace-nowrap overflow-hidden text-ellipsis">{prev_guide.pretty_name}</p>
+					</div>
+				</a>
+			{:else}
+				<div />
+			{/if}
+			{#if next_guide}
+				<a
+					href="{next_guide.url}"
+					class="text-right px-4 py-1 bg-gray-50 rounded-full max-w-1/2 hover:underline max-w-[48%]"
+				>
+				<div class="flex text-lg">
+					<p class="whitespace-nowrap overflow-hidden text-ellipsis">{next_guide.pretty_name}</p>
+					<span class="text-orange-500 ml-1">&#8594;</span>
+				</div>
+				</a>
+			{:else}
+				<div />
+			{/if}
+		</div>
+
 		{#if guide_page.spaces.length}
 			<div id="spaces-holder" class="mb-4">
 				<a href="https://hf.co/spaces" target="_blank">
@@ -156,6 +196,34 @@
 		<div class="prose text-lg max-w-full">
 			{@html guide_page.new_html}
 		</div>
+		<div class="w-full flex justify-between my-4">
+			{#if prev_guide}
+				<a
+					href="{prev_guide.url}"
+					class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline max-w-[48%]"
+				>	
+					<div class="flex text-lg">
+						<span class="text-orange-500 mr-1">&#8592;</span>
+						<p class="whitespace-nowrap overflow-hidden text-ellipsis">{prev_guide.pretty_name}</p>
+					</div>
+				</a>
+			{:else}
+				<div />
+			{/if}
+			{#if next_guide}
+				<a
+					href="{next_guide.url}"
+					class="text-right px-4 py-1 bg-gray-50 rounded-full max-w-1/2 hover:underline max-w-[48%]"
+				>
+				<div class="flex text-lg">
+					<p class="whitespace-nowrap overflow-hidden text-ellipsis">{next_guide.pretty_name}</p>
+					<span class="text-orange-500 ml-1">&#8594;</span>
+				</div>
+				</a>
+			{:else}
+				<div />
+			{/if}
+		</div>
 	</div>
 </div>