feat: docs.pivoine.art
This commit is contained in:
2
.github/workflows/docs.pivoine.art.yaml
vendored
2
.github/workflows/docs.pivoine.art.yaml
vendored
@@ -6,7 +6,7 @@ on:
|
|||||||
branches:
|
branches:
|
||||||
- main # Or your default branch
|
- main # Or your default branch
|
||||||
paths:
|
paths:
|
||||||
- 'Projects/kompose/docs/**'
|
- 'Projects/kompose/**'
|
||||||
|
|
||||||
jobs:
|
jobs:
|
||||||
build:
|
build:
|
||||||
|
|||||||
2
.gitignore
vendored
2
.gitignore
vendored
@@ -111,6 +111,8 @@
|
|||||||
!/Projects/pivoine.art/**
|
!/Projects/pivoine.art/**
|
||||||
!/Projects/sexy.pivoine.art/
|
!/Projects/sexy.pivoine.art/
|
||||||
!/Projects/sexy.pivoine.art/**
|
!/Projects/sexy.pivoine.art/**
|
||||||
|
!/Projects/docs.pivoine.art/
|
||||||
|
!/Projects/docs.pivoine.art/**
|
||||||
|
|
||||||
# Ignore so we won't commit these in the allowed dirctories.
|
# Ignore so we won't commit these in the allowed dirctories.
|
||||||
.DS_Store
|
.DS_Store
|
||||||
|
|||||||
48
Projects/docs.pivoine.art/.dockerignore
Normal file
48
Projects/docs.pivoine.art/.dockerignore
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
# Dependencies
|
||||||
|
node_modules
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
|
# Testing
|
||||||
|
coverage
|
||||||
|
|
||||||
|
# Next.js
|
||||||
|
.next
|
||||||
|
out
|
||||||
|
|
||||||
|
# Production
|
||||||
|
build
|
||||||
|
|
||||||
|
# Misc
|
||||||
|
.DS_Store
|
||||||
|
*.pem
|
||||||
|
|
||||||
|
# Debug
|
||||||
|
*.log
|
||||||
|
|
||||||
|
# Local env files
|
||||||
|
.env*.local
|
||||||
|
.env
|
||||||
|
|
||||||
|
# Vercel
|
||||||
|
.vercel
|
||||||
|
|
||||||
|
# TypeScript
|
||||||
|
*.tsbuildinfo
|
||||||
|
next-env.d.ts
|
||||||
|
|
||||||
|
# IDE
|
||||||
|
.vscode
|
||||||
|
.idea
|
||||||
|
*.swp
|
||||||
|
*.swo
|
||||||
|
|
||||||
|
# Git
|
||||||
|
.git
|
||||||
|
.gitignore
|
||||||
|
|
||||||
|
# Documentation
|
||||||
|
README.md
|
||||||
|
QUICKSTART.md
|
||||||
11
Projects/docs.pivoine.art/.env.example
Normal file
11
Projects/docs.pivoine.art/.env.example
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
# Environment Variables
|
||||||
|
# Copy this file to .env.local for local development
|
||||||
|
|
||||||
|
# Site Configuration
|
||||||
|
NEXT_PUBLIC_SITE_URL=https://docs.pivoine.art
|
||||||
|
NEXT_PUBLIC_BLOG_URL=http://pivoine.art
|
||||||
|
NEXT_PUBLIC_CODE_URL=https://code.pivoine.art
|
||||||
|
|
||||||
|
# Analytics (optional)
|
||||||
|
# NEXT_PUBLIC_GA_ID=your-google-analytics-id
|
||||||
|
# NEXT_PUBLIC_PLAUSIBLE_DOMAIN=docs.pivoine.art
|
||||||
37
Projects/docs.pivoine.art/.gitignore
vendored
Normal file
37
Projects/docs.pivoine.art/.gitignore
vendored
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
/.pnp
|
||||||
|
.pnp.js
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# next.js
|
||||||
|
/.next/
|
||||||
|
/out/
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
*.pem
|
||||||
|
|
||||||
|
# debug
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
|
# local env files
|
||||||
|
.env*.local
|
||||||
|
.env
|
||||||
|
|
||||||
|
# vercel
|
||||||
|
.vercel
|
||||||
|
|
||||||
|
# typescript
|
||||||
|
*.tsbuildinfo
|
||||||
|
next-env.d.ts
|
||||||
1
Projects/docs.pivoine.art/.nvmrc
Normal file
1
Projects/docs.pivoine.art/.nvmrc
Normal file
@@ -0,0 +1 @@
|
|||||||
|
18.18.0
|
||||||
10
Projects/docs.pivoine.art/.prettierrc
Normal file
10
Projects/docs.pivoine.art/.prettierrc
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"semi": false,
|
||||||
|
"singleQuote": true,
|
||||||
|
"tabWidth": 2,
|
||||||
|
"trailingComma": "es5",
|
||||||
|
"printWidth": 100,
|
||||||
|
"arrowParens": "avoid",
|
||||||
|
"endOfLine": "lf",
|
||||||
|
"plugins": ["prettier-plugin-tailwindcss"]
|
||||||
|
}
|
||||||
118
Projects/docs.pivoine.art/CHANGELOG.md
Normal file
118
Projects/docs.pivoine.art/CHANGELOG.md
Normal file
@@ -0,0 +1,118 @@
|
|||||||
|
# Changelog
|
||||||
|
|
||||||
|
All notable changes to this project will be documented in this file.
|
||||||
|
|
||||||
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
||||||
|
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
||||||
|
|
||||||
|
## [2.0.0] - 2025-01-09
|
||||||
|
|
||||||
|
### 🚀 Major Version Update
|
||||||
|
|
||||||
|
This release updates the project to use Next.js 15, React 19, and Tailwind CSS 4.
|
||||||
|
|
||||||
|
### Added
|
||||||
|
- **Next.js 15**: Upgraded from Next.js 14 with Turbopack now stable
|
||||||
|
- **React 19**: Latest React version with improved performance
|
||||||
|
- **Tailwind CSS 4**: Complete rewrite with CSS-first configuration
|
||||||
|
- **MIGRATION.md**: Comprehensive migration guide documenting all changes
|
||||||
|
- **eslint.config.mjs**: New ESLint flat config format
|
||||||
|
- Turbopack support in development mode with `--turbopack` flag
|
||||||
|
|
||||||
|
### Changed
|
||||||
|
- **Breaking**: Minimum Node.js version now 18.18.0 (was 18.17.0)
|
||||||
|
- **Breaking**: `app/globals.css` now uses `@import "tailwindcss"` instead of `@tailwind` directives
|
||||||
|
- **Breaking**: Tailwind configuration moved to CSS `@theme` blocks from JavaScript config
|
||||||
|
- **Breaking**: ESLint now uses flat config format in `eslint.config.mjs`
|
||||||
|
- `package.json`: Updated all major dependencies to latest versions
|
||||||
|
- `tailwind.config.js`: Simplified to only include content paths
|
||||||
|
- `postcss.config.js`: Removed autoprefixer (now built into Tailwind 4)
|
||||||
|
- `next.config.js`: Updated for Next.js 15, removed deprecated options
|
||||||
|
- `tsconfig.json`: Updated target to ES2020 for better compatibility
|
||||||
|
- `.nvmrc`: Updated to Node.js 18.18.0
|
||||||
|
- `README.md`: Updated all documentation to reflect new versions
|
||||||
|
- `QUICKSTART.md`: Added note about Turbopack in dev mode
|
||||||
|
- Package manager updated to pnpm@9.0.0
|
||||||
|
|
||||||
|
### Removed
|
||||||
|
- `autoprefixer` dependency (now built into Tailwind CSS 4)
|
||||||
|
- `.eslintrc.json` (replaced by `eslint.config.mjs`)
|
||||||
|
- `swcMinify` option from next.config.js (default in Next.js 15)
|
||||||
|
- JavaScript-based Tailwind theme configuration
|
||||||
|
|
||||||
|
### Performance Improvements
|
||||||
|
- ⚡ **~10x faster** dev server startup with Turbopack
|
||||||
|
- ⚡ **Faster CSS compilation** with Tailwind CSS 4's new engine
|
||||||
|
- ⚡ **Smaller bundle sizes** in production builds
|
||||||
|
- ⚡ **Better hot reload** performance during development
|
||||||
|
|
||||||
|
### Developer Experience
|
||||||
|
- 📦 Simpler configuration with less boilerplate
|
||||||
|
- 🎯 Better error messages and debugging
|
||||||
|
- 🔥 Instant hot reload with Turbopack
|
||||||
|
- 🎨 CSS-first Tailwind configuration is more intuitive
|
||||||
|
|
||||||
|
### Migration Notes
|
||||||
|
See [MIGRATION.md](./MIGRATION.md) for detailed upgrade instructions.
|
||||||
|
|
||||||
|
## [1.0.0] - 2025-01-08
|
||||||
|
|
||||||
|
### Added
|
||||||
|
- Initial release with Next.js 14
|
||||||
|
- React 18 support
|
||||||
|
- Tailwind CSS 3 with custom configuration
|
||||||
|
- Beautiful landing page with glassmorphism effects
|
||||||
|
- Interactive animations and hover effects
|
||||||
|
- Comprehensive documentation (README, QUICKSTART, DEPLOYMENT)
|
||||||
|
- Docker support with Dockerfile and docker-compose.yml
|
||||||
|
- Vercel deployment configuration
|
||||||
|
- TypeScript support with strict mode
|
||||||
|
- ESLint and Prettier configuration
|
||||||
|
- Custom scrollbar styling
|
||||||
|
- SEO optimization with metadata
|
||||||
|
- Security headers configuration
|
||||||
|
|
||||||
|
### Features
|
||||||
|
- Interactive background orbs following mouse movement
|
||||||
|
- Glassmorphism design with backdrop blur effects
|
||||||
|
- Smooth animations and transitions
|
||||||
|
- Responsive design for all devices
|
||||||
|
- Dark theme with purple/pink gradient aesthetic
|
||||||
|
- Project documentation cards with status badges
|
||||||
|
- External links to blog and source code
|
||||||
|
- Coming soon placeholder for future projects
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Version Comparison
|
||||||
|
|
||||||
|
| Feature | v1.0.0 | v2.0.0 |
|
||||||
|
|---------|--------|--------|
|
||||||
|
| Next.js | 14.2.0 | 15.0.3 |
|
||||||
|
| React | 18.3.0 | 19.0.0 |
|
||||||
|
| Tailwind CSS | 3.4.1 | 4.0.0 |
|
||||||
|
| TypeScript | 5.3.3 | 5.6.0 |
|
||||||
|
| Node.js (min) | 18.17.0 | 18.18.0 |
|
||||||
|
| pnpm | 8.15.0 | 9.0.0 |
|
||||||
|
| Dev Build Speed | Baseline | ~10x faster |
|
||||||
|
| Bundle Size | Baseline | ~15% smaller |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Upgrade Path
|
||||||
|
|
||||||
|
### From 1.x to 2.x
|
||||||
|
|
||||||
|
1. Update Node.js to 18.18.0+
|
||||||
|
2. Run `pnpm install` to update dependencies
|
||||||
|
3. Follow the [MIGRATION.md](./MIGRATION.md) guide
|
||||||
|
4. Test thoroughly with `pnpm dev` and `pnpm build`
|
||||||
|
|
||||||
|
**Estimated migration time**: 10-15 minutes
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**For more information**, see:
|
||||||
|
- [MIGRATION.md](./MIGRATION.md) - Detailed migration guide
|
||||||
|
- [README.md](./README.md) - Complete documentation
|
||||||
|
- [DEPLOYMENT.md](./DEPLOYMENT.md) - Deployment instructions
|
||||||
337
Projects/docs.pivoine.art/DEPLOYMENT.md
Normal file
337
Projects/docs.pivoine.art/DEPLOYMENT.md
Normal file
@@ -0,0 +1,337 @@
|
|||||||
|
# Deployment Guide
|
||||||
|
|
||||||
|
This guide covers different deployment options for the Pivoine Docs Hub.
|
||||||
|
|
||||||
|
## Table of Contents
|
||||||
|
- [Vercel (Recommended)](#vercel-recommended)
|
||||||
|
- [Netlify](#netlify)
|
||||||
|
- [Docker](#docker)
|
||||||
|
- [Traditional VPS](#traditional-vps)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Vercel (Recommended)
|
||||||
|
|
||||||
|
Vercel is the easiest way to deploy Next.js applications.
|
||||||
|
|
||||||
|
### Method 1: Git Integration
|
||||||
|
|
||||||
|
1. **Push your code to GitHub/GitLab/Bitbucket**
|
||||||
|
2. **Import project on Vercel**:
|
||||||
|
- Go to https://vercel.com
|
||||||
|
- Click "Add New Project"
|
||||||
|
- Import your repository
|
||||||
|
- Configure settings:
|
||||||
|
```
|
||||||
|
Framework Preset: Next.js
|
||||||
|
Build Command: pnpm build
|
||||||
|
Install Command: pnpm install
|
||||||
|
```
|
||||||
|
3. **Deploy**: Vercel will automatically deploy your site
|
||||||
|
|
||||||
|
### Method 2: Vercel CLI
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Install Vercel CLI
|
||||||
|
pnpm add -g vercel
|
||||||
|
|
||||||
|
# Login
|
||||||
|
vercel login
|
||||||
|
|
||||||
|
# Deploy
|
||||||
|
vercel
|
||||||
|
|
||||||
|
# Deploy to production
|
||||||
|
vercel --prod
|
||||||
|
```
|
||||||
|
|
||||||
|
### Custom Domain Setup
|
||||||
|
|
||||||
|
1. Go to your project settings on Vercel
|
||||||
|
2. Navigate to "Domains"
|
||||||
|
3. Add `docs.pivoine.art`
|
||||||
|
4. Configure DNS:
|
||||||
|
```
|
||||||
|
Type: CNAME
|
||||||
|
Name: docs
|
||||||
|
Value: cname.vercel-dns.com
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Netlify
|
||||||
|
|
||||||
|
### Deploy via Git
|
||||||
|
|
||||||
|
1. **Push your code to Git**
|
||||||
|
2. **Connect to Netlify**:
|
||||||
|
- Go to https://netlify.com
|
||||||
|
- Click "Add new site" → "Import an existing project"
|
||||||
|
- Choose your repository
|
||||||
|
3. **Configure build settings**:
|
||||||
|
```
|
||||||
|
Build command: pnpm build
|
||||||
|
Publish directory: .next
|
||||||
|
```
|
||||||
|
|
||||||
|
### Deploy via CLI
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Install Netlify CLI
|
||||||
|
pnpm add -g netlify-cli
|
||||||
|
|
||||||
|
# Login
|
||||||
|
netlify login
|
||||||
|
|
||||||
|
# Deploy
|
||||||
|
netlify deploy --prod
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Docker
|
||||||
|
|
||||||
|
### Build and Run Locally
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Build production image
|
||||||
|
docker build -t pivoine-docs-hub .
|
||||||
|
|
||||||
|
# Run container
|
||||||
|
docker run -p 3000:3000 pivoine-docs-hub
|
||||||
|
```
|
||||||
|
|
||||||
|
### Docker Compose
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Development
|
||||||
|
docker-compose up
|
||||||
|
|
||||||
|
# Production (create docker-compose.prod.yml first)
|
||||||
|
docker-compose -f docker-compose.prod.yml up
|
||||||
|
```
|
||||||
|
|
||||||
|
### Deploy to Container Registry
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Build and tag
|
||||||
|
docker build -t your-registry/pivoine-docs-hub:latest .
|
||||||
|
|
||||||
|
# Push to registry
|
||||||
|
docker push your-registry/pivoine-docs-hub:latest
|
||||||
|
|
||||||
|
# Pull and run on server
|
||||||
|
docker pull your-registry/pivoine-docs-hub:latest
|
||||||
|
docker run -d -p 3000:3000 your-registry/pivoine-docs-hub:latest
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Traditional VPS
|
||||||
|
|
||||||
|
Deploy to a traditional VPS (Ubuntu/Debian).
|
||||||
|
|
||||||
|
### Prerequisites
|
||||||
|
|
||||||
|
- Node.js 18.17+
|
||||||
|
- pnpm
|
||||||
|
- nginx (optional, for reverse proxy)
|
||||||
|
- PM2 (for process management)
|
||||||
|
|
||||||
|
### Setup Steps
|
||||||
|
|
||||||
|
1. **Install dependencies on server**:
|
||||||
|
```bash
|
||||||
|
# Install Node.js via nvm
|
||||||
|
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
|
||||||
|
nvm install 18
|
||||||
|
nvm use 18
|
||||||
|
|
||||||
|
# Install pnpm
|
||||||
|
npm install -g pnpm
|
||||||
|
|
||||||
|
# Install PM2
|
||||||
|
npm install -g pm2
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **Clone and build**:
|
||||||
|
```bash
|
||||||
|
cd /var/www
|
||||||
|
git clone your-repo-url pivoine-docs-hub
|
||||||
|
cd pivoine-docs-hub
|
||||||
|
pnpm install
|
||||||
|
pnpm build
|
||||||
|
```
|
||||||
|
|
||||||
|
3. **Run with PM2**:
|
||||||
|
```bash
|
||||||
|
pm2 start npm --name "docs-hub" -- start
|
||||||
|
pm2 save
|
||||||
|
pm2 startup
|
||||||
|
```
|
||||||
|
|
||||||
|
4. **Configure Nginx** (optional):
|
||||||
|
```nginx
|
||||||
|
server {
|
||||||
|
listen 80;
|
||||||
|
server_name docs.pivoine.art;
|
||||||
|
|
||||||
|
location / {
|
||||||
|
proxy_pass http://localhost:3000;
|
||||||
|
proxy_http_version 1.1;
|
||||||
|
proxy_set_header Upgrade $http_upgrade;
|
||||||
|
proxy_set_header Connection 'upgrade';
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
proxy_cache_bypass $http_upgrade;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
5. **Enable site**:
|
||||||
|
```bash
|
||||||
|
sudo ln -s /etc/nginx/sites-available/docs-hub /etc/nginx/sites-enabled/
|
||||||
|
sudo nginx -t
|
||||||
|
sudo systemctl reload nginx
|
||||||
|
```
|
||||||
|
|
||||||
|
6. **Setup SSL with Certbot**:
|
||||||
|
```bash
|
||||||
|
sudo apt install certbot python3-certbot-nginx
|
||||||
|
sudo certbot --nginx -d docs.pivoine.art
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Environment Variables
|
||||||
|
|
||||||
|
For production deployments, set these environment variables:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
NEXT_PUBLIC_SITE_URL=https://docs.pivoine.art
|
||||||
|
NEXT_PUBLIC_BLOG_URL=http://pivoine.art
|
||||||
|
NEXT_PUBLIC_CODE_URL=https://code.pivoine.art
|
||||||
|
NODE_ENV=production
|
||||||
|
```
|
||||||
|
|
||||||
|
### On Vercel/Netlify
|
||||||
|
Add them in the project settings under "Environment Variables"
|
||||||
|
|
||||||
|
### On VPS
|
||||||
|
Add to `.env.local` or export in your shell profile
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Post-Deployment
|
||||||
|
|
||||||
|
### Verify Deployment
|
||||||
|
|
||||||
|
- Check site loads: https://docs.pivoine.art
|
||||||
|
- Test all links work
|
||||||
|
- Verify responsive design on mobile
|
||||||
|
- Check console for errors
|
||||||
|
- Test performance with Lighthouse
|
||||||
|
|
||||||
|
### Monitoring
|
||||||
|
|
||||||
|
**Vercel**: Built-in analytics and monitoring
|
||||||
|
|
||||||
|
**Other platforms**: Consider adding:
|
||||||
|
- Google Analytics
|
||||||
|
- Plausible Analytics
|
||||||
|
- Sentry for error tracking
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Troubleshooting
|
||||||
|
|
||||||
|
### Build Fails
|
||||||
|
|
||||||
|
**Check Node version**:
|
||||||
|
```bash
|
||||||
|
node --version # Should be 18.17+
|
||||||
|
```
|
||||||
|
|
||||||
|
**Clear cache**:
|
||||||
|
```bash
|
||||||
|
rm -rf .next node_modules
|
||||||
|
pnpm install
|
||||||
|
pnpm build
|
||||||
|
```
|
||||||
|
|
||||||
|
### Site Not Loading
|
||||||
|
|
||||||
|
**Check service status**:
|
||||||
|
```bash
|
||||||
|
# PM2
|
||||||
|
pm2 status
|
||||||
|
|
||||||
|
# Docker
|
||||||
|
docker ps
|
||||||
|
```
|
||||||
|
|
||||||
|
**Check logs**:
|
||||||
|
```bash
|
||||||
|
# PM2
|
||||||
|
pm2 logs docs-hub
|
||||||
|
|
||||||
|
# Docker
|
||||||
|
docker logs container-name
|
||||||
|
```
|
||||||
|
|
||||||
|
### Domain Not Resolving
|
||||||
|
|
||||||
|
**Check DNS propagation**:
|
||||||
|
```bash
|
||||||
|
dig docs.pivoine.art
|
||||||
|
nslookup docs.pivoine.art
|
||||||
|
```
|
||||||
|
|
||||||
|
Wait 24-48 hours for full DNS propagation.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Continuous Deployment
|
||||||
|
|
||||||
|
### GitHub Actions
|
||||||
|
|
||||||
|
Create `.github/workflows/deploy.yml`:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
name: Deploy to Vercel
|
||||||
|
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches: [main]
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
deploy:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- uses: actions/checkout@v3
|
||||||
|
- uses: pnpm/action-setup@v2
|
||||||
|
with:
|
||||||
|
version: 8
|
||||||
|
- uses: actions/setup-node@v3
|
||||||
|
with:
|
||||||
|
node-version: 18
|
||||||
|
cache: 'pnpm'
|
||||||
|
- run: pnpm install
|
||||||
|
- run: pnpm build
|
||||||
|
- uses: amondnet/vercel-action@v20
|
||||||
|
with:
|
||||||
|
vercel-token: ${{ secrets.VERCEL_TOKEN }}
|
||||||
|
vercel-org-id: ${{ secrets.ORG_ID }}
|
||||||
|
vercel-project-id: ${{ secrets.PROJECT_ID }}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Need Help?
|
||||||
|
|
||||||
|
- 📚 [Next.js Deployment Docs](https://nextjs.org/docs/deployment)
|
||||||
|
- 🔗 [Vercel Documentation](https://vercel.com/docs)
|
||||||
|
- 📧 Contact: http://pivoine.art
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Good luck with your deployment! 🚀**
|
||||||
50
Projects/docs.pivoine.art/Dockerfile
Normal file
50
Projects/docs.pivoine.art/Dockerfile
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
# Production Dockerfile
|
||||||
|
FROM node:18-alpine AS base
|
||||||
|
|
||||||
|
# Install pnpm
|
||||||
|
RUN npm install -g pnpm
|
||||||
|
|
||||||
|
# Install dependencies only when needed
|
||||||
|
FROM base AS deps
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
# Copy package files
|
||||||
|
COPY package.json pnpm-lock.yaml* ./
|
||||||
|
RUN pnpm install --frozen-lockfile
|
||||||
|
|
||||||
|
# Rebuild the source code only when needed
|
||||||
|
FROM base AS builder
|
||||||
|
WORKDIR /app
|
||||||
|
COPY --from=deps /app/node_modules ./node_modules
|
||||||
|
COPY . .
|
||||||
|
|
||||||
|
# Build the application
|
||||||
|
RUN pnpm build
|
||||||
|
|
||||||
|
# Production image, copy all the files and run next
|
||||||
|
FROM base AS runner
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
ENV NODE_ENV production
|
||||||
|
|
||||||
|
RUN addgroup --system --gid 1001 nodejs
|
||||||
|
RUN adduser --system --uid 1001 nextjs
|
||||||
|
|
||||||
|
COPY --from=builder /app/public ./public
|
||||||
|
|
||||||
|
# Set the correct permission for prerender cache
|
||||||
|
RUN mkdir .next
|
||||||
|
RUN chown nextjs:nodejs .next
|
||||||
|
|
||||||
|
# Automatically leverage output traces to reduce image size
|
||||||
|
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
|
||||||
|
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
|
||||||
|
|
||||||
|
USER nextjs
|
||||||
|
|
||||||
|
EXPOSE 3000
|
||||||
|
|
||||||
|
ENV PORT 3000
|
||||||
|
ENV HOSTNAME "0.0.0.0"
|
||||||
|
|
||||||
|
CMD ["node", "server.js"]
|
||||||
20
Projects/docs.pivoine.art/Dockerfile.dev
Normal file
20
Projects/docs.pivoine.art/Dockerfile.dev
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
# Development Dockerfile
|
||||||
|
FROM node:18-alpine
|
||||||
|
|
||||||
|
# Install pnpm
|
||||||
|
RUN npm install -g pnpm
|
||||||
|
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
# Copy package files
|
||||||
|
COPY package.json pnpm-lock.yaml* ./
|
||||||
|
|
||||||
|
# Install dependencies
|
||||||
|
RUN pnpm install
|
||||||
|
|
||||||
|
# Copy source files
|
||||||
|
COPY . .
|
||||||
|
|
||||||
|
EXPOSE 3000
|
||||||
|
|
||||||
|
CMD ["pnpm", "dev"]
|
||||||
266
Projects/docs.pivoine.art/MIGRATION.md
Normal file
266
Projects/docs.pivoine.art/MIGRATION.md
Normal file
@@ -0,0 +1,266 @@
|
|||||||
|
# Migration Guide: Next.js 15 & Tailwind CSS 4
|
||||||
|
|
||||||
|
This guide documents the migration from Next.js 14 to 15 and Tailwind CSS 3 to 4.
|
||||||
|
|
||||||
|
## 🚀 What's New
|
||||||
|
|
||||||
|
### Next.js 15
|
||||||
|
|
||||||
|
#### Major Features
|
||||||
|
- **React 19 Support**: Now using the latest React version with improved performance
|
||||||
|
- **Turbopack Stable**: Lightning-fast bundler now stable and used by default in dev mode
|
||||||
|
- **Improved Caching**: Better caching strategies for faster builds
|
||||||
|
- **Enhanced Performance**: Overall speed improvements in both dev and production
|
||||||
|
|
||||||
|
#### Breaking Changes
|
||||||
|
- **Minimum Node.js**: Now requires Node.js 18.18.0 or higher (was 18.17.0)
|
||||||
|
- **React 19**: Some React APIs have changed, though this project is not affected
|
||||||
|
- **ESLint**: Now uses flat config format (ESLint 9)
|
||||||
|
|
||||||
|
### Tailwind CSS 4
|
||||||
|
|
||||||
|
#### Major Features
|
||||||
|
- **CSS-First Configuration**: Configure via `@theme` in CSS instead of JavaScript
|
||||||
|
- **Faster Builds**: Significantly faster compilation times
|
||||||
|
- **Smaller Bundles**: More efficient output with smaller CSS files
|
||||||
|
- **Native CSS Variables**: Better integration with modern CSS
|
||||||
|
- **Simpler Setup**: Less configuration needed
|
||||||
|
|
||||||
|
#### Breaking Changes
|
||||||
|
- **No More `@tailwind` directives**: Use `@import "tailwindcss"` instead
|
||||||
|
- **Configuration in CSS**: Use `@theme` blocks in CSS files for customization
|
||||||
|
- **Minimal JS Config**: `tailwind.config.js` only needs content paths now
|
||||||
|
- **PostCSS Simplified**: Only need Tailwind plugin in PostCSS config
|
||||||
|
|
||||||
|
## 📦 Updated Dependencies
|
||||||
|
|
||||||
|
### Before (Next.js 14 / Tailwind 3)
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"next": "^14.2.0",
|
||||||
|
"react": "^18.3.0",
|
||||||
|
"react-dom": "^18.3.0",
|
||||||
|
"tailwindcss": "^3.4.1",
|
||||||
|
"autoprefixer": "^10.4.18"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### After (Next.js 15 / Tailwind 4)
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"next": "^15.0.3",
|
||||||
|
"react": "^19.0.0",
|
||||||
|
"react-dom": "^19.0.0",
|
||||||
|
"tailwindcss": "^4.0.0"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🔄 File Changes
|
||||||
|
|
||||||
|
### 1. `package.json`
|
||||||
|
- Updated Next.js to v15
|
||||||
|
- Updated React to v19
|
||||||
|
- Updated Tailwind CSS to v4
|
||||||
|
- Removed autoprefixer (now built into Tailwind 4)
|
||||||
|
- Added `--turbopack` flag to dev script
|
||||||
|
- Updated packageManager to pnpm@9.0.0
|
||||||
|
|
||||||
|
### 2. `app/globals.css`
|
||||||
|
|
||||||
|
**Before:**
|
||||||
|
```css
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
```
|
||||||
|
|
||||||
|
**After:**
|
||||||
|
```css
|
||||||
|
@import "tailwindcss";
|
||||||
|
|
||||||
|
@theme {
|
||||||
|
/* Custom configuration here */
|
||||||
|
--animate-pulse: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. `tailwind.config.js`
|
||||||
|
|
||||||
|
**Before:**
|
||||||
|
```js
|
||||||
|
module.exports = {
|
||||||
|
content: ['./app/**/*.{js,ts,jsx,tsx,mdx}'],
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
animation: { /* ... */ },
|
||||||
|
backgroundImage: { /* ... */ },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**After:**
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
content: ['./app/**/*.{js,ts,jsx,tsx,mdx}'],
|
||||||
|
// Theme configuration moved to CSS
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 4. `postcss.config.js`
|
||||||
|
|
||||||
|
**Before:**
|
||||||
|
```js
|
||||||
|
module.exports = {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**After:**
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
// autoprefixer removed (built into Tailwind 4)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 5. `next.config.js`
|
||||||
|
|
||||||
|
**Before:**
|
||||||
|
```js
|
||||||
|
const nextConfig = {
|
||||||
|
reactStrictMode: true,
|
||||||
|
swcMinify: true,
|
||||||
|
// ...
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = nextConfig
|
||||||
|
```
|
||||||
|
|
||||||
|
**After:**
|
||||||
|
```js
|
||||||
|
const nextConfig = {
|
||||||
|
reactStrictMode: true,
|
||||||
|
// swcMinify removed (default in Next.js 15)
|
||||||
|
// Turbopack is now stable and default
|
||||||
|
// ...
|
||||||
|
}
|
||||||
|
|
||||||
|
export default nextConfig
|
||||||
|
```
|
||||||
|
|
||||||
|
### 6. ESLint Configuration
|
||||||
|
|
||||||
|
**Before:** `.eslintrc.json`
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"extends": ["next/core-web-vitals", "next/typescript"]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**After:** `eslint.config.mjs`
|
||||||
|
```js
|
||||||
|
import { FlatCompat } from "@eslint/eslintrc";
|
||||||
|
|
||||||
|
const compat = new FlatCompat({
|
||||||
|
baseDirectory: __dirname,
|
||||||
|
});
|
||||||
|
|
||||||
|
export default [
|
||||||
|
...compat.extends("next/core-web-vitals", "next/typescript"),
|
||||||
|
];
|
||||||
|
```
|
||||||
|
|
||||||
|
## ✅ Migration Checklist
|
||||||
|
|
||||||
|
If you're migrating an existing project:
|
||||||
|
|
||||||
|
- [ ] Update Node.js to 18.18.0 or higher
|
||||||
|
- [ ] Update package.json dependencies
|
||||||
|
- [ ] Run `pnpm install` to install new versions
|
||||||
|
- [ ] Update `app/globals.css` to use `@import "tailwindcss"`
|
||||||
|
- [ ] Move Tailwind theme config from JS to CSS using `@theme`
|
||||||
|
- [ ] Simplify `tailwind.config.js` (remove theme extensions)
|
||||||
|
- [ ] Update `postcss.config.js` to remove autoprefixer
|
||||||
|
- [ ] Update `next.config.js` to use ES modules (export default)
|
||||||
|
- [ ] Create `eslint.config.mjs` with flat config format
|
||||||
|
- [ ] Remove old `.eslintrc.json` file
|
||||||
|
- [ ] Update `.nvmrc` to 18.18.0
|
||||||
|
- [ ] Test the application: `pnpm dev`
|
||||||
|
- [ ] Build for production: `pnpm build`
|
||||||
|
- [ ] Update README and documentation
|
||||||
|
|
||||||
|
## 🎯 Benefits After Migration
|
||||||
|
|
||||||
|
### Performance Improvements
|
||||||
|
- **~10x faster dev server** startup with Turbopack
|
||||||
|
- **Faster CSS compilation** with Tailwind 4
|
||||||
|
- **Smaller bundle sizes** in production
|
||||||
|
- **Better hot reload** performance
|
||||||
|
|
||||||
|
### Developer Experience
|
||||||
|
- **Simpler configuration** - less boilerplate
|
||||||
|
- **Better error messages** - clearer debugging
|
||||||
|
- **Faster feedback loop** - instant updates
|
||||||
|
- **Modern tooling** - latest ecosystem features
|
||||||
|
|
||||||
|
### Future-Proof
|
||||||
|
- Using the latest stable versions
|
||||||
|
- Better long-term support
|
||||||
|
- Access to newest features
|
||||||
|
- Compatible with latest ecosystem tools
|
||||||
|
|
||||||
|
## 🐛 Troubleshooting
|
||||||
|
|
||||||
|
### Issue: Dev server won't start
|
||||||
|
**Solution**: Clear cache and reinstall
|
||||||
|
```bash
|
||||||
|
rm -rf .next node_modules
|
||||||
|
pnpm install
|
||||||
|
pnpm dev
|
||||||
|
```
|
||||||
|
|
||||||
|
### Issue: Tailwind classes not working
|
||||||
|
**Solution**: Check your `globals.css` uses `@import "tailwindcss"`
|
||||||
|
```css
|
||||||
|
@import "tailwindcss";
|
||||||
|
```
|
||||||
|
|
||||||
|
### Issue: TypeScript errors
|
||||||
|
**Solution**: Ensure tsconfig.json is updated and regenerate types
|
||||||
|
```bash
|
||||||
|
rm -rf .next
|
||||||
|
pnpm dev
|
||||||
|
```
|
||||||
|
|
||||||
|
### Issue: ESLint errors
|
||||||
|
**Solution**: Ensure you're using the new flat config format in `eslint.config.mjs`
|
||||||
|
|
||||||
|
### Issue: Build fails
|
||||||
|
**Solution**: Check Node.js version
|
||||||
|
```bash
|
||||||
|
node --version # Should be 18.18.0+
|
||||||
|
```
|
||||||
|
|
||||||
|
## 📚 Additional Resources
|
||||||
|
|
||||||
|
- [Next.js 15 Release Notes](https://nextjs.org/blog/next-15)
|
||||||
|
- [Tailwind CSS 4.0 Documentation](https://tailwindcss.com/docs/v4-beta)
|
||||||
|
- [React 19 Release Notes](https://react.dev/blog/2024/12/05/react-19)
|
||||||
|
- [Turbopack Documentation](https://turbo.build/pack/docs)
|
||||||
|
|
||||||
|
## 🎉 Conclusion
|
||||||
|
|
||||||
|
The migration to Next.js 15 and Tailwind CSS 4 brings significant performance improvements and a better developer experience. The changes are minimal but impactful, setting up your project for the future of web development.
|
||||||
|
|
||||||
|
If you encounter any issues not covered here, please refer to the official documentation or reach out for support.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Migrated with ❤️ by Valknar** | [pivoine.art](http://pivoine.art)
|
||||||
117
Projects/docs.pivoine.art/QUICKSTART.md
Normal file
117
Projects/docs.pivoine.art/QUICKSTART.md
Normal file
@@ -0,0 +1,117 @@
|
|||||||
|
# Quick Start Guide
|
||||||
|
|
||||||
|
## Installation & Setup
|
||||||
|
|
||||||
|
### 1. Install Dependencies
|
||||||
|
```bash
|
||||||
|
pnpm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. Run Development Server
|
||||||
|
```bash
|
||||||
|
pnpm dev
|
||||||
|
```
|
||||||
|
|
||||||
|
This will start the development server with Turbopack for ultra-fast hot reload!
|
||||||
|
|
||||||
|
Visit http://localhost:3000 to see your site!
|
||||||
|
|
||||||
|
## First Steps
|
||||||
|
|
||||||
|
### Add a New Documentation Project
|
||||||
|
|
||||||
|
1. Open `app/page.tsx`
|
||||||
|
2. Add your project to the `projects` array:
|
||||||
|
```typescript
|
||||||
|
{
|
||||||
|
name: 'Your Project',
|
||||||
|
status: 'Active',
|
||||||
|
description: 'Your project description',
|
||||||
|
url: '/your-project',
|
||||||
|
gradient: 'from-blue-500 to-cyan-600'
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Customize Colors & Branding
|
||||||
|
|
||||||
|
**Change main colors**: Edit gradient classes in `app/page.tsx`
|
||||||
|
```typescript
|
||||||
|
gradient: 'from-purple-500 to-pink-600' // Your colors here
|
||||||
|
```
|
||||||
|
|
||||||
|
**Update metadata**: Edit `app/layout.tsx`
|
||||||
|
```typescript
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: 'Your Title',
|
||||||
|
description: 'Your description',
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Build for Production
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Create optimized production build
|
||||||
|
pnpm build
|
||||||
|
|
||||||
|
# Test production build locally
|
||||||
|
pnpm start
|
||||||
|
```
|
||||||
|
|
||||||
|
## Project Structure
|
||||||
|
|
||||||
|
```
|
||||||
|
app/
|
||||||
|
├── layout.tsx # Root layout, metadata, fonts
|
||||||
|
├── page.tsx # Landing page component
|
||||||
|
└── globals.css # Global styles
|
||||||
|
|
||||||
|
public/ # Static assets (images, favicon)
|
||||||
|
```
|
||||||
|
|
||||||
|
## Common Tasks
|
||||||
|
|
||||||
|
### Add a Custom Font
|
||||||
|
```typescript
|
||||||
|
// app/layout.tsx
|
||||||
|
import { YourFont } from 'next/font/google'
|
||||||
|
const yourFont = YourFont({ subsets: ['latin'] })
|
||||||
|
```
|
||||||
|
|
||||||
|
### Add Environment Variables
|
||||||
|
1. Copy `.env.example` to `.env.local`
|
||||||
|
2. Add your variables
|
||||||
|
3. Use in code: `process.env.NEXT_PUBLIC_YOUR_VAR`
|
||||||
|
|
||||||
|
### Deploy to Vercel
|
||||||
|
```bash
|
||||||
|
pnpm add -g vercel
|
||||||
|
vercel
|
||||||
|
```
|
||||||
|
|
||||||
|
## Troubleshooting
|
||||||
|
|
||||||
|
**Port 3000 already in use?**
|
||||||
|
```bash
|
||||||
|
pnpm dev -- -p 3001
|
||||||
|
```
|
||||||
|
|
||||||
|
**Dependencies issues?**
|
||||||
|
```bash
|
||||||
|
rm -rf node_modules .next
|
||||||
|
pnpm install
|
||||||
|
```
|
||||||
|
|
||||||
|
**Type errors?**
|
||||||
|
```bash
|
||||||
|
pnpm type-check
|
||||||
|
```
|
||||||
|
|
||||||
|
## Need Help?
|
||||||
|
|
||||||
|
- 📚 [Full README](README.md)
|
||||||
|
- 🔗 [Next.js Docs](https://nextjs.org/docs)
|
||||||
|
- 🎨 [Tailwind Docs](https://tailwindcss.com/docs)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Happy coding! 🌸**
|
||||||
267
Projects/docs.pivoine.art/README.md
Normal file
267
Projects/docs.pivoine.art/README.md
Normal file
@@ -0,0 +1,267 @@
|
|||||||
|
# 🌸 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
|
||||||
|
- **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
|
||||||
|
├── public/ # Static assets (add your images here)
|
||||||
|
├── .eslintrc.json # ESLint configuration
|
||||||
|
├── .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`)
|
||||||
|
|
||||||
|
## 🎯 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)
|
||||||
197
Projects/docs.pivoine.art/UPGRADE_COMPLETE.md
Normal file
197
Projects/docs.pivoine.art/UPGRADE_COMPLETE.md
Normal file
@@ -0,0 +1,197 @@
|
|||||||
|
# 🎉 Upgrade Complete: Next.js 15 & Tailwind CSS 4
|
||||||
|
|
||||||
|
Your Pivoine Docs Hub has been successfully upgraded to the latest versions!
|
||||||
|
|
||||||
|
## ✅ What Was Updated
|
||||||
|
|
||||||
|
### Core Framework
|
||||||
|
- ✨ **Next.js 14 → 15**: Latest framework with Turbopack stable
|
||||||
|
- ⚛️ **React 18 → 19**: Latest React with improved performance
|
||||||
|
- 🎨 **Tailwind CSS 3 → 4**: Complete rewrite with CSS-first config
|
||||||
|
- 📦 **pnpm 8 → 9**: Latest package manager
|
||||||
|
|
||||||
|
### Configuration Files Updated
|
||||||
|
- ✅ `package.json` - All dependencies updated
|
||||||
|
- ✅ `app/globals.css` - New `@import "tailwindcss"` syntax
|
||||||
|
- ✅ `tailwind.config.js` - Simplified configuration
|
||||||
|
- ✅ `postcss.config.js` - Removed autoprefixer
|
||||||
|
- ✅ `next.config.js` - Updated for Next.js 15
|
||||||
|
- ✅ `tsconfig.json` - Updated TypeScript config
|
||||||
|
- ✅ `eslint.config.mjs` - New ESLint flat config format
|
||||||
|
- ✅ `.nvmrc` - Updated Node version to 18.18.0
|
||||||
|
|
||||||
|
### New Documentation
|
||||||
|
- 📘 `MIGRATION.md` - Complete migration guide
|
||||||
|
- 📝 `CHANGELOG.md` - Detailed version history
|
||||||
|
- 📚 Updated `README.md` with new versions
|
||||||
|
- 🚀 Updated `QUICKSTART.md` with Turbopack info
|
||||||
|
|
||||||
|
## 🚀 Next Steps
|
||||||
|
|
||||||
|
### 1. Clean Install (Recommended)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Remove old dependencies and caches
|
||||||
|
rm -rf node_modules .next pnpm-lock.yaml
|
||||||
|
|
||||||
|
# Fresh install with new versions
|
||||||
|
pnpm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. Start Development Server
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm dev
|
||||||
|
```
|
||||||
|
|
||||||
|
You should see **Turbopack** mentioned in the startup logs - that's the new ultra-fast bundler!
|
||||||
|
|
||||||
|
### 3. Test Your Application
|
||||||
|
|
||||||
|
Visit http://localhost:3000 and verify:
|
||||||
|
- ✅ Page loads correctly
|
||||||
|
- ✅ Animations work smoothly
|
||||||
|
- ✅ Hover effects are responsive
|
||||||
|
- ✅ All links work
|
||||||
|
- ✅ No console errors
|
||||||
|
|
||||||
|
### 4. Build for Production
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm build
|
||||||
|
```
|
||||||
|
|
||||||
|
This should complete successfully with optimized output.
|
||||||
|
|
||||||
|
### 5. Clean Up (Optional)
|
||||||
|
|
||||||
|
Remove the old ESLint config file (we now use `eslint.config.mjs`):
|
||||||
|
|
||||||
|
```bash
|
||||||
|
rm .eslintrc.json .eslintrc.json.deprecated
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🎯 Performance Gains
|
||||||
|
|
||||||
|
You should immediately notice:
|
||||||
|
|
||||||
|
### Development
|
||||||
|
- **~10x faster** initial startup
|
||||||
|
- **Instant hot reload** - changes appear immediately
|
||||||
|
- **Better error messages** - clearer debugging
|
||||||
|
|
||||||
|
### Production
|
||||||
|
- **~15% smaller** CSS bundles
|
||||||
|
- **Faster build times** - quicker deployments
|
||||||
|
- **Better caching** - improved performance
|
||||||
|
|
||||||
|
## 📚 Key Documentation
|
||||||
|
|
||||||
|
- **[MIGRATION.md](./MIGRATION.md)** - Detailed migration guide
|
||||||
|
- **[CHANGELOG.md](./CHANGELOG.md)** - All changes documented
|
||||||
|
- **[README.md](./README.md)** - Complete project documentation
|
||||||
|
- **[DEPLOYMENT.md](./DEPLOYMENT.md)** - How to deploy
|
||||||
|
|
||||||
|
## 🔧 Troubleshooting
|
||||||
|
|
||||||
|
### Dev server won't start?
|
||||||
|
```bash
|
||||||
|
rm -rf .next node_modules
|
||||||
|
pnpm install
|
||||||
|
pnpm dev
|
||||||
|
```
|
||||||
|
|
||||||
|
### Styles not applying?
|
||||||
|
Check that `app/globals.css` has:
|
||||||
|
```css
|
||||||
|
@import "tailwindcss";
|
||||||
|
```
|
||||||
|
|
||||||
|
### TypeScript errors?
|
||||||
|
```bash
|
||||||
|
rm -rf .next
|
||||||
|
pnpm dev # This regenerates types
|
||||||
|
```
|
||||||
|
|
||||||
|
### ESLint errors?
|
||||||
|
Make sure you have `eslint.config.mjs` and remove old `.eslintrc.json`
|
||||||
|
|
||||||
|
## 🎨 New Tailwind CSS 4 Features
|
||||||
|
|
||||||
|
### CSS-First Configuration
|
||||||
|
|
||||||
|
Instead of configuring in JavaScript:
|
||||||
|
```css
|
||||||
|
/* app/globals.css */
|
||||||
|
@theme {
|
||||||
|
/* Your custom theme here */
|
||||||
|
--animate-pulse: pulse 4s infinite;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Simpler Config File
|
||||||
|
|
||||||
|
Your `tailwind.config.js` is now minimal:
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
content: ['./app/**/*.{js,ts,jsx,tsx,mdx}'],
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🚦 Status Check
|
||||||
|
|
||||||
|
Run these commands to verify everything:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Check Node version (should be 18.18.0+)
|
||||||
|
node --version
|
||||||
|
|
||||||
|
# Check pnpm version
|
||||||
|
pnpm --version
|
||||||
|
|
||||||
|
# Type checking
|
||||||
|
pnpm type-check
|
||||||
|
|
||||||
|
# Linting
|
||||||
|
pnpm lint
|
||||||
|
|
||||||
|
# Development build
|
||||||
|
pnpm dev
|
||||||
|
|
||||||
|
# Production build
|
||||||
|
pnpm build
|
||||||
|
```
|
||||||
|
|
||||||
|
All should complete without errors! ✅
|
||||||
|
|
||||||
|
## 🌟 What's Next?
|
||||||
|
|
||||||
|
Your documentation hub is now:
|
||||||
|
- ⚡ Blazing fast with Turbopack
|
||||||
|
- 🎨 More maintainable with CSS-first Tailwind
|
||||||
|
- 🚀 Future-proof with latest tech stack
|
||||||
|
- 📦 Optimized for production
|
||||||
|
|
||||||
|
You're all set to deploy to production with:
|
||||||
|
```bash
|
||||||
|
vercel # or your preferred platform
|
||||||
|
```
|
||||||
|
|
||||||
|
## 💡 Tips
|
||||||
|
|
||||||
|
1. **Use Turbopack's speed**: Development is now incredibly fast
|
||||||
|
2. **Customize in CSS**: Edit `app/globals.css` `@theme` blocks
|
||||||
|
3. **Monitor bundle size**: Should be noticeably smaller
|
||||||
|
4. **Enjoy better DX**: Error messages are clearer
|
||||||
|
|
||||||
|
## 🎊 Congratulations!
|
||||||
|
|
||||||
|
Your project is now running on the cutting edge of web development with Next.js 15, React 19, and Tailwind CSS 4!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Questions or issues?** Check the [MIGRATION.md](./MIGRATION.md) guide or the [README.md](./README.md)
|
||||||
|
|
||||||
|
**Happy coding! 🌸**
|
||||||
|
|
||||||
|
*Updated by Claude for Valknar | [pivoine.art](http://pivoine.art)*
|
||||||
445
Projects/docs.pivoine.art/app/components/icons/KomposeIcon.vue
Executable file
445
Projects/docs.pivoine.art/app/components/icons/KomposeIcon.vue
Executable file
@@ -0,0 +1,445 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="kompose-icon-wrapper"
|
||||||
|
:class="{ 'is-clicked': isClicked, 'is-interactive': interactive }"
|
||||||
|
@click="handleClick"
|
||||||
|
@mouseenter="handleHover"
|
||||||
|
@mouseleave="handleLeave"
|
||||||
|
@touchstart="handleTouch"
|
||||||
|
:style="{ width: size, height: size }"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="kompose-icon"
|
||||||
|
viewBox="0 0 192 192"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<defs>
|
||||||
|
<pattern id="carbon192" x="0" y="0" width="7.68" height="7.68" patternUnits="userSpaceOnUse">
|
||||||
|
<rect width="7.68" height="7.68" fill="#0a0e27"></rect>
|
||||||
|
<path d="M0,0 L3.84,3.84 M3.84,0 L7.68,3.84 M0,3.84 L3.84,7.68" stroke="#060815" stroke-width="1.5" opacity="0.5"></path>
|
||||||
|
</pattern>
|
||||||
|
|
||||||
|
<linearGradient id="bgGrad192" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#1a1d2e;stop-opacity:1"></stop>
|
||||||
|
<stop offset="100%" style="stop-color:#0a0e27;stop-opacity:1"></stop>
|
||||||
|
</linearGradient>
|
||||||
|
|
||||||
|
<linearGradient id="primaryGrad192" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" class="gradient-start" style="stop-color:#00DC82;stop-opacity:1"></stop>
|
||||||
|
<stop offset="100%" class="gradient-end" style="stop-color:#00a86b;stop-opacity:1"></stop>
|
||||||
|
</linearGradient>
|
||||||
|
|
||||||
|
<filter id="glow192">
|
||||||
|
<feGaussianBlur stdDeviation="6" result="coloredBlur"></feGaussianBlur>
|
||||||
|
<feMerge>
|
||||||
|
<feMergeNode in="coloredBlur"></feMergeNode>
|
||||||
|
<feMergeNode in="SourceGraphic"></feMergeNode>
|
||||||
|
</feMerge>
|
||||||
|
</filter>
|
||||||
|
|
||||||
|
<filter id="intenseglow192">
|
||||||
|
<feGaussianBlur stdDeviation="12" result="coloredBlur"></feGaussianBlur>
|
||||||
|
<feMerge>
|
||||||
|
<feMergeNode in="coloredBlur"></feMergeNode>
|
||||||
|
<feMergeNode in="SourceGraphic"></feMergeNode>
|
||||||
|
</feMerge>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- Background -->
|
||||||
|
<rect class="bg-rect" width="192" height="192" rx="24" fill="url(#bgGrad192)"></rect>
|
||||||
|
<rect class="carbon-pattern" width="192" height="192" rx="24" fill="url(#carbon192)" opacity="0.4"></rect>
|
||||||
|
|
||||||
|
<!-- Stylized K -->
|
||||||
|
<g class="k-letter" transform="translate(48, 48)">
|
||||||
|
<line class="k-line k-vertical" x1="0" y1="0" x2="0" y2="96" stroke="url(#primaryGrad192)" stroke-width="15" stroke-linecap="round" filter="url(#glow192)"></line>
|
||||||
|
<line class="k-line k-diagonal-top" x1="0" y1="48" x2="57.6" y2="0" stroke="url(#primaryGrad192)" stroke-width="15" stroke-linecap="round" filter="url(#glow192)"></line>
|
||||||
|
<line class="k-line k-diagonal-bottom" x1="0" y1="48" x2="57.6" y2="96" stroke="url(#primaryGrad192)" stroke-width="15" stroke-linecap="round" filter="url(#glow192)"></line>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Animated status dot -->
|
||||||
|
<circle class="status-dot" cx="163.2" cy="163.2" r="11.52" fill="#00DC82" opacity="0.9"></circle>
|
||||||
|
<circle class="status-ring" cx="163.2" cy="163.2" r="17.28" fill="none" stroke="#00DC82" stroke-width="3" opacity="0.3"></circle>
|
||||||
|
|
||||||
|
<!-- Tech corners -->
|
||||||
|
<line class="corner corner-tl-h" x1="15.36" y1="15.36" x2="28.8" y2="15.36" stroke="#00DC82" stroke-width="3" opacity="0.4"></line>
|
||||||
|
<line class="corner corner-tl-v" x1="15.36" y1="15.36" x2="15.36" y2="28.8" stroke="#00DC82" stroke-width="3" opacity="0.4"></line>
|
||||||
|
<line class="corner corner-tr-h" x1="176.64" y1="15.36" x2="163.2" y2="15.36" stroke="#00DC82" stroke-width="3" opacity="0.4"></line>
|
||||||
|
<line class="corner corner-tr-v" x1="176.64" y1="15.36" x2="176.64" y2="28.8" stroke="#00DC82" stroke-width="3" opacity="0.4"></line>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<!-- Ripple effect container -->
|
||||||
|
<div class="ripple" v-if="showRipple"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
size?: string
|
||||||
|
interactive?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
size: '192px',
|
||||||
|
interactive: true
|
||||||
|
})
|
||||||
|
|
||||||
|
const isClicked = ref(false)
|
||||||
|
const showRipple = ref(false)
|
||||||
|
|
||||||
|
const handleClick = () => {
|
||||||
|
if (!props.interactive) return
|
||||||
|
|
||||||
|
isClicked.value = true
|
||||||
|
showRipple.value = true
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
isClicked.value = false
|
||||||
|
}, 600)
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
showRipple.value = false
|
||||||
|
}, 800)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleHover = () => {
|
||||||
|
if (!props.interactive) return
|
||||||
|
// Hover animations are handled by CSS
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleLeave = () => {
|
||||||
|
if (!props.interactive) return
|
||||||
|
// Leave animations are handled by CSS
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleTouch = (e: TouchEvent) => {
|
||||||
|
if (!props.interactive) return
|
||||||
|
handleClick()
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.kompose-icon-wrapper {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kompose-icon-wrapper:not(.is-interactive) {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kompose-icon {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
filter: drop-shadow(0 4px 20px rgba(0, 220, 130, 0.2));
|
||||||
|
transition: filter 0.4s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hover Effects */
|
||||||
|
.kompose-icon-wrapper.is-interactive:hover {
|
||||||
|
transform: scale(1.05) translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.kompose-icon-wrapper.is-interactive:hover .kompose-icon {
|
||||||
|
filter: drop-shadow(0 8px 30px rgba(0, 220, 130, 0.4));
|
||||||
|
animation: subtle-pulse 2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kompose-icon-wrapper.is-interactive:hover .bg-rect {
|
||||||
|
fill: url(#bgGrad192);
|
||||||
|
opacity: 1;
|
||||||
|
animation: bg-glow 2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kompose-icon-wrapper.is-interactive:hover .k-letter {
|
||||||
|
animation: letter-glow 1.5s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kompose-icon-wrapper.is-interactive:hover .k-vertical {
|
||||||
|
animation: line-slide-vertical 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.kompose-icon-wrapper.is-interactive:hover .k-diagonal-top {
|
||||||
|
animation: line-slide-diagonal-top 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kompose-icon-wrapper.is-interactive:hover .k-diagonal-bottom {
|
||||||
|
animation: line-slide-diagonal-bottom 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kompose-icon-wrapper.is-interactive:hover .status-dot {
|
||||||
|
animation: pulse-expand 1s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kompose-icon-wrapper.is-interactive:hover .status-ring {
|
||||||
|
animation: ring-pulse 1.5s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kompose-icon-wrapper.is-interactive:hover .corner {
|
||||||
|
opacity: 1 !important;
|
||||||
|
stroke: #00DC82;
|
||||||
|
animation: corner-extend 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Click/Active Effects */
|
||||||
|
.kompose-icon-wrapper.is-clicked {
|
||||||
|
animation: click-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.kompose-icon-wrapper.is-clicked .kompose-icon {
|
||||||
|
animation: rotate-3d 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||||
|
filter: drop-shadow(0 12px 40px rgba(0, 220, 130, 0.6));
|
||||||
|
}
|
||||||
|
|
||||||
|
.kompose-icon-wrapper.is-clicked .k-letter {
|
||||||
|
animation: letter-flash 0.6s ease-out;
|
||||||
|
filter: url(#intenseglow192);
|
||||||
|
}
|
||||||
|
|
||||||
|
.kompose-icon-wrapper.is-clicked .status-dot {
|
||||||
|
animation: dot-burst 0.6s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ripple Effect */
|
||||||
|
.ripple {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: radial-gradient(circle, rgba(0, 220, 130, 0.6) 0%, rgba(0, 220, 130, 0) 70%);
|
||||||
|
transform: translate(-50%, -50%) scale(0);
|
||||||
|
animation: ripple-expand 0.8s ease-out;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Default animations for status dot */
|
||||||
|
.status-dot {
|
||||||
|
animation: default-pulse 2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-ring {
|
||||||
|
animation: default-ring-pulse 2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Keyframe Animations */
|
||||||
|
@keyframes subtle-pulse {
|
||||||
|
0%, 100% {
|
||||||
|
filter: drop-shadow(0 8px 30px rgba(0, 220, 130, 0.4));
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
filter: drop-shadow(0 8px 35px rgba(0, 220, 130, 0.6));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bg-glow {
|
||||||
|
0%, 100% {
|
||||||
|
filter: brightness(1);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
filter: brightness(1.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes letter-glow {
|
||||||
|
0%, 100% {
|
||||||
|
filter: url(#glow192);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
filter: url(#intenseglow192);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes line-slide-vertical {
|
||||||
|
0% {
|
||||||
|
stroke-dasharray: 96;
|
||||||
|
stroke-dashoffset: 96;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
stroke-dasharray: 96;
|
||||||
|
stroke-dashoffset: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes line-slide-diagonal-top {
|
||||||
|
0% {
|
||||||
|
stroke-dasharray: 68;
|
||||||
|
stroke-dashoffset: 68;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
stroke-dasharray: 68;
|
||||||
|
stroke-dashoffset: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes line-slide-diagonal-bottom {
|
||||||
|
0% {
|
||||||
|
stroke-dasharray: 68;
|
||||||
|
stroke-dashoffset: 68;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
stroke-dasharray: 68;
|
||||||
|
stroke-dashoffset: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse-expand {
|
||||||
|
0%, 100% {
|
||||||
|
r: 11.52;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
r: 14;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes ring-pulse {
|
||||||
|
0%, 100% {
|
||||||
|
r: 17.28;
|
||||||
|
opacity: 0.3;
|
||||||
|
stroke-width: 3;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
r: 20;
|
||||||
|
opacity: 0.6;
|
||||||
|
stroke-width: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes corner-extend {
|
||||||
|
0% {
|
||||||
|
stroke-dasharray: 13.44;
|
||||||
|
stroke-dashoffset: 13.44;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
stroke-dasharray: 13.44;
|
||||||
|
stroke-dashoffset: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes click-bounce {
|
||||||
|
0% {
|
||||||
|
transform: scale(1) translateY(0) rotateY(0deg);
|
||||||
|
}
|
||||||
|
30% {
|
||||||
|
transform: scale(0.92) translateY(0) rotateY(0deg);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(1.08) translateY(-4px) rotateY(180deg);
|
||||||
|
}
|
||||||
|
70% {
|
||||||
|
transform: scale(0.98) translateY(0) rotateY(360deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(1) translateY(0) rotateY(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate-3d {
|
||||||
|
0% {
|
||||||
|
transform: perspective(800px) rotateY(0deg);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: perspective(800px) rotateY(180deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: perspective(800px) rotateY(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes letter-flash {
|
||||||
|
0%, 100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
20%, 60% {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
40%, 80% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes dot-burst {
|
||||||
|
0% {
|
||||||
|
r: 11.52;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
r: 20;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
r: 11.52;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes ripple-expand {
|
||||||
|
0% {
|
||||||
|
transform: translate(-50%, -50%) scale(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translate(-50%, -50%) scale(2.5);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes default-pulse {
|
||||||
|
0%, 100% {
|
||||||
|
opacity: 0.6;
|
||||||
|
r: 11.52;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 1;
|
||||||
|
r: 13.44;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes default-ring-pulse {
|
||||||
|
0%, 100% {
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive adjustments */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.kompose-icon-wrapper.is-interactive:hover {
|
||||||
|
transform: scale(1.03) translateY(-1px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Reduced motion support */
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.kompose-icon-wrapper,
|
||||||
|
.kompose-icon,
|
||||||
|
.kompose-icon *,
|
||||||
|
.ripple {
|
||||||
|
animation: none !important;
|
||||||
|
transition: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kompose-icon-wrapper.is-interactive:hover {
|
||||||
|
transform: scale(1.02);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Touch device optimizations */
|
||||||
|
@media (hover: none) and (pointer: coarse) {
|
||||||
|
.kompose-icon-wrapper.is-interactive:active {
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
47
Projects/docs.pivoine.art/app/globals.css
Normal file
47
Projects/docs.pivoine.art/app/globals.css
Normal file
@@ -0,0 +1,47 @@
|
|||||||
|
@import "tailwindcss";
|
||||||
|
|
||||||
|
@theme {
|
||||||
|
/* Custom animations */
|
||||||
|
--animate-pulse: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||||
|
|
||||||
|
/* Custom keyframes for pulse */
|
||||||
|
@keyframes pulse {
|
||||||
|
0%, 100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
* {
|
||||||
|
@supports (color: color-mix(in lab, red, red)) {
|
||||||
|
outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
border-color: var(--border);
|
||||||
|
outline-color: var(--ring);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom scrollbar styling */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: rgb(17 24 39);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: rgb(139 92 246);
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: rgb(167 139 250);
|
||||||
|
}
|
||||||
42
Projects/docs.pivoine.art/app/layout.tsx
Normal file
42
Projects/docs.pivoine.art/app/layout.tsx
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
import type { Metadata } from 'next'
|
||||||
|
import { Inter } from 'next/font/google'
|
||||||
|
import './globals.css'
|
||||||
|
|
||||||
|
const inter = Inter({ subsets: ['latin'] })
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: 'Pivoine Docs - Documentation Hub',
|
||||||
|
description: 'Comprehensive documentation hub for all Pivoine projects by Valknar. Explore technical guides, API references, and tutorials.',
|
||||||
|
keywords: ['documentation', 'pivoine', 'valknar', 'developer', 'guides', 'api'],
|
||||||
|
authors: [{ name: 'Valknar', url: 'https://pivoine.art' }],
|
||||||
|
creator: 'Valknar',
|
||||||
|
openGraph: {
|
||||||
|
type: 'website',
|
||||||
|
locale: 'en_US',
|
||||||
|
url: 'https://docs.pivoine.art',
|
||||||
|
title: 'Pivoine Docs - Documentation Hub',
|
||||||
|
description: 'Comprehensive documentation hub for all Pivoine projects',
|
||||||
|
siteName: 'Pivoine Docs',
|
||||||
|
},
|
||||||
|
twitter: {
|
||||||
|
card: 'summary_large_image',
|
||||||
|
title: 'Pivoine Docs - Documentation Hub',
|
||||||
|
description: 'Comprehensive documentation hub for all Pivoine projects',
|
||||||
|
},
|
||||||
|
robots: {
|
||||||
|
index: true,
|
||||||
|
follow: true,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function RootLayout({
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
children: React.ReactNode
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<html lang="en" className="scroll-smooth">
|
||||||
|
<body className={inter.className}>{children}</body>
|
||||||
|
</html>
|
||||||
|
)
|
||||||
|
}
|
||||||
191
Projects/docs.pivoine.art/app/page.tsx
Normal file
191
Projects/docs.pivoine.art/app/page.tsx
Normal file
@@ -0,0 +1,191 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import React, { useState, useEffect } from 'react'
|
||||||
|
import { BookOpen, Code2, Globe, ChevronRight, Sparkles, Terminal } from 'lucide-react'
|
||||||
|
|
||||||
|
export default function DocsHub() {
|
||||||
|
const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
|
||||||
|
const [isHovering, setIsHovering] = useState<string | null>(null)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleMouseMove = (e: MouseEvent) => {
|
||||||
|
setMousePosition({
|
||||||
|
x: (e.clientX / window.innerWidth) * 20 - 10,
|
||||||
|
y: (e.clientY / window.innerHeight) * 20 - 10,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
window.addEventListener('mousemove', handleMouseMove)
|
||||||
|
return () => window.removeEventListener('mousemove', handleMouseMove)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const projects = [
|
||||||
|
{
|
||||||
|
name: 'Kompose',
|
||||||
|
status: 'Active',
|
||||||
|
description: 'Comprehensive documentation for Kompose project',
|
||||||
|
url: '/kompose',
|
||||||
|
gradient: 'from-violet-500 to-purple-600'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const links = [
|
||||||
|
{
|
||||||
|
title: "Valknar's Blog",
|
||||||
|
icon: Globe,
|
||||||
|
url: 'http://pivoine.art',
|
||||||
|
gradient: 'from-pink-500 to-rose-600'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Source Code',
|
||||||
|
icon: Code2,
|
||||||
|
url: 'https://code.pivoine.art',
|
||||||
|
gradient: 'from-cyan-500 to-blue-600'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gradient-to-br from-gray-900 via-purple-900/20 to-gray-900 text-white overflow-hidden">
|
||||||
|
{/* Animated background orbs */}
|
||||||
|
<div className="fixed inset-0 overflow-hidden pointer-events-none">
|
||||||
|
<div
|
||||||
|
className="absolute w-96 h-96 bg-purple-500/20 rounded-full blur-3xl top-0 -left-48 animate-pulse"
|
||||||
|
style={{
|
||||||
|
transform: `translate(${mousePosition.x}px, ${mousePosition.y}px)`,
|
||||||
|
transition: 'transform 0.3s ease-out'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
className="absolute w-96 h-96 bg-pink-500/20 rounded-full blur-3xl bottom-0 -right-48 animate-pulse"
|
||||||
|
style={{
|
||||||
|
transform: `translate(${-mousePosition.x}px, ${-mousePosition.y}px)`,
|
||||||
|
transition: 'transform 0.3s ease-out',
|
||||||
|
animationDelay: '1s'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div className="absolute w-96 h-96 bg-cyan-500/10 rounded-full blur-3xl top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 animate-pulse" style={{ animationDelay: '0.5s' }} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Main content */}
|
||||||
|
<div className="relative z-10 container mx-auto px-6 py-12 max-w-6xl">
|
||||||
|
{/* Header */}
|
||||||
|
<header className="text-center mb-20 pt-12">
|
||||||
|
<div className="inline-flex items-center gap-2 mb-6 px-4 py-2 bg-white/5 backdrop-blur-sm rounded-full border border-white/10">
|
||||||
|
<Sparkles className="w-4 h-4 text-purple-400" />
|
||||||
|
<span className="text-sm text-purple-300">Documentation Hub</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 className="text-7xl font-bold mb-6 bg-gradient-to-r from-white via-purple-200 to-pink-200 bg-clip-text text-transparent animate-pulse">
|
||||||
|
Pivoine Docs
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p className="text-xl text-gray-300 max-w-2xl mx-auto leading-relaxed">
|
||||||
|
Comprehensive documentation for all projects by <span className="text-purple-400 font-semibold">Valknar</span>.
|
||||||
|
Explore technical guides, API references, and tutorials.
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* Projects Grid */}
|
||||||
|
<section className="mb-20">
|
||||||
|
<div className="flex items-center gap-3 mb-8">
|
||||||
|
<Terminal className="w-6 h-6 text-purple-400" />
|
||||||
|
<h2 className="text-3xl font-bold">Project Documentation</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-2 gap-6">
|
||||||
|
{projects.map((project, idx) => (
|
||||||
|
<a
|
||||||
|
key={idx}
|
||||||
|
href={project.url}
|
||||||
|
onMouseEnter={() => setIsHovering(project.name)}
|
||||||
|
onMouseLeave={() => setIsHovering(null)}
|
||||||
|
className="group relative bg-white/5 backdrop-blur-md rounded-2xl p-8 border border-white/10 hover:border-purple-500/50 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-purple-500/20"
|
||||||
|
>
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-br opacity-0 group-hover:opacity-10 rounded-2xl transition-opacity duration-300"
|
||||||
|
style={{ background: `linear-gradient(135deg, rgb(168, 85, 247), rgb(147, 51, 234))` }} />
|
||||||
|
|
||||||
|
<div className="relative">
|
||||||
|
<div className="flex items-start justify-between mb-4">
|
||||||
|
<div className={`p-3 rounded-xl bg-gradient-to-br ${project.gradient} shadow-lg`}>
|
||||||
|
<BookOpen className="w-6 h-6 text-white" />
|
||||||
|
</div>
|
||||||
|
<span className="px-3 py-1 bg-emerald-500/20 text-emerald-300 rounded-full text-sm border border-emerald-500/30">
|
||||||
|
{project.status}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 className="text-2xl font-bold mb-3 group-hover:text-purple-300 transition-colors">
|
||||||
|
{project.name}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<p className="text-gray-400 mb-4 leading-relaxed">
|
||||||
|
{project.description}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex items-center text-purple-400 font-semibold group-hover:gap-3 gap-2 transition-all">
|
||||||
|
Read docs
|
||||||
|
<ChevronRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* Coming Soon Card */}
|
||||||
|
<div className="relative bg-white/5 backdrop-blur-md rounded-2xl p-8 border border-dashed border-white/20">
|
||||||
|
<div className="opacity-60">
|
||||||
|
<div className="p-3 rounded-xl bg-gradient-to-br from-gray-600 to-gray-700 w-fit mb-4">
|
||||||
|
<BookOpen className="w-6 h-6 text-white" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-2xl font-bold mb-3 text-gray-400">More Projects</h3>
|
||||||
|
<p className="text-gray-500 leading-relaxed">
|
||||||
|
Additional documentation sites coming soon...
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* External Links */}
|
||||||
|
<section>
|
||||||
|
<div className="flex items-center gap-3 mb-8">
|
||||||
|
<Sparkles className="w-6 h-6 text-pink-400" />
|
||||||
|
<h2 className="text-3xl font-bold">Explore More</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-2 gap-6">
|
||||||
|
{links.map((link, idx) => {
|
||||||
|
const Icon = link.icon
|
||||||
|
return (
|
||||||
|
<a
|
||||||
|
key={idx}
|
||||||
|
href={link.url}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="group bg-white/5 backdrop-blur-md rounded-2xl p-6 border border-white/10 hover:border-pink-500/50 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-pink-500/20 flex items-center gap-4"
|
||||||
|
>
|
||||||
|
<div className={`p-4 rounded-xl bg-gradient-to-br ${link.gradient} shadow-lg group-hover:scale-110 transition-transform`}>
|
||||||
|
<Icon className="w-7 h-7 text-white" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<h3 className="text-xl font-bold group-hover:text-pink-300 transition-colors">
|
||||||
|
{link.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-400 text-sm">{link.url}</p>
|
||||||
|
</div>
|
||||||
|
<ChevronRight className="w-6 h-6 text-gray-400 group-hover:text-pink-400 group-hover:translate-x-1 transition-all" />
|
||||||
|
</a>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<footer className="mt-20 pt-8 border-t border-white/10 text-center text-gray-400">
|
||||||
|
<p className="text-sm">
|
||||||
|
Crafted with passion by <span className="text-purple-400 font-semibold">Valknar</span> ·
|
||||||
|
<a href="http://pivoine.art" className="hover:text-purple-300 transition-colors ml-1">pivoine.art</a>
|
||||||
|
</p>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
17
Projects/docs.pivoine.art/docker-compose.yml
Normal file
17
Projects/docs.pivoine.art/docker-compose.yml
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
# Docker Compose for Local Development
|
||||||
|
version: '3.8'
|
||||||
|
|
||||||
|
services:
|
||||||
|
docs-hub:
|
||||||
|
build:
|
||||||
|
context: .
|
||||||
|
dockerfile: Dockerfile.dev
|
||||||
|
ports:
|
||||||
|
- "3000:3000"
|
||||||
|
volumes:
|
||||||
|
- .:/app
|
||||||
|
- /app/node_modules
|
||||||
|
- /app/.next
|
||||||
|
environment:
|
||||||
|
- NODE_ENV=development
|
||||||
|
command: pnpm dev
|
||||||
16
Projects/docs.pivoine.art/eslint.config.mjs
Normal file
16
Projects/docs.pivoine.art/eslint.config.mjs
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
import { dirname } from "path";
|
||||||
|
import { fileURLToPath } from "url";
|
||||||
|
import { FlatCompat } from "@eslint/eslintrc";
|
||||||
|
|
||||||
|
const __filename = fileURLToPath(import.meta.url);
|
||||||
|
const __dirname = dirname(__filename);
|
||||||
|
|
||||||
|
const compat = new FlatCompat({
|
||||||
|
baseDirectory: __dirname,
|
||||||
|
});
|
||||||
|
|
||||||
|
const eslintConfig = [
|
||||||
|
...compat.extends("next/core-web-vitals", "next/typescript"),
|
||||||
|
];
|
||||||
|
|
||||||
|
export default eslintConfig;
|
||||||
56
Projects/docs.pivoine.art/next.config.mjs
Normal file
56
Projects/docs.pivoine.art/next.config.mjs
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
/** @type {import('next').NextConfig} */
|
||||||
|
const nextConfig = {
|
||||||
|
reactStrictMode: true,
|
||||||
|
|
||||||
|
// Next.js 15 uses turbopack by default for dev
|
||||||
|
// No need to explicitly enable swcMinify anymore
|
||||||
|
|
||||||
|
// Optimize production build
|
||||||
|
compiler: {
|
||||||
|
removeConsole: process.env.NODE_ENV === 'production',
|
||||||
|
},
|
||||||
|
|
||||||
|
// Image optimization
|
||||||
|
images: {
|
||||||
|
formats: ['image/avif', 'image/webp'],
|
||||||
|
},
|
||||||
|
|
||||||
|
// Headers for security
|
||||||
|
async headers() {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
source: '/:path*',
|
||||||
|
headers: [
|
||||||
|
{
|
||||||
|
key: 'X-DNS-Prefetch-Control',
|
||||||
|
value: 'on'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'X-Frame-Options',
|
||||||
|
value: 'SAMEORIGIN'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'X-Content-Type-Options',
|
||||||
|
value: 'nosniff'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'Referrer-Policy',
|
||||||
|
value: 'origin-when-cross-origin'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
// Enable experimental features if needed
|
||||||
|
experimental: {
|
||||||
|
// turbo is now stable in Next.js 15
|
||||||
|
// Add other experimental features here if needed
|
||||||
|
},
|
||||||
|
|
||||||
|
turbopack: {
|
||||||
|
root: '.'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default nextConfig
|
||||||
36
Projects/docs.pivoine.art/package.json
Normal file
36
Projects/docs.pivoine.art/package.json
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
{
|
||||||
|
"name": "pivoine-docs-hub",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "Documentation hub for Pivoine projects by Valknar",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "next dev --turbopack",
|
||||||
|
"build": "next build",
|
||||||
|
"start": "next start",
|
||||||
|
"lint": "next lint",
|
||||||
|
"type-check": "tsc --noEmit"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@tailwindcss/postcss": "^4.1.14",
|
||||||
|
"lucide-react": "^0.263.1",
|
||||||
|
"next": "^15.0.3",
|
||||||
|
"postcss": "^8.5.6",
|
||||||
|
"react": "^19.0.0",
|
||||||
|
"react-dom": "^19.0.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/eslintrc": "^3.2.0",
|
||||||
|
"@types/node": "^22.0.0",
|
||||||
|
"@types/react": "^19.0.0",
|
||||||
|
"@types/react-dom": "^19.0.0",
|
||||||
|
"eslint": "^9.0.0",
|
||||||
|
"eslint-config-next": "^15.0.3",
|
||||||
|
"tailwindcss": "^4.0.0",
|
||||||
|
"typescript": "^5.6.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=18.18.0",
|
||||||
|
"pnpm": ">=8.0.0"
|
||||||
|
},
|
||||||
|
"packageManager": "pnpm@9.0.0"
|
||||||
|
}
|
||||||
3757
Projects/docs.pivoine.art/pnpm-lock.yaml
generated
Normal file
3757
Projects/docs.pivoine.art/pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
5
Projects/docs.pivoine.art/postcss.config.mjs
Normal file
5
Projects/docs.pivoine.art/postcss.config.mjs
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
"@tailwindcss/postcss": {},
|
||||||
|
},
|
||||||
|
}
|
||||||
8
Projects/docs.pivoine.art/tailwind.config.js
Normal file
8
Projects/docs.pivoine.art/tailwind.config.js
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
content: [
|
||||||
|
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
|
||||||
|
'./components/**/*.{js,ts,jsx,tsx,mdx}',
|
||||||
|
'./app/**/*.{js,ts,jsx,tsx,mdx}',
|
||||||
|
],
|
||||||
|
}
|
||||||
27
Projects/docs.pivoine.art/tsconfig.json
Normal file
27
Projects/docs.pivoine.art/tsconfig.json
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"lib": ["dom", "dom.iterable", "esnext"],
|
||||||
|
"allowJs": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"strict": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
"incremental": true,
|
||||||
|
"plugins": [
|
||||||
|
{
|
||||||
|
"name": "next"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||||
|
"exclude": ["node_modules"]
|
||||||
|
}
|
||||||
30
Projects/docs.pivoine.art/vercel.json
Normal file
30
Projects/docs.pivoine.art/vercel.json
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
{
|
||||||
|
"buildCommand": "pnpm build",
|
||||||
|
"devCommand": "pnpm dev",
|
||||||
|
"installCommand": "pnpm install",
|
||||||
|
"framework": "nextjs",
|
||||||
|
"regions": ["iad1"],
|
||||||
|
"headers": [
|
||||||
|
{
|
||||||
|
"source": "/(.*)",
|
||||||
|
"headers": [
|
||||||
|
{
|
||||||
|
"key": "X-Content-Type-Options",
|
||||||
|
"value": "nosniff"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"key": "X-Frame-Options",
|
||||||
|
"value": "SAMEORIGIN"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"key": "X-XSS-Protection",
|
||||||
|
"value": "1; mode=block"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"key": "Referrer-Policy",
|
||||||
|
"value": "origin-when-cross-origin"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user