theme(feat): social share links (wip)

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

config/_default/params.toml

@@ -9,75 +9,180 @@ networks = [
   "linkedin"
 ]
 
+[ananke.social.share]
+icons = true
+sharetext = true
+networks = [
+  "email",
+  "facebook",
+  "bluesky",
+  "linkedin"
+]
+
 # social media network setups
 [[ananke.social.networks]]
 slug = "bluesky"
 label = "Bluesky"
 profile = "https://bsky.app/profile/%s"
 icon = "bluesky" # font awesome brand icon name
+link = "https://bsky.app/intent/compose"
+[ananke.social.networks.particles]
+text = "permalink"
 
 [[ananke.social.networks]]
 slug = "email"
 label = "Email"
 profile = false
 icon = "envelope" # font awesome free icon name
+link = "mailto:"
+[ananke.social.networks.particles]
+body = "permalink"
+subject = "title"
 
 [[ananke.social.networks]]
 slug = "facebook"
 label = "Facebook"
+color = "#3b5998"
 profile = "https://www.facebook.com/%s"
 icon = "facebook" # font awesome brand icon name
+link = "https://facebook.com/sharer/sharer.php"
+[ananke.social.networks.particles]
+u = "permalink"
 
 [[ananke.social.networks]]
 slug = "hackernews"
 label = "Hacker News"
 profile = "https://news.ycombinator.com/user?id=%s"
 icon = "hacker-news" # font awesome brand icon name
+link = "https://news.ycombinator.com/submitlink"
+[ananke.social.networks.particles]
+u = "permalink"
+t = "description"
 
 [[ananke.social.networks]]
 slug = "linkedin"
 label = "LinkedIn"
+color = "#0077b5"
 profile = "http://linkedin.com/in/%s"
 icon = "linkedin" # font awesome brand icon name
+link = "https://www.linkedin.com/shareArticle"
+[ananke.social.networks.particles]
+url = "permalink"
+title = "title"
+summary = "description"
+source = "permalink"
+params = "mini=true"
 
 [[ananke.social.networks]]
 slug = "pinterest"
 label = "Pinterest"
 profile = "https://www.pinterest.com/%s/"
 icon = "pinterest" # font awesome brand icon name
+link = "https://pinterest.com/pin/create/button/"
+[ananke.social.networks.particles]
+url = "permalink"
+media = "permalink"
+description = "description"
 
 [[ananke.social.networks]]
 slug = "reddit"
 label = "Reddit"
 profile = "https://www.reddit.com/user/%s/"
 icon = "reddit" # font awesome brand icon name
+link = "https://reddit.com/submit/"
+[ananke.social.networks.particles]
+url = "permalink"
+title = "title"
+params = "resubmit=true"
 
 [[ananke.social.networks]]
 slug = "telegram"
 label = "Telegram"
 profile = "https://t.me/%s"
 icon = "telegram" # font awesome brand icon name
+link = "https://telegram.me/share/url"
+[ananke.social.networks.particles]
+text = "description"
+url = "permalink"
 
 [[ananke.social.networks]]
 slug = "tumblr"
 label = "Tumblr"
 profile = "https://www.tumblr.com/blog/%s"
 icon = "tumblr" # font awesome brand icon name
+link = "https://www.tumblr.com/widgets/share/tool"
+[ananke.social.networks.particles]
+canonicalUrl = "permalink"
+shareSource = "source"
+title = "title"
+caption = "description"
+content = "description"
+params = "posttype=link"
 
 [[ananke.social.networks]]
 slug = "twitter"
 label = "Twitter"
+color = "#1da1f2"
 profile = "https://twitter.com/%s"
 icon = "twitter" # font awesome brand icon name
+link = "https://twitter.com/intent/tweet/"
+[ananke.social.networks.particles]
+text = "description"
+url = "permalink"
 
 [[ananke.social.networks]]
 slug = "whatsapp"
 label = "WhatsApp"
 profile = false
 icon = "whatsapp" # font awesome brand icon name
+link = "whatsapp://send"
+linkintext = true
+[ananke.social.networks.particles]
+text = "description"
 
 [[ananke.social.networks]]
 slug = "xing"
 label = "Xing"
 profile = "https://www.xing.com/profile/%s"
 icon = "xing" # font awesome brand icon name
+link = "https://www.xing.com/app/user"
+separator = ";"
+[ananke.social.networks.particles]
+url = "permalink"
+title = "title"
+params = "op=share"
+
+# @TODO add more networks
+# instagram:
+# label = "Instagram"
+# color = "#e1306c"
+# youtube:
+# label = "YouTube"
+# color = "#cd201f"
+# github:
+# label = "GitHub"
+# color = "#6cc644"
+# gitlab:
+# label = "GitLab"
+# color = "#FC6D26"
+# keybase:
+# label = "Keybase"
+# color = "#3d76ff"
+# medium:
+# label = "Medium"
+# color = "#0077b5"
+# mastodon:
+# label = "Mastodon"
+# color = "#6364FF"
+# slack:
+# label = "Slack"
+# color = "#E01E5A"
+# stackoverflow:
+# label = "Stack Overflow"
+# color = "#f48024"
+# rss:
+# label = "RSS"
+# color = "#ff6f1a"
+# tiktok:
+# label = "TikTok"
+# color = "#fe2c55"

layouts/_default/single.html

@@ -14,7 +14,7 @@
           */}}
         {{ .CurrentSection.Title }}
       </aside>
-      {{ partial "social-share.html" . }}
+      {{- partialCached "social/share.html" . . -}}
       <h1 class="f1 athelas mt3 mb1">
         {{- .Title -}}
       </h1>

layouts/partials/social-share.html

@@ -1,24 +0,0 @@
-{{ $title := .Title }}
-{{ $url := printf "%s" .Permalink | absLangURL }}
-
-{{ $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.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 }}
-{{ $hrefs := dict "facebook" $facebook_href "twitter" $twitter_href "linkedin" $linkedin_href }}
-
-{{ $services := where (partialCached "func/socials/Get" "socials/Get") "share" true }}
-{{ if not ($.Param "disable_share") }}
-  <div id="sharing" class="mt3 ananke-socials">
-    {{ range $service :=  $services }}
-      {{ $href := index $hrefs .name }}
-      <a href="{{ $href }}" class="ananke-social-link {{ .name }} no-underline" aria-label="share on {{ .label }}">
-        {{ with .icon }}
-        <span class="icon"> {{ . }}</span>
-        {{ end }}
-      </a>
-    {{ end }}
-  </div>
-{{ end }}

layouts/partials/social/follow.html

@@ -26,6 +26,7 @@
         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">
+      {{/* @todo add the following lines to a partial, reused in social/share.html */}}
       {{- with .icon -}}
         {{- $icon := resources.Get (printf "ananke/socials/%s.svg" .) -}}
         {{- with $icon -}}

layouts/partials/social/share.html

@@ -0,0 +1,85 @@
+{{- $context := . -}}
+{{- $enabled := $context.Params.disable_share | default "true" -}}
+
+{{- if eq "true" $enabled -}}
+
+  {{- $title := $context.Title -}}
+  {{- $url := printf "%s" $context.Permalink | absLangURL -}}
+
+  {{- $config := site.Params.ananke.social -}}
+  {{- $networks := $config.share.networks -}}
+  {{- $hasLabel := $config.share.sharetext | default "true" -}}
+  {{- $hasIcon := $config.share.icons | default "true" -}}
+  {{- $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 id="sharing" class="mt3 ananke-socials">
+    {{- range $setups -}}
+      {{- $setup := . -}}
+      {{/* @todo i18n $sharetext := lang.Translate (fmt.Printf "share_on_%s" $setup.slug) */}}
+      {{- $label := "" -}}
+      {{ with $config.share.sharetext -}}
+        {{- $label = printf "Share on %s" $setup.label -}}
+      {{- end -}}
+      {{ if eq .share "false" | default "true" -}}
+        {{- continue -}}
+        {{/* @todo notification into CLI that a network is configured but not supported */}}
+      {{- end -}}
+      {{- $options := (dict "context" page "setup" $setup) }}
+      {{- $href := partialCached "func/getShareLink.html" $options $options -}}
+      <a href="{{ $href }}"
+        class="ananke-social-link {{ .slug }} no-underline"
+        title="{{ $label }}" aria-label="{{ $label }}"
+        target="_blank" rel="nofollow noopener noreferrer">
+        {{ with $config.share.icons -}}
+          {{/* @todo add the following lines to a partial, reused in social/follow.html */}}
+          {{- with $setup.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 -}}
+        {{- else -}}
+          {{- $label -}}
+        {{- end -}}
+      </a>
+    {{- end -}}
+  </div>
+
+{{- end -}} {{/* if eq "true" $enabled */}}
+
+{{ define "partials/func/getShareLink.html" }}
+  {{- $context := .context -}}
+  {{- $setup := .setup -}}
+  {{- $separator := "&" -}}
+  {{- $title := $context.Title | transform.HTMLEscape -}}
+  {{- $description := $context.Summary | transform.HTMLEscape -}}
+  {{- $permalink := $context.Permalink | transform.HTMLEscape -}}
+  {{- with $setup.separator -}}
+    {{- $separator = . -}}
+  {{- end -}}
+  {{- $link := fmt.Printf "%s%s" $setup.link "?" -}}
+  {{- range $key, $value := $setup.particles -}}
+    {{- if compare.Eq $key "params" -}}
+      {{- $link = fmt.Printf "%s%s%s" $permalink $separator $value -}}
+    {{- else -}}
+      {{- if compare.Eq $value "description" -}}
+        {{- $link = fmt.Printf "%s%s%s" $link $separator (collections.Querify $key $description) -}}
+      {{- else if compare.Eq $value "title" -}}
+        {{- $link = fmt.Printf "%s%s%s" $link $separator (collections.Querify $key $title) -}}
+      {{- else if compare.Eq $value "permalink" -}}
+        {{- $link = fmt.Printf "%s%s%s" $link $separator (collections.Querify $key $permalink) -}}
+      {{- end -}}
+    {{- end -}}
+  {{- end -}}
+  {{- return $link -}}
+{{ end }}