mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-03-31 12:20:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

Website Refactoring and Styling (#1847)

Browse Source 
* remove params from blocks signature

* refactor copy and anchor js

* fix anchor spacing for headers
This commit is contained in:
Ali Abdalla 2022-07-27 19:30:15 +01:00 committed by GitHub
parent a12ac35b2a
commit 96a8bfcb02
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 86 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
website/homepage/postcss.config.js
View File

@ -10,7 +10,10 @@ module.exports = {
preset: 'default'
}),
purgecss({
content: ['./src/**/*.html'],
content: [
'./src/**/*.html',
'./src/**/*.js'
],
defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
}),
postcss_hash({

43
website/homepage/src/assets/add_anchors.js Normal file
View File

@ -0,0 +1,43 @@
// adds anchor button when hovering over headers, except on touch devices where instead the header becomes a link
function createAnchorTag(link) {
let a = document.createElement('a');
a.href = link;
a.classList.add("invisible", "group-hover-visible");
let img = document.createElement('img');
img.classList.add("anchor-img")
img.src = "/assets/img/anchor.svg";
a.appendChild(img);
return a;
}
function createMobileAnchorTag(link) {
let a = document.createElement('a');
a.href = link;
a.classList.add("no-underline")
return a;
}
var headers = document.querySelectorAll("h2, h3");
function isTouchDevice() {
return (('ontouchstart' in window) ||
(navigator.maxTouchPoints > 0) ||
(navigator.msMaxTouchPoints > 0));
}
if (isTouchDevice()) {
for (let i = 0; i < headers.length; i++) {
let link = '#' + headers[i].id;
var parent = headers[i].parentNode;
var wrapper = createMobileAnchorTag(link);
parent.replaceChild(wrapper, headers[i]);
wrapper.appendChild(headers[i]);
}
} else {
for (let i = 0; i < headers.length; i++) {
headers[i].classList.add("group")
let link = '#' + headers[i].id;
var anchorTag = createAnchorTag(link);
headers[i].appendChild(createAnchorTag(link));
}
}

32
website/homepage/src/assets/add_copy.js Normal file
View File

@ -0,0 +1,32 @@
// add copy buttons to all codeblocks
const svgCopy =
'<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path fill-rule="evenodd" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path><path fill-rule="evenodd" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"></path></svg>';
const svgCheck =
'<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path fill-rule="evenodd" fill="rgb(255, 124, 1)" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>';
const addCopyButtons = (clipboard) => {
document.querySelectorAll("pre > code").forEach((codeBlock) => {
const button = document.createElement("button");
button.classList.add("clipboard-button");
button.type = "button";
button.innerHTML = svgCopy;
button.addEventListener("click", () => {
clipboard.writeText(codeBlock.innerText).then(
() => {
button.blur();
button.innerHTML = svgCheck;
setTimeout(() => (button.innerHTML = svgCopy), 2000);
},
(error) => (button.innerHTML = "Error")
);
});
const pre = codeBlock.parentNode;
pre.parentNode.insertBefore(button, pre);
});
};
if (navigator && navigator.clipboard) {
addCopyButtons(navigator.clipboard);
};

2
website/homepage/src/docs/obj_doc_template.html
View File

@ -23,7 +23,7 @@
{% endif %}
<div class="flex flex-row items-center justify-between">
<h3 id="{{ obj['name'].lower() }}-header"
class="text-3xl font-light my-4">{{ obj['name'] }}</h3>
class="text-3xl font-light py-4">{{ obj['name'] }}</h3>
{% if obj['demos'] %}
<button
class="h-2/4 rounded-full bg-orange-500 hover:bg-orange-400 transition-colors text-white py-1 px-3 my-3 mx-2 ml-auto"

85
website/homepage/src/docs/template.html
View File

@ -71,7 +71,7 @@
</section>
<section id="combining_interfaces" class="pt-2">
<h3 class="text-4xl font-light my-4" id="combining-interfaces">Combining Interfaces</h3>
<h3 class="text-3xl font-light py-4" id="combining-interfaces">Combining Interfaces</h3>
<p class="mt-8 mb-12 text-lg">
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>
@ -97,7 +97,7 @@
{% include "docs/obj_doc_template.html" %}
{% endwith %}
</div>
<h3 class="text-3xl font-light my-4" id="block-layouts">Block Layouts</h3>
<h3 class="text-3xl font-light py-4" id="block-layouts">Block Layouts</h3>
<p class="mb-12">Customize the layout of your Blocks UI with the layout classes below.</p>
<div class="flex flex-col gap-10">
{% for layout in docs["layout"] %}
@ -164,6 +164,8 @@
window.__gradio_mode__ = "website";
</script>
<script type="module" src="/assets/index.js"></script>
<script src="/assets/add_anchors.js"></script>
<script src="/assets/add_copy.js"></script>
{% include 'templates/footer.html' %}
<script>
const show_demo = (component, demo) => {
@ -195,50 +197,6 @@
});
});
// adds anchor button when hovering over headers, except on touch devices where instead the header becomes a link
function createAnchorTag(link) {
let a = document.createElement('a');
a.href = link;
a.classList.add("invisible", "group-hover-visible");
let img = document.createElement('img');
img.classList.add("anchor-img")
img.src = "/assets/img/anchor.svg";
a.appendChild(img);
return a;
}
function createMobileAnchorTag(link) {
let a = document.createElement('a');
a.href = link;
a.classList.add("no-underline")
return a;
}
var headers = document.querySelectorAll("h2, h3");
function isTouchDevice() {
return (('ontouchstart' in window) ||
(navigator.maxTouchPoints > 0) ||
(navigator.msMaxTouchPoints > 0));
}
if (isTouchDevice()) {
for (let i = 0; i < headers.length; i++) {
let link = '#' + headers[i].id;
var parent = headers[i].parentNode;
var wrapper = createMobileAnchorTag(link);
parent.replaceChild(wrapper, headers[i]);
wrapper.appendChild(headers[i]);
}
} else {
for (let i = 0; i < headers.length; i++) {
headers[i].classList.add("group")
let link = '#' + headers[i].id;
var anchorTag = createAnchorTag(link);
headers[i].appendChild(createAnchorTag(link));
}
}
const COLOR_SETS = [
["from-green-100", "to-green-50"],
["from-yellow-100", "to-yellow-50"],
@ -253,41 +211,6 @@
guide.classList.add(end_color);
})
// add copy buttons to all codeblocks
const svgCopy =
'<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path fill-rule="evenodd" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path><path fill-rule="evenodd" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"></path></svg>';
const svgCheck =
'<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path fill-rule="evenodd" fill="rgb(255, 124, 1)" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>';
const addCopyButtons = (clipboard) => {
document.querySelectorAll("pre > code").forEach((codeBlock) => {
const button = document.createElement("button");
button.classList.add("clipboard-button");
button.type = "button";
button.innerHTML = svgCopy;
button.addEventListener("click", () => {
clipboard.writeText(codeBlock.innerText).then(
() => {
button.blur();
button.innerHTML = svgCheck;
setTimeout(() => (button.innerHTML = svgCopy), 2000);
},
(error) => (button.innerHTML = "Error")
);
});
const pre = codeBlock.parentNode;
pre.parentNode.insertBefore(button, pre);
});
};
if (navigator && navigator.clipboard) {
addCopyButtons(navigator.clipboard);
};
// Remove built-with-gradio footers and extra space from embedded components
window.addEventListener('load', function () {
document.querySelectorAll('.embedded-component gradio-app').forEach(g => {

81
website/homepage/src/guides/template.html
View File

@ -33,52 +33,10 @@
window.__gradio_mode__ = "website";
</script>
<script type="module" src="/assets/index.js"></script>
<script src="/assets/add_anchors.js"></script>
<script src="/assets/add_copy.js"></script>
{% include 'templates/footer.html' %}
<script>
// adds anchor button when hovering over headers, except on touch devices where instead the header becomes a link
function createAnchorTag(link) {
let a = document.createElement('a');
a.href = link;
a.classList.add("invisible", "group-hover-visible");
let img = document.createElement('img');
img.classList.add("anchor-img")
img.src = "/assets/img/anchor.svg";
a.appendChild(img);
return a;
}
function createMobileAnchorTag(link) {
let a = document.createElement('a');
a.href = link;
a.classList.add("no-underline")
return a;
}
var headers = document.querySelectorAll("h2, h3");
function isTouchDevice() {
return (('ontouchstart' in window) ||
(navigator.maxTouchPoints > 0) ||
(navigator.msMaxTouchPoints > 0));
}
if (isTouchDevice()) {
for (let i = 0; i < headers.length; i++) {
let link = '#' + headers[i].id;
var parent = headers[i].parentNode;
var wrapper = createMobileAnchorTag(link);
parent.replaceChild(wrapper, headers[i]);
wrapper.appendChild(headers[i]);
}
} else {
for (let i = 0; i < headers.length; i++) {
headers[i].classList.add("group")
let link = '#' + headers[i].id;
var anchorTag = createAnchorTag(link);
headers[i].appendChild(createAnchorTag(link));
}
}
// color related spaces
const COLORS = ["bg-green-50", "bg-yellow-50", "bg-red-50", "bg-pink-50", "bg-purple-50"];
@ -87,41 +45,6 @@
const color = COLORS[Math.floor(Math.random() * COLORS.length)]
guide.classList.add(color);
})
// add copy buttons to all codeblocks
const svgCopy =
'<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path fill-rule="evenodd" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path><path fill-rule="evenodd" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"></path></svg>';
const svgCheck =
'<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path fill-rule="evenodd" fill="rgb(255, 124, 1)" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>';
const addCopyButtons = (clipboard) => {
document.querySelectorAll("pre > code").forEach((codeBlock) => {
const button = document.createElement("button");
button.classList.add("clipboard-button");
button.type = "button";
button.innerHTML = svgCopy;
button.addEventListener("click", () => {
clipboard.writeText(codeBlock.innerText).then(
() => {
button.blur();
button.innerHTML = svgCheck;
setTimeout(() => (button.innerHTML = svgCopy), 2000);
},
(error) => (button.innerHTML = "Error")
);
});
const pre = codeBlock.parentNode;
pre.parentNode.insertBefore(button, pre);
});
};
if (navigator && navigator.clipboard) {
addCopyButtons(navigator.clipboard);
};
</script>
</body>
</html>