Redo favicon stuff

See https://medium.com/swlh/are-you-using-svg-favicons-yet-a-guide-for-modern-browsers-836a6aace3df

assets/css/bobastyle.css

@@ -274,6 +274,29 @@
 }
 
 
+/* Social media share buttons */
+.share-buttons {
+  background: var(--background-2);
+  margin: 25px 0;
+  padding: 8px 0;
+  border-radius: 8px;
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+}
+
+.share-buttons a {
+  background-color: var(--background-4);
+  padding: 4px;
+  border-radius: 8px;
+}
+
+.share-buttons svg {
+  width: 32px;
+  height: 32px;
+}
+
+
 /* Back to top */
 #back-to-top {
   position: fixed;

config.yaml

@@ -4,8 +4,6 @@ markup:
     lineNos: true
 
 params:
-  faviconICO: favicon.ico
-  faviconPNG: favicon.png
   readingtime: true
 
 taxonomies:

exampleSite/config.yaml

@@ -20,9 +20,9 @@ params:
   # these are for the OpenGraph/Twitter embeds in Hugo
   description: Example website for bobatheme
 
-  # these are for favicons in bobatheme (defaults are shown here)
-  # faviconICO: favicon.ico
-  # faviconPNG: favicon.png
+  # these are for favicons in bobatheme (disabled by default)
+  # faviconSVG: favicon.svg
+  # appleTouchPNG: apple-touch-icon.png
 
   # show reading time (enabled by default)
   # readingtime: true
@@ -34,6 +34,14 @@ params:
   # display a "Latest Posts" section on the homepage below its content
   homepageLatestPosts: true
 
+  # social media share icons
+  # shareButtons:
+  #   twitter: true
+  #   facebook: true
+  #   linkedin: true
+  #   reddit: true
+  #   telegram: true
+
   # footer: >-
   #   Some example text for the footer.
 

layouts/_default/single.html

@@ -32,6 +32,8 @@
         {{ .Content }}
     </div>
 
+    {{ partial "series-box.html" . }}
+
     {{ if or .NextInSection .PrevInSection }}
         <div class="prevnext">
             {{ with .NextInSection }}
@@ -62,7 +64,9 @@
         </div>
     {{ end }}
 
-    {{ partial "series-box.html" . }}
+    {{ if .Site.Params.shareButtons }}
+        {{ partial "share.html" . }}
+    {{ end }}
 
     {{ $related := .Site.RegularPages.Related . | first 10 }}
     {{ with $related }}

layouts/partials/head.html

@@ -16,11 +16,11 @@
         <script defer src="{{ .Permalink }}" type="text/javascript" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script>
     {{ end }}
 
-    {{ with .Site.Params.faviconICO }}
-        <link rel="icon" type="image/x-icon" href="{{ . | absURL }}" />
+    {{ with .Site.Params.faviconSVG }}
+        <link rel="icon" href="{{ . | absURL }}" />
     {{ end }}
-    {{ with .Site.Params.faviconPNG }}
-        <link rel="icon" type="image/png" href="{{ . | absURL }}" />
+    {{ with .Site.Params.appleTouchPNG }}
+        <link rel="apple-touch-icon" href="{{ . | absURL }}" />
     {{ end }}
 
     {{ if .IsHome }}

layouts/partials/icon.html

@@ -2,4 +2,5 @@
 {{- $icon := $icon_resource.Content -}}
 {{- $icon = replaceRE `<svg` `<svg class="icon"` $icon -}}
 {{- $icon = replaceRE `</svg>` (printf `<title>%s icon</title></svg>` .) $icon -}}
+{{- $icon = replaceRE `(width|height)="[0-9]*"` "" $icon -}}
 {{- $icon | safeHTML -}}

layouts/partials/share.html

@@ -0,0 +1,50 @@
+<div class="share-buttons">
+    {{ if .Site.Params.shareButtons.twitter }}
+        <a class="twitter-share"
+           target="_blank"
+           rel="noopener"
+           href="https://twitter.com/intent/tweet?url={{ .Permalink }}&text={{ .Title }}&via=bbaovanc">
+            {{- partial "icon.html" "twitter" -}}
+        </a>
+    {{ end }}
+
+    {{ if .Site.Params.shareButtons.facebook }}
+        <a class="facebook-share"
+           target="_blank"
+           rel="noopener"
+           href="https://www.facebook.com/sharer.php?u={{ .Permalink }}">
+            {{- partial "icon.html" "facebook" -}}
+        </a>
+    {{ end }}
+
+    {{ if .Site.Params.shareButtons.linkedin }}
+        <a class="linkedin-share"
+           target="_blank"
+           rel="noopener"
+           href="https://www.linkedin.com/sharing/share-offsite/?url={{ .Permalink }}">
+            {{- partial "icon.html" "linkedin" -}}
+        </a>
+    {{ end }}
+
+    {{ if .Site.Params.shareButtons.reddit }}
+        <a class="reddit-share"
+           target="_blank"
+           rel="noopener"
+           href="https://reddit.com/submit?url={{ .Permalink }}&title={{ .Title }}">
+            {{- partial "icon.html" "reddit" -}}
+        </a>
+    {{ end }}
+
+    {{/* Telegram icon doesn't have `viewbox` set, which breaks the sizing.
+            https://stackoverflow.com/q/72073399/19003757
+            https://github.com/michaelampr/jam/issues/39
+    {{ if .Site.Params.shareButtons.telegram }}
+        <a class="telegram-share"
+           target="_blank"
+           rel="noopener"
+           href="https://t.me/share/url?url={{ .Permalink }}&text={{ .Title }}">
+            {{- partial "icon.html" "telegram" -}}
+        </a>
+    {{ end }}
+    */}}
+</div>