Upgrade Dependencies and Versions, and Remove Storybook

.devcontainer/devcontainer.json

@@ -1,6 +1,6 @@
 {
   "name": "RockyLinux.org",
-  "image": "mcr.microsoft.com/devcontainers/typescript-node:0-20",
+  "image": "mcr.microsoft.com/devcontainers/typescript-node:1-20",
 
   // Use 'forwardPorts' to make a list of ports inside the container available locally.
   // "forwardPorts": [],

app/[locale]/Hero.tsx

@@ -4,6 +4,7 @@ import DpgLogo from "@/components/otherLogosIcons/DpgLogo";
 
 import { Button } from "@/components/ui/button";
 import React from "react";
+import Link from "next/link";
 
 const Hero = () => {
   const t = useTranslations("home.hero");
@@ -23,25 +24,25 @@ const Hero = () => {
             </h1>
             <p className="mt-6 text-lg leading-8">{t("description")}</p>
             <div className="mt-10 flex items-center justify-center gap-x-6">
-              <a href="/download">
+              <Link href="/download">
                 <Button className="p-5">{tGlobal("download")}</Button>
-              </a>
-              <a href="https://docs.rockylinux.org/guides/migrate2rocky/">
+              </Link>
+              <Link href="https://docs.rockylinux.org/guides/migrate2rocky/">
                 <Button
                   variant="secondary"
                   className="p-5"
                 >
                   {t("migrate")}
                 </Button>
-              </a>
+              </Link>
             </div>
-            <a
+            <Link
               href="https://digitalpublicgoods.net/"
               target="_blank"
             >
               <DpgLogo />
               <p className="text-md font-display mt-2">{t("dpg")}</p>
-            </a>
+            </Link>
           </div>
           <div className="mt-16 flow-root sm:mt-24">
             <div className="-m-2 rounded-xl bg-slate-900/5 dark:bg-slate-100/5 p-2 ring-1 ring-inset ring-slate-900/10 dark:ring-slate-100/10 lg:-m-4 lg:rounded-2xl lg:p-4">

app/[locale]/about/[slug]/page.tsx

@@ -6,7 +6,7 @@ export type Params = {
 };
 
 export type Props = {
-  params: Params;
+  params: Promise<Params>;
 };
 
 export type pageData = {
@@ -16,7 +16,7 @@ export type pageData = {
 };
 
 export async function generateMetadata({ params }: Props) {
-  const slug = params.slug;
+  const { slug } = await params;
 
   if (!(await checkIfSlugIsValid(slug))) {
     return {
@@ -32,7 +32,7 @@ export async function generateMetadata({ params }: Props) {
 }
 
 export default async function Page({ params }: Props) {
-  const slug = params.slug;
+  const { slug } = await params;
 
   if (!(await checkIfSlugIsValid(slug))) {
     notFound();

app/[locale]/community/components/QuizInterestTypes.ts

@@ -1,40 +1,40 @@
-import { JSXElementConstructor, ReactElement, ReactNodeArray } from "react";
+import { JSXElementConstructor, ReactElement, ReactNode } from "react";
 
 export interface QuizInterests {
   chatting: string;
   chattingDescription:
     | string
     | ReactElement<any, string | JSXElementConstructor<any>>
-    | ReactNodeArray;
+    | ReactNode;
   bugs: string;
   bugsDescription:
     | string
     | ReactElement<any, string | JSXElementConstructor<any>>
-    | ReactNodeArray;
+    | ReactNode;
   webdev: string;
   webDevDescription:
     | string
     | ReactElement<any, string | JSXElementConstructor<any>>
-    | ReactNodeArray;
+    | ReactNode;
   graphics: string;
   graphicsDescription:
     | string
     | ReactElement<any, string | JSXElementConstructor<any>>
-    | ReactNodeArray;
+    | ReactNode;
   release: string;
   releaseDescription:
     | string
     | ReactElement<any, string | JSXElementConstructor<any>>
-    | ReactNodeArray;
+    | ReactNode;
   sig: string;
   sigDescription:
     | string
     | ReactElement<any, string | JSXElementConstructor<any>>
-    | ReactNodeArray;
+    | ReactNode;
   docs: string;
   docsDescription:
     | string
     | ReactElement<any, string | JSXElementConstructor<any>>
-    | ReactNodeArray;
+    | ReactNode;
   noSelection: string;
 }

app/[locale]/components/header/MobileNavigation.tsx

@@ -19,6 +19,7 @@ import NavListItem from "./nav/mobile/NavListItem";
 import { HamburgerMenuIcon } from "@radix-ui/react-icons";
 
 import type { NavigationMenuItems } from "./NavigationTypes";
+import Link from "next/link";
 
 export interface MobileNavigationProps {
   darkModeSRText: string;
@@ -55,10 +56,10 @@ const MobileNavigation = ({
           side="right"
           className="w-full"
         >
-          <a href="/">
+          <Link href="/">
             <Logo />
             <span className="sr-only">{rockyLinuxSRText}</span>
-          </a>
+          </Link>
           <Accordion
             type="single"
             collapsible
@@ -141,11 +142,11 @@ const MobileNavigation = ({
             </NavList>
           </Accordion>
           <div className="mt-auto">
-            <a href="/download">
+            <Link href="/download">
               <SheetClose asChild>
                 <Button className="p-5 w-full mt-4">{downloadSRText}</Button>
               </SheetClose>
-            </a>
+            </Link>
           </div>
         </SheetContent>
       </Sheet>

app/[locale]/components/header/nav/desktop/NavListItem.tsx

@@ -15,7 +15,7 @@ const NavListItem = ({ title, href }: NavListItemProps) => {
     >
       <a
         className={cn(
-          "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+          "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-hidden transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
         )}
       >
         <div className="text-sm font-medium leading-none">{title}</div>