@tinloof/sanity-kit

Components and utils to extend Sanity

---

@tinloof/sanity-kit/navigator

Pages navigator to use in the new Presentation framework as "unstable_navigator".

This plugin is in beta

---

Required dependencies and minimum versions

"react": "^18.2.0",
"react-dom": "^18.2.0",
"sanity": "^3.23.1"
"@sanity/overlays": "^2.3.0",
"@sanity/react-loader": "^1.6.4",
"@sanity/vision": "^3.23.1",

Note: The package is meant to be used with projects that use the new fetching system of loaders and overlays that is compatinble with presentation. Read more here →

This is the official Next.js starter from Sanity that uses this new updated system for reference

---

Getting started

Install

npm i @tinloof/sanity-kit

Wrap your Studio with NavigatorProvider

'use client'

import { NavigatorProvider } from  '@tinloof/sanity-kit/navigator'
import { NextStudio } from  'next-sanity/studio'

export  default  function  Studio() {
    return (
      <NavigatorProvider>
        <NextStudio  config={config}  />
      </NavigatorProvider>
  )
}

In your Sanity folder, wherever you keep your Sanity related config and files, create a React component called PagesNavigator (you can actually call it whatever you prefer, this is simply a suggested name becasue of how will be shown later in these instructions)

Start by importing the Navigator and all the needed hooks from the plugin

import Navigator, {
    ThemeProvider,
    useNavigator,
    useSanityFetch,
    useUpdateTree
} from '@tinloof/sanity-kit/navigator'

At this point you will need to import a query to fetch your pages and an array of locales (if you use multi locales, it is not required).

import { pagesRoutesQuery } from '@/sanity/lib/queries'
import locales from '@/sanity/schemas/locales'

To work with the Navigator, pages need to have these fields as required

_id:  string → // Sanity _id
_type:  string → // e.g "page" or "home" for home page singleton without slug
_updatedAt:  string → // From Sanity
_createdAt:  string → // From Sanity
title:  string → // Page title
routePath:  string → // Slug field from Sanity

While the locales array should look like this (if you are using locales); it goes without sayng that these locales should be reflecting and mirroring your locales in Sanity

[
    { title:  'English', value:  'en' },
    { title:  'French', value:  'fr' },
    { title:  'Spanish', value:  'es' },
]

Once these are setup, you can start composing your PagesNavigator

// ...imports from before

export  default  function  PagesNavigator() {
    const { items, locale } =  useNavigator()

    const  availableLocales  =  locales

    // Custom hook to fetch data: add your query and its variables
    const [data, loading] =  useSanityFetch({
      query:  pagesRoutesQuery,
      variables: {
        types: ['page', 'home'],
        locale:  !!locale  ?  locale  :  availableLocales[0].value,
      },
    })

    // This hook takes care of creating a tree with nested url segments pages
    useUpdateTree(data)

  function renderPages() {
    if(items.length) {
      return <Navigator.List  items={items} />
    } else {
      <Navigator.EmptySearchResults />
    }
  }

    return (
      <ThemeProvider>
            <Navigator.Header title="Pages Navigator">
                <Navigator.SearchBox />
                {availableLocales.length ? (
                    <Navigator.LocaleSelect locales={availableLocales} />
                ) : null}
            </Navigator.Header>

            {loading ? <Navigator.SkeletonListItems items={40} /> : null}

            {renderPages()}
      </ThemeProvider>
    )
}

At this point all is left is to go to your sanity.config.ts and add the PagesNavigator as unstable_component in your presentationTool plugin

import PagesNavigator from "./sanity/components/PagesNavigator";

export default defineConfig({
    // ...
    plugins: [
      // ...
      presentationTool({
        previewUrl: {
          origin:
            typeof  location  ===  "undefined"
            ?  "http://localhost:3000"
            :  location.origin,
          draftMode: {
            enable:  "/api/draft",
          },
      },
        components: {
          unstable_navigator: {
            component: PagesNavigator,
            minWidth: 360,
            maxWidth: 480,
          },
        },
      }),
      // ...
    ],
});

Once all is in plance you should be able to see your pages and navigate through them easily.

---