From f6fbf94f9d3d24d16045fe5a5d05e44c3abf1a6e Mon Sep 17 00:00:00 2001 From: Anthony Vitacco Date: Thu, 13 Aug 2026 17:16:26 -0400 Subject: [PATCH 1/2] This is an absolutely huge commit * Switched to jekyll templates with vite to build * Changed all of the doc pages to use voxblocks (dogfooding ftw) * Added table of contents component * Added icon component * Fixed vox-card component * Added a ton of svg icons with an eye to creating apps to replace puppet enterprise and puppet forge * Added a bunch of color variations based on our branding color scheme * Updated the documentation navigation * Corrected a lot of references to vox pupuli to openvox * Fixed links to my old personal repo Assisted-by: claude Signed-off-by: Anthony Vitacco --- .github/workflows/docs-test.yml | 29 + .github/workflows/docs.yml | 9 +- .gitignore | 8 +- README.md | 26 +- docs/.vitepress/config.ts | 139 - docs/.vitepress/theme/index.ts | 12 - docs/Gemfile | 8 + docs/Gemfile.lock | 275 ++ docs/_config.yml | 25 + docs/_config_production.yml | 7 + docs/_data/nav.yml | 23 + docs/_data/sidebar.yml | 95 + docs/_includes/head.html | 36 + docs/_includes/nav.html | 15 + docs/_includes/pager.html | 6 + docs/_includes/sidebar.html | 9 + docs/_includes/toc.html | 8 + docs/_layouts/default.html | 24 + docs/_layouts/home.html | 8 + docs/_plugins/callout_tag.rb | 36 + docs/_plugins/sidebar_pager.rb | 60 + docs/_plugins/toc_filter.rb | 23 + .../{accordion.md => accordion/index.md} | 6 +- docs/components/{alert.md => alert/index.md} | 8 +- .../components/{avatar.md => avatar/index.md} | 16 +- docs/components/{badge.md => badge/index.md} | 6 +- .../{billboard.md => billboard/index.md} | 8 +- .../{breadcrumbs.md => breadcrumbs/index.md} | 4 + .../components/{button.md => button/index.md} | 14 +- .../index.md} | 6 +- .../{callout.md => callout/index.md} | 8 +- docs/components/{card.md => card/index.md} | 14 +- .../{checkbox.md => checkbox/index.md} | 4 + .../{cta-band.md => cta-band/index.md} | 4 + docs/components/{cta.md => cta/index.md} | 6 +- .../components/{dialog.md => dialog/index.md} | 4 + .../{disclosure.md => disclosure/index.md} | 4 + .../{dropdown.md => dropdown/index.md} | 4 + .../{empty-state.md => empty-state/index.md} | 8 +- .../{file-input.md => file-input/index.md} | 4 + .../components/{footer.md => footer/index.md} | 10 +- docs/components/{grid.md => grid/index.md} | 6 +- .../components/{header.md => header/index.md} | 10 +- docs/components/{hero.md => hero/index.md} | 4 + docs/components/icon/index.md | 74 + .../{input-group.md => input-group/index.md} | 4 + .../{link-hub.md => link-hub/index.md} | 12 +- docs/components/{list.md => list/index.md} | 4 + .../components/{loader.md => loader/index.md} | 6 +- .../{pagination.md => pagination/index.md} | 4 + docs/components/{prose.md => prose/index.md} | 4 + docs/components/{quote.md => quote/index.md} | 4 + docs/components/{radio.md => radio/index.md} | 4 + .../components/{select.md => select/index.md} | 4 + .../{series-nav.md => series-nav/index.md} | 4 + .../{sidenav.md => sidenav/index.md} | 22 +- .../{sponsor.md => sponsor/index.md} | 4 + docs/components/{stat.md => stat/index.md} | 6 +- .../index.md} | 6 +- .../components/{subnav.md => subnav/index.md} | 4 + .../components/{switch.md => switch/index.md} | 4 + docs/components/{table.md => table/index.md} | 4 + docs/components/{tabs.md => tabs/index.md} | 4 + .../{text-input.md => text-input/index.md} | 4 + .../{textarea.md => textarea/index.md} | 4 + .../index.md} | 6 +- .../{timeline.md => timeline/index.md} | 4 + docs/components/toc/index.md | 53 + docs/guide/colors/index.md | 335 +++ .../index.md} | 4 + .../index.md} | 8 +- .../{utilities.md => utilities/index.md} | 18 +- docs/icons/index.md | 132 + docs/index.md | 60 +- docs/layouts/app-shell/index.md | 144 + docs/layouts/article/index.md | 121 + docs/layouts/basic/index.md | 99 + docs/layouts/dashboard/index.md | 110 + docs/layouts/docs-sidenav/index.md | 136 + docs/layouts/index.md | 34 + docs/layouts/marketing/index.md | 155 + docs/src/main.js | 12 + docs/src/site.css | 259 ++ docs/src/toc-scrollspy.js | 53 + docs/vite.config.js | 26 + package-lock.json | 2510 +++++------------ package.json | 19 +- .../accordion/vox-accordion.stories.ts | 2 +- src/components/alert/vox-alert.ts | 42 +- src/components/avatar/vox-avatar.stories.ts | 6 +- .../billboard/vox-billboard.stories.ts | 4 +- src/components/button/vox-button.stories.ts | 2 +- src/components/callout/vox-callout.ts | 56 +- src/components/card/vox-card.stories.ts | 6 +- src/components/card/vox-card.ts | 5 + src/components/cta/vox-cta.stories.ts | 2 +- .../empty-state/vox-empty-state.stories.ts | 2 +- src/components/footer/vox-footer.stories.ts | 2 +- src/components/header/vox-header.stories.ts | 2 +- src/components/header/vox-header.ts | 139 +- src/components/icon/icon-paths.ts | 287 ++ src/components/icon/vox-icon.stories.ts | 52 + src/components/icon/vox-icon.ts | 78 + .../link-hub/vox-link-hub.stories.ts | 5 +- src/components/link-hub/vox-link-hub.ts | 21 + src/components/sidenav/vox-sidenav.stories.ts | 5 +- src/components/sidenav/vox-sidenav.ts | 151 +- src/components/stat/vox-stat.stories.ts | 2 +- src/components/toc/vox-toc.ts | 140 + src/index.ts | 6 + src/styles/utilities.css | 158 ++ src/tokens/palette.css | 95 + 112 files changed, 4661 insertions(+), 2132 deletions(-) create mode 100644 .github/workflows/docs-test.yml delete mode 100644 docs/.vitepress/config.ts delete mode 100644 docs/.vitepress/theme/index.ts create mode 100644 docs/Gemfile create mode 100644 docs/Gemfile.lock create mode 100644 docs/_config.yml create mode 100644 docs/_config_production.yml create mode 100644 docs/_data/nav.yml create mode 100644 docs/_data/sidebar.yml create mode 100644 docs/_includes/head.html create mode 100644 docs/_includes/nav.html create mode 100644 docs/_includes/pager.html create mode 100644 docs/_includes/sidebar.html create mode 100644 docs/_includes/toc.html create mode 100644 docs/_layouts/default.html create mode 100644 docs/_layouts/home.html create mode 100644 docs/_plugins/callout_tag.rb create mode 100644 docs/_plugins/sidebar_pager.rb create mode 100644 docs/_plugins/toc_filter.rb rename docs/components/{accordion.md => accordion/index.md} (92%) rename docs/components/{alert.md => alert/index.md} (80%) rename docs/components/{avatar.md => avatar/index.md} (56%) rename docs/components/{badge.md => badge/index.md} (86%) rename docs/components/{billboard.md => billboard/index.md} (79%) rename docs/components/{breadcrumbs.md => breadcrumbs/index.md} (94%) rename docs/components/{button.md => button/index.md} (77%) rename docs/components/{calendar-tile.md => calendar-tile/index.md} (80%) rename docs/components/{callout.md => callout/index.md} (82%) rename docs/components/{card.md => card/index.md} (63%) rename docs/components/{checkbox.md => checkbox/index.md} (96%) rename docs/components/{cta-band.md => cta-band/index.md} (97%) rename docs/components/{cta.md => cta/index.md} (75%) rename docs/components/{dialog.md => dialog/index.md} (98%) rename docs/components/{disclosure.md => disclosure/index.md} (95%) rename docs/components/{dropdown.md => dropdown/index.md} (96%) rename docs/components/{empty-state.md => empty-state/index.md} (81%) rename docs/components/{file-input.md => file-input/index.md} (96%) rename docs/components/{footer.md => footer/index.md} (74%) rename docs/components/{grid.md => grid/index.md} (91%) rename docs/components/{header.md => header/index.md} (79%) rename docs/components/{hero.md => hero/index.md} (97%) create mode 100644 docs/components/icon/index.md rename docs/components/{input-group.md => input-group/index.md} (96%) rename docs/components/{link-hub.md => link-hub/index.md} (66%) rename docs/components/{list.md => list/index.md} (96%) rename docs/components/{loader.md => loader/index.md} (85%) rename docs/components/{pagination.md => pagination/index.md} (94%) rename docs/components/{prose.md => prose/index.md} (97%) rename docs/components/{quote.md => quote/index.md} (96%) rename docs/components/{radio.md => radio/index.md} (97%) rename docs/components/{select.md => select/index.md} (96%) rename docs/components/{series-nav.md => series-nav/index.md} (95%) rename docs/components/{sidenav.md => sidenav/index.md} (50%) rename docs/components/{sponsor.md => sponsor/index.md} (99%) rename docs/components/{stat.md => stat/index.md} (86%) rename docs/components/{step-indicator.md => step-indicator/index.md} (87%) rename docs/components/{subnav.md => subnav/index.md} (95%) rename docs/components/{switch.md => switch/index.md} (96%) rename docs/components/{table.md => table/index.md} (98%) rename docs/components/{tabs.md => tabs/index.md} (97%) rename docs/components/{text-input.md => text-input/index.md} (97%) rename docs/components/{textarea.md => textarea/index.md} (96%) rename docs/components/{theme-toggle.md => theme-toggle/index.md} (93%) rename docs/components/{timeline.md => timeline/index.md} (97%) create mode 100644 docs/components/toc/index.md create mode 100644 docs/guide/colors/index.md rename docs/guide/{design-tokens.md => design-tokens/index.md} (98%) rename docs/guide/{getting-started.md => getting-started/index.md} (85%) rename docs/guide/{utilities.md => utilities/index.md} (83%) create mode 100644 docs/icons/index.md create mode 100644 docs/layouts/app-shell/index.md create mode 100644 docs/layouts/article/index.md create mode 100644 docs/layouts/basic/index.md create mode 100644 docs/layouts/dashboard/index.md create mode 100644 docs/layouts/docs-sidenav/index.md create mode 100644 docs/layouts/index.md create mode 100644 docs/layouts/marketing/index.md create mode 100644 docs/src/main.js create mode 100644 docs/src/site.css create mode 100644 docs/src/toc-scrollspy.js create mode 100644 docs/vite.config.js create mode 100644 src/components/icon/icon-paths.ts create mode 100644 src/components/icon/vox-icon.stories.ts create mode 100644 src/components/icon/vox-icon.ts create mode 100644 src/components/toc/vox-toc.ts create mode 100644 src/tokens/palette.css diff --git a/.github/workflows/docs-test.yml b/.github/workflows/docs-test.yml new file mode 100644 index 0000000..0c7e988 --- /dev/null +++ b/.github/workflows/docs-test.yml @@ -0,0 +1,29 @@ +name: Test docs + +on: + pull_request: + branches: [main] + workflow_dispatch: + +jobs: + internal_links: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: actions/setup-node@v4 + with: + node-version: 22 + cache: npm + - uses: ruby/setup-ruby@v1 + with: + ruby-version: '3.4' + bundler-cache: true + working-directory: docs + - run: npm ci + - run: npm run docs:build + - name: Check internal links and assets + run: | + BUNDLE_GEMFILE=docs/Gemfile bundle exec htmlproofer docs/_site \ + --disable-external --no-enforce-https --ignore-empty-alt \ + --swap-urls "^/voxblocks/:/" \ + --checks Links,Images,Scripts diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml index 39f1e10..beb7410 100644 --- a/.github/workflows/docs.yml +++ b/.github/workflows/docs.yml @@ -23,12 +23,17 @@ jobs: with: node-version: 22 cache: npm + - uses: ruby/setup-ruby@v1 + with: + ruby-version: '3.4' + bundler-cache: true + working-directory: docs + - uses: actions/configure-pages@v5 - run: npm ci - run: npm run docs:build - - uses: actions/configure-pages@v5 - uses: actions/upload-pages-artifact@v3 with: - path: docs/.vitepress/dist + path: docs/_site deploy: needs: build diff --git a/.gitignore b/.gitignore index f400e10..aa8561a 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,11 @@ node_modules/ dist/ -docs/.vitepress/dist/ -docs/.vitepress/cache/ +docs/_site/ +docs/assets/ +docs/_data/manifest.json +docs/.bundle/ +docs/.jekyll-cache/ +docs/.jekyll-metadata storybook-static/ *.log .DS_Store diff --git a/README.md b/README.md index e13de10..db8a068 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # VoxBlocks -Web components for [Vox Pupuli](https://voxpupuli.org) and [OpenVox](https://voxpupuli.org/openvox/) community web sites — a general-purpose design system built on web standards, to keep branding consistent across all community offerings. The default theme, "Deep Teal," is a distinct OpenVox identity rather than a copy of any one site's look, and is fully retunable via CSS custom properties. +Web components for [OpenVox](https://voxpupuli.org/openvox/) community web sites and apps — a general-purpose design system built on web standards, so branding stays consistent across every OpenVox site. The default theme, "Deep Teal," is a distinct OpenVox identity rather than a copy of any one site's look, and is fully retunable via CSS custom properties. Because they are standard custom elements (built with [Lit](https://lit.dev)), the components work in plain HTML, Jekyll, VitePress, Vue, React — anywhere. @@ -12,32 +12,34 @@ The component catalog, by category: | --- | --- | | Actions | `vox-button`, `vox-cta`, `vox-theme-toggle` | | Forms | `vox-checkbox`, `vox-file-input`, `vox-input`, `vox-input-group`, `vox-radio-group`/`vox-radio`, `vox-select`, `vox-switch`, `vox-textarea` | -| Images | `vox-avatar`, `vox-billboard` | -| Navigation | `vox-breadcrumbs`, `vox-header`, `vox-pagination`, `vox-series-nav`, `vox-sidenav`, `vox-subnav`, `vox-tabs` | +| Images | `vox-avatar`, `vox-billboard`, `vox-icon` — 79 icons ([full set](https://openvoxproject.github.io/voxblocks/icons/)): shared UI baseline, OpenVox marketing, module registry (Forge replacement), fleet console (Puppet Enterprise replacement). ``/`` show one automatically; ``/``/``/`` accept one via an `icon` slot | +| Navigation | `vox-breadcrumbs`, `vox-header` (collapses to a menu button below 768px), `vox-pagination`, `vox-series-nav`, `vox-sidenav` (collapses to a menu button below 768px, same as `vox-header`), `vox-subnav`, `vox-tabs`, `vox-toc` | | Overlays | `vox-dialog`, `vox-disclosure`, `vox-dropdown` | | Page content | `vox-accordion`, `vox-alert`, `vox-badge`, `vox-calendar-tile`, `vox-callout`, `vox-card`, `vox-cta-band`, `vox-empty-state`, `vox-footer`, `vox-grid`, `vox-hero`, `vox-link-hub`, `vox-loader`, `vox-quote`, `vox-sponsor-tier`/`vox-sponsor`, `vox-stat`, `vox-step-indicator`, `vox-timeline` | -| Utilities | Utility classes: spacing (`vox-m-*`/`vox-p-*`), typography (`vox-ts-*`, `vox-text-*`), color (`vox-color-*`, `vox-bg-*`), border, display, flex, gap, shadow, visibility (incl. `vox-sr-only` and responsive hiding), width, z-index — plus `.vox-table`/`.vox-table-wrap`, `.vox-list`, and `.vox-prose` | +| Utilities | Utility classes: spacing (`vox-m-*`/`vox-p-*`), a `vox-container` layout wrapper (1280px, centered, matches `vox-header`/`vox-footer`), typography (`vox-ts-*`, `vox-text-*`), color (`vox-color-*`, `vox-bg-*`, plus an extended `vox-color-{hue}-{100-900}`/`vox-bg-{hue}-{100-900}` palette across 7 hues), border, display, flex, gap, shadow, visibility (incl. `vox-sr-only` and responsive hiding), width, z-index — plus `.vox-table`/`.vox-table-wrap`, `.vox-list`, and `.vox-prose` | Form controls are form-associated custom elements (ElementInternals): they submit values, files, and validity with a plain `
` like native inputs. +The docs also include a [Layouts](https://openvoxproject.github.io/voxblocks/layouts/) section — six full-page starting points (basic content page, marketing page, docs with sidenav, blog article, sidebar app shell, dashboard) built entirely from the components above, each with copy-pasteable HTML. + ## Usage With a bundler: ```sh -npm install @avitacco/voxblocks +npm install @openvoxproject/voxblocks ``` ```js -import '@avitacco/voxblocks'; -import '@avitacco/voxblocks/voxblocks.css'; +import '@openvoxproject/voxblocks'; +import '@openvoxproject/voxblocks/voxblocks.css'; ``` Without a build step (Lit bundled in): ```html - - + + ``` Then: @@ -50,8 +52,14 @@ Then: ## Development +The docs site (`docs/`) is a Jekyll site — same stack as the [OpenVox marketing site](https://github.com/OpenVoxProject/openvoxproject.github.io) — so it needs Ruby 3.4+ and [Bundler](https://bundler.io) in addition to Node, and its own gem install: + ```sh npm install +cd docs && BUNDLE_GEMFILE=Gemfile bundle install && cd .. +``` + +```sh npm run docs:dev # component docs & live playground npm run storybook # per-component Storybook, one story per documented example npm run build # build npm + CDN bundles and type declarations diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts deleted file mode 100644 index 86b4d89..0000000 --- a/docs/.vitepress/config.ts +++ /dev/null @@ -1,139 +0,0 @@ -import { defineConfig } from 'vitepress'; - -export default defineConfig({ - // Project pages are served under https://.github.io/voxblocks/. - // Remove this (or set to '/') if the site moves to a custom domain. - base: '/voxblocks/', - title: 'VoxBlocks', - description: - 'Web components for Vox Pupuli and OpenVox community web sites', - head: [ - ['link', { rel: 'preconnect', href: 'https://fonts.googleapis.com' }], - [ - 'link', - { - rel: 'preconnect', - href: 'https://fonts.gstatic.com', - crossorigin: '', - }, - ], - [ - 'link', - { - rel: 'stylesheet', - href: 'https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,wght@0,600;1,500&family=Inter:wght@400;600&family=JetBrains+Mono:wght@400;500&display=swap', - }, - ], - ], - vue: { - template: { - compilerOptions: { - isCustomElement: (tag) => tag.startsWith('vox-'), - }, - }, - }, - themeConfig: { - nav: [ - { text: 'Guide', link: '/guide/getting-started' }, - { text: 'Components', link: '/components/button' }, - { text: 'Utilities', link: '/guide/utilities' }, - ], - sidebar: [ - { - text: 'Guide', - items: [ - { text: 'Getting Started', link: '/guide/getting-started' }, - { text: 'Design Tokens', link: '/guide/design-tokens' }, - { text: 'Utilities', link: '/guide/utilities' }, - ], - }, - { - text: 'Actions', - collapsed: false, - items: [ - { text: 'Button', link: '/components/button' }, - { text: 'Call to Action', link: '/components/cta' }, - { text: 'Theme Toggle', link: '/components/theme-toggle' }, - ], - }, - { - text: 'Forms', - collapsed: false, - items: [ - { text: 'Checkbox', link: '/components/checkbox' }, - { text: 'File Input', link: '/components/file-input' }, - { text: 'Input Group', link: '/components/input-group' }, - { text: 'Radio Input', link: '/components/radio' }, - { text: 'Select Input', link: '/components/select' }, - { text: 'Switch', link: '/components/switch' }, - { text: 'Text Input', link: '/components/text-input' }, - { text: 'Textarea', link: '/components/textarea' }, - ], - }, - { - text: 'Images', - collapsed: false, - items: [ - { text: 'Avatar', link: '/components/avatar' }, - { text: 'Billboard', link: '/components/billboard' }, - ], - }, - { - text: 'Navigation', - collapsed: false, - items: [ - { text: 'Breadcrumbs', link: '/components/breadcrumbs' }, - { text: 'Header', link: '/components/header' }, - { text: 'Pagination', link: '/components/pagination' }, - { text: 'Series Nav', link: '/components/series-nav' }, - { text: 'Sidenav', link: '/components/sidenav' }, - { text: 'Subnav', link: '/components/subnav' }, - { text: 'Tabs', link: '/components/tabs' }, - ], - }, - { - text: 'Overlays', - collapsed: false, - items: [ - { text: 'Dialog', link: '/components/dialog' }, - { text: 'Disclosure', link: '/components/disclosure' }, - { text: 'Dropdown', link: '/components/dropdown' }, - ], - }, - { - text: 'Page Content', - collapsed: false, - items: [ - { text: 'Accordion', link: '/components/accordion' }, - { text: 'Alert', link: '/components/alert' }, - { text: 'Badge', link: '/components/badge' }, - { text: 'Calendar Tile', link: '/components/calendar-tile' }, - { text: 'Callout', link: '/components/callout' }, - { text: 'Card', link: '/components/card' }, - { text: 'CTA Band', link: '/components/cta-band' }, - { text: 'Empty State', link: '/components/empty-state' }, - { text: 'Footer', link: '/components/footer' }, - { text: 'Grid', link: '/components/grid' }, - { text: 'Hero', link: '/components/hero' }, - { text: 'Link Hub', link: '/components/link-hub' }, - { text: 'List', link: '/components/list' }, - { text: 'Loading Indicator', link: '/components/loader' }, - { text: 'Prose', link: '/components/prose' }, - { text: 'Quote', link: '/components/quote' }, - { text: 'Sponsor', link: '/components/sponsor' }, - { text: 'Stat', link: '/components/stat' }, - { text: 'Step Indicator', link: '/components/step-indicator' }, - { text: 'Table', link: '/components/table' }, - { text: 'Timeline', link: '/components/timeline' }, - ], - }, - ], - socialLinks: [ - { icon: 'github', link: 'https://github.com/avitacco/voxblocks' }, - ], - footer: { - message: 'Released under the Apache-2.0 License.', - copyright: 'A Vox Pupuli community project (perhaps!)', - }, - }, -}); diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts deleted file mode 100644 index 553909d..0000000 --- a/docs/.vitepress/theme/index.ts +++ /dev/null @@ -1,12 +0,0 @@ -import DefaultTheme from 'vitepress/theme'; -import type { Theme } from 'vitepress'; - -export default { - extends: DefaultTheme, - enhanceApp() { - // Custom elements only exist in the browser; skip during SSR build. - if (!import.meta.env.SSR) { - import('../../../src/index.js'); - } - }, -} satisfies Theme; diff --git a/docs/Gemfile b/docs/Gemfile new file mode 100644 index 0000000..d2c2c2f --- /dev/null +++ b/docs/Gemfile @@ -0,0 +1,8 @@ +source "https://rubygems.org" + +gem "jekyll", "~> 4.4" +gem "rouge" + +group :development do + gem "html-proofer", "~> 5.0" +end diff --git a/docs/Gemfile.lock b/docs/Gemfile.lock new file mode 100644 index 0000000..9491646 --- /dev/null +++ b/docs/Gemfile.lock @@ -0,0 +1,275 @@ +GEM + remote: https://rubygems.org/ + specs: + Ascii85 (2.0.1) + addressable (2.9.0) + public_suffix (>= 2.0.2, < 8.0) + afm (1.0.0) + async (2.44.1) + console (~> 1.29) + fiber-annotation + io-event (~> 1.11) + base64 (0.3.0) + benchmark (0.5.0) + bigdecimal (3.3.1) + colorator (1.1.0) + concurrent-ruby (1.3.8) + console (1.37.0) + fiber-annotation + fiber-local (~> 1.1) + json + csv (3.3.6) + em-websocket (0.5.3) + eventmachine (>= 0.12.9) + http_parser.rb (~> 0) + ethon (0.18.0) + ffi (>= 1.15.0) + logger + eventmachine (1.2.7) + ffi (1.17.4-aarch64-linux-gnu) + ffi (1.17.4-aarch64-linux-musl) + ffi (1.17.4-arm-linux-gnu) + ffi (1.17.4-arm-linux-musl) + ffi (1.17.4-arm64-darwin) + ffi (1.17.4-x86_64-darwin) + ffi (1.17.4-x86_64-linux-gnu) + ffi (1.17.4-x86_64-linux-musl) + fiber-annotation (0.2.0) + fiber-local (1.1.0) + fiber-storage + fiber-storage (1.0.1) + forwardable-extended (2.6.0) + google-protobuf (4.35.1) + bigdecimal + rake (~> 13.3) + google-protobuf (4.35.1-aarch64-linux-gnu) + bigdecimal + rake (~> 13.3) + google-protobuf (4.35.1-aarch64-linux-musl) + bigdecimal + rake (~> 13.3) + google-protobuf (4.35.1-arm64-darwin) + bigdecimal + rake (~> 13.3) + google-protobuf (4.35.1-x86_64-darwin) + bigdecimal + rake (~> 13.3) + google-protobuf (4.35.1-x86_64-linux-gnu) + bigdecimal + rake (~> 13.3) + google-protobuf (4.35.1-x86_64-linux-musl) + bigdecimal + rake (~> 13.3) + hashery (2.1.2) + html-proofer (5.2.2) + addressable (~> 2.3) + async (~> 2.1) + benchmark (~> 0.5) + nokogiri (~> 1.13) + pdf-reader (~> 2.11) + rainbow (~> 3.0) + typhoeus (~> 1.3) + yell (~> 2.0) + zeitwerk (~> 2.5) + http_parser.rb (0.8.1) + i18n (1.15.2) + concurrent-ruby (~> 1.0) + io-event (1.19.4) + jekyll (4.4.1) + addressable (~> 2.4) + base64 (~> 0.2) + colorator (~> 1.0) + csv (~> 3.0) + em-websocket (~> 0.5) + i18n (~> 1.0) + jekyll-sass-converter (>= 2.0, < 4.0) + jekyll-watch (~> 2.0) + json (~> 2.6) + kramdown (~> 2.3, >= 2.3.1) + kramdown-parser-gfm (~> 1.0) + liquid (~> 4.0) + mercenary (~> 0.3, >= 0.3.6) + pathutil (~> 0.9) + rouge (>= 3.0, < 5.0) + safe_yaml (~> 1.0) + terminal-table (>= 1.8, < 4.0) + webrick (~> 1.7) + jekyll-sass-converter (3.1.0) + sass-embedded (~> 1.75) + jekyll-watch (2.2.1) + listen (~> 3.0) + json (2.21.2) + kramdown (2.5.2) + rexml (>= 3.4.4) + kramdown-parser-gfm (1.1.0) + kramdown (~> 2.0) + liquid (4.0.4) + listen (3.10.0) + logger + rb-fsevent (~> 0.10, >= 0.10.3) + rb-inotify (~> 0.9, >= 0.9.10) + logger (1.7.0) + mercenary (0.4.0) + nokogiri (1.19.4-aarch64-linux-gnu) + racc (~> 1.4) + nokogiri (1.19.4-aarch64-linux-musl) + racc (~> 1.4) + nokogiri (1.19.4-arm-linux-gnu) + racc (~> 1.4) + nokogiri (1.19.4-arm-linux-musl) + racc (~> 1.4) + nokogiri (1.19.4-arm64-darwin) + racc (~> 1.4) + nokogiri (1.19.4-x86_64-darwin) + racc (~> 1.4) + nokogiri (1.19.4-x86_64-linux-gnu) + racc (~> 1.4) + nokogiri (1.19.4-x86_64-linux-musl) + racc (~> 1.4) + pathutil (0.16.2) + forwardable-extended (~> 2.6) + pdf-reader (2.16.0) + Ascii85 (>= 1.0, < 3.0, != 2.0.0) + afm (>= 0.2.1, < 2) + hashery (~> 2.0) + ttfunk + public_suffix (7.0.5) + racc (1.8.1) + rainbow (3.1.1) + rake (13.4.2) + rb-fsevent (0.11.2) + rb-inotify (0.11.1) + ffi (~> 1.0) + rexml (3.4.4) + rouge (4.7.0) + safe_yaml (1.0.5) + sass-embedded (1.102.0-aarch64-linux-gnu) + google-protobuf (~> 4.31) + sass-embedded (1.102.0-aarch64-linux-musl) + google-protobuf (~> 4.31) + sass-embedded (1.102.0-arm-linux-gnueabihf) + google-protobuf (~> 4.31) + sass-embedded (1.102.0-arm-linux-musleabihf) + google-protobuf (~> 4.31) + sass-embedded (1.102.0-arm64-darwin) + google-protobuf (~> 4.31) + sass-embedded (1.102.0-x86_64-darwin) + google-protobuf (~> 4.31) + sass-embedded (1.102.0-x86_64-linux-gnu) + google-protobuf (~> 4.31) + sass-embedded (1.102.0-x86_64-linux-musl) + google-protobuf (~> 4.31) + terminal-table (3.0.2) + unicode-display_width (>= 1.1.1, < 3) + ttfunk (1.8.0) + bigdecimal (~> 3.1) + typhoeus (1.6.0) + ethon (>= 0.18.0) + unicode-display_width (2.6.0) + webrick (1.9.2) + yell (2.2.2) + zeitwerk (2.8.3) + +PLATFORMS + aarch64-linux-gnu + aarch64-linux-musl + arm-linux-gnu + arm-linux-gnueabihf + arm-linux-musl + arm-linux-musleabihf + arm64-darwin + x86_64-darwin + x86_64-linux-gnu + x86_64-linux-musl + +DEPENDENCIES + html-proofer (~> 5.0) + jekyll (~> 4.4) + rouge + +CHECKSUMS + Ascii85 (2.0.1) sha256=15cb5d941808543cbb9e7e6aea3c8ec3877f154c3461e8b3673e97f7ecedbe5a + addressable (2.9.0) sha256=7fdf6ac3660f7f4e867a0838be3f6cf722ace541dd97767fa42bc6cfa980c7af + afm (1.0.0) sha256=5bd4d6f6241e7014ef090985ec6f4c3e9745f6de0828ddd58bc1efdd138f4545 + async (2.44.1) sha256=079bce0d019fb27cc58ec110fd9b9af4991d97b801d1c6cc6def1d1954dcf9b2 + base64 (0.3.0) sha256=27337aeabad6ffae05c265c450490628ef3ebd4b67be58257393227588f5a97b + benchmark (0.5.0) sha256=465df122341aedcb81a2a24b4d3bd19b6c67c1530713fd533f3ff034e419236c + bigdecimal (3.3.1) sha256=eaa01e228be54c4f9f53bf3cc34fe3d5e845c31963e7fcc5bedb05a4e7d52218 + colorator (1.1.0) sha256=e2f85daf57af47d740db2a32191d1bdfb0f6503a0dfbc8327d0c9154d5ddfc38 + concurrent-ruby (1.3.8) sha256=b2f1be836e968ccc78ccfce277ea79c72a88633f22306782c16ff23fb415d1e1 + console (1.37.0) sha256=8093b286c2595a063849c098594fee5155ecc7967d36f3aa8cbe7569c8f3efd7 + csv (3.3.6) sha256=aba61e7e507a66f03d45cb1f3c4b6359861c3504038b422962875dce099e4456 + em-websocket (0.5.3) sha256=f56a92bde4e6cb879256d58ee31f124181f68f8887bd14d53d5d9a292758c6a8 + ethon (0.18.0) sha256=b598afc9f30448cb068b850714b7d6948e941476095d04f90a4ac65b8d6efcb2 + eventmachine (1.2.7) sha256=994016e42aa041477ba9cff45cbe50de2047f25dd418eba003e84f0d16560972 + ffi (1.17.4-aarch64-linux-gnu) sha256=b208f06f91ffd8f5e1193da3cae3d2ccfc27fc36fba577baf698d26d91c080df + ffi (1.17.4-aarch64-linux-musl) sha256=9286b7a615f2676245283aef0a0a3b475ae3aae2bb5448baace630bb77b91f39 + ffi (1.17.4-arm-linux-gnu) sha256=d6dbddf7cb77bf955411af5f187a65b8cd378cb003c15c05697f5feee1cb1564 + ffi (1.17.4-arm-linux-musl) sha256=9d4838ded0465bef6e2426935f6bcc93134b6616785a84ffd2a3d82bc3cf6f95 + ffi (1.17.4-arm64-darwin) sha256=19071aaf1419251b0a46852abf960e77330a3b334d13a4ab51d58b31a937001b + ffi (1.17.4-x86_64-darwin) sha256=aa70390523cf3235096cf64962b709b4cfbd5c082a2cb2ae714eb0fe2ccda496 + ffi (1.17.4-x86_64-linux-gnu) sha256=9d3db14c2eae074b382fa9c083fe95aec6e0a1451da249eab096c34002bc752d + ffi (1.17.4-x86_64-linux-musl) sha256=3fdf9888483de005f8ef8d1cf2d3b20d86626af206cbf780f6a6a12439a9c49e + fiber-annotation (0.2.0) sha256=7abfadf1d119f508867d4103bf231c0354d019cc39a5738945dec2edadaf6c03 + fiber-local (1.1.0) sha256=c885f94f210fb9b05737de65d511136ea602e00c5105953748aa0f8793489f06 + fiber-storage (1.0.1) sha256=f48e5b6d8b0be96dac486332b55cee82240057065dc761c1ea692b2e719240e1 + forwardable-extended (2.6.0) sha256=1bec948c469bbddfadeb3bd90eb8c85f6e627a412a3e852acfd7eaedbac3ec97 + google-protobuf (4.35.1) sha256=a3a6471331d918f58dfa4d014a8f6286f0af2cf4840216bde52fcf2ea3fe3726 + google-protobuf (4.35.1-aarch64-linux-gnu) sha256=50ca44d0eeff3f8475e630a1accdd974256f3510694d574e2c9d6119ea8bc9e1 + google-protobuf (4.35.1-aarch64-linux-musl) sha256=d5c65cef6bd6498a9e5ed5f88cf6cf7e341c10b0a005e32137d5d1a2b6e8c18a + google-protobuf (4.35.1-arm64-darwin) sha256=d9c957df04fa89c749fa9a72a7b383eb4296efc9b2303dc6fd6fbe39c698ad6b + google-protobuf (4.35.1-x86_64-darwin) sha256=66b62b4df00931018a692806df66393efa960d6d2b7da69735187249f950d3ee + google-protobuf (4.35.1-x86_64-linux-gnu) sha256=c786439087512a3fbd199e9897d265b855f951d4027e218ea55e858d45969edd + google-protobuf (4.35.1-x86_64-linux-musl) sha256=91890eb0002934a339fdb7d77a147c46b7474b6799db27872b747b905837f744 + hashery (2.1.2) sha256=d239cc2310401903f6b79d458c2bbef5bf74c46f3f974ae9c1061fb74a404862 + html-proofer (5.2.2) sha256=6e5e63c89ef9413246eeffaeba8dd03db62546992d7a2b85d166ac2a5903a241 + http_parser.rb (0.8.1) sha256=9ae8df145b39aa5398b2f90090d651c67bd8e2ebfe4507c966579f641e11097a + i18n (1.15.2) sha256=00f9eb62412fe593b2a65a97daa75300d37abb8f7202ec748e94b6d46a9dd1b5 + io-event (1.19.4) sha256=c291146e2e70849b9d6b64078f8e98f0154bfd3bc4f9759861ff13e9895e0cce + jekyll (4.4.1) sha256=4c1144d857a5b2b80d45b8cf5138289579a9f8136aadfa6dd684b31fe2bc18c1 + jekyll-sass-converter (3.1.0) sha256=83925d84f1d134410c11d0c6643b0093e82e3a3cf127e90757a85294a3862443 + jekyll-watch (2.2.1) sha256=bc44ed43f5e0a552836245a54dbff3ea7421ecc2856707e8a1ee203a8387a7e1 + json (2.21.2) sha256=1f1d3b7cf2b3ba1a69beca0bb6db13d5438b80bff3cd54cdaaa620b9b07c1c6a + kramdown (2.5.2) sha256=1ba542204c66b6f9111ff00dcc26075b95b220b07f2905d8261740c82f7f02fa + kramdown-parser-gfm (1.1.0) sha256=fb39745516427d2988543bf01fc4cf0ab1149476382393e0e9c48592f6581729 + liquid (4.0.4) sha256=4fcfebb1a045e47918388dbb7a0925e7c3893e58d2bd6c3b3c73ec17a2d8fdb3 + listen (3.10.0) sha256=c6e182db62143aeccc2e1960033bebe7445309c7272061979bb098d03760c9d2 + logger (1.7.0) sha256=196edec7cc44b66cfb40f9755ce11b392f21f7967696af15d274dde7edff0203 + mercenary (0.4.0) sha256=b25a1e4a59adca88665e08e24acf0af30da5b5d859f7d8f38fba52c28f405138 + nokogiri (1.19.4-aarch64-linux-gnu) sha256=1269fb644a6de405057a53dd5c762b1209b43ca7424f839454d3dbc677c31a8f + nokogiri (1.19.4-aarch64-linux-musl) sha256=35c65b9ce72b3bb03207bdbe7067915019dc18c1b9b59139684bd6690fdd01af + nokogiri (1.19.4-arm-linux-gnu) sha256=a301313e38bb065d68239e79734bcd6f56fb6efaacebde29e9abf2a4735340ca + nokogiri (1.19.4-arm-linux-musl) sha256=588923c101bcfa78869734d247d25b598674323e7f22474fc468f6e5647311eb + nokogiri (1.19.4-arm64-darwin) sha256=a46db9853286e6597b36ebc6953817d15acf3a299583eb3f89fdc6f91dd63527 + nokogiri (1.19.4-x86_64-darwin) sha256=7fd17057d3e1f00e9954a74b3cd76595d3d4a5ef233b7ed9599047c204f70551 + nokogiri (1.19.4-x86_64-linux-gnu) sha256=379fae440b28915e3f19d752ce2dcf8465ed2b2fbefd2a7ca0dd497bc981a06a + nokogiri (1.19.4-x86_64-linux-musl) sha256=17dfb7c1fa194ae02fbf7c51a7afc8d278045ab3fdacfd86f91d02d7b274470b + pathutil (0.16.2) sha256=e43b74365631cab4f6d5e4228f812927efc9cb2c71e62976edcb252ee948d589 + pdf-reader (2.16.0) sha256=bf1b5564c085264d8279bde3cf1467778b75841494d20c0fe7da3dad475f3732 + public_suffix (7.0.5) sha256=1a8bb08f1bbea19228d3bed6e5ed908d1cb4f7c2726d18bd9cadf60bc676f623 + racc (1.8.1) sha256=4a7f6929691dbec8b5209a0b373bc2614882b55fc5d2e447a21aaa691303d62f + rainbow (3.1.1) sha256=039491aa3a89f42efa1d6dec2fc4e62ede96eb6acd95e52f1ad581182b79bc6a + rake (13.4.2) sha256=cb825b2bd5f1f8e91ca37bddb4b9aaf345551b4731da62949be002fa89283701 + rb-fsevent (0.11.2) sha256=43900b972e7301d6570f64b850a5aa67833ee7d87b458ee92805d56b7318aefe + rb-inotify (0.11.1) sha256=a0a700441239b0ff18eb65e3866236cd78613d6b9f78fea1f9ac47a85e47be6e + rexml (3.4.4) sha256=19e0a2c3425dfbf2d4fc1189747bdb2f849b6c5e74180401b15734bc97b5d142 + rouge (4.7.0) sha256=dba5896715c0325c362e895460a6d350803dbf6427454f49a47500f3193ea739 + safe_yaml (1.0.5) sha256=a6ac2d64b7eb027bdeeca1851fe7e7af0d668e133e8a88066a0c6f7087d9f848 + sass-embedded (1.102.0-aarch64-linux-gnu) sha256=087f377fa4135a8f67f5f422781b59815e99b8fd3aec335935c50a47c2a205fd + sass-embedded (1.102.0-aarch64-linux-musl) sha256=12bb4091972499241c35304ca11ca2c314764badf1b9933a8d437ba62432b538 + sass-embedded (1.102.0-arm-linux-gnueabihf) sha256=566b1188e4f923366f494a5d95e4e5e03864ae55bae5ea52beb2c30b1b9e2915 + sass-embedded (1.102.0-arm-linux-musleabihf) sha256=1ca396610bf4f4aa8f849b67a9f2720f67d9f3b42651072eafee786aece314cf + sass-embedded (1.102.0-arm64-darwin) sha256=8e18b2dd94b232c2dd73984c579f77bbc1a066028f4675c8989ac34fa40d14dc + sass-embedded (1.102.0-x86_64-darwin) sha256=3e78c6ac5be0ba4236d075bd044a49d0f515d54799f7d6f253c71d325ffedac0 + sass-embedded (1.102.0-x86_64-linux-gnu) sha256=9815b7604123a9a44a65d44d5e58e7af1c7005174b745cda83bad4c9e3760ab3 + sass-embedded (1.102.0-x86_64-linux-musl) sha256=9e3c15eb5d83784adf3b946d4fc5d8a32aed25566a2fee939f25dd1e1d217ddf + terminal-table (3.0.2) sha256=f951b6af5f3e00203fb290a669e0a85c5dd5b051b3b023392ccfd67ba5abae91 + ttfunk (1.8.0) sha256=a7cbc7e489cc46e979dde04d34b5b9e4f5c8f1ee5fc6b1a7be39b829919d20ca + typhoeus (1.6.0) sha256=bacc41c23e379547e29801dc235cd1699b70b955a1ba3d32b2b877aa844c331d + unicode-display_width (2.6.0) sha256=12279874bba6d5e4d2728cef814b19197dbb10d7a7837a869bab65da943b7f5a + webrick (1.9.2) sha256=beb4a15fc474defed24a3bda4ffd88a490d517c9e4e6118c3edce59e45864131 + yell (2.2.2) sha256=1d166f3cc3b6dc49a59778ea7156ed6d8de794c15106d48ffd6cbb061b9b26bc + zeitwerk (2.8.3) sha256=2c85125a8467ce069e20123d1e709a08955c9d29c118c25b46b7b7fafdbb92e5 + +BUNDLED WITH + 4.0.3 diff --git a/docs/_config.yml b/docs/_config.yml new file mode 100644 index 0000000..2be4dd2 --- /dev/null +++ b/docs/_config.yml @@ -0,0 +1,25 @@ +title: VoxBlocks +description: Web components for OpenVox community web sites and apps +url: "https://openvoxproject.github.io" +baseurl: "" + +markdown: kramdown +kramdown: + input: GFM + syntax_highlighter: rouge + +defaults: + - scope: + path: "" + values: + layout: default + +exclude: + - Gemfile + - Gemfile.lock + - _config_production.yml + - vite.config.js + - src + - assets/.vite + - node_modules + - README.md diff --git a/docs/_config_production.yml b/docs/_config_production.yml new file mode 100644 index 0000000..d677aec --- /dev/null +++ b/docs/_config_production.yml @@ -0,0 +1,7 @@ +# Layered on top of _config.yml only for the real deploy build (see the +# `docs:build` script in package.json and .github/workflows/docs.yml) — +# local dev (`docs:dev`/`docs:jekyll`) uses the base config's empty +# baseurl, so the site serves at http://localhost:4000/ instead of +# needing /voxblocks/ on every URL. GitHub Pages actually serves this repo +# under /voxblocks/, so only the deployed build needs the prefix. +baseurl: "/voxblocks" diff --git a/docs/_data/nav.yml b/docs/_data/nav.yml new file mode 100644 index 0000000..048f99e --- /dev/null +++ b/docs/_data/nav.yml @@ -0,0 +1,23 @@ +# Top nav. Links are baseurl-free with a trailing slash; only ever pass +# through the `relative_url` filter at the point an href is emitted. +# +# `section:` ties an item to the same section key used in _data/sidebar.yml +# (stamped onto each page as page.section by _plugins/sidebar_pager.rb) — +# an item is "current" when page.section matches, not by guessing from the +# URL. Icons has no `section:` since it's a single standalone page with no +# sidebar of its own; it falls back to an exact link match instead (see +# _includes/nav.html). +- text: Guide + link: /guide/getting-started/ + section: guide +- text: Components + link: /components/button/ + section: components +- text: Icons + link: /icons/ +- text: Utilities + link: /guide/utilities/ + section: utilities +- text: Layouts + link: /layouts/ + section: layouts diff --git a/docs/_data/sidebar.yml b/docs/_data/sidebar.yml new file mode 100644 index 0000000..a512215 --- /dev/null +++ b/docs/_data/sidebar.yml @@ -0,0 +1,95 @@ +# Left sidebar, keyed by section. This is the single source of truth for +# "which section does this page belong to" — _plugins/sidebar_pager.rb +# walks every entry here once and stamps the owning section's key onto +# each matching page as page.section, which both this sidebar +# (_layouts/default.html) and the header nav (_includes/nav.html, via +# nav.yml's own `section:` field) key off of. Sections are NOT simply the +# URL's first path segment — e.g. utilities/colors both live under +# /guide/ on disk but belong to the "utilities" section, not "guide", +# because that's how they're grouped here. Links are baseurl-free with a +# trailing slash — see nav.yml for the rule this file follows. A page not +# listed under any section here (e.g. /icons/) simply renders without a +# sidebar — see _layouts/default.html. + +guide: + - text: Guide + items: + - { text: Getting Started, link: /guide/getting-started/ } + - { text: Design Tokens, link: /guide/design-tokens/ } + +utilities: + - text: Utilities + items: + - { text: Colors, link: /guide/colors/ } + - { text: Utilities, link: /guide/utilities/ } + +components: + - text: Actions + items: + - { text: Button, link: /components/button/ } + - { text: Call to Action, link: /components/cta/ } + - { text: Theme Toggle, link: /components/theme-toggle/ } + - text: Forms + items: + - { text: Checkbox, link: /components/checkbox/ } + - { text: File Input, link: /components/file-input/ } + - { text: Input Group, link: /components/input-group/ } + - { text: Radio Input, link: /components/radio/ } + - { text: Select Input, link: /components/select/ } + - { text: Switch, link: /components/switch/ } + - { text: Text Input, link: /components/text-input/ } + - { text: Textarea, link: /components/textarea/ } + - text: Images + items: + - { text: Avatar, link: /components/avatar/ } + - { text: Billboard, link: /components/billboard/ } + - { text: Icon, link: /components/icon/ } + - text: Navigation + items: + - { text: Breadcrumbs, link: /components/breadcrumbs/ } + - { text: Header, link: /components/header/ } + - { text: Pagination, link: /components/pagination/ } + - { text: Series Nav, link: /components/series-nav/ } + - { text: Sidenav, link: /components/sidenav/ } + - { text: Subnav, link: /components/subnav/ } + - { text: Tabs, link: /components/tabs/ } + - { text: Table of Contents, link: /components/toc/ } + - text: Overlays + items: + - { text: Dialog, link: /components/dialog/ } + - { text: Disclosure, link: /components/disclosure/ } + - { text: Dropdown, link: /components/dropdown/ } + - text: Page Content + items: + - { text: Accordion, link: /components/accordion/ } + - { text: Alert, link: /components/alert/ } + - { text: Badge, link: /components/badge/ } + - { text: Calendar Tile, link: /components/calendar-tile/ } + - { text: Callout, link: /components/callout/ } + - { text: Card, link: /components/card/ } + - { text: CTA Band, link: /components/cta-band/ } + - { text: Empty State, link: /components/empty-state/ } + - { text: Footer, link: /components/footer/ } + - { text: Grid, link: /components/grid/ } + - { text: Hero, link: /components/hero/ } + - { text: Link Hub, link: /components/link-hub/ } + - { text: List, link: /components/list/ } + - { text: Loading Indicator, link: /components/loader/ } + - { text: Prose, link: /components/prose/ } + - { text: Quote, link: /components/quote/ } + - { text: Sponsor, link: /components/sponsor/ } + - { text: Stat, link: /components/stat/ } + - { text: Step Indicator, link: /components/step-indicator/ } + - { text: Table, link: /components/table/ } + - { text: Timeline, link: /components/timeline/ } + +layouts: + - text: Layouts + items: + - { text: Overview, link: /layouts/ } + - { text: Basic Content Page, link: /layouts/basic/ } + - { text: Marketing Page, link: /layouts/marketing/ } + - { text: Docs with Sidenav, link: /layouts/docs-sidenav/ } + - { text: Blog Article, link: /layouts/article/ } + - { text: Sidebar App Shell, link: /layouts/app-shell/ } + - { text: Dashboard, link: /layouts/dashboard/ } diff --git a/docs/_includes/head.html b/docs/_includes/head.html new file mode 100644 index 0000000..eed1362 --- /dev/null +++ b/docs/_includes/head.html @@ -0,0 +1,36 @@ + + + + + + + + + + + {{ page.title | default: site.title }} + + {% assign entry = site.data.manifest["docs/src/main.js"] %} + {% for href in entry.css %} + + {% endfor %} + + diff --git a/docs/_includes/nav.html b/docs/_includes/nav.html new file mode 100644 index 0000000..52152fa --- /dev/null +++ b/docs/_includes/nav.html @@ -0,0 +1,15 @@ + + {% for item in site.data.nav %} + {% assign is_current = false %} + {% if item.section %} + {% if item.section == page.section %}{% assign is_current = true %}{% endif %} + {% else %} + {% if page.url == item.link %}{% assign is_current = true %}{% endif %} + {% endif %} + {{ item.text }} + {% endfor %} + + + + + diff --git a/docs/_includes/pager.html b/docs/_includes/pager.html new file mode 100644 index 0000000..7f83de2 --- /dev/null +++ b/docs/_includes/pager.html @@ -0,0 +1,6 @@ +{% if page.prev_url or page.next_url %} + +{% endif %} diff --git a/docs/_includes/sidebar.html b/docs/_includes/sidebar.html new file mode 100644 index 0000000..22f18b8 --- /dev/null +++ b/docs/_includes/sidebar.html @@ -0,0 +1,9 @@ + + {% for group in include.groups %} + + {% for item in group.items %} + {{ item.text }} + {% endfor %} + + {% endfor %} + diff --git a/docs/_includes/toc.html b/docs/_includes/toc.html new file mode 100644 index 0000000..16d9221 --- /dev/null +++ b/docs/_includes/toc.html @@ -0,0 +1,8 @@ +{% assign toc_items = include.content | toc_headings %} +{% if toc_items.size > 0 %} + + {% for h in toc_items %} + {{ h.text }} + {% endfor %} + +{% endif %} diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html new file mode 100644 index 0000000..7f39ebc --- /dev/null +++ b/docs/_layouts/default.html @@ -0,0 +1,24 @@ + + + {% include head.html %} + + {% include nav.html %} + {% assign sidebar_groups = site.data.sidebar[page.section] %} +
+ {% if sidebar_groups %} +
+ {% include sidebar.html groups=sidebar_groups %} +
+ {% endif %} +
+
+ {{ content }} +
+ {% include pager.html %} +
+ +
+ + diff --git a/docs/_layouts/home.html b/docs/_layouts/home.html new file mode 100644 index 0000000..2084886 --- /dev/null +++ b/docs/_layouts/home.html @@ -0,0 +1,8 @@ + + + {% include head.html %} + + {% include nav.html %} + {{ content }} + + diff --git a/docs/_plugins/callout_tag.rb b/docs/_plugins/callout_tag.rb new file mode 100644 index 0000000..982568f --- /dev/null +++ b/docs/_plugins/callout_tag.rb @@ -0,0 +1,36 @@ +require "cgi" + +module VoxBlocks + # {% callout tip "Reading the scale" %} + # Lower numbers are lighter tints... + # {% endcallout %} + # + # Replaces VitePress's `::: tip ... :::` container syntax, which kramdown + # has no equivalent for. Re-runs the block body through the site's own + # markdown converter so markdown inside the callout (bold, inline code, + # links) still works, then wraps it as . + class CalloutTag < Liquid::Block + VARIANTS = %w[info tip warning danger].freeze + + def initialize(tag_name, markup, options) + super + if markup.strip =~ /\A(\w+)(?:\s+"([^"]*)")?\z/ + @variant = VARIANTS.include?(Regexp.last_match(1)) ? Regexp.last_match(1) : "info" + @heading = Regexp.last_match(2) + else + @variant = "info" + end + end + + def render(context) + body = super + site = context.registers[:site] + converter = site.find_converter_instance(Jekyll::Converters::Markdown) + html = converter.convert(body) + heading_attr = @heading ? %( heading="#{CGI.escapeHTML(@heading)}") : "" + %(\n#{html}\n) + end + end +end + +Liquid::Template.register_tag("callout", VoxBlocks::CalloutTag) diff --git a/docs/_plugins/sidebar_pager.rb b/docs/_plugins/sidebar_pager.rb new file mode 100644 index 0000000..3a2e144 --- /dev/null +++ b/docs/_plugins/sidebar_pager.rb @@ -0,0 +1,60 @@ +module VoxBlocks + # Walks every section of _data/sidebar.yml once and, for each page it + # finds there, stamps two things onto page.data: + # + # - 'section': the top-level sidebar.yml key the page belongs to (e.g. + # 'guide', 'utilities'). This is the single source of truth for + # "which section is this page in" — _layouts/default.html uses it to + # pick which sidebar to render, and _includes/nav.html (via nav.yml's + # own `section:` field) uses it to decide which header link is + # current. Deliberately NOT derived from the URL's first path + # segment: /guide/colors/ and /guide/utilities/ both live on disk + # under /guide/ but belong to the "utilities" section, because + # that's how sidebar.yml groups them. + # + # - 'prev_url'/'prev_title'/'next_url'/'next_title': the previous/next + # page within that same section, for _includes/pager.html. Scoped + # per section so a section's last page has no "next" rather than + # jumping into a different section's now-invisible sidebar. + # + # Matched by page.url == entry link, which is why every link in + # sidebar.yml must be baseurl-free with a trailing slash (matching the + # `permalink: /:path/` default). + class SidebarPagerGenerator < Jekyll::Generator + priority :low + + def generate(site) + by_url = site.pages.each_with_object({}) { |p, h| h[p.url] = p } + sections = site.data['sidebar'] || {} + + sections.each do |section_name, groups| + flat = flatten(groups) + + flat.each_with_index do |entry, i| + page = by_url[entry['link']] + next unless page + + page.data['section'] = section_name + + if i.positive? + page.data['prev_url'] = flat[i - 1]['link'] + page.data['prev_title'] = flat[i - 1]['text'] + end + if i < flat.length - 1 + page.data['next_url'] = flat[i + 1]['link'] + page.data['next_title'] = flat[i + 1]['text'] + end + end + end + end + + private + + def flatten(items) + items.each_with_object([]) do |item, out| + out << { 'text' => item['text'], 'link' => item['link'] } if item['link'] + out.concat(flatten(item['items'])) if item['items'] + end + end + end +end diff --git a/docs/_plugins/toc_filter.rb b/docs/_plugins/toc_filter.rb new file mode 100644 index 0000000..d30a8d4 --- /dev/null +++ b/docs/_plugins/toc_filter.rb @@ -0,0 +1,23 @@ +# Extracts a page's h2 headings (kramdown auto-generates heading ids) as a +# Liquid filter applied directly to the layout's `content` variable, e.g. +# `{{ content | toc_headings }}`. h2-only, matching current actual usage — +# no page in the site nests h3s under the "On this page" panel today. +# +# Deliberately a filter, not a :post_convert hook writing to page.data: +# that approach mutates page.data after the layout's Liquid payload is +# already built, so `page.toc` reads nil during layout rendering even +# though page.data ends up correct by the time the file is written. A +# filter applied to `content` inside the layout has no such timing gap. +module VoxBlocks + module TocFilter + def toc_headings(html) + return [] unless html + + html.scan(/]*\sid="([^"]+)"[^>]*>(.*?)<\/h2>/m).map do |id, inner| + { "id" => id, "text" => inner.gsub(/<[^>]+>/, "").strip } + end + end + end +end + +Liquid::Template.register_filter(VoxBlocks::TocFilter) diff --git a/docs/components/accordion.md b/docs/components/accordion/index.md similarity index 92% rename from docs/components/accordion.md rename to docs/components/accordion/index.md index 9eebe1a..f821c2b 100644 --- a/docs/components/accordion.md +++ b/docs/components/accordion/index.md @@ -1,3 +1,7 @@ +--- +title: "Accordion" +--- + # Accordion `` stacks expandable panels. Add `single` to keep at most one open. @@ -11,7 +15,7 @@

Swap the package repositories and upgrade; agents and server interoperate during transition.

-

The Vox Pupuli community, under open governance.

+

The OpenVox community, under open governance.

 diff --git a/docs/components/alert.md b/docs/components/alert/index.md similarity index 80% rename from docs/components/alert.md rename to docs/components/alert/index.md index 709606d..c55531a 100644 --- a/docs/components/alert.md +++ b/docs/components/alert/index.md @@ -1,6 +1,10 @@ +--- +title: "Alert" +--- + # Alert -`` is a page-level notification, optionally dismissible. For static advisory text within prose, use [Callout](./callout). +`` is a page-level notification, optionally dismissible. For static advisory text within prose, use [Callout](../callout/). Shows an icon matching `variant` automatically — no icon slot to fill in.

OpenVox 8.2 is now the default.

 @@ -19,7 +23,7 @@ | Attribute | Type | Default | Description | | --- | --- | --- | --- | -| `variant` | `info \| success \| warning \| danger` | `info` | Semantic style | +| `variant` | `info` \| `success` \| `warning` \| `danger` | `info` | Semantic style | | `heading` | `string` | — | Bold first line | | `dismissible` | `boolean` | `false` | Show a close button | | `open` | `boolean` | `true` | Visibility; cleared on dismiss | diff --git a/docs/components/avatar.md b/docs/components/avatar/index.md similarity index 56% rename from docs/components/avatar.md rename to docs/components/avatar/index.md index 4536697..3b5e7d0 100644 --- a/docs/components/avatar.md +++ b/docs/components/avatar/index.md @@ -1,17 +1,21 @@ +--- +title: "Avatar" +--- + # Avatar `` shows a user image, falling back to initials.
- + - - + +
```html - - + + ``` ## API @@ -21,4 +25,4 @@ | `src` | `string` | — | Image URL | | `alt` | `string` | `''` | Accessible name | | `initials` | `string` | `''` | Fallback initials | -| `size` | `sm \| md \| lg \| xl` | `md` | Diameter | +| `size` | `sm` \| `md` \| `lg` \| `xl` | `md` | Diameter | diff --git a/docs/components/badge.md b/docs/components/badge/index.md similarity index 86% rename from docs/components/badge.md rename to docs/components/badge/index.md index 7142861..aa138a4 100644 --- a/docs/components/badge.md +++ b/docs/components/badge/index.md @@ -1,3 +1,7 @@ +--- +title: "Badge" +--- + # Badge `` is a small status pill for version labels, statuses, and deprecation notices. @@ -24,4 +28,4 @@ | Attribute | Type | Default | Description | | --- | --- | --- | --- | -| `variant` | `brand \| tip \| warning \| danger \| neutral` | `brand` | Semantic style | +| `variant` | `brand` \| `tip` \| `warning` \| `danger` \| `neutral` | `brand` | Semantic style | diff --git a/docs/components/billboard.md b/docs/components/billboard/index.md similarity index 79% rename from docs/components/billboard.md rename to docs/components/billboard/index.md index 8ebc9e5..f3cdbef 100644 --- a/docs/components/billboard.md +++ b/docs/components/billboard/index.md @@ -1,11 +1,15 @@ +--- +title: "Billboard" +--- + # Billboard `` is a split media-and-content section for landing pages.
- -

Vox Pupuli maintains hundreds of modules, tools, and gems — kept alive by a worldwide community of contributors.

+ +

OpenVox modules are community-maintained — hundreds of them, kept alive by contributors worldwide.

Browse modules How to contribute diff --git a/docs/components/breadcrumbs.md b/docs/components/breadcrumbs/index.md similarity index 94% rename from docs/components/breadcrumbs.md rename to docs/components/breadcrumbs/index.md index 37b7102..99e7b70 100644 --- a/docs/components/breadcrumbs.md +++ b/docs/components/breadcrumbs/index.md @@ -1,3 +1,7 @@ +--- +title: "Breadcrumbs" +--- + # Breadcrumbs `` shows a trail of parent pages. Children are plain links; the current page is a ``. diff --git a/docs/components/button.md b/docs/components/button/index.md similarity index 77% rename from docs/components/button.md rename to docs/components/button/index.md index ef718a2..92c76a6 100644 --- a/docs/components/button.md +++ b/docs/components/button/index.md @@ -1,3 +1,7 @@ +--- +title: Button +--- + # Button `` renders an accessible button, or a link styled as a button when `href` is set. @@ -35,11 +39,11 @@ ## As a link
- Visit Vox Pupuli + Visit OpenVox
```html -Visit Vox Pupuli +Visit OpenVox ``` ## Disabled @@ -56,9 +60,9 @@ | Attribute | Type | Default | Description | | --- | --- | --- | --- | -| `variant` | `brand \| alt \| danger \| ghost` | `brand` | Visual style | -| `size` | `sm \| md \| lg` | `md` | Button size | +| `variant` | `brand` \| `alt` \| `danger` \| `ghost` | `brand` | Visual style | +| `size` | `sm` \| `md` \| `lg` | `md` | Button size | | `href` | `string` | — | Render as a link | | `target` | `string` | — | Link target (adds `rel="noreferrer"` for `_blank`) | -| `type` | `button \| submit \| reset` | `button` | Button type | +| `type` | `button` \| `submit` \| `reset` | `button` | Button type | | `disabled` | `boolean` | `false` | Disable the button | diff --git a/docs/components/calendar-tile.md b/docs/components/calendar-tile/index.md similarity index 80% rename from docs/components/calendar-tile.md rename to docs/components/calendar-tile/index.md index b27e693..a772895 100644 --- a/docs/components/calendar-tile.md +++ b/docs/components/calendar-tile/index.md @@ -1,3 +1,7 @@ +--- +title: "Calendar Tile" +--- + # Calendar Tile `` is a compact date block for event listings. @@ -6,7 +10,7 @@
VoxConf 2026
- Community conference, online + Community conference, online
diff --git a/docs/components/callout.md b/docs/components/callout/index.md similarity index 82% rename from docs/components/callout.md rename to docs/components/callout/index.md index 4b006e0..f4f06cf 100644 --- a/docs/components/callout.md +++ b/docs/components/callout/index.md @@ -1,6 +1,10 @@ +--- +title: "Callout" +--- + # Callout -`` is an admonition block matching the custom containers used across the OpenVox docs. +`` is an admonition block matching the custom containers used across the OpenVox docs. Shows an icon matching `variant` automatically — no icon slot to fill in. ## Variants @@ -35,5 +39,5 @@ | Attribute | Type | Default | Description | | --- | --- | --- | --- | -| `variant` | `info \| tip \| warning \| danger` | `info` | Semantic style | +| `variant` | `info` \| `tip` \| `warning` \| `danger` | `info` | Semantic style | | `heading` | `string` | Variant name | Heading text | diff --git a/docs/components/card.md b/docs/components/card/index.md similarity index 63% rename from docs/components/card.md rename to docs/components/card/index.md index a19457e..e7be048 100644 --- a/docs/components/card.md +++ b/docs/components/card/index.md @@ -1,3 +1,7 @@ +--- +title: "Card" +--- + # Card `` is a feature tile in the style of the OpenVox docs landing page. With `href` the whole card becomes one link. @@ -6,11 +10,11 @@
- ⚙️ + Installation and configuration of the server components. - 💾 + Store and query infrastructure data. @@ -20,7 +24,7 @@ ```html - ⚙️ + Installation and configuration of the server components. ``` @@ -31,7 +35,7 @@ Use the `badge` slot to place a badge or label in the top-right corner of the ca
- 🧱 + Pro Grab-and-go patterns for common site, app, and online product workflows. @@ -43,7 +47,7 @@ Use the `badge` slot to place a badge or label in the top-right corner of the ca ```html - 🧱 + Pro Grab-and-go patterns for common site, app, and online product workflows. diff --git a/docs/components/checkbox.md b/docs/components/checkbox/index.md similarity index 96% rename from docs/components/checkbox.md rename to docs/components/checkbox/index.md index f9a15f5..36f246c 100644 --- a/docs/components/checkbox.md +++ b/docs/components/checkbox/index.md @@ -1,3 +1,7 @@ +--- +title: "Checkbox" +--- + # Checkbox `` is a themed checkbox. diff --git a/docs/components/cta-band.md b/docs/components/cta-band/index.md similarity index 97% rename from docs/components/cta-band.md rename to docs/components/cta-band/index.md index 22ec66d..2e021b6 100644 --- a/docs/components/cta-band.md +++ b/docs/components/cta-band/index.md @@ -1,3 +1,7 @@ +--- +title: "CTA Band" +--- + # CTA Band `` is a centered, full-width call-to-action panel — the closing pitch at the bottom of a page. diff --git a/docs/components/cta.md b/docs/components/cta/index.md similarity index 75% rename from docs/components/cta.md rename to docs/components/cta/index.md index 73b1305..6040c25 100644 --- a/docs/components/cta.md +++ b/docs/components/cta/index.md @@ -1,9 +1,13 @@ +--- +title: "Call to Action" +--- + # Call to Action `` is an emphasized link with a trailing arrow.
- Explore the module catalog + Explore the module catalog
```html diff --git a/docs/components/dialog.md b/docs/components/dialog/index.md similarity index 98% rename from docs/components/dialog.md rename to docs/components/dialog/index.md index 23067fc..2c3f6e1 100644 --- a/docs/components/dialog.md +++ b/docs/components/dialog/index.md @@ -1,3 +1,7 @@ +--- +title: "Dialog" +--- + # Dialog `` is a modal built on the native `` element — focus trapping and Escape-to-close come from the platform. diff --git a/docs/components/disclosure.md b/docs/components/disclosure/index.md similarity index 95% rename from docs/components/disclosure.md rename to docs/components/disclosure/index.md index 0b7c2c0..8658e1b 100644 --- a/docs/components/disclosure.md +++ b/docs/components/disclosure/index.md @@ -1,3 +1,7 @@ +--- +title: "Disclosure" +--- + # Disclosure `` is a single show/hide toggle for supplementary content. diff --git a/docs/components/dropdown.md b/docs/components/dropdown/index.md similarity index 96% rename from docs/components/dropdown.md rename to docs/components/dropdown/index.md index 7f15c78..303ac4d 100644 --- a/docs/components/dropdown.md +++ b/docs/components/dropdown/index.md @@ -1,3 +1,7 @@ +--- +title: "Dropdown" +--- + # Dropdown `` is a menu button. Entries are plain `` or `
`, diff --git a/src/components/alert/vox-alert.ts b/src/components/alert/vox-alert.ts index 2e43e7b..c126c96 100644 --- a/src/components/alert/vox-alert.ts +++ b/src/components/alert/vox-alert.ts @@ -1,10 +1,19 @@ import { LitElement, html, css, nothing } from 'lit'; import { customElement, property } from 'lit/decorators.js'; +import { ICON_PATHS, type IconName } from '../icon/icon-paths.js'; export type AlertVariant = 'info' | 'success' | 'warning' | 'danger'; +const VARIANT_ICON: Record = { + info: 'info', + success: 'check-circle', + warning: 'warning', + danger: 'x-circle', +}; + /** - * A page-level notification message, optionally dismissible. + * A page-level notification message, optionally dismissible. Shows an + * icon matching `variant` automatically — no icon slot to fill in. * For static advisory text inside prose, see ``. * * @slot - Alert message. @@ -43,6 +52,13 @@ export class VoxAlert extends LitElement { flex: 1 1 auto; } + .icon { + flex: none; + width: 20px; + height: 20px; + margin-top: 1px; + } + .heading { margin: 0 0 var(--vox-space-1); font-size: 14px; @@ -56,6 +72,9 @@ export class VoxAlert extends LitElement { .info .heading { color: var(--vox-color-brand-1); } + .info .icon { + color: var(--vox-color-brand-1); + } .success { background-color: var(--vox-color-tip-soft); @@ -64,6 +83,9 @@ export class VoxAlert extends LitElement { .success .heading { color: var(--vox-color-tip-1); } + .success .icon { + color: var(--vox-color-tip-1); + } .warning { background-color: var(--vox-color-warning-soft); @@ -72,6 +94,9 @@ export class VoxAlert extends LitElement { .warning .heading { color: var(--vox-color-warning-1); } + .warning .icon { + color: var(--vox-color-warning-1); + } .danger { background-color: var(--vox-color-danger-soft); @@ -80,6 +105,9 @@ export class VoxAlert extends LitElement { .danger .heading { color: var(--vox-color-danger-1); } + .danger .icon { + color: var(--vox-color-danger-1); + } .close { flex: none; @@ -128,6 +156,18 @@ export class VoxAlert extends LitElement { render() { return html`