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,29 +1,27 @@
+{{- $url := .RelPermalink -}}
 <header class="site">
   <div class="platter grid">
-      <h1 class="site">
+    <h1 class="site">
-        <a class="site-name" href="{{ `` | absURL }}">Eryn Wells</a>
+      <a class="site-name" href="{{ `` | absURL }}">Eryn Wells</a>
-      </h1>
+    </h1>
 
-      {{ $url := .RelPermalink }}
+    {{- $currentPage := . -}}
-      {{ with site.Menus.main }}
+
-      <nav class="site bulleted">
+    {{ with site.Menus.main }}
-        {{- range . -}}
+    <nav class="site bulleted">
-          {{- if eq .URL $url -}}
+    {{- range . -}}
-          <li class="active"><span>{{ .Name }}</span></li>
+      <li{{ if $currentPage.HasMenuCurrent "main" . }} class="active"{{ end }}><span>{{ .Name }}</span></li>
-          {{- else -}}
+    {{- end -}}
-          <li><a href="{{ .URL }}"><span>{{ .Name }}</span></a></li>
+    </nav>
-          {{- end -}}
+    {{ end }}
+
+    <nav class="social">
+      {{ 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 -}}
-      </nav>
       {{ end }}
-
+    </nav>
-      <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>
-        {{ end }}
-      </nav>
   </div>
 </header>

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);
     }
 }