Button fragment usage within navbar (#864)

- Adding one or more customizable buttons to the nav bar that can be used just like the repo_button or replace it;
- The nav bar repo_button now has the optional parameter no_text that removes the text label and centers the icons inside the button;
- Adding 2 new translation strings to pt.yaml that are used by repo_button;

exampleSite/content/_global/nav.md

@@ -21,4 +21,5 @@ sticky = true
   url = "https://github.com/okkur/syna"
   text = "Star" # default: "Star"
   icon = "fab fa-github" # defaults: "fab fa-github"
+  # no_text=false
 +++

exampleSite/content/fragments/buttons/buttons-icons.md

@@ -0,0 +1,20 @@
++++
+fragment = "buttons"
+#disabled = false
+date = "2016-09-07"
+weight = 130
+background = "secondary"
+
+title = "Buttons Fragment with Icons"
+subtitle = "Call to action buttons with icons"
+#title_align = "left" # Default is center, can be left, right or center
+
+[[buttons]]
+  text = "Button"
+  url = "#"
+  icon = "fas fa-star"
+
+[[buttons]]
+  url = "#"
+  icon = "" # Defaults to "fas fa-check" if "".
++++

exampleSite/content/fragments/buttons/code-buttons-icons.md

@@ -0,0 +1,31 @@
++++
+fragment = "content"
+weight = 131
++++
+
+<details><summary>Code</summary>
+
+```
++++
+fragment = "buttons"
+#disabled = false
+date = "2016-09-07"
+weight = 110
+background = "secondary"
+
+title = "Buttons Fragment"
+#subtitle = ""
+#title_align = "left" # Default is center, can be left, right or center
+
+[[buttons]]
+  text = "Button"
+  url = "#"
+  icon = "fas fa-star"
+
+[[buttons]]
+  url = "#"
+  icon = "" # Defaults to "fas fa-check" if "".
+
++++
+```
+</details>

exampleSite/content/fragments/buttons/docs.md

@@ -34,4 +34,12 @@ URL of the call to action button.
 
 Color class of the button, based on Bootstrap classes. 
 
+##### buttons.icon
+*type: string*  
+*accepted values: stylesheet classes such as "fas fa-check", "fab fa-linkedin", etc*  
+*default: Defaults to "fas fa-check" if and only if the parameter is present and the value is ""*
+
+Icons to be displayed if it is defined. Must be an icon style using **Font Awsome** icons.
+
+
 [Global variables]({{< ref "global-variables" >}}) are documented as well and have been omitted from this page.

exampleSite/content/fragments/nav/code-nav-example.md

@@ -29,6 +29,22 @@ search = true
   url = "https://github.com/okkur/syna"
   text = "Star" # default: "Star"
   icon = "fab fa-github" # defaults: "fab fa-github"
+  # no_text = true # Uncomment to remove the text
+
+[[buttons]] 
+  url = "https://linkedin.com/"
+  title="LinkedIn"
+  text=""
+
+[[buttons]] 
+  url = "https://facebook.com/"
+  title="Facebook"
+
+[[buttons]] 
+  url = "https://about.okkur.org/"
+  title="Okkur Labs"
+  text = ""
+  icon = "fas fa-home"      
 +++
 ```
 </details>

exampleSite/content/fragments/nav/docs.md

@@ -116,4 +116,47 @@ The icon can be customized via `repo_button.icon`.
 *type: string*  
 *default: fab fa-github*
 
+##### repo_button.no_text
+*type: boolean*  
+*default: false*
+
+#### buttons
+*type: array of object*
+
+This enables the addition of one or more buttons on the top right navbar, just like `repo_button`. It can be used in conjunction with `repo_button` or replace it entirely if required.
+
+The following configuration mimics the behavior of `repo_button`:
+
+```
+[[buttons]] 
+  url = "https://github.com/okkur/syna"
+  text = "Star"
+```
+
+##### buttons.url
+*type: string*  
+*required*
+
+##### buttons.title
+*type: string*  
+*default: GitHub*
+
+Defines the title of the button. The title is used to define de default values for `buttons.text` and `buttons.icon`.
+
+It uses the same base names of **Font Awesome** to display icons but in a case insensitive manner. For example, `GitHub` sets the default `buttons.text` to `GitHub` and the default `buttons.icon` to `fab fa-github`. If you set the title name to `fAcEbOoK`, the default `buttons.text` will be `fAcEbOoK` and the default `buttons.icon` will be `fab fa-facebook`.
+
+##### buttons.text
+*type: string*  
+*default: The name of the profile* 
+
+Sets the text to be displayed on the right of the icon in the button. If not set, it will try to use the default value. If set to "", the text will be removed and the icon centered within the button.
+
+##### buttons.text
+*type: string*  
+*default: The profile's default*
+
+Sets the icon to be displayed on the left or center of the button. If unset or setted to "", the icon used will be the default icon defined by the profile.
+
+Its actual value must be one of the styles defined by **Font Awesome**. For example `fab fa-accessible-icon` for `accessible-icon`, `fas fa-star` for `star`, etc.
+
 [Global variables]({{< ref "global-variables" >}}) are documented as well and have been omitted from this page.

exampleSite/content/fragments/nav/nav-example.md

@@ -21,4 +21,19 @@ search = true
   url = "https://github.com/okkur/syna"
   text = "Star" # default: "Star"
   icon = "fab fa-github" # defaults: "fab fa-github"
+
+[[buttons]] 
+  url = "https://linkedin.com/"
+  title="LinkedIn"
+  text=""
+
+[[buttons]] 
+  url = "https://facebook.com/"
+  title="Facebook"
+
+[[buttons]] 
+  url = "https://about.okkur.org/"
+  title="Okkur Labs"
+  text = ""
+  icon = "fas fa-home"    
 +++

i18n/pt.yaml

@@ -3,6 +3,10 @@
   translation: "Website baseado em"
 - id: pt
   translation: "Português"
+- id: github.star
+  translation: "Estrela"
+- id: github.stars
+  translation: "Estrelas"
 
 # Content
 - id: content.readmore

layouts/partials/fragments/buttons.html

@@ -9,6 +9,9 @@
         {{- $color := .color | default "primary" -}}
         {{- printf " btn-%s" $color -}}
       " href="{{ .url | relLangURL }}">
+        {{- if isset . "icon" -}}
+          <i class="{{ printf "%s" .icon | default (printf "fas fa-check") }} {{- if isset . "text" -}}{{ print " mr-2"}}{{- end -}}"></i>
+        {{- end -}}
         {{- .text -}}
       </a>
     {{- end }}

layouts/partials/fragments/nav.html

@@ -129,11 +129,37 @@
   {{- 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") }} {{ cond (not .no_text) "mr-2" "" }}"></i>
+        {{- if not .no_text -}}
+          {{ .text | default (i18n "github.star") }}
+        {{- end -}}
       </a>
     </div>
   {{- end }}
+  {{- range .Params.buttons -}}
+    {{ $tmp := newScratch }}
+    {{ $tmp.Set "title" "GitHub"  }}
+    {{if and (isset . "title") (ne .title "")}}  
+      {{ $tmp.Set "title" .title  }}
+    {{end}}
+    {{if not (isset . "text") }}  
+      {{ $tmp.Set "text" ($tmp.Get "title")}}
+    {{else}}
+      {{ $tmp.Set "text" .text}}
+    {{end}}
+    {{if or (not (isset . "icon")) (eq .icon "")}}  
+      {{ $tmp.Set "icon" (printf "fab fa-%s" (lower ($tmp.Get "title")))  }}
+    {{else}}
+      {{ $tmp.Set "icon" .icon  }}
+    {{end}}
+    {{ $spacer := cond (ne (len ($tmp.Get "text")) 0) "mr-2" "" }}
+    <div class="d-none d-lg-block pl-auto">
+      <a class="btn btn-light ignore-color-change" href="{{ .url }}" role="button" title="{{$tmp.Get "title"}}">
+        <i class="{{$tmp.Get "icon"}} {{$spacer}}"></i>
+          {{$tmp.Get "text"}}
+      </a>
+    </div>
+  {{- end -}}
 </nav>
 {{/*
   * Get the config of breadcrumbs and set defaults