okkur / syna

Highly customizable open source theme for Hugo based static websites
https://syna.okkur.org/demo/
Apache License 2.0
251 stars 133 forks source link

New social buttons on navbar #862

Open fjtc opened 2 years ago

fjtc commented 2 years ago

Is this a BUG REPORT or FEATURE REQUEST?:

feature

What happened:

It would be nice to have nor social buttons on the navbar such as LinkedIn, Facebook, Twitter and also a custom option.

What you expected to happen:

If the new buttons are declared in the nav definition, they should appear beside the repo_button. For example:

[repo_button]
  url = "https://github.com/okkur/syna"
  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

image

It also enhance the buttons by adding the parameter no_text that disables the text and displays a button with no text, just the icon properly centered inside the button. This is interesting because the current implementation does allow the use if the icon without a text by setting the text to " ". This, however, put the icon aligned to the left of the button instead of centering it.

How to reproduce it (as minimally and precisely as possible):

N/A.

Anything else we need to know?:

We already implemented this feature in a branch and we plan to submit it to the main repository as a pull request. Example:

[repo_button]
  url = "https://github.com/okkur/syna"
  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

This results in:

image

Environment:

fjtc commented 2 years ago

We just added the pull request that implements this feature. We hope it can fit the needs of the project.