Page Document Schema
Relevant source files
The following files were used as context for generating this wiki page:
The Page Document Schema defines the structure for static content pages within the personal website. It is designed to be a flexible content type that supports structured text, SEO-friendly metadata, and modular components like timelines and images. These documents are managed through Sanity Studio and rendered dynamically in the Next.js frontend using catch-all slug routes.
Sources: sanity/schemas/documents/page.ts:1-123, app/(personal)/[slug]/page.tsx:1-60
Schema Definition and Structure
The page schema is a core document type registered in the Sanity configuration. It utilizes standard Sanity field types such as string, slug, and array of blocks (Portable Text).
Field Specifications
| Field Name | Type | Description | Constraints |
|---|---|---|---|
title | string | The display title of the page. | Required |
slug | slug | The URL path component, generated from the title. | Required, Unique |
overview | array | A short summary used for SEO meta descriptions and page subheaders. | Required, Max 155 chars |
body | array | The main content area supporting Portable Text, images, and timelines. | Optional |
Sources: sanity/schemas/documents/page.ts:11-120, schema.json:499-800
Content Composition
The body field is a versatile array that allows editors to mix different content types. It includes:
- Block Content: Standard text with support for links and basic styling.
- Timeline: A custom object type for displaying chronological events.
- Image: Rich media support with captions, alt text, and hotspot cropping.
Sources: sanity/schemas/documents/page.ts:58-120, sanity.types.ts:145-177
Data Relationships and Hierarchy
The Page schema exists within a broader content ecosystem where it can be referenced by other documents, such as site settings for navigation.
Diagram showing the relationship between the Page document and other architectural components.
Sources: sanity.types.ts:145-212, sanity/schemas/documents/page.ts:58-120
Implementation and Retrieval
Pages are retrieved from the Sanity Content Lake using GROQ queries based on their unique slug.
Data Fetching Flow
Diagram illustrating the process of resolving a URL slug to a Page document.
Sources: app/(personal)/[slug]/page.tsx:39-60, sanity/lib/queries.ts:22-30
Query Structure
The pagesBySlugQuery specifically selects the ID, type, body, overview, title, and the string value of the slug to ensure efficient data transfer.
export const pagesBySlugQuery = defineQuery(`
*[_type == "page" && slug.current == $slug][0] {
_id,
_type,
body,
overview,
title,
"slug": slug.current,
}
`)
Sources: sanity/lib/queries.ts:22-30
Presentation and Metadata
The schema includes a preview configuration for Sanity Studio to provide a better authoring experience, displaying the page title and a "Page" subtitle in document lists. For the frontend, metadata is generated dynamically using the overview field to populate the HTML description tag.
Sources: sanity/schemas/documents/page.ts:124-135, app/(personal)/[slug]/page.tsx:17-29
Technical Integration Summary
| Component | Role | File Reference |
|---|---|---|
| Studio Config | Registers the page type in the editor. | sanity.config.ts:42 |
| Type Definitions | Provides TypeScript safety for page data. | sanity.types.ts:145-177 |
| Live Fetching | Handles revalidation and draft mode. | app/(personal)/[slug]/page.tsx:39 |
| Resolver | Maps document types to frontend routes. | sanity/plugins/resolve.ts:15-18 |
Sources: sanity.config.ts:42, sanity.types.ts:145-177, app/(personal)/[slug]/page.tsx:39, sanity/plugins/resolve.ts:15-18
The Page Document Schema serves as the foundation for non-project content, bridging the gap between flexible authoring in Sanity and structured rendering in Next.js.