mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-01-24 10:54:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

Anchor tags on all headers (#601)

Browse Source 
* auto id for every header

* added anchor tag

* removing regex for ids

* switched to tailwind

* fixing bad merge
This commit is contained in:
Ali Abdalla 2022-02-15 04:57:42 +04:00 committed by GitHub
parent 01f52bbd38
commit 60a5d85325
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 30 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
website/homepage/render_html.py
View File

@ -151,14 +151,7 @@ def render_guides():
guide_output = guide_output.replace("<pre>", "<div class='code-block' style='display: flex'><pre>")
guide_output = guide_output.replace("</pre>", f"</pre>{copy_button}</div>")
output_html = markdown2.markdown(guide_output, extras=["target-blank-links"])
for match in re.findall(r"<h3>([A-Za-z0-9 ]*)<\/h3>", output_html):
output_html = output_html.replace(
f"<h3>{match}</h3>",
f"<h3 id={match.lower().replace(' ', '_')}>{match}</h3>",
)
output_html = markdown2.markdown(guide_output, extras=["target-blank-links", "header-ids"])
os.makedirs("generated", exist_ok=True)
os.makedirs(os.path.join("generated", guide["name"]), exist_ok=True)
with open(

1
website/homepage/src/assets/img/anchor.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="#808080" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M172.5 131.1C228.1 75.51 320.5 75.51 376.1 131.1C426.1 181.1 433.5 260.8 392.4 318.3L391.3 319.9C381 334.2 361 337.6 346.7 327.3C332.3 317 328.9 297 339.2 282.7L340.3 281.1C363.2 249 359.6 205.1 331.7 177.2C300.3 145.8 249.2 145.8 217.7 177.2L105.5 289.5C73.99 320.1 73.99 372 105.5 403.5C133.3 431.4 177.3 435 209.3 412.1L210.9 410.1C225.3 400.7 245.3 404 255.5 418.4C265.8 432.8 262.5 452.8 248.1 463.1L246.5 464.2C188.1 505.3 110.2 498.7 60.21 448.8C3.741 392.3 3.741 300.7 60.21 244.3L172.5 131.1zM467.5 380C411 436.5 319.5 436.5 263 380C213 330 206.5 251.2 247.6 193.7L248.7 192.1C258.1 177.8 278.1 174.4 293.3 184.7C307.7 194.1 311.1 214.1 300.8 229.3L299.7 230.9C276.8 262.1 280.4 306.9 308.3 334.8C339.7 366.2 390.8 366.2 422.3 334.8L534.5 222.5C566 191 566 139.1 534.5 108.5C506.7 80.63 462.7 76.99 430.7 99.9L429.1 101C414.7 111.3 394.7 107.1 384.5 93.58C374.2 79.2 377.5 59.21 391.9 48.94L393.5 47.82C451 6.731 529.8 13.25 579.8 63.24C636.3 119.7 636.3 211.3 579.8 267.7L467.5 380z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

28
website/homepage/src/guides_template.html
View File

@ -56,6 +56,18 @@
font-weight: 600;
}
.anchor-img {
margin: 0 0 0 5px !important;
}
.anchor {
visibility: hidden;
}
.header:hover .anchor {
visibility: visible;
}
.copy {
padding-right: 1em;
background: #f9fafb;
@ -134,6 +146,22 @@
});
});
});
function createAnchorTag(link) {
let a = document.createElement('a');
a.href = link;
a.classList.add("anchor");
let img = document.createElement('img');
img.classList.add("anchor-img", "w-7", "max-w-full", "inline-block", "mr-0", "ml-1")
img.src = "/assets/img/anchor.svg";
a.appendChild(img);
return a;
}
var headers = document.querySelectorAll("h1, h2, h3, h4, h5, h6");
for (let i = 0; i < headers.length; i++) {
headers[i].classList.add("header");
let link = '#' + headers[i].id;
headers[i].appendChild(createAnchorTag(link))
}
function copyCode(elem) {
var text = elem.parentElement.innerText;