Convert the social menu to a config driven version

config/_default/menu.yaml

@@ -11,3 +11,29 @@ main:
     name: About
     url: /about/
     weight: 30
+social:
+  - identifier: twitter
+    name: Twitter
+    url: https://twitter.com/erynofwales
+    weight: 10
+    params:
+      shortName: tw
+  - identifier: github
+    name: Github
+    url: https://github.com/erynofwales
+    weight: 20
+    params:
+      shortName: gh
+  - identifier: instagram
+    name: Instagram
+    url: https://instagram.com/erynofwales
+    weight: 30
+    params: 
+      shortName: ig
+  - identifier: feed
+    name: Feed
+    url: /feed.atom
+    weight: 40
+    params:
+      shortName: feed
+      targetBlank: false

layouts/partials/header.html

@@ -1,28 +1,26 @@
+{{- $url := .RelPermalink -}}
 <header class="site">
   <div class="platter grid">
     <h1 class="site">
       <a class="site-name" href="{{ `` | absURL }}">Eryn Wells</a>
     </h1>
 
-      {{ $url := .RelPermalink }}
+    {{- $currentPage := . -}}
+
     {{ with site.Menus.main }}
     <nav class="site bulleted">
     {{- range . -}}
-          {{- if eq .URL $url -}}
-          <li class="active"><span>{{ .Name }}</span></li>
-          {{- else -}}
-          <li><a href="{{ .URL }}"><span>{{ .Name }}</span></a></li>
-          {{- end -}}
+      <li{{ if $currentPage.HasMenuCurrent "main" . }} class="active"{{ end }}><span>{{ .Name }}</span></li>
     {{- end -}}
     </nav>
     {{ end }}
 
     <nav class="social">
-        <li><a style="--url: var(--twitter-icon)" href="https://twitter.com/erynofwales" target="_blank" aria-label="twitter"><span>tw</span></a></li>
-        <li><a style="--url: var(--github-icon)" href="https://github.com/erynofwales" target="_blank" aria-label="github"><span>gh</span></a></li>
-        <li><a style="--url: var(--instagram-icon)" href="https://instagram.com/erynofwales" target="_blank" aria-label="instagram"><span>ig</span></a></li>
-        {{ with .OutputFormats.Get "rss" }}
-        <li><a style="--url: var(--rss-icon)" href="{{ .RelPermalink }}" aria-label="rss"><span>rss</span></a></li>
+      {{ with site.Menus.social }}
+        {{- range . -}} 
+        {{- $targetBlank := .Params.targetBlank | default true -}}
+        <li><a style="--url: var(--{{ .Identifier }}-icon)" href="{{ .URL }}" {{ if $targetBlank }}target="_blank"{{ end }} aria-label="{{ .Name }}"><span>{{ .Params.shortName | default .Name }}</span></a></li>
+        {{- end -}}
       {{ end }}
     </nav>
   </div>

static/styles/root.css

@@ -63,7 +63,7 @@
     --twitter-icon: url(/icons/twitter.svg);
     --github-icon: url(/icons/github.svg);
     --instagram-icon: url(/icons/instagram.svg);
-    --rss-icon: url(/icons/rss.svg);
+    --feed-icon: url(/icons/rss.svg);
 }
 @media (prefers-color-scheme: dark) {
     :root {
@@ -89,7 +89,7 @@
         --twitter-icon: url(/icons/twitter-dark.svg);
         --github-icon: url(/icons/github-dark.svg);
         --instagram-icon: url(/icons/instagram-dark.svg);
-        --rss-icon: url(/icons/rss-dark.svg);
+        --feed-icon: url(/icons/rss-dark.svg);
     }
 }