From d0cc42c009c2f680e2fdfd3df4cf06b90d0bfd09 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Wed, 5 Apr 2023 08:10:47 +0200 Subject: [PATCH] Docs: add missing `twbs/examples` and change sorting (#38407) * Docs: add missing twbs/examples * Change sorting of examples.yml --------- Co-authored-by: XhmikosR --- .../content/docs/5.3/customize/color-modes.md | 4 +++ site/content/docs/5.3/examples/_index.md | 8 ++--- .../docs/5.3/getting-started/javascript.md | 3 ++ site/data/examples.yml | 34 ++++++++++++------- 4 files changed, 33 insertions(+), 16 deletions(-) diff --git a/site/content/docs/5.3/customize/color-modes.md b/site/content/docs/5.3/customize/color-modes.md index c6f9bef200..2f1b774cb6 100644 --- a/site/content/docs/5.3/customize/color-modes.md +++ b/site/content/docs/5.3/customize/color-modes.md @@ -7,6 +7,10 @@ toc: true added: "5.3" --- +{{< callout >}} +**Try it yourself!** Download the source code and working demo for using Bootstrap with Stylelint, and the color modes from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/color-modes). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/color-modes?file=index.html). +{{< /callout >}} + ## Dark mode **Bootstrap now supports color modes, starting with dark mode!** With v5.3.0 you can implement your own color mode toggler (see below for an example from Bootstrap's docs) and apply the different color modes as you see fit. We support a light mode (default) and now dark mode. Color modes can be toggled globally on the `` element, or on specific components and elements, thanks to the `data-bs-theme` attribute. diff --git a/site/content/docs/5.3/examples/_index.md b/site/content/docs/5.3/examples/_index.md index 2fa9a45285..c3c242312a 100644 --- a/site/content/docs/5.3/examples/_index.md +++ b/site/content/docs/5.3/examples/_index.md @@ -32,11 +32,11 @@ aliases: "/examples/"

{{ $example.description }}

- {{- $htmlIndexLocation := "index.html" -}} - {{- if $example.htmlIndexLocation -}} - {{- $htmlIndexLocation = printf "%s/index.html" $example.htmlIndexLocation -}} + {{- $indexPath := "index.html" -}} + {{- if $example.indexPath -}} + {{- $indexPath = $example.indexPath -}} {{- end }} - + Edit in StackBlitz diff --git a/site/content/docs/5.3/getting-started/javascript.md b/site/content/docs/5.3/getting-started/javascript.md index ef3c3ba643..8efb2fb00a 100644 --- a/site/content/docs/5.3/getting-started/javascript.md +++ b/site/content/docs/5.3/getting-started/javascript.md @@ -19,6 +19,9 @@ While the Bootstrap CSS can be used with any framework, **the Bootstrap JavaScri A better alternative for those using this type of frameworks is to use a framework-specific package **instead of** the Bootstrap JavaScript. Here are some of the most popular options: - React: [React Bootstrap](https://react-bootstrap.github.io/) + {{< callout >}} + **Try it yourself!** Download the source code and working demo for using Bootstrap with React, Next.js, and React Bootstrap from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/react-nextjs). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/react-nextjs?file=src%2Fpages%2Findex.tsx). + {{< /callout >}} - Vue: [BootstrapVue](https://bootstrap-vue.org/) (currently only supports Vue 2 and Bootstrap 4) - Angular: [ng-bootstrap](https://ng-bootstrap.github.io/) diff --git a/site/data/examples.yml b/site/data/examples.yml index 4b85c57b1f..99d34752b5 100644 --- a/site/data/examples.yml +++ b/site/data/examples.yml @@ -11,21 +11,31 @@ - name: Sass & ESM JS description: "Import and compile Bootstrap's Sass with Autoprefixer and Stylelint, and compile our source JavaScript with an ESM shim." url: /examples/tree/main/sass-js-esm - - name: Webpack - description: "Import and bundle Bootstrap's source Sass and JavaScript with Webpack." - url: /examples/tree/main/webpack - htmlIndexLocation: src - - name: Parcel - description: "Import and bundle Bootstrap's source Sass and JavaScript via Parcel." - url: /examples/tree/main/parcel - htmlIndexLocation: src - - name: Vite - description: "Import and bundle Bootstrap's source Sass and JavaScript with Vite." - url: /examples/tree/main/vite - htmlIndexLocation: src + - name: Bootstrap color modes + description: "Import and compile Bootstrap's Sass with Stylelint, and the Bootstrap color modes." + url: /examples/tree/main/color-modes - name: Bootstrap Icons description: "Import and compile Bootstrap's Sass with Stylelint, PurgeCSS, and the Bootstrap Icons web font." url: /examples/tree/main/icons-font + - name: Parcel + description: "Import and bundle Bootstrap's source Sass and JavaScript via Parcel." + url: /examples/tree/main/parcel + indexPath: src/index.html + indexPath: src/index.html + - name: React + description: "Import and bundle Bootstrap's source Sass and JavaScript with React, Next.js, and React Bootstrap." + url: /examples/tree/main/react-nextjs + indexPath: src/pages/index.tsx + - name: Vite + description: "Import and bundle Bootstrap's source Sass and JavaScript with Vite." + url: /examples/tree/main/vite + - name: Vue + description: "Import and bundle Bootstrap's source Sass and JavaScript with Vue and Vite." + url: /examples/tree/main/vue + - name: Webpack + description: "Import and bundle Bootstrap's source Sass and JavaScript with Webpack." + url: /examples/tree/main/webpack + indexPath: src/index.html - category: Snippets description: "Common patterns for building sites and apps that build on existing components and utilities with custom CSS and more."