Webp images (#106)

* hugo version update to the latest

* webp images

* new cloudflare wrangler action

.env

@@ -1 +1 @@
-HUGO_VERSION=0.125.5
+HUGO_VERSION=0.141.0

.github/workflows/deploy-preview.yaml

@@ -23,13 +23,18 @@ jobs:
           build-artifact: ${{ env.ARTIFACT }}
 
       - name: Deploy to CloudFlare
-        uses: cloudflare/pages-action@1
+        uses: cloudflare/wrangler-action@v3
         id: deploy_to_cloudflare
         with:
           apiToken: ${{ secrets.CLOUDFLARE_GH_PAGES_ACTION_API_TOKEN }}
           accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          projectName: ${{ env.CF_PREVIEW_PROJECT_NAME }}
-          directory: ${{ env.ARTIFACT }}
+          command: pages deploy ${{ env.ARTIFACT }} --project-name=${{ env.CF_PREVIEW_PROJECT_NAME }}
           gitHubToken: ${{ secrets.GITHUB_TOKEN }}
-          branch: ${{ github.head_ref }}
-          wranglerVersion: '3'
+
+      - name: Print deployment url's
+        env:
+          DEPLOYMENT_URL: ${{ steps.deploy_to_cloudflare.outputs.deployment-url }}
+          DEPLOYMENT_ALIAS_URL: ${{ steps.deploy_to_cloudflare.outputs.pages-deployment-alias-url }}
+        run: |
+          echo $DEPLOYMENT_URL
+          echo $DEPLOYMENT_ALIAS_URL

config/_default/config.yaml

@@ -7,7 +7,9 @@ author:
 module:
   imports:
     - path: github.com/adityatelange/hugo-PaperMod
-paginate: 7
+
+pagination:
+  pagerSize: 10
 
 ### BUILD
 publishDir: publishdir

content/posts/2022/monterey-shortcuts-for-easy-and-fast-image-processing/index.md

@@ -16,7 +16,7 @@ and
 
 [Image Resize](#resize)
 
-About a year ago, I posted [the blog about the Automator quick action]({{< ref "/image-compression-with-tinypng-from-macos-contextual-menu" >}} "Using TinyPNG Image Compression From MacOS Finder Contextual Menu") to optimize PNG and JPEG images with TinyPNG service and save the processed images next to the original ones.
+About a year ago, I posted the blog about the Automator quick action "Using TinyPNG Image Compression From MacOS Finder Contextual Menu") to optimize PNG and JPEG images with TinyPNG service and save the processed images next to the original ones.
 
 While that Automator-based solution still works, macOS Monterey now supports Shortcuts — a new automating tool that seems to substitute the old fellow Automator.
 

go.mod

@@ -2,4 +2,4 @@ module github.com/vasylenko/devdosvid.blog.git
 
 go 1.22.1
 
-require github.com/adityatelange/hugo-PaperMod v0.0.0-20240316195851-dad94ab4b7c5 // indirect
+require github.com/adityatelange/hugo-PaperMod v0.0.0-20250105143455-9f1f414be805 // indirect

go.sum

@@ -1,2 +1,2 @@
-github.com/adityatelange/hugo-PaperMod v0.0.0-20240316195851-dad94ab4b7c5 h1:yczLu4cdgnLAiRHGQuxTP86WHfEvip4IAkcKT/2HocE=
-github.com/adityatelange/hugo-PaperMod v0.0.0-20240316195851-dad94ab4b7c5/go.mod h1:HCHxNMKYdGafUYjVV3ICiAqznZK2yH0iI53jqcDFDdQ=
+github.com/adityatelange/hugo-PaperMod v0.0.0-20250105143455-9f1f414be805 h1:gi6q4K4XngQJj1oCHJvIT9huDaW1PDcSvVR8/amBxLE=
+github.com/adityatelange/hugo-PaperMod v0.0.0-20250105143455-9f1f414be805/go.mod h1:HCHxNMKYdGafUYjVV3ICiAqznZK2yH0iI53jqcDFDdQ=

hugo-runtime.dockerfile

@@ -2,7 +2,7 @@ FROM alpine:latest as builder
 ARG HUGO_VERSION
 WORKDIR /hugo
 RUN wget -q -c \
-    "https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_${HUGO_VERSION}_Linux-64bit.tar.gz" \
+    "https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_Linux-64bit.tar.gz" \
     -O hugo.tag.gz
 RUN tar -xzf hugo.tag.gz
 

layouts/shortcodes/figure.html

@@ -2,35 +2,40 @@
 {{- if eq (.Get "align") "center" }}align-center {{ end }}
 {{- with .Get "class" }}{{ . }}{{- end }}"
 {{- end -}}>
-{{- if .Get "link" -}}
-<a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
-{{- end }}
-{{ $image := .Page.Resources.GetMatch (.Get "src") }}
-{{ $postWidth := 800 }}
-{{ $defaultWidth := cond (gt $image.Width $postWidth) $postWidth $image.Width }}
-{{ $defaultHeight := cond (gt $image.Width $postWidth) (printf "%.2f" (div $postWidth (div (float $image.Width) $image.Height))) $image.Height }}
-<img loading="lazy"
-     src="{{ .Get "src" }}{{- if eq (.Get "align") "center" }}#center{{- end }}"
-{{- if or (.Get "alt") (.Get "caption") }}
-    alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
-{{- end -}}
-{{ if (.Get "width") }}width="{{ .Get "width" }}"{{ else }}width="{{ $defaultWidth }}"{{ end }}
-{{ if (.Get "height") }}height="{{ .Get "height" }}"{{ else }}height="{{ $defaultHeight }}"{{ end }}
-/> <!-- Closing img tag -->
-{{- if .Get "link" }}</a>{{ end -}}
-{{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
-<figcaption>
-    {{ with (.Get "title") -}}
-    {{ . }}
-    {{- end -}}
-    {{- if or (.Get "caption") (.Get "attr") -}}<p>
-    {{- .Get "caption" | markdownify -}}
-    {{- with .Get "attrlink" }}
-    <a href="{{ . }}">
+    {{ $image := .Page.Resources.GetMatch (.Get "src") }}
+    {{ if $image }}
+        {{ $postWidth := 800 }}
+        {{ $defaultWidth := cond (gt $image.Width $postWidth) $postWidth $image.Width }}
+        {{ $defaultHeight := cond (gt $image.Width $postWidth) (printf "%.2f" (div $postWidth (div (float $image.Width) $image.Height))) $image.Height }}
+        {{ $webpFilter := images.Process "webp" }}
+        {{ $webpImage := $image | images.Filter $webpFilter }}
+        {{ if .Get "link" -}}
+            <a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
+        {{ end }}
+        <img loading="lazy"
+             src="{{ $webpImage.RelPermalink }}"
+             {{- if or (.Get "alt") (.Get "caption") }}
+                 alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify | plainify }}{{ end }}"
+             {{- end -}}
+             {{- if (.Get "width") }}width="{{ .Get "width" }}"{{ else }}width="{{ $defaultWidth }}"{{ end }}
+             {{- if (.Get "height") }}height="{{ .Get "height" }}"{{ else }}height="{{ $defaultHeight }}"{{ end }} />
+        {{ if .Get "link" }}</a>{{ end }}
+    {{ end }}
+    {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") }}
+    <figcaption>
+        {{ with (.Get "title") -}}
+            {{ . }}
         {{- end -}}
-        {{- .Get "attr" | markdownify -}}
-        {{- if .Get "attrlink" }}</a>{{ end }}</p>
+        {{- if or (.Get "caption") (.Get "attr") -}}
+            <p>
+                {{- .Get "caption" | markdownify -}}
+                {{- with .Get "attrlink" }}
+                <a href="{{ . }}">
+                {{- end -}}
+                {{- .Get "attr" | markdownify -}}
+                {{- if .Get "attrlink" }}</a>{{ end }}
+            </p>
+        {{- end }}
+    </figcaption>
     {{- end }}
-</figcaption>
-{{- end }}
 </figure>