fix(website): rehype shiki lazy load

This commit is contained in:
LukaDev 2024-10-12 23:22:46 +02:00
parent 119eef3f10
commit fc0e9f96cd
3 changed files with 22 additions and 24 deletions

Binary file not shown.

View file

@ -12,34 +12,34 @@
"format": "prettier --write ." "format": "prettier --write ."
}, },
"devDependencies": { "devDependencies": {
"@sveltejs/adapter-vercel": "^5.4.4", "@sveltejs/adapter-vercel": "^5.4.5",
"@sveltejs/kit": "^2.6.1", "@sveltejs/kit": "^2.7.0",
"@sveltejs/vite-plugin-svelte": "^4.0.0-next.7", "@sveltejs/vite-plugin-svelte": "^4.0.0-next.8",
"@tailwindcss/typography": "^0.5.15", "@tailwindcss/typography": "^0.5.15",
"@types/eslint": "^9.6.1", "@types/eslint": "^9.6.1",
"@types/gunzip-maybe": "^1.4.2", "@types/gunzip-maybe": "^1.4.2",
"@types/tar-stream": "^3.1.3", "@types/tar-stream": "^3.1.3",
"autoprefixer": "^10.4.20", "autoprefixer": "^10.4.20",
"eslint": "^9.11.1", "eslint": "^9.12.0",
"eslint-config-prettier": "^9.1.0", "eslint-config-prettier": "^9.1.0",
"eslint-plugin-svelte": "^2.44.1", "eslint-plugin-svelte": "^2.44.1",
"globals": "^15.9.0", "globals": "^15.11.0",
"mdsvex": "^0.12.3", "mdsvex": "^0.12.3",
"prettier": "^3.3.3", "prettier": "^3.3.3",
"prettier-plugin-svelte": "^3.2.7", "prettier-plugin-svelte": "^3.2.7",
"prettier-plugin-tailwindcss": "^0.6.8", "prettier-plugin-tailwindcss": "^0.6.8",
"svelte": "^5.0.0-next.260", "svelte": "^5.0.0-next.264",
"svelte-check": "^4.0.4", "svelte-check": "^4.0.5",
"tailwindcss": "^3.4.13", "tailwindcss": "^3.4.13",
"typescript": "^5.6.2", "typescript": "^5.6.3",
"typescript-eslint": "^8.7.0", "typescript-eslint": "^8.8.1",
"vite": "^5.4.8" "vite": "^5.4.8"
}, },
"type": "module", "type": "module",
"dependencies": { "dependencies": {
"@fontsource-variable/nunito-sans": "^5.1.0", "@fontsource-variable/nunito-sans": "^5.1.0",
"@shikijs/rehype": "^1.21.0", "@shikijs/rehype": "^1.22.0",
"bits-ui": "^0.21.15", "bits-ui": "^0.21.16",
"date-fns": "^4.1.0", "date-fns": "^4.1.0",
"gunzip-maybe": "^1.4.2", "gunzip-maybe": "^1.4.2",
"lucide-svelte": "^0.446.0", "lucide-svelte": "^0.446.0",
@ -50,7 +50,7 @@
"remark-gfm": "^4.0.0", "remark-gfm": "^4.0.0",
"remark-parse": "^11.0.0", "remark-parse": "^11.0.0",
"remark-rehype": "^11.1.1", "remark-rehype": "^11.1.1",
"shiki": "^1.21.0", "shiki": "^1.22.0",
"tar-stream": "^3.1.7", "tar-stream": "^3.1.7",
"unified": "^11.0.5" "unified": "^11.0.5"
} }

View file

@ -41,9 +41,7 @@ export const load: PageLoad = async ({ parent, fetch }) => {
const { pkg } = await parent() const { pkg } = await parent()
const { name, version, targets } = pkg const { name, version, targets } = pkg
console.log("fetching readme")
const readmeText = await fetchReadme(fetch, name, version, targets[0].kind) const readmeText = await fetchReadme(fetch, name, version, targets[0].kind)
console.log(readmeText)
const file = await unified() const file = await unified()
.use(remarkParse) .use(remarkParse)
@ -52,20 +50,20 @@ export const load: PageLoad = async ({ parent, fetch }) => {
.use(remarkRehype, { allowDangerousHtml: true }) .use(remarkRehype, { allowDangerousHtml: true })
.use(rehypeRaw) .use(rehypeRaw)
.use(rehypeSanitize) .use(rehypeSanitize)
// .use(rehypeShiki, { .use(rehypeShiki, {
// theme: createCssVariablesTheme({ theme: createCssVariablesTheme({
// name: "css-variables", name: "css-variables",
// variablePrefix: "--shiki-", variablePrefix: "--shiki-",
// variableDefaults: {}, variableDefaults: {},
// fontStyle: true, fontStyle: true,
// }), }),
// fallbackLanguage: "text", lazy: true,
// }) fallbackLanguage: "text",
})
.use(rehypeStringify) .use(rehypeStringify)
.process(readmeText) .process(readmeText)
const readmeHtml = file.value const readmeHtml = file.value
console.log(readmeHtml)
return { return {
readmeHtml, readmeHtml,