feat: migrate to future-wd processing

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021-2022 Henk Verlinde
+Copyright (c) 2021-2023 Henk Verlinde
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,10 +1,10 @@
 # Hyas images
 
-Image render hook, shortcode + partial for Hyas sites.
+Official images integration for Hyas.
 
 ## Status
 
-[![npm (scoped)](https://img.shields.io/npm/v/@hyas/images?style=flat-square)](https://www.npmjs.com/package/@hyas/images) [![GitHub Workflow Status](https://img.shields.io/github/workflow/status/h-enk/hyas-images/CodeQL?style=flat-square)]((https://github.com/h-enk/hyas-images/actions/workflows/codeql.yml))
+[![npm (scoped)](https://img.shields.io/npm/v/@hyas/images?style=flat-square)](https://www.npmjs.com/package/@hyas/images)
 
 ## Installation
 
@@ -17,35 +17,87 @@ npm i @hyas/images -D
 Add to `./config/_default/module.toml`:
 
 ```toml
+[[mounts]]
+  source = "node_modules/@hyas/images/assets"
+  target = "assets"
+  excludeFiles = "/scss/**.scss"
+
 [[mounts]]
   source = "node_modules/@hyas/images/layouts"
   target = "layouts"
 
+[[mounts]]
+  source = "assets"
+  target = "assets"
+
 [[mounts]]
   source = "layouts"
   target = "layouts"
 ```
 
-Add to `./config/_default/params.toml`:
+Add to `./config/_default/params.yml`:
 
 ```bash
-# lazyimg
-[lazyimg]
-  resizer = "auto"
-  renderer = "lqip-webp"
-
-  # Resizer options:
-  lqipSize = "120x Gaussian"
-  maxSize = "1920x"
-  responsiveSizes = [ "320x", "640x", "768x", "1024x", "1366x", "1600x", "1920x" ]
-  resizeOptions = "Lanczos q95"
-
-  # Renderer options:
-  class = "img-fluid"
-  # alt = ""
-  noscript = true
-
-  errorHandler = "warning"
+image:
+  ## General
+  type: page # page (default) or global
+  widths: [480, 640, 768, 1024, 1366] # [600, 900, 1300] (default)
+  densities: [1,2] # [1,2] (default)
+  formats: [original, webp] # [original, webp] (default)
+  provider: null # null (default) or netlify
+  loading: lazysizes # auto (default), lazy, or lazysizes
+  class: "img-fluid blur-up" # img-fluid (default)
+  output: picture # picture (default), figure, or img
+  noscript: false # false (default) or true
+
+  ## Placeholder
+  placeholder: lqip # null (default), lqip, dominant, or [black, [gray-100..gray-900], white]
+  lqip_div_factor: 5 # 5 (default)
+  lqip_blur_amount: 5 # 5 (default)
+  gif_div_factor: 10 # 10 (default)
+
+  ## Figure
+  target: "_blank" # _blank (default)
+  rel: "noopener, noreferrer" # noopener, noreferrer (default)
+  figure_class: "figure" # figure (default)
+  figure_image_class: "figure-img img-fluid blur-up" # "figure-img img-fluid" (default)
+  figcaption_class: figure-caption # figure-caption (default)
+  figcaption_title_h: 4 # 4 (default)
+  attr_link_target: "_blank" # _blank (default)
+  attr_link_rel: "noopener, noreferrer" # noopener, noreferrer (default)
+
+  ## Render hook
+  render_hook: true # false (default) or true
+  render_hook_wrapper_class: img-wrapper # img-wrapper (default)
+
+  ## Shortcode
+  shortcode_wrapper_class: img-wrapper # img-wrapper (default)
+
+  ## Debugging
+  suppress_width_warning: false # false (default) or true
+  debug: false # false (default) or true
+```
+
+Add to `./assets/scss/components/_images.scss`:
+
+```scss
+img[data-sizes="auto"] {
+  display: block;
+  width: 100%;
+}
+
+.figure {
+  display: block;
+}
+
+.blur-up {
+  filter: blur(5px);
+  transition: filter 400ms;
+}
+
+.blur-up.lazyloaded {
+  filter: unset;
+}
 ```
 
 ## Usage
@@ -55,4 +107,7 @@ See the Hyas docs: [Images](https://gethyas.com/docs/recipes/images/)
 
 ## Credits
 
-Based on [hugo-mods/lazyimg](https://github.com/hugo-mods/lazyimg)
+This npm package is a translation of the Hugo modules:
+
+- [future-wd/hugo-responsive-images](https://github.com/future-wd/hugo-responsive-images)
+- [future-wd/hugo-imaging-common](https://github.com/future-wd/hugo-imaging-common)

assets/scss/components/_images.scss

@@ -0,0 +1,17 @@
+img[data-sizes="auto"] {
+  display: block;
+  width: 100%;
+}
+
+.figure {
+  display: block;
+}
+
+.blur-up {
+  filter: blur(5px);
+  transition: filter 400ms;
+}
+
+.blur-up.lazyloaded {
+  filter: unset;
+}

config/_default/module.toml

@@ -1,7 +1,16 @@
+[[mounts]]
+  source = "node_modules/@hyas/images/assets"
+  target = "assets"
+  excludeFiles = "/scss/**.scss"
+
 [[mounts]]
   source = "node_modules/@hyas/images/layouts"
   target = "layouts"
 
+[[mounts]]
+  source = "assets"
+  target = "assets"
+
 [[mounts]]
   source = "layouts"
   target = "layouts"

config/_default/params.yml

@@ -0,0 +1,38 @@
+image:
+  ## General
+  type: page # page (default) or global
+  widths: [480, 640, 768, 1024, 1366] # [600, 900, 1300] (default)
+  densities: [1,2] # [1,2] (default)
+  formats: [original, webp] # [original, webp] (default)
+  provider: null # null (default) or netlify
+  loading: lazysizes # auto (default), lazy, or lazysizes
+  class: "img-fluid blur-up" # img-fluid (default)
+  output: picture # picture (default), figure, or img
+  noscript: false # false (default) or true
+
+  ## Placeholder
+  placeholder: lqip # null (default), lqip, dominant, or [black, [gray-100..gray-900], white]
+  lqip_div_factor: 5 # 5 (default)
+  lqip_blur_amount: 5 # 5 (default)
+  gif_div_factor: 10 # 10 (default)
+
+  ## Figure
+  target: "_blank" # _blank (default)
+  rel: "noopener, noreferrer" # noopener, noreferrer (default)
+  figure_class: "figure" # figure (default)
+  figure_image_class: "figure-img img-fluid blur-up" # "figure-img img-fluid" (default)
+  figcaption_class: figure-caption # figure-caption (default)
+  figcaption_title_h: 4 # 4 (default)
+  attr_link_target: "_blank" # _blank (default)
+  attr_link_rel: "noopener, noreferrer" # noopener, noreferrer (default)
+
+  ## Render hook
+  render_hook: true # false (default) or true
+  render_hook_wrapper_class: img-wrapper # img-wrapper (default)
+
+  ## Shortcode
+  shortcode_wrapper_class: img-wrapper # img-wrapper (default)
+
+  ## Debugging
+  suppress_width_warning: false # false (default) or true
+  debug: false # false (default) or true

layouts/_default/_markup/render-image.html

@@ -1,8 +1,25 @@
-{{ $img := .Destination }}
-{{ $alt := .Text -}}
-{{ $params := (dict "img" $img "alt" $alt) -}}
-{{ if not (resources.Get $params.img) -}}
-  {{ $params = merge $params (dict "img" (.Page.Resources.GetMatch $params.img)) -}}
-{{ end -}}
-
-{{ partial "lazyimg" $params }}
+{{- /*
+  _default/_markup/render-image.html
+  - if image.renderhook=true
+    - sets params
+    - sennds params to render-hook-template
+  - else calls render-hook-default to emulate default markdown image behavior
+
+  @author @sean-au
+
+  @context Render hook params
+
+  @access public
+
+  @example - Hugo Markdown
+  ![Image Alt](img_path.jpeg "Image title")
+
+*/ -}}
+{{- $params := partial "hri/private/params/render-hook" . -}}
+{{- if eq $params.render_hook.enabled true -}}
+  {{- partial "hri/private/print/render-hook" $params -}}
+{{- else -}}
+  {{- /* default markdown behavior */ -}}
+  {{- partial "hri/private/print/render-hook-default" . -}}
+{{- end -}} 
+

layouts/partials/figure.html

@@ -0,0 +1 @@
+{{ partial "hri/figure" . }}

layouts/partials/hri/figure.html

@@ -0,0 +1,30 @@
+{{- /*
+  figure.html
+  Takes inputs and page context.
+  - Passes inputs to figure-params partial for processing
+  - sends params to 2x partials for figure tag generation
+  - inbetween these to partials is the image partial ()
+
+  @author @sean-au
+
+  @context . Context from a page template, figure/image partial, or render hook partial.
+
+  @access public
+
+  @example - Go Template
+  {{ partial "figure" (dict "src" "image.jpg" "alt" "alt text") }}
+
+*/ -}}
+
+{{- $params := . -}}
+{{- if not $params.common.processed -}}
+  {{- $common := partial "hri/private/params/common.html" (merge $params (dict "partial" "figure")) -}}
+  {{- $params = merge $params (dict "common" $common) -}}
+{{- else -}}
+  {{- $params = merge $params (dict "common" (dict "partial" "figure" )) -}}
+{{- end -}}
+{{- $figure_params := partial "hri/private/params/figure" $params -}}
+{{- $params = merge $params (dict "figure" $figure_params) }}
+
+{{- partial "hri/private/print/figure-set" $params -}}
+

layouts/partials/hri/image.html

@@ -0,0 +1 @@
+{{ partial "hri/private/image" (merge . (dict "partial" "image")) }}

layouts/partials/hri/img.html

@@ -0,0 +1 @@
+{{ partial "hri/private/image" (merge . (dict "partial" "img")) }}

layouts/partials/hri/picture.html

@@ -0,0 +1 @@
+{{ partial "hri/private/image" (merge . (dict "partial" "picture")) }}

layouts/partials/hri/private/debug/debug-print.html

@@ -0,0 +1,19 @@
+<table>
+  <thead>
+    <tr>
+      <th>
+
+      </th>
+    </tr>
+  </thead>
+</table>
+
+{{ range $k, $e := . }}
+  <h3>{{ $k }}</h3>
+  <p>
+  {{ range $k, $e := . }}
+    <strong>{{ $k }}:</strong> {{ $e }}<br>
+  {{ end }}
+  </p>
+{{ end }}
+