Update icon templates

The icon templates are pretty limited to what I want to do. This is also
nice for those who are extending the theme with easy-to-use functions.

CHANGELOG.adoc

@@ -27,6 +27,9 @@ and this project adheres to https://semver.org/spec/v2.0.0.html[Semantic Version
 ** `.icon` has been updated to `.site__icon`.
 ** `.list` has been updated to `.site__list`.
 
+* Update the icon template.
+This is also useful for those who are extensively modifying the theme.
+
 
 
 

assets/templates/heroicon.svg

@@ -2,7 +2,8 @@
 This template applies an ID to an SVG from the Heroicons set to be used with `<use>` element.
 */ -}}
 {{- $match := "^\\s*<svg (.*)?>" }}
-{{- $icon := resources.Get (printf "svg/heroicons/24/solid/%s.svg" .) }}
-{{- $replaceWith := printf `<svg id="%s" ${1}>` . }}
+{{- $name := default .id .name }}
+{{- $icon := resources.Get (printf "svg/heroicons/24/solid/%s.svg" .id) }}
+{{- $replaceWith := printf `<svg id="%s" ${1}>` $name }}
 
 {{- replaceRE $match $replaceWith $icon.Content | safeHTML -}}

assets/templates/simple-icon.svg

@@ -2,8 +2,8 @@
 This template applies an ID to an SVG from the Simple Icons set to be used with `<use>` element.
 */ -}}
 {{- $match := "<svg (.*)?>\\s*(.*)\\s*</svg>" }}
-{{- $icon := resources.Get (printf "svg/simple-icons/%s.svg" .) }}
-{{- $replaceWith := printf `<svg id="%s" ${1}>${2}</svg>` . }}
+{{- $name := default .id .name }}
+{{- $icon := resources.Get (printf "svg/simple-icons/%s.svg" .id) }}
+{{- $replaceWith := printf `<svg id="%s" ${1}>${2}</svg>` $name }}
 
 {{- replaceRE $match $replaceWith $icon.Content | safeHTML }}
-

config.toml

@@ -1,7 +1,7 @@
 [module]
   [module.hugoVersion]
     extended = true
-    min = "0.95.0"
+    min = "0.110.0"
 
   [[module.imports]]
     path = "github.com/foo-dogsquared/hugo-theme-contentful"

layouts/partials/components.html

@@ -3,32 +3,30 @@
   If the partial is short enough, it should be put here.
 */ -}}
 
-{{- /*
-  This is a partial that creates an icon from the icon templates and links them from the created file.
-  Why not embed the text into the resulting document, you ask?
-  I just want to save a few kilobytes of the total site weight. :)
-
-  It accepts a dictionary with the specified keys:
-
-  - id - The name of the resource in a specific set.
-  - output - The output location of the resource relative to the base URL.
-    It can accept a formatted string (e.g., "icons/brand/%s.svg") where 'id' will be used.
-  - template - The template file to be used.
-    It should be relative to the asset directory.
-*/ -}}
-{{- define "partials/components/icon.html" }}
-  {{- $icon := . }}
-  {{- $res := resources.ExecuteAsTemplate (printf $icon.output $icon.id) $icon.id (resources.Get $icon.template) }}
-  <svg class="site__icon">
-    <use href="{{ $res.Permalink }}#{{ $icon.id }}"></use>
-  </svg>
-{{- end }}
-
-
 {{- /*
   A partial that aliases the Heroicon template from the icon partial.
-  It only needs a string of the ID from one of the icons.
 */ -}}
 {{- define "partials/components/heroicon.html" }}
-  {{- partial "components/icon.html" (dict "id" . "output" "icons/generic/%s.svg" "template" "templates/heroicon.svg") }}
+  {{ $name := default .id .name }}
+  {{- $res := resources.ExecuteAsTemplate (printf "icons/generic/%s.svg" .id)
+                                          (dict "id" .id
+                                                "name" $name)
+                                          (resources.Get "templates/heroicon.svg") }}
+  <svg class="site__icon">
+    <use href="{{ $res.Permalink }}#{{ $name }}"></use>
+  </svg>
 {{ end }}
+
+{{- /*
+  A partial for easily using icons from Simple Icons set.
+*/ -}}
+{{- define "partials/components/simple-icon.html" }}
+  {{ $name := default .id .name }}
+  {{- $res := resources.ExecuteAsTemplate (printf "icons/brand/%s.svg" .id)
+                                          (dict "id" .id
+                                                "name" $name)
+                                          (resources.Get "templates/simple-icon.svg") }}
+  <svg class="site__icon">
+    <use href="{{ $res.Permalink }}#{{ $name }}"></use>
+  </svg>
+{{- end }}

layouts/partials/components/post-meta.html

@@ -6,7 +6,7 @@
   <div class="site__list post__meta" aria-hidden="true">
     {{- if .PublishDate -}}
     <span class="post__meta-icon-label">
-      {{ partial "components/heroicon.html" "calendar" }}
+      {{ partial "components/heroicon.html" (dict "id" "calendar") }}
       <time datetime="{{ .PublishDate.Format $RFC3339 }}" title="{{ i18n "published_on" }}">
         {{ .PublishDate.Format "2006-01-02" }}
       </time>
@@ -28,7 +28,7 @@
     {{- range . }}{{ $names = $names | append .name }}{{ end }}
     {{- $author := index (first 1 $names) 0 }}
     <span class="post__meta-icon-label" data-authors="{{ jsonify $names }}" title="{{ i18n "published_by" }}">
-      {{ partial "components/heroicon.html" "pencil" }}
+      {{ partial "components/heroicon.html" (dict "id" "pencil") }}
       <span>
         {{ $author }}{{ if ge (len .) 2 }}, et al.{{ end }}
       </span>

layouts/partials/components/theme-button.html

@@ -4,7 +4,7 @@
 */ -}}
 {{- if gt (len (index $.Site.Data "more-contentful").themes) 1 }}
 <div class="site__theme-btn" aria-label="Theme toggle" aria-hidden="true">
-  {{ partial "components/heroicon.html" "swatch" }}
+  {{ partial "components/heroicon.html" (dict "id" "swatch") }}
   <div class="site__theme-dropdown">
     <div class="site__theme-dropdown-list">
       {{ $themes := (index $.Site.Data "more-contentful").themes }}

layouts/partials/footer.html

@@ -24,7 +24,7 @@
   {{- range $links -}}
     <a {{ if $useImage }}class="site__social-icon"{{ end }} rel="me" href="{{ .url | absLangURL }}" aria-label="{{ with .name }}{{ . }}{{ else }}{{ .id }}{{ end }}">
     {{- if $useImage }}
-      {{- partial "components/icon.html" (dict "id" .id "output" "icons/brand/%s.svg" "template" "templates/simple-icon.svg") }}
+      {{- partial "components/simple-icon.html" (dict "id" .id) }}
     {{- else }}
       {{- .name }}
     {{- end }}