# Radiant

Radiant is a [Tailwind Plus](https://tailwindcss.com/plus) site template built using [Tailwind CSS](https://tailwindcss.com) and [Next.js](https://nextjs.org), with a blog powered by [Sanity](https://www.sanity.io).

## Prerequisites

- Node.js 18.17 or later
- npm 9.0.0 or later

## Getting started

To get started with this template, first install the npm dependencies:

```bash
npm install
```

For optimal compatibility, you may need to install specific versions of the dependencies:

```bash
npm install next@14.2.0 --legacy-peer-deps
npm install -D tailwindcss@3.3.3 postcss@8.4.31 autoprefixer@10.4.16 --legacy-peer-deps
```

### Setting up Sanity

Next, create a new Sanity project to power the blog within this template:

```bash
npm create sanity@latest -- --env=.env.local --create-project "Radiant Blog" --dataset production
```

This will prompt you to create a new Sanity account if you don't have one already. When asked "Would you like to add configuration files for a Sanity project in this Next.js folder?", choose "n".

### Environment Variables

After setting up Sanity, ensure your `.env.local` file contains the necessary environment variables:

```plaintext
NEXT_PUBLIC_SANITY_PROJECT_ID=your_project_id
NEXT_PUBLIC_SANITY_DATASET=production
SANITY_API_READ_TOKEN=your_api_token
```

### Demo Content (Optional)

To import the demo seed data for the blog:

```bash
npx sanity@latest dataset import seed.tar.gz
```

## Development

To start the development server:

```bash
npm run dev
```

This will start:
- Next.js frontend at [http://localhost:3000](http://localhost:3000)
- Sanity Studio at [http://localhost:3000/studio](http://localhost:3000/studio)

## Available Scripts

- `npm run dev` - Start development server
- `npm run build` - Build for production
- `npm run start` - Start production server
- `npm run lint` - Run ESLint
- `npm run typegen` - Generate Sanity schema types

## Project Structure

```
├── public/          # Static assets
├── src/
│   ├── app/         # Next.js app router pages
│   ├── components/  # React components
│   ├── sanity/      # Sanity configuration and schemas
│   └── styles/      # Global styles
└── sanity.config.ts # Sanity configuration
```

## Customizing

You can start editing this template by modifying the files in the `/src` folder. The site will auto-update as you edit these files.

### Key Files for Customization

- `src/app/layout.tsx` - Main layout component
- `src/app/page.tsx` - Homepage
- `src/styles/tailwind.css` - Global styles
- `src/sanity/schema.ts` - Sanity content schema

## License

This site template is a commercial product and is licensed under the [Tailwind Plus license](https://tailwindcss.com/plus/license).

## Learn more

To learn more about the technologies used in this site template, see the following resources:

- [Tailwind CSS](https://tailwindcss.com/docs) - the official Tailwind CSS documentation
- [Next.js](https://nextjs.org/docs) - the official Next.js documentation
- [Headless UI](https://headlessui.dev) - the official Headless UI documentation
- [Sanity](https://www.sanity.io) - the Sanity website

## Troubleshooting

### Common Issues

1. If you encounter EACCES permission errors during installation:
   ```bash
   npm install --legacy-peer-deps
   ```

2. If you see TypeScript errors after installation:
   ```bash
   npm run typegen
   ```

3. For Sanity Studio connection issues, verify your environment variables and ensure you're logged in:
   ```bash
   npx sanity login
   ```

4. If you encounter Tailwind CSS compilation issues:
   - Ensure you have the correct versions of dependencies installed
   - Check that postcss.config.js and tailwind.config.js are properly configured
   - Try clearing the Next.js cache: `rm -rf .next` and restart the development server