feat(ci): add typecheck and lint to PR workflow and fix existing errors

.github/workflows/setup_and_build.yml

@@ -30,6 +30,10 @@ jobs:
             ${{ runner.os }}-yarn-
       - name: Install dependencies
         run: yarn install --immutable
+      - name: Typecheck
+        run: yarn typecheck
+      - name: Lint
+        run: yarn lint
       - name: Build
         run: yarn build
       - name: Upload artifact

package.json

@@ -42,9 +42,10 @@
     "@typescript-eslint/parser": "^5.48.2",
     "eslint": "^8.32.0",
     "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-prettier": "^5.5.6",
     "husky": "^8.0.3",
     "lint-staged": "^13.1.0",
-    "prettier": "2.8.8",
+    "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.8.1",
     "tailwind-scrollbar": "^3.0.0",
     "typescript": "^4.9.4"

src/components/content/BasicResourcesBox/data.ts

@@ -1,22 +1,22 @@
 const resources = {
-    title: 'Basic Resources',
-    buttons: [
-      {
-        text: 'Installation Instructions',
-        path: 'docs/installation',
-        icon: 'fa6-solid:book',
-      },
-      {
-        text: 'Documentation',
-        path: 'https://docs.podman.io/en/latest/',
-        icon: 'fa6-solid:book',
-      },
-      {
-        text: 'Podman Troubleshooting Guide',
-        path: 'https://github.com/containers/podman/blob/main/troubleshooting.md',
-        icon: 'fa6-solid:book',
-      },
-    ],
-  };
+  title: 'Basic Resources',
+  buttons: [
+    {
+      text: 'Installation Instructions',
+      path: 'docs/installation',
+      icon: 'fa6-solid:book',
+    },
+    {
+      text: 'Documentation',
+      path: 'https://docs.podman.io/en/latest/',
+      icon: 'fa6-solid:book',
+    },
+    {
+      text: 'Podman Troubleshooting Guide',
+      path: 'https://github.com/containers/podman/blob/main/troubleshooting.md',
+      icon: 'fa6-solid:book',
+    },
+  ],
+};
 
-  export { resources };
+export { resources };

src/components/content/BasicResourcesBox/index.tsx

@@ -15,7 +15,7 @@ const BasicResourcesBox = () => {
               <li key={index}>
                 <a
                   href={button.path}
-                  className="no-underline hover:no-underline leading-none mx-auto flex h-32 max-w-lg flex-col items-center justify-center gap-4 rounded-md bg-gray-100 p-4 text-center text-purple-700 underline-offset-4 transition duration-150 ease-linear hover:bg-purple-700 hover:text-purple-50 hover:shadow-md dark:bg-gray-700 dark:hover:bg-purple-900 dark:hover:text-white lg:h-auto lg:flex-row xl:justify-start">
+                  className="mx-auto flex h-32 max-w-lg flex-col items-center justify-center gap-4 rounded-md bg-gray-100 p-4 text-center leading-none text-purple-700 no-underline underline-offset-4 transition duration-150 ease-linear hover:bg-purple-700 hover:text-purple-50 hover:no-underline hover:shadow-md dark:bg-gray-700 dark:hover:bg-purple-900 dark:hover:text-white lg:h-auto lg:flex-row xl:justify-start">
                   <span className="text-left">{button.text}</span>
                   <Icon icon={button.icon} className="order-first hidden lg:block" />
                 </a>

src/components/content/CodeExampleSection/data.ts

@@ -1,5 +1,5 @@
 const searchExample = {
-  command: `$ podman search httpd`,
+  command: '$ podman search httpd',
   // prettier-ignore
   code: ` 
   INDEX       NAME                                  DESCRIPTION                    STARS OFFICIAL AUTOMATED
@@ -13,10 +13,10 @@ const searchExample = {
 
 
 `,
-  label: `Podman can search for images on remote registries with some simple keywords.`,
+  label: 'Podman can search for images on remote registries with some simple keywords.',
 };
 const searchFilterExample = {
-  command: `$ podman search httpd --filter=is-official`,
+  command: '$ podman search httpd --filter=is-official',
   // prettier-ignore
   code:`
   INDEX       NAME                                  DESCRIPTION                    STARS OFFICIAL AUTOMATED
@@ -37,19 +37,20 @@ const searchFilterExample = {
 
 
 `,
-  label: `You can also enhance your search with filters.`,
-  extra: `Downloading (pulling) an image is easy, too.`,
+  label: 'You can also enhance your search with filters.',
+  extra: 'Downloading (pulling) an image is easy, too.',
 };
 const imagesExample = {
-  command: `$ podman images`,
+  command: '$ podman images',
   // prettier-ignore
   code:`
   REPOSITORY               TAG         IMAGE ID      CREATED       SIZE
   docker.io/library/httpd  latest      d294bb32c207  12 hours ago  148 MB
 
 `,
-  label: `Podman can search for images on remote registries with some simple keywords.`,
-  extra: `**Note**: Podman searches in different registries. Therefore it is recommend to use the full image name (docker.io/library/httpd instead of httpd) to ensure that you are using the correct image.`,
+  label: 'Podman can search for images on remote registries with some simple keywords.',
+  extra:
+    '**Note**: Podman searches in different registries. Therefore it is recommend to use the full image name (docker.io/library/httpd instead of httpd) to ensure that you are using the correct image.',
 };
 
 export { searchExample, searchFilterExample, imagesExample };

src/components/content/FeaturesCarousel/index.tsx

@@ -7,8 +7,7 @@ const Tab = (props): JSX.Element => {
   return (
     <button
       onClick={method}
-      className={`rounded-lg p-4 shadow-sm transition duration-150 hover:bg-purple-700 hover:text-white dark:hover:bg-purple-900 dark:hover:text-gray-50 md:h-36 md:w-56
-      ${
+      className={`rounded-lg p-4 shadow-sm transition duration-150 hover:bg-purple-700 hover:text-white dark:hover:bg-purple-900 dark:hover:text-gray-50 md:h-36 md:w-56 ${
         isActive
           ? 'bg-gradient-radial from-purple-500 to-purple-700 text-white dark:from-purple-700 dark:to-purple-900 dark:shadow-purple-900'
           : '0 bg-white text-gray-700 dark:bg-gray-700 dark:text-gray-300 dark:shadow-gray-700'
@@ -37,14 +36,14 @@ const TabContent = (props): JSX.Element => {
               isActive % 2 === 0
                 ? 'text-white dark:text-white'
                 : isActive === 1
-                ? 'text-blue-700 dark:text-purple-500'
-                : 'text-purple-700 dark:text-purple-500'
+                  ? 'text-blue-700 dark:text-purple-500'
+                  : 'text-purple-700 dark:text-purple-500'
             }`}>
             {title}
           </h3>
           <ul className="my-4 lg:my-12">
             {commands.map((command, index) => (
-              <li key={index} className={`font-mono  ${isActive == 2 ? 'text-white' : 'text-blue-500'}`}>
+              <li key={index} className={`font-mono ${isActive == 2 ? 'text-white' : 'text-blue-500'}`}>
                 {command}
               </li>
             ))}
@@ -80,8 +79,8 @@ function FeaturesCarousel() {
           activeTabIndex % 2 === 1
             ? 'bg-white dark:bg-gray-900 dark:bg-gradient-to-b dark:from-purple-900 dark:to-purple-900/50'
             : activeTabIndex === 2
-            ? 'bg-gradient-to-br from-blue-300 via-blue-500 to-blue-900 dark:from-blue-900 dark:to-gray-700/50'
-            : 'bg-gradient-to-br from-purple-300 via-purple-700 to-purple-900'
+              ? 'bg-gradient-to-br from-blue-300 via-blue-500 to-blue-900 dark:from-blue-900 dark:to-gray-700/50'
+              : 'bg-gradient-to-br from-purple-300 via-purple-700 to-purple-900'
         }`}>
         <div className="space-between container flex">
           <button
@@ -90,7 +89,7 @@ function FeaturesCarousel() {
             aria-label="Previous feature">
             <Icon
               icon="fa-solid:arrow-circle-left"
-              className={`text-3xl transition duration-150 ease-linear hover:opacity-50 dark:hover:opacity-50  ${
+              className={`text-3xl transition duration-150 ease-linear hover:opacity-50 dark:hover:opacity-50 ${
                 activeTabIndex % 2 === 0 ? 'text-white' : 'text-purple-700 dark:text-gray-50'
               }`}
             />

src/components/content/TestimonialSection/index.tsx

@@ -38,11 +38,7 @@ function TestimonialSection() {
             return <Testimonial key={index} {...testimonial} />;
           })}
         </div>
-        <button
-          type="button"
-          onClick={slideRight}
-          className="hidden sm:block xl:hidden"
-          aria-label="Next testimonial">
+        <button type="button" onClick={slideRight} className="hidden sm:block xl:hidden" aria-label="Next testimonial">
           <Icon
             icon="fa-solid:arrow-circle-right"
             className="dark:hover-text-purple-700 text-4xl text-gray-500 opacity-25 transition duration-150 ease-linear hover:text-purple-900 hover:opacity-100"

src/components/content/ThankYouSection/data.ts

@@ -5,7 +5,7 @@ const sponsorData = [
     src: 'logos/optimized/red-hat-120w-77h.webp',
     alt: 'Red Hat Logo',
   },
-   {
+  {
     label: 'Amadeus',
     href: 'https://www.amadeus.com/',
     src: 'logos/optimized/amadeus-171w-22h.webp',

src/components/content/ThankYouSection/index.tsx

@@ -29,24 +29,24 @@ function ThankYouSection(): JSX.Element {
         </button>
         <div
           id="slider"
-          className="justify-center mx-auto h-full w-full  place-items-center gap-6 overflow-x-scroll scroll-smooth whitespace-nowrap scrollbar scrollbar-track-purple-500 lg:container lg:grid">
+          className="mx-auto h-full w-full place-items-center justify-center gap-6 overflow-x-scroll scroll-smooth whitespace-nowrap scrollbar scrollbar-track-purple-500 lg:container lg:grid">
           <a
             href={redHat.href}
             target="_blank"
-            className="mx-4 mb-4 inline-block rounded-md p-4  dark:bg-gray-100 lg:row-span-2 lg:row-start-1 lg:mb-0">
+            className="mx-4 mb-4 inline-block rounded-md p-4 dark:bg-gray-100 lg:row-span-2 lg:row-start-1 lg:mb-0">
             <img {...redHat} className="mx-auto p-4" />
           </a>
           <a
             href={amadeus.href}
             target="_blank"
             className="mx-4 mb-4 inline-block rounded-md p-4 dark:bg-gray-100 lg:mb-0 lg:flex lg:h-28 lg:w-80 lg:items-center">
-            <img {...amadeus} className="object-fit mx-auto max-w-sm p-4 " />
+            <img {...amadeus} className="object-fit mx-auto max-w-sm p-4" />
           </a>
           <a
             href={suse.href}
             target="_blank"
             className="mx-4 mb-4 inline-block rounded-md p-4 dark:bg-gray-100 lg:mb-0 lg:flex lg:h-28 lg:w-80 lg:items-center">
-            <img {...suse} className="object-fit mx-auto max-w-sm p-4 " />
+            <img {...suse} className="object-fit mx-auto max-w-sm p-4" />
           </a>
           <a
             href={motorola.href}
@@ -58,13 +58,13 @@ function ThankYouSection(): JSX.Element {
             href={ntt.href}
             target="_blank"
             className="mx-4 mb-4 inline-block rounded-md p-4 dark:bg-gray-100 lg:mb-0 lg:flex lg:h-28 lg:w-80 lg:items-center">
-            <img {...ntt} className="object-fit mx-auto max-w-sm p-4 " />
+            <img {...ntt} className="object-fit mx-auto max-w-sm p-4" />
           </a>
           <a
             href={ibm.href}
             target="_blank"
             className="col-span-3 mx-4 mb-4 inline-block rounded-md p-4 dark:bg-gray-100 lg:mb-0 lg:flex lg:h-28 lg:w-80 lg:items-center">
-            <img {...ibm} className="object-fit mx-auto max-w-sm p-4 " />
+            <img {...ibm} className="object-fit mx-auto max-w-sm p-4" />
           </a>
           <a
             href={debian.href}

src/components/content/WelcomeBanner/index.tsx

@@ -5,21 +5,21 @@ function WelcomeBanner() {
   return (
     <section className="bg-gray-900">
       <div className="container my-20 grid grid-cols-4 place-items-center gap-y-4 md:grid-cols-10 lg:grid-cols-12">
-        <div className=" col-span-2 hidden md:block lg:row-span-2">
+        <div className="col-span-2 hidden md:block lg:row-span-2">
           <Icon icon="noto-v1:confetti-ball" className="rotate-[120deg] text-7xl" />
         </div>
-        <header className=" col-span-full flex items-center gap-4 text-center md:col-span-6 lg:col-span-8">
-          <h2 className="bg-gradient-to-r from-purple-500 to-blue-500 bg-clip-text text-5xl font-extrabold text-transparent dark:bg-gradient-to-r  dark:from-purple-700 dark:to-blue-700 dark:bg-clip-text dark:text-transparent">
+        <header className="col-span-full flex items-center gap-4 text-center md:col-span-6 lg:col-span-8">
+          <h2 className="bg-gradient-to-r from-purple-500 to-blue-500 bg-clip-text text-5xl font-extrabold text-transparent dark:bg-gradient-to-r dark:from-purple-700 dark:to-blue-700 dark:bg-clip-text dark:text-transparent">
             Welcome to the new Podman Website!
           </h2>
         </header>
         <div className="col-span-2 hidden md:block lg:row-span-2">
           <Icon icon="noto-v1:confetti-ball" className="rotate-180 text-7xl" />
         </div>
-        <div className="col-span-full mt-8 flex flex-wrap items-center gap-8 md:mt-0 lg:col-span-8 ">
+        <div className="col-span-full mt-8 flex flex-wrap items-center gap-8 md:mt-0 lg:col-span-8">
           <p className="max-w-prose text-center text-white">
-            Take a look around, don't forget to check out the new <a href="docs">docs layout</a>. Please report
-            any bugs to <a href="https://github.com/containers/website-new/issues">the issue tracker</a>.
+            Take a look around, don't forget to check out the new <a href="docs">docs layout</a>. Please report any bugs
+            to <a href="https://github.com/containers/website-new/issues">the issue tracker</a>.
           </p>
         </div>
       </div>

src/components/layout/CommunityMeetingsCardGrid/index.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode, useEffect, useRef, useState } from 'react';
+import type { ReactNode } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import CustomCard from '@site/src/components/ui/CustomCard';
 import SubcardGrid from '@site/src/components/layout/SubcardGrid';
 import SectionHeader from '@site/src/components/layout/SectionHeader';
@@ -38,7 +39,7 @@ type SubcardButtonProps = {
   text: string;
   path?: string;
   markDown?: ReactNode;
-  modalHeaderData?: String;
+  modalHeaderData?: string;
 };
 
 type SubcardGridProps = {
@@ -65,8 +66,8 @@ function toggleModalOpen(ref, handler) {
 }
 
 function CommunityMeetingsCardGrid({ cards }) {
-  let cabalDropdownOptions: DropdownOptionProps[] = [];
-  let MeetingDropdownOptions: DropdownOptionProps[] = [];
+  const cabalDropdownOptions: DropdownOptionProps[] = [];
+  const MeetingDropdownOptions: DropdownOptionProps[] = [];
 
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [modalHeader, setModalHeader] = useState<ReactNode | undefined>(undefined);
@@ -91,10 +92,10 @@ function CommunityMeetingsCardGrid({ cards }) {
 
   const populateMeetings = (): void => {
     Object.values(markDownFiles)?.forEach(mdFile => {
-      let mdReader = mdFile?.default(useRef());
+      const mdReader = mdFile?.default(useRef());
       mdReader?.props?.children?.forEach(child => {
-        let field1: string = child?.props?.children?.[0];
-        let field2: object = child?.props?.children?.[1];
+        const field1: string = child?.props?.children?.[0];
+        const field2: object = child?.props?.children?.[1];
         if (typeof field1 == 'string' && (field1.includes('BlueJeans') || field1.includes('Video'))) {
           if (mdFile?.contentTitle?.includes('Cabal')) {
             cabalDropdownOptions.unshift({
@@ -160,8 +161,8 @@ function CommunityMeetingsCardGrid({ cards }) {
 
   populateMeetings();
 
-  let communityMeetingsData: SubcardGridProps[] = [];
-  let CabalMeetingsData: SubcardGridProps[] = [];
+  const communityMeetingsData: SubcardGridProps[] = [];
+  const CabalMeetingsData: SubcardGridProps[] = [];
 
   // get top 2 CommunityMeetings & CabalMeetings for subcards
   for (let i = 0; i < 2; i++) {
@@ -194,7 +195,7 @@ function CommunityMeetingsCardGrid({ cards }) {
   return (
     <div className="justify-content-center align-items-center custom-card-grid-root flex">
       {cards.map((card: CommunityMeetingsCardProps, index: number) => {
-        let meetingsData = index == 1 ? CabalMeetingsData : communityMeetingsData;
+        const meetingsData = index == 1 ? CabalMeetingsData : communityMeetingsData;
         return (
           <div
             key={`card-container-${index}`}
@@ -226,7 +227,7 @@ function CommunityMeetingsCardGrid({ cards }) {
               ref={modalRef}>
               <div className="modal-content flex flex-col">
                 {modalHeader}
-                <div className="md-wrapper overflow-y-auto scrollbar-thin scrollbar-track-gray-100 scrollbar-thumb-gray-300 dark:bg-gray-700  dark:text-gray-50 dark:shadow-none">
+                <div className="md-wrapper overflow-y-auto scrollbar-thin scrollbar-track-gray-100 scrollbar-thumb-gray-300 dark:bg-gray-700 dark:text-gray-50 dark:shadow-none">
                   {meetinNotesMD}
                 </div>
               </div>

src/components/layout/HeroHeader/index.tsx

@@ -6,13 +6,6 @@ import DropdownButton from '@site/src/components/utilities/DropdownButton';
 import Link from '@site/src/components/utilities/Link';
 import WaveBorder from '@site/src/components/shapes/WaveBorder';
 import operatingSystemData from './installOptions';
-type InstallOptionProps = Card & {
-  icon: string;
-  option?: React.ReactNode;
-  path: string;
-  third?: { title: string; subtitle: string; icon: string; path: string };
-  other?: { path: string; text: string; subtext: string };
-};
 
 const detectOperatingSystem = () => {
   const userAgent = window.navigator.userAgent.toLowerCase().split(' ');

src/components/layout/HeroHeader/installOptions.ts

@@ -2,7 +2,7 @@ import { LATEST_VERSION, LATEST_DESKTOP_VERSION } from '@site/static/data/global
 const operatingSystemData = [
   {
     id: 'windows',
-    preferred:{
+    preferred: {
       title: 'Podman Desktop for Windows',
       subtitle: `Windows Installer v-${LATEST_DESKTOP_VERSION}`,
       icon: 'fa-brands:windows',
@@ -39,7 +39,7 @@ const operatingSystemData = [
     },
     alt: {
       title: 'Podman CLI for macOS',
-      subtitle: `CLI only ARM64 installer`,
+      subtitle: 'CLI only ARM64 installer',
       icon: 'material-symbols:terminal-rounded',
       path: `https://github.com/podman-container-tools/podman/releases/download/v${LATEST_VERSION}/podman-installer-macos-arm64.pkg`,
     },
@@ -54,7 +54,7 @@ const operatingSystemData = [
       title: 'Podman CLI for Linux',
       subtitle: `Podman Engine v${LATEST_VERSION}`,
       icon: 'material-symbols:terminal-rounded',
-      path: `docs/installation#installing-on-linux`,
+      path: 'docs/installation#installing-on-linux',
     },
     alt: {
       title: 'Podman Desktop for Linux',