Skip to content

Commit

Permalink
theme(fix): add labels and label override functionality
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 9254c45 commit 7913086
Show file tree
Hide file tree
Showing 4 changed files with 25 additions and 93 deletions.
80 changes: 1 addition & 79 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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: <https://twitter.com/theNewDynamic>, <https://github.com/>
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
Expand Down
30 changes: 19 additions & 11 deletions config/_default/params.toml
Original file line number Diff line number Diff line change
@@ -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
1 change: 1 addition & 0 deletions exampleSite/config.toml
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
7 changes: 4 additions & 3 deletions layouts/partials/social/follow.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 -}}
Expand All @@ -23,8 +24,8 @@
{{- $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">
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 -}}
Expand All @@ -34,7 +35,7 @@
</span>
{{- end -}}
{{- else -}}
{{- .label -}}
{{- $label -}}
{{- end -}}
{{- with $config.follow.new_window_icon -}}
{{- partial "new-window-icon.html" . -}}
Expand Down

0 comments on commit 7913086

Please sign in to comment.