Add sorting for social icons

README.md

@@ -102,12 +102,21 @@ To align images, add #c for center, #r/l for right/left.
 ![](/img/1/image.jpg#c)
 ```
 
+#### Changing Social Menu Icons Order
+
+ If you want to change the order of the social menu icons, modify the `[params.social.config]` section of your `config.toml` file:
+
+ ```toml
+[params.social.config]
+platforms = ["github","facebook","twitter","instagram","email","codepen","linkedin"]
+```
+
+ The social menu icons will appear in the order you specify in the `platforms` array.
 
 ## Add sections
 Links can be added to the navbar (below the blog name and social links).
 There are two positions:
 
-
 - `[params.sections_left]` that will add links in the left side (under the blog title)
 - `[params.sections_right]` that will add links in the right side (under the social links)
 
@@ -124,14 +133,14 @@ There are two positions:
 
 It is recommended to put your own favicons
 
-* `apple-touch-icon.png` (180x180)
-* `favicon-32x32.png` (32x32)
-* `favicon-16x16.png` (16x16)
-* `mstile-150x150.png` (150x150)
-* `android-chrome-192x192.png` (192x192)
-* `android-chrome-512x512.png` (512x512)
+- `apple-touch-icon.png` (180x180)
+- `favicon-32x32.png` (32x32)
+- `favicon-16x16.png` (16x16)
+- `mstile-150x150.png` (150x150)
+- `android-chrome-192x192.png` (192x192)
+- `android-chrome-512x512.png` (512x512)
 
-into `/static`. They're easily created via https://realfavicongenerator.net/.
+in `/static` directory. They're easily created via [Favicon Generator](https://realfavicongenerator.net/).
 
 Customize `browserconfig.xml` and `site.webmanifest` to set `theme-color` and `background-color` for example.
 

exampleSite/config.toml

@@ -40,9 +40,13 @@ twitter = "ribicemir"
 github = "ribice"
 email = "[email protected]"
 linkedin = "ribice"
-facebook = "ribice"
+gitlab = "ribice"
 instagram = ""
 codepen = ""
+facebook = ""
+
+[params.social.config]
+platforms = ["twitter","github","email","email","linkedin","gitlab"]
 
 [params.matomoAnalytics]
 siteID = 1

layouts/partials/nav.html

@@ -2,13 +2,17 @@
   <div class="container">
     <nav class="nav">
       <div class="nav-left">
-        <a class="nav-item" href="{{ .Site.BaseURL }}"><h1 class="title is-4">{{ .Site.Title }}</h1></a>
+        <a class="nav-item" href="{{ .Site.BaseURL }}">
+          <h1 class="title is-4">{{ .Site.Title }}</h1>
+        </a>
       </div>
       <div class="nav-right">
         <nav class="nav-item level is-mobile">
-          {{- range $platform, $username := .Site.Params.social -}}
-          {{- if $username -}}
-            <a class="level-item" aria-label="{{ $platform }}" href='{{ print ( index $.Site.Data.theme.social.base $platform ) $username }}' target='_blank' rel='noopener'>
+          {{- $social := ( .Site.Params.social ) -}}
+          {{- range $platform := $social.config.platforms -}}
+          {{- with $username := ( index $social $platform ) -}}
+          <a class="level-item" aria-label="{{ $platform }}" href='{{ print ( index $.Site.Data.theme.social.base $platform ) $username }}'
+            target='_blank' rel='noopener'>
             <span class="icon">
               <i class>
                 {{- partial "svg/icons" $platform -}}
@@ -23,29 +27,29 @@
 
     <nav class="nav">
       {{ if (isset .Site.Params "sections_left" ) }}
-        <div class="nav-left">
-          {{- range $section, $printable := .Site.Params.sections_left -}}
-            {{- if $printable -}}
-              <a class="nav-item" href="{{$section}}">
-                <h2 class="title is-5">{{$printable}}</h2>
-              </a>
-            {{- end -}}
-          {{- end -}}
-        </div>
+      <div class="nav-left">
+        {{- range $section, $printable := .Site.Params.sections_left -}}
+        {{- if $printable -}}
+        <a class="nav-item" href="{{$section}}">
+          <h2 class="title is-5">{{$printable}}</h2>
+        </a>
+        {{- end -}}
+        {{- end -}}
+      </div>
       {{ end }}
 
       {{ if (isset .Site.Params "sections_right" ) }}
-        <div class="nav-right">
-          {{- range $section, $printable := .Site.Params.sections_right -}}
-            {{- if $printable -}}
-              <a class="nav-item" href="{{$section}}">
-                <h2 class="title is-5">{{$printable}}</h2>
-              </a>
-            {{- end -}}
-          {{- end -}}
-        </div>
+      <div class="nav-right">
+        {{- range $section, $printable := .Site.Params.sections_right -}}
+        {{- if $printable -}}
+        <a class="nav-item" href="{{$section}}">
+          <h2 class="title is-5">{{$printable}}</h2>
+        </a>
+        {{- end -}}
+        {{- end -}}
+      </div>
       {{ end }}
     </nav>
 
   </div>
-</section>
+</section>