refactor: Run prettier

TODO.md

@@ -13,6 +13,7 @@
 - downgrade typescript to 5.1.0 compatability issue with eslint
 
 - Why not use <details> element for the accordion?
+
   - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
 
 - Typography package on blog posts?: https://tailwindcss.com/docs/typography-plugin

app/_components/arrowLink/ArrowLink.tsx

@@ -5,18 +5,26 @@ import { faArrowAltCircleRight } from '@fortawesome/free-regular-svg-icons';
 export type ArrowLinkProps = {
   href: string;
   title: string;
-}
+};
 
 export function ArrowLink(props: ArrowLinkProps) {
   const { href, title } = props;
   return (
     <li className="flex flex-row items-center rounded border border-white">
-      <Link className="group px-4 py-2 text-xl text-white hover:underline" href={href}>
+      <Link
+        className="group px-4 py-2 text-xl text-white hover:underline"
+        href={href}
+      >
         <span className="flex items-center gap-x-2">
           {title}
-          <FontAwesomeIcon className="group-hover:translate-x-1 group-focus:translate-x-1" icon={faArrowAltCircleRight} color="white" size="sm" />
+          <FontAwesomeIcon
+            className="group-hover:translate-x-1 group-focus:translate-x-1"
+            icon={faArrowAltCircleRight}
+            color="white"
+            size="sm"
+          />
         </span>
       </Link>
     </li>
   );
-}
+}

app/_components/footer/Footer.tsx

@@ -10,7 +10,8 @@ export function Footer() {
     <ul className="flex h-full flex-col items-center justify-center px-4 text-sm sm:flex-row sm:justify-between sm:px-6 lg:px-8">
       <li>
         <p>
-          &copy; {new Date().getFullYear()} Accessible Web Components. <i>Supporting resources to make the web accessible</i>.
+          &copy; {new Date().getFullYear()} Accessible Web Components.{' '}
+          <i>Supporting resources to make the web accessible</i>.
         </p>
       </li>
       <li className="ml-auto mr-2">
@@ -27,4 +28,4 @@ export function Footer() {
       </li>
     </ul>
   );
-}
+}

app/_components/header/Header.tsx

@@ -5,7 +5,9 @@ export function Header() {
     <header className="flex h-full items-center justify-center bg-gradient-to-r from-emerald-900 to-emerald-500">
       <ul className="flex flex-col gap-y-8 p-8">
         <li>
-          <h2 className="text-7xl leading-tight text-white">Making the web a better place through accessible software.</h2>
+          <h2 className="text-7xl leading-tight text-white">
+            Making the web a better place through accessible software.
+          </h2>
         </li>
         <li>
           <ul className="flex flex-row items-center gap-x-8">
@@ -16,4 +18,4 @@ export function Header() {
       </ul>
     </header>
   );
-}
+}

app/_components/navbar/Navbar.tsx

@@ -12,6 +12,6 @@ export function Navbar() {
       <li className="ml-3">
         <NavLink href="/blog" name="Blog" />
       </li>
-    </ul >
+    </ul>
   );
-}
+}

app/_components/navbar/navLink/NavLink.tsx

@@ -6,7 +6,7 @@ import Link from 'next/link';
 export type NavLinkProps = {
   href: string;
   name: string;
-}
+};
 
 export function NavLink(props: NavLinkProps) {
   const { href, name } = props;
@@ -23,9 +23,13 @@ export function NavLink(props: NavLinkProps) {
   }
 
   return (
-    <Link className="group text-black transition duration-300" href={href} aria-current={ariaCurrent}>
+    <Link
+      className="group text-black transition duration-300"
+      href={href}
+      aria-current={ariaCurrent}
+    >
       {name}
       <span className="block h-0.5 max-w-0 bg-black transition-all duration-700 group-aria-[current=page]:max-w-full" />
     </Link>
   );
-}
+}

app/_styles/globals.css

@@ -8,12 +8,12 @@
     font-style: normal;
     font-weight: 400;
     font-display: swap;
-    src: url('../../assets/fonts/OpenSans-Variable.ttf') format('truetype-variations');
+    src: url('../../assets/fonts/OpenSans-Variable.ttf')
+      format('truetype-variations');
   }
 
   :root {
     font-size: 1rem;
     font-family: 'Open Sans'; /* TODO Does this belong in @layer base? */
   }
 }
-

app/_styles/layout.module.css

@@ -1,9 +1,9 @@
 .layout {
-  @apply h-screen grid;
+  @apply grid h-screen;
   grid-template:
-    "navbar" 3.5rem
-    "main" 1fr
-    "footer" 2.5rem;
+    'navbar' 3.5rem
+    'main' 1fr
+    'footer' 2.5rem;
 }
 
 .layout > navbar {

app/about/_components/about/About.tsx

@@ -10,32 +10,39 @@ export function About() {
     <article className="prose mx-auto my-8 sm:prose-sm md:prose-base lg:prose-lg xl:prose-xl">
       <h2>What is Accessible Web Components?</h2>
       <p>
-        A blog trying to make web accessability become more accessible knowledge.
+        A blog trying to make web accessability become more accessible
+        knowledge.
       </p>
 
       <h2>Why?</h2>
       <p>
-        According to a <Link href={webAimURL}>2023 report by WebAIM</Link>, the accessibility of the internet for individuals with disabilities stands at a mere 3.7%.
-        While the a11y community has made great strides in the recent years, adoption is slow for many reasons.
-        In particular, lack of awareness of WCAG and ADA is low across the software industry.
+        According to a <Link href={webAimURL}>2023 report by WebAIM</Link>, the
+        accessibility of the internet for individuals with disabilities stands
+        at a mere 3.7%. While the a11y community has made great strides in the
+        recent years, adoption is slow for many reasons. In particular, lack of
+        awareness of WCAG and ADA is low across the software industry.
       </p>
       <p>
-        In addition to this, some people perceive accessibility as a complex and daunting task.
-        This misconception arises from a lack of definitive and information rich resources for people learn.
-        As of late, <Link href={ariaApgURL}>Aria APG</Link> and <Link href={openUiURL}>OpenUI</Link> have made amazing strides in educating best practices for a11y.
+        In addition to this, some people perceive accessibility as a complex and
+        daunting task. This misconception arises from a lack of definitive and
+        information rich resources for people learn. As of late,{' '}
+        <Link href={ariaApgURL}>Aria APG</Link> and{' '}
+        <Link href={openUiURL}>OpenUI</Link> have made amazing strides in
+        educating best practices for a11y.
       </p>
       <p>
-        This website serves as my humble contribution to the web development community, and to express gratitude towards those who have taught me invaluable lessons.
-        It is my hope that my blog posts can help simplify the mental modal required for building accessible UI, while using OpenUI and Aria APG as my resources.
+        This website serves as my humble contribution to the web development
+        community, and to express gratitude towards those who have taught me
+        invaluable lessons. It is my hope that my blog posts can help simplify
+        the mental modal required for building accessible UI, while using OpenUI
+        and Aria APG as my resources.
       </p>
 
       <h2>Who are you?</h2>
-      <p>
-        I&apos;m Jesse, a software engineer.
-      </p>
+      <p>I&apos;m Jesse, a software engineer.</p>
       <p>
         Feel free to contact me on <Link href={LinkedInURL}>LinkedIn</Link>.
       </p>
-    </article >
+    </article>
   );
-}
+}

app/about/_components/header/Header.tsx

@@ -2,11 +2,9 @@ export function Header() {
   return (
     <header className="bg-gradient-to-r from-emerald-900 to-emerald-500">
       <div className="flex flex-col gap-y-2 p-8">
-        <h2 className="text-7xl leading-tight text-white">
-          About the project
-        </h2>
+        <h2 className="text-7xl leading-tight text-white">About the project</h2>
         <p className="text-white">In question-answer format</p>
       </div>
     </header>
   );
-}
+}

app/blog/_components/article/Article.tsx

@@ -19,6 +19,6 @@ export function Article(props: ArticleProps) {
         </Link>
       </h2>
       <p className="font-light">{description}</p>
-    </li >
+    </li>
   );
-}
+}

app/blog/_components/disclosure/Disclosure.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 export type DisclosureProps = {
   label: string;
   handleClick: () => void;
-}
+};
 
 export function Disclosure(props: DisclosureProps) {
   const { label, handleClick } = props;
@@ -15,4 +15,4 @@ export function Disclosure(props: DisclosureProps) {
       {label}
     </button>
   );
-}
+}

app/blog/_components/header/Header.tsx

@@ -6,9 +6,11 @@ export function Header() {
           <h1 className="text-7xl leading-tight text-white">Blog</h1>
         </li>
         <li>
-          <h2 className="text-white">Learn a11y and frontend dev with these articles</h2>
+          <h2 className="text-white">
+            Learn a11y and frontend dev with these articles
+          </h2>
         </li>
       </ul>
     </header>
   );
-}
+}

app/blog/_components/pagination/Pagination.tsx

@@ -7,18 +7,26 @@ export function Pagination() {
     <nav className="mt-6" role="navigation" aria-label="Pagination Navigation">
       <ul className="flex flex-row items-center justify-center gap-x-4">
         <li>
-          <Link href="#" aria-label="Goto Page 1">1</Link>
+          <Link href="#" aria-label="Goto Page 1">
+            1
+          </Link>
         </li>
         <li>
-          <Link href="#" aria-label="Goto Page 2">2</Link>
+          <Link href="#" aria-label="Goto Page 2">
+            2
+          </Link>
         </li>
         <li>
-          <Link href="#" aria-label="Goto Page 3">3</Link>
+          <Link href="#" aria-label="Goto Page 3">
+            3
+          </Link>
         </li>
         <li>
-          <Link href="#" aria-label="Goto Page 4">4</Link>
+          <Link href="#" aria-label="Goto Page 4">
+            4
+          </Link>
         </li>
       </ul>
     </nav>
   );
-}
+}

app/blog/_components/tag/Tag.tsx

@@ -1,10 +1,12 @@
 export type TagProps = {
   displayText: string;
-}
+};
 
 export function Tag(props: TagProps) {
   const { displayText } = props;
   return (
-    <span className="rounded-md border border-solid px-1 text-sm">{displayText}</span>
+    <span className="rounded-md border border-solid px-1 text-sm">
+      {displayText}
+    </span>
   );
-}
+}