Use Hugo's render hook for images and lazyload them (#253)

* Use Hugo's render hook for images, lazyload them and use the core utils instead of inline CSS

* Disallow HTML elements in markdownlint

12 files changed, 34 insertions, 34 deletions

diff --git a/.markdownlint.json b/.markdownlint.json
index 9f0bd818..dea9c76a 100644
--- a/.markdownlint.json
+++ b/.markdownlint.json
@@ -15,7 +15,16 @@
   "MD013": false,
   "MD024": false,
   "MD026": false,
-  "MD033": false,
+  "MD033": {
+    "allowed_elements": [
+      "a",
+      "br",
+      "hr",
+      "kbd",
+      "script",
+      "span"
+    ]
+  },
   "MD035": {
     "style": "---"
   },
diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss
index 6bb5d7ec..42916dc0 100644
--- a/src/assets/scss/style.scss
+++ b/src/assets/scss/style.scss
@@ -48,13 +48,6 @@ blockquote p:last-child {
   }
 }
 
-img {
-  display: block;
-  max-width: 100%;
-  margin: 0 0 1rem;
-  border-radius: 5px;
-}
-
 // Tables
 table {
   width: 100%;
diff --git a/src/content/posts/2016/bootstrap-4-alpha-3.md b/src/content/posts/2016/bootstrap-4-alpha-3.md
index a5f52868..eb7dc00d 100644
--- a/src/content/posts/2016/bootstrap-4-alpha-3.md
+++ b/src/content/posts/2016/bootstrap-4-alpha-3.md
@@ -27,7 +27,7 @@ These changes are available in our standard grid, as well as our flexbox grid. M
 
 ## Flexbox
 
-<img alt="Flexbox auto-layout" src="/assets/img/2016/07/flex-cols.png" style="padding: 4px; border: 1px solid #eee;">
+![Flexbox auto-layout](/assets/img/2016/07/flex-cols.png)
 
 Flexbox mode has been updated across the board in Alpha 3, starting from the grid system (it uses the same variable and the updated Sass mixins) and moving through our utilities and components.
 
@@ -39,7 +39,7 @@ Flexbox mode has been updated across the board in Alpha 3, starting from the gri
 
 ## Forms
 
-<img alt="Form validation states" src="/assets/img/2016/07/forms.png" style="padding: 4px; border: 1px solid #eee;">
+![Form validation states](/assets/img/2016/07/forms.png)
 
 Forms saw a ton of activity early on in Alpha 3's development. Documentation, class names, layout options, and validation styles have all been drastically improved.
 
diff --git a/src/content/posts/2019/bootstrap-icons.md b/src/content/posts/2019/bootstrap-icons.md
index ba569190..4f1a93ce 100644
--- a/src/content/posts/2019/bootstrap-icons.md
+++ b/src/content/posts/2019/bootstrap-icons.md
@@ -11,7 +11,7 @@ Say hello to [Bootstrap Icons](https://icons.getbootstrap.com/), our very first
 
 For the longest time, I've wanted to design an icon set to better lean how to better draw with different pen tools and to better understand SVGs. In the last several months I've used a few different applications, done nearly five style iterations, and finally settled on a single direction. The result? Over 200 icons to start.
 
-<img src="/assets/img/2019/11/bi-icons.png" alt="Bootstrap Icons full list" width="300" style="margin: 0 auto;">
+![Bootstrap Icons full list](/assets/img/2019/11/bi-icons.png)
 
 I've designed these initial icons in Figma and exported them as SVGs. The plan is to share that Figma file publicly once it's cleaned up and the icon set is  more stable. While Bootstrap Icons are first and foremost designed to work with Bootstrap's components, they can be used anywhere. They're an entirely [separate project](https://github.com/twbs/icons) and package from Bootstrap, so you can easily use them in any project, or use any other icon set alongside Bootstrap's CSS and JavaScript.
 
diff --git a/src/content/posts/2021/bootstrap-5-1-0.md b/src/content/posts/2021/bootstrap-5-1-0.md
index 40130c79..51840e09 100644
--- a/src/content/posts/2021/bootstrap-5-1-0.md
+++ b/src/content/posts/2021/bootstrap-5-1-0.md
@@ -25,9 +25,7 @@ The first minor release of Bootstrap 5 is here! v5.1.0 has arrived and is packed
 
 ## CSS Grid
 
-<a href="https://getbootstrap.com/docs/5.1/layout/css-grid/">
-  <img src="/assets/img/2021/08/bootstrap-css-grid-docs.png" alt="CSS Grid docs" class="border">
-</a>
+[![CSS Grid docs](/assets/img/2021/08/bootstrap-css-grid-docs.png)](https://getbootstrap.com/docs/5.1/layout/css-grid/)
 
 We've added an experimental version of a [new CSS Grid](https://getbootstrap.com/docs/5.1/layout/css-grid/) as an **opt-in replacement** to our default grid system. To enable it, disable the default grid, by setting `$enable-grid-classes: false` and enable the CSS Grid by setting `$enable-cssgrid: true`. Once recompiled, you'll be able to switch to the new classes. Our new CSS Grid docs page has all the details and some helpful examples to get you started.
 
@@ -37,9 +35,7 @@ Shipping CSS Grid support as experimental allows us to play with things a bit wi
 
 ## Offcanvas in navbars
 
-<a href="https://getbootstrap.com/docs/5.1/components/navbar/#offcanvas">
-  <img src="/assets/img/2021/08/bootstrap-navbar-offcanvas.png" alt="Offcanvas navbar example" class="border">
-</a>
+[![Offcanvas navbar example](/assets/img/2021/08/bootstrap-navbar-offcanvas.png)](https://getbootstrap.com/docs/5.1/components/navbar/#offcanvas)
 
 We've expanded our `.navbar-expand-*` classes (see what we did there?) to include support for offcanvases inside the navbar. Wrap your navbar elements with the appropriate offcanvas HTML, point your navbar toggler button to the offcanvas, and voila.
 
@@ -47,9 +43,7 @@ We've expanded our `.navbar-expand-*` classes (see what we did there?) to includ
 
 ## Placeholders
 
-<a href="https://getbootstrap.com/docs/5.1/components/placeholders/">
-  <img src="/assets/img/2021/08/bootstrap-placeholders.png" alt="Placeholders example" class="border">
-</a>
+[![Placeholders example](/assets/img/2021/08/bootstrap-placeholders.png)](https://getbootstrap.com/docs/5.1/components/placeholders/)
 
 There's a new component in town with [placeholders](https://getbootstrap.com/docs/5.1/components/placeholders/), a way to provide temporary blocks in lieu of real content to help indicate that something is still loading in your site or app. Our first iteration here aims to only provide the HTML and CSS—it's up to you to implement these placeholders with whatever custom code you might need.
 
@@ -115,7 +109,7 @@ While utilities get most of the spotlight these days, helpers are still incredib
 
 To create a vertical stack, wrap a series of elements in `.vstack`. Use `.gap-*` utilities on the parent (or set individual `margin` utilities) to quickly space elements.
 
-<img src="/assets/img/2021/08/bootstrap-vstack.png" alt="Bootstrap vstack example" class="border">
+![Bootstrap vstack example](/assets/img/2021/08/bootstrap-vstack.png)
 
 ```html
 <div class="vstack gap-3">
@@ -127,7 +121,7 @@ To create a vertical stack, wrap a series of elements in `.vstack`. Use `.gap-*`
 
 Want a horizontal stack? Use `.hstack` instead.
 
-<img src="/assets/img/2021/08/bootstrap-hstack.png" alt="Bootstrap vstack example" class="border">
+![Bootstrap vstack example](/assets/img/2021/08/bootstrap-hstack.png)
 
 ```html
 <div class="hstack gap-3">
@@ -139,7 +133,7 @@ Want a horizontal stack? Use `.hstack` instead.
 
 To support these stacks, we've also added an additional new helper—`.vr`, or vertical rule. HTML has had native `<hr>` elements for the longest time to create horizontal rules, but never anything for _vertical_ rules. The new `.vr` helper works great in horizontal stacks and other situations where `border`s are a little trickier.
 
-<img src="/assets/img/2021/08/bootstrap-hstack-vr.png" alt="Bootstrap vstack example" class="border">
+![Bootstrap vstack example](/assets/img/2021/08/bootstrap-hstack-vr.png)
 
 ```html
 <div class="hstack gap-3">
@@ -199,7 +193,7 @@ We use an RGB version of each color's CSS variable and attach a second CSS varia
 
 To support these changes, we've added some new `.text-opacity-*` and `.bg-opacity-*` utilities. Choose from a predefined set (which you can modify in the utilities API) of classes to quickly change the local CSS variable when a given `.text-*` or `.bg-*` utility is used. For example:
 
-<img src="/assets/img/2021/08/bootstrap-text-opacity.png" alt="Bootstrap text opacity example" class="border">
+![Bootstrap text opacity example](/assets/img/2021/08/bootstrap-text-opacity.png)
 
 ```html
 <div class="text-primary">This is default primary text</div>
@@ -212,7 +206,7 @@ We expect this approach to make its way to `border` utilities next. Have more CS
 
 ## Four new examples
 
-<img src="/assets/img/2021/08/v510-examples.png" alt="" class="border">
+![Bootstrap examples](/assets/img/2021/08/v510-examples.png)
 
 We've expanded on our component examples with four new examples that customize some of our core components and implement common patterns. Here's what's new:
 
diff --git a/src/content/posts/2021/bootstrap-icons-1-3-0.md b/src/content/posts/2021/bootstrap-icons-1-3-0.md
index f460b89b..3acb0f6c 100644
--- a/src/content/posts/2021/bootstrap-icons-1-3-0.md
+++ b/src/content/posts/2021/bootstrap-icons-1-3-0.md
@@ -11,7 +11,7 @@ As usual, we also snuck in some bug fixes to existing icons and ours docs. After
 
 ## 60+ new icons
 
-<img src="/assets/img/2021/01/icons-130-new.png" alt="New icons in v1.3.0" style="border: 1px solid rgba(0,0,0,.15);">
+![New icons in v1.3.0](/assets/img/2021/01/icons-130-new.png)
 
 Here's a look at the new icons in v1.3.0:
 
diff --git a/src/content/posts/2021/bootstrap-icons-1-4-0.md b/src/content/posts/2021/bootstrap-icons-1-4-0.md
index bf62e0e7..fd500f88 100644
--- a/src/content/posts/2021/bootstrap-icons-1-4-0.md
+++ b/src/content/posts/2021/bootstrap-icons-1-4-0.md
@@ -11,13 +11,13 @@ Keep reading for a preview of the new icons and how icon alignment has changed.
 
 ## 60+ weather icons
 
-<img src="/assets/img/2021/02/v140-new-icons.png" alt="New icons in v1.4.0" style="border: 1px solid rgba(0,0,0,.15);">
+![New icons in v1.4.0](/assets/img/2021/02/v140-new-icons.png)
 
 The new weather category includes over 60 icons for various weather and atmospheric conditions. From fog and haze to rainstorms and hurricanes, we now have icons for just about every weather situation. We undoubtedly have some more work to do to refine and add to this new category, but it's a pretty big addition to the project. Let us know what you think and what's missing so we can keep adding to it over time.
 
 ## Alignment changes
 
-<img src="/assets/img/2021/02/v140-alignment.png" alt="Alignment changes" style="border: 1px solid rgba(0,0,0,.15);">
+![Alignment changes](/assets/img/2021/02/v140-alignment.png)
 
 Also new in v1.4.0 are some alignment changes—before and after are shown above. Previously we used `vertical-align: text-top` in our CSS to aligning individual icons. This wasn't as much of an issue when we only had SVGs, but with the addition of icon fonts and their generated CSS in v1.2.0, we had to make some changes.
 
diff --git a/src/content/posts/2021/bootstrap-icons-1-5-0.md b/src/content/posts/2021/bootstrap-icons-1-5-0.md
index e869f98d..96ce1e42 100644
--- a/src/content/posts/2021/bootstrap-icons-1-5-0.md
+++ b/src/content/posts/2021/bootstrap-icons-1-5-0.md
@@ -9,7 +9,7 @@ video: FxzBvqY5PP0
 
 ## 45 new icons
 
-<img src="/assets/img/2021/05/v150-new-icons.png" alt="New icons in v1.5.0" style="border: 1px solid rgba(0,0,0,.15);">
+![New icons in v1.5.0](/assets/img/2021/05/v150-new-icons.png)
 
 The primary goal with this release was to round out some of the most requested icons to date. Here's the lowdown:
 
diff --git a/src/content/posts/2021/bootstrap-icons-1-6-0.md b/src/content/posts/2021/bootstrap-icons-1-6-0.md
index b200fccc..3c729eec 100644
--- a/src/content/posts/2021/bootstrap-icons-1-6-0.md
+++ b/src/content/posts/2021/bootstrap-icons-1-6-0.md
@@ -11,7 +11,7 @@ video: sOS9aOIXPEk
 
 We've officially passed 1,400 glyphs in Bootstrap Icons with this release—woohoo! Seems utterly insane to me that the project has come this far and there are still so many more icons to include.
 
-<img src="/assets/img/2021/10/v160-new-updated-icons.png" alt="New icons in v1.6.0" style="border: 1px solid rgba(0,0,0,.15);">
+![New icons in v1.6.0](/assets/img/2021/10/v160-new-updated-icons.png)
 
 We have a few dozen new and updated icons in this release, including:
 
diff --git a/src/content/posts/2021/bootstrap-icons-1-7-0.md b/src/content/posts/2021/bootstrap-icons-1-7-0.md
index 988a04ce..908fea7b 100644
--- a/src/content/posts/2021/bootstrap-icons-1-7-0.md
+++ b/src/content/posts/2021/bootstrap-icons-1-7-0.md
@@ -11,7 +11,7 @@ video: CqZgd6-xQl8
 
 This update was a lot of fun for me—drawing all these tiny computer parts most of all! There are dozens of new computer-related icons for parts, ports, and peripheral devices. There are also several new brand icons, including Meta, and some other fun icons like a new robot head and a boombox.
 
-<img src="/assets/img/2021/11/icons-v170.png" alt="New icons in v1.7.0" style="border: 1px solid rgba(0,0,0,.15);">
+![New icons in v1.7.0](/assets/img/2021/11/icons-v170.png)
 
 *Looking for more new icons? Head to the [issue tracker](https://github.com/twbs/icons/issues) to check for open requests or submit a new one.*
 
diff --git a/src/content/posts/2022/bootstrap-icons-1-8-0.md b/src/content/posts/2022/bootstrap-icons-1-8-0.md
index cd9b96f4..68853581 100644
--- a/src/content/posts/2022/bootstrap-icons-1-8-0.md
+++ b/src/content/posts/2022/bootstrap-icons-1-8-0.md
@@ -11,15 +11,15 @@ video: HhZaHf8RP6g
 
 Perfect for Valentine's Day or any other time you need to show a little heart, there are dozens of icons to choose from.
 
-<img src="/assets/img/2022/01/icons-v180-love.png" alt="New love icons in v1.8.0" style="border: 1px solid rgba(0,0,0,.15);">
+![New love icons in v1.8.0](/assets/img/2022/01/icons-v180-love.png)
 
 Want to visually show the extensions of your files? There are tons of new options for programming languages, audio and video, images, and more.
 
-<img src="/assets/img/2022/01/icons-v180-filetypes.png" alt="New filetype icons in v1.8.0" style="border: 1px solid rgba(0,0,0,.15);">
+![New filetype icons in v1.8.0](/assets/img/2022/01/icons-v180-filetypes.png)
 
 Elsewhere we've expanded a number of other categories of icons. There are some new medical icons (more are planned), lots of new clipboard icons, additional tools, and more.
 
-<img src="/assets/img/2022/01/icons-v180-misc.png" alt="Miscellaneous new icons in v1.8.0" style="border: 1px solid rgba(0,0,0,.15);">
+![Miscellaneous new icons in v1.8.0](/assets/img/2022/01/icons-v180-misc.png)
 
 *Looking for more new icons? Head to the [issue tracker](https://github.com/twbs/icons/issues) to check for open requests or submit a new one.*
 
diff --git a/src/layouts/_default/_markup/render-image.html b/src/layouts/_default/_markup/render-image.html
new file mode 100644
index 00000000..9969470e
--- /dev/null
+++ b/src/layouts/_default/_markup/render-image.html
@@ -0,0 +1,4 @@
+{{- $img := imageConfig (add "/src/static" (.Destination | safeURL)) -}}
+{{- $classes := "d-block img-fluid mb-2 rounded border" -}}
+
+<img src="{{ .Destination | safeURL }}" class="{{ $classes }}" alt="{{ .Text }}" loading="lazy" width="{{ $img.Width }}" height="{{ $img.Height }}">