289 lines
7.9 KiB
Markdown
289 lines
7.9 KiB
Markdown
# 🌸 Pivoine Docs Hub
|
|
|
|
A stunning, modern documentation hub landing page for all Pivoine projects by Valknar. Built with Next.js 15, React 19, TypeScript, and Tailwind CSS 4.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## ✨ Features
|
|
|
|
- **Modern Stack**: Built with Next.js 15 App Router, React 19, TypeScript, and Tailwind CSS 4
|
|
- **Stunning Design**: Glassmorphism effects, gradient animations, and interactive elements
|
|
- **Custom Branding Icon**: Beautiful animated peony flower icon with documentation elements 🌸
|
|
- **Responsive**: Fully responsive design that works on all devices
|
|
- **Performance Optimized**: Turbopack for lightning-fast dev builds, image optimization, and production-ready configuration
|
|
- **SEO Ready**: Comprehensive metadata and Open Graph tags
|
|
- **Type Safe**: Full TypeScript support for better developer experience
|
|
- **Developer Experience**: Hot reload, fast refresh, and excellent tooling
|
|
|
|
## 🎨 Design Highlights
|
|
|
|
- **Interactive Background**: Mouse-tracking animated orbs that follow cursor movement
|
|
- **Glassmorphism**: Frosted glass aesthetic with backdrop blur effects
|
|
- **Smooth Animations**: Hover effects, scale transitions, and gradient animations
|
|
- **Modern Color Scheme**: Purple and pink gradients with dark theme
|
|
- **Clean Typography**: Inter font family for optimal readability
|
|
- **Custom Scrollbar**: Styled scrollbar matching the site theme
|
|
|
|
## 📁 Project Structure
|
|
|
|
```
|
|
pivoine-docs-hub/
|
|
├── app/ # Next.js App Router directory
|
|
│ ├── globals.css # Global styles and Tailwind imports
|
|
│ ├── layout.tsx # Root layout with metadata
|
|
│ └── page.tsx # Main landing page component
|
|
├── components/ # Reusable React components
|
|
│ ├── icons/ # Custom animated project icons
|
|
│ │ ├── KomposeIcon.tsx
|
|
│ │ └── index.ts
|
|
│ └── README.md
|
|
├── public/ # Static assets (add your images here)
|
|
├── eslint.config.mjs # ESLint configuration (flat config)
|
|
├── .gitignore # Git ignore rules
|
|
├── next.config.js # Next.js configuration
|
|
├── package.json # Project dependencies
|
|
├── postcss.config.js # PostCSS configuration
|
|
├── tailwind.config.js # Tailwind CSS configuration
|
|
├── tsconfig.json # TypeScript configuration
|
|
└── README.md # This file
|
|
```
|
|
|
|
## 🚀 Getting Started
|
|
|
|
### Prerequisites
|
|
|
|
- **Node.js**: 18.18.0 or higher
|
|
- **pnpm**: 8.0.0 or higher (recommended package manager)
|
|
|
|
### Installation
|
|
|
|
1. **Clone the repository** (if not already):
|
|
```bash
|
|
cd /home/valknar/Projects/docs.pivoine.art
|
|
```
|
|
|
|
2. **Install dependencies**:
|
|
```bash
|
|
pnpm install
|
|
```
|
|
|
|
3. **Start the development server**:
|
|
```bash
|
|
pnpm dev
|
|
```
|
|
|
|
4. **Open your browser** and navigate to:
|
|
```
|
|
http://localhost:3000
|
|
```
|
|
|
|
The page will automatically reload when you make changes to the code.
|
|
|
|
## 📦 Available Scripts
|
|
|
|
- **`pnpm dev`** - Start the development server on http://localhost:3000
|
|
- **`pnpm build`** - Build the application for production
|
|
- **`pnpm start`** - Start the production server (run after `build`)
|
|
- **`pnpm lint`** - Run ESLint to check code quality
|
|
- **`pnpm type-check`** - Run TypeScript compiler to check types
|
|
|
|
## 🛠️ Configuration
|
|
|
|
### Next.js 15 Configuration
|
|
|
|
The `next.config.js` includes:
|
|
- React Strict Mode for identifying potential problems
|
|
- **Turbopack**: Lightning-fast bundler enabled by default in dev mode (`--turbopack` flag)
|
|
- Automatic console removal in production
|
|
- Security headers (X-Frame-Options, CSP, etc.)
|
|
- Image optimization with AVIF and WebP support
|
|
- React 19 support with improved performance
|
|
|
|
### TypeScript Configuration
|
|
|
|
TypeScript is configured for strict mode with:
|
|
- Path aliases (`@/*` points to root directory)
|
|
- Next.js plugin for optimal type checking
|
|
- Strict type checking enabled
|
|
|
|
### Tailwind CSS 4
|
|
|
|
Tailwind CSS 4 uses a new CSS-first configuration approach:
|
|
- Configuration via `@theme` in CSS files instead of JavaScript
|
|
- No more bulky config file needed (minimal config for content paths only)
|
|
- Built-in CSS variable support
|
|
- Faster build times and smaller bundle sizes
|
|
- Import with `@import "tailwindcss"` instead of `@tailwind` directives
|
|
|
|
## 📝 Adding New Documentation Sites
|
|
|
|
To add a new documentation project to the hub:
|
|
|
|
1. **Open `app/page.tsx`**
|
|
2. **Add a new project** to the `projects` array:
|
|
|
|
```typescript
|
|
const projects = [
|
|
{
|
|
name: 'Kompose',
|
|
status: 'Active',
|
|
description: 'Comprehensive documentation for Kompose project',
|
|
url: '/kompose',
|
|
gradient: 'from-violet-500 to-purple-600'
|
|
},
|
|
{
|
|
name: 'Your New Project',
|
|
status: 'Active',
|
|
description: 'Description of your new project',
|
|
url: '/your-project',
|
|
gradient: 'from-blue-500 to-cyan-600'
|
|
}
|
|
]
|
|
```
|
|
|
|
3. **Create the documentation** at the specified path (e.g., `/kompose`)
|
|
|
|
### Custom Project Icons
|
|
|
|
The **Kompose** project features a custom animated icon (`KomposeIcon`) with:
|
|
- Interactive hover effects with glowing animations
|
|
- Click/tap interactions with ripple effects
|
|
- Pulsing status indicator
|
|
- 3D rotation on interaction
|
|
|
|
To add a custom icon for your project:
|
|
1. Create your icon component in `components/icons/YourIcon.tsx`
|
|
2. Export it in `components/icons/index.ts`
|
|
3. Import and conditionally render it in `app/page.tsx`
|
|
|
|
See [components/README.md](components/README.md) for detailed instructions.
|
|
|
|
## 🎯 Deployment
|
|
|
|
### Building for Production
|
|
|
|
```bash
|
|
pnpm build
|
|
```
|
|
|
|
This creates an optimized production build in the `.next` directory.
|
|
|
|
### Starting Production Server
|
|
|
|
```bash
|
|
pnpm start
|
|
```
|
|
|
|
### Deployment Platforms
|
|
|
|
This project can be deployed to:
|
|
|
|
#### **Vercel** (Recommended)
|
|
```bash
|
|
# Install Vercel CLI
|
|
pnpm add -g vercel
|
|
|
|
# Deploy
|
|
vercel
|
|
```
|
|
|
|
#### **Netlify**
|
|
```bash
|
|
# Install Netlify CLI
|
|
pnpm add -g netlify-cli
|
|
|
|
# Deploy
|
|
netlify deploy --prod
|
|
```
|
|
|
|
#### **Docker**
|
|
Create a `Dockerfile`:
|
|
```dockerfile
|
|
FROM node:18-alpine AS base
|
|
|
|
# Install pnpm
|
|
RUN npm install -g pnpm
|
|
|
|
# Dependencies
|
|
FROM base AS deps
|
|
WORKDIR /app
|
|
COPY package.json pnpm-lock.yaml ./
|
|
RUN pnpm install --frozen-lockfile
|
|
|
|
# Builder
|
|
FROM base AS builder
|
|
WORKDIR /app
|
|
COPY --from=deps /app/node_modules ./node_modules
|
|
COPY . .
|
|
RUN pnpm build
|
|
|
|
# Runner
|
|
FROM base AS runner
|
|
WORKDIR /app
|
|
ENV NODE_ENV production
|
|
COPY --from=builder /app/public ./public
|
|
COPY --from=builder /app/.next/standalone ./
|
|
COPY --from=builder /app/.next/static ./.next/static
|
|
|
|
EXPOSE 3000
|
|
CMD ["node", "server.js"]
|
|
```
|
|
|
|
## 🔧 Customization
|
|
|
|
### Changing Colors
|
|
|
|
Edit the gradient colors in `app/page.tsx`:
|
|
```typescript
|
|
gradient: 'from-violet-500 to-purple-600' // Change these Tailwind classes
|
|
```
|
|
|
|
### Modifying Metadata
|
|
|
|
Update SEO metadata in `app/layout.tsx`:
|
|
```typescript
|
|
export const metadata: Metadata = {
|
|
title: 'Your Custom Title',
|
|
description: 'Your custom description',
|
|
// ... other metadata
|
|
}
|
|
```
|
|
|
|
### Custom Fonts
|
|
|
|
The project uses Inter font by default. To change:
|
|
```typescript
|
|
import { YourFont } from 'next/font/google'
|
|
|
|
const yourFont = YourFont({ subsets: ['latin'] })
|
|
```
|
|
|
|
## 🔗 Links
|
|
|
|
- **Live Site**: https://docs.pivoine.art
|
|
- **Blog**: http://pivoine.art
|
|
- **Source Code**: https://code.pivoine.art
|
|
- **Kompose Docs**: https://docs.pivoine.art/kompose
|
|
|
|
## 🤝 Contributing
|
|
|
|
This is a personal project by Valknar. For suggestions or issues, please reach out through [pivoine.art](http://pivoine.art).
|
|
|
|
## 📄 License
|
|
|
|
Copyright © 2025 Valknar. All rights reserved.
|
|
|
|
## 🙏 Acknowledgments
|
|
|
|
- **Next.js** - The React Framework for Production
|
|
- **Tailwind CSS** - A utility-first CSS framework
|
|
- **Lucide React** - Beautiful & consistent icons
|
|
- **Vercel** - Platform for deploying Next.js applications
|
|
|
|
---
|
|
|
|
**Built with ❤️ by Valknar** | [pivoine.art](http://pivoine.art)
|