From: Mark Otto Date: Thu, 11 Dec 2025 22:10:51 +0000 (-0800) Subject: Docs design updates (#41918) X-Git-Url: http://git.ipfire.org/gitweb/index.cgi?a=commitdiff_plain;h=1e6b534ff8946dccedd2c22eb25d2c8d5264be4d;p=thirdparty%2Fbootstrap.git Docs design updates (#41918) * Refactor docs site styling and Shiki integration Code Highlighting: - Enhance Code.astro with Shiki transformers and Bootstrap theme - Add tab support for multi-language code examples - Add toolbar with language labels and copy button - Support diff highlighting via @shikijs/transformers Components: - Update Example.astro styling and structure - Refine DocsSidebar.astro layout - Update Navigation, Versions, and GetStarted components - Update ThemeToggler.astro - Minor updates to ReferenceTable, Swatch components Site SCSS: - Restyle code snippets and examples (_component-examples.scss) - Update syntax highlighting styles (_syntax.scss) - Refine sidebar styling (_sidebar.scss) - Update search component styles (_search.scss) - Update navbar styles (_navbar.scss) - Refresh callouts, clipboard, content styles Config & Assets: - Update astro.config.ts for Shiki - Add sticky.js partial - Update application.js - Update guide screenshots (parcel, vite, webpack) * fixes * update images * update permissions * Optimised images with calibre/image-actions --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- diff --git a/.github/workflows/calibreapp-image-actions.yml b/.github/workflows/calibreapp-image-actions.yml index 0f56922d39..8c882c1a04 100644 --- a/.github/workflows/calibreapp-image-actions.yml +++ b/.github/workflows/calibreapp-image-actions.yml @@ -18,7 +18,8 @@ jobs: name: calibreapp/image-actions runs-on: ubuntu-latest permissions: - # allow calibreapp/image-actions to update PRs + # allow calibreapp/image-actions to update PRs and commit compressed images + contents: write pull-requests: write steps: - name: Clone repository diff --git a/package-lock.json b/package-lock.json index 5b0496bdcb..2aac59b79e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -33,6 +33,7 @@ "@rollup/plugin-commonjs": "^29.0.0", "@rollup/plugin-node-resolve": "^16.0.3", "@rollup/plugin-replace": "^6.0.3", + "@shikijs/transformers": "^3.7.0", "@stackblitz/sdk": "^1.11.0", "@types/js-yaml": "^4.0.9", "@types/mime": "^4.0.0", @@ -40,6 +41,7 @@ "astro": "^5.16.6", "astro-auto-import": "^0.4.5", "autoprefixer": "^10.4.23", + "bootstrap-vscode-theme": "^0.0.9", "bundlewatch": "^0.4.1", "clean-css-cli": "^5.6.3", "clipboard": "^2.0.11", @@ -3288,6 +3290,41 @@ "@shikijs/types": "3.20.0" } }, + "node_modules/@shikijs/transformers": { + "version": "3.21.0", + "resolved": "https://registry.npmjs.org/@shikijs/transformers/-/transformers-3.21.0.tgz", + "integrity": "sha512-CZwvCWWIiRRiFk9/JKzdEooakAP8mQDtBOQ1TKiCaS2E1bYtyBCOkUzS8akO34/7ufICQ29oeSfkb3tT5KtrhA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@shikijs/core": "3.21.0", + "@shikijs/types": "3.21.0" + } + }, + "node_modules/@shikijs/transformers/node_modules/@shikijs/core": { + "version": "3.21.0", + "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-3.21.0.tgz", + "integrity": "sha512-AXSQu/2n1UIQekY8euBJlvFYZIw0PHY63jUzGbrOma4wPxzznJXTXkri+QcHeBNaFxiiOljKxxJkVSoB3PjbyA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@shikijs/types": "3.21.0", + "@shikijs/vscode-textmate": "^10.0.2", + "@types/hast": "^3.0.4", + "hast-util-to-html": "^9.0.5" + } + }, + "node_modules/@shikijs/transformers/node_modules/@shikijs/types": { + "version": "3.21.0", + "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-3.21.0.tgz", + "integrity": "sha512-zGrWOxZ0/+0ovPY7PvBU2gIS9tmhSUUt30jAcNV0Bq0gb2S98gwfjIs1vxlmH5zM7/4YxLamT6ChlqqAJmPPjA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@shikijs/vscode-textmate": "^10.0.2", + "@types/hast": "^3.0.4" + } + }, "node_modules/@shikijs/types": { "version": "3.20.0", "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-3.20.0.tgz", @@ -4550,6 +4587,16 @@ "dev": true, "license": "ISC" }, + "node_modules/bootstrap-vscode-theme": { + "version": "0.0.9", + "resolved": "https://registry.npmjs.org/bootstrap-vscode-theme/-/bootstrap-vscode-theme-0.0.9.tgz", + "integrity": "sha512-++aMildSGVaDS7qD59FEh4Fh6bJol4Gpo7u3rbEPqcuReRY7zOvLn77sBoK9zhVe+YT7bkPiDut47jErweChdw==", + "dev": true, + "license": "MIT", + "engines": { + "vscode": "^1.0.0" + } + }, "node_modules/boxen": { "version": "8.0.1", "resolved": "https://registry.npmjs.org/boxen/-/boxen-8.0.1.tgz", diff --git a/package.json b/package.json index d96f6a945c..ecf67fc286 100644 --- a/package.json +++ b/package.json @@ -119,6 +119,7 @@ "@rollup/plugin-commonjs": "^29.0.0", "@rollup/plugin-node-resolve": "^16.0.3", "@rollup/plugin-replace": "^6.0.3", + "@shikijs/transformers": "^3.7.0", "@stackblitz/sdk": "^1.11.0", "@types/js-yaml": "^4.0.9", "@types/mime": "^4.0.0", @@ -126,6 +127,7 @@ "astro": "^5.16.6", "astro-auto-import": "^0.4.5", "autoprefixer": "^10.4.23", + "bootstrap-vscode-theme": "^0.0.9", "bundlewatch": "^0.4.1", "clean-css-cli": "^5.6.3", "clipboard": "^2.0.11", diff --git a/site/astro.config.ts b/site/astro.config.ts index de9a1433bb..d5f3cbdc91 100644 --- a/site/astro.config.ts +++ b/site/astro.config.ts @@ -1,4 +1,7 @@ import { defineConfig } from 'astro/config' +import bootstrapLight from 'bootstrap-vscode-theme/themes/bootstrap-light.json' +import bootstrapDark from 'bootstrap-vscode-theme/themes/bootstrap-dark.json' +import { transformerNotationDiff } from '@shikijs/transformers' import { bootstrap } from './src/libs/astro' import { getConfig } from './src/libs/config' @@ -27,9 +30,22 @@ export default defineConfig({ syntaxHighlight: 'shiki', shikiConfig: { themes: { - light: 'github-light', - dark: 'github-dark' - } + light: bootstrapLight, + dark: bootstrapDark + }, + transformers: [ + transformerNotationDiff(), + { + name: 'add-language-attribute', + pre(node) { + // Add data-language attribute to pre tag so Code component can access it + const lang = this.options.lang + if (lang) { + node.properties['dataLanguage'] = lang + } + } + } + ] } }, site, diff --git a/site/src/assets/application.js b/site/src/assets/application.js index 62f5f88b34..c9fce7fad6 100644 --- a/site/src/assets/application.js +++ b/site/src/assets/application.js @@ -11,6 +11,8 @@ import sidebarScroll from './partials/sidebar.js' import snippets from './partials/snippets.js' +import stickyNav from './partials/sticky.js' sidebarScroll() snippets() +stickyNav() diff --git a/site/src/assets/partials/sticky.js b/site/src/assets/partials/sticky.js new file mode 100644 index 0000000000..8d803fb806 --- /dev/null +++ b/site/src/assets/partials/sticky.js @@ -0,0 +1,28 @@ +// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT +// IT'S ALL JUST JUNK FOR OUR DOCS! +// ++++++++++++++++++++++++++++++++++++++++++ + +/* + * JavaScript for Bootstrap's docs (https://getbootstrap.com/) + * Copyright 2011-2025 The Bootstrap Authors + * Licensed under the Creative Commons Attribution 3.0 Unported License. + * For details, see https://creativecommons.org/licenses/by/3.0/. + */ + +export default () => { + const navbar = document.querySelector('.bd-sticky-navbar') + + if (!navbar) { + return + } + + const handleScroll = () => { + navbar.classList.toggle('is-stuck', window.scrollY > 0) + } + + // Check initial state + handleScroll() + + // Update on scroll + window.addEventListener('scroll', handleScroll, { passive: true }) +} diff --git a/site/src/components/DocsSidebar.astro b/site/src/components/DocsSidebar.astro index 2bc4d3f411..cfb6c336ff 100644 --- a/site/src/components/DocsSidebar.astro +++ b/site/src/components/DocsSidebar.astro @@ -91,7 +91,7 @@ const sidebar = getData('sidebar')
  • {item.title} @@ -111,7 +111,7 @@ const sidebar = getData('sidebar')
  • {group.title} diff --git a/site/src/components/ReferenceTable.astro b/site/src/components/ReferenceTable.astro index c98d1528ad..ff9b33838b 100644 --- a/site/src/components/ReferenceTable.astro +++ b/site/src/components/ReferenceTable.astro @@ -74,7 +74,7 @@ function addVarComments(cssValue: string): string { cssValue.replace(/var\((--[a-z0-9-]+)\)/gi, (match, varName) => { const resolvedValue = cssVarValues[varName]; if (resolvedValue) { - comments.push(`/* ${resolvedValue} */`); + comments.push(`/* ${resolvedValue} */`); } return match; }); diff --git a/site/src/components/UtilityReferenceTable.astro b/site/src/components/UtilityReferenceTable.astro index b41902aeaf..14ab1717b9 100644 --- a/site/src/components/UtilityReferenceTable.astro +++ b/site/src/components/UtilityReferenceTable.astro @@ -128,7 +128,7 @@ function addVarComments(cssValue: string): string { cssValue.replace(/var\((--[a-z0-9-]+)\)/gi, (match, varName) => { const resolvedValue = cssVarValues[varName]; if (resolvedValue) { - comments.push(`/* ${resolvedValue} */`); + comments.push(`/* ${resolvedValue} */`); } return match; }); diff --git a/site/src/components/head/Head.astro b/site/src/components/head/Head.astro index 11bf4fedcd..a5e4a2d8f5 100644 --- a/site/src/components/head/Head.astro +++ b/site/src/components/head/Head.astro @@ -44,12 +44,24 @@ const ScssProd = import.meta.env.PROD ? await import('@components/head/ScssProd. + + + + {pageTitle} {robots && } + + + {import.meta.env.PROD && ScssProd && ( diff --git a/site/src/components/header/Navigation.astro b/site/src/components/header/Navigation.astro index 43d8fb7521..6c6df6b19a 100644 --- a/site/src/components/header/Navigation.astro +++ b/site/src/components/header/Navigation.astro @@ -21,7 +21,7 @@ interface Props { const { addedIn, layout, title } = Astro.props --- -
    +