Separate secondary navigation from social links

We can now set social links using custom properties, leaving the
secondary navigation free for other things (like complying with
payment gateway standards)!

default.hbs

@@ -48,9 +48,6 @@
                 {{navigation}}
             </div>
             <div class="gh-head-actions">
-                {{#if @site.secondary_navigation}}
-                    {{navigation type="secondary"}}
-                {{else}}
                 <div class="gh-social">
                     {{#if @site.facebook}}
                         <a class="gh-social-facebook" href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
@@ -58,8 +55,21 @@
                     {{#if @site.twitter}}
                         <a class="gh-social-twitter" href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
                     {{/if}}
-                    </div>
+                    {{#if @custom.mastodon_url}}
+                      <a class="gh-social-mastodon" href="{{@custom.mastodon_url}}" title="Mastodon" target="_blank" rel="noopener">
+                        <svg width="16" height="16" role="img" aria-label="Mastodon icon">
+                          <use xlink:href="#mastodon"></use>
+                        </svg>
+                      </a>
                     {{/if}}
+                    {{#if @custom.instagram_url}}
+                      <a class="gh-social-instagram" href="{{@custom.instagram_url}}" title="Instagram" target="_blank" rel="noopener">
+                        <svg width="16" height="16" role="img" aria-label="Instagram icon">
+                          <use xlink:href="#instagram"></use>
+                        </svg>
+                      </a>
+                    {{/if}}
+                </div>
 
                 {{#unless @member}}
                     <a class="gh-head-button" href="#/portal/signup">Newsletter</a>
@@ -79,20 +89,11 @@
     <footer class="site-footer outer">
         <div class="inner">
             <section class="copyright"><a href="{{@site.url}}">{{@site.title}}</a> &copy; {{date format="YYYY"}}</section>
-            <div class="gh-social">
+
-                {{#if @site.secondary_navigation}}
+            <nav class="site-footer-nav">
               {{navigation type="secondary"}}
-                {{else}}
+            </nav>
-                    <div class="gh-social">
+
-                        {{#if @site.facebook}}
-                            <a class="gh-social-facebook" href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
-                        {{/if}}
-                        {{#if @site.twitter}}
-                            <a class="gh-social-twitter" href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
-                        {{/if}}
-                    </div>
-                {{/if}}
-            </div>
             <div><a href="https://ghost.org/" target="_blank" rel="noopener">Powered by Ghost</a></div>
         </div>
     </footer>

package.json

@@ -86,6 +86,16 @@
             "xl": {
                 "width": 2000
             }
+        },
+        "custom": {
+          "mastodon_url": {
+            "type": "text",
+            "default": ""
+          },
+          "instagram_url": {
+            "type": "text",
+            "default": ""
+          }
         }
     },
     "renovate": {

partials/navigation.hbs

@@ -1,13 +1,11 @@
 {{#if isSecondary}}
-    <div class="gh-social">
+    <ul class="nav-secondary">
     {{#foreach navigation}}
-            <a class="gh-social-{{slug}}" href="{{url}}" title="{{slug}}" target="_blank" rel="noopener">
+        <li class="{{link_class for=(url) class=(concat "nav-" slug)}}">
-                <svg width="16" height="16" role="img" aria-label="{{slug}} icon">
+          <a href="{{url absolute="true"}}">{{label}}</a>
-                    <use xlink:href="#{{slug}}"></use>
+        </li>
-                </svg>
-            </a>
     {{/foreach}}
-    </div>
+  </ul>
 {{else}}
   <ul class="nav">
     {{#foreach navigation}}