Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New social buttons on navbar (#862) #863

Closed
wants to merge 4 commits into from
Closed

New social buttons on navbar (#862) #863

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3a5bc11
Adding an optional LinkedIn button to the nav bar.
fjtc Jan 31, 2022
0a58a54
Revert the nav buttons to the default text.
fjtc Jan 31, 2022
2f1c189
Adding linkedin.star and linkedin.stars to en,fr and pt translations.
fjtc Jan 31, 2022
64ea706
Adding new social buttons on navbar. LinkedIn, Twitter, Facebook and …
fjtc Feb 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 26 additions & 1 deletion exampleSite/content/_global/nav.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,31 @@ sticky = true

[repo_button]
url = "https://github.com/okkur/syna"
text = "Star" # default: "Star"
text = "" # default: "Star"
icon = "fab fa-github" # defaults: "fab fa-github"
no_text = false # If true, the text will not be displayed

[linkedin_button]
url = "https://www.linkedin.com/"
text = "" # default: "Star"
icon = "" # defaults: "fab fa-linkedin"
no_text = true # If true, the text will not be displayed

#[twitter_button]
# url = "https://www.twitter.com/"
# text = "" # default: "Star"
# icon = "" # defaults: "fab fa-linkedin"
# no_text = false # If true, the text will not be displayed

#[facebook_button]
# url = "https://www.facebook.com/"
# text = "" # default: "Star"
# icon = "" # defaults: "fab fa-linkedin"
# no_text = false # If true, the text will not be displayed

#[custom_button]
# url = "https://www.custom.com/"
# text = "" # default: "Star"
# icon = "" # defaults: "fas fa-star"
# no_text = false # If true, the text will not be displayed
+++
2 changes: 1 addition & 1 deletion ...ite/resources/_gen/assets/scss/styles/index.scss_9045ac4ae4c25f4faabca0c0af37e804.content
View file
Open in desktop

Large diffs are not rendered by default.

16 changes: 16 additions & 0 deletions i18n/en.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,22 @@
translation: "Star"
- id: github.stars
translation: "Stars"
- id: linkedin.star
translation: "Star"
- id: linkedin.stars
translation: "Stars"
- id: twitter.star
translation: "Star"
- id: twitter.stars
translation: "Stars"
- id: facebook.star
translation: "Star"
- id: facebook.stars
translation: "Stars"
- id: custom.star
translation: "Star"
- id: custom.stars
translation: "Stars"
Comment on lines +10 to +25
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah button text should probably not be using the key "star" as this only makes sense for Github starring. Maybe a more neutral id: facebook.button_text could work as well as the translation being being Facebook.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same for the other languages.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK. I'll incorporate those changes as well.


# Content
- id: content.readmore
Expand Down
16 changes: 16 additions & 0 deletions i18n/fr.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,22 @@
translation: "Étoile"
- id: github.stars
translation: "Étoiles"
- id: linkedin.star
translation: "Étoile"
- id: linkedin.stars
translation: "Étoiles"
- id: twitter.star
translation: "Étoile"
- id: twitter.stars
translation: "Étoiles"
- id: facebook.star
translation: "Étoile"
- id: facebook.stars
translation: "Étoiles"
- id: custom.star
translation: "Étoile"
- id: custom.stars
translation: "Étoiles"

# Content
- id: content.readmore
Expand Down
20 changes: 20 additions & 0 deletions i18n/pt.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,26 @@
translation: "Website baseado em"
- id: pt
translation: "Português"
- id: github.star
translation: "Estrela"
- id: github.stars
translation: "Estrelas"
- id: linkedin.star
translation: "Estrela"
- id: linkedin.stars
translation: "Estrelas"
- id: twitter.star
translation: "Estrela"
- id: twitter.stars
translation: "Estrelas"
- id: facebook.star
translation: "Estrela"
- id: facebook.stars
translation: "Estrelas"
- id: custom.star
translation: "Estrela"
- id: custom.stars
translation: "Estrelas"

# Content
- id: content.readmore
Expand Down
46 changes: 44 additions & 2 deletions layouts/partials/fragments/nav.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,11 +129,53 @@
{{- with .Params.repo_button }}
<div class="d-none d-lg-block pl-auto">
<a class="btn btn-light ignore-color-change" href="{{ .url }}" role="button" title="{{- i18n "navbar.github" | default "Github" -}}">
<i class="{{ printf "%s" .icon | default (printf "fab fa-github") }} mr-2"></i>
{{ .text | default (i18n "github.star") }}
<i class="{{ printf "%s" .icon | default (printf "fab fa-github") }} {{ if not .no_text }}mr-2 {{ end }}"></i>
{{- if not .no_text -}}
{{ .text | default (i18n "github.star") }}
{{- end -}}
</a>
</div>
{{- end }}
{{- with .Params.twitter_button }}
<div class="d-none d-lg-block pl-auto">
<a class="btn btn-light ignore-color-change" href="{{ .url }}" role="button" title="{{- i18n "navbar.twitter" | default "twitter" -}}">
<i class="{{ printf "%s" .icon | default (printf "fab fa-twitter") }} {{ if not .no_text }}mr-2 {{ end }}"></i>
{{- if not .no_text -}}
{{ .text | default (i18n "twitter.star") }}
{{- end -}}
</a>
</div>
{{- end }}
{{- with .Params.facebook_button }}
<div class="d-none d-lg-block pl-auto">
<a class="btn btn-light ignore-color-change" href="{{ .url }}" role="button" title="{{- i18n "navbar.facebook" | default "facebook" -}}">
<i class="{{ printf "%s" .icon | default (printf "fab fa-facebook") }} {{ if not .no_text }}mr-2 {{ end }}"></i>
{{- if not .no_text -}}
{{ .text | default (i18n "facebook.star") }}
{{- end -}}
</a>
</div>
{{- end }}
{{- with .Params.linkedin_button }}
<div class="d-none d-lg-block pl-auto">
<a class="btn btn-light ignore-color-change" href="{{ .url }}" role="button" title="{{- i18n "navbar.linkedin" | default "linkedin" -}}">
<i class="{{ printf "%s" .icon | default (printf "fab fa-linkedin") }} {{ if not .no_text }}mr-2 {{ end }}"></i>
{{- if not .no_text -}}
{{ .text | default (i18n "linkedin.star") }}
{{- end -}}
Comment on lines +132 to +165
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a bit manual and could be structured as a list. Any ideas on making it a list config wise as well as loop through the list in the code while keeping the backwards compatibility with the repo_button?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm really sorry for my lack of experience with Hugo templates. I'm quite new to Hugo templates. I actually started to mess with it yesterday using Syna as a way to better understand Hugo.

As you said, this patch is really to cumbersome to be useful so I'm planning to change it a little bit. In fact, today I notice that there is a better way to extend the template to make those icons more generic and, at same time keeping the backward compatibility with the existing repo_button.

My new plan is to left repo_button as is and add a new list of button that will add the new buttons in the same way repo_button works. This way we will be able to combine both repo_button and the new button options to keep backward compatibility or delegate the buttons to use only the new button instead. I'll also try to make shortcuts for the most common icons to make the usage easier.

I also notice that there are more places in the sample site that I must update in order to document the new features and I'm planning to update those locations as well.

Could you reject this pull request for now? As soon as I have a better solution I will send a new one. We are really glad to be able to contribute to Syna's main repository.

Thanks in advance!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure no worries. Will close this one and wait for the next. Happy to help if anything comes up.
In terms of buttons that iterate take a look at this part of Syna: https://github.com/okkur/syna/blob/master/layouts/partials/fragments/buttons.html
Those are the call to action buttons, but it does showcase a more generic way of how it could work with Hugo.

</a>
</div>
{{- end }}
{{- with .Params.custom_button }}
<div class="d-none d-lg-block pl-auto">
<a class="btn btn-light ignore-color-change" href="{{ .url }}" role="button" title="{{- i18n "navbar.custom" | default "custom" -}}">
<i class="{{ printf "%s" .icon | default (printf "fas fa-star") }} {{ if not .no_text }}mr-2 {{ end }}"></i>
{{- if not .no_text -}}
{{ .text | default (i18n "custom.star") }}
{{- end -}}
</a>
</div>
{{- end }}
</nav>
{{/*
* Get the config of breadcrumbs and set defaults
Expand Down