Skip to content

Commit

Permalink
theme(feat): social share links (wip)
Browse files Browse the repository at this point in the history
Signed-off-by: Patrick Kollitsch <[email protected]>
  • Loading branch information
davidsneighbour committed Oct 20, 2024
1 parent d866e89 commit d9f9cb5
Show file tree
Hide file tree
Showing 5 changed files with 192 additions and 25 deletions.
105 changes: 105 additions & 0 deletions config/_default/params.toml
Original file line number Diff line number Diff line change
Expand Up @@ -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"
2 changes: 1 addition & 1 deletion layouts/_default/single.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
*/}}
{{ .CurrentSection.Title }}
</aside>
{{ partial "social-share.html" . }}
{{- partialCached "social/share.html" . . -}}
<h1 class="f1 athelas mt3 mb1">
{{- .Title -}}
</h1>
Expand Down
24 changes: 0 additions & 24 deletions layouts/partials/social-share.html

This file was deleted.

1 change: 1 addition & 0 deletions layouts/partials/social/follow.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 -}}
Expand Down
85 changes: 85 additions & 0 deletions layouts/partials/social/share.html
Original file line number Diff line number Diff line change
@@ -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 -}}

This comment has been minimized.

Copy link
@melroy89

melroy89 Oct 22, 2024

Contributor

This will cause a lot of non-sense in Tweets or alike.. The body is one big mess:

Image

This comment has been minimized.

Copy link
@melroy89

melroy89 Oct 22, 2024

Contributor

I will fix this by using transform.Plainify, see PR: #758

{{- $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 }}

0 comments on commit d9f9cb5

Please sign in to comment.