theme(feat): social media follow links

documentation will follow at https://github.com/theNewDynamic/gohugo-theme-ananke/wiki/Social-media-network-setup

Signed-off-by: Patrick Kollitsch <patrick@davids-neighbour.com>

.gitignore

@@ -38,3 +38,4 @@ resources/_gen/
 .wireit
 .favorites.json
 *.code-workspace
+config/gargulus

assets/ananke/socials/envelope.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. --><path d="M64 112c-8.8 0-16 7.2-16 16l0 22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1l0-22.1c0-8.8-7.2-16-16-16L64 112zM48 212.2L48 384c0 8.8 7.2 16 16 16l384 0c8.8 0 16-7.2 16-16l0-171.8L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64l384 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64L64 448c-35.3 0-64-28.7-64-64L0 128z"/></svg>

config/_default/params.toml

@@ -0,0 +1,33 @@
+[ananke.social]
+icon_path = "ananke/socials/%s.svg"
+
+[ananke.social.follow]
+new_window_icon = false # show a little "opens in new window" icon next to the link
+networks = [
+  "facebook",
+  "bluesky",
+  "linkedin"
+]
+
+# social media network setups
+[[ananke.social.networks]]
+slug = "facebook"
+label = "Facebook"
+profile = "https://www.facebook.com/%s"
+icon = "facebook" # font awesome brand icon name
+
+[[ananke.social.networks]]
+slug = "bluesky"
+label = "Bluesky"
+profile = "https://bsky.app/profile/%s"
+icon = "bluesky" # font awesome brand icon name
+
+[[ananke.social.networks]]
+slug = "linkedin"
+label = "LinkedIn"
+profile = "http://linkedin.com/in/%s"
+icon = "linkedin" # font awesome brand icon name
+
+# optional config parameters
+# [[ananke.social.networks]]
+# rel = "noopener" # set to noopener by default, could contain `me` and other values

exampleSite/config.toml

@@ -38,6 +38,12 @@ description = "The last theme you'll ever need. Maybe."
 background_color_class = "bg-black"
 recent_posts_number = 3
 
-[[params.ananke_socials]]
-name = "twitter"
-url = "https://twitter.com/GoHugoIO"
+[params.ananke.social]
+[params.ananke.social.facebook]
+username = "patrick.kollitsch"
+
+[params.ananke.social.linkedin]
+username = "patrickkollitsch"
+
+[params.ananke.social.bluesky]
+username = "kollitsch.dev"

layouts/partials/site-footer.html

@@ -3,6 +3,6 @@
   <a class="f4 fw4 hover-white no-underline white-70 dn dib-ns pv2 ph3" href="{{ .Site.Home.Permalink }}" >
     &copy; {{ with .Site.Copyright | default .Site.Title }} {{ . | safeHTML }} {{ now.Format "2006"}} {{ end }}
   </a>
-    <div>{{ partial "social-follow.html" . }}</div>
+    <div>{{ partialCached "social/follow.html" . }}</div>
   </div>
 </footer>

layouts/partials/site-navigation.html

@@ -20,7 +20,7 @@
           {{ end }}
         </ul>
       {{ end }}
-      {{ partialCached "social-follow.html" . }}
+      {{ partialCached "social/follow.html" . }}
     </div>
   </div>
 </nav>

layouts/partials/social-follow.html

@@ -1,14 +0,0 @@
-{{ $socials := where (partialCached "func/socials/Get" "socials/Get") "follow" "!=" false }}
-<div class="ananke-socials">
-  {{ range $socials }}
-    {{ $rel := .rel | default "noopener" }}
-    <a href="{{ .url }}" target="_blank" rel="{{ $rel }}" class="{{ .name }} ananke-social-link link-transition stackoverflow link dib z-999 pt3 pt0-l {{ cond (eq $.Site.Language.LanguageDirection "rtl") "ml1" "mr1" }}" title="{{ .label }} link" aria-label="follow on {{ .label }}——Opens in a new window">
-      {{ with .icon }}
-        <span class="icon">{{ . }}</span>
-      {{ else }}
-        {{ .label }}
-      {{ end }}
-      {{- partial "new-window-icon.html" . -}}
-    </a>
-  {{ end }}
-</div>

layouts/partials/social-share.html

@@ -3,7 +3,7 @@
 
 {{ $facebook_href := printf "https://www.facebook.com/sharer.php?u=%s" $url }}
 {{ $twitter_href := printf "https://twitter.com/intent/tweet?url=%s&text=%s" $url $title }}
-{{ with site.Social.twitter }}
+{{ with site.Params.Social.twitter }}
   {{ $twitter_href = printf "%s&via=%s" $twitter_href . }}
 {{ end }}
 {{ $linkedin_href := printf "https://www.linkedin.com/shareArticle?mini=true&url=%s&title=%s" $url $title }}

layouts/partials/social/follow.html

@@ -0,0 +1,65 @@
+{{- $context := . -}}
+
+{{- $config := site.Params.ananke.social -}}
+{{- $networks := $config.follow.networks -}}
+{{- $setups := (collections.Where $config.networks  "slug" "in" $networks) -}}
+{{/* This here is an ugly workaround for GoHugo's missing sortByArray feature.
+   Let's cache it so it does not take away too much time.
+   PS: It's also a couple of years old, so maybe there is a better solution by now. */}}
+{{- $setups = partials.IncludeCached "func/sortNetworks.html" (dict "networks" $networks "setups" $setups) "social-follow" -}}
+
+<div class="ananke-socials">
+  {{- range $setups -}}
+    {{- $setup := . -}}
+    {{- $network := $setup.slug -}}
+    {{- $profile := index $config $network -}}
+    {{- $rel := $setup.rel | default "noopener" -}}
+    {{- $link := (printf $setup.profile $profile.username) -}}
+    {{- $languageDirection := cond (eq $.Site.Language.LanguageDirection "rtl") "ml1" "mr1" -}}
+    <a href="{{ $link }}" target="_blank" rel="{{ $rel }}"
+        class="{{ .name }} ananke-social-link link-transition stackoverflow link dib z-999 pt3 pt0-l {{ $languageDirection }}"
+        title="follow on {{ .label }} - Opens in a new window"
+        aria-label="follow on {{ .label }} - Opens in a new window">
+      {{- with .icon -}}
+        {{- $icon := resources.Get (printf "ananke/socials/%s.svg" .) -}}
+        {{- with $icon -}}
+          <span class="icon">
+            {{ .Content | safeHTML }}
+            {{/* @todo indicator for missing or misconfigured icon */}}
+          </span>
+        {{- end -}}
+      {{- else -}}
+        {{- .label -}}
+      {{- end -}}
+      {{- with $config.follow.new_window_icon -}}
+        {{- partial "new-window-icon.html" . -}}
+      {{- end -}}
+    </a>
+  {{- end -}}
+</div>
+
+{{ define "partials/func/sortNetworks.html" }}
+  {{- /*
+
+  Sorting a list of social networks defined by the order in `networks`.
+  Only networks present in both `networks` and `setups` will be included. Items missing from `networks` are ignored.
+  Use `networks` to setup the order of the networks and which network to enable.
+
+  Usage: {{ $setups = partials.IncludeCached "func/sortNetworks.html" (dict "networks" $networks "setups" $setups) }}
+
+  See also `config/_default/params.toml` > `ananke.social` for details.
+
+  */ -}}
+  {{- $networks := .networks -}}
+  {{- $setups := .setups -}}
+  {{- $output := collections.Slice -}}
+  {{- range $networks -}}
+    {{- $network := . -}}
+    {{- range $setups -}}
+      {{- if compare.Eq .slug $network -}}
+        {{- $output = $output | collections.Append . -}}
+      {{- end -}}
+    {{- end -}}
+  {{- end -}}
+  {{- return $output -}}
+{{- end -}}

package.json

@@ -55,7 +55,7 @@
       "command": "commit-and-tag-version --sign -a -t \"v\" --releaseCommitMessageFormat \"chore(release): v{{currentTag}}\" --prerelease prerelease -- --no-verify"
     },
     "server": {
-      "command": "cd exampleSite; rm -rf public; hugo server -D -E -F --disableFastRender --verbose --logLevel debug --debug --tlsAuto --panicOnWarning"
+      "command": "cd exampleSite; rm -rf public; hugo server -D -E -F --environment gargulus --disableFastRender --verbose --logLevel debug --debug --tlsAuto --panicOnWarning"
     }
   }
 }