Next and next sanity fetching and preview updates

2025-05-14 13:47:49 +00:00 · 2023-08-23 22:44:06 +02:00 · 2023-08-23 22:44:06 +02:00 · ae873b5d3f
commit ae873b5d3f
parent 9cab4ac2c6
20 changed files with 428 additions and 265 deletions
--- a/app/(site)/[locale]/[...slug]/page.tsx
+++ b/app/(site)/[locale]/[...slug]/page.tsx
@ -5,7 +5,6 @@ import ProductPagePreview from '@/components/pages/product-page-preview';
 import SearchPage from '@/components/pages/search-page';
 import SearchPagePreview from '@/components/pages/search-page-preview';
 import SinglePage from '@/components/pages/single-page';
-// import PreviewProvider from '@/components/preview-provider';
 import SinglePagePreview from '@/components/pages/single-page-preview';
 import getQueryFromSlug from '@/helpers/get-query-from-slug';
 import { categoryQuery, pageQuery, productQuery, searchPageQuery } from '@/lib/sanity/queries';
--- a/app/(site)/[locale]/page.tsx
+++ b/app/(site)/[locale]/page.tsx
@ -7,6 +7,8 @@ import { LiveQuery } from 'next-sanity/preview/live-query';
 import { draftMode } from 'next/headers';
 import { notFound } from 'next/navigation';

+export const runtime = 'edge';
+
 export async function generateMetadata({
  params
 }: {
--- a/app/api/preview/route.ts
+++ b/app/api/preview/route.ts
@ -1,5 +1,10 @@
+import { previewSecretId } from '@/lib/sanity/sanity.api'
+import { client } from '@/lib/sanity/sanity.client'
 import { token } from '@/lib/sanity/sanity.fetch'
 import { draftMode } from 'next/headers'
+import { isValidSecret } from 'sanity-plugin-iframe-pane/is-valid-secret'
+
+export const runtime = 'edge'

 export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
@ -14,8 +19,20 @@ export async function GET(request: Request) {
    )
  }

-  if (secret !== process.env.SANITY_API_READ_TOKEN) {
-    return new Response('Invalid token', { status: 401 })
+  if (!secret) {
+    return new Response('Invalid secret', { status: 401 })
+  }
+
+  const authenticatedClient = client.withConfig({ token })
+
+  const validSecret = await isValidSecret(
+    authenticatedClient,
+    previewSecretId,
+    secret,
+  )
+
+  if (!validSecret) {
+    return new Response('Invalid secret', { status: 401 })
  }

  draftMode().enable()
--- a/app/globals.css
+++ b/app/globals.css
@ -36,39 +36,12 @@
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
-
    --radius: 0.5rem;
  }

-  * {
-    @apply border-border;
-  }
-
  ::-moz-selection {
    /* Code for Firefox */
    color: #ffffff;
@ -82,7 +55,7 @@

  html,
  body {
-    @apply h-full bg-white font-sans text-high-contrast;
+    @apply h-full bg-background text-foreground;

    box-sizing: border-box;
    touch-action: manipulation;
@ -91,9 +64,6 @@
    -moz-osx-font-smoothing: grayscale;
    overscroll-behavior-x: none;
  }
-  body {
-    @apply bg-background text-foreground;
-  }
 }

@layer components {
--- a/components/layout/footer/footer.tsx
+++ b/components/layout/footer/footer.tsx
@ -1,5 +1,5 @@
-// import { footerMenusQuery } from '@/lib/sanity/queries';
-// import { getCachedClient } from '@/lib/sanity/sanity.client';
+import Text from '@/components/ui/text/text';
+import { getFooterMenus } from '@/lib/sanity/sanity.fetch';
 import LocaleSwitcher from 'components/ui/locale-switcher/locale-switcher';
 import Logo from 'components/ui/logo/logo';
 import Link from 'next/link';
@ -14,7 +14,7 @@ export default async function Footer({ locale }: FooterProps) {
    locale: locale
  };

-  // const footerMenus = await getCachedClient()(footerMenusQuery, params);
+  const footerMenus = await getFooterMenus(params.locale);

  return (
    <footer className="border-t border-ui-border bg-app">
@ -26,12 +26,14 @@ export default async function Footer({ locale }: FooterProps) {
          <LocaleSwitcher />
        </div>

-        {/* {footerMenus.length > 0 && (
+        {footerMenus && (
          <div className="grid w-full grid-cols-2 gap-4 p-4 lg:grid-cols-4 lg:gap-8 lg:px-8 lg:py-6 2xl:px-16 2xl:py-8">
+            {/* @ts-ignore */}
            {footerMenus.map((menu: object | any, index: number) => {
              return (
                <div key={index}>
                  <Text variant="label">{menu.title}</Text>
+
                  <ul className="mt-4 flex flex-col space-y-2" aria-label={menu.title}>
                    {menu.menu.links.map((link: object | any, index: number) => {
                      return (
@ -60,7 +62,7 @@ export default async function Footer({ locale }: FooterProps) {
              );
            })}
          </div>
-        )} */}
+        )}

        <div className="flex items-center justify-center border-t border-ui-border bg-black px-4 py-3 lg:px-8 2xl:px-16">
          <CopyRight />
--- a/components/pages/product-page.tsx
+++ b/components/pages/product-page.tsx
@ -22,7 +22,7 @@ export default function ProductPage({ data }: ProductPageParams) {
          __html: JSON.stringify(productJsonLd)
        }}
      />
-      <ProductView product={product} relatedProducts={[]} />;
+      <ProductView product={product} relatedProducts={[]} />
    </>
  );
 }
--- a/components/ui/sheet.tsx
+++ b/components/ui/sheet.tsx
@ -24,7 +24,7 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <SheetPrimitive.Overlay
    className={cn(
-      'fixed inset-0 z-50 bg-foreground/70 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      'bg-foreground/70 fixed inset-0 z-50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
      className
    )}
    {...props}
@ -34,7 +34,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;

 const sheetVariants = cva(
-  'fixed z-50 gap-4 bg-background p-4 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 lg:p-6',
+  'fixed z-50 gap-4 bg-white p-4 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 lg:p-6',
  {
    variants: {
      side: {
@ -64,7 +64,7 @@ const SheetContent = React.forwardRef<
    <SheetOverlay />
    <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
      {children}
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary md:right-6 md:top-6">
+      <SheetPrimitive.Close className="ring-offset-background focus:ring-blue-500 data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none md:right-6 md:top-6">
        <XMarkIcon className="h-6 w-6" />
        <span className="sr-only">Close</span>
      </SheetPrimitive.Close>
@ -92,7 +92,7 @@ const SheetTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <SheetPrimitive.Title
    ref={ref}
-    className={cn('text-lg font-semibold text-foreground', className)}
+    className={cn('text-foreground text-lg font-semibold', className)}
    {...props}
  />
 ));
@ -104,7 +104,7 @@ const SheetDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <SheetPrimitive.Description
    ref={ref}
-    className={cn('text-sm text-muted-foreground', className)}
+    className={cn('text-muted-foreground text-sm', className)}
    {...props}
  />
 ));
--- a/lib/sanity/constants.ts
+++ b/lib/sanity/constants.ts
@ -19,7 +19,6 @@ export const PAGE_REFERENCES = [
  {type: 'home'},
  {type: 'page'},
  {type: 'product'},
-  {type: 'productVariant'},
 ]

 // Objects to include in page building arrays.
@ -36,11 +35,6 @@ export const COMPONENT_REFERENCES = [
 // https://www.sanity.io/help/studio-client-specify-api-version
 export const SANITY_API_VERSION = '2022-10-25'

-// Your Shopify store ID.
-// This is your unique store URL (e.g. 'my-store-name.myshopify.com').
-// Set this to enable helper links in document status banners and shortcut links on products and collections.
-export const STORM_STORE_ID = ''
-
 // Project preview URLs
 export const localStorefrontUrl = 'http://localhost:3000';
 export const localStorefrontPreviewUrl = 'http://localhost:3000/api/preview';
--- a/lib/sanity/desk/index.ts
+++ b/lib/sanity/desk/index.ts
@ -59,16 +59,16 @@ export const structure: StructureResolver = (S, context) =>
      home(S, context),
      pages(S, context),
      S.divider(),
-      products(S, context),
      categories(S, context),
+      products(S, context),
      S.divider(),
      blurbs(S, context),
-      usps(S, context),
      sections(S, context),
+      usps(S, context),
      S.divider(),
-      settings(S, context),
-      search(S, context),
      navigation(S, context),
+      search(S, context),
+      settings(S, context),
      S.divider(),
      ...S.documentTypeListItems().filter(hiddenDocTypes),
      S.divider(),
--- a/lib/sanity/sanity.fetch.ts
+++ b/lib/sanity/sanity.fetch.ts
@ -7,9 +7,9 @@ import { draftMode } from 'next/headers'

 import { revalidateSecret } from './sanity.api'

-import { categoryQuery, homePageQuery, mainMenuQuery, pageQuery, productQuery, searchPageQuery } from './queries'
+import { categoryQuery, footerMenusQuery, homePageQuery, mainMenuQuery, pageQuery, productQuery, searchPageQuery } from './queries'

-import { CategoryPayload, HomePagePayload, MainMenuPayload, PagePayload, ProductPayload, SearchPayload } from './sanity.types'
+import { CategoryPayload, FooterMenusPayload, HomePagePayload, MainMenuPayload, PagePayload, ProductPayload, SearchPayload } from './sanity.types'

 export const token = process.env.SANITY_API_READ_TOKEN

@ -98,4 +98,12 @@ export function getMainMenu(locale: string) {
    params: { locale },
    tags: ['menu'],
  })
+}
+
+export function getFooterMenus(locale: string) {
+  return sanityFetch<FooterMenusPayload | null>({
+    query: footerMenusQuery,
+    params: { locale },
+    tags: ['menu'],
+  })
 }
--- a/lib/sanity/sanity.types.ts
+++ b/lib/sanity/sanity.types.ts
@ -70,4 +70,10 @@ export interface MainMenuPayload {
  title?: string
  _type?: string
  items?: MenuItem[]
+}
+
+export interface FooterMenusPayload {
+  title?: string
+  _type?: string
+  menu?: MenuItem[]
 }
--- a/lib/sanity/schemas/documents/blurb.tsx
+++ b/lib/sanity/schemas/documents/blurb.tsx
@ -1,7 +1,7 @@
-import {CommentIcon} from '@sanity/icons'
-import {defineField} from 'sanity'
-import {languages} from '../../languages'
-import {validateImage} from '../../utils/validation'
+import { CommentIcon } from '@sanity/icons';
+import { defineField } from 'sanity';
+import { languages } from '../../languages';
+import { validateImage } from '../../utils/validation';

 export default defineField({
  name: 'blurb',
@ -13,7 +13,7 @@ export default defineField({
      name: 'language',
      type: 'string',
      readOnly: true,
-      description: 'Language of this document.',
+      description: 'Language of this document.'
      // hidden: true,
    }),
    // Title
@ -22,14 +22,14 @@ export default defineField({
      title: 'Title',
      type: 'string',
      description: 'What do you want to convey?',
-      validation: (Rule) => Rule.required(),
+      validation: (Rule) => Rule.required()
    }),
    // Image
    defineField({
      name: 'image',
      title: 'Image',
      type: 'mainImage',
-      validation: (Rule) => validateImage(Rule, true),
+      validation: (Rule) => validateImage(Rule, true)
    }),
    // Text
    defineField({
@ -37,7 +37,7 @@ export default defineField({
      title: 'Text',
      type: 'text',
      description: 'Small text displayed below title.',
-      rows: 5,
+      rows: 5
    }),
    // Link
    {
@ -54,69 +54,69 @@ export default defineField({
          validation: (Rule) => Rule.required(),
          options: {
            list: ['internal', 'external'],
-            layout: 'radio',
-          },
+            layout: 'radio'
+          }
        },
        {
          name: 'internalLink',
          type: 'linkInternal',
          title: 'Internal link',
-          hidden: ({parent}) => parent?.linkType !== 'internal',
+          hidden: ({ parent }) => parent?.linkType !== 'internal',
          options: {
-            collapsible: false,
+            collapsible: false
          },
          validation: (Rule) =>
            Rule.custom((value: any, context: any) => {
              if (context.parent.linkType == 'internal') {
-                const currentLink = value && value.reference
+                const currentLink = value && value.reference;
                if (!currentLink) {
-                  return 'Reference is required'
+                  return 'Reference is required';
                }
              }
-              return true
-            }),
+              return true;
+            })
        },
        {
          name: 'externalLink',
          type: 'linkExternal',
          title: 'External link',
-          hidden: ({parent}) => parent?.linkType !== 'external',
+          hidden: ({ parent }) => parent?.linkType !== 'external',
          options: {
-            collapsible: false,
+            collapsible: false
          },
          validation: (Rule) =>
            Rule.custom((value: any, context: any) => {
              if (context.parent.linkType == 'external') {
-                const currentTitle = value?.title
-                const currentUrl = value?.url
+                const currentTitle = value?.title;
+                const currentUrl = value?.url;
                if (!currentTitle) {
-                  return 'Title is required'
+                  return 'Title is required';
                } else if (!currentUrl) {
-                  return 'URL is required'
+                  return 'URL is required';
                }
              }
-              return true
-            }),
-        },
-      ],
-    },
+              return true;
+            })
+        }
+      ]
+    }
  ],
  preview: {
    select: {
      title: 'title',
      image: 'image',
-      language: 'language',
+      language: 'language'
    },
    prepare(selection) {
-      const {image, title, language} = selection
+      const { image, title, language } = selection;

-      const currentLang = languages.find((lang) => lang.id === language)
+      const currentLang = languages.find((lang) => lang.id === language);

      return {
        media: image,
        title,
-        subtitle: `${currentLang ? currentLang.title : ''}`,
-      }
-    },
-  },
-})
+        subtitle: `${currentLang ? currentLang.title : ''}`
+      };
+    }
+  }
+});
--- a/lib/sanity/schemas/documents/productVariant.tsx
+++ b/lib/sanity/schemas/documents/productVariant.tsx
@ -1,30 +0,0 @@
-import {CopyIcon} from '@sanity/icons'
-import {defineField, defineType} from 'sanity'
-
-export default defineType({
-  name: 'productVariant',
-  title: 'Product variant',
-  type: 'document',
-  icon: CopyIcon,
-  fields: [
-    // Title
-    defineField({
-      title: 'Title',
-      name: 'title',
-      type: 'string',
-      description: 'Product variant title/name.'
-    }),
-  ],
-  preview: {
-    select: {
-      title: 'title',
-    },
-    prepare(selection) {
-      const {title} = selection
-
-      return {
-        title,
-      }
-    },
-  },
-})
--- a/lib/sanity/schemas/index.ts
+++ b/lib/sanity/schemas/index.ts
@ -17,7 +17,6 @@ import category from './documents/category'
 import footerMenu from './documents/footerMenu'
 import page from './documents/page'
 import product from './documents/product'
-import productVariant from './documents/productVariant'
 import section from './documents/section'
 import usp from './documents/usp'

@ -25,7 +24,6 @@ const documents = [
  category,
  page,
  product,
-  productVariant,
  blurb,
  section,
  usp,
--- a/lib/sanity/utils/get-preview-url.ts
+++ b/lib/sanity/utils/get-preview-url.ts
@ -2,7 +2,7 @@
 import { isDev, SanityDocument } from 'sanity'
 import { localStorefrontPreviewUrl, publicStorefrontPreviewUrl } from '../constants'

-const SANITY_STUDIO_API_READ_TOKEN = "skYG2HXNga8uxSL7rFIreJEnP0SdVjCZ2nzB8rUHD4wRWxXPGceXTuR5vCVBP99mWZ9ULhghmpUyX7EtzDmJusSk6Gwvdr3nLAsdWI9ZktIWvSWUNpHbu0Xfrrt0UUaktrLglk7ToABvjXlaPHLpOIR3dnjl4MGByutPmyra0b5t20kgDrmF"
+const SANITY_STUDIO_API_READ_TOKEN = "preview.skYG2HXNga8uxSL7rFIreJEnP0SdVjCZ2nzB8rUHD4wRWxXPGceXTuR5vCVBP99mWZ9ULhghmpUyX7EtzDmJusSk6Gwvdr3nLAsdWI9ZktIWvSWUNpHbu0Xfrrt0UUaktrLglk7ToABvjXlaPHLpOIR3dnjl4MGByutPmyra0b5t20kgDrmF"

 // Customise this function to show the correct URL based on the current document
 export default async function getPreviewUrl(doc: SanityDocument) {
--- a/package.json
+++ b/package.json
@ -23,47 +23,47 @@
    "@portabletext/react": "^3.0.4",
    "@radix-ui/react-accordion": "^1.1.2",
    "@radix-ui/react-dialog": "^1.0.4",
-    "@radix-ui/react-dropdown-menu": "^2.0.4",
-    "@radix-ui/react-navigation-menu": "^1.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.0.5",
+    "@radix-ui/react-navigation-menu": "^1.1.3",
    "@sanity/client": "^6.4.4",
    "@sanity/document-internationalization": "^2.0.1",
    "@sanity/icons": "^2.4.1",
    "@sanity/image-url": "^1.0.2",
    "@sanity/preview-kit": "^2.4.9",
-    "@sanity/types": "^3.11.1",
-    "@sanity/ui": "^1.3.3",
+    "@sanity/types": "^3.15.0",
+    "@sanity/ui": "^1.7.4",
    "@sanity/vision": "^3.0.0",
    "@sanity/webhook": "^2.0.0",
    "@types/styled-components": "^5.1.26",
    "@vercel/analytics": "^1.0.2",
    "@vercel/og": "^0.1.0",
    "algoliasearch": "^4.19.1",
-    "class-variance-authority": "^0.6.0",
+    "class-variance-authority": "^0.6.1",
    "clsx": "^1.2.1",
    "framer-motion": "^8.5.5",
    "is-empty-iterable": "^3.0.0",
    "next": "13.4.19",
    "next-intl": "2.19.1",
-    "next-sanity": "^5.4.2",
+    "next-sanity": "^5.4.6",
    "react": "18.2.0",
    "react-cookie": "^4.1.1",
    "react-dom": "18.2.0",
    "react-glider": "^4.0.2",
    "react-instantsearch": "^7.0.1",
-    "sanity": "^3.11.1",
-    "sanity-plugin-iframe-pane": "^2.3.0",
+    "sanity": "^3.15.0",
+    "sanity-plugin-iframe-pane": "^2.5.5",
    "sanity-plugin-media": "^2.0.4",
-    "sharp": "^0.32.1",
+    "sharp": "^0.32.4",
    "slug": "^8.2.2",
    "slugify": "^1.6.5",
-    "styled-components": "^5.3.10",
+    "styled-components": "^5.3.11",
    "suspend-react": "^0.1.3",
-    "tailwind-merge": "^1.12.0",
-    "tailwindcss-animate": "^1.0.5"
+    "tailwind-merge": "^1.14.0",
+    "tailwindcss-animate": "^1.0.6"
  },
  "devDependencies": {
    "@next/bundle-analyzer": "^13.4.13",
-    "@playwright/test": "^1.34.1",
+    "@playwright/test": "^1.36.2",
    "@tailwindcss/typography": "^0.5.9",
    "@types/negotiator": "^0.6.1",
    "@types/node": "18.13.0",
@ -73,15 +73,15 @@
    "@vercel/git-hooks": "^1.0.0",
    "autoprefixer": "^10.4.14",
    "cross-env": "^7.0.3",
-    "eslint": "^8.41.0",
-    "eslint-config-next": "^13.4.3",
-    "eslint-config-prettier": "^8.8.0",
+    "eslint": "^8.46.0",
+    "eslint-config-next": "^13.4.13",
+    "eslint-config-prettier": "^8.10.0",
    "eslint-plugin-unicorn": "^45.0.2",
-    "lint-staged": "^13.2.2",
-    "postcss": "^8.4.23",
+    "lint-staged": "^13.2.3",
+    "postcss": "^8.4.27",
    "prettier": "^2.8.8",
    "prettier-plugin-tailwindcss": "^0.2.8",
-    "tailwindcss": "^3.3.2",
-    "typescript": "^5.1.3"
+    "tailwindcss": "^3.3.3",
+    "typescript": "^5.1.6"
  }
 }
--- a/plugins/settings.tsx
+++ b/plugins/settings.tsx
@ -0,0 +1,99 @@
+// @ts-nocheck
+
+/**
+ * This plugin contains all the logic for setting up the singletons
+ */
+
+import { type DocumentDefinition } from 'sanity';
+import { Iframe } from 'sanity-plugin-iframe-pane';
+import { ListItemBuilder, type StructureResolver } from 'sanity/desk';
+
+import { iframeOptions, PREVIEWABLE_DOCUMENT_TYPES } from '../sanity.config';
+
+const hiddenDocTypes = (listItem: ListItemBuilder) => {
+  const id = listItem.getId();
+
+  if (!id) {
+    return false;
+  }
+
+  return ![
+    // 'category',
+    // 'home',
+    'media.tag',
+    // 'page',
+    // 'product',
+    // 'settings',
+    // 'blurb',
+    // 'section',
+    // 'usp',
+    'navigation',
+    'footerMenu',
+    'utilityMenu'
+  ].includes(id);
+};
+
+export const singletonPlugin = (types: string[]) => {
+  return {
+    name: 'singletonPlugin',
+    document: {
+      // Hide 'Singletons (such as Home)' from new document options
+      // https://user-images.githubusercontent.com/81981/195728798-e0c6cf7e-d442-4e58-af3a-8cd99d7fcc28.png
+      newDocumentOptions: (prev, { creationContext }) => {
+        if (creationContext.type === 'global') {
+          return prev.filter((templateItem) => !types.includes(templateItem.templateId));
+        }
+
+        return prev;
+      },
+      // Removes the "duplicate" action on the Singletons (such as Home)
+      actions: (prev, { schemaType }) => {
+        if (types.includes(schemaType)) {
+          return prev.filter(({ action }) => action !== 'duplicate');
+        }
+
+        return prev;
+      }
+    }
+  };
+};
+
+// The StructureResolver is how we're changing the DeskTool structure to linking to document (named Singleton)
+// like how "Home" is handled.
+export const pageStructure = (typeDefArray: DocumentDefinition[]): StructureResolver => {
+  return (S) => {
+    // Goes through all of the singletons that were provided and translates them into something the
+    // Desktool can understand
+    const singletonItems = typeDefArray.map((typeDef) => {
+      return S.listItem()
+        .title(typeDef.title!)
+        .icon(typeDef.icon)
+        .child(
+          S.documentList()
+            .title(`${typeDef.name.charAt(0).toUpperCase() + typeDef.name.slice(1)} pages`)
+            .filter(`_type == "${typeDef.name}"`)
+            .child((id) =>
+              S.document()
+                .schemaType(typeDef.name)
+                .id(id)
+                .views([
+                  S.view.form().icon('f'),
+                  // Preview
+                  ...(PREVIEWABLE_DOCUMENT_TYPES.includes(typeDef.name as any)
+                    ? [S.view.component(Iframe).options(iframeOptions).title('Preview')]
+                    : [])
+                ])
+            )
+        );
+    });
+
+    // The default root list items (except custom ones)
+    const defaultListItems = S.documentTypeListItems()
+      .filter((listItem) => !typeDefArray.find((singleton) => singleton.name === listItem.getId()))
+      .filter(hiddenDocTypes);
+
+    return S.list()
+      .title('Content')
+      .items([...singletonItems, S.divider(), ...defaultListItems]);
+  };
+};
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -18,10 +18,10 @@ dependencies:
    specifier: ^1.0.4
    version: 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.19)(react-dom@18.2.0)(react@18.2.0)
  '@radix-ui/react-dropdown-menu':
-    specifier: ^2.0.4
+    specifier: ^2.0.5
    version: 2.0.5(@types/react-dom@18.2.7)(@types/react@18.2.19)(react-dom@18.2.0)(react@18.2.0)
  '@radix-ui/react-navigation-menu':
-    specifier: ^1.1.2
+    specifier: ^1.1.3
    version: 1.1.3(@types/react-dom@18.2.7)(@types/react@18.2.19)(react-dom@18.2.0)(react@18.2.0)
  '@sanity/client':
    specifier: ^6.4.4
@ -39,14 +39,14 @@ dependencies:
    specifier: ^2.4.9
    version: 2.4.9(@sanity/client@6.4.4)(react@18.2.0)
  '@sanity/types':
-    specifier: ^3.11.1
+    specifier: ^3.15.0
    version: 3.15.0
  '@sanity/ui':
-    specifier: ^1.3.3
+    specifier: ^1.7.4
    version: 1.7.4(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)(styled-components@5.3.11)
  '@sanity/vision':
    specifier: ^3.0.0
-    version: 3.0.0(@babel/runtime@7.22.10)(@codemirror/lint@6.4.0)(@codemirror/state@6.2.1)(@codemirror/theme-one-dark@6.1.2)(@lezer/common@1.0.3)(@sanity/client@6.4.4)(codemirror@6.0.1)(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)(rxjs@7.8.1)(styled-components@5.3.11)
+    version: 3.0.0(@babel/runtime@7.22.10)(@codemirror/lint@6.4.0)(@codemirror/state@6.2.1)(@codemirror/theme-one-dark@6.1.2)(@lezer/common@1.0.4)(@sanity/client@6.4.4)(codemirror@6.0.1)(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)(rxjs@7.8.1)(styled-components@5.3.11)
  '@sanity/webhook':
    specifier: ^2.0.0
    version: 2.0.0
@ -63,7 +63,7 @@ dependencies:
    specifier: ^4.19.1
    version: 4.19.1
  class-variance-authority:
-    specifier: ^0.6.0
+    specifier: ^0.6.1
    version: 0.6.1
  clsx:
    specifier: ^1.2.1
@ -81,8 +81,8 @@ dependencies:
    specifier: 2.19.1
    version: 2.19.1(next@13.4.19)(react@18.2.0)
  next-sanity:
-    specifier: ^5.4.2
-    version: 5.4.2(@sanity/client@6.4.4)(@sanity/icons@2.4.1)(@sanity/types@3.15.0)(@sanity/ui@1.7.4)(@types/styled-components@5.1.26)(next@13.4.19)(react@18.2.0)(sanity@3.15.0)(styled-components@5.3.11)
+    specifier: ^5.4.6
+    version: 5.4.6(@sanity/client@6.4.4)(@sanity/icons@2.4.1)(@sanity/types@3.15.0)(@sanity/ui@1.7.4)(next@13.4.19)(react@18.2.0)(sanity@3.15.0)(styled-components@5.3.11)
  react:
    specifier: 18.2.0
    version: 18.2.0
@ -99,16 +99,16 @@ dependencies:
    specifier: ^7.0.1
    version: 7.0.1(algoliasearch@4.19.1)(react-dom@18.2.0)(react@18.2.0)
  sanity:
-    specifier: ^3.11.1
+    specifier: ^3.15.0
    version: 3.15.0(@types/node@18.13.0)(@types/react@18.2.19)(react-dom@18.2.0)(react@18.2.0)(styled-components@5.3.11)
  sanity-plugin-iframe-pane:
-    specifier: ^2.3.0
-    version: 2.3.0(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)(sanity@3.15.0)(styled-components@5.3.11)
+    specifier: ^2.5.5
+    version: 2.5.5(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)(sanity@3.15.0)(styled-components@5.3.11)
  sanity-plugin-media:
    specifier: ^2.0.4
    version: 2.0.4(@sanity/color@2.2.5)(@sanity/icons@2.4.1)(@types/react@18.2.19)(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)(sanity@3.15.0)(styled-components@5.3.11)
  sharp:
-    specifier: ^0.32.1
+    specifier: ^0.32.4
    version: 0.32.4
  slug:
    specifier: ^8.2.2
@ -117,16 +117,16 @@ dependencies:
    specifier: ^1.6.5
    version: 1.6.5
  styled-components:
-    specifier: ^5.3.10
+    specifier: ^5.3.11
    version: 5.3.11(@babel/core@7.22.10)(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)
  suspend-react:
    specifier: ^0.1.3
    version: 0.1.3(react@18.2.0)
  tailwind-merge:
-    specifier: ^1.12.0
+    specifier: ^1.14.0
    version: 1.14.0
  tailwindcss-animate:
-    specifier: ^1.0.5
+    specifier: ^1.0.6
    version: 1.0.6(tailwindcss@3.3.3)

 devDependencies:
@ -134,7 +134,7 @@ devDependencies:
    specifier: ^13.4.13
    version: 13.4.13
  '@playwright/test':
-    specifier: ^1.34.1
+    specifier: ^1.36.2
    version: 1.36.2
  '@tailwindcss/typography':
    specifier: ^0.5.9
@ -164,22 +164,22 @@ devDependencies:
    specifier: ^7.0.3
    version: 7.0.3
  eslint:
-    specifier: ^8.41.0
+    specifier: ^8.46.0
    version: 8.46.0
  eslint-config-next:
-    specifier: ^13.4.3
+    specifier: ^13.4.13
    version: 13.4.13(eslint@8.46.0)(typescript@5.1.6)
  eslint-config-prettier:
-    specifier: ^8.8.0
+    specifier: ^8.10.0
    version: 8.10.0(eslint@8.46.0)
  eslint-plugin-unicorn:
    specifier: ^45.0.2
    version: 45.0.2(eslint@8.46.0)
  lint-staged:
-    specifier: ^13.2.2
+    specifier: ^13.2.3
    version: 13.2.3
  postcss:
-    specifier: ^8.4.23
+    specifier: ^8.4.27
    version: 8.4.27
  prettier:
    specifier: ^2.8.8
@ -188,10 +188,10 @@ devDependencies:
    specifier: ^0.2.8
    version: 0.2.8(prettier@2.8.8)
  tailwindcss:
-    specifier: ^3.3.2
+    specifier: ^3.3.3
    version: 3.3.3
  typescript:
-    specifier: ^5.1.3
+    specifier: ^5.1.6
    version: 5.1.6

 packages:
@ -568,6 +568,20 @@ packages:
      '@lezer/common': 1.0.3
    dev: false

+  /@codemirror/autocomplete@6.9.0(@codemirror/language@6.9.0)(@codemirror/state@6.2.1)(@codemirror/view@6.16.0)(@lezer/common@1.0.4):
+    resolution: {integrity: sha512-Fbwm0V/Wn3BkEJZRhr0hi5BhCo5a7eBL6LYaliPjOSwCyfOpnjXY59HruSxOUNV+1OYer0Tgx1zRNQttjXyDog==}
+    peerDependencies:
+      '@codemirror/language': ^6.0.0
+      '@codemirror/state': ^6.0.0
+      '@codemirror/view': ^6.0.0
+      '@lezer/common': ^1.0.0
+    dependencies:
+      '@codemirror/language': 6.9.0
+      '@codemirror/state': 6.2.1
+      '@codemirror/view': 6.16.0
+      '@lezer/common': 1.0.4
+    dev: false
+
  /@codemirror/commands@6.2.4:
    resolution: {integrity: sha512-42lmDqVH0ttfilLShReLXsDfASKLXzfyC36bzwcqzox9PlHulMcsUOfHXNo2X2aFMVNUoQ7j+d4q5bnfseYoOA==}
    dependencies:
@ -600,6 +614,17 @@ packages:
      style-mod: 4.0.3
    dev: false

+  /@codemirror/language@6.9.0:
+    resolution: {integrity: sha512-nFu311/0ne/qGuGCL3oKuktBgzVOaxCHZPZv1tLSZkNjPYxxvkjSbzno3MlErG2tgw1Yw1yF8BxMCegeMXqpiw==}
+    dependencies:
+      '@codemirror/state': 6.2.1
+      '@codemirror/view': 6.16.0
+      '@lezer/common': 1.0.4
+      '@lezer/highlight': 1.1.6
+      '@lezer/lr': 1.3.10
+      style-mod: 4.1.0
+    dev: false
+
  /@codemirror/lint@6.4.0:
    resolution: {integrity: sha512-6VZ44Ysh/Zn07xrGkdtNfmHCbGSHZzFBdzWi0pbd7chAQ/iUcpLGX99NYRZTa7Ugqg4kEHCqiHhcZnH0gLIgSg==}
    dependencies:
@ -623,7 +648,7 @@ packages:
  /@codemirror/theme-one-dark@6.1.2:
    resolution: {integrity: sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==}
    dependencies:
-      '@codemirror/language': 6.8.0
+      '@codemirror/language': 6.9.0
      '@codemirror/state': 6.2.1
      '@codemirror/view': 6.16.0
      '@lezer/highlight': 1.1.6
@ -1209,6 +1234,10 @@ packages:
    resolution: {integrity: sha512-JH4wAXCgUOcCGNekQPLhVeUtIqjH0yPBs7vvUdSjyQama9618IOKFJwkv2kcqdhF0my8hQEgCTEJU0GIgnahvA==}
    dev: false

+  /@lezer/common@1.0.4:
+    resolution: {integrity: sha512-lZHlk8p67x4aIDtJl6UQrXSOP6oi7dQR3W/geFVrENdA1JDaAJWldnVqVjPMJupbTKbzDfFcePfKttqVidS/dg==}
+    dev: false
+
  /@lezer/highlight@1.1.6:
    resolution: {integrity: sha512-cmSJYa2us+r3SePpRCjN5ymCqCPv+zyXmDl0ciWtVaNiORT/MxM7ZgOMQZADD0o51qOaOg24qc/zBViOIwAjJg==}
    dependencies:
@ -1222,6 +1251,12 @@ packages:
      '@lezer/lr': 1.3.9
    dev: false

+  /@lezer/lr@1.3.10:
+    resolution: {integrity: sha512-BZfVvf7Re5BIwJHlZXbJn9L8lus5EonxQghyn+ih8Wl36XMFBPTXC0KM0IdUtj9w/diPHsKlXVgL+AlX2jYJ0Q==}
+    dependencies:
+      '@lezer/common': 1.0.4
+    dev: false
+
  /@lezer/lr@1.3.9:
    resolution: {integrity: sha512-XPz6dzuTHlnsbA5M2DZgjflNQ+9Hi5Swhic0RULdp3oOs3rh6bqGZolosVqN/fQIT8uNiepzINJDnS39oweTHQ==}
    dependencies:
@ -2241,15 +2276,15 @@ packages:
      - supports-color
    dev: false

-  /@sanity/groq-store@4.0.4:
-    resolution: {integrity: sha512-Bk1ZsS6PGeCtmP8a4FJfvHws1WlnQUPdcr9MbO38Fbbtp55ZdLjTbxozxo//mK7jsbmNxf2HjpQ1mm5jDI49RQ==}
+  /@sanity/groq-store@4.1.1:
+    resolution: {integrity: sha512-SZg6i5Vb/fncUk5le42ijwkPeOm8WRkPoofM5d+BBqcAAuHctD1qZV0TMyZkw+HFNXbjzhW76rrytTgzsP+ZaQ==}
    engines: {node: '>=14.18'}
    dependencies:
      '@sanity/eventsource': 5.0.0
      '@sanity/types': 3.15.0
      fast-deep-equal: 3.1.3
      groq: 3.15.0
-      groq-js: 1.1.12
+      groq-js: 1.2.0
      mendoza: 3.0.3
      simple-get: 4.0.1
      split2: 4.2.0
@ -2412,11 +2447,11 @@ packages:
      - supports-color
    dev: false

-  /@sanity/preview-kit@3.1.3(@sanity/client@6.4.4)(react@18.2.0):
-    resolution: {integrity: sha512-v8zqm4uxE42RXmYySrULfscvdIFPjLwIrBbhRb+qumZNdGkTZph3y0Zo9rdW9MnOEYwew0pz6BUq+n7y/NoRwA==}
+  /@sanity/preview-kit@3.1.6(@sanity/client@6.4.4)(react@18.2.0):
+    resolution: {integrity: sha512-V8gZlIcyqqMr1WDAzrNXntrgYVeR56EKEZHbXOoHIr3qjgCRXPogVJ5w09DJ6cMhv2NKClOpAqmA9MWzt81wXw==}
    engines: {node: '>=14'}
    peerDependencies:
-      '@sanity/client': ^6.4.8
+      '@sanity/client': ^6.4.9
      react: ^18.0.0
    peerDependenciesMeta:
      react:
@ -2424,7 +2459,7 @@ packages:
    dependencies:
      '@sanity/client': 6.4.4
      '@sanity/eventsource': 5.0.0
-      '@sanity/groq-store': 4.0.4
+      '@sanity/groq-store': 4.1.1
      '@vercel/stega': 0.1.0
      lodash.get: 4.4.2
      lodash.isplainobject: 4.0.6
@ -2519,7 +2554,7 @@ packages:
      uuid: 8.3.2
    dev: false

-  /@sanity/vision@3.0.0(@babel/runtime@7.22.10)(@codemirror/lint@6.4.0)(@codemirror/state@6.2.1)(@codemirror/theme-one-dark@6.1.2)(@lezer/common@1.0.3)(@sanity/client@6.4.4)(codemirror@6.0.1)(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)(rxjs@7.8.1)(styled-components@5.3.11):
+  /@sanity/vision@3.0.0(@babel/runtime@7.22.10)(@codemirror/lint@6.4.0)(@codemirror/state@6.2.1)(@codemirror/theme-one-dark@6.1.2)(@lezer/common@1.0.4)(@sanity/client@6.4.4)(codemirror@6.0.1)(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)(rxjs@7.8.1)(styled-components@5.3.11):
    resolution: {integrity: sha512-Dr18Iugz2xHEavag4asOzYBIjwnj+5SEB7DlbyNow0mQ5fQWYh8eRES2OBDvrOLbBJ5rVuZMIzrcokQ+nzmrBw==}
    peerDependencies:
      '@sanity/client': ^3.4.1
@ -2527,7 +2562,7 @@ packages:
      rxjs: ^6.5.3
      styled-components: ^5.2
    dependencies:
-      '@codemirror/autocomplete': 6.9.0(@codemirror/language@6.8.0)(@codemirror/state@6.2.1)(@codemirror/view@6.16.0)(@lezer/common@1.0.3)
+      '@codemirror/autocomplete': 6.9.0(@codemirror/language@6.9.0)(@codemirror/state@6.2.1)(@codemirror/view@6.16.0)(@lezer/common@1.0.4)
      '@codemirror/commands': 6.2.4
      '@codemirror/lang-javascript': 6.1.9
      '@codemirror/language': 6.8.0
@ -2568,6 +2603,13 @@ packages:
      tslib: 2.6.1
    dev: false

+  /@sanity/webhook@3.0.1:
+    resolution: {integrity: sha512-2eTDg/+TR8lSX2OH6wH7M8UUwZUsD/i8Raw9mFH9myt2mkPY3ns77cU6K1QL2ZhwIIDJT5tttTELURF7RjlzVg==}
+    engines: {node: '>=12.0.0'}
+    dependencies:
+      base64url: 3.0.1
+    dev: false
+
  /@shuding/opentype.js@1.4.0-beta.0:
    resolution: {integrity: sha512-3NgmNyH3l/Hv6EvsWJbsvpcpUba6R8IREQ83nH83cyakCw7uM1arZKNfHwv1Wz6jgqrF/j4x5ELvR6PnK9nTcA==}
    engines: {node: '>= 8.0.0'}
@ -2858,7 +2900,7 @@ packages:
      '@codemirror/state': '>=6.0.0'
      '@codemirror/view': '>=6.0.0'
    dependencies:
-      '@codemirror/autocomplete': 6.9.0(@codemirror/language@6.8.0)(@codemirror/state@6.2.1)(@codemirror/view@6.16.0)(@lezer/common@1.0.3)
+      '@codemirror/autocomplete': 6.9.0(@codemirror/language@6.9.0)(@codemirror/state@6.2.1)(@codemirror/view@6.16.0)(@lezer/common@1.0.4)
      '@codemirror/commands': 6.2.4
      '@codemirror/language': 6.8.0
      '@codemirror/lint': 6.4.0
@ -2884,7 +2926,7 @@ packages:
      '@codemirror/theme-one-dark': 6.1.2
      '@codemirror/view': 6.16.0
      '@uiw/codemirror-extensions-basic-setup': 4.21.9(@codemirror/autocomplete@6.9.0)(@codemirror/commands@6.2.4)(@codemirror/language@6.8.0)(@codemirror/lint@6.4.0)(@codemirror/search@6.5.1)(@codemirror/state@6.2.1)(@codemirror/view@6.16.0)
-      codemirror: 6.0.1(@lezer/common@1.0.3)
+      codemirror: 6.0.1(@lezer/common@1.0.4)
      react: 18.2.0
      react-dom: 18.2.0(react@18.2.0)
    transitivePeerDependencies:
@ -3491,7 +3533,7 @@ packages:
      normalize-path: 3.0.0
      readdirp: 3.6.0
    optionalDependencies:
-      fsevents: 2.3.2
+      fsevents: 2.3.3

  /chownr@1.1.4:
    resolution: {integrity: sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==}
@ -3565,12 +3607,12 @@ packages:
    engines: {node: '>=6'}
    dev: false

-  /codemirror@6.0.1(@lezer/common@1.0.3):
+  /codemirror@6.0.1(@lezer/common@1.0.4):
    resolution: {integrity: sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==}
    dependencies:
-      '@codemirror/autocomplete': 6.9.0(@codemirror/language@6.8.0)(@codemirror/state@6.2.1)(@codemirror/view@6.16.0)(@lezer/common@1.0.3)
+      '@codemirror/autocomplete': 6.9.0(@codemirror/language@6.9.0)(@codemirror/state@6.2.1)(@codemirror/view@6.16.0)(@lezer/common@1.0.4)
      '@codemirror/commands': 6.2.4
-      '@codemirror/language': 6.8.0
+      '@codemirror/language': 6.9.0
      '@codemirror/lint': 6.4.0
      '@codemirror/search': 6.5.1
      '@codemirror/state': 6.2.1
@ -4811,6 +4853,14 @@ packages:
    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
    os: [darwin]
    requiresBuild: true
+    dev: true
+    optional: true
+
+  /fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+    requiresBuild: true
    optional: true

  /ftp@0.3.10:
@ -5083,8 +5133,8 @@ packages:
    engines: {node: '>= 14'}
    dev: false

-  /groq-js@1.1.12:
-    resolution: {integrity: sha512-02KhsoLuTwr/MOf6bBzt+rQOj+QuLoZ5IDDkzXM2NWY73CF1d29KTRBffzCAjsjBvY7kn+oQcwPdQVb3vBkl9w==}
+  /groq-js@1.2.0:
+    resolution: {integrity: sha512-XW4PXKqf4LMsRGGz2MmBRcxDg8NJD0qTJxvd7YOdb6/IH1RQcqL/QK2o76Uxd0A3CiwMlJLUoPrL9KGUDWT39A==}
    engines: {node: '>= 14'}
    dev: false

@ -6104,27 +6154,25 @@ packages:
      use-intl: 2.19.1(react@18.2.0)
    dev: false

-  /next-sanity@5.4.2(@sanity/client@6.4.4)(@sanity/icons@2.4.1)(@sanity/types@3.15.0)(@sanity/ui@1.7.4)(@types/styled-components@5.1.26)(next@13.4.19)(react@18.2.0)(sanity@3.15.0)(styled-components@5.3.11):
-    resolution: {integrity: sha512-gLpS0GlapXtDjRUaPcZ9DUeiNSznhtqh0kyxygQS9MDtecCiphVAhXYwvJMQcxfY1u5KVWAxZMyy+Bs6h8G+jA==}
+  /next-sanity@5.4.6(@sanity/client@6.4.4)(@sanity/icons@2.4.1)(@sanity/types@3.15.0)(@sanity/ui@1.7.4)(next@13.4.19)(react@18.2.0)(sanity@3.15.0)(styled-components@5.3.11):
+    resolution: {integrity: sha512-VgbLxYfgzLETNXKuvShhtaYKlz7DDb5QlFvvjf0eF82lIevI1c0jGHgPRhOTRuv0csvy9FVFCyMlxoc+BkAVmQ==}
    engines: {node: '>=16.14'}
    peerDependencies:
-      '@sanity/client': ^6.4.8
+      '@sanity/client': ^6.4.9
      '@sanity/icons': ^2.0.0
      '@sanity/types': ^3.0.0
      '@sanity/ui': ^1.0.0
-      '@types/styled-components': ^5.1.0
      next: ^13.0.0
      react: ^18.0.0
      sanity: ^3.0.0
-      styled-components: ^5.2.0
+      styled-components: ^5.2.0 || ^6.0.0
    dependencies:
      '@sanity/client': 6.4.4
      '@sanity/icons': 2.4.1(react@18.2.0)
-      '@sanity/preview-kit': 3.1.3(@sanity/client@6.4.4)(react@18.2.0)
+      '@sanity/preview-kit': 3.1.6(@sanity/client@6.4.4)(react@18.2.0)
      '@sanity/types': 3.15.0
      '@sanity/ui': 1.7.4(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)(styled-components@5.3.11)
-      '@sanity/webhook': 2.0.0
-      '@types/styled-components': 5.1.26
+      '@sanity/webhook': 3.0.1
      groq: 3.15.0
      next: 13.4.19(@babel/core@7.22.10)(react-dom@18.2.0)(react@18.2.0)
      react: 18.2.0
@ -7363,7 +7411,7 @@ packages:
    engines: {node: '>=14.18.0', npm: '>=8.0.0'}
    hasBin: true
    optionalDependencies:
-      fsevents: 2.3.2
+      fsevents: 2.3.3
    dev: false

  /run-applescript@5.0.0:
@ -7443,23 +7491,25 @@ packages:
      diff-match-patch: 1.0.5
    dev: false

-  /sanity-plugin-iframe-pane@2.3.0(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)(sanity@3.15.0)(styled-components@5.3.11):
-    resolution: {integrity: sha512-bTq1Fnj1AQv5FXOE/88z41tSlJkfd7Ra/+19CvFOkOdopr7nnCWtztaG+phlqm8cndIs+CMnSxaBByLf/RGcPQ==}
+  /sanity-plugin-iframe-pane@2.5.5(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)(sanity@3.15.0)(styled-components@5.3.11):
+    resolution: {integrity: sha512-GoOjYXw7KKmPwA5+dy3ebR27cN/v6DGPtBxx2eaiBvJdVBHQ74JiCs97Kx9y0cAPFBtmTQ+bg0JkKPtxJLl9cw==}
    engines: {node: '>=14'}
    peerDependencies:
      react: ^18
-      sanity: ^3.0.0
+      sanity: ^3
+      styled-components: ^5.2
    dependencies:
      '@sanity/icons': 2.4.1(react@18.2.0)
      '@sanity/incompatible-plugin': 1.0.4(react-dom@18.2.0)(react@18.2.0)
      '@sanity/ui': 1.7.4(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)(styled-components@5.3.11)
+      framer-motion: 10.15.1(react-dom@18.2.0)(react@18.2.0)
      react: 18.2.0
      sanity: 3.15.0(@types/node@18.13.0)(@types/react@18.2.19)(react-dom@18.2.0)(react@18.2.0)(styled-components@5.3.11)
+      styled-components: 5.3.11(@babel/core@7.22.10)(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)
      usehooks-ts: 2.9.1(react-dom@18.2.0)(react@18.2.0)
    transitivePeerDependencies:
      - react-dom
      - react-is
-      - styled-components
    dev: false

  /sanity-plugin-internationalized-array@1.10.1(@sanity/ui@1.7.4)(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)(sanity@3.15.0)(styled-components@5.3.11):
@ -8088,6 +8138,10 @@ packages:
    resolution: {integrity: sha512-78Jv8kYJdjbvRwwijtCevYADfsI0lGzYJe4mMFdceO8l75DFFDoqBhR1jVDicDRRaX4//g1u9wKeo+ztc2h1Rw==}
    dev: false

+  /style-mod@4.1.0:
+    resolution: {integrity: sha512-Ca5ib8HrFn+f+0n4N4ScTIA9iTOQ7MaGS1ylHcoVqW9J7w2w8PzN6g9gKmTYgGEBH8e120+RCmhpje6jC5uGWA==}
+    dev: false
+
  /styled-components@5.3.11(@babel/core@7.22.10)(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0):
    resolution: {integrity: sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==}
    engines: {node: '>=10'}
@ -8689,7 +8743,7 @@ packages:
      postcss: 8.4.27
      rollup: 3.28.0
    optionalDependencies:
-      fsevents: 2.3.2
+      fsevents: 2.3.3
    dev: false

  /w3c-keyname@2.2.8:
--- a/sanity.config.ts
+++ b/sanity.config.ts
@ -1,13 +1,60 @@
 import Kodamera from '@/lib/sanity/components/icons/kodamera'
-import { structure } from '@/lib/sanity/desk'
 import { schemaTypes } from '@/lib/sanity/schemas'
 import { documentInternationalization } from '@sanity/document-internationalization'
 import { visionTool } from '@sanity/vision'
-import { defineConfig, isDev } from 'sanity'
+import { defineConfig } from 'sanity'
+import { Iframe, IframeOptions } from 'sanity-plugin-iframe-pane'
+
+import { previewUrl } from 'sanity-plugin-iframe-pane/preview-url'
 import { media } from 'sanity-plugin-media'
 import { deskTool } from 'sanity/desk'
+import { apiVersion, dataset, previewSecretId, projectId } from './lib/sanity/sanity.api'
+import category from './lib/sanity/schemas/documents/category'
+import page from './lib/sanity/schemas/documents/page'
+import product from './lib/sanity/schemas/documents/product'
+import home from './lib/sanity/schemas/singletons/home'
+import search from './lib/sanity/schemas/singletons/search'
+import { pageStructure, singletonPlugin } from './plugins/settings'

-const devOnlyPlugins = [visionTool()]
+const devOnlyPlugins = [visionTool({ defaultApiVersion: apiVersion})]
+
+export const PREVIEWABLE_DOCUMENT_TYPES = [
+  home.name,
+  page.name,
+  category.name,
+  product.name,
+  search.name
+] satisfies string[]
+
+// Used to generate URLs for drafts and live previews
+export const PREVIEW_BASE_URL = '/api/preview'
+
+// export const urlResolver = defineUrlResolver({
+//   base: PREVIEW_BASE_URL,
+// })
+
+// import {MissingSlug, type UrlResolver} from 'sanity-plugin-iframe-pane'
+
+export const urlResolver = (document: any, urlSecret: any) => {
+  const url = new URL(PREVIEW_BASE_URL, location.origin)
+  url.searchParams.set('type', document._type)
+  const lang = document?.language
+  url.searchParams.set('locale', lang)
+  const slug = (document?.slug as any)?.current
+  if (slug) {
+    url.searchParams.set('slug', slug)
+  }
+  
+  if (urlSecret) {
+    url.searchParams.set('secret', urlSecret)
+  }
+  return url.toString()
+}
+
+export const iframeOptions = {
+  url: urlResolver,
+  urlSecretId: previewSecretId,
+} satisfies IframeOptions

 // Define the actions that should be available for singleton documents
 const singletonActions = new Set(["publish", "discardChanges", "restore"])
@ -20,13 +67,42 @@ const singletonTypes = new Set(["settings", "home", "utilityMenu", "media.tag",
 export default defineConfig({
  name: 'default',
  title: 'KM Storefront CMS',
-  projectId: 'opfmivlh',
+  projectId: projectId,
  basePath: '/studio',
-  dataset: 'production',
+  dataset: dataset,
  plugins: [
-    deskTool({structure}),
+    // deskTool({structure}),
+    deskTool({
+      structure: pageStructure([home, search]),
+      // `defaultDocumentNode` is responsible for adding a “Preview” tab to the document pane
+      // You can add any React component to `S.view.component` and it will be rendered in the pane
+      // and have access to content in the form in real-time.
+      // It's part of the Studio's “Structure Builder API” and is documented here:
+      // https://www.sanity.io/docs/structure-builder-reference
+      defaultDocumentNode: (S, { schemaType }) => {
+        if ((PREVIEWABLE_DOCUMENT_TYPES as string[]).includes(schemaType)) {
+          return S.document().views([
+            // Default form view
+            S.view.form(),
+            // Preview
+            S.view.component(Iframe).options(iframeOptions).title('Preview'),
+          ])
+        }
+
+        return null
+      },
+    }),
+    // Configures the global "new document" button, and document actions, to suit the Settings document singleton
+    singletonPlugin([home.name]),
+
+    // Add the "Open preview" action
+    previewUrl({
+      base: PREVIEW_BASE_URL,
+      urlSecretId: previewSecretId,
+      matchTypes: PREVIEWABLE_DOCUMENT_TYPES,
+    }),
    media(),
-    ...(isDev ? devOnlyPlugins : []),
+    // ...(isDev ? devOnlyPlugins : []),
    documentInternationalization({
      // Required, either:
      // An array of supported languages
@ -48,10 +124,6 @@ export default defineConfig({
        'utilityMenu',
        'search'
      ],
-      // Optional
-      // languageField: `language`, // defauts to "language"
-      // Optional, requires access to the Publishing API
-      // bulkPublish: true // defaults to false
    }),
  ],
  schema: {
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -1,5 +1,5 @@
 /** @type {import('tailwindcss').Config} */
-const { fontFamily } = require('tailwindcss/defaultTheme')
+const { fontFamily } = require('tailwindcss/defaultTheme');
 const plugin = require('tailwindcss/plugin');

 module.exports = {
@ -21,7 +21,7 @@ module.exports = {
      '3xl': '1.75rem',
      '4xl': '2rem',
      '5xl': '3rem',
-      '6xl': '4rem',
+      '6xl': '4rem'
    },
    extend: {
      colors: {
@ -42,62 +42,34 @@ module.exports = {
        red: '#ec5d40',
        yellow: '#ffcb47',
        // UI.SHADCN.COM
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))'
      },
      textColor: {
        base: '#333333',
        'low-contrast': '#585858',
-        'high-contrast': '#333333',
+        'high-contrast': '#333333'
      },
      fontFamily: {
        sans: ['var(--font-inter)', ...fontFamily.sans],
-        display: ['var(--font-inter-tight)', ...fontFamily.sans],
+        display: ['var(--font-inter-tight)', ...fontFamily.sans]
      },
      keyframes: {
-        "accordion-down": {
+        'accordion-down': {
          from: { height: 0 },
-          to: { height: "var(--radix-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: 0 },
+          to: { height: 'var(--radix-accordion-content-height)' }
        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: 0 }
+        }
      },
      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out'
      },
      typography: {
        DEFAULT: {
@ -107,13 +79,13 @@ module.exports = {
              textDecoration: 'underline',
              color: '#3182ce',
              '&:hover': {
-                color: '#2c5282',
-              },
-            },
-          },
-        },
-      },
-    },
+                color: '#2c5282'
+              }
+            }
+          }
+        }
+      }
+    }
  },
  plugins: [
    require('tailwindcss-animate'),
@ -135,5 +107,5 @@ module.exports = {
  ],
  future: {
    hoverOnlyWhenSupported: true
-  },
-}
+  }
+};