From ea0791b36485dd9e6c954b1f9ab9e5831b51d5bf Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Sun, 10 Mar 2024 08:41:47 +0200 Subject: [PATCH] Add a render image hook Images are now lazyloaded, they have width and height attributes and the classes are centralized. Only applies to Markdown 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 | 4 ++-- site/layouts/_default/_markup/render-image.html | 8 ++++++++ 4 files changed, 14 insertions(+), 6 deletions(-) create mode 100644 site/layouts/_default/_markup/render-image.html diff --git a/site/content/docs/5.3/getting-started/parcel.md b/site/content/docs/5.3/getting-started/parcel.md index a987b4587be1..4291f76cc094 100644 --- a/site/content/docs/5.3/getting-started/parcel.md +++ b/site/content/docs/5.3/getting-started/parcel.md @@ -111,7 +111,7 @@ With dependencies installed and our project folder ready for us to start coding, npm start ``` - Parcel dev server running + ![Parcel dev server running](/assets/img/guides/parcel-dev-server.png) In the next and final section to this guide, we'll import all of Bootstrap's CSS and JavaScript. @@ -150,7 +150,7 @@ Importing Bootstrap into Parcel requires two imports, one into our `styles.scss` 3. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this: - Parcel dev server running with Bootstrap + ![Parcel dev server running with Bootstrap](/assets/img/guides/parcel-dev-server-bootstrap.png) Now you can start adding any Bootstrap 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 Bootstrap'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 653d7a9c5a3b..029a22c8a9d1 100644 --- a/site/content/docs/5.3/getting-started/vite.md +++ b/site/content/docs/5.3/getting-started/vite.md @@ -135,7 +135,7 @@ With dependencies installed and our project folder ready for us to start coding, npm start ``` - Vite dev server running + ![Vite dev server running](/assets/img/guides/vite-dev-server.png) In the next and final section to this guide, we’ll import all of Bootstrap’s CSS and JavaScript. @@ -175,7 +175,7 @@ In the next and final section to this guide, we’ll import all of Bootstrap’s 3. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this: - Vite dev server running with Bootstrap + ![Vite dev server running with Bootstrap](/assets/img/guides/vite-dev-server-bootstrap.png) Now you can start adding any Bootstrap 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 Bootstrap'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 39adaf61a255..01899643d7c3 100644 --- a/site/content/docs/5.3/getting-started/webpack.md +++ b/site/content/docs/5.3/getting-started/webpack.md @@ -141,7 +141,7 @@ With dependencies installed and our project folder ready for us to start coding, npm start ``` - Webpack dev server running + ![Webpack dev server running](/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 Bootstrap's CSS and JavaScript. @@ -244,7 +244,7 @@ Importing Bootstrap into Webpack requires the loaders we installed in the first 4. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this: - Webpack dev server running with Bootstrap + ![Webpack dev server running with Bootstrap](/assets/img/guides/webpack-dev-server-bootstrap.png) Now you can start adding any Bootstrap 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 Bootstrap's CSS and JS that you need. diff --git a/site/layouts/_default/_markup/render-image.html b/site/layouts/_default/_markup/render-image.html new file mode 100644 index 000000000000..fd089f7be1c5 --- /dev/null +++ b/site/layouts/_default/_markup/render-image.html @@ -0,0 +1,8 @@ +{{- $originalSrc := .Destination | safeURL -}} +{{- $localImgPath := path.Join "/site/static/docs" site.Params.docs_version $originalSrc -}} +{{- /* This shouldn't be needed but we have a weird folder structure with version included... */ -}} +{{- $src := urls.JoinPath "/docs" site.Params.docs_version $originalSrc -}} +{{- $config := imageConfig $localImgPath -}} +{{- $classes := "d-block img-fluid" -}} + +{{ .Text }}