perf: perfomance imporvemnets and navbar links fixed

Navigation links in the navbar not working on mobile
a0v0 · May 12, 2024 · a853842 · a853842
2 parents cef1506 + 5d7a3bb
commit a853842
Show file tree

Hide file tree

Showing 22 changed files with 175 additions and 182 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -12,7 +12,7 @@ import {__PROD__} from "@/utils";
 import {getPathnameFromMetadataState} from "@/utils/links";
 import {clsx} from "@nextui-org/shared-utils";
 import {Analytics} from "@vercel/analytics/react";
-import {Metadata} from "next";
+import {Metadata, Viewport} from "next";
 import {Providers} from "./providers";
 
 export async function generateMetadata(_: any, state: any): Promise<Metadata> {
@@ -34,10 +34,7 @@ export async function generateMetadata(_: any, state: any): Promise<Metadata> {
     title: title,
     description: description,
     keywords: siteConfig.keywords,
-    themeColor: [
-      {media: "(prefers-color-scheme: light)", color: "white"},
-      {media: "(prefers-color-scheme: dark)", color: "black"},
-    ],
+
     icons: {
       icon: "/favicon.ico",
     },
@@ -49,11 +46,18 @@ export async function generateMetadata(_: any, state: any): Promise<Metadata> {
         "application/rss+xml": [{url: "https://avtoolz.com/feed.xml", title: "aVToolz RSS Feed"}],
       },
     },
-    viewport:
-      "viewport-fit=cover, width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0",
   };
 }
-
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+  themeColor: [
+    {media: "(prefers-color-scheme: light)", color: "white"},
+    {media: "(prefers-color-scheme: dark)", color: "black"},
+  ],
+};
 export default function RootLayout({children}: {children: React.ReactNode}) {
   return (
     <html suppressHydrationWarning dir="ltr" lang="en">

diff --git a/app/page.tsx b/app/page.tsx
@@ -5,7 +5,7 @@ import {ToolsCards} from "@/components/tools";
 export default async function Home() {
   return (
     <main className="container mx-auto max-w-7xl px-6 flex-grow">
-      <section className="flex flex-col items-center justify-center">
+      <section className="flex flex-col items-center ">
         <BackgroundEffects />
         <HeroX />
         <ToolsCards />

diff --git a/app/tools/page.tsx b/app/tools/page.tsx
@@ -1,24 +1,23 @@
-import {FeaturesGrid} from "@/components/marketing/features-grid";
+import {ToolsGrid} from "@/components/marketing/features-grid";
 import {Tools} from "@/config/tools";
 
 function page() {
   return (
     // TODO: add a mini navbar to search, sort and filter tools
-    <>
-      <main className="container mx-auto max-w-7xl px-6 flex-grow mt-10">
-        <section className="flex flex-col items-center justify-center">
-          <FeaturesGrid
-            classNames={{
-              base: "lg:grid-cols-3",
-              iconWrapper: "bg-transparent",
-              header: "pt-2",
-              body: "pt-0 pb-2",
-            }}
-            features={Tools}
-          />
-        </section>
-      </main>
-    </>
+
+    <main className="container mx-auto max-w-7xl px-6 flex-grow mt-10">
+      <section className="flex flex-col items-center justify-center">
+        <ToolsGrid
+          classNames={{
+            base: "lg:grid-cols-3",
+            iconWrapper: "bg-transparent",
+            header: "pt-2",
+            body: "pt-0 pb-2",
+          }}
+          features={Tools}
+        />
+      </section>
+    </main>
   );
 }
 

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -6,7 +6,6 @@ import {GithubIcon, Logo, SearchLinearIcon} from "@/components/icons";
 import {routes as manifest} from "@/config/routes";
 import {siteConfig} from "@/config/site";
 import {Route} from "@/libs/docs/page";
-import {trackEvent} from "@/utils/va";
 import {
   Button,
   Dropdown,
@@ -26,7 +25,7 @@ import {
 import {ChevronDown} from "@nextui-org/shared-icons";
 import {clsx} from "@nextui-org/shared-utils";
 import {isAppleDevice} from "@react-aria/utils";
-import {usePathname} from "next/navigation";
+import {usePathname, useRouter} from "next/navigation";
 import {FC, useEffect, useRef, useState} from "react";
 
 export interface NavbarProps {
@@ -37,11 +36,9 @@ export interface NavbarProps {
 export const Navbar: FC<NavbarProps> = ({routes, slug, tag}) => {
   const [isMenuOpen, setIsMenuOpen] = useState<boolean | undefined>(false);
   const [commandKey, setCommandKey] = useState<"ctrl" | "command">("command");
-
+  const router = useRouter();
   const ref = useRef<HTMLElement>(null);
-
   const pathname = usePathname();
-
   const cmdkStore = useCmdkStore();
 
   useEffect(() => {
@@ -56,11 +53,6 @@ export const Navbar: FC<NavbarProps> = ({routes, slug, tag}) => {
 
   const handleOpenCmdk = () => {
     cmdkStore.onOpen();
-    trackEvent("Navbar - Search", {
-      name: "navbar - search",
-      action: "press",
-      category: "cmdk",
-    });
   };
 
   const searchButton = (
@@ -85,10 +77,6 @@ export const Navbar: FC<NavbarProps> = ({routes, slug, tag}) => {
     </Button>
   );
 
-  if (pathname.includes("/examples")) {
-    return null;
-  }
-
   return (
     <NextUINavbar
       ref={ref}
@@ -118,7 +106,7 @@ export const Navbar: FC<NavbarProps> = ({routes, slug, tag}) => {
       </NavbarContent>
       <NavbarContent className="hidden sm:flex gap-4" justify="start">
         <NavbarItem>
-          <Link isBlock color="foreground" href={"/tools"}>
+          <Link isBlock color="foreground" href="/tools">
             All Tools
           </Link>
         </NavbarItem>
@@ -146,7 +134,11 @@ export const Navbar: FC<NavbarProps> = ({routes, slug, tag}) => {
                 }}
               >
                 {category.routes.map((tool, index) => (
-                  <DropdownItem href={tool.href} key={index} startContent={tool.icon}>
+                  <DropdownItem
+                    onPress={() => router.push(tool.href)}
+                    key={index}
+                    startContent={tool.icon}
+                  >
                     {tool.title}
                   </DropdownItem>
                 ))}
@@ -207,25 +199,32 @@ export const Navbar: FC<NavbarProps> = ({routes, slug, tag}) => {
       </NavbarContent>
 
       <NavbarMenu>
-        <div className="ml-3">
-          <NavbarItem>
-            <Link color="success" isBlock href="/tools">
-              All Tools
-            </Link>
-          </NavbarItem>
+        <NavbarItem>
+          <Link color="success" isBlock href="/tools">
+            All Tools
+          </Link>
           <Spacer y={2} />
-          <NavbarItem>
-            <Link
-              isBlock
-              color="success"
-              isExternal
-              href={siteConfig.links.githubRoadmap}
-              showAnchorIcon
-            >
-              Roadmap
-            </Link>
-          </NavbarItem>
-        </div>
+          <Link
+            isBlock
+            color="success"
+            isExternal
+            href={siteConfig.links.githubRoadmap}
+            showAnchorIcon
+          >
+            Roadmap
+          </Link>
+          <Spacer y={2} />
+          <Link
+            isExternal
+            isBlock
+            showAnchorIcon
+            href={siteConfig.links.githubIssues}
+            color="danger"
+          >
+            Report Bugs
+          </Link>
+        </NavbarItem>
+
         <DocsSidebar className="mt-t" routes={[...routes]} slug={slug} tag={tag} />
       </NavbarMenu>
     </NextUINavbar>

diff --git a/components/blog/nextjs-templates.tsx b/components/blog/nextjs-templates.tsx
@@ -1,5 +1,5 @@
 import {NewNextJSIcon} from "@/components/icons";
-import {FeaturesGrid} from "@/components/marketing/features-grid";
+import {ToolsGrid} from "@/components/marketing/features-grid";
 
 const frameworks = [
   {
@@ -22,7 +22,7 @@ const frameworks = [
 
 export const NextJsTemplates = () => {
   return (
-    <FeaturesGrid
+    <ToolsGrid
       classNames={{
         base: "mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4",
         iconWrapper: "bg-default-300/20",

diff --git a/components/cmdk.tsx b/components/cmdk.tsx
@@ -332,7 +332,7 @@ export const Cmdk: FC<{}> = () => {
 
       return (
         <Command.Item
-          key={item.objectID}
+          key={`${item}-${index}`}
           ref={menuNodes.ref(index)}
           className={slots.itemWrapper()}
           data-active={index === activeItem}
@@ -350,7 +350,7 @@ export const Cmdk: FC<{}> = () => {
             onItemSelect(item);
           }}
         >
-          <div key={item.objectID} className={slots.leftWrapper()}>
+          <div key={`${item}-${index}`} className={slots.leftWrapper()}>
             {mainIcon}
             <div className={slots.itemContent()}>
               {!isLvl1 && <span className={slots.itemParentTitle()}>{item.hierarchy.lvl1}</span>}

diff --git a/components/docs/components/community.tsx b/components/docs/components/community.tsx
@@ -1,10 +1,10 @@
-import {FeaturesGrid} from "@/components/marketing/features-grid";
+import {ToolsGrid} from "@/components/marketing/features-grid";
 import {communityAccounts} from "@/libs/constants";
 
 export const Community = () => {
   return (
     <div className="max-w-4xl flex flex-col gap-8">
-      <FeaturesGrid
+      <ToolsGrid
         classNames={{
           base: "lg:grid-cols-3",
           iconWrapper: "bg-transparent",

diff --git a/components/docs/components/frameworks.tsx b/components/docs/components/frameworks.tsx
@@ -1,5 +1,5 @@
-import {NewNextJSIcon, ViteIcon, RemixIcon, AstroIcon} from "@/components/icons";
-import {FeaturesGrid} from "@/components/marketing/features-grid";
+import {AstroIcon, NewNextJSIcon, RemixIcon, ViteIcon} from "@/components/icons";
+import {ToolsGrid} from "@/components/marketing/features-grid";
 
 const frameworks = [
   {
@@ -30,7 +30,7 @@ const frameworks = [
 
 export const Frameworks = () => {
   return (
-    <FeaturesGrid
+    <ToolsGrid
       classNames={{
         base: "mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4",
         iconWrapper: "bg-default-300/20",

diff --git a/components/docs/sidebar.tsx b/components/docs/sidebar.tsx
@@ -1,23 +1,23 @@
 "use client";
 
-import {FC} from "react";
-import {ChevronIcon} from "@nextui-org/shared-icons";
-import {CollectionBase, Expandable, MultipleSelection, Node, ItemProps} from "@react-types/shared";
 import {BaseItem} from "@nextui-org/aria-utils";
-import React, {useRef, useMemo} from "react";
-import {useFocusRing} from "@react-aria/focus";
-import {TreeState, useTreeState} from "@react-stately/tree";
-import {useSelectableCollection} from "@react-aria/selection";
-import {usePress} from "@react-aria/interactions";
-import {clsx, dataAttr} from "@nextui-org/shared-utils";
 import {
-  SpacerProps,
-  Spacer,
-  Link as NextUILink,
   Chip,
   dataFocusVisibleClasses,
+  Link,
+  Link as NextUILink,
+  Spacer,
+  SpacerProps,
 } from "@nextui-org/react";
-import Link from "next/link";
+import {ChevronIcon} from "@nextui-org/shared-icons";
+import {clsx, dataAttr} from "@nextui-org/shared-utils";
+import {useFocusRing} from "@react-aria/focus";
+import {usePress} from "@react-aria/interactions";
+import {useSelectableCollection} from "@react-aria/selection";
+import {TreeState, useTreeState} from "@react-stately/tree";
+import {CollectionBase, Expandable, ItemProps, MultipleSelection, Node} from "@react-types/shared";
+import {FC, useMemo, useRef} from "react";
+
 import {isEmpty} from "lodash";
 import {usePathname, useRouter} from "next/navigation";
 

diff --git a/components/footer.tsx b/components/footer.tsx
@@ -1,18 +1,10 @@
 "use client";
 
-import {usePathname} from "next/navigation";
-
 import {Link} from "@nextui-org/react";
 import {SmilingFaceWithHeartsEmoji} from "./icons/fluentui-emoji";
 import {title} from "./primitives";
 
 export const Footer = () => {
-  const pathname = usePathname();
-
-  if (pathname.includes("/examples")) {
-    return null;
-  }
-
   return (
     <footer className="w-full flex gap-1 items-center justify-center py-3 text-current">
       Crafted with <SmilingFaceWithHeartsEmoji className="inline" size={20} /> on{" "}

diff --git a/components/hero.tsx b/components/hero.tsx
@@ -6,33 +6,31 @@ import {subtitle, title} from "./primitives";
 
 function HeroX() {
   return (
-    <section className="flex flex-col gap-4 overflow-hidden lg:overflow-visible w-full flex-nowrap justify-between items-center h-[calc(100vh_-_64px)] 2xl:h-[calc(84vh_-_64px)]">
-      <div className="inline-block  text-center justify-center">
-        <center>
-          <Logo />
-        </center>
-        <h1 className={title()}>Your Online&nbsp;</h1>
-        <br />
-        <h1 className={title({color: "green"})}>Utitlity Toolbox&nbsp;</h1>
-        <h2
-          className={subtitle({
-            fullWidth: true,
-            class: "text-center",
-          })}
-        >
-          Fast, beautiful and modern tools for everyone.
-        </h2>
-        <Button
-          as={Link}
-          endContent={<ArrowRightIcon />}
-          color="success"
-          href="/tools"
-          variant="ghost"
-        >
-          Browse All
-        </Button>
-      </div>
-    </section>
+    <main id="checl" className="h-screen text-center  mt-24">
+      <center>
+        <Logo />
+      </center>
+      <h1 className={title()}>Your Online&nbsp;</h1>
+      <br />
+      <h1 className={title({color: "green"})}>Utitlity Toolbox&nbsp;</h1>
+      <h2
+        className={subtitle({
+          fullWidth: true,
+          class: "text-center",
+        })}
+      >
+        Fast, beautiful and modern tools for everyone.
+      </h2>
+      <Button
+        as={Link}
+        endContent={<ArrowRightIcon />}
+        color="success"
+        variant="ghost"
+        href="/tools"
+      >
+        Browse All
+      </Button>
+    </main>
   );
 }