@thulite/images 3.3.0

package/.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

package/.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json",
+  "changelog": ["@changesets/changelog-github", { "repo": "thuliteio/images" }],
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

package/.prettierignore

@@ -0,0 +1,14 @@
+*.html
+*.ico
+*.png
+*.jp*g
+*.toml
+*.*ignore
+*.svg
+*.xml
+LICENSE
+.npmrc
+.gitkeep
+*.woff*
+*.json
+flexsearch.js

package/.prettierrc.yaml

@@ -0,0 +1,19 @@
+# Default config
+tabWidth: 4
+endOfLine: crlf
+singleQuote: true
+printWidth: 100000
+trailingComma: none
+bracketSameLine: true
+quoteProps: consistent
+experimentalTernaries: true
+
+# Overrided config
+overrides:
+  - files: ["*.md", "*.json", "*.yaml"]
+    options:
+      tabWidth: 2
+      singleQuote: false
+  - files: ["*.scss"]
+    options:
+      singleQuote: false

package/.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "editor.wordWrap": "off",
+  "files.trimTrailingWhitespace": true,
+  "files.insertFinalNewline": true,
+  "editor.tabSize": 2,
+  "editor.insertSpaces": true
+}

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @thulite/images
+
+## 3.3.0
+
+### Minor Changes
+
+- [#24](https://github.com/thuliteio/images/pull/24) [`1783868`](https://github.com/thuliteio/images/commit/17838683bf74e0d11df779a7e53e55922680ffd5) Thanks [@h-enk](https://github.com/h-enk)! - Update for migration from Hyas to Thulite
+
+## 3.2.0
+
+### Minor Changes
+
+- [#23](https://github.com/gethyas/images/pull/23) [`0e09814`](https://github.com/gethyas/images/commit/0e098140dbc9287f43ca2aaa2ba519d71c58d33f) Thanks [@h-enk](https://github.com/h-enk)! - Update for new Hyas setup

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020-2024 Thulite
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,9 @@
+# Thulite images
+
+Official images integration for Thulite.
+
+## Getting Started
+
+See the Doks documentation:
+
+- [Images](https://images.thulite.io/docs/start-here/getting-started/)

package/assets/scss/components/_images.scss

@@ -0,0 +1,33 @@
+img {
+    max-width: 100%;
+    height: auto;
+}
+
+img[data-sizes="auto"] {
+    display: block;
+}
+
+img,
+picture {
+    font-size: 0;
+}
+
+figcaption {
+    font-size: 1rem;
+    margin-top: 0.5rem;
+    font-style: italic;
+}
+
+.content .gitpod-mark-monochrome.icon {
+    margin-bottom: 0.125rem;
+    margin-right: 0.5rem;
+}
+
+.blur-up {
+    filter: blur(5px);
+    transition: filter 400ms;
+}
+
+.blur-up.lazyloaded {
+    filter: unset;
+}

package/layouts/_default/_markup/render-image.html

@@ -0,0 +1,172 @@
+{{- /* Based on https://www.veriphor.com/articles/link-and-image-render-hooks/#image-render-hook */}}
+
+{{- /* Last modified: 2023-12-09T16:29:48-08:00 */}}
+
+{{- /*
+Copyright 2023 Veriphor LLC
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not
+use this file except in compliance with the License. You may obtain a copy of
+the License at
+
+https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+License for the specific language governing permissions and limitations under
+the License.
+*/}}
+
+{{- /*
+This render hook resolves internal destinations by looking for a matching:
+
+  1. Page resource (an image in the current page bundle)
+  2. Section resource (an image in the current section)
+  3. Global resource (an image in the assets directory)
+
+It skips the section resource lookup if the current page is a leaf bundle, and
+captures external destinations as resources for local hosting.
+
+You must place global resources in the assets directory. If you have placed
+your resources in the static directory, and you are unable or unwilling to move
+them, you must mount the static directory to the assets directory by including
+both of these entries in your site configuration:
+
+  [[module.mounts]]
+  source = 'assets'
+  target = 'assets'
+
+  [[module.mounts]]
+  source = 'static'
+  target = 'assets'
+
+By default, if this render hook is unable to resolve a destination, it passes
+the destination through without modification. To emit a warning or error, set
+the error level in your site configuration:
+
+  [params.render_hooks.image]
+  errorLevel = 'warning' # ignore (default), warning, or error (fails the build)
+
+Image render hooks are also used to:
+
+  - Resize, crop, rotate, filter, and convert images
+  - Build responsive images using srcset and sizes attributes
+  - Wrap images inside of a picture element
+  - Transform standalone images into figure elements
+
+To perform any of these operations, you can “hook” into this render hook with a
+partial template, after the render hook has captured the resource.
+
+@context {map} Attributes The markdown attributes, available if (a) markup.goldmark.parser.attribute.block is true, and (b) markup.goldmark.parser.wrapStandAloneImageWithinParagraph is false in site configuration.
+@context {string} Destination The image destination.
+@context {bool} IsBlock Returns true if a standalone image is not wrapped within a paragraph element.
+@context {int} Ordinal The zero-based ordinal of the image on the page.
+@context {page} Page A reference to the page containing the image.
+@context {string} PlainText The image description as plain text.
+@context {string} Text The image description.
+@context {string} Title The image title.
+
+@returns {template.html}
+*/}}
+
+{{- /* Initialize. */}}
+{{- $renderHookName := "image" }}
+
+{{- /* Verify minimum required version. */}}
+{{- $minHugoVersion := "0.114.0" }}
+{{- if lt hugo.Version $minHugoVersion }}
+  {{- errorf "The %q render hook requires Hugo v%s or later." $renderHookName $minHugoVersion }}
+{{- end }}
+
+{{- /* Error level when unable to resolve destination: ignore, warning, or error. */}}
+{{- $errorLevel := or site.Params.render_hooks.image.errorLevel "ignore" | lower }}
+
+{{- /* Validate error level. */}}
+{{- if not (in (slice "ignore" "warning" "error") $errorLevel) }}
+  {{- errorf "The %q render hook is misconfigured. The errorLevel %q is invalid. Please check your site configuration." $renderHookName $errorLevel }}
+{{- end }}
+
+{{- /* Determine content path for warning and error messages. */}}
+{{- $contentPath := "" }}
+{{- with .Page.File }}
+  {{- $contentPath = .Path }}
+{{- else }}
+  {{- $contentPath = .Path }}
+{{- end }}
+
+{{- /* Parse destination. */}}
+{{- $u := urls.Parse .Destination }}
+
+{{- /* Set common message. */}}
+{{- $msg := printf "The %q render hook was unable to resolve the destination %q in %s" $renderHookName $u.String $contentPath }}
+
+{{- /* Get image resource. */}}
+{{- $r := "" }}
+{{- if $u.IsAbs }}
+  {{- with resources.GetRemote $u.String }}
+    {{- with .Err }}
+      {{- if eq $errorLevel "warning" }}
+        {{- warnf "%s. See %s" . $contentPath }}
+      {{- else if eq $errorLevel "error" }}
+        {{- errorf "%s. See %s" . $contentPath }}
+      {{- end }}
+    {{- else }}
+      {{- /* Destination is a remote resource. */}}
+      {{- $r = . }}
+    {{- end }}
+  {{- else }}
+    {{- if eq $errorLevel "warning" }}
+      {{- warnf $msg }}
+    {{- else if eq $errorLevel "error" }}
+      {{- errorf $msg }}
+    {{- end }}
+  {{- end }}
+{{- else }}
+  {{- with .Page.Resources.Get (strings.TrimPrefix "./" $u.Path) }}
+    {{- /* Destination is a page resource. */}}
+    {{- $r = . }}
+  {{- else }}
+    {{- with (and (ne .Page.BundleType "leaf") (.Page.CurrentSection.Resources.Get (strings.TrimPrefix "./" $u.Path))) }}
+      {{- /* Destination is a section resource, and current page is not a leaf bundle. */}}
+      {{- $r = . }}
+    {{- else }}
+      {{- with resources.Get $u.Path }}
+        {{- /* Destination is a global resource. */}}
+        {{- $r = . }}
+      {{- else }}
+        {{- if eq $errorLevel "warning" }}
+          {{- warnf $msg }}
+        {{- else if eq $errorLevel "error" }}
+          {{- errorf $msg }}
+        {{- end }}
+      {{- end }}
+    {{- end }}
+  {{- end }}
+{{- end }}
+
+{{- /* Determine id attribute. */}}
+{{- $id := printf "h-rh-i-%d" .Ordinal }}
+{{- with .Attributes.id }}
+  {{- $id = . }}
+{{- end }}
+
+{{/* Convert to webp. */}}
+{{- if ne $r.MediaType.SubType "gif" }}
+  {{- $r = $r.Resize (printf "%dx%d webp" $r.Width $r.Height) }}
+{{- end }}
+
+{{- /* Render image element. */ -}}
+<img
+  src="{{ $r.RelPermalink }}"
+  width="{{ string $r.Width }}"
+  height="{{ string $r.Height }}"
+  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 }}"
+/>
+
+{{- /**/ -}}

package/layouts/partials/figure.html

@@ -0,0 +1,289 @@
+{{- /* Based on https://www.veriphor.com/articles/link-and-image-render-hooks/#image-render-hook */}}
+
+{{- /* Last modified: 2023-09-05T11:48:34-07:00 */}}
+
+{{- /*
+Copyright 2023 Veriphor LLC
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not
+use this file except in compliance with the License. You may obtain a copy of
+the License at
+
+https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+License for the specific language governing permissions and limitations under
+the License.
+*/}}
+
+{{- /*
+Renders an HTML figure element, in multiple formats and sizes.
+
+It resolves internal destinations by looking for a matching:
+
+  1. Page resource (an image in the current page bundle)
+  2. Section resource (an image in the current section)
+  3. Global resource (an image in the assets directory)
+
+It skips the section resource lookup if the current page is a leaf bundle, and
+captures external destinations as resources for local hosting. The build will
+fail if this partial is unable to resolve a destination.
+
+You must place global resources in the assets directory. If you have placed
+your resources in the static directory, and you are unable or unwilling to move
+them, you must mount the static directory to the assets directory by including
+both of these entries in your site configuration:
+
+  [[module.mounts]]
+  source = 'assets'
+  target = 'assets'
+
+  [[module.mounts]]
+  source = 'static'
+  target = 'assets'
+
+Add this CSS to your site to enable responsive image behavior:
+
+  img {
+    height: auto;
+    max-width: 100%;
+  }
+
+Add this CSS to your site to remove small gaps between adjacent elements:
+
+  img, picture {
+    font-size: 0;
+  }
+
+@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 {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
+@context {string} [lqip] = "" # "16x webp q20" or "21x webp q20" for example
+@context {string} [decoding] The img element's decoding attribute.
+@context {string} [fetchpriority] The img element's fetchpriority attribute.
+@context {string} [loading] The img element's loading attribute.
+@context {string} [alt] The img element's alt attribute.
+@context {string} [title] The img element's title attribute.
+@context {string} [caption] The figure element's caption attribute.
+@context {string} [class] The img element's class attribute.
+
+@returns {template.HTML}
+
+@example (required args only)
+
+  {{- partial "figure.html" (dict "page" . "src" "images/zion.jpg") }}
+
+@example (all args)
+  {{- $opts := dict
+    "page" .
+    "src" "images/bryce-canyon-national-park.jpg"
+    "width" 768
+    "sizes" "auto"
+    "formats" (slice "webp" "jpeg")
+    "process" "fill 1600x900"
+    "lqip" "16x webp q20"
+    "decoding" "async"
+    "fetchpriority" "auto"
+    "loading" "eager"
+    "alt" "Bryce Canyon National Park"
+    "title" "A beautiful day in Bryce Canyon National Park"
+    "caption" "Bryce Canyon National Park"
+    "class" "foo"
+  }}
+  {{- partial "figure.html" $opts }}
+
+*/}}
+
+{{- /* Initialize. */}}
+{{- $partialName := "figure" }}
+
+{{- /* Verify minimum required version. */}}
+{{- $minHugoVersion := "0.118.0" }}
+{{- if lt hugo.Version $minHugoVersion }}
+  {{- errorf "The %q partial requires Hugo v%s or later." $partialName $minHugoVersion }}
+{{- end }}
+
+{{- /* Validate page arg. */}}
+{{- if not .page }}
+  {{- errorf "The %q partial requires a page argument." $partialName }}
+{{- end }}
+
+{{- /* Determine content path for warning and error messages. */}}
+{{- $contentPath := "" }}
+{{- with .page.File }}
+  {{- $contentPath = .Path }}
+{{- else }}
+  {{- $contentPath = .Path }}
+{{- end }}
+
+{{- /* Set defaults and get args. */}}
+{{- $alt := or .alt "" }}
+{{- $class := or .class "" }}
+{{- $formats := or .formats (slice "webp") }}
+{{- $decoding := or .decoding site.Params.thulite_images.defaults.decoding }}
+{{- $fetchPriority := or .fetchpriority site.Params.thulite_images.defaults.fetchpriority }}
+{{- $loading := or .loading site.Params.thulite_images.defaults.loading }}
+{{- $process := or .process site.Params.thulite_images.defaults.process }}
+{{- $lqip := or .lqip site.Params.thulite_images.defaults.lqip }}
+{{- $src := or .src "" }}
+{{- $title := or .title "" }}
+{{- $caption := or .caption "" }}
+{{- $width := or (int .width) 0 }}
+{{- $fallbackFormat := "jpeg" }}
+{{- $stdWidths := site.Params.thulite_images.defaults.widths }}
+{{- $stdSizes := or .sizes site.Params.thulite_images.defaults.sizes }}
+
+{{- /* Validate args. */}}
+{{- $validFormats := slice "gif" "jpg" "jpeg" "png" "webp"}}
+{{- if reflect.IsSlice $formats }}
+  {{- $formats = apply $formats "strings.ToLower" "." }}
+  {{- range $formats }}
+    {{- if not (in $validFormats .) }}
+      {{- errorf "The formats argument passed to the %q partial is invalid. Valid formats are %s. See %s" $partialName (delimit $validFormats ", " ", and ") $contentPath }}
+    {{- end }}
+  {{- end }}
+{{- else }}
+  {{- errorf "The formats argument passed to the %q partial is not a slice. See %s" $partialName $contentPath }}
+{{- end }}
+
+{{- if not $src }}
+  {{- errorf "The %q partial requires an image path, relative to the assets directory. See %s" $partialName $contentPath }}
+{{- end }}
+
+{{- /* Capture image as a resource. */}}
+{{- $r := "" }}
+{{- $ctx := dict
+  "page" .page
+  "path" $src
+  "partialName" $partialName
+  "contentPath" $contentPath
+}}
+{{- with partial "inline/capture-resource.html" $ctx }}
+  {{- $r = . }}
+{{- end }}
+
+{{- /* Process image. */}}
+{{- with $process }}
+  {{- $r = $r.Process $process }}
+{{- end }}
+
+{{- /* Process LQIP. */}}
+{{- $l := "" }}
+{{- with $lqip }}
+  {{- $l = $r.Resize . }}
+{{- end }}
+
+{{- /* Determine widths for srcset generation. */}}
+{{- $widths := slice }}
+{{- if $width }}
+  {{- /* The width was specified; generate 1x, 2x, 3x, and 4x images. */}}
+  {{- $widths = slice $r.Width }}
+  {{- range seq 4 }}
+    {{- with mul . $width }}
+      {{- if and (le . $r.Width) (le . (math.Max $stdWidths)) }}
+        {{- /* Do not enlarge, and do not exceed maximum of $stdWidths. */}}
+        {{- $widths = $widths | append . }}
+      {{- end }}
+    {{- end }}
+  {{- end }}
+{{- else }}
+  {{- /* The width was not speficied, will be using $stdWidths. */}}
+  {{- $stdWidths = $stdWidths | append $r.Width | sort }}
+  {{- range $stdWidths }}
+    {{- /* Do not enlarge. */}}
+    {{- if (le . $r.Width) }}
+      {{- $widths = $widths | append . }}
+    {{- end }}
+  {{- end }}
+{{- end }}
+{{- $widths = $widths | uniq | sort}}
+
+{{- /* Create fallback image (fi) with the smallest of widths. */}}
+{{- $fi := $r.Resize (printf "%dx %s" (math.Min $widths | int) $fallbackFormat) }}
+
+{{- /* Create the image map. */}}
+{{- $im := dict  }}
+{{- range $format := $formats }}
+  {{- $sizes := slice }}
+  {{- range sort $widths }}
+    {{- $sizes = $sizes | append ($r.Resize (printf "%dx %s" . $format)) }}
+  {{- end }}
+  {{- $im = merge $im (dict $format $sizes) }}
+{{- end }}
+
+{{- /* Render. */}}
+<figure>
+  <img
+    srcset="data:{{ $l.MediaType }};base64,{{ $l.Content | base64Encode }}"
+    {{- range $formats }}
+      {{- with index $im . }}
+        {{- $sizes := $stdSizes }}
+        {{- with $width }}
+          {{- $sizes = printf "%dpx" . }}
+        {{- end }}
+        data-srcset="
+          {{- range $k, $_ := . }}
+            {{- if $k }},{{- end }}
+            {{- printf `%s %dw` .RelPermalink .Width }}
+          {{- end }}"
+        data-sizes="{{ $stdSizes }}"
+      {{- end }}
+    {{- end }}
+    src="{{ $fi.RelPermalink }}"
+    width="{{ string $r.Width }}"
+    height="{{ string $r.Height }}"
+    decoding="{{ $decoding }}"
+    fetchpriority="{{ $fetchPriority }}"
+    loading="{{ $loading }}"
+    alt="{{ $alt }}"
+    {{- with .title }}title="{{ $title }}"{{- end }}
+    class="lazyload blur-up{{- with .class }} {{ . }}{{- end }}"
+  >
+  {{- with $caption }}<figcaption>{{ . }}</figcaption>{{- end }}
+</figure>
+
+{{- define "partials/inline/capture-resource.html" }}
+  {{- /* Parse destination. */}}
+  {{- $u := urls.Parse .path }}
+
+  {{- /* Set common message. */}}
+  {{- $msg := printf "The %q partial was unable to get %q in %s" .partialName $u.String .contentPath }}
+
+  {{- /* Get image resource. */}}
+  {{- $r := "" }}
+  {{- if $u.IsAbs }}
+    {{- with resources.GetRemote $u.String }}
+      {{- with .Err }}
+        {{- errorf "%s. See %s" . $.contentPath }}
+      {{- else }}
+        {{- /* Destination is a remote resource. */}}
+        {{- $r = . }}
+      {{- end }}
+    {{- else }}
+      {{- errorf $msg }}
+    {{- end }}
+  {{- else }}
+    {{- with .page.Resources.Get (strings.TrimPrefix "./" $u.Path) }}
+      {{- /* Destination is a page resource. */}}
+      {{- $r = . }}
+    {{- else }}
+      {{- with (and (ne .page.BundleType "leaf") (.page.CurrentSection.Resources.Get (strings.TrimPrefix "./" $u.Path)) ) }}
+        {{- /* Destination is a section resource, and current page is not a leaf bundle. */}}
+        {{- $r = . }}
+      {{- else }}
+        {{- with resources.Get $u.Path }}
+          {{- /* Destination is a global resource. */}}
+          {{- $r = . }}
+        {{- else }}
+          {{- errorf $msg }}
+        {{- end }}
+      {{- end }}
+    {{- end }}
+  {{- end }}
+  {{- return $r }}
+{{- end -}}