feat: componetize h1 h2 (#307)

Satoshi-Sh · web-flow · commit e7dea9398fb3 · 2023-11-13T14:18:22.000+05:30
* Created Headings components for h1 and h2

* Replaced h1 and h2 with newly created H1 and H2 components

* Removed isAuth props and just used h2 in login and register pages

* Added defaultStyles for H1 component except for margin properties

* Utilized forwardRef to add option to add more attributes to H1 and H2. Removed id props from H2 component.

* Added display name for lint formatting
diff --git a/src/components/About.jsx b/src/components/About.jsx
@@ -1,26 +1,28 @@
 import { Container } from '@/components/Container'
 import Image from 'next/image'
-import GithubStar from '@/images/about/2021star.png' 
-import Support from '@/images/about/support.png' 
-import Eddiebot from '@/images/about/eddiebot.png' 
+import GithubStar from '@/images/about/2021star.png'
+import Support from '@/images/about/support.png'
+import Eddiebot from '@/images/about/eddiebot.png'
+import { H1, H2 } from '@/components/Headings'
 
 export function Content() {
   return (
     <section id="about" className="relative overflow-hidden bg-slate-50 py-32">
       <Container className="relative">
         <div>
-          <h1 className="mt-3 text-4xl font-semibold text-gray-900">About</h1>
-          <p className="my-4 text-lg tracking-tight">Read more about where EddieHub started and the core values of the community.</p>
-          <h2 className="font-display text-3xl tracking-tight sm:text-4xl">
-            Our Background
-          </h2>
+          <H1 className="mt-3">About</H1>
+          <p className="my-4 text-lg tracking-tight">
+            Read more about where EddieHub started and the core values of the
+            community.
+          </p>
+          <H2>Our Background</H2>
           <Image
-                className="mx-auto"
-                src={GithubStar}
-                alt="github star 2021 badge"
-                width="auto"
-                height="250"
-              />
+            className="mx-auto"
+            src={GithubStar}
+            alt="github star 2021 badge"
+            width="auto"
+            height="250"
+          />
           <p className="mt-4 text-lg tracking-tight">
             EddieHub was founded by Eddie Jaoude, GitHub Star, GitHub Star of
             the Year 2020 and winner of the GitHub Community Growth Award 2021.
@@ -43,9 +45,7 @@ export function Content() {
             First, Code Second” quickly became what the community members live
             by.
           </p>
-          <h2 className="font-display mt-5 text-3xl tracking-tight  sm:text-4xl">
-            Our Aims
-          </h2>
+          <H2 className="mt-5">Our Aims</H2>
           <p className="mt-4 text-lg tracking-tight">
             EddieHub’s overall aim is to support members in: accelerating their
             learnings so that they can have the career they want.
@@ -72,12 +72,12 @@ export function Content() {
               </p>
             </li>
             <Image
-                className="mx-auto"
-                src={Support}
-                alt="github support"
-                width="auto"
-                height="500"
-              />
+              className="mx-auto"
+              src={Support}
+              alt="github support"
+              width="auto"
+              height="500"
+            />
             <li>
               Building upon your communication skills
               <p className="mt-4 text-lg tracking-tight">
@@ -118,9 +118,7 @@ export function Content() {
               </p>
             </li>
           </ol>
-          <h2 className="font-display mt-5 text-3xl tracking-tight  sm:text-4xl">
-            Our Core Values
-          </h2>
+          <H2 className="mt-5">Our Core Values</H2>
           <p>Behind these aims are EddieHub’s core values:</p>
           <ol className="mt-4 list-decimal text-lg tracking-tight">
             <li>
diff --git a/src/components/Faqs.jsx b/src/components/Faqs.jsx
@@ -1,6 +1,7 @@
 import Image from 'next/image'
 
 import { Container } from '@/components/Container'
+import { H2 } from '@/components/Headings'
 
 const faqs = [
   [
@@ -11,7 +12,8 @@ const faqs = [
     },
     {
       question: 'How do I join the EddieHub GitHub Organisation?',
-      answer: 'If you would like to join the EddieHub GitHub organisation, then please fill out this form so that you can get an automatic invite to the organisation. If you want the organisation to appear on your profile then make sure that you make it public (as by default it is marked as private).',
+      answer:
+        'If you would like to join the EddieHub GitHub organisation, then please fill out this form so that you can get an automatic invite to the organisation. If you want the organisation to appear on your profile then make sure that you make it public (as by default it is marked as private).',
     },
     {
       question: 'Who is EddieHub for?',
@@ -23,11 +25,10 @@ const faqs = [
     {
       question: 'I am new to coding and / or Open Source, can I still join?',
       answer:
-        'Yes! Starting out can sometimes feel lonely and overwhelming particularly with the amount of information out there. In EddieHub Discord you will find supportive channels such as #help and #first-timers. Also Eddie\'s YouTube channel is a good resource when starting out.',
+        "Yes! Starting out can sometimes feel lonely and overwhelming particularly with the amount of information out there. In EddieHub Discord you will find supportive channels such as #help and #first-timers. Also Eddie's YouTube channel is a good resource when starting out.",
     },
     {
-      question:
-        'Can I find a mentor in EddieHub?',
+      question: 'Can I find a mentor in EddieHub?',
       answer:
         'At EddieHub we believe that everyone is a mentor and can help others in the community. This community approach is beneficial for the mentee as they are exposed to various perspectives, and for the mentor they develop many of their communication and collaboration skills. Even if you are one month into your journey, there is someone who is one day in and who can benefit from your experience and insight.',
     },
@@ -45,13 +46,13 @@ const faqs = [
         'At EddieHub we are passionate about moving away from gender favouring, polarising, race related, religion inconsiderate or other unequal phrasing. Therefore if you use terms such as “Hi Guys”, then EddieBot responds with a notification highlighting that this is not inclusive language and will suggest alternatives.',
     },
     {
-      question: 'I just joined, why can\'t I post links on Discord?',
-      answer: 'You have recently joined the community and you have tried to share a link, but found that NightBot has deleted this message. We appreciate that the community is a place to share your work, which we encourage only for our regular community members (aka “Team Eddie”). To become a regular and get the role "Team Eddie", we highly suggest to get involved in the community conversation and add value by helping other community members.',
+      question: "I just joined, why can't I post links on Discord?",
+      answer:
+        'You have recently joined the community and you have tried to share a link, but found that NightBot has deleted this message. We appreciate that the community is a place to share your work, which we encourage only for our regular community members (aka “Team Eddie”). To become a regular and get the role "Team Eddie", we highly suggest to get involved in the community conversation and add value by helping other community members.',
     },
     {
       question: 'I love Hubber! Can I use the EddieHub mascot and logo?',
-      answer:
-        'Check what you can and cannot do on our Branding page.',
+      answer: 'Check what you can and cannot do on our Branding page.',
     },
   ],
 ]
@@ -65,12 +66,9 @@ export function Faqs() {
     >
       <Container className="relative">
         <div className="mx-auto max-w-2xl lg:mx-0">
-          <h2
-            id="faq-title"
-            className="font-display text-3xl tracking-tight text-slate-900 sm:text-4xl"
-          >
+          <H2 id="faq-title" className="text-slate-900">
             Frequently asked questions
-          </h2>
+          </H2>
           <p className="mt-4 text-lg tracking-tight text-slate-700">
             If you can’t find what you’re looking for, email our support team
             and if you’re lucky someone will get back to you.
diff --git a/src/components/Headings.jsx b/src/components/Headings.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import clsx from 'clsx'
+
+export const H1 = React.forwardRef(({ children, className, ...rest }, ref) => {
+  const defaultClass =
+    'max-w-4xl font-display text-5xl font-medium tracking-tight text-slate-900 sm:text-7xl'
+  return (
+    <h1 ref={ref} className={clsx(defaultClass, className)} {...rest}>
+      {children}
+    </h1>
+  )
+})
+H1.displayName = 'H1'
+
+export const H2 = React.forwardRef(({ children, className, ...rest }, ref) => {
+  const defaultClass = 'font-display text-3xl tracking-tight sm:text-4xl'
+  return (
+    <h2 ref={ref} className={clsx(defaultClass, className)} {...rest}>
+      {children}
+    </h2>
+  )
+})
+H2.displayName = 'H2'
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
@@ -1,10 +1,11 @@
 import { Button } from '@/components/Button'
 import { Container } from '@/components/Container'
+import { H1 } from '@/components/Headings'
 
 export function Hero() {
   return (
     <Container className="pb-16 pt-20 text-center lg:pt-32">
-      <h1 className="mx-auto max-w-4xl font-display text-5xl font-medium tracking-tight text-slate-900 sm:text-7xl">
+      <H1 className="mx-auto">
         Open Source{' '}
         <span className="relative whitespace-nowrap text-primary-600">
           <svg
@@ -18,7 +19,7 @@ export function Hero() {
           <span className="relative">community</span>
         </span>{' '}
         aimed at encouraging and promoting communication.
-      </h1>
+      </H1>
       <p className="mx-auto mt-6 max-w-2xl text-lg tracking-tight text-slate-700">
         Best practices and technical expertise in an inclusive and welcoming
         environment
diff --git a/src/components/Moderators.jsx b/src/components/Moderators.jsx
@@ -1,5 +1,6 @@
 import { Container } from '@/components/Container'
 import Image from 'next/image'
+import { H2 } from '@/components/Headings'
 
 const people = [
   {
@@ -78,13 +79,13 @@ export function Moderators() {
     >
       <Container>
         <div className="md:text-center">
-          <h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl">
+          <H2 className="text-white">
             <span className="relative whitespace-nowrap">
               <SwirlyDoodle className="absolute left-0 top-1/2 h-[1em] w-full fill-primary-400" />
               <span className="relative">EddieHub</span>
             </span>{' '}
             Moderators.
-          </h2>
+          </H2>
           <p className="mt-4 text-lg text-slate-400">
             Our awesome Moderators providing support through all timezones
           </p>
diff --git a/src/components/Newsletter.jsx b/src/components/Newsletter.jsx
@@ -1,5 +1,6 @@
 import { Container } from '@/components/Container'
 import Image from 'next/image'
+import { H2 } from '@/components/Headings'
 
 import CommunityAward from '@/images/awards/github-award-community-growth-eddie-jaoude.jpeg'
 import TeacherAward from '@/images/awards/github-award-top-teacher-eddie-jaoude.jpeg'
@@ -12,9 +13,7 @@ export function Newsletter() {
     >
       <Container className="relative space-y-16">
         <div className="mx-auto max-w-lg text-center">
-          <h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl">
-            Subscribe to the EddieHub Newsletter
-          </h2>
+          <H2 className="text-white">Subscribe to the EddieHub Newsletter</H2>
           <div className="my-4">
             <iframe
               src="https://eddiehub.substack.com/embed"
diff --git a/src/components/PrimaryFeatures.jsx b/src/components/PrimaryFeatures.jsx
@@ -6,6 +6,7 @@ import { Tab } from '@headlessui/react'
 import clsx from 'clsx'
 
 import { Container } from '@/components/Container'
+import { H2 } from '@/components/Headings'
 import GitHubBioDrop from '@/images/screenshots/github-biodrop.png'
 import GitHubOrg from '@/images/screenshots/github-eddiehub-org.png'
 import GitHubGoodFirstIssueFinder from '@/images/screenshots/github-good-first-issue-finder.png'
@@ -62,9 +63,9 @@ export function PrimaryFeatures() {
     >
       <Container className="relative">
         <div className="max-w-2xl md:mx-auto md:text-center xl:max-w-none">
-          <h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl md:text-5xl">
+          <H2 className="text-white md:text-5xl">
             Here are some of our active GitHub repositories
-          </h2>
+          </H2>
           <p className="mt-6 text-lg tracking-tight text-primary-100">
             Everyone is welcome to come and contribute to our open source
             projects.
diff --git a/src/components/SecondaryFeatures.jsx b/src/components/SecondaryFeatures.jsx
@@ -6,6 +6,7 @@ import { Tab } from '@headlessui/react'
 import clsx from 'clsx'
 
 import { Container } from '@/components/Container'
+import { H2 } from '@/components/Headings'
 import DiscordLogo from '@/images/logos/discord.svg'
 import GitHubLogo from '@/images/logos/github.svg'
 
@@ -148,9 +149,7 @@ export function SecondaryFeatures() {
     >
       <Container>
         <div className="mx-auto max-w-2xl md:text-center">
-          <h2 className="font-display text-3xl tracking-tight text-slate-900 sm:text-4xl">
-            Why be part of EddieHub?
-          </h2>
+          <H2 className="text-slate-900">Why be part of EddieHub?</H2>
           <p className="mt-4 text-lg tracking-tight text-slate-700">
             Accelerate your career, skills and grow your network, while having
             fun!
diff --git a/src/components/Testimonials.jsx b/src/components/Testimonials.jsx
@@ -2,6 +2,7 @@ import Image from 'next/image'
 import Link from 'next/link'
 
 import { Container } from '@/components/Container'
+import { H2 } from '@/components/Headings'
 
 const testimonials = [
   [
@@ -10,22 +11,23 @@ const testimonials = [
         'Started contributing and building my GitHub profile and already got a job interview request based on my GitHub activity. So I really appreciate what you do here!',
       author: {
         name: 'emanuel_dev',
-        username: 'EmanuelGF'
+        username: 'EmanuelGF',
       },
     },
     {
-      content: 'EddieHub is like a family to me! We get really warm welcomes here! We get all our issues solved by each others\' #help :) We get our 🟩 treats here! EddieHub is awesome. By Awesome I mean Awesome! It is a 10/5 rating!',
+      content:
+        "EddieHub is like a family to me! We get really warm welcomes here! We get all our issues solved by each others' #help :) We get our 🟩 treats here! EddieHub is awesome. By Awesome I mean Awesome! It is a 10/5 rating!",
       author: {
         name: 'Krish Gupta',
-        username: 'xkrishguptaa'
-      }
+        username: 'xkrishguptaa',
+      },
     },
     {
       content:
         "EddieHub is like a family to me! We get really warm welcomes here! We get all our issues solved by each others' #help :) We get our 🟩 treats here! EddieHub is awesome. By Awesome I mean Awesome! It is a 10/5 rating!",
       author: {
         name: 'Vincent Villafuerte',
-        username: 'vinzvinci'
+        username: 'vinzvinci',
       },
     },
   ],
@@ -35,15 +37,15 @@ const testimonials = [
         "It's everything anyone could ever ask for in a community. Wholesome, Encouraging, Open Source and everything nice! Best thing happened in 2020. I'll be always thankful to this community and keep contributing here. It's beyond rating of 5 stars. 3000/5 ⭐",
       author: {
         name: 'Karuna Tata',
-        username: 'starlightknown'
+        username: 'starlightknown',
       },
     },
     {
       content:
         'EddieHub is the best growing 🚀 Open-Source community. Here, you can help each other by raising issues, solving doubts on the help channel, show your work (projects), make good connections and so many things.I would recommend all beginners to join the most respectful, collaborative and loving Open-Source community.Thanks @eddiejaoude, we support you!',
       author: {
         name: 'akhileshthite',
-        username: 'akhileshthite'
+        username: 'akhileshthite',
       },
     },
   ],
@@ -53,15 +55,15 @@ const testimonials = [
         'Eddiehub has helped me to understand the importance of Open Source and how easy it is to collaborate with developers from around the world to work on different projects and learn from each other in an amazing community.',
       author: {
         name: 'Evavic44',
-        username: 'Evavic44'
+        username: 'Evavic44',
       },
     },
     {
       content:
         "This is just an awesome community. This is the first community I have seen which puts collaboration first than the code. Collaborative people make a collaborative community and EddieHub is a perfect example of it 😄. I can't rate this community on the scale because priceless things can't be quantified ❤️",
       author: {
         name: 'Kaiwalya Koparkar',
-        username: 'kaiwalyakoparkar'
+        username: 'kaiwalyakoparkar',
       },
     },
   ],
@@ -84,9 +86,7 @@ export function Testimonials() {
     >
       <Container>
         <div className="mx-auto max-w-2xl md:text-center">
-          <h2 className="font-display text-3xl tracking-tight text-slate-900 sm:text-4xl">
-            Testimonials
-          </h2>
+          <H2 className="text-slate-900">Testimonials</H2>
           <p className="mt-4 text-lg tracking-tight text-slate-700">
             What it means to be part of this community in the members&lsquo; own
             words
@@ -114,13 +114,21 @@ export function Testimonials() {
                             {testimonial.author.name}
                           </div>
                           <div className="mt-1 text-sm text-slate-500">
-                            <Link href={`https://github.com/${testimonial.author.username}`}>@{testimonial.author.username}</Link>
+                            <Link
+                              href={`https://github.com/${testimonial.author.username}`}
+                            >
+                              @{testimonial.author.username}
+                            </Link>
                           </div>
                         </div>
                         <div className="overflow-hidden rounded-full bg-slate-50">
                           <Image
                             className="h-14 w-14 object-cover"
-                            src={'https://github.com/' + testimonial.author.username + '.png'}
+                            src={
+                              'https://github.com/' +
+                              testimonial.author.username +
+                              '.png'
+                            }
                             alt=""
                             width={56}
                             height={56}
