@thulite/images 3.3.1 → 3.3.3

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @thulite/images
 
+## 3.3.3
+
+### Patch Changes
+
+- [#36](https://github.com/thuliteio/images/pull/36) [`938b5e6`](https://github.com/thuliteio/images/commit/938b5e660ae27c749d16d5dae289bb64c2d73599) Thanks [@danielfdickinson](https://github.com/danielfdickinson)! - Rebase fix svg images in markdown
+
+## 3.3.2
+
+### Patch Changes
+
+- [#35](https://github.com/thuliteio/images/pull/35) [`1bd95c8`](https://github.com/thuliteio/images/commit/1bd95c8873fc6ccad4899a0f9361dbbf11120ed9) Thanks [@h-enk](https://github.com/h-enk)! - Update for new template system in Hugo v0.146.0
+
+- [#32](https://github.com/thuliteio/images/pull/32) [`c1a4f79`](https://github.com/thuliteio/images/commit/c1a4f79994237373ee91b0c109ed7ad7e6306908) Thanks [@danielfdickinson](https://github.com/danielfdickinson)! - Fix invalid HTML on img tag for render hook
+
 ## 3.3.1
 
 ### Patch Changes

package/assets/scss/components/_images.scss

@@ -31,3 +31,7 @@ figcaption {
 .blur-up.lazyloaded {
     filter: unset;
 }
+
+.markdown-svg {
+  background-color: var(--markdown-svg, transparent);
+}

package/layouts/{_default/_markup → _markup}/render-image.html

@@ -152,10 +152,11 @@ partial template, after the render hook has captured the resource.
 {{- end }}
 
 {{/* Convert to webp. */}}
-{{- if ne $r.MediaType.SubType "gif" }}
+{{- if not (in (slice "gif" "svg") $r.MediaType.SubType) }}
   {{- $r = $r.Resize (printf "%dx%d webp" $r.Width $r.Height) }}
 {{- end }}
 
+{{- if ne $r.MediaType.SubType "svg" }}
 {{- /* Render image element. */ -}}
 <img
   src="{{ $r.RelPermalink }}"
@@ -165,8 +166,20 @@ partial template, after the render hook has captured the resource.
   fetchpriority="{{ site.Params.thulite_images.defaults.fetchpriority }}"
   loading="{{ site.Params.thulite_images.defaults.loading }}"
   alt="{{ .PlainText }}"
-  {{- with .Title -}}title="{{ . }}"{{- end -}}
+  {{- with .Title -}}title="{{ . }}"{{- end }}
   id="{{ $id }}"
-/>
+>
+{{- else }}
+<img
+  src="{{ $r.RelPermalink }}"
+  decoding="{{ site.Params.thulite_images.defaults.decoding }}"
+  fetchpriority="{{ site.Params.thulite_images.defaults.fetchpriority }}"
+  loading="{{ site.Params.thulite_images.defaults.loading }}"
+  alt="{{ .PlainText }}"
+  {{- with .Title -}}title="{{ . }}"{{- end }}
+  id="{{ $id }}"
+  class="markdown-svg"
+>
+{{- end }}
 
 {{- /**/ -}}

package/layouts/{partials → _partials}/figure.html

@@ -59,7 +59,7 @@ Add this CSS to your site to remove small gaps between adjacent elements:
 
 @context {page} [page] The current page.
 @context {string} [src] The path to the base image: a page resource, a global resource, or a remote resource.
-@contect {int} [width] The display width of the image, in pixels, falling back to 100% of the viewport width.
+@context {int} [width] The display width of the image, in pixels, falling back to 100% of the viewport width.
 @context {string} [sizes] = "" # "100vw", "75vw", or "auto" for example
 @context {string slice} [formats] A slice of image formats, ordered by precedence, to use when creating images for the srcset attribute of each source element.
 @context {string} [process] = "" # "fill 1600x900" for example
@@ -192,7 +192,7 @@ Add this CSS to your site to remove small gaps between adjacent elements:
     {{- end }}
   {{- end }}
 {{- else }}
-  {{- /* The width was not speficied, will be using $stdWidths. */}}
+  {{- /* The width was not specified, will be using $stdWidths. */}}
   {{- $stdWidths = $stdWidths | append $r.Width | sort }}
   {{- range $stdWidths }}
     {{- /* Do not enlarge. */}}

package/layouts/{partials → _partials}/img.html

@@ -59,7 +59,7 @@ Add this CSS to your site to remove small gaps between adjacent elements:
 
 @context {page} [page] The current page.
 @context {string} [src] The path to the base image: a page resource, a global resource, or a remote resource.
-@contect {int} [width] The display width of the image, in pixels, falling back to 100% of the viewport width.
+@context {int} [width] The display width of the image, in pixels, falling back to 100% of the viewport width.
 @context {string} [sizes] = "" # "100vw", "75vw", or "auto" for example
 @context {string slice} [formats] A slice of image formats, ordered by precedence, to use when creating images for the srcset attribute of each source element.
 @context {string} [process] = "" # "fill 1600x900" for example
@@ -189,7 +189,7 @@ Add this CSS to your site to remove small gaps between adjacent elements:
     {{- end }}
   {{- end }}
 {{- else }}
-  {{- /* The width was not speficied, will be using $stdWidths. */}}
+  {{- /* The width was not specified, will be using $stdWidths. */}}
   {{- $stdWidths = $stdWidths | append $r.Width | sort }}
   {{- range $stdWidths }}
     {{- /* Do not enlarge. */}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thulite/images",
-  "version": "3.3.1",
+  "version": "3.3.3",
   "description": "Thulite images",
   "author": "Thulite",
   "license": "MIT",