From f8554e0b7c789b1de0e936d451e13de3011f368b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 27 Jul 2026 23:51:38 -0700 Subject: [PATCH] Add an Extend page with a community plugin registry Third-party plugins were scattered across the web with no canonical list, so drive one from `site/data/extensions.yml`: contributors add a single YAML block and the docs build validates it, with a dialog on the page spelling out the fields. Entries filter by category and major version straight from the table headers, and v6 sits disabled until something supports it. Extend gets its own navbar entry beside Examples rather than living under Docs, so `SingleLayout` picks up the roomier header those standalone pages want. --- site/data/extensions.yml | 188 +++++++++++ site/src/components/header/Navigation.astro | 15 +- .../shortcodes/PluginRegistry.astro | 295 ++++++++++++++++++ site/src/components/shortcodes/index.ts | 1 + site/src/layouts/SingleLayout.astro | 12 +- site/src/libs/data.ts | 18 ++ .../pages/docs/[version]/extend/index.astro | 107 +++++++ site/src/scss/_content.scss | 3 +- 8 files changed, 630 insertions(+), 9 deletions(-) create mode 100644 site/data/extensions.yml create mode 100644 site/src/components/shortcodes/PluginRegistry.astro create mode 100644 site/src/pages/docs/[version]/extend/index.astro diff --git a/site/data/extensions.yml b/site/data/extensions.yml new file mode 100644 index 000000000000..516091e0ce8d --- /dev/null +++ b/site/data/extensions.yml @@ -0,0 +1,188 @@ +# Community-maintained, third-party Bootstrap plugins and add-ons. +# +# To add an entry, append a block below. Keep entries sorted by category, then +# by name. Provide `site`, `github_repo`, or both — everything else is required: +# +# - name: Plugin name +# site: https://example.com/ # Homepage or docs (optional) +# github_repo: https://github.com/… # Source repository (optional) +# description: One sentence, ending with a period. +# category: Forms # Forms, Integrations, Pickers, Tables, Themes, or UI +# versions: [4, 5] # Bootstrap major versions supported + +- name: bootstrap-fileinput + site: https://plugins.krajee.com/file-input + github_repo: https://github.com/kartik-v/bootstrap-fileinput + description: File input widget with previews, drag and drop, and AJAX uploads. + category: Forms + versions: [4, 5] + +- name: bootstrap-maxlength + site: https://mimo84.github.io/bootstrap-maxlength/ + github_repo: https://github.com/mimo84/bootstrap-maxlength + description: Show a live character counter as users type into length-limited fields. + category: Forms + versions: [4, 5] + +- name: bootstrap-multiselect + site: https://davidstutz.github.io/bootstrap-multiselect/ + github_repo: https://github.com/davidstutz/bootstrap-multiselect + description: Turn multiple select elements into dropdowns with checkboxes and search. + category: Forms + versions: [4] + +- name: bootstrap-select + site: https://developer.snapappointments.com/bootstrap-select/ + github_repo: https://github.com/snapappointments/bootstrap-select + description: The original jQuery select replacement with search and multiselect support. + category: Forms + versions: [4] + +- name: bootstrap-select (CrestApps fork) + github_repo: https://github.com/CrestApps/bootstrap-select + description: Dependency-free, vanilla JavaScript rewrite of bootstrap-select for Bootstrap 5 and later. + category: Forms + versions: [5] + +- name: bootstrap-slider + site: https://seiyria.com/bootstrap-slider/ + github_repo: https://github.com/seiyria/bootstrap-slider + description: Single value and range slider controls styled to match Bootstrap. + category: Forms + versions: [4] + +- name: Bootstrap TouchSpin + site: https://www.virtuosoft.eu/code/bootstrap-touchspin/ + github_repo: https://github.com/istvan-ujjmeszaros/bootstrap-touchspin + description: Mobile-friendly spinner buttons for number inputs. + category: Forms + versions: [4, 5] + +- name: bootstrap5-tags + github_repo: https://github.com/lekoala/bootstrap5-tags + description: Accessible tag and autocomplete input built on the native select element. + category: Forms + versions: [5] + +- name: FormValidation + site: https://formvalidation.io/ + description: Validation library with first-class Bootstrap form markup and feedback styles. + category: Forms + versions: [4, 5] + +- name: Select2 + site: https://select2.org/ + github_repo: https://github.com/select2/select2 + description: Searchable select box with remote data loading and tagging, plus a Bootstrap theme. + category: Forms + versions: [4] + +- name: BootstrapVueNext + site: https://bootstrap-vue-next.github.io/bootstrap-vue-next/ + github_repo: https://github.com/bootstrap-vue-next/bootstrap-vue-next + description: Bootstrap components rebuilt for Vue 3. + category: Integrations + versions: [5] + +- name: ng-bootstrap + site: https://ng-bootstrap.github.io/ + github_repo: https://github.com/ng-bootstrap/ng-bootstrap + description: Bootstrap widgets implemented as native Angular components. + category: Integrations + versions: [4, 5] + +- name: React Bootstrap + site: https://react-bootstrap.github.io/ + github_repo: https://github.com/react-bootstrap/react-bootstrap + description: Bootstrap components rebuilt as React components, without jQuery. + category: Integrations + versions: [5] + +- name: reactstrap + site: https://reactstrap.github.io/ + github_repo: https://github.com/reactstrap/reactstrap + description: Stateless React components wrapping Bootstrap markup. + category: Integrations + versions: [4, 5] + +- name: bootstrap-datepicker + site: https://bootstrap-datepicker.readthedocs.io/ + github_repo: https://github.com/uxsolutions/bootstrap-datepicker + description: Long-standing jQuery date picker with ranges, formats, and localization. + category: Pickers + versions: [4] + +- name: Flatpickr + site: https://flatpickr.js.org/ + github_repo: https://github.com/flatpickr/flatpickr + description: Lightweight, dependency-free date and time picker that themes well alongside Bootstrap. + category: Pickers + versions: [4, 5] + +- name: Tempus Dominus + site: https://getdatepicker.com/ + github_repo: https://github.com/Eonasdan/tempus-dominus + description: Date and time picker positioned with Popper, with no jQuery dependency. + category: Pickers + versions: [5] + +- name: vanillajs-datepicker + site: https://mymth.github.io/vanillajs-datepicker/ + github_repo: https://github.com/mymth/vanillajs-datepicker + description: Dependency-free date picker shipping a dedicated Bootstrap 5 stylesheet. + category: Pickers + versions: [5] + +- name: Bootstrap Table + site: https://bootstrap-table.com/ + github_repo: https://github.com/wenzhixin/bootstrap-table + description: Extended table with sorting, pagination, row selection, and an extension ecosystem. + category: Tables + versions: [4, 5] + +- name: DataTables + site: https://datatables.net/ + github_repo: https://github.com/DataTables/DataTables + description: Advanced table plugin with official Bootstrap styling integrations. + category: Tables + versions: [4, 5] + +- name: Bootswatch + site: https://bootswatch.com/ + github_repo: https://github.com/thomaspark/bootswatch + description: A collection of free, drop-in themes that restyle Bootstrap with Sass variables. + category: Themes + versions: [4, 5] + +- name: Bootbox.js + site: https://bootboxjs.com/ + github_repo: https://github.com/bootboxjs/bootbox + description: Create programmatic alert, confirm, and prompt dialogs in a single call. + category: UI + versions: [4, 5] + +- name: bs-stepper + site: https://johann-s.github.io/bs-stepper/ + github_repo: https://github.com/Johann-S/bs-stepper + description: Lightweight, dependency-free stepper for multi-step forms and wizards. + category: UI + versions: [4, 5] + +- name: perfect-scrollbar + github_repo: https://github.com/mdbootstrap/perfect-scrollbar + description: Minimal custom scrollbar that keeps native scrolling behavior intact. + category: UI + versions: [4, 5] + +- name: Tab Collapse + github_repo: https://github.com/flatlogic/bootstrap-tabcollapse + description: Swap tabs for an accordion at small viewport sizes. + category: UI + versions: [5] + +- name: Toastr + site: https://codeseven.github.io/toastr/ + github_repo: https://github.com/CodeSeven/toastr + description: Non-blocking toast notifications with configurable positioning and timeouts. + category: UI + versions: [4] diff --git a/site/src/components/header/Navigation.astro b/site/src/components/header/Navigation.astro index 36d04a2f0c05..cb920320982c 100644 --- a/site/src/components/header/Navigation.astro +++ b/site/src/components/header/Navigation.astro @@ -22,7 +22,9 @@ interface Props { const { addedIn, layout, title } = Astro.props -const activeSection = !layout ? 'Home' : title === 'Examples' ? 'Examples' : 'Docs' +// Standalone pages that get their own navbar entry rather than falling under Docs. +const singlePages = ['Examples', 'Extend'] +const activeSection = !layout ? 'Home' : singlePages.includes(title) ? title : 'Docs' ---
@@ -79,6 +81,16 @@ const activeSection = !layout ? 'Home' : title === 'Examples' ? 'Examples' : 'Do ) } + + Extend + { + title === 'Extend' && ( + + ) + } + Icons @@ -109,6 +121,7 @@ const activeSection = !layout ? 'Home' : title === 'Examples' ? 'Examples' : 'Do Docs Examples + Extend Icons Blog diff --git a/site/src/components/shortcodes/PluginRegistry.astro b/site/src/components/shortcodes/PluginRegistry.astro new file mode 100644 index 000000000000..a6eaa00d181b --- /dev/null +++ b/site/src/components/shortcodes/PluginRegistry.astro @@ -0,0 +1,295 @@ +--- +import { getData } from '@libs/data' +import GitHubIcon from '@components/icons/GitHubIcon.astro' + +// Render the community plugin registry from `site/data/extensions.yml` so +// contributors only ever have to touch that one file. Markup mirrors the +// `BsTable` shortcode. +const extensions = getData('extensions') + +const versions = [4, 5, 6] as const +const categories = [...new Set(extensions.map((extension) => extension.category))].sort() + +const sortedExtensions = [...extensions].sort( + (a, b) => a.category.localeCompare(b.category) || a.name.localeCompare(b.name) +) + +// Both header dropdowns render from this one shape. `options` doubles as the list +// of label states each trigger has to reserve width for. +const filters = [ + { + name: 'category', + label: 'Category', + resetLabel: 'All categories', + // Categories are read off the entries, so each one always matches something. + options: categories.map((category) => ({ value: category, label: category, disabled: false })) + }, + { + name: 'version', + label: 'Versions', + resetLabel: 'All versions', + // The majors are a fixed list, so one nobody supports yet stays listed but + // disabled instead of offering a filter that can only come back empty. + options: versions.map((version) => ({ + value: String(version), + label: `v${version}`, + disabled: extensions.every((extension) => !extension.versions.includes(version)) + })) + } +] +--- + +
+
+
+ + +
+ +
+ +
+ + + + + + + + + + + + { + filters.map((filter) => ( + + )) + } + + + + { + sortedExtensions.map((extension) => ( + + + + + + + )) + } + + + + +
PluginDescription + {/* `container` lifts the menu out of `.table-responsive`, whose overflow would clip it. */} + +
+ + {filter.options.map((option) => ( + + ))} +
+
+ + + {extension.name} + + {extension.site && extension.github_repo && ( + + + + )} + + {extension.description}{extension.category} + + {extension.versions.map((version) => ( + v{version} + ))} + +
No plugins match the current filters.
+
+
+ + + + diff --git a/site/src/components/shortcodes/index.ts b/site/src/components/shortcodes/index.ts index 1bbf86b949c0..3a4e45380898 100644 --- a/site/src/components/shortcodes/index.ts +++ b/site/src/components/shortcodes/index.ts @@ -15,6 +15,7 @@ export { default as JsDocs } from './JsDocs.astro' export { default as MenuPlacementPlayground } from './MenuPlacementPlayground.astro' export { default as NavbarPlacementPlayground } from './NavbarPlacementPlayground.astro' export { default as Placeholder } from './Placeholder.astro' +export { default as PluginRegistry } from './PluginRegistry.astro' export { default as ResizableExample } from './ResizableExample.astro' export { default as ScrollspyDebug } from './ScrollspyDebug.astro' export { default as ScssDocs } from './ScssDocs.astro' diff --git a/site/src/layouts/SingleLayout.astro b/site/src/layouts/SingleLayout.astro index 6aca3f7ea7b6..c4e8e29929fe 100644 --- a/site/src/layouts/SingleLayout.astro +++ b/site/src/layouts/SingleLayout.astro @@ -12,15 +12,15 @@ const { description, title } = Astro.props -
-
-
-
+
+
+
+

{title}

-

{description}

+

{description}

-
+
diff --git a/site/src/libs/data.ts b/site/src/libs/data.ts index d091ced8d596..8a0a349b94be 100644 --- a/site/src/libs/data.ts +++ b/site/src/libs/data.ts @@ -35,6 +35,24 @@ const dataDefinitions = { versions: z.union([zVersionSemver, zVersionMajorMinor]).array() }) .array(), + extensions: z + .object({ + name: z.string(), + // A project homepage or docs site, and/or its source repository. At least + // one is required so every entry links somewhere. + site: z.url().optional(), + github_repo: z.url().optional(), + description: z.string(), + category: z.enum(['Forms', 'Integrations', 'Pickers', 'Tables', 'Themes', 'UI']), + versions: z + .union([z.literal(4), z.literal(5), z.literal(6)]) + .array() + .nonempty() + }) + .refine((extension) => extension.site !== undefined || extension.github_repo !== undefined, { + error: 'Each extension needs a `site`, a `github_repo`, or both.' + }) + .array(), examples: z .object({ category: z.string(), diff --git a/site/src/pages/docs/[version]/extend/index.astro b/site/src/pages/docs/[version]/extend/index.astro new file mode 100644 index 000000000000..9913e5e3100a --- /dev/null +++ b/site/src/pages/docs/[version]/extend/index.astro @@ -0,0 +1,107 @@ +--- +import SingleLayout from '@layouts/SingleLayout.astro' +import Callout from '@components/shortcodes/Callout.astro' +import CloseButton from '@components/shortcodes/CloseButton.astro' +import Code from '@components/shortcodes/Code.astro' +import PluginRegistry from '@components/shortcodes/PluginRegistry.astro' +import { getConfig } from '@libs/config' +import { getVersionedDocsPath } from '@libs/path' + +export function getStaticPaths() { + return [ + { + params: { version: getConfig().docs_version } + } + ] +} + +const registryFile = `${getConfig().repo}/blob/main/site/data/extensions.yml` +--- + + + +
+ + + +
+

Add your plugin

+ +
+
+

+ Append a block to {'site/data/extensions.yml'}: +

+ + + +

+ Provide a site, a github_repo, or both—entries with both show a GitHub link next + to the name. Every other field is required. +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FieldDescription
nameThe plugin’s name as its authors write it.
siteThe project homepage or documentation site.
github_repoThe source repository.
descriptionA single sentence, ending with a period.
category + One of Forms, Integrations, Pickers, Tables, + Themes, or UI. +
versionsThe Bootstrap major versions the plugin supports, such as [4, 5].
+
+ +

+ Keep entries sorted by category, then by name. The docs build validates the file, so a missing or misspelled + field fails CI with a message pointing at the problem. +

+
+
+ + Edit extensions.yml +
+ +
+ + diff --git a/site/src/scss/_content.scss b/site/src/scss/_content.scss index b4ddec07ab89..d3fbb96ffcde 100644 --- a/site/src/scss/_content.scss +++ b/site/src/scss/_content.scss @@ -123,11 +123,10 @@ .bd-title { --bs-heading-color: var(--bs-fg); - // @include font-size(3rem); } .bd-subtitle { - font-size: 1.125rem; + font-size: 1rem; font-weight: 300; @media (width >= 1024px) {