Update links in header to icons

molly · Nov 22, 2023 · f23c573 · f23c573
1 parent fbaef38
commit f23c573
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 42 deletions.
diff --git a/src/components/timeline/Header.js b/src/components/timeline/Header.js
@@ -4,6 +4,7 @@ import PropTypes from "prop-types";
 import { WindowWidthPropType } from "../../hooks/useWindowWidth";
 
 import { STORAGE_URL } from "../../constants/urls";
+import { SOCIAL } from "../../constants/navigation";
 
 import Link from "next/link";
 import ExternalLink from "../ExternalLink";
@@ -74,17 +75,6 @@ const Header = forwardRef(function Header(
 
   const renderLinks = () => (
     <>
-      <p>
-        Follow on{" "}
-        <ExternalLink href="https://twitter.com/web3isgreat">
-          Twitter
-        </ExternalLink>
-        ,{" "}
-        <ExternalLink href="https://indieweb.social/@web3isgreat">
-          Mastodon
-        </ExternalLink>
-        , or <Link href="/feed.xml">RSS</Link>.{" "}
-      </p>
       <p>
         Created by{" "}
         <ExternalLink href="https://www.mollywhite.net/">
@@ -96,6 +86,17 @@ const Header = forwardRef(function Header(
         </ExternalLink>{" "}
         for weekly recaps.
       </p>
+      <ul className="social-links">
+        {SOCIAL.map((link) => (
+          <li key={link.label}>
+            <ExternalLink href={link.href}>
+              <i className={`fa-fw ${link.icon}`} aria-hidden={true} alt="">
+                <span className="sr-only">{link.label}</span>
+              </i>
+            </ExternalLink>
+          </li>
+        ))}
+      </ul>
     </>
   );
 

diff --git a/src/constants/navigation.js b/src/constants/navigation.js
@@ -1,3 +1,31 @@
+export const SOCIAL = [
+  {
+    label: "Twitter",
+    href: "https://twitter.com/web3isgreat",
+    icon: "fab fa-twitter",
+  },
+  {
+    label: "Mastodon",
+    href: "https://indieweb.social/@web3isgreat",
+    icon: "fab fa-mastodon",
+  },
+  {
+    label: "Bluesky",
+    href: "https://bsky.app/profile/web3isgoinggreat.com",
+    icon: "fas fa-square",
+  },
+  {
+    label: "Instagram",
+    href: "https://www.instagram.com/web3isgoinggreat/",
+    icon: "fab fa-instagram",
+  },
+  {
+    label: "Threads",
+    href: "https://www.threads.net/@web3isgoinggreat",
+    icon: "fab fa-threads",
+  },
+];
+
 export const NAVIGATION = [
   {
     label: "About",
@@ -24,26 +52,7 @@ export const NAVIGATION = [
     label: "Follow",
     key: "follow-header",
     children: [
-      {
-        label: "Twitter",
-        href: "https://twitter.com/web3isgreat",
-      },
-      {
-        label: "Mastodon",
-        href: "https://indieweb.social/@web3isgreat",
-      },
-      {
-        label: "Bluesky",
-        href: "https://bsky.app/profile/web3isgoinggreat.com",
-      },
-      {
-        label: "Instagram",
-        href: "https://www.instagram.com/web3isgoinggreat/",
-      },
-      {
-        label: "Threads",
-        href: "https://www.threads.net/@web3isgoinggreat",
-      },
+      ...SOCIAL,
       {
         label: "Newsletter",
         href: "https://newsletter.mollywhite.net/",

diff --git a/src/styles/main.sass b/src/styles/main.sass
@@ -131,9 +131,7 @@ header.page-header.timeline-page
 
   ul
     padding: 0px
-
-    li
-      list-style: none
+    list-style: none
 
 footer.page-footer
   padding: 10px 10px
@@ -708,14 +706,8 @@ table
     li
       display: inline
 
-      &:not(:first-child):before
-        color: $header-footer-body-color
-        padding: 10px
-
-        // Avoid screenreaders reading the decorative character where supported
-        // https://github.com/molly/web3-is-going-great/pull/25#issuecomment-1004279568
-        content: "•"
-        content: "•" / ""
+      a
+        border-bottom: none
 
   .timeline-entry.single
     display: flex