File size: 3,275 Bytes
a03b3ba |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 |
<script lang="ts">
import MetaTags from "$lib/components/MetaTags.svelte";
import { page } from "$app/stores";
export let data: {
[key: string]: any;
};
let search_query = "";
function search() {
for (const category in data.guides_by_category) {
for (const guide in data.guides_by_category[category].guides) {
let g = data.guides_by_category[category].guides[guide];
data.guides_by_category[category].guides[guide].hidden = !(
g.pretty_name.toLowerCase().includes(search_query.toLowerCase()) ||
g.content.toLowerCase().includes(search_query.toLowerCase())
);
}
}
}
function isNotHidden(guide: any) {
return !guide.hidden;
}
function categoryNotHidden(category: any) {
return category.guides.filter(isNotHidden).length !== 0;
}
import DropDown from "$lib/components/VersionDropdown.svelte";
$: console.log(data);
</script>
<MetaTags
title="Gradio Guides"
url={$page.url.pathname}
canonical={$page.url.pathname}
description="Step-by-Step Gradio Tutorials"
/>
<div class="container mx-auto px-4 relative pt-8 mb-0">
<input
id="search-by-tag"
type="text"
class="w-full border border-gray-200 p-1 rounded-md outline-none text-center text-lg mb-1 focus:placeholder-transparent focus:shadow-none focus:border-orange-500 focus:ring-0"
placeholder="What do you want to build?"
autocomplete="off"
bind:value={search_query}
on:keyup={search}
/>
<div class="text-gray-600 mb-0 mx-auto w-fit text-sm">
Search through
<span id="counter">{data.total_guides}</span>
Guides.
<a
class="link text-gray-600"
href="https://github.com/gradio-app/gradio/tree/main/guides/CONTRIBUTING.md"
>Contribute here</a
>
</div>
<div class="mt-[-28px] mb-[28px] flex justify-end">
<DropDown />
</div>
{#each data.guides_by_category as { category, guides }, i (category)}
<div class="category mb-8 p-4">
<h2
class:hidden={guides.filter(isNotHidden).length === 0}
class="mb-4 text-2xl font-thin block"
>
{category}
</h2>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
{#each guides as guide (guide.name)}
<a
class:hidden={guide.hidden}
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]}"
href=".{guide.url}"
>
<div class="flex flex-col p-4 h-min">
<h2 class="group-hover:underline text-lg">
{guide.pretty_name}
</h2>
<div class="tags-holder">
{#if guide.tags}
<p class="text-gray-600">
<!--
-->{#each guide.tags as tag, j (tag)}<!--
-->{tag}{#if j !== guide.tags.length - 1}, {/if}<!--
-->{/each}<!--
-->
</p>
{/if}
</div>
</div>
</a>
{/each}
</div>
</div>
{/each}
<div
class:hidden={data.guides_by_category.filter(categoryNotHidden).length !==
0}
class="no-guides hidden text-center text-xl text-gray-500"
>
<p class="mb-4">Sorry, we couldn't find a guide with this query...</p>
<p>
Try a different term, or <a class="link" href="/docs">see the docs</a>
</p>
</div>
</div>
|