Merge pull request #75 from nunocoracao/74-support-icons-on-header-menu

added instructions and icons to menu entries

exampleSite/config/_default/menus.en.toml

@@ -26,10 +26,18 @@
   weight = 30
 
 [[main]]
-  name = "GitHub"
+  identifier = "github"
+  pre = "github"
   url = "https://github.com/nunocoracao/blowfish"
   weight = 40
 
+[[main]]
+  identifier = "twitter"
+  pre = "twitter"
+  url = "https://twitter.com/burufugu"
+  weight = 50
+
+
 # -- Footer Menu --
 # The footer menu is displayed at the bottom of the page, just before
 # the copyright notice. Configure as per the main menu above.

exampleSite/content/docs/getting-started/index.md

@@ -166,6 +166,18 @@ Both menus are configured in the `menus.en.toml` file. Similarly to the language
   pageRef = "topics"
   weight = 20
 
+[[main]]
+  pre = "github"
+  name = "GitHub"
+  url = "https://github.com/nunocoracao/blowfish"
+  weight = 30
+
+[[main]]
+  identifier = "github2"
+  pre = "github"
+  url = "https://github.com/nunocoracao/blowfish"
+  weight = 40
+
 [[footer]]
   name = "Privacy"
   url = "https://external-link"
@@ -175,6 +187,8 @@ The `name` parameter specifies the text that is used in the menu link. You can a
 
 The `pageRef` parameter allows you to easily reference Hugo content pages and taxonomies. It is the quickest way to configure the menu as you can simply refer to any Hugo content item and it will automatically build the correct link. To link to external URLs, the `url` parameter can be used.
 
+The `pre` parameter allows you to place an icon from [Blowfish's icon set](http://localhost:1313/samples/icons/) on the menu entry. This parameter can be used with `name` parameter or by itself. If you want to use multiple menu entries with just icons please set the `identifier`parameter otherwise Hugo will default to the naming tag as the id and probably not display all the menu entries.
+
 Menu links will be sorted from lowest to highest `weight`, and then alphabetically by `name`.
 
 Both menus are completely optional and can be commented out if not required. Use the template provided in the file as a guide.

layouts/partials/header/basic.html

@@ -26,13 +26,14 @@
 
             {{ if .Site.Menus.main }}
             {{ range .Site.Menus.main }}
-            <a href="{{ .URL }}" class="text-base font-medium text-gray-500 hover:text-gray-900" title="{{ .Title }}">{{
-                .Name | markdownify | emojify }}</a>
+            <a href="{{ .URL }}" class="text-base font-medium text-gray-500 hover:text-gray-900" title="{{ .Title }}">
+                {{ partial "icon.html" .Pre }}
+                {{ if and .Pre .Name }} &nbsp; {{ end }}
+                {{ .Name | markdownify | emojify }}
+            </a>
             {{ end }}
             {{ end }}
 
-            <span></span>
-
             {{ partial "translations.html" . }}
 
             {{ if .Site.Params.enableSearch | default false }}
@@ -107,7 +108,11 @@
                     {{ range .Site.Menus.main }}
                     <li class="mb-1">
                         <a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"
-                            href="{{ .URL }}" title="{{ .Title }}">{{ .Name | markdownify | emojify }}</a>
+                            href="{{ .URL }}" title="{{ .Title }}">
+                            {{ partial "icon.html" .Pre }}
+                            {{ if and .Pre .Name }} &nbsp; {{ end }}
+                            {{ .Name | markdownify | emojify }}
+                        </a>
                     </li>
                     {{ end }}
                     {{ end }}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hugo-blowfish-theme",
-  "version": "1.4.6",
+  "version": "1.5.0",
   "description": "Blowfish theme for Hugo",
   "scripts": {
     "preinstall": "rimraf assets/vendor",