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

Fix Changelog Navbar in Website (#4828)

Browse Source 
* working navbar for changelog

* testing meta tags

* nvm
This commit is contained in:
Ali Abdalla 2023-07-07 19:09:08 +03:00 committed by GitHub
parent 9b56057a98
commit 2883a12c1f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 101 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
js/_website/src/app.html
View File

@ -1,12 +1,15 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

63
js/_website/src/routes/changelog/+page.server.ts
View File

@ -1,7 +1,12 @@
import changelog_json from "./changelog.json";
import { compile } from "mdsvex";
import anchor from "../../assets/img/anchor.svg";
let content = changelog_json.content;
let versions = changelog_json.versions;
import { make_slug_processor } from "../../utils";
import { toString as to_string } from "hast-util-to-string";
import Prism from "prismjs";
import "prismjs/components/prism-python";
import "prismjs/components/prism-bash";
@ -27,17 +32,65 @@ function highlight(code: string, lang: string | undefined) {
const highlighted = _lang
? `<pre class="language-${lang}"><code>${Prism.highlight(
code,
Prism.languages[_lang],
_lang
)}</code></pre>`
code,
Prism.languages[_lang],
_lang
)}</code></pre>`
: code;
return highlighted;
}
export async function load() {
const changelog_slug: object[] = [];
const get_slug = make_slug_processor();
function plugin() {
return function transform(tree: any) {
tree.children.forEach((n: any) => {
if (
n.type === "element" &&
["h1"].includes(n.tagName)
) {
const str_of_heading = to_string(n);
const slug = get_slug(str_of_heading);
changelog_slug.push({
text: str_of_heading,
href: `#${slug}`,
level: parseInt(n.tagName.replace("h", ""))
});
if (!n.children) n.children = [];
n.properties.className = ["group"]
n.properties.id = [slug];
n.children.push({
type: "element",
tagName: "a",
properties: {
href: `#${slug}`,
className: ["invisible", "group-hover-visible"],
},
children: [
{
type: "element",
tagName: "img",
properties: {
src: anchor,
className: ["anchor-img"]
},
children: []
}
]
});
}
});
};
}
const compiled = await compile(content, {
rehypePlugins: [plugin],
highlight: {
highlighter: highlight
}
@ -46,6 +99,6 @@ export async function load() {
return {
content,
versions
changelog_slug
};
}

38
js/_website/src/routes/changelog/+page.svelte
View File

@ -1,10 +1,27 @@
<script lang="ts">
import MetaTags from "../../components/MetaTags.svelte";
export let data;
export let data: {
content: any;
changelog_slug: {
text: string;
href: string;
}[];
};
let content = data.content;
let versions = data.versions;
let slugs = data.changelog_slug;
function handleAnchorClick(event: MouseEvent) {
event.preventDefault();
const link = event.currentTarget as HTMLAnchorElement;
const anchorId = new URL(link.href).hash.replace("#", "");
const anchor = document.getElementById(anchorId);
window.scrollTo({
top: anchor?.offsetTop,
behavior: "smooth",
});
}
</script>
<MetaTags
@ -25,12 +42,17 @@
>
Version History
</div>
{#each versions as version}
<a
class="guide-link pb-1 -indent-2 ml-2 thin-link px-4 block overflow-hidden"
style="max-width: 12rem">{version[0]}</a
>
{/each}
<div
class="navigation max-w-full bg-gradient-to-r from-orange-50 to-orange-100 p-2 mx-2 border-l-2 border-orange-500 mb-2"
>
{#each slugs as heading}
<a
class="subheading block thin-link -indent-2 ml-4 mr-2"
href={heading.href}
on:click={handleAnchorClick}>{heading.text.replace("Version ", "")}</a
>
{/each}
</div>
</div>
<div class="w-full">
<div class="prose text-lg max-w-full">{@html content}</div>