diff --git a/README.md b/README.md index 80804c7..26e3dcf 100644 --- a/README.md +++ b/README.md @@ -159,85 +159,7 @@ Using front matter and cascade, this can be customized for a whole section, or j ### Social Follow + Share -The theme automatically adds "Follow" link icons to the header and footer and "Share" link icons to pages unless `disable_share` parameter is set to true either on the site level (site params) or page level (front matter). Each built-in services sports a label, an icon and a color. - -In order to register a service to be used, user must add an `ananke_socials` parameter to its project configuration file and list them through it in the desired order. Each entry must bear a - -- name*: It matches the built-in service reference (Ex: twitter, github) -- url*: The url of the handle's profile on the service (Ex: , -theNewDynamic) -- rel: (default: `noopener`) Controls the `rel` attribute of the "follow" link. Useful for Mastodon verification which requires a `rel="me"` on the link. - -```yaml -params: - ananke_socials: - - name: twitter - url: https://twitter.com/theNewDynamic - - name: github - url: https://github.com/theNewDynamic - - name: mastodon - url: https://social.example.com/@username - rel: me noopener -``` - -If user needs to overwrite default `color` and `label` of the service, they simply need to append the following to the entry: - -- label: The displayed name of the service to be used to popuplate `[title]` attributes and read-only. (Ex: Twitter, GitHub) -- color: Used for styling purposes. (Ex: '#1da1f2', '#6cc644') - -```yaml -params: - ananke_socials: - - name: twitter - url: https://twitter.com/theNewDynamic - label: TND Twitter - - name: github - url: https://github.com/theNewDynamic - label: TND GitHub Account - color: '#ff6800' -``` - -#### Limit Follow or Share - -If a user needs to control Share and Follow of a service, for example enabling "Share on Facebook" without having a Facebook Page to "follow", they can set `follow: false` one the registered service. - -```yaml -params: - ananke_socials: - - name: facebook - label: Facebook - follow: false - - name: twitter - url: https://twitter.com/theNewDynamic - label: TND Twitter -``` - -#### Social Icons Customization - -On top of easily customizing the built-in services' label and color, user can overwrite their icon by adding an svg file at `/assets/ananke/socials` with a filename matching the service's name. -For example, in order to use your own GitHub icon, simply add an svg file at `/assets/ananke/socials/github.svg` - -#### Built-in Services - -Here is the list of built-in services. Those marked with an `*` are also part of the "Share" module. - -- twitter* -- instagram -- youtube -- github -- gitlab -- keybase -- linkedin* -- medium -- mastodon -- slack -- stackoverflow -- facebook* -- rss - -#### Complement - -In order to add an unkown service (absent from the list above), you simply need to add all three settings to `ananke_socials`: name, url, label, color, and optionally add an icon file matching the `name` to the `assets/ananke/socials` directory. In the absence of an icon, the theme will print the service's label. +Read the documentation for [social follow](https://github.com/theNewDynamic/gohugo-theme-ananke/wiki/Social-media-network-setup#configure-social-media-follow-links) and [social share](https://github.com/theNewDynamic/gohugo-theme-ananke/wiki/Social-media-network-setup#configure-social-media-follow-links) in our wiki. ### Content indexing diff --git a/config/_default/params.toml b/config/_default/params.toml index dd00dc0..90e93d2 100644 --- a/config/_default/params.toml +++ b/config/_default/params.toml @@ -1,75 +1,83 @@ [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" -# ] +[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 = "bluesky" +label = "Bluesky" profile = "https://bsky.app/profile/%s" icon = "bluesky" # font awesome brand icon name [[ananke.social.networks]] slug = "email" +label = "Email" profile = false icon = "envelope" # font awesome free icon name [[ananke.social.networks]] slug = "facebook" +label = "Facebook" profile = "https://www.facebook.com/%s" icon = "facebook" # font awesome brand icon name [[ananke.social.networks]] slug = "hackernews" +label = "Hacker News" profile = "https://news.ycombinator.com/user?id=%s" icon = "hacker-news" # 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 [[ananke.social.networks]] slug = "pinterest" +label = "Pinterest" profile = "https://www.pinterest.com/%s/" icon = "pinterest" # font awesome brand icon name [[ananke.social.networks]] slug = "reddit" +label = "Reddit" profile = "https://www.reddit.com/user/%s/" icon = "reddit" # font awesome brand icon name [[ananke.social.networks]] slug = "telegram" +label = "Telegram" profile = "https://t.me/%s" icon = "telegram" # font awesome brand icon name [[ananke.social.networks]] slug = "tumblr" +label = "Tumblr" profile = "https://www.tumblr.com/blog/%s" icon = "tumblr" # font awesome brand icon name [[ananke.social.networks]] slug = "twitter" +label = "Twitter" profile = "https://twitter.com/%s" icon = "twitter" # font awesome brand icon name [[ananke.social.networks]] slug = "whatsapp" +label = "WhatsApp" profile = false icon = "whatsapp" # font awesome brand icon name [[ananke.social.networks]] slug = "xing" +label = "Xing" profile = "https://www.xing.com/profile/%s" icon = "xing" # font awesome brand icon name - -# optional config parameters -# [[ananke.social.networks]] -# rel = "noopener" # set to noopener by default, could contain `me` and other values diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 31ff386..f167ad7 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -49,6 +49,7 @@ networks = [ [params.ananke.social] [params.ananke.social.facebook] username = "patrick.kollitsch" +# profilelink = "https://www.facebook.com/patrick.kollitsch" [params.ananke.social.linkedin] username = "patrickkollitsch" diff --git a/layouts/partials/social/follow.html b/layouts/partials/social/follow.html index c4c3037..2ac075e 100644 --- a/layouts/partials/social/follow.html +++ b/layouts/partials/social/follow.html @@ -14,6 +14,7 @@ {{- $network := $setup.slug -}} {{- $profile := index $config $network -}} {{- $rel := $setup.rel | default "noopener" -}} + {{- $label := $profile.label | default $setup.label -}} {{- $link := (printf $setup.profile $profile.username) -}} {{- with $profile.profilelink -}} @@ -23,8 +24,8 @@ {{- $languageDirection := cond (eq $.Site.Language.LanguageDirection "rtl") "ml1" "mr1" -}} + 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 -}} @@ -34,7 +35,7 @@ {{- end -}} {{- else -}} - {{- .label -}} + {{- $label -}} {{- end -}} {{- with $config.follow.new_window_icon -}} {{- partial "new-window-icon.html" . -}}