From 5ebccf860efc6dae8dea1daf5b27367cc278414d Mon Sep 17 00:00:00 2001 From: aV <62926341+a0v0@users.noreply.github.com> Date: Sun, 12 May 2024 19:58:08 +0530 Subject: [PATCH 1/4] Navigation links in the navbar not working on mobile Fixes #62 --- app/layout.tsx | 4 +-- components/Navbar.tsx | 59 ++++++++++++++++++------------------------- utils/links.ts | 2 ++ 3 files changed, 29 insertions(+), 36 deletions(-) diff --git a/app/layout.tsx b/app/layout.tsx index 0ad04339..f2b4a574 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -49,8 +49,8 @@ export async function generateMetadata(_: any, state: any): Promise { "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", + // viewport: + // "viewport-fit=cover, width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0", }; } diff --git a/components/Navbar.tsx b/components/Navbar.tsx index d0c09044..96cffa42 100644 --- 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 = ({routes, slug, tag}) => { const [isMenuOpen, setIsMenuOpen] = useState(false); const [commandKey, setCommandKey] = useState<"ctrl" | "command">("command"); - + const router = useRouter(); const ref = useRef(null); - const pathname = usePathname(); - const cmdkStore = useCmdkStore(); useEffect(() => { @@ -56,11 +53,6 @@ export const Navbar: FC = ({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 = ({routes, slug, tag}) => { ); - if (pathname.includes("/examples")) { - return null; - } - return ( = ({routes, slug, tag}) => { - + All Tools @@ -146,7 +134,11 @@ export const Navbar: FC = ({routes, slug, tag}) => { }} > {category.routes.map((tool, index) => ( - + router.push(tool.href)} + key={index} + startContent={tool.icon} + > {tool.title} ))} @@ -207,25 +199,24 @@ export const Navbar: FC = ({routes, slug, tag}) => { -
- - - All Tools - - + {/*
*/} + + + All Tools + - - - Roadmap - - -
+ + Roadmap + + + + {/*
*/} diff --git a/utils/links.ts b/utils/links.ts index ee9e3ff7..7795da66 100644 --- a/utils/links.ts +++ b/utils/links.ts @@ -1,3 +1,5 @@ +import {useRouter} from "next/navigation"; + export const isActive = (pathname: string | undefined | null, href: string) => pathname && pathname.startsWith(href); From 2dccca51282425465039270e1728a0754c332fd6 Mon Sep 17 00:00:00 2001 From: aV <62926341+a0v0@users.noreply.github.com> Date: Sun, 12 May 2024 20:22:35 +0530 Subject: [PATCH 2/4] perf: improved navigation --- app/layout.tsx | 20 +++++++------ app/tools/page.tsx | 31 ++++++++++---------- components/Navbar.tsx | 12 ++++++-- components/blog/nextjs-templates.tsx | 4 +-- components/cmdk.tsx | 4 +-- components/docs/components/community.tsx | 4 +-- components/docs/components/frameworks.tsx | 6 ++-- components/docs/sidebar.tsx | 26 ++++++++--------- components/hero.tsx | 2 +- components/marketing/a11y-otb.tsx | 32 ++++++++++----------- components/marketing/community.tsx | 14 ++++----- components/marketing/features-grid.tsx | 29 +++++++++---------- components/marketing/install-banner.tsx | 9 +++--- components/marketing/last-but-not-least.tsx | 6 ++-- components/marketing/support.tsx | 12 ++++---- components/tools/tools-cards.tsx | 4 +-- public/manifest.json | 20 ++++++------- 17 files changed, 122 insertions(+), 113 deletions(-) diff --git a/app/layout.tsx b/app/layout.tsx index f2b4a574..11026296 100644 --- 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 { @@ -34,10 +34,7 @@ export async function generateMetadata(_: any, state: any): Promise { 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 { "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 ( diff --git a/app/tools/page.tsx b/app/tools/page.tsx index ef702c6a..c043b366 100644 --- 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 - <> -
-
- -
-
- + +
+
+ +
+
); } diff --git a/components/Navbar.tsx b/components/Navbar.tsx index 96cffa42..33eb719d 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -199,7 +199,6 @@ export const Navbar: FC = ({routes, slug, tag}) => { - {/*
*/} All Tools @@ -214,9 +213,18 @@ export const Navbar: FC = ({routes, slug, tag}) => { > Roadmap + + + Report Bugs + - {/*
*/} diff --git a/components/blog/nextjs-templates.tsx b/components/blog/nextjs-templates.tsx index 1fbc6318..a2b40911 100644 --- 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 ( - = () => { return ( = () => { onItemSelect(item); }} > -
+
{mainIcon}
{!isLvl1 && {item.hierarchy.lvl1}} diff --git a/components/docs/components/community.tsx b/components/docs/components/community.tsx index 63346f18..f21b2bbc 100644 --- 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 (
- { return ( - } color="success" - href="/tools" variant="ghost" + href="/tools" > Browse All diff --git a/components/marketing/a11y-otb.tsx b/components/marketing/a11y-otb.tsx index eafbda9b..94de4d13 100644 --- a/components/marketing/a11y-otb.tsx +++ b/components/marketing/a11y-otb.tsx @@ -3,41 +3,41 @@ /* eslint-disable react/display-name */ import { Button, - Image, - Link as NextUILink, Dropdown, + DropdownItem, + DropdownMenu, DropdownSection, DropdownTrigger, - DropdownMenu, - DropdownItem, + Image, + Link as NextUILink, Tooltip, } from "@nextui-org/react"; -import {useInView} from "framer-motion"; -import {clsx} from "@nextui-org/shared-utils"; import { AddNoteBulkIcon, CopyDocumentBulkIcon, - EditDocumentBulkIcon, DeleteDocumentBulkIcon, + EditDocumentBulkIcon, } from "@nextui-org/shared-icons"; -import Link from "next/link"; +import {clsx} from "@nextui-org/shared-utils"; +import {useInView} from "framer-motion"; import dynamic from "next/dynamic"; +import Link from "next/link"; import {useEffect, useRef, useState} from "react"; -import {FeaturesGrid} from "./features-grid"; +import {ToolsGrid} from "./features-grid"; -import landingContent from "@/content/landing"; import {GradientBox} from "@/components"; import { + EyeBoldIcon, + FatrowsBoldIcon, + InfoBoldIcon, KeyboardBoldIcon, + KeyboardOpenBoldIcon, MouseCircleBoldIcon, SquaresBoldIcon, - FatrowsBoldIcon, - EyeBoldIcon, - KeyboardOpenBoldIcon, - InfoBoldIcon, } from "@/components/icons"; -import {title, subtitle, titleWrapper, sectionWrapper} from "@/components/primitives"; +import {sectionWrapper, subtitle, title, titleWrapper} from "@/components/primitives"; +import landingContent from "@/content/landing"; import {useIsMobile} from "@/hooks/use-media-query"; const DemoCodeModal = dynamic(() => import("../demo-code-modal").then((mod) => mod.DemoCodeModal), { @@ -115,7 +115,7 @@ export const A11yOtb = () => {
- { return ( @@ -15,9 +15,9 @@ export const Community = () => { >
-
+
-

Community

   +

Community

  

{ Get involved in our community. Everyone is welcome!

- ; -export interface Feature extends LinkProps { +export interface Tool extends LinkProps { title: string; icon: ReactNode; description?: string | ReactNode; } -interface FeaturesGridProps { - features: Feature[]; +interface ToolsGridProps { + features: Tool[]; classNames?: SlotsToClasses; } -export const FeaturesGrid: React.FC = ({features, classNames, ...props}) => { +export const ToolsGrid: React.FC = ({features, classNames, ...props}) => { const slots = styles(); return (
- {features.map((feat: Feature) => ( + {features.map((tool: Tool) => ( -
{feat.icon}
-

{feat.title}

- {feat.isExternal && } +
{tool.icon}
+

{tool.title}

+ {tool.isExternal && } - {feat.description ? ( + {tool.description ? (

- {feat.description} + {tool.description}

) : null} diff --git a/components/marketing/install-banner.tsx b/components/marketing/install-banner.tsx index 3fefd170..fe00e38a 100644 --- a/components/marketing/install-banner.tsx +++ b/components/marketing/install-banner.tsx @@ -1,15 +1,14 @@ "use client"; -import {Button, Link} from "@nextui-org/react"; +import {Button, Code, Link} from "@nextui-org/react"; import {ArrowRightIcon} from "@nextui-org/shared-icons"; import {clsx} from "@nextui-org/shared-utils"; import NextLink from "next/link"; -import {Code} from "@nextui-org/react"; -import {FeaturesGrid} from "./features-grid"; +import {ToolsGrid} from "./features-grid"; +import {GithubIcon, NextJsIcon, NoteLinearIcon} from "@/components/icons"; import {sectionWrapper, subtitle, title} from "@/components/primitives"; -import {GithubIcon, NoteLinearIcon, NextJsIcon} from "@/components/icons"; import {useIsMounted} from "@/hooks/use-is-mounted"; import {trackEvent} from "@/utils/va"; @@ -102,7 +101,7 @@ export const InstallBanner = () => {
- { @@ -27,7 +27,7 @@ export const LastButNotLeast = () => { A fully-featured React UI library.

- +
); diff --git a/components/marketing/support.tsx b/components/marketing/support.tsx index 8bce9750..2c3a90d0 100644 --- a/components/marketing/support.tsx +++ b/components/marketing/support.tsx @@ -1,17 +1,17 @@ "use client"; -import {FC, useMemo, useRef} from "react"; import {Avatar, AvatarProps, Button, Spacer, Tooltip} from "@nextui-org/react"; import {clamp, get} from "lodash"; +import {FC, useMemo, useRef} from "react"; -import {sectionWrapper, titleWrapper, title, subtitle} from "../primitives"; +import {sectionWrapper, subtitle, title, titleWrapper} from "../primitives"; -import {FeaturesGrid} from "./features-grid"; +import {ToolsGrid} from "./features-grid"; -import {OpenCollectiveIcon, PatreonIcon, HeartBoldIcon, PlusLinearIcon} from "@/components/icons"; -import {Sponsor, SPONSOR_TIERS, SPONSOR_COLORS, getTier} from "@/libs/docs/sponsors"; +import {HeartBoldIcon, OpenCollectiveIcon, PatreonIcon, PlusLinearIcon} from "@/components/icons"; import {SonarPulse} from "@/components/sonar-pulse"; import {useIsMobile} from "@/hooks/use-media-query"; +import {getTier, Sponsor, SPONSOR_COLORS, SPONSOR_TIERS} from "@/libs/docs/sponsors"; import {trackEvent} from "@/utils/va"; export interface SupportProps { @@ -164,7 +164,7 @@ export const Support: FC = ({sponsors = []}) => { contributions will help to make NextUI better.

- { @@ -29,7 +29,7 @@ export const ToolsCards = () => { # {category.title}
- Date: Sun, 12 May 2024 20:29:55 +0530 Subject: [PATCH 3/4] refactor: remove unused code in Footer component --- components/footer.tsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/components/footer.tsx b/components/footer.tsx index fab559bd..33c53f4a 100644 --- 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 (