Fix Parcel/Webpack/Vite images

Orange-OpenSource · Aug 20, 2024 · a767efd · a767efd
1 parent 8872f2d
commit a767efd
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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.
 
@@ -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)
+      ![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.
 
@@ -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 = {