132 lines
3.8 KiB
Markdown
132 lines
3.8 KiB
Markdown
# 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
|