Change headings to be more consistent

Author: Rikthepixel

src/assets/state/roadmap.tsx

@@ -1,3 +1,4 @@
+import Heading from "@/components/layout/heading";
 import Link from "@/components/navigation/Link";
 import { ReactNode } from "react";
 
@@ -11,31 +12,41 @@ export default [
   {
     title: "Q2 2023",
     text: <>
-      <h4 id="roadmap-designs" className="font-semibold">Designs</h4>
+      <Heading.H4 id="roadmap-designs">
+        Designs
+      </Heading.H4>
       <p aria-labelledby="roadmap-designs">
         In April, we will begin creating initial designs for the Git client.
         Subscribers will receive surveys with each iteration to provide feedback.
         Be sure to <Link color="primary" href="/#sign-up" underline>sign up</Link> to have your voice heard!
         The designs will also be shared in our blog.
       </p>
-      <h4 id="roadmap-prototyping" className="font-semibold">Prototyping</h4>
+      <Heading.H4 id="roadmap-prototyping">
+        Prototyping
+      </Heading.H4>
       <p aria-labelledby="roadmap-prototyping">
         We will begin developing early prototype versions of the Git client in addition to creating designs.
         This will involve testing various libraries and designs to ensure that we create the best possible product.
         We will also decide on licensing and monetization strategies during this month.
       </p>
-      <h4 id="roadmap-discord-server" className="font-semibold">Opening Discord Server</h4>
+      <Heading.H4 id="roadmap-discord-server">
+        Opening Discord Server
+      </Heading.H4>
       <p aria-labelledby="roadmap-discord-server">
         To encourage an active community, we plan to launch a public Discord server where users can freely exchange ideas and communicate directly with the development team.
       </p>
-      <h4 id="roadmap-active-development" className="font-semibold">Active Development</h4>
+      <Heading.H4 id="roadmap-active-development">
+        Active Development
+      </Heading.H4>
       <p aria-labelledby="roadmap-active-development">
         During the months of June, July, and August, we will be fully focused on active development of Commit Rocket,
         with the goal of releasing an early version of the Git client.
         Our team will be working tirelessly during this period to ensure that the client meets our high standards.
         We will also continue to provide regular development updates during these months to keep our community informed and engaged.
       </p>
-      <h4 id="roadmap-insight-videos-on-development" className="font-semibold">Insight Videos on Development</h4>
+      <Heading.H4 id="roadmap-insight-videos-on-development">
+        Insight Videos on Development
+      </Heading.H4>
       <p aria-labelledby="roadmap-insight-videos-on-development">
         Beginning May, we aim to provide regular updates on the development progress through video updates and blog posts to maintain transparency and gather feedback from our community.
       </p>
@@ -45,13 +56,17 @@ export default [
     title: "Q3 & Q4 2023",
     text: <>
 
-      <h4 id="roadmap-early-access-release" className="font-semibold">Ealy Access Releases</h4>
+      <Heading.H4 id="roadmap-early-access-release">
+        Ealy Access Releases
+      </Heading.H4>
       <p aria-labelledby="roadmap-early-access-release">
         Early access versions of Commit Rocket will be made available exclusively to our mailing list subscribers and Discord members.
         To ensure a smooth user experience, we encourage users to share their feedback and feature requests with us via our Discord server and <Link color="primary" href="mailto:feedback@commitrocket.com" underline>our email</Link>.
         As the product is still subject to changes, we appreciate our users' contributions in helping us shape the final product.
       </p>
-      <h4 id="roadmap-alpha-version" className="font-semibold">Alpha Version</h4>
+      <Heading.H4 id="roadmap-alpha-version">
+        Alpha Version
+      </Heading.H4>
       <p aria-labelledby="roadmap-alpha-version">
         If everything goes according to plan, our goal is to release a public alpha version of Commit Rocket by September.
         While it will be a challenging task, we are not afraid to take it on!

src/components/layout/heading.tsx

@@ -0,0 +1,35 @@
+import React, { ForwardedRef, forwardRef, useMemo } from "react";
+import { twMerge } from "tailwind-merge";
+
+export type HeadingProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
+
+const makeHeading = (level: number, defaultClassName: string) => forwardRef((
+  {
+    className,
+    ...props
+  }: HeadingProps,
+  ref: ForwardedRef<HTMLHeadingElement>
+) => {
+  const Tag = `h${level}`;
+
+  const computedClassName = useMemo(
+    () => twMerge(defaultClassName, className),
+    [className]
+  );
+
+  return <Tag
+    ref={ref}
+    //@ts-ignore
+    className={computedClassName}
+    {...props}
+  />;
+});
+
+export const H1 = makeHeading(1, "text-5xl font-bold md:text-6xl");
+export const H2 = makeHeading(2, "text-4xl font-bold md:text-5xl");
+export const H3 = makeHeading(3, "text-3xl font-semibold md:text-4xl");
+export const H4 = makeHeading(4, "text-2xl font-semibold md:text-3xl");
+export const H5 = makeHeading(5, "text-xl font-semibold md:text-2xl");
+export const H6 = makeHeading(6, "text-lg font-semibold md:text-xl");
+
+export default { H1, H2, H3, H4, H5, H6 };

src/components/pages/about/Member.tsx

@@ -1,5 +1,3 @@
-import { motion } from "framer-motion";
-
 import { IMember } from "@/assets/state/team";
 import LinkButton from "@/components/controls/LinkButton";
 

src/components/pages/contribute/FeedbackSection.tsx

@@ -1,19 +1,16 @@
-import dynamic from "next/dynamic";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { AnimatePresence, motion } from "framer-motion";
 import { useMemo, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
-const ArrowPathIcon = dynamic(() => import("@heroicons/react/24/solid/ArrowPathIcon"));
-
 import { BackendResponse } from "@/api/models/Response";
 import Button from "@/components/controls/Button";
 import Error from "@/components/controls/Error";
 import Link from "@/components/navigation/Link";
 import { backend } from "@/utils/wretch";
 import TextArea from "@/components/controls/TextArea";
 import Form from "@/components/controls/Form";
+import Heading from "@/components/layout/heading";
 
 const feedbackSchema = z.object({
   text: z.string()
@@ -49,12 +46,12 @@ const FeedbackSection = () => {
       aria-labelledby="feedback"
       className="flex flex-col w-full gap-4 mx-auto text-center max-w-7xl"
     >
-      <h2
+      <Heading.H2
         id="feedback"
         className="text-4xl font-bold md:text-5xl text-secondary"
       >
         Feedback
-      </h2>
+      </Heading.H2>
       <p>
         We welcome your input and ideas!
         Feel free to share your feedback and suggestions with us through our anonymous feedback form. <br />

src/components/pages/front/Mission.tsx

@@ -1,4 +1,5 @@
 import { IMission } from "@/assets/state/missions";
+import Heading from "@/components/layout/heading";
 
 export interface MissionProps extends IMission {
 
@@ -7,9 +8,9 @@ export interface MissionProps extends IMission {
 const Mission = ({ title, image, imageAlt, text }: MissionProps) => {
   return (
     <li className="flex flex-col items-center flex-1 gap-4 p-8 border-2 rounded-lg border-secondary">
-      <h3 className="text-2xl text-primary md:text-3xl lg:h-[5ex] motion-safe:transition-all">
+      <Heading.H3 className="text-primary lg:h-[5ex] motion-safe:transition-all">
         {title}
-      </h3>
+      </Heading.H3>
       <img
         className="w-full sm:w-2/3 lg:w-full text-[0px]"
         loading="lazy"

src/components/pages/front/RoadmapItem.tsx

@@ -1,4 +1,5 @@
 import { IRoadmapItem } from "@/assets/state/roadmap";
+import Heading from "@/components/layout/heading";
 
 export interface RoadmapItemProps extends IRoadmapItem {
 
@@ -16,9 +17,9 @@ const RoadmapItem = ({ title, text }: RoadmapItemProps) => {
     <li aria-labelledby={id} className="relative flex flex-1 group/item">
       <Divider />
       <div className="relative flex flex-col flex-1 gap-4 py-4 pl-4 md:flex-row md:pl-0 md:py-0 md:gap-0">
-        <h3 id={id} className="flex items-center text-2xl font-bold md:px-8 md:w-1/4 md:py-4 md:justify-end md:text-end">
+        <Heading.H3 id={id} className="flex items-center md:px-8 md:w-1/4 md:py-4 md:justify-end md:text-end">
           {title}
-        </h3>
+        </Heading.H3>
         <Divider hideOnSmall />
         <div className="md:p-8 md:w-3/4">
           <div aria-label="Deliverables" className="flex flex-col gap-2 text-lg">

src/components/pages/front/SignupSection.tsx

@@ -11,6 +11,7 @@ import Link from "@/components/navigation/Link";
 import { backend } from "@/utils/wretch";
 import Input from "@/components/controls/Input";
 import Form from "@/components/controls/Form";
+import Heading from "@/components/layout/heading";
 
 
 const signupSchema = z.object({
@@ -46,13 +47,13 @@ const SignupSection = () => {
       aria-labelledby="sign-up"
       className="flex flex-col gap-12 mx-auto text-center max-w-7xl"
     >
-      <h2
+      <Heading.H2
         id="sign-up"
-        className="text-4xl font-bold md:text-5xl text-secondary"
+        className="text-secondary"
       >
         Keep Up to Date <br />
         Join Our Mailing List
-      </h2>
+      </Heading.H2>
       <p className="text-xl">
         Do you want to join in on this adventure and help develop Commit Rocket?
         We value your input and look forward to involving you in the process of making Commit Rocket as optimal as possible.

src/pages/404.tsx

@@ -6,6 +6,7 @@ import HomeModernIcon from "@heroicons/react/24/solid/HomeModernIcon";
 import { Page } from "@/types/page";
 import LinkButton from "@/components/controls/LinkButton";
 import Button from "@/components/controls/Button";
+import Heading from "@/components/layout/heading";
 
 const NotFound: Page = ({ }) => {
   const router = useRouter();
@@ -17,7 +18,9 @@ const NotFound: Page = ({ }) => {
       </Head>
       <main className="flex items-center justify-center flex-1 w-full pb-8" aria-labelledby="not-found">
         <div className="flex flex-col gap-2 p-8 text-center border-2 rounded-md border-primary">
-          <h1 id="not-found" className="text-5xl text-secondary">Not Found.</h1>
+          <Heading.H1 id="not-found" className="text-secondary">
+            Not Found.
+          </Heading.H1>
           <p>There are no commits to be found here!</p>
           <div className="grid grid-cols-2 gap-2 mt-4">
             <LinkButton href="/" color="secondary">

src/pages/about.tsx

@@ -4,6 +4,8 @@ import members from "@/assets/state/team";
 import Member from "@/components/pages/about/Member";
 import { Page } from "@/types/page";
 import projects from "@/assets/state/projects";
+
+import Heading from "@/components/layout/heading";
 import Project from "@/components/pages/about/Project";
 
 const AboutPage: Page = () => {
@@ -13,14 +15,16 @@ const AboutPage: Page = () => {
         <title>About - Commit Rocket</title>
       </Head>
       <main aria-labelledby="about" className="flex flex-col flex-1 w-full gap-8 pb-8 max-w-7xl">
-        <h1 id="about" className="text-4xl font-bold text-center lg:text-6xl text-secondary">About</h1>
+        <Heading.H1 id="about" className="text-center text-secondary">
+          About
+        </Heading.H1>
         <section aria-labelledby="our-team" className="flex flex-col gap-8">
-          <h2
+          <Heading.H2
             id="our-team"
-            className="text-4xl font-bold text-center md:text-5xl text-secondary"
+            className="text-center text-secondary"
           >
             Team
-          </h2>
+          </Heading.H2>
           <ul
             className="flex flex-wrap justify-center gap-8"
             aria-label="Members"
@@ -31,12 +35,12 @@ const AboutPage: Page = () => {
           </ul>
         </section>
         <section aria-labelledby="projects" className="flex flex-col gap-8">
-          <h2
+          <Heading.H2
             id="projects"
-            className="text-4xl font-bold text-center md:text-5xl text-secondary"
+            className="text-center text-secondary"
           >
             Projects
-          </h2>
+          </Heading.H2>
           <div className="text-lg text-center">
             Commit Rocket is the latest addition to our portfolio of projects.
             Check out some of our previous work to see what we're capable of. <br />

src/pages/blog/[pid]/[slug].tsx

@@ -1,10 +1,10 @@
 import { GetStaticPaths, GetStaticProps } from "next";
 import { Page } from "@/types/page";
-import ArticleBrief, { IArticleBrief } from "@/components/pages/blog/ArticleBrief";
 import { calculateReadtime } from "@/utils/readtime";
 import IArticle from "@/assets/state/articles/article";
 import { reactNodeToString } from "@/utils/react";
 import Head from "next/head";
+import Heading from "@/components/layout/heading";
 
 type ComputedArticle = {
   content: string;
@@ -23,7 +23,9 @@ const BlogPostPage: Page<BlogPostPageProps> = ({ article }) => {
       <Head>
         <title>{article.title} - Commit Rocket</title>
       </Head>
-      <h1 className="text-4xl font-semibold">{article.title}</h1>
+      <Heading.H1 className="text-4xl font-semibold">
+        {article.title}
+      </Heading.H1>
       <div dangerouslySetInnerHTML={{
         __html: article.content
       }} />