Add support for Simple Icons (#117)

* Replace JS use in feather icons with SVG

There's still JS for the toggle functionality, but no more Javascript to
refresh the icons.

* Add support for SimpleIcons

This is based on https://github.com/simple-icons/simple-icons-font,
release 13.3.0, with font and css copied in.

Since Feather Icons and Simple Icons differ in purpose and naming
scheme, old social icons still point to feather. To add simple icons,
just prefix their name with "simple", e.g.

    - name: "mastodon"
      icon: "simple:mastodon"
      url: "https://foo.social/@foo"

Resolves #69, #95, #49

assets/css/main.css

@@ -340,3 +340,13 @@ table td{
   padding: 6px 13px;
   border: 1px solid #dfe2e5;
 }
+
+.feather {
+  width: 24px;
+  height: 24px;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  fill: none;
+}

layouts/partials/footer.html

@@ -1,7 +1,11 @@
 <footer>
   <div style="display:flex">
     {{- range $index, $key := .Site.Params.Social -}}
-    <a class="soc" href="{{ $key.url }}" rel="me" title="{{ $key.name }}"><i data-feather="{{ $key.icon }}"></i></a>
+    {{- if hasPrefix $key.icon "simple:" -}}
+    <a class="soc" href="{{ $key.url }}" rel="me" title="{{ $key.name }}"><i class="si si-{{ substr $key.icon 7 }}"></i></a>
+    {{- else -}}
+    <a class="soc" href="{{ $key.url }}" rel="me" title="{{ $key.name }}">{{ template "feathericon" (dict "Icon" $key.icon "UseCDN" .Site.Params.useCDN) }}</a>
+    {{- end -}}
     <a class="border"></a>
     {{- end -}}
   </div>
@@ -13,9 +17,3 @@
 {{ if not hugo.IsServer }}
 {{ template "_internal/google_analytics.html" . }}
 {{ end }}
-
-{{- if (isset .Site.Params "social") -}}
-<script>
-  feather.replace()
-</script>
-{{- end -}}

layouts/partials/head.html

@@ -1,3 +1,13 @@
+{{- define "feathericon" -}}
+  {{- $featherURL := "https://unpkg.com/feather-icons@4.29.2/dist/feather-sprite.svg" -}}
+  {{ if not (.UseCDN | default false) -}}
+    {{- $featherURL = (resources.Get "svg/feather-sprite.svg" | fingerprint).RelPermalink -}}
+  {{- end -}}
+<svg class="feather">
+   <use href="{{ printf "%s#%s" $featherURL .Icon }}" />
+</svg>
+{{- end -}}
+
 <header>
 	<div class="main">
 		<a href="{{ absURL "/" }}">{{ .Site.Title }}</a>
@@ -7,7 +17,7 @@
 		<a href="{{ .URL }}">{{ .Name }}</a>
 		{{ end }}
 		{{ if eq .Site.Params.mode "toggle" -}}
-        | <span id="dark-mode-toggle" onclick="toggleTheme()"></span>
+	| <span id="dark-mode-toggle" onclick="toggleTheme()">{{template "feathericon" (dict "UseCDN" .Site.Params.useCDN "Icon" "sun") }}</span>
 		<script src="{{ absURL "js/themetoggle.js" }}"></script>
 		{{ end }}
 	</nav>

layouts/partials/header.html

@@ -22,11 +22,18 @@
 
 	{{- template "_internal/opengraph.html" . -}}
 	{{- template "_internal/twitter_cards.html" . -}}
-	{{ if and (isset .Site.Params "social") (.Site.Params.useCDN | default false) -}}
-		<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-	{{- else if or (isset .Site.Params "social") (eq .Site.Params.mode "toggle") -}}
-		<script src="{{ absURL "js/feather.min.js" }}"></script>
-	{{ end }}
+	{{- if isset .Site.Params "social" -}}
+	  {{- range $index, $key := .Site.Params.Social -}}
+	    {{- if hasPrefix $key.icon "simple:" -}}
+	      {{- if (.Site.Params.useCDN | default false) -}}
+		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-icons-font@v13/font/simple-icons.min.css" type="text/css">
+	      {{- else -}}
+		<link rel="stylesheet" href="{{ (resources.Get "css/simple-icons.css" | fingerprint).Permalink }}" type="text/css">
+	      {{- end -}}
+	      {{- break -}}
+	    {{- end -}}
+	  {{- end -}}
+	{{- end -}}
 	{{ if .Site.Params.useCDN | default false -}}
         <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@1,500&display=swap" rel="stylesheet">
         <link href="https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap" rel="stylesheet">

static/js/themetoggle.js

@@ -1,13 +1,12 @@
 function setTheme(mode) {
     localStorage.setItem("theme-storage", mode);
+    var e = document.querySelector("#dark-mode-toggle > .feather > use")
     if (mode === "dark") {
         document.getElementById("darkModeStyle").disabled=false;
-        document.getElementById("dark-mode-toggle").innerHTML = "<i data-feather=\"sun\"></i>";
-        feather.replace()
+	e.href.baseVal = e.href.baseVal.replace(/#.*$/, "#sun")
     } else if (mode === "light") {
         document.getElementById("darkModeStyle").disabled=true;
-        document.getElementById("dark-mode-toggle").innerHTML = "<i data-feather=\"moon\"></i>";
-        feather.replace()
+	e.href.baseVal = e.href.baseVal.replace(/#.*$/, "#moon")
     }
 }