mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2024-11-21 01:01:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

Styling fixes to guides (#5608)

Browse Source 
* 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>
This commit is contained in:
Ali Abdalla 2023-09-19 12:49:54 -07:00 committed by GitHub
parent 88d43bd124
commit eebf9d71f9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 77 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/hot-words-sin.md Normal file
View File

@ -0,0 +1,5 @@
---
"website": patch
---
fix:Styling fixes to guides

2
guides/01_getting-started/02_key-features.md
View File

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

2
guides/01_getting-started/03_sharing-your-app.md
View File

@ -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.

2
js/_website/src/lib/assets/prism.css
View File

@ -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 */

70
js/_website/src/routes/[[version]]/guides/[guide]/+page.svelte
View File

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