mirror of
https://github.com/gradio-app/gradio.git
synced 2025-03-07 11:46:51 +08:00
Better navigation and search in docs (#1884)
* expand nav bar to include subclasses and methods * only show sub-links during the section * add search * add hotkeys * override default shortcuts * styling * added x button * broken style block * refactoring and fixing errors * esc key shortcut for exit * svg file instead of b64 * using @apply
This commit is contained in:
Ali Abdalla
GitHub
parent
f93f4c9cfe
commit
d4272b3fdb
1
website/homepage/src/assets/img/esc.svg
Normal file
1
website/homepage/src/assets/img/esc.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 108.95" style="enable-background:new 0 0 122.88 108.95" xml:space="preserve" fill="#6b7280"><g><path class="st0" d="M23.01,0h76.87c6.33,0,12.08,2.59,16.25,6.76c4.17,4.17,6.76,9.92,6.76,16.25v62.93 c0,6.33-2.59,12.08-6.76,16.25c-4.17,4.17-9.92,6.76-16.25,6.76H23.01c-6.33,0-12.08-2.59-16.25-6.76C2.59,98.02,0,92.27,0,85.94 V23.01c0-6.33,2.59-12.08,6.76-16.25C10.92,2.59,16.68,0,23.01,0L23.01,0z M25.17,33.8h22.65v6.19H33.67v4.61h13.12v5.91H33.67v5.7 h14.58v6.55H25.17V33.8L25.17,33.8z M50.96,56.94l7.54-0.73c0.31,0.94,0.75,1.62,1.31,2.02c0.56,0.4,1.31,0.61,2.24,0.61 c1.02,0,1.81-0.23,2.37-0.69c0.44-0.34,0.66-0.77,0.66-1.28c0-0.58-0.29-1.03-0.86-1.35c-0.41-0.22-1.5-0.5-3.26-0.83 c-2.64-0.49-4.47-0.94-5.5-1.36c-1.03-0.41-1.89-1.12-2.59-2.1c-0.7-0.99-1.05-2.12-1.05-3.39c0-1.38,0.38-2.58,1.13-3.57 c0.76-1,1.8-1.75,3.14-2.25c1.33-0.49,3.12-0.74,5.36-0.74c2.36,0,4.11,0.19,5.23,0.57c1.13,0.38,2.07,0.98,2.82,1.78 c0.75,0.81,1.38,1.89,1.87,3.27l-7.19,0.73c-0.19-0.67-0.5-1.16-0.93-1.48c-0.59-0.42-1.31-0.63-2.16-0.63 c-0.85,0-1.48,0.16-1.87,0.49c-0.39,0.32-0.59,0.71-0.59,1.17c0,0.52,0.25,0.9,0.74,1.17c0.49,0.27,1.58,0.51,3.24,0.71 c2.53,0.3,4.41,0.73,5.64,1.27c1.23,0.54,2.17,1.31,2.82,2.31c0.66,1,0.98,2.1,0.98,3.3c0,1.21-0.34,2.39-1.04,3.54 c-0.69,1.15-1.78,2.06-3.26,2.74c-1.49,0.68-3.51,1.02-6.08,1.02c-3.62,0-6.2-0.55-7.74-1.65C52.39,60.52,51.4,58.96,50.96,56.94 L50.96,56.94z M90.48,54.56l7.23,0.85c-0.4,1.6-1.05,2.98-1.96,4.15c-0.91,1.17-2.07,2.08-3.49,2.72 c-1.41,0.65-3.21,0.97-5.39,0.97c-2.11,0-3.86-0.21-5.27-0.62c-1.4-0.42-2.6-1.09-3.62-2.02c-1.01-0.92-1.8-2.02-2.37-3.27 c-0.57-1.25-0.86-2.91-0.86-4.98c0-2.16,0.35-3.96,1.05-5.39c0.51-1.06,1.21-2,2.1-2.84c0.89-0.84,1.79-1.46,2.73-1.87 c1.49-0.65,3.39-0.97,5.7-0.97c3.25,0,5.71,0.61,7.42,1.83c1.7,1.23,2.89,3.01,3.58,5.37l-7.15,1.01c-0.22-0.9-0.63-1.57-1.22-2.03 c-0.59-0.45-1.39-0.68-2.39-0.68c-1.26,0-2.28,0.48-3.06,1.43c-0.78,0.96-1.17,2.4-1.17,4.34c0,1.73,0.39,3.03,1.16,3.93 c0.77,0.9,1.75,1.34,2.95,1.34c0.99,0,1.84-0.27,2.51-0.8C89.63,56.49,90.14,55.67,90.48,54.56L90.48,54.56z M4.95,77.41 c0.86,3.22,2.57,6.11,4.86,8.41c3.38,3.39,8.05,5.49,13.19,5.49h76.87c0.21,0,0.41,0,0.62-0.01l1.29-0.09 c4.33-0.44,8.24-2.38,11.19-5.29l0.09-0.1c2.3-2.3,4-5.19,4.86-8.41v-54.4c0-4.96-2.03-9.47-5.31-12.75 c-3.27-3.27-7.79-5.31-12.75-5.31H23.01c-4.96,0-9.48,2.03-12.75,5.3c-3.27,3.27-5.3,7.79-5.3,12.75V77.41L4.95,77.41z"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 2.5 KiB |
@ -10,15 +10,61 @@
|
|||||||
<body>
|
<body>
|
||||||
{% include "templates/navbar.html" %}
|
{% include "templates/navbar.html" %}
|
||||||
<main class="container mx-auto px-4 flex gap-4">
|
<main class="container mx-auto px-4 flex gap-4">
|
||||||
<div class="navigation py-4 h-screen leading-relaxed sticky top-0 text-md overflow-y-auto hidden lg:block rounded-t-xl bg-gradient-to-r from-white to-gray-50"
|
<div class="navigation pb-4 h-screen leading-relaxed sticky top-0 text-md overflow-y-auto hidden lg:block rounded-t-xl bg-gradient-to-r from-white to-gray-50 overflow-x-clip"
|
||||||
style="min-width: 18%">
|
style="min-width: 20%">
|
||||||
|
<div class="w-full sticky top-0 bg-gradient-to-r from-white to-gray-50 z-10">
|
||||||
|
<input id="search"
|
||||||
|
type="search"
|
||||||
|
class="w-4/5 m-4 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"
|
||||||
|
onkeyup="search(this.value);"
|
||||||
|
onsearch="search(this.value);"/>
|
||||||
|
</div>
|
||||||
<a class="link current-nav-link px-4 mb-2 block" href="#building_demos">Building Demos</a>
|
<a class="link current-nav-link px-4 mb-2 block" href="#building_demos">Building Demos</a>
|
||||||
<a class="thin-link px-4 block" href="#interface">Interface</a>
|
<a class="thin-link px-4 block" href="#interface">Interface</a>
|
||||||
|
<div class="sub-links hidden" hash="#interface">
|
||||||
|
{% with obj=find_cls("Interface") %}
|
||||||
|
{% if "fns" in obj and obj["fns"]|length %}
|
||||||
|
{% for fn in obj["fns"] %}
|
||||||
|
<a class="thinner-link px-4 pl-8 block" href="#{{ fn['name'].lower()}}">{{ fn["name"] }}</a>
|
||||||
|
{% endfor %}
|
||||||
|
{% endif %}
|
||||||
|
{% endwith %}
|
||||||
|
</div>
|
||||||
<a class="thin-link px-4 block" href="#flagging">Flagging</a>
|
<a class="thin-link px-4 block" href="#flagging">Flagging</a>
|
||||||
<a class="thin-link px-4 block" href="#combining_interfaces">Combining Interfaces</a>
|
<div class="sub-links hidden" hash="#flagging">
|
||||||
|
{% for flagging_callback in docs["flagging"] %}
|
||||||
|
{% with obj=flagging_callback %}
|
||||||
|
<a class="thinner-link px-4 pl-8 block" href="#{{ obj['name'].lower()}}">{{ obj["name"] }}</a>
|
||||||
|
{% endwith %}
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
<a class="thin-link px-4 block" href="#combining-interfaces">Combining Interfaces</a>
|
||||||
|
<div class="sub-links hidden" hash="#combining-interfaces">
|
||||||
|
<a class="thinner-link px-4 pl-8 block" href="#tabbedinterface">TabbedInterface</a>
|
||||||
|
<a class="thinner-link px-4 pl-8 block" href="#parallel">Parallel</a>
|
||||||
|
<a class="thinner-link px-4 pl-8 block" href="#series">Series</a>
|
||||||
|
</div>
|
||||||
<a class="thin-link px-4 block" href="#blocks">Blocks<sup class="text-orange-500">NEW</sup></a>
|
<a class="thin-link px-4 block" href="#blocks">Blocks<sup class="text-orange-500">NEW</sup></a>
|
||||||
<a class="link px-4 my-2 block" href="#components">Components
|
<div class="sub-links hidden" hash="#blocks">
|
||||||
</h4>
|
{% with obj=find_cls("Blocks") %}
|
||||||
|
{% if "fns" in obj and obj["fns"]|length %}
|
||||||
|
{% for fn in obj["fns"] %}
|
||||||
|
<a class="thinner-link px-4 pl-8 block" href="#{{ fn['name'].lower()}}">{{ fn["name"] }}</a>
|
||||||
|
{% endfor %}
|
||||||
|
{% endif %}
|
||||||
|
{% endwith %}
|
||||||
|
</div>
|
||||||
|
<a class="thin-link px-4 block" href="#block-layouts">Block Layouts</a>
|
||||||
|
<div class="sub-links hidden" hash="#block-layouts">
|
||||||
|
{% for layout in docs["layout"] %}
|
||||||
|
{% with obj=layout %}
|
||||||
|
<a class="thinner-link px-4 pl-8 block" href="#{{ obj['name'].lower()}}">{{ obj["name"] }}</a>
|
||||||
|
{% endwith %}
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
<a class="link px-4 my-2 block" href="#components">Components</a>
|
||||||
{% for component in docs["component"] %}
|
{% for component in docs["component"] %}
|
||||||
<a class="px-4 block thin-link" href="#{{ component['name'].lower() }}">{{ component['name'] }}</a>
|
<a class="px-4 block thin-link" href="#{{ component['name'].lower() }}">{{ component['name'] }}</a>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
@ -61,8 +107,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="combining_interfaces" class="pt-2">
|
<section id="combining-interfaces" class="pt-2">
|
||||||
<h3 class="text-3xl font-light py-4" id="combining-interfaces">Combining Interfaces</h3>
|
<h3 class="text-4xl font-light my-4">Combining Interfaces</h3>
|
||||||
<p class="mt-8 mb-12 text-lg">
|
<p class="mt-8 mb-12 text-lg">
|
||||||
Once you have created several Interfaces, we provide several classes that let you
|
Once you have created several Interfaces, we provide several classes that let you
|
||||||
start combining them together. For example, you can chain them in <em>Series</em>
|
start combining them together. For example, you can chain them in <em>Series</em>
|
||||||
@ -88,7 +134,9 @@
|
|||||||
{% include "docs/obj_doc_template.html" %}
|
{% include "docs/obj_doc_template.html" %}
|
||||||
{% endwith %}
|
{% endwith %}
|
||||||
</div>
|
</div>
|
||||||
<h3 class="text-3xl font-light py-4" id="block-layouts">Block Layouts</h3>
|
</section>
|
||||||
|
<section id="block-layouts" class="pt-2 mb-8">
|
||||||
|
<h3 class="text-3xl font-light my-4">Block Layouts</h3>
|
||||||
<p class="mb-12">Customize the layout of your Blocks UI with the layout classes below.</p>
|
<p class="mb-12">Customize the layout of your Blocks UI with the layout classes below.</p>
|
||||||
<div class="flex flex-col gap-10">
|
<div class="flex flex-col gap-10">
|
||||||
{% for layout in docs["layout"] %}
|
{% for layout in docs["layout"] %}
|
||||||
@ -184,7 +232,6 @@
|
|||||||
let fromTop = window.scrollY;
|
let fromTop = window.scrollY;
|
||||||
mainNavLinks.forEach(link => {
|
mainNavLinks.forEach(link => {
|
||||||
let section = document.querySelector(link.hash);
|
let section = document.querySelector(link.hash);
|
||||||
|
|
||||||
if (
|
if (
|
||||||
section.offsetTop <= fromTop*1.01 &&
|
section.offsetTop <= fromTop*1.01 &&
|
||||||
section.offsetTop + section.offsetHeight > fromTop*1.01
|
section.offsetTop + section.offsetHeight > fromTop*1.01
|
||||||
@ -196,6 +243,73 @@
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
let mainNavSubLinks = document.querySelectorAll(".navigation .sub-links");
|
||||||
|
|
||||||
|
window.addEventListener("scroll", event => {
|
||||||
|
let fromTop = window.scrollY;
|
||||||
|
mainNavSubLinks.forEach(subLinkDiv => {
|
||||||
|
let hash = subLinkDiv.getAttribute('hash');
|
||||||
|
let section = document.querySelector(hash);
|
||||||
|
|
||||||
|
if (
|
||||||
|
section.offsetTop <= fromTop*1.01 &&
|
||||||
|
section.offsetTop + section.offsetHeight > fromTop*1.01
|
||||||
|
) {
|
||||||
|
subLinkDiv.classList.remove("hidden");
|
||||||
|
} else {
|
||||||
|
if (document.querySelector("#search").value.length == 0) {
|
||||||
|
subLinkDiv.classList.add("hidden");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const search = query => {
|
||||||
|
if (query.length > 0) {
|
||||||
|
query = query.toLowerCase();
|
||||||
|
|
||||||
|
mainNavSubLinks.forEach(subLinkDiv => { subLinkDiv.classList.remove("hidden"); })
|
||||||
|
|
||||||
|
var filtered_links = Array.from(mainNavLinks).filter(link => link.hash.toLowerCase().includes(query))
|
||||||
|
filtered_include_parent = Array.from(filtered_links);
|
||||||
|
|
||||||
|
filtered_links.forEach(link => {
|
||||||
|
if (link.parentElement.classList.contains("sub-links")) {
|
||||||
|
let id = link.parentElement.getAttribute('hash');
|
||||||
|
mainNavLinks.forEach(mainLink => {
|
||||||
|
if (mainLink.hash == id) {
|
||||||
|
filtered_include_parent.push(mainLink);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
|
||||||
|
mainNavSubLinks.forEach(subLinkDiv => { subLinkDiv.classList.add("hidden"); })
|
||||||
|
|
||||||
|
var filtered_include_parent = Array.from(mainNavLinks);
|
||||||
|
}
|
||||||
|
|
||||||
|
mainNavLinks.forEach(link => {
|
||||||
|
if (filtered_include_parent.includes(link)) {
|
||||||
|
link.classList.remove("hidden");
|
||||||
|
} else {
|
||||||
|
link.classList.add("hidden");
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('keydown', function (e) {
|
||||||
|
if (e.key.toLowerCase() === 'k' && (e.metaKey || e.ctrlKey)) {
|
||||||
|
e.preventDefault();
|
||||||
|
document.getElementById('search').focus();
|
||||||
|
}
|
||||||
|
if (e.key == 'Escape') {
|
||||||
|
document.getElementById('search').value = '';
|
||||||
|
document.getElementById('search').blur();
|
||||||
|
search('');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
// Remove built-with-gradio footers and extra space from embedded components
|
// Remove built-with-gradio footers and extra space from embedded components
|
||||||
window.addEventListener('load', function () {
|
window.addEventListener('load', function () {
|
||||||
|
|||||||
@ -100,5 +100,6 @@
|
|||||||
</script>
|
</script>
|
||||||
<script>{% include 'templates/links-nav.js' %}</script>
|
<script>{% include 'templates/links-nav.js' %}</script>
|
||||||
<script>{% include 'templates/add_anchors.js' %}</script>
|
<script>{% include 'templates/add_anchors.js' %}</script>
|
||||||
<script>{% include 'templates/add_copy.js' %}</script> </body>
|
<script>{% include 'templates/add_copy.js' %}</script>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -8,6 +8,9 @@
|
|||||||
.thin-link {
|
.thin-link {
|
||||||
@apply hover:text-orange-500 transition-colors;
|
@apply hover:text-orange-500 transition-colors;
|
||||||
}
|
}
|
||||||
|
.thinner-link {
|
||||||
|
@apply hover:text-orange-500 transition-colors;
|
||||||
|
}
|
||||||
|
|
||||||
.group:hover .group-hover\:flex { /* for some reason, group-hover:flex not working on mobile */
|
.group:hover .group-hover\:flex { /* for some reason, group-hover:flex not working on mobile */
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -82,6 +85,9 @@
|
|||||||
.link.current-nav-link {
|
.link.current-nav-link {
|
||||||
@apply border-orange-500 text-orange-500;
|
@apply border-orange-500 text-orange-500;
|
||||||
}
|
}
|
||||||
|
.thinner-link.current-nav-link {
|
||||||
|
@apply border-orange-500 text-orange-500;
|
||||||
|
}
|
||||||
|
|
||||||
/* docs */
|
/* docs */
|
||||||
.selected-demo {
|
.selected-demo {
|
||||||
@ -115,4 +121,11 @@ code.language-python {
|
|||||||
}
|
}
|
||||||
.codeblock:hover > .clipboard-button {
|
.codeblock:hover > .clipboard-button {
|
||||||
@apply opacity-100 duration-200;
|
@apply opacity-100 duration-200;
|
||||||
|
}
|
||||||
|
|
||||||
|
[type="search"]::-webkit-search-cancel-button {
|
||||||
|
@apply appearance-none h-5 w-5;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
background-image: url("assets/img/esc.svg");
|
||||||
|
background-size: 20px 20px;
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue
Block a user