From 4637b496c9fceb52c3c4a59f403bc6546057c804 Mon Sep 17 00:00:00 2001 From: ncpa0cpl <32438334+ncpa0cpl@users.noreply.github.com> Date: Fri, 9 Aug 2024 13:57:55 +0200 Subject: [PATCH] feat: optimizations and improvements --- .zed/settings.json | 50 +++++++++++++ package.json | 3 +- scripts/build.cjs | 6 +- scripts/tmpl-builder.cjs | 11 +-- src/assets/noto-sans.css | 29 ++++++++ src/components/code-sample.client.ts | 18 ++++- src/components/example.tsx | 12 +++- src/components/font-size-selector.tsx | 4 -- src/components/navbar.tsx | 6 +- src/components/theme-switcher.tsx | 11 +-- src/htmx.ts | 79 ++++++++++++++++++++- src/index.client.ts | 6 ++ src/index.css | 7 ++ src/layout.tsx | 58 +++++++--------- src/script.tsx | 2 + src/style.tsx | 52 ++++++++------ src/templates/example-page/alert.tsx | 9 ++- src/templates/example-page/box.tsx | 8 +-- src/templates/example-page/breadcrumbs.tsx | 4 ++ src/templates/example-page/button.tsx | 4 ++ src/templates/example-page/card.tsx | 9 ++- src/templates/example-page/checkbox.tsx | 9 ++- src/templates/example-page/dialog.tsx | 9 ++- src/templates/example-page/frame.tsx | 9 ++- src/templates/example-page/input.tsx | 10 +-- src/templates/example-page/linked.tsx | 9 ++- src/templates/example-page/list.tsx | 9 ++- src/templates/example-page/message.tsx | 9 ++- src/templates/example-page/nav-sidebar.tsx | 9 ++- src/templates/example-page/scrollview.tsx | 9 ++- src/templates/example-page/selector.tsx | 24 +++---- src/templates/example-page/separator.tsx | 25 +++++-- src/templates/example-page/skeleton.tsx | 4 ++ src/templates/example-page/slider.tsx | 12 ++-- src/templates/example-page/spinner.tsx | 9 ++- src/templates/example-page/switch.tsx | 9 +-- src/templates/example-page/typography.tsx | 25 ++++--- yarn.lock | 81 ++++++++++++++++++++-- 38 files changed, 503 insertions(+), 156 deletions(-) create mode 100644 .zed/settings.json create mode 100644 src/assets/noto-sans.css create mode 100644 src/index.client.ts diff --git a/.zed/settings.json b/.zed/settings.json new file mode 100644 index 0000000..7843f1f --- /dev/null +++ b/.zed/settings.json @@ -0,0 +1,50 @@ +{ + "languages": { + "JavaScript": { + "language_servers": ["!eslint", "vtsls"], + "format_on_save": { + "external": { + "command": "yarn", + "arguments": ["--silent", "dprint", "fmt", "--stdin", "{buffer_path}"] + } + } + }, + "TypeScript": { + "language_servers": ["!eslint", "vtsls"], + "format_on_save": { + "external": { + "command": "yarn", + "arguments": ["--silent", "dprint", "fmt", "--stdin", "{buffer_path}"] + } + } + }, + "TSX": { + "language_servers": ["!eslint", "vtsls"], + "format_on_save": { + "external": { + "command": "yarn", + "arguments": ["--silent", "dprint", "fmt", "--stdin", "{buffer_path}"] + } + } + }, + "CSS": { + "format_on_save": { + "external": { + "command": "yarn", + "arguments": ["--silent", "dprint", "fmt", "--stdin", "{buffer_path}"] + } + } + }, + "JSON": { + "format_on_save": { + "external": { + "command": "yarn", + "arguments": ["--silent", "dprint", "fmt", "--stdin", "{buffer_path}"] + } + } + } + }, + "lsp": { + "eslint": {} + } +} diff --git a/package.json b/package.json index 400ffce..4e4ca75 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "esbuild": "^0.21.4", "htmx.org": "^1.9.12", "jsxte": "3.3.1", + "lightningcss": "^1.26.0", "node-os-walk": "^1.0.2", "prettier": "^3.3.1", "rimraf": "^5.0.5", @@ -38,7 +39,7 @@ "workbox-strategies": "^7.1.0" }, "dependencies": { - "adwavecss": "0.1.0", + "adwavecss": "0.1.1", "adwaveui": "0.0.11", "dedent": "^1.5.3", "highlight.js": "^11.10.0" diff --git a/scripts/build.cjs b/scripts/build.cjs index 8c3b21c..da5d36e 100644 --- a/scripts/build.cjs +++ b/scripts/build.cjs @@ -106,9 +106,9 @@ build() if (ev === "addDir") return; if ( - fPath.includes("src/assets") && - !fPath.includes("src/assets/js") && - !fPath.includes("src/assets/css") + fPath.includes("src/assets") + && !fPath.includes("src/assets/js") + && !fPath.includes("src/assets/css") ) { console.log( `Asset changed, copying (${path.relative(p("."), fPath)})`, diff --git a/scripts/tmpl-builder.cjs b/scripts/tmpl-builder.cjs index 9fb14c6..e25a6df 100644 --- a/scripts/tmpl-builder.cjs +++ b/scripts/tmpl-builder.cjs @@ -49,7 +49,7 @@ module.exports.buildTemplate = async function buildTemplate( minify: !IS_DEV, write: false, sourcemap: IS_DEV ? "inline" : false, - external: ["jsxte", "esbuild", "scripts", "prettier"], + external: ["jsxte", "esbuild", "scripts", "prettier", "lightningcss"], platform: "node", plugins: [plugin(srcDir, outDir)], alias: { @@ -70,10 +70,11 @@ module.exports.buildTemplate = async function buildTemplate( /** @type {{ contents: string; outFile: string }[]} */ const registeredExtFiles = []; const registerExternalFile = (contents, name, type) => { - const hashedName = createHash(`${name}_${contents}`, 8); + const presentationName = name.split(".")[0]; + const hash = createHash(`${name}_${contents}`, 8); switch (type) { case "css": { - const fPath = `/assets/css/${hashedName}.css`; + const fPath = `/assets/css/${presentationName}_${hash}.css`; registeredExtFiles.push({ contents, outFile: path.join(outDir, fPath), @@ -81,7 +82,7 @@ module.exports.buildTemplate = async function buildTemplate( return fPath; } case "js": { - const fPath = `/assets/js/${hashedName}.js`; + const fPath = `/assets/js/${presentationName}_${hash}.js`; registeredExtFiles.push({ contents, outFile: path.join(outDir, fPath), @@ -115,7 +116,7 @@ module.exports.buildTemplate = async function buildTemplate( // make sure directory exists await fs.promises.mkdir(baseDir, { recursive: true }); - await fs.promises.writeFile(htmlOutFile, html, "utf8"); + await fs.promises.writeFile(htmlOutFile, `\n${html}`, "utf8"); await Promise.all( registeredExtFiles.map(({ contents, outFile }) => { diff --git a/src/assets/noto-sans.css b/src/assets/noto-sans.css new file mode 100644 index 0000000..0e81e83 --- /dev/null +++ b/src/assets/noto-sans.css @@ -0,0 +1,29 @@ +@font-face { + font-family: 'Noto Sans'; + font-style: normal; + font-weight: 400; + font-stretch: normal; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosans/v36/o-0mIpQlx3QUlC5A4PNB6Ryti20_6n1iPHjcz6L1SoM-jCpoiyD9A99d.ttf) format('truetype'); +} +@font-face { + font-family: 'Ubuntu'; + font-style: italic; + font-weight: 500; + font-display: swap; + src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCp6KVjbNBYlgoKejYHtGyI.ttf) format('truetype'); +} +@font-face { + font-family: 'Ubuntu'; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoC1CzTtw.ttf) format('truetype'); +} +@font-face { + font-family: 'Ubuntu'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCxCvTtw.ttf) format('truetype'); +} diff --git a/src/components/code-sample.client.ts b/src/components/code-sample.client.ts index 56c8fda..10ba696 100644 --- a/src/components/code-sample.client.ts +++ b/src/components/code-sample.client.ts @@ -7,18 +7,30 @@ declare global { } class CodeSample extends HTMLDivElement { - connectedCallback() { + static registerLanguages = () => { HighlightJS.registerLanguage("html", getXmlLanguage); HighlightJS.registerLanguage("css", getCssLanguage); + this.registerLanguages = () => {}; + }; + + private highlight() { + const codeElem = this.querySelector("code"); + if (codeElem!.dataset["highlighted"] !== "yes") { + HighlightJS.highlightElement(codeElem!); + } + } + + connectedCallback() { + CodeSample.registerLanguages(); let codeElem = this.getCodeElement(); if (codeElem) { - HighlightJS.highlightElement(this.querySelector("code")!); + this.highlight(); } else { const interval = setInterval(() => { codeElem = this.getCodeElement(); if (codeElem) { - HighlightJS.highlightElement(this.querySelector("code")!); + this.highlight(); clearInterval(interval); } }, 10); diff --git a/src/components/example.tsx b/src/components/example.tsx index 3b09f58..7c53b83 100644 --- a/src/components/example.tsx +++ b/src/components/example.tsx @@ -44,8 +44,16 @@ export function ExampleSection( navigator.clipboard.writeText(href.toString()); `} > - - + {`Copy + {`Copy {label} diff --git a/src/components/font-size-selector.tsx b/src/components/font-size-selector.tsx index 1393650..671a3f3 100644 --- a/src/components/font-size-selector.tsx +++ b/src/components/font-size-selector.tsx @@ -32,10 +32,6 @@ export const FontSizeSelector = () => { + - )} ); } + +function PreloadFont(props: { link: string }) { + return ( + <> + + + ); +} diff --git a/src/script.tsx b/src/script.tsx index 504f63a..55f412b 100644 --- a/src/script.tsx +++ b/src/script.tsx @@ -66,6 +66,7 @@ type ScriptPropsBase = { type?: "module" | "iife" | "global"; onLoad?: (contents: string) => string | undefined; buildOptions?: esbuild.BuildOptions; + defer?: boolean; }; export type ScriptProps = @@ -143,6 +144,7 @@ export const Script = async (