From cb3fbfc08d72e0ed052dbcbbae15e8a5557553da Mon Sep 17 00:00:00 2001
From: Badri Sunderarajan <badri@snipettemag.com>
Date: Sat, 11 Feb 2023 18:35:18 +0530
Subject: [PATCH] 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             | 53 +++++++++++++++++++++--------------------
 package.json            | 10 ++++++++
 partials/navigation.hbs | 30 +++++++++++------------
 3 files changed, 51 insertions(+), 42 deletions(-)

diff --git a/default.hbs b/default.hbs
index 680fef1..f6df530 100644
--- a/default.hbs
+++ b/default.hbs
@@ -48,18 +48,28 @@
                 {{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>
-                        {{/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 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}}
+                    {{#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}}
-                    {{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>
-                        {{/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>
+
+            <nav class="site-footer-nav">
+              {{navigation type="secondary"}}
+            </nav>
+
             <div><a href="https://ghost.org/" target="_blank" rel="noopener">Powered by Ghost</a></div>
         </div>
     </footer>
diff --git a/package.json b/package.json
index 398ba28..ee3698f 100644
--- a/package.json
+++ b/package.json
@@ -86,6 +86,16 @@
             "xl": {
                 "width": 2000
             }
+        },
+        "custom": {
+          "mastodon_url": {
+            "type": "text",
+            "default": ""
+          },
+          "instagram_url": {
+            "type": "text",
+            "default": ""
+          }
         }
     },
     "renovate": {
diff --git a/partials/navigation.hbs b/partials/navigation.hbs
index 792de38..2c29947 100644
--- a/partials/navigation.hbs
+++ b/partials/navigation.hbs
@@ -1,19 +1,17 @@
 {{#if isSecondary}}
-    <div class="gh-social">
-        {{#foreach navigation}}
-            <a class="gh-social-{{slug}}" href="{{url}}" title="{{slug}}" target="_blank" rel="noopener">
-                <svg width="16" height="16" role="img" aria-label="{{slug}} icon">
-                    <use xlink:href="#{{slug}}"></use>
-                </svg>
-            </a>
-        {{/foreach}}
-    </div>
+    <ul class="nav-secondary">
+    {{#foreach navigation}}
+        <li class="{{link_class for=(url) class=(concat "nav-" slug)}}">
+          <a href="{{url absolute="true"}}">{{label}}</a>
+        </li>
+    {{/foreach}}
+  </ul>
 {{else}}
-    <ul class="nav">
-        {{#foreach navigation}}
-            <li class="{{link_class for=(url) class=(concat "nav-" slug)}}">
-                <a href="{{url absolute="true"}}">{{label}}</a>
-            </li>
-        {{/foreach}}
-    </ul>
+  <ul class="nav">
+    {{#foreach navigation}}
+      <li class="{{link_class for=(url) class=(concat "nav-" slug)}}">
+        <a href="{{url absolute="true"}}">{{label}}</a>
+      </li>
+    {{/foreach}}
+  </ul>
 {{/if}}