From bf814a8f44f01e9605b41fdc9e8b021102b56f85 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Mon, 19 Aug 2024 16:09:00 +0200 Subject: [PATCH 1/6] Fix a11y audit bug 1-4: "Hello, Boosted and Webpack!" --- site/content/docs/5.3/getting-started/webpack.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/content/docs/5.3/getting-started/webpack.md b/site/content/docs/5.3/getting-started/webpack.md index a4191b7ab7..724485b47a 100644 --- a/site/content/docs/5.3/getting-started/webpack.md +++ b/site/content/docs/5.3/getting-started/webpack.md @@ -265,7 +265,7 @@ Importing Boosted into Webpack requires the loaders we installed in the first se 4. **And you're done! 🎉** With Boosted's source Sass and JS fully loaded, your local development server should now look like this: - ![Webpack dev server running with Boosted](/assets/img/guides/webpack-dev-server-boosted.png) + ![Hello, Boosted and Webpack!](/assets/img/guides/webpack-dev-server-boosted.png) Now you can start adding any Boosted components you want to use. Be sure to [check out the complete Webpack example project](https://github.com/twbs/examples/tree/main/webpack) for how to include additional custom Sass and optimize your build by importing only the parts of Boosted's CSS and JS that you need. @@ -295,7 +295,7 @@ Then instantiate and use the plugin in the Webpack configuration: const autoprefixer = require('autoprefixer') const HtmlWebpackPlugin = require('html-webpack-plugin') +const miniCssExtractPlugin = require('mini-css-extract-plugin') - + module.exports = { mode: 'development', @@ -17,7 +18,8 @@ module.exports = { From 356e06ca24f7b9bd809f5be92ae8f6f403229b9f Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Mon, 19 Aug 2024 16:11:52 +0200 Subject: [PATCH 2/6] Fix a11y audit bug 1-4: "Hello, Boosted and Webpack!" --- site/content/docs/5.3/getting-started/webpack.md | 1 - 1 file changed, 1 deletion(-) diff --git a/site/content/docs/5.3/getting-started/webpack.md b/site/content/docs/5.3/getting-started/webpack.md index 724485b47a..91f34040ba 100644 --- a/site/content/docs/5.3/getting-started/webpack.md +++ b/site/content/docs/5.3/getting-started/webpack.md @@ -295,7 +295,6 @@ Then instantiate and use the plugin in the Webpack configuration: const autoprefixer = require('autoprefixer') const HtmlWebpackPlugin = require('html-webpack-plugin') +const miniCssExtractPlugin = require('mini-css-extract-plugin') - module.exports = { mode: 'development', @@ -17,7 +18,8 @@ module.exports = { From ff464b56b32308fb9168255257d886145d7276d8 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Mon, 19 Aug 2024 16:14:03 +0200 Subject: [PATCH 3/6] Fix a11y audit bug 1-4: "Hello, Boosted and Webpack!" --- site/content/docs/5.3/getting-started/webpack.md | 1 + 1 file changed, 1 insertion(+) diff --git a/site/content/docs/5.3/getting-started/webpack.md b/site/content/docs/5.3/getting-started/webpack.md index 91f34040ba..724485b47a 100644 --- a/site/content/docs/5.3/getting-started/webpack.md +++ b/site/content/docs/5.3/getting-started/webpack.md @@ -295,6 +295,7 @@ Then instantiate and use the plugin in the Webpack configuration: const autoprefixer = require('autoprefixer') const HtmlWebpackPlugin = require('html-webpack-plugin') +const miniCssExtractPlugin = require('mini-css-extract-plugin') + module.exports = { mode: 'development', @@ -17,7 +18,8 @@ module.exports = { From adb2bca791e892e463393fce58c0947618ce1fb4 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Tue, 20 Aug 2024 12:15:46 +0200 Subject: [PATCH 4/6] Fix Parcel/Webpack/Vite images --- site/content/docs/5.3/getting-started/parcel.md | 4 ++-- site/content/docs/5.3/getting-started/vite.md | 4 ++-- site/content/docs/5.3/getting-started/webpack.md | 8 ++++---- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/site/content/docs/5.3/getting-started/parcel.md b/site/content/docs/5.3/getting-started/parcel.md index 99aa7a0d80..df3d58b609 100644 --- a/site/content/docs/5.3/getting-started/parcel.md +++ b/site/content/docs/5.3/getting-started/parcel.md @@ -121,7 +121,7 @@ With dependencies installed and our project folder ready for us to start coding, npm start ``` - ![Parcel dev server running](/assets/img/guides/parcel-dev-server.png) + ![Unbranded web page displaying a title 'Hello, Boosted and Parcel!' and a default button](/assets/img/guides/parcel-dev-server.png) In the next and final section to this guide, we'll import all of Boosted's CSS and JavaScript. @@ -169,7 +169,7 @@ Importing Boosted into Parcel requires three imports, two into our `styles.scss` 4. **And you're done! 🎉** With Boosted's source Sass and JS fully loaded, your local development server should now look like this: - ![Parcel dev server running with Boosted](/assets/img/guides/parcel-dev-server-boosted.png) + ![Boosted branded web page displaying a title 'Hello, Boosted and Parcel!' and an orange primary button](/assets/img/guides/parcel-dev-server-boosted.png) Now you can start adding any Boosted components you want to use. Be sure to [check out the complete Parcel example project](https://github.com/twbs/examples/tree/main/parcel) for how to include additional custom Sass and optimize your build by importing only the parts of Boosted's CSS and JS that you need. diff --git a/site/content/docs/5.3/getting-started/vite.md b/site/content/docs/5.3/getting-started/vite.md index 214f505359..64db696595 100644 --- a/site/content/docs/5.3/getting-started/vite.md +++ b/site/content/docs/5.3/getting-started/vite.md @@ -142,7 +142,7 @@ With dependencies installed and our project folder ready for us to start coding, npm start ``` - ![Vite dev server running](/assets/img/guides/vite-dev-server.png) + ![Unbranded web page displaying a title 'Hello, Boosted and Vite!' and a default button](/assets/img/guides/vite-dev-server.png) In the next and final section to this guide, we’ll import all of Boosted’s CSS and JavaScript. @@ -191,7 +191,7 @@ In the next and final section to this guide, we’ll import all of Boosted’s C 4. **And you're done! 🎉** With Boosted's source Sass and JS fully loaded, your local development server should now look like this: - ![Vite dev server running with Boosted](/assets/img/guides/vite-dev-server-boosted.png) + ![Boosted branded web page displaying a title 'Hello, Boosted and Vite!' and an orange primary button](/assets/img/guides/vite-dev-server-boosted.png) Now you can start adding any Boosted components you want to use. Be sure to [check out the complete Vite example project](https://github.com/twbs/examples/tree/main/vite) for how to include additional custom Sass and optimize your build by importing only the parts of Boosted's CSS and JS that you need. diff --git a/site/content/docs/5.3/getting-started/webpack.md b/site/content/docs/5.3/getting-started/webpack.md index 724485b47a..b1041209d2 100644 --- a/site/content/docs/5.3/getting-started/webpack.md +++ b/site/content/docs/5.3/getting-started/webpack.md @@ -152,7 +152,7 @@ With dependencies installed and our project folder ready for us to start coding, npm start ``` - ![Webpack dev server running](/assets/img/guides/webpack-dev-server.png) + ![Unbranded web page displaying a title 'Hello, Boosted and Webpack!' and a default button](/assets/img/guides/webpack-dev-server.png) In the next and final section to this guide, we'll set up the Webpack loaders and import all of Boosted's CSS and JavaScript. @@ -263,11 +263,11 @@ Importing Boosted into Webpack requires the loaders we installed in the first se *[Read our JavaScript docs]({{< docsref "/getting-started/javascript/" >}}) for more information on how to use Boosted's plugins.* -4. **And you're done! 🎉** With Boosted's source Sass and JS fully loaded, your local development server should now look like this: + 4. **And you're done! 🎉** With Boosted's source Sass and JS fully loaded, your local development server should now look like this: - ![Hello, Boosted and Webpack!](/assets/img/guides/webpack-dev-server-boosted.png) + ![Boosted branded web page displaying a title 'Hello, Boosted and Webpack!' and an orange primary button](/assets/img/guides/webpack-dev-server-boosted.png) - Now you can start adding any Boosted components you want to use. Be sure to [check out the complete Webpack example project](https://github.com/twbs/examples/tree/main/webpack) for how to include additional custom Sass and optimize your build by importing only the parts of Boosted's CSS and JS that you need. + Now you can start adding any Boosted components you want to use. Be sure to [check out the complete Webpack example project](https://github.com/twbs/examples/tree/main/webpack) for how to include additional custom Sass and optimize your build by importing only the parts of Boosted's CSS and JS that you need. ## Production optimizations From 3f1104c0a032799c0619ba2eba56ba786f3460cd Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Tue, 20 Aug 2024 14:37:14 +0200 Subject: [PATCH 5/6] Fix Parcel/Webpack/Vite images --- site/content/docs/5.3/getting-started/vite.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/5.3/getting-started/vite.md b/site/content/docs/5.3/getting-started/vite.md index 64db696595..d9f7d2abc1 100644 --- a/site/content/docs/5.3/getting-started/vite.md +++ b/site/content/docs/5.3/getting-started/vite.md @@ -142,7 +142,7 @@ With dependencies installed and our project folder ready for us to start coding, npm start ``` - ![Unbranded web page displaying a title 'Hello, Boosted and Vite!' and a default button](/assets/img/guides/vite-dev-server.png) + ![Unbranded web page displaying a titl 'Hello, Boosted and Vite!' and a default button](/assets/img/guides/vite-dev-server.png) In the next and final section to this guide, we’ll import all of Boosted’s CSS and JavaScript. From 097f4c1748e726e62c93dccd077b65f040ef9c6a Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Tue, 20 Aug 2024 14:37:30 +0200 Subject: [PATCH 6/6] Fix Parcel/Webpack/Vite images --- site/content/docs/5.3/getting-started/vite.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/5.3/getting-started/vite.md b/site/content/docs/5.3/getting-started/vite.md index d9f7d2abc1..64db696595 100644 --- a/site/content/docs/5.3/getting-started/vite.md +++ b/site/content/docs/5.3/getting-started/vite.md @@ -142,7 +142,7 @@ With dependencies installed and our project folder ready for us to start coding, npm start ``` - ![Unbranded web page displaying a titl 'Hello, Boosted and Vite!' and a default button](/assets/img/guides/vite-dev-server.png) + ![Unbranded web page displaying a title 'Hello, Boosted and Vite!' and a default button](/assets/img/guides/vite-dev-server.png) In the next and final section to this guide, we’ll import all of Boosted’s CSS and JavaScript.