Use activePath to render breadcrumbs properly

Author: hasparus

src/_design-system/breadcrumbs.tsx

@@ -1,7 +1,6 @@
 import { Fragment } from "react"
 import { clsx } from "clsx"
 import NextLink from "next/link"
-import { ArrowRightIcon } from "nextra/icons"
 import type { Item } from "nextra/normalize-pages"
 
 import CaretDown from "@/app/conf/_design-system/pixelarticons/caret-down.svg?svgr"
@@ -37,7 +36,7 @@ export const Breadcrumbs = ({
         const className = clsx(
           "truncate text-neu-700 dark:text-neu-400 min-w-6 last:text-neu-800 dark:last:text-neu-800 leading-none",
           href &&
-            "focus-visible:gql-focus-visible ring-inset hover:text-neu-900 hover:underline",
+            "focus-visible:gql-focus-visible ring-inset hover:text-neu-900 hover:underline underline-offset-2",
         )
 
         return (
@@ -46,7 +45,12 @@ export const Breadcrumbs = ({
               <CaretDown className="size-4 translate-x-[0.5px] -rotate-90" />
             )}
             {href ? (
-              <NextLink href={href} title={title} prefetch={false}>
+              <NextLink
+                href={href}
+                title={title}
+                prefetch={false}
+                className={className}
+              >
                 {item.title}
               </NextLink>
             ) : (

src/components/tools-and-libraries.tsx

@@ -16,13 +16,14 @@ import Markdown from "markdown-to-jsx"
 import { evaluate } from "nextra/components"
 import { useCallback, useState, MouseEvent, useMemo, memo } from "react"
 import { clsx } from "clsx"
-import { Collapse, getComponents } from "nextra-theme-docs"
+import { Collapse, getComponents, useConfig } from "nextra-theme-docs"
 import { RadioGroup, Radio } from "@/components/radio"
 import { Button } from "@/app/conf/_design-system/button"
 import { Tag } from "@/app/conf/_design-system/tag"
 import SearchIcon from "@/app/conf/_design-system/pixelarticons/search.svg?svgr"
 import CaretDown from "@/app/conf/_design-system/pixelarticons/caret-down.svg?svgr"
 import { SidebarFooter } from "./sidebar"
+import { Breadcrumbs } from "../_design-system/breadcrumbs"
 
 type PackageInfo = {
   name: string
@@ -60,6 +61,7 @@ export function CodePage({ allTags, data }: CodePageProps) {
     [],
   )
 
+  const { activePath } = useConfig().normalizePagesResult
   const [searchParams, setSearchParams] = useSearchParamsState()
   const [search, setSearch] = useState("")
   const normalizedSearch = useMemo(() => search.trim().toLowerCase(), [search])
@@ -88,21 +90,6 @@ export function CodePage({ allTags, data }: CodePageProps) {
     [setSearchParams],
   )
 
-  const handleQuery = useCallback(
-    (e: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => {
-      e.preventDefault()
-      const tag = e.currentTarget.dataset.tag!
-
-      updateTags(prevTags => {
-        if (prevTags.includes(tag)) {
-          return prevTags.filter(t => t !== tag)
-        }
-        return [...prevTags, tag]
-      })
-    },
-    [updateTags],
-  )
-
   const mounted = useMounted()
 
   const { newData, tagCounts } = useMemo(() => {
@@ -312,7 +299,6 @@ export function CodePage({ allTags, data }: CodePageProps) {
   }, [selectedTags, allTagsMap])
 
   const [sort, setSort] = useState("popularity")
-  const [isCollapsing, setIsCollapsing] = useState(false)
 
   let description = `A collection of tools and libraries for GraphQL`
   let title = "Tools and Libraries | GraphQL"
@@ -336,6 +322,7 @@ export function CodePage({ allTags, data }: CodePageProps) {
         />
       </NextHead>
       <div className="gql-container gql-section pb-8">
+        <Breadcrumbs className="" activePath={activePath} />
         <div className="relative mt-8 flex md:gap-8">
           <aside>
             <Collapse horizontal isOpen={showSidebar}>

src/pages/community/_meta.ts

@@ -1,10 +1,10 @@
 export default {
+  resources: "Resources",
   "tools-and-libraries": {
     theme: {
       layout: "raw",
     },
   },
-  resources: "Resources",
   events: "",
   contribute: "Contribute to GraphQL",
   foundation: "Foundation",