theme(feat): social media follow links

Patrick Kollitsch

20.47.2024 4f3e709d8334f7f2634efa91450db96433c550d5

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 @@
.wireit
.favorites.json
*.code-workspace
config/gargulus

 assets/ananke/socials/envelope.svg

New file
@@ -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

New file
@@ -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 @@
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

File was deleted

 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

New file
@@ -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"
    }
  }
}