Headers use Rubik font by default (#43)

* Export css var for Rubik, make available in top-level layout, use it in Global CSS to set font for all headers. Remove className rubik from inline header HTML * Prettier fix
asibs · Mar 3, 2024 · 56e33f4 · 56e33f4
1 parent 12bbff7
commit 56e33f4
Show file tree

Hide file tree

Showing 16 changed files with 39 additions and 60 deletions.
diff --git a/app/constituencies/[slug]/page.tsx b/app/constituencies/[slug]/page.tsx
@@ -4,7 +4,6 @@ import ImpliedChart from "@/components/info_box/ImpliedChart";
 import MRPChart from "@/components/info_box/MRPChart";
 import PlanToVoteBox from "@/components/info_box/PlanToVoteBox";
 import TacticalReasoningBox from "@/components/info_box/TacticalReasoningBox";
-import { rubik } from "@/utils/Fonts";
 import { partyCssClassFromSlug, partyNameFromSlug } from "@/utils/Party";
 import { readFileSync } from "fs";
 import { unstable_cache } from "next/cache";
@@ -67,9 +66,7 @@ export default async function ConstituencyPage({
         <>
           <Header backgroundImage="FESTIVAL_CROWD">
             <Container className="py-4 py-md-6">
-              <h1 className={rubik.className}>
-                {constituencyData.constituencyIdentifiers.name}
-              </h1>
+              <h1>{constituencyData.constituencyIdentifiers.name}</h1>
               <p>
                 Bookmark this page and check back before the election for
                 updated info.
@@ -82,17 +79,13 @@ export default async function ConstituencyPage({
               <Container>
                 <Row>
                   <Col>
-                    <h2 className={`${rubik.className} pb-3`}>
-                      The tactical vote is
-                    </h2>
+                    <h2 className="pb-3">The tactical vote is</h2>
                   </Col>
                 </Row>
                 <Row>
                   <Col>
                     <h3
-                      className={`${
-                        rubik.className
-                      } party ${partyCssClassFromSlug(
+                      className={`party ${partyCssClassFromSlug(
                         constituencyData.recommendation.partySlug,
                       )}`}
                     >

diff --git a/app/donate/page.tsx b/app/donate/page.tsx
@@ -5,7 +5,6 @@ import { useEffect } from "react";
 import { useRouter } from "next/navigation";
 import { Col, Container, Row } from "react-bootstrap";
 import Header from "@/components/Header";
-import { rubik } from "@/utils/Fonts";
 
 export default function Donate() {
   const url = "https://www.crowdfunder.co.uk/p/stopthetories";
@@ -20,7 +19,7 @@ export default function Donate() {
     <>
       <Header backgroundImage="FESTIVAL_CROWD">
         <Container className="py-4 py-md-6">
-          <h1 className={rubik.className}>Donate</h1>
+          <h1>Donate</h1>
         </Container>
       </Header>
 

diff --git a/app/globals.scss b/app/globals.scss
@@ -138,9 +138,10 @@ h3,
 h4,
 h5,
 h6 {
-  line-height: 1;
+  font-family: var(--font-rubik);
   font-weight: bold;
   text-transform: uppercase;
+  line-height: 1;
 }
 
 /* FORM INPUTS */

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,6 +1,6 @@
+import { rubik } from "@/utils/Fonts";
 import "./globals.scss";
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
 import { storyblokInit, apiPlugin } from "@storyblok/react/rsc";
 import StoryblokBridgeLoader from "@storyblok/react/bridge-loader";
 import StoryblokProvider from "@/storyblok/components/StoryblokProvider";
@@ -11,9 +11,6 @@ import { ComponentsMap } from "@/storyblok/components/ComponentsMap";
 // This avoids issues with the Storyblok js client, which has it's own built-in caching, and Next.js caching interferes with this...
 export const revalidate = 0;
 
-// TODO: Decide whether we want Inter at all or just use default fonts?
-const inter = Inter({ subsets: ["latin"] });
-
 storyblokInit({
   accessToken: process.env.STORYBLOK_API_TOKEN,
   use: [apiPlugin],
@@ -35,7 +32,11 @@ export default function RootLayout({
     console.debug("layout.tsx: Enabling live-editing");
     return (
       <StoryblokProvider>
-        <html lang="en">
+        {/*
+        Adding rubik.variable here makes the --font-rubik CSS var available
+        (used in globals.scss to style headers, etc)
+        */}
+        <html lang="en" className={rubik.variable}>
           {/* <body className={inter.className}> */}
           <body>
             <StoryblokWrapper slug="layout/navigation" />
@@ -48,7 +49,7 @@ export default function RootLayout({
   } else {
     console.debug("layout.tsx: Disabling live-editing");
     return (
-      <html lang="en">
+      <html lang="en" className={rubik.variable}>
         {/* <body className={inter.className}> */}
         <body>
           <StoryblokWrapper slug="layout/navigation" />

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,7 +1,6 @@
 import Header from "@/components/Header";
 import ConstituencyLookup from "@/components/constituency_lookup/ConstituencyLookup";
 import MovementSection from "@/components/sections/MovementSection";
-import { rubik } from "@/utils/Fonts";
 import { Col, Container, Row } from "react-bootstrap";
 
 export default async function Index() {
@@ -11,12 +10,12 @@ export default async function Index() {
         <Container className="py-4 py-md-6">
           <Row xs={1} md={2}>
             <Col md={4} lg={5} xl={7}>
-              <h1 className={rubik.className}>
+              <h1>
                 Your vote IS
                 <br />
                 your power
               </h1>
-              <h3 className={rubik.className}>
+              <h3>
                 Join the movement that sticks together using it&apos;s votes
                 collectively for change.
               </h3>

diff --git a/components/Page.tsx b/components/Page.tsx
@@ -1,15 +1,14 @@
 import { storyblokEditable, StoryblokComponent } from "@storyblok/react/rsc";
 import Header from "./Header";
 import { PageStoryblok } from "@/storyblok/types/storyblok-types";
-import { rubik } from "@/utils/Fonts";
 import { Container } from "react-bootstrap";
 
 const Page = ({ blok }: { blok: PageStoryblok }) => {
   return (
     <>
       <Header backgroundImage={blok.page_title_background}>
         <Container className="py-4 py-md-6">
-          <h1 className={rubik.className}>{blok.page_title}</h1>
+          <h1>{blok.page_title}</h1>
         </Container>
       </Header>
 

diff --git a/components/constituency_lookup/ConstituencyLookup.tsx b/components/constituency_lookup/ConstituencyLookup.tsx
@@ -268,7 +268,7 @@ const PostcodeLookup = () => {
       style={{ fontSize: "18px" }}
     >
       <Form action={submitForm} noValidate>
-        <h3 className={`${rubik.className} fw-bolder`}>Vote the Tories out</h3>
+        <h3 className="fw-bolder">Vote the Tories out</h3>
         <p className="fw-bold text-900">
           Vote tactically at the General Election
         </p>

diff --git a/components/footer/Footer.tsx b/components/footer/Footer.tsx
@@ -15,17 +15,14 @@ import {
   FaDiscord,
   FaFileArrowDown,
   FaMagnifyingGlass,
-  FaMastodon,
   FaPuzzlePiece,
   FaSquareFacebook,
   FaSquareInstagram,
   FaSquareThreads,
   FaSquareTwitter,
   FaSquareWhatsapp,
-  FaTelegram,
 } from "react-icons/fa6";
-import { MdGroups2 } from "react-icons/md";
-import { Button, ButtonGroup } from "react-bootstrap";
+import { ButtonGroup } from "react-bootstrap";
 import { rubik } from "@/utils/Fonts";
 
 const Footer = ({ blok }: { blok: FooterStoryblok }) => (

diff --git a/components/info_box/ImpliedChart.tsx b/components/info_box/ImpliedChart.tsx
@@ -1,5 +1,4 @@
 import InfoBox from "./InfoBox";
-import { rubik } from "@/utils/Fonts";
 import { svgChart } from "@/utils/Echarts";
 
 const ImpliedChart = ({
@@ -15,9 +14,7 @@ const ImpliedChart = ({
   return (
     <InfoBox>
       <>
-        <h3 className={`${rubik.className} fs-5`}>
-          2019 Election Results (Implied)
-        </h3>
+        <h3 className="fs-5">2019 Election Results (Implied)</h3>
         <p>The 2019 implied results from your constituency:</p>
         <div
           className="d-flex justify-content-center"

diff --git a/components/info_box/LocalTeamBox.tsx b/components/info_box/LocalTeamBox.tsx
@@ -8,7 +8,7 @@ const LocalTeamBox = () => {
   return (
     <InfoBox>
       <>
-        <h3 className={`${rubik.className} fs-5`}>Your Constituency Team</h3>
+        <h3 className="fs-5">Your Constituency Team</h3>
         <p>
           People in your local Movement Forward community are coming together to
           use their voting power.

diff --git a/components/info_box/MRPChart.tsx b/components/info_box/MRPChart.tsx
@@ -1,5 +1,4 @@
 import InfoBox from "./InfoBox";
-import { rubik } from "@/utils/Fonts";
 import { svgChart } from "@/utils/Echarts";
 
 const MRPChart = ({
@@ -12,9 +11,7 @@ const MRPChart = ({
   return (
     <InfoBox>
       <>
-        <h3 className={`${rubik.className} fs-5`}>
-          Constituency Regression Polls
-        </h3>
+        <h3 className="fs-5">Constituency Regression Polls</h3>
         <p>Average of last 6 months MRP models:</p>
         <div
           className="d-flex justify-content-center"

diff --git a/components/info_box/PlanToVoteBox.tsx b/components/info_box/PlanToVoteBox.tsx
@@ -1,5 +1,4 @@
 import InfoBox from "./InfoBox";
-import { rubik } from "@/utils/Fonts";
 
 import {
   FaPenClip,
@@ -12,7 +11,7 @@ const PlanToVoteBox = () => {
   return (
     <InfoBox>
       <>
-        <h3 className={`${rubik.className} fs-5`}>Your Plan</h3>
+        <h3 className="fs-5">Your Plan</h3>
         <p>
           <a
             href="https://www.gov.uk/register-to-vote"

diff --git a/components/info_box/TacticalReasoningBox.tsx b/components/info_box/TacticalReasoningBox.tsx
@@ -1,5 +1,4 @@
 import InfoBox from "./InfoBox";
-import { rubik } from "@/utils/Fonts";
 import { partyCssClassFromSlug, partyNameFromSlug } from "@/utils/Party";
 
 import {
@@ -37,7 +36,7 @@ const TacticalReasoningBox = ({
   return (
     <InfoBox>
       <>
-        <h3 className={`${rubik.className} fs-5`}>Why?</h3>
+        <h3 className="fs-5">Why?</h3>
 
         {/* Always show previous general election winner */}
         <p>

diff --git a/components/page_content/ToggleText.tsx b/components/page_content/ToggleText.tsx
@@ -8,8 +8,6 @@ import { useState } from "react";
 import { Col, Collapse, Container, Row } from "react-bootstrap";
 import { FaCircleChevronRight } from "react-icons/fa6";
 
-import { rubik } from "@/utils/Fonts";
-
 const ToggleText = ({ blok }: { blok: ToggleTextStoryblok }) => {
   const [visible, setVisible] = useState(blok.text_shown_initially);
 
@@ -37,7 +35,7 @@ const ToggleText = ({ blok }: { blok: ToggleTextStoryblok }) => {
               aria-expanded={visible}
               style={{ cursor: "pointer" }}
             >
-              <h2 className={rubik.className}>{blok.title}</h2>
+              <h2>{blok.title}</h2>
             </Row>
             <Row>
               <Collapse in={visible}>

diff --git a/components/sections/MovementSection.tsx b/components/sections/MovementSection.tsx
@@ -1,6 +1,5 @@
 import Image from "next/image";
 
-import { rubik } from "@/utils/Fonts";
 import { Col, Container, Row } from "react-bootstrap";
 
 import asifKapadia from "@/assets/supporter_portraits/asif-kapadia-540.webp";
@@ -39,7 +38,7 @@ const MovementSection = () => {
         {/* PEOPLE */}
         <Row>
           <Col className="pb-3 pb-md-5">
-            <h2 className={`${rubik.className} fw-bolder fs-1`}>
+            <h2 className="fw-bolder fs-1">
               Join A Movement building voter power, beyond this election.
             </h2>
           </Col>
@@ -74,23 +73,17 @@ const MovementSection = () => {
       <Container>
         <Row xs={1} md={2}>
           <Col>
-            <h3 className={`${rubik.className} fw-bolder fs-5`}>We show up</h3>
-            <h4 className={`${rubik.className} fw-bolder fs-2`}>
-              To get the tories out
-            </h4>
+            <h3 className="fw-bolder fs-5">We show up</h3>
+            <h4 className="fw-bolder fs-2">To get the tories out</h4>
             <p>
               In many places around the country, if we vote together for the
               most likely candidate to beat the Tory, out votes demolish them
               into tiny numbers.
             </p>
           </Col>
           <Col>
-            <h3 className={`${rubik.className} fw-bolder fs-5`}>
-              We stick together
-            </h3>
-            <h4 className={`${rubik.className} fw-bolder fs-2`}>
-              To influence the next government
-            </h4>
+            <h3 className="fw-bolder fs-5">We stick together</h3>
+            <h4 className="fw-bolder fs-2">To influence the next government</h4>
             <p>
               A bigger influence on the next government than the media that
               currently shape the narrative. We stick together offering our

diff --git a/utils/Fonts.ts b/utils/Fonts.ts
@@ -1,5 +1,12 @@
-import { Rubik } from "next/font/google";
+import { Rubik, Inter } from "next/font/google";
 
-const rubik = Rubik({ subsets: ["latin"], weight: "variable" });
+const rubik = Rubik({
+  subsets: ["latin"],
+  weight: "variable",
+  variable: "--font-rubik",
+});
 
-export { rubik };
+// TODO: Decide whether we want Inter at all or just use default fonts?
+const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
+
+export { rubik, inter };