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) {