DOCSEARCHbyAlgolia
Submit Docs

Rotunde Documentation

website·Indexed 29 days ago

https://rotunde-docs.vercel.app

Technical documentation for the Rotunde project, featuring a web application built with Astro and React, and a Sanity v3 CMS integration. Includes guides on schema definitions, plugin configuration, development package structure, and a coding agent prompt for building a Wine Café & Hi-Fi Bar website using Next.js and Vercel.

Tokens
6.7K
Snippets
23
Records
50
Agent score
70%

What's inside Rotunde

  1. Web App technology stack and architecture

    The public site is located in apps/web/ and is built as an Astro 5 application. It uses React 19 for interactive components (islands), UnoCSS for utility-first styling (using wind and icons presets), and is deployed to Vercel using the @astrojs/vercel adapter.

  2. Use Sanity built-in Structure and Vision tools

    The Sanity Studio includes two primary built-in tools:

    1. Structure Tool (structureTool()): The default navigation interface for document types, listing, and filtering.
    2. Vision Tool (visionTool()): A GROQ query interface used for testing queries, exploring the dataset, and debugging.

  3. Locate and manage Sanity schema types

    Sanity schema types are located in packages/sanity/src/schema/. The project distinguishes between documents (content types) and objects (reusable embedded types). The main entry point for all schema types is the schemaTypes export in schema/index.ts.
    packages/sanity/src/schema/
├── index.ts           # schemaTypes = [...schemaDocuments, ...schemaObjects]
├── documents/         # Exports schemaDocuments (e.g., settings.ts, artist.ts, event.ts)
└── objects/            # Exports schemaObjects

  4. Use Sanity built-in tools for structure and querying

    Sanity provides two primary built-in tools:

    1. Structure Tool (structureTool()): The default navigation interface for document types, listing, and filtering.
    2. Vision Tool (visionTool()): A GROQ query interface used for testing queries, exploring the dataset, and debugging.

  5. Use Sanity CMS core tools and plugins

    The Studio includes several built-in tools and plugins to enhance content management:

    Core Tools:

    • Structure Tool: Handles document listing and navigation, including a 'References' view for each document.
    • Vision Tool: A built-in GROQ query runner for testing data fetches.

    Installed Plugins:

    • Media: Provides a media browser.
    • Singleton Management: Manages singleton documents (e.g., Settings).
    • Tags: Adds tag fields and related helpers.
    • User Select: Provides a user picker for fields like 'Created by' on Pages.
    • References: Enables reference exploration and document view.

  6. Wine Café & Hi-Fi Bar project tech stack

    The project is architected as a production-grade marketing and discovery platform for a premium hospitality brand. It uses a modern headless CMS approach to allow non-technical editors to manage content while maintaining high performance and SEO.
    Frontend Framework: Next.js 14+ (App Router, React Server Components)
CMS: Sanity v3 (Studio embedded at /studio)
Language: TypeScript (strict mode)
Styling: Tailwind CSS v3
Image Handling: Sanity image pipeline + Next.js <Image>
Deployment: Vercel
Package Manager: pnpm
Linting/Formatting: ESLint + Prettier
Future E-commerce: Stripe

  7. Avoid anti-patterns in Next.js App Router and Sanity projects

    To maintain a modern App Router architecture, avoid the following:

    • Routing: Do not use the pages/ directory; use the App Router exclusively.
    • Data Fetching: Do not use getServerSideProps or getStaticProps. Avoid useEffect + fetch in Client Components unless absolutely necessary; prefer React Server Components (RSC).
    • Libraries: Use native fetch instead of axios. Use Tailwind CSS exclusively instead of CSS Modules or styled-components.
    • Security: Never store secrets in variables prefixed with NEXT_PUBLIC_. Do not commit .env.local (commit .env.local.example instead).
    • Dependencies: Do not add unnecessary packages without clear justification.

  8. Understand Sanity CMS project architecture

    The Sanity CMS is structured across the monorepo as follows:

    • Core Package: packages/sanity/ contains the main logic.
    • Studio App: apps/studio/ serves as the entry point and re-exports the configuration via export { default } from '@repo/sanity'.
    • Schema Definitions: Located in packages/sanity/src/schema/, organized into documents/ and objects/, with a central index.ts.
    • Utilities: Field groups for 'Settings' and 'Page' are managed in packages/sanity/src/utils/groups.ts.

  9. Apply Component Architecture Rules for Next.js App Router

    Follow these architectural constraints to ensure performance and maintainability:

    1. Server-First: Use Server Components by default. Use 'use client' only for leaf nodes requiring interactivity (e.g., lightboxes, mobile menus, forms).
    2. Styling: Use Tailwind CSS exclusively. Use a cn() utility (combining clsx and tailwind-merge) for conditional classes.
    3. Images: Always use next/image with meaningful alt text from Sanity and appropriate sizes attributes.
    4. Loading/Error States: Use loading.tsx for route-level Suspense and <Suspense> with skeleton fallbacks for async components. Use error.tsx at the route group level.
    5. Typing: Use strict TypeScript. Generate types from Sanity schemas via @sanity/types or sanity-codegen.
    // lib/utils.ts
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

  10. Scaffold Future E-commerce Integration

    To prepare for future Stripe/e-commerce integration without restructuring the app, implement the following stubs:

    • Schema: Ensure event and menuItem schemas include price and ticketUrl fields.
    • API: Create a stub /api/checkout/route.ts returning { error: 'Not yet implemented' }.
    • Context: Implement a CartProvider in components/providers/CartProvider.tsx that exports a useCart() hook returning an empty cart.
    • UI: Render a "Buy Tickets" button on event detail pages linking to ticketUrl as a placeholder for the Stripe checkout flow.
    // components/providers/CartProvider.tsx
export const CartProvider = ({ children }) => {
  // Stub for future Stripe integration
  return <CartContext.Provider value={{ cart: [], useCart: () => [] }}>{children}</CartContext.Provider>
};

  11. Configure SEO and Structured Data for Next.js and Sanity

    Implement SEO using Next.js generateMetadata() by pulling metaTitle and metaDescription from the Sanity seo object. Ensure Open Graph tags (og:title, og:description, og:image, og:type) and canonical URLs are present.

    JSON-LD Structured Data Requirements:

    • Homepage: LocalBusiness schema (name, address, opening hours, geo coordinates).
    • Events: Event schema (name, startDate, location, offers).
    • Blog posts: Article schema.

    Additionally, create a sitemap.ts using MetadataRoute.Sitemap to dynamically fetch published slugs from Sanity, and a robots.ts that allows all crawling except for the /studio route.

  12. Add a new document type to the Sanity schema

    To add a new document type:

    1. Create a new schema file in packages/sanity/src/schema/documents/myDocument.ts using defineType.
    2. Import the new type in packages/sanity/src/schema/documents/index.ts and add it to the schemaDocuments array.
    // packages/sanity/src/schema/documents/myDocument.ts
export const myDocument = defineType({
  name: 'myDocument',
  type: 'document',
  fields: [...]
})