OS Presenter Site

A modern Next.js website with an integrated Sanity Studio for managing content for your open source project.

Features

• 🎨 Flexible Page Builder - Create pages with modular sections
• 📝 Rich Content Editing - Sanity Studio embedded at /studio
• 🚀 Modern Stack - Next.js 15 with App Router, TypeScript, Tailwind CSS
• 🎯 Reusable Components - Hero, Features, Downloads, and Content sections
• 💾 Type-Safe - Full TypeScript support throughout
• 🎭 Beautiful UI - Built with shadcn/ui components

Getting Started

Prerequisites

• Node.js 18+ installed
• A Sanity account (free tier available)

Installation

1. Clone this repository
2. Install dependencies:

npm install

3. Set up environment variables:

The .env.local file should already contain:

NEXT_PUBLIC_SANITY_PROJECT_ID=sv33tywo
NEXT_PUBLIC_SANITY_DATASET=production
NEXT_PUBLIC_SANITY_API_VERSION=2024-01-01

Development

Run the development server:

npm run dev

Open http://localhost:3000 to see your site.

Access Sanity Studio at http://localhost:3000/studio

Content Management

Creating Your First Page

1. Go to http://localhost:3000/studio
2. Click on "Page" in the sidebar
3. Click "Create new document"
4. Set the slug to / for the homepage
5. Add sections to build your page:
   • Hero Section - Main banner with heading, image, and CTA buttons
   • Features Section - Showcase key features with icons and descriptions
   • Download Section - OS-specific download links for your releases
   • Content Block - Rich text content with images

Site Settings

1. In Sanity Studio, click on "Site Settings"
2. Add your project title, description, GitHub URL, and social links
3. Upload a logo if desired

Project Structure

├── app/
│   ├── layout.tsx          # Root layout with metadata
│   ├── page.tsx            # Homepage (fetches Sanity content)
│   └── studio/             # Sanity Studio route
├── components/
│   ├── sections/           # Section components (Hero, Features, etc.)
│   ├── ui/                 # shadcn/ui components
│   └── portable-text.tsx   # Rich text renderer
├── lib/
│   ├── sanity.client.ts    # Sanity client configuration
│   ├── sanity.image.ts     # Image URL builder
│   ├── sanity.queries.ts   # GROQ queries
│   └── types.ts            # TypeScript types
├── schemaTypes/
│   ├── page.ts             # Page document schema
│   ├── siteSettings.ts     # Site settings schema
│   ├── downloadLink.ts     # Download link object
│   └── sections/           # Section schemas
└── sanity.config.ts        # Sanity Studio configuration

Schemas

Page

Main content type with flexible sections. Set slug to / for homepage.

Page Sections

• Hero Section - Large banner with heading, description, image, and CTA buttons
• Features Section - Grid of features with icons and descriptions
• Download Section - OS-specific download links (macOS, Windows, Linux)
• Content Block - Rich text content with formatting and images

Site Settings

Global settings including site title, description, GitHub URL, and social links.

Customization

Adding New Components

1. Create a new schema in schemaTypes/sections/
2. Add it to schemaTypes/index.ts
3. Create a React component in components/sections/
4. Add it to the SectionRenderer component
5. Update TypeScript types in lib/types.ts

Styling

The project uses Tailwind CSS with shadcn/ui. Customize colors in app/globals.css.

Deployment

Deploy to Vercel

1. Push your code to GitHub
2. Import your repository in Vercel
3. Add environment variables
4. Deploy!

Environment Variables

Make sure to set these in your deployment platform:

• NEXT_PUBLIC_SANITY_PROJECT_ID
• NEXT_PUBLIC_SANITY_DATASET
• NEXT_PUBLIC_SANITY_API_VERSION

Learn More

• Next.js Documentation
• Sanity Documentation
• Tailwind CSS
• shadcn/ui

License

MIT