Bugfix/Improvement: Providing default content placeholders

.github/workflows/test-example-site.yml

@@ -0,0 +1,39 @@
+# Workflow to verify that the exampleSite runs ok
+name: Verify example site
+
+on:
+    # Runs on pull requests targeting the default branch
+    pull_request:
+        branches: ["main"]
+
+    # Allows you to run this workflow manually from the Actions tab
+    workflow_dispatch:
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    env:
+      HUGO_VERSION: 0.136.2
+    steps:
+      - name: Install Hugo CLI
+        run: |
+          wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
+          && sudo dpkg -i ${{ runner.temp }}/hugo.deb
+
+      - name: Setup hugo site
+        run: hugo new site theme-test
+
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          submodules: recursive
+          path: theme-test/themes/adritian-free-hugo-theme
+
+      - name: Run demo site
+        run: |
+         cd theme-test
+         npm i -D postcss postcss-cli autoprefixer
+         cd themes/adritian-free-hugo-theme/exampleSite
+         ## run example site
+         hugo build --themesDir ../..

README.md

@@ -63,36 +63,39 @@ Note: the theme has **not** been migrated to Hugo Modules yet. To install it, yo
 - Start Hugo with `hugo server -D`
 - 🎉 The theme is alive on http://localhost:1313/
 
-The output for the last command will be something like
+_Optional:_
+if you want to preview the theme with the example content before deciding if it's what you are looking for, you can run the theme with the example content:
+```
+cd themes/adritian-free-hugo-theme/exampleSite
+hugo server --themesDir ../..
+```
+
+
+The output for the `serve` command will be something like
 ```
 adritian-demo git:(master) ✗ hugo server -D
-port 1313 already in use, attempting to use an available port
-Watching for changes in /Users/adrianmorenopena/Projects/adritian-demo/{archetypes,assets,content,data,i18n,layouts,static,themes}
-Watching for config changes in /Users/adrianmorenopena/Projects/adritian-demo/hugo.toml
+Watching for changes in /Users/adrianmorenopena/tmp/theme-test/themes/adritian-free-hugo-theme/{archetypes,assets,data,exampleSite,i18n,layouts,static}
+Watching for config changes in /Users/adrianmorenopena/tmp/theme-test/themes/adritian-free-hugo-theme/exampleSite/hugo.toml
 Start building sites …
-hugo v0.122.0-b9a03bd59d5f71a529acb3e33f995e0ef332b3aa+extended darwin/arm64 BuildDate=2024-01-26T15:54:24Z VendorInfo=brew
+hugo v0.136.2+extended darwin/arm64 BuildDate=2024-10-17T14:30:05Z VendorInfo=brew
 
-WARN  found no layout file for "html" for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
 
                    | EN | ES | FR
 -------------------+----+----+-----
-  Pages            | 23 | 11 |  8
+  Pages            | 24 | 10 |  8
   Paginator pages  |  0 |  0 |  0
   Non-page files   |  0 |  0 |  0
-  Static files     | 87 | 87 | 87
-  Processed images | 28 |  0 |  0
+  Static files     | 90 | 90 | 90
+  Processed images | 24 |  0 |  0
   Aliases          |  1 |  0 |  0
   Cleaned          |  0 |  0 |  0
 
-
-
-Built in 617 ms
+Built in 1788 ms
 Environment: "development"
-Serving pages from memory
+Serving pages from disk
 Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
-Web Server is available at http://localhost:53031/ (bind address 127.0.0.1)
+Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
 Press Ctrl+C to stop
-
 ```
 
 #### Multi-language support

data/homepage.yml

@@ -68,8 +68,8 @@ about:
     icon: "icon-user"
     URL: "https://www.linkedin.com/in/adrianmoreno/"
   image:
-    x: "images/who-am-i/user-picture.png"
-    _2x: "images/who-am-i/[email protected]"
+    x: "images/about/user-picture.png"
+    _2x: "images/about/[email protected]"
 
 # education
 education:

exampleSite/data/homepage.yml

@@ -68,8 +68,8 @@ about:
     icon: "icon-user"
     URL: "https://www.linkedin.com/in/adrianmoreno/"
   image:
-    x: "images/who-am-i/user-picture.png"
-    _2x: "images/who-am-i/[email protected]"
+    x: "images/about/user-picture.png"
+    _2x: "images/about/[email protected]"
 
 # education
 education:

i18n/en.yaml

@@ -32,6 +32,10 @@
 - id: "showcase_button"
   translation: "Contact"
 
+  ## not visible but used for accessibility
+- id: "showcase_image_alt"
+  translation: "A picture of Cool Name"
+
 ## Homepage about
 - id: "about_title"
   translation: "Who am I?"

i18n/es.yaml

@@ -32,6 +32,10 @@
 - id: "showcase_button"
   translation: "Contactar"
 
+  ## not visible but used for accessibility
+- id: "showcase_image_alt"
+  translation: "A picture of Cool Name"
+
 ## Homepage about
 - id: "about_title"
   translation: "¿Quién soy?"
@@ -47,6 +51,10 @@
 - id: "about_button"
   translation: "Sobre mí"
 
+  ## not visible but used for accessibility
+- id: "about_image_alt"
+  translation: "Una imagen de Cool Name"
+
 ## Homepage education
 - id: "education_title"
   translation: "Educación"

i18n/fr.yaml

@@ -32,6 +32,10 @@
 - id: "showcase_button"
   translation: "Contacter"
 
+  ## not visible but used for accessibility
+- id: "showcase_image_alt"
+  translation: "A picture of Cool Name"
+
 ## Homepage about
 - id: "about_title"
   translation: "Qui suis-je ?"
@@ -52,6 +56,10 @@
 - id: "about_button"
   translation: "À propos de moi"
 
+  ## not visible but used for accessibility
+- id: "showcase_image_alt"
+  translation: "En photo de cool name"
+
 ## Homepage education
 - id: "education_title"
   translation: "Éducation"

layouts/partials/about.html

@@ -5,6 +5,12 @@
       <div class="about__profile-picture col-12 col-md-6">
         {{ $img := resources.Get .Site.Data.homepage.about.image.x }}
         {{ $img2x := resources.Get .Site.Data.homepage.about.image._2x }}      
+
+        {{ with $img }}
+        {{ with $img2x}}
+
+        {{/* ⚠️ If the image is not found, it will not be displayed - this whole block will be skipped */}} 
+
         {{ $imgWebp := $img.Resize (printf "%dx%d webp" $img.Width $img.Height) }}
         {{ $img2xWebp := $img.Resize (printf "%dx%d webp" $img2x.Width $img2x.Height) }}
         <picture>
@@ -18,9 +24,11 @@
             srcset="{{ $img.RelPermalink }} 1x, {{ $img2x.RelPermalink }} 2x"
             data-src="{{ $img.RelPermalink }}"
             data-srcset="{{ $img.RelPermalink }} 1x, {{ $img2x.RelPermalink }} 2x"
-            alt="Profile Picture of Adrián Moreno (@zetxek), working side by side with a colleague: sitting on a desk, while looking at a screen"
+            alt='{{ i18n "about_image_alt" }}'
           />
         </picture>
+        {{ end }}
+        {{ end }}
       </div>
       <div class="col-12 col-md-6 my-auto my-auto">
         <h2>{{ i18n "about_title" }}</h2>

layouts/partials/showcase.html

@@ -23,6 +23,12 @@ <h1 class="display-1">
 
   {{ $img := resources.Get .Site.Data.homepage.showcase.image.x }}
   {{ $img2x := resources.Get .Site.Data.homepage.showcase.image._2x }}
+
+  {{ with $img }}
+  {{ with $img2x}}
+
+  {{/* ⚠️ If the image is not found, it will not be displayed - this whole block will be skipped */}} 
+
   {{ $imgWebp := $img.Resize (printf "%dx%d webp q75 Lanczos picture" $img.Width $img.Height) }}
   {{ $img2xWebp := $img2x.Resize (printf "%dx%d webp q75 Lanczos picture" $img2x.Width $img2x.Height) }}
 
@@ -38,9 +44,11 @@ <h1 class="display-1">
       srcset="{{ $img.RelPermalink }} 1x, {{ $img2x.RelPermalink }} 2x"
       data-src="{{ $img.RelPermalink }}"
       data-srcset="{{ $img.RelPermalink }} 1x, {{ $img2x.RelPermalink }} 2x"
-      alt="{{ .Site.Data.homepage.showcase.image.alt }}"
+      alt='{{ i18n "showcase_image_alt" }}'
     />
   </picture>
+  {{ end }}
+  {{ end }}
 
 </div>
     </div>