Merge pull request #4086 from owid/bluesky-linkedin-follow-us

✨ Update social media links, refactor to use constants through site codebase
owid · Oct 28, 2024 · e42aab5 · e42aab5
2 parents 26a71c5 + d4e2a26
commit e42aab5
Show file tree

Hide file tree

Showing 8 changed files with 111 additions and 164 deletions.
diff --git a/adminSiteServer/mockSiteRouter.tsx b/adminSiteServer/mockSiteRouter.tsx
@@ -70,8 +70,10 @@ import {
     getPlainRouteNonIdempotentWithRWTransaction,
     getPlainRouteWithROTransaction,
 } from "./plainRouterHelpers.js"
-import { DEFAULT_LOCAL_BAKE_DIR } from "../site/SiteConstants.js"
-import { DATA_INSIGHTS_ATOM_FEED_NAME } from "../site/gdocs/utils.js"
+import {
+    DEFAULT_LOCAL_BAKE_DIR,
+    DATA_INSIGHTS_ATOM_FEED_NAME,
+} from "../site/SiteConstants.js"
 import { renderMultiDimDataPageBySlug } from "../baker/MultiDimBaker.js"
 import {
     KnexReadonlyTransaction,

diff --git a/baker/SiteBaker.tsx b/baker/SiteBaker.tsx
@@ -109,7 +109,7 @@ import {
 } from "../db/model/Gdoc/GdocFactory.js"
 import { getBakePath } from "@ourworldindata/components"
 import { GdocAuthor, getMinimalAuthors } from "../db/model/Gdoc/GdocAuthor.js"
-import { DATA_INSIGHTS_ATOM_FEED_NAME } from "../site/gdocs/utils.js"
+import { DATA_INSIGHTS_ATOM_FEED_NAME } from "../site/SiteConstants.js"
 import { getRedirectsFromDb } from "../db/model/Redirect.js"
 import { getTombstones } from "../db/model/GdocTombstone.js"
 import { bakeAllMultiDimDataPages } from "./MultiDimBaker.js"

diff --git a/site/DataInsightsIndexPage.tsx b/site/DataInsightsIndexPage.tsx
@@ -11,7 +11,7 @@ import {
     DataInsightsIndexPageContent,
     _OWID_DATA_INSIGHTS_INDEX_PAGE_DATA,
 } from "./DataInsightsIndexPageContent.js"
-import { DATA_INSIGHT_ATOM_FEED_PROPS } from "./gdocs/utils.js"
+import { DATA_INSIGHT_ATOM_FEED_PROPS } from "./SiteConstants.js"
 import { DebugProvider } from "./gdocs/DebugContext.js"
 import { Html } from "./Html.js"
 

diff --git a/site/SiteConstants.ts b/site/SiteConstants.ts
@@ -1,3 +1,13 @@
+import { faRss } from "@fortawesome/free-solid-svg-icons"
+import {
+    faXTwitter,
+    faFacebookSquare,
+    faInstagram,
+    faThreads,
+    faLinkedin,
+    faBluesky,
+} from "@fortawesome/free-brands-svg-icons"
+
 // See https://cdnjs.cloudflare.com/polyfill/ for a list of all supported features
 const polyfillFeatures = [
     "es2019", // Array.flat, Array.flatMap, Object.fromEntries, ...
@@ -24,8 +34,61 @@ export const SMALL_BREAKPOINT_MEDIA_QUERY = "(max-width: 768px)"
 export const TOUCH_DEVICE_MEDIA_QUERY =
     "(hover: none), (pointer: coarse), (pointer: none)"
 
+export const DATA_INSIGHTS_ATOM_FEED_NAME = "atom-data-insights.xml"
+
+export const DATA_INSIGHT_ATOM_FEED_PROPS = {
+    title: "Atom feed for Daily Data Insights",
+    href: `https://ourworldindata.org/${DATA_INSIGHTS_ATOM_FEED_NAME}`,
+}
+
 export const DEFAULT_TOMBSTONE_REASON =
     "Our World in Data is designed to be an evergreen publication. This " +
     "means that when a page cannot be updated due to outdated data or " +
     "missing information, we prefer to remove it rather than present " +
     "incomplete or inaccurate research and data to our readers."
+
+export const SOCIALS = [
+    {
+        title: "X",
+        url: "https://x.com/ourworldindata",
+        icon: faXTwitter,
+    },
+    {
+        title: "Instagram",
+        url: "https://www.instagram.com/ourworldindata/",
+        icon: faInstagram,
+    },
+    {
+        title: "Threads",
+        url: "https://www.threads.net/@ourworldindata",
+        icon: faThreads,
+    },
+    {
+        title: "Facebook",
+        url: "https://facebook.com/ourworldindata",
+        icon: faFacebookSquare,
+    },
+    {
+        title: "LinkedIn",
+        url: "https://www.linkedin.com/company/ourworldindata",
+        icon: faLinkedin,
+    },
+    {
+        title: "Bluesky",
+        url: "https://bsky.app/profile/ourworldindata.bsky.social",
+        icon: faBluesky,
+    },
+]
+
+export const RSS_FEEDS = [
+    {
+        title: "Research & Writing RSS Feed",
+        url: "/atom.xml",
+        icon: faRss,
+    },
+    {
+        title: "Daily Data Insights RSS Feed",
+        url: `/${DATA_INSIGHTS_ATOM_FEED_NAME}`,
+        icon: faRss,
+    },
+]
diff --git a/site/SiteFooter.tsx b/site/SiteFooter.tsx
@@ -4,6 +4,7 @@ import { faAngleRight } from "@fortawesome/free-solid-svg-icons"
 import { SiteFooterContext } from "@ourworldindata/utils"
 import { viteAssetsForSite } from "./viteUtils.js"
 import { ScriptLoadErrorDetector } from "./NoJSDetector.js"
+import { RSS_FEEDS, SOCIALS } from "./SiteConstants.js"
 
 interface SiteFooterProps {
     hideDonate?: boolean
@@ -132,40 +133,16 @@ export const SiteFooter = (props: SiteFooterProps) => (
                                     Data Catalog
                                 </a>
                             </li>
-                        </ul>
-                        <ul>
-                            <li>
-                                <a
-                                    href="https://twitter.com/OurWorldInData"
-                                    data-track-note="footer_navigation"
-                                >
-                                    Twitter
-                                </a>
-                            </li>
-                            <li>
-                                <a
-                                    href="https://www.facebook.com/OurWorldinData"
-                                    data-track-note="footer_navigation"
-                                >
-                                    Facebook
-                                </a>
-                            </li>
-                            <li>
-                                <a
-                                    href="https://www.instagram.com/ourworldindata/"
-                                    data-track-note="footer_navigation"
-                                >
-                                    Instagram
-                                </a>
-                            </li>
-                            <li>
-                                <a
-                                    href="https://www.threads.net/@ourworldindata"
-                                    data-track-note="footer_navigation"
-                                >
-                                    Threads
-                                </a>
-                            </li>
+                            {SOCIALS.map(({ title, url }) => (
+                                <li key={title}>
+                                    <a
+                                        href={url}
+                                        data-track-note="footer_navigation"
+                                    >
+                                        {title}
+                                    </a>
+                                </li>
+                            ))}
                             <li>
                                 <a
                                     href="https://github.com/owid"
@@ -174,22 +151,16 @@ export const SiteFooter = (props: SiteFooterProps) => (
                                     GitHub
                                 </a>
                             </li>
-                            <li>
-                                <a
-                                    href="/atom.xml"
-                                    data-track-note="footer_navigation"
-                                >
-                                    Research & Writing RSS Feed
-                                </a>
-                            </li>
-                            <li>
-                                <a
-                                    href="/atom-data-insights.xml"
-                                    data-track-note="footer_navigation"
-                                >
-                                    Daily Data Insights RSS Feed
-                                </a>
-                            </li>
+                            {RSS_FEEDS.map(({ title, url }) => (
+                                <li key={title}>
+                                    <a
+                                        href={url}
+                                        data-track-note="footer_navigation"
+                                    >
+                                        {title}
+                                    </a>
+                                </li>
+                            ))}
                         </ul>
                     </div>
                     <div className="owid-col owid-col--lg-1">

diff --git a/site/gdocs/OwidGdocPage.tsx b/site/gdocs/OwidGdocPage.tsx
@@ -19,7 +19,7 @@ import {
     EnrichedBlockText,
     IMAGES_DIRECTORY,
 } from "@ourworldindata/types"
-import { DATA_INSIGHT_ATOM_FEED_PROPS } from "./utils.js"
+import { DATA_INSIGHT_ATOM_FEED_PROPS } from "../SiteConstants.js"
 import { Html } from "../Html.js"
 
 declare global {

diff --git a/site/gdocs/pages/Homepage.tsx b/site/gdocs/pages/Homepage.tsx
@@ -1,11 +1,5 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
-import { faRss } from "@fortawesome/free-solid-svg-icons"
-import {
-    faXTwitter,
-    faFacebookSquare,
-    faInstagram,
-    faThreads,
-} from "@fortawesome/free-brands-svg-icons"
+
 import React from "react"
 import { NewsletterSubscriptionContext } from "../../newsletter.js"
 import { NewsletterSubscriptionForm } from "../../NewsletterSubscription.js"
@@ -16,7 +10,7 @@ import {
     OwidGdocHomepageContent,
 } from "@ourworldindata/types"
 import { SiteNavigationStatic } from "../../SiteNavigation.js"
-import { DATA_INSIGHTS_ATOM_FEED_NAME } from "../utils.js"
+import { RSS_FEEDS, SOCIALS } from "../../SiteConstants.js"
 
 export interface HomepageProps {
     content: OwidGdocHomepageContent
@@ -39,100 +33,24 @@ const SocialSection = () => {
             </section>
             <section className="homepage-social-ribbon__social-media span-cols-4 span-sm-cols-12 col-sm-start-2">
                 <h2 className="h2-semibold">Follow us</h2>
-                <ul className="homepage-social-ribbon__social-list">
-                    <li>
-                        <a
-                            href="https://twitter.com/ourworldindata"
-                            className="list-item"
-                            title="X"
-                            target="_blank"
-                            rel="noopener"
-                            data-track-note="homepage_follow_us"
-                        >
-                            <span className="icon">
-                                <FontAwesomeIcon icon={faXTwitter} />
-                            </span>
-                            <span className="label">X</span>
-                        </a>
-                    </li>
-                    <li>
-                        <a
-                            href="https://facebook.com/ourworldindata"
-                            className="list-item"
-                            title="Facebook"
-                            target="_blank"
-                            rel="noopener"
-                            data-track-note="homepage_follow_us"
-                        >
-                            <span className="icon">
-                                <FontAwesomeIcon icon={faFacebookSquare} />
-                            </span>
-                            <span className="label">Facebook</span>
-                        </a>
-                    </li>
-                    <li>
-                        <a
-                            href="https://www.instagram.com/ourworldindata/"
-                            className="list-item"
-                            title="Instagram"
-                            target="_blank"
-                            rel="noopener"
-                            data-track-note="homepage_follow_us"
-                        >
-                            <span className="icon">
-                                <FontAwesomeIcon icon={faInstagram} />
-                            </span>
-                            <span className="label">Instagram</span>
-                        </a>
-                    </li>
-                    <li>
-                        <a
-                            href="https://www.threads.net/@ourworldindata"
-                            className="list-item"
-                            title="Threads"
-                            target="_blank"
-                            rel="noopener"
-                            data-track-note="homepage_follow_us"
-                        >
-                            <span className="icon">
-                                <FontAwesomeIcon icon={faThreads} />
-                            </span>
-                            <span className="label">Threads</span>
-                        </a>
-                    </li>
-                    <li>
-                        <a
-                            href="/atom.xml"
-                            className="list-item"
-                            title="RSS"
-                            target="_blank"
-                            data-track-note="homepage_follow_us"
-                        >
-                            <span className="icon">
-                                <FontAwesomeIcon icon={faRss} />
-                            </span>
-                            <span className="label">
-                                Research & Writing RSS Feed
-                            </span>
-                        </a>
-                    </li>
-                    <li>
-                        <a
-                            href={`/${DATA_INSIGHTS_ATOM_FEED_NAME}`}
-                            className="list-item"
-                            title="Daily Data Insights RSS"
-                            target="_blank"
-                            data-track-note="homepage_follow_us"
-                            rel="noopener"
-                        >
-                            <span className="icon">
-                                <FontAwesomeIcon icon={faRss} />
-                            </span>
-                            <span className="label">
-                                Daily Data Insights RSS Feed
-                            </span>
-                        </a>
-                    </li>
+                <ul className="homepage-social-ribbon__social-list grid grid-cols-2 grid-md-cols-1">
+                    {[...SOCIALS, ...RSS_FEEDS].map(({ title, url, icon }) => (
+                        <li key={title}>
+                            <a
+                                href={url}
+                                className="list-item"
+                                title={title}
+                                target="_blank"
+                                rel="noopener"
+                                data-track-note="homepage_follow_us"
+                            >
+                                <span className="icon">
+                                    <FontAwesomeIcon icon={icon} />
+                                </span>
+                                <span className="label">{title}</span>
+                            </a>
+                        </li>
+                    ))}
                 </ul>
             </section>
         </section>

diff --git a/site/gdocs/utils.tsx b/site/gdocs/utils.tsx
@@ -255,10 +255,3 @@ export function getShortPageCitation(
         authors: authors,
     })} (${publishedAt?.getFullYear()}) - “${title}”`
 }
-
-export const DATA_INSIGHTS_ATOM_FEED_NAME = "atom-data-insights.xml"
-
-export const DATA_INSIGHT_ATOM_FEED_PROPS = {
-    title: "Atom feed for Daily Data Insights",
-    href: `https://ourworldindata.org/${DATA_INSIGHTS_ATOM_FEED_NAME}`,
-}