IAdd stripes, isolate to fix z-index issues

Author: hasparus

src/app/(main)/layout.tsx

@@ -18,7 +18,9 @@ export default function MainLayout({
       <ThemeProvider attribute="class">
         <MenuProvider>
           <Navbar items={topLevelNavbarItems} />
-          <div className="bg-neu-0 text-neu-900 antialiased">{children}</div>
+          <div className="isolate bg-neu-0 text-neu-900 antialiased">
+            {children}
+          </div>
           <Footer />
         </MenuProvider>
       </ThemeProvider>

src/app/conf/_design-system/utils/arrows-move-sideways.tsx

@@ -12,7 +12,6 @@ export function arrowsMoveSideways(event: React.KeyboardEvent<HTMLElement>) {
 
   if (event.key === "ArrowDown" || event.key === "ArrowUp") {
     const vertical = event.currentTarget.dataset.vertical
-    console.log({ vertical })
     repeat = vertical ? parseInt(vertical) : 1
   }
 

src/app/not-found.tsx

@@ -3,13 +3,16 @@
 import { usePathname } from "next/navigation"
 import { useMounted } from "nextra/hooks"
 
+import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
+import stripesMask from "@/components/404-page/image.webp"
+
 import { Button } from "./conf/_design-system/button"
 import MainLayout from "./(main)/layout"
 
 import "@/globals.css"
 import "@/app/colors.css"
 
-export default function Page() {
+export default function NotFoundPage() {
   const pathname = usePathname()
   const mounted = useMounted()
 
@@ -29,22 +32,51 @@ export default function Page() {
 
   return (
     <MainLayout>
-      <div className="flex h-[500px] flex-col items-center justify-center gap-8 bg-neu-0 font-sans lg:h-[600px] lg:gap-10">
-        <FourOhFourIcon className="text-pri-base" />
-        <h1 className="text-4xl text-neu-900">Page not found</h1>
-        <div className="flex gap-4 max-sm:flex-col">
-          <Button variant="primary" href={url}>
-            Submit an issue about broken link
-          </Button>
-          <Button variant="secondary" href="/">
-            Go back home
-          </Button>
+      <style>{".nextra-nav-container.sticky { position: fixed }"}</style>
+      <div className="relative">
+        <Stripes />
+        <div className="relative z-10 flex h-[500px] flex-col items-center justify-center gap-8 pt-[--nextra-navbar-height] font-sans lg:h-[600px] lg:gap-10">
+          <FourOhFourIcon className="text-pri-base" />
+          <h1 className="text-4xl text-neu-900">Page not found</h1>
+          <div className="flex gap-4 max-sm:flex-col">
+            <Button variant="primary" href={url}>
+              Submit an issue about broken link
+            </Button>
+            <Button variant="secondary" href="/">
+              Go back home
+            </Button>
+          </div>
         </div>
       </div>
     </MainLayout>
   )
 }
 
+function Stripes() {
+  return (
+    <div
+      aria-hidden
+      className="pointer-events-none absolute inset-0"
+      style={{
+        maskImage: `url(${stripesMask.src})`,
+        WebkitMaskImage: `url(${stripesMask.src})`,
+        maskRepeat: "no-repeat",
+        WebkitMaskRepeat: "no-repeat",
+        maskPosition: "center 100%",
+        WebkitMaskPosition: "center 100%",
+        maskSize: "160%",
+        WebkitMaskSize: "160%",
+      }}
+    >
+      <StripesDecoration
+        stripeWidth="8px"
+        evenClassName="bg-[linear-gradient(180deg,hsl(var(--color-pri-light)/.4)_0%,hsl(var(--color-neu-0)/.2)_100%)] dark:bg-[linear-gradient(180deg,hsl(var(--color-pri-dark)/0.6)_0%,hsl(var(--color-pri-darker)/0.3)_100%)]"
+        oddClassName="bg-[linear-gradient(180deg,hsl(var(--color-neu-0))_0%,hsl(var(--color-neu-0)/0)_100%)] dark:bg-[linear-gradient(180deg,hsl(var(--color-sec-dark)/0.4)_0%,transparent_100%)]"
+      />
+    </div>
+  )
+}
+
 function FourOhFourIcon({ className }: { className?: string }) {
   return (
     <svg

src/components/footer/index.tsx

@@ -112,7 +112,7 @@ const HAS_CONFERENCE_BOX = true
 
 export function Footer() {
   return (
-    <footer className="relative !bg-neu-100 text-neu-900 dark:!bg-neu-0 max-md:px-0 max-md:pt-0">
+    <footer className="relative isolate !bg-neu-100 text-neu-900 dark:!bg-neu-0 max-md:px-0 max-md:pt-0">
       <Stripes />
 
       <div className="mx-auto max-w-[120rem] border-neu-400 dark:border-neu-100 3xl:border-x 3xl:dark:border-t">

src/components/index-page/index.tsx

@@ -21,8 +21,8 @@ export function IndexPage() {
           name="description"
           content="GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data."
         />
-        <style>{".nextra-nav-container.sticky { position: fixed }"}</style>
       </Head>
+
       <Hero />
       <TrustedBy />
       <WhatIsGraphQL />
@@ -35,6 +35,7 @@ export function IndexPage() {
       <UseCases />
       <QuotesFromTheIndustry />
       <JoinTheCommunity />
+      <style>{".nextra-nav-container.sticky { position: fixed }"}</style>
     </div>
   )
 }

src/components/navbar/top-level-items.tsx

@@ -39,7 +39,7 @@ export function normalizeMetaToItems(meta: Record<string, any>, route = "/") {
   )
 
   const result = normalizePages({
-    list: pageMapItems,
+    list: [{ data: meta }, ...pageMapItems],
     route,
   })
 

src/components/search.tsx

@@ -126,7 +126,7 @@ export function Search({
       // Calling before navigation so selector `html:not(:has(*:focus))` in styles.css will work,
       // and we'll have padding top since input is not focused
       inputRef.current?.blur()
-      await router.push(searchResult.route)
+      await router?.push(searchResult.route)
       // Clear input after navigation completes
       setMenu(false)
       onChange("")