feat: docs.pivoine.art
This commit is contained in:
4
.github/workflows/docs.pivoine.art.yaml
vendored
4
.github/workflows/docs.pivoine.art.yaml
vendored
@@ -23,11 +23,11 @@ jobs:
|
|||||||
uses: pnpm/action-setup@v4
|
uses: pnpm/action-setup@v4
|
||||||
- name: Build JavaScript
|
- name: Build JavaScript
|
||||||
run: |
|
run: |
|
||||||
cd docs.pivoine.art
|
cd ${{ github.workspace }}/docs.pivoine.art
|
||||||
pnpm install
|
pnpm install
|
||||||
pnpm build
|
pnpm build
|
||||||
mv out ${{ github.workspace }}/_site
|
mv out ${{ github.workspace }}/_site
|
||||||
cd kompose/docs
|
cd ${{ github.workspace }}/kompose/docs
|
||||||
pnpm install
|
pnpm install
|
||||||
pnpm generate
|
pnpm generate
|
||||||
mv .output/public ${{ github.workspace }}/_site/kompose
|
mv .output/public ${{ github.workspace }}/_site/kompose
|
||||||
|
|||||||
449
Projects/docs.pivoine.art/ICON_COMPLETE.md
Normal file
449
Projects/docs.pivoine.art/ICON_COMPLETE.md
Normal file
@@ -0,0 +1,449 @@
|
|||||||
|
# 🌸 Pivoine Docs Icon - Complete Integration Summary
|
||||||
|
|
||||||
|
The official branding icon for the Pivoine Documentation Hub has been created and fully integrated!
|
||||||
|
|
||||||
|
## ✅ What Was Created
|
||||||
|
|
||||||
|
### 1. React Component with Full Animations ✨
|
||||||
|
**File**: `components/icons/PivoineDocsIcon.tsx`
|
||||||
|
|
||||||
|
A stunning animated React component featuring:
|
||||||
|
- **Peony flower design** with purple/pink gradient petals (3 layers, 18 petals total)
|
||||||
|
- **Document pages** in the center with text lines
|
||||||
|
- **Golden center** circle representing knowledge
|
||||||
|
- **Sparkles** at corners that twinkle
|
||||||
|
- **Orbiting particles** around the flower
|
||||||
|
- **Multiple animation states**: default, hover, click/tap
|
||||||
|
- **Fully responsive** and accessible
|
||||||
|
- **10KB component** with zero dependencies
|
||||||
|
|
||||||
|
#### Key Features:
|
||||||
|
- ✨ Beautiful bloom animation on hover
|
||||||
|
- 💫 3D rotation flip on click
|
||||||
|
- 🎯 Ripple effect emanates from center
|
||||||
|
- 🌟 Continuous subtle animations (pulse, twinkle, orbit)
|
||||||
|
- ♿ Respects `prefers-reduced-motion`
|
||||||
|
- 📱 Touch-optimized for mobile
|
||||||
|
|
||||||
|
### 2. Static SVG Icons 📦
|
||||||
|
**Files Created:**
|
||||||
|
- `public/icon.svg` (256x256) - Full detail version for all platforms
|
||||||
|
- `public/favicon.svg` (32x32 optimized) - Simplified for browser tabs
|
||||||
|
|
||||||
|
Both feature:
|
||||||
|
- Complete peony design with all petals
|
||||||
|
- Document pages in center
|
||||||
|
- Optimized for their respective sizes
|
||||||
|
- Vector format (scales perfectly)
|
||||||
|
|
||||||
|
### 3. PWA Manifest 📱
|
||||||
|
**File**: `public/manifest.json`
|
||||||
|
|
||||||
|
Complete Progressive Web App configuration:
|
||||||
|
- App name: "Pivoine Docs Hub"
|
||||||
|
- Theme color: Purple (#a855f7)
|
||||||
|
- Background: Dark slate (#0f172a)
|
||||||
|
- Icon references for all sizes
|
||||||
|
- Display: standalone mode
|
||||||
|
- Categories and descriptions
|
||||||
|
|
||||||
|
### 4. Icon Generation Script 🛠️
|
||||||
|
**File**: `scripts/generate-icons.sh`
|
||||||
|
|
||||||
|
Bash script to generate PNG versions:
|
||||||
|
- icon-192.png (PWA - Android)
|
||||||
|
- icon-512.png (PWA - Android HD)
|
||||||
|
- apple-touch-icon.png (iOS home screen)
|
||||||
|
- favicon-32x32.png (Standard favicon)
|
||||||
|
- favicon-16x16.png (Small favicon)
|
||||||
|
|
||||||
|
Requires: `librsvg` (install with `brew install librsvg` or `apt-get install librsvg2-bin`)
|
||||||
|
|
||||||
|
### 5. Updated App Layout 📄
|
||||||
|
**File**: `app/layout.tsx`
|
||||||
|
|
||||||
|
Added complete icon and PWA metadata:
|
||||||
|
```tsx
|
||||||
|
icons: {
|
||||||
|
icon: [
|
||||||
|
{ url: '/favicon.svg', type: 'image/svg+xml' },
|
||||||
|
{ url: '/icon.svg', type: 'image/svg+xml', sizes: 'any' },
|
||||||
|
],
|
||||||
|
apple: [
|
||||||
|
{ url: '/apple-touch-icon.png', sizes: '180x180' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
appleWebApp: {
|
||||||
|
capable: true,
|
||||||
|
statusBarStyle: 'black-translucent',
|
||||||
|
title: 'Pivoine Docs',
|
||||||
|
},
|
||||||
|
manifest: '/manifest.json',
|
||||||
|
```
|
||||||
|
|
||||||
|
### 6. Hero Integration 🎯
|
||||||
|
**File**: `app/page.tsx`
|
||||||
|
|
||||||
|
The icon is now prominently displayed in the hero section:
|
||||||
|
```tsx
|
||||||
|
<div className="flex justify-center mb-8">
|
||||||
|
<PivoineDocsIcon size="200px" showLabel={false} />
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 7. Comprehensive Documentation 📚
|
||||||
|
**File**: `components/icons/PIVOINE_DOCS_ICON.md`
|
||||||
|
|
||||||
|
Complete documentation covering:
|
||||||
|
- Design concept and philosophy
|
||||||
|
- Color palette
|
||||||
|
- All available formats
|
||||||
|
- Usage examples and props
|
||||||
|
- Animation details
|
||||||
|
- Integration points
|
||||||
|
- Technical specs
|
||||||
|
- Customization guide
|
||||||
|
- Troubleshooting
|
||||||
|
- File structure
|
||||||
|
|
||||||
|
## 🎨 Design Details
|
||||||
|
|
||||||
|
### Visual Elements
|
||||||
|
|
||||||
|
**Peony Flower:**
|
||||||
|
- 3 layers of petals (outer, middle, inner)
|
||||||
|
- 18 total petals with staggered rotation
|
||||||
|
- Purple to pink gradients (#a855f7 → #ec4899)
|
||||||
|
- Smooth bloom animation on interaction
|
||||||
|
|
||||||
|
**Documentation Center:**
|
||||||
|
- Stacked page design (3 layers for depth)
|
||||||
|
- Blue and purple text lines
|
||||||
|
- Suggests written content
|
||||||
|
- Subtle floating animation
|
||||||
|
|
||||||
|
**Accents:**
|
||||||
|
- 4 twinkling sparkles at corners
|
||||||
|
- 4 orbiting particles
|
||||||
|
- Golden center circle (#fbbf24 → #d97706)
|
||||||
|
- Dark slate background (#1e293b)
|
||||||
|
|
||||||
|
### Animation States
|
||||||
|
|
||||||
|
**Default (Always Running):**
|
||||||
|
- Background pulse (4s cycle)
|
||||||
|
- Sparkle twinkle (2s, staggered)
|
||||||
|
- Particle orbit (8s rotation)
|
||||||
|
- Center pulse (3s)
|
||||||
|
- Page float (3s gentle sway)
|
||||||
|
- Text lines draw in on mount
|
||||||
|
|
||||||
|
**Hover (Interactive):**
|
||||||
|
- Scale up 1.08x + lift 8px
|
||||||
|
- Enhanced shadow and glow
|
||||||
|
- Petal bloom sequence (outer → middle → inner)
|
||||||
|
- Center intense glow
|
||||||
|
- Sparkle burst
|
||||||
|
- Pages fan out with rotation
|
||||||
|
|
||||||
|
**Click/Tap:**
|
||||||
|
- 3D bounce + 360° rotation
|
||||||
|
- Petal explosion effect
|
||||||
|
- Center burst with glow
|
||||||
|
- Ripple emanates from center
|
||||||
|
- Duration: 800ms
|
||||||
|
|
||||||
|
## 📐 Usage Guide
|
||||||
|
|
||||||
|
### In Hero Section (Current)
|
||||||
|
```tsx
|
||||||
|
import { PivoineDocsIcon } from '@/components/icons'
|
||||||
|
|
||||||
|
<PivoineDocsIcon size="200px" showLabel={false} />
|
||||||
|
```
|
||||||
|
|
||||||
|
### Props Reference
|
||||||
|
```typescript
|
||||||
|
interface PivoineDocsIconProps {
|
||||||
|
size?: string // Default: '256px' - Any CSS value
|
||||||
|
interactive?: boolean // Default: true - Enable animations
|
||||||
|
className?: string // Default: '' - Additional CSS classes
|
||||||
|
showLabel?: boolean // Default: false - Show "Pivoine Docs" text
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Size Recommendations
|
||||||
|
| Context | Size | Interactive |
|
||||||
|
|---------|------|-------------|
|
||||||
|
| Hero | 200-256px | ✅ Yes |
|
||||||
|
| Header | 64-96px | Optional |
|
||||||
|
| Sidebar | 48-64px | ❌ No |
|
||||||
|
| Avatar | 40-48px | ❌ No |
|
||||||
|
|
||||||
|
### Example Variations
|
||||||
|
```tsx
|
||||||
|
// Large interactive with label
|
||||||
|
<PivoineDocsIcon size="256px" showLabel={true} />
|
||||||
|
|
||||||
|
// Medium for page header
|
||||||
|
<PivoineDocsIcon size="96px" />
|
||||||
|
|
||||||
|
// Small, static for cards
|
||||||
|
<PivoineDocsIcon size="64px" interactive={false} />
|
||||||
|
|
||||||
|
// Custom styling
|
||||||
|
<PivoineDocsIcon
|
||||||
|
size="180px"
|
||||||
|
className="custom-class"
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🚀 See It Live
|
||||||
|
|
||||||
|
### 1. Start Development Server
|
||||||
|
```bash
|
||||||
|
pnpm dev
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. Visit Homepage
|
||||||
|
Open http://localhost:3000
|
||||||
|
|
||||||
|
You'll see the icon:
|
||||||
|
- **In hero area** - Large, animated, interactive
|
||||||
|
- **In browser tab** - Favicon with simplified design
|
||||||
|
- **On mobile** - Can add to home screen as PWA
|
||||||
|
|
||||||
|
### 3. Test Interactions
|
||||||
|
- **Hover** over the icon to see bloom animation
|
||||||
|
- **Click** it for 3D rotation and ripple effect
|
||||||
|
- **Resize** window to test responsive behavior
|
||||||
|
- **Check mobile** for touch optimizations
|
||||||
|
|
||||||
|
## 🎯 Integration Points
|
||||||
|
|
||||||
|
### ✅ Landing Page Hero
|
||||||
|
- Large 200px icon
|
||||||
|
- Fully interactive
|
||||||
|
- Prominent placement above title
|
||||||
|
- Matches theme colors perfectly
|
||||||
|
|
||||||
|
### ✅ Browser Favicon
|
||||||
|
- Appears in browser tabs
|
||||||
|
- Simplified design for small sizes
|
||||||
|
- SVG format (sharp at any zoom)
|
||||||
|
- Fallback PNG versions available
|
||||||
|
|
||||||
|
### ✅ PWA Icons
|
||||||
|
- manifest.json configured
|
||||||
|
- Icons for Android home screen
|
||||||
|
- Various sizes (192px, 512px)
|
||||||
|
- Generates automatically from SVG
|
||||||
|
|
||||||
|
### ✅ Apple Touch Icon
|
||||||
|
- iOS home screen icon
|
||||||
|
- 180x180px optimized
|
||||||
|
- Proper metadata in layout
|
||||||
|
- Native app-like experience
|
||||||
|
|
||||||
|
## 📦 File Structure
|
||||||
|
|
||||||
|
```
|
||||||
|
pivoine-docs-hub/
|
||||||
|
├── components/
|
||||||
|
│ └── icons/
|
||||||
|
│ ├── PivoineDocsIcon.tsx # ⭐ Animated React component
|
||||||
|
│ ├── KomposeIcon.tsx # Kompose project icon
|
||||||
|
│ ├── index.ts # Exports
|
||||||
|
│ ├── PIVOINE_DOCS_ICON.md # 📚 Full documentation
|
||||||
|
│ └── SHOWCASE.md # Kompose showcase
|
||||||
|
├── public/
|
||||||
|
│ ├── icon.svg # ⭐ Full detail SVG (256x256)
|
||||||
|
│ ├── favicon.svg # ⭐ Simplified SVG (32x32)
|
||||||
|
│ ├── manifest.json # ⭐ PWA configuration
|
||||||
|
│ ├── icon-192.png # Generated PNG
|
||||||
|
│ ├── icon-512.png # Generated PNG
|
||||||
|
│ ├── apple-touch-icon.png # Generated PNG
|
||||||
|
│ ├── favicon-32x32.png # Generated PNG
|
||||||
|
│ └── favicon-16x16.png # Generated PNG
|
||||||
|
├── scripts/
|
||||||
|
│ └── generate-icons.sh # ⭐ PNG generation script
|
||||||
|
└── app/
|
||||||
|
├── layout.tsx # ⭐ Updated with icon metadata
|
||||||
|
└── page.tsx # ⭐ Integrated in hero
|
||||||
|
|
||||||
|
⭐ = New or updated files
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🛠️ Generating PNG Icons
|
||||||
|
|
||||||
|
### Prerequisites
|
||||||
|
```bash
|
||||||
|
# macOS
|
||||||
|
brew install librsvg
|
||||||
|
|
||||||
|
# Ubuntu/Debian
|
||||||
|
sudo apt-get install librsvg2-bin
|
||||||
|
```
|
||||||
|
|
||||||
|
### Generate All Sizes
|
||||||
|
```bash
|
||||||
|
chmod +x scripts/generate-icons.sh
|
||||||
|
./scripts/generate-icons.sh
|
||||||
|
```
|
||||||
|
|
||||||
|
Output:
|
||||||
|
```
|
||||||
|
🎨 Generating PNG icons from SVG...
|
||||||
|
📱 Generating PWA icons...
|
||||||
|
🍎 Generating Apple touch icon...
|
||||||
|
🌐 Generating standard favicons...
|
||||||
|
✅ All icons generated successfully!
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🎨 Color Palette
|
||||||
|
|
||||||
|
The icon uses the following colors to match your theme:
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* Petal Gradients */
|
||||||
|
--petal-1: linear-gradient(135deg, #a855f7, #ec4899); /* Violet → Pink */
|
||||||
|
--petal-2: linear-gradient(135deg, #9333ea, #db2777); /* Purple → Rose */
|
||||||
|
--petal-3: linear-gradient(135deg, #c026d3, #f472b6); /* Fuchsia → Pink */
|
||||||
|
|
||||||
|
/* Center */
|
||||||
|
--center: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706); /* Gold */
|
||||||
|
|
||||||
|
/* Pages */
|
||||||
|
--page: linear-gradient(135deg, #f3f4f6, #e5e7eb); /* Light gray */
|
||||||
|
|
||||||
|
/* Text Lines */
|
||||||
|
--text: #6366f1, #a855f7; /* Indigo, Purple */
|
||||||
|
|
||||||
|
/* Background */
|
||||||
|
--bg: #1e293b; /* Dark slate */
|
||||||
|
```
|
||||||
|
|
||||||
|
## ✨ What Makes It Special
|
||||||
|
|
||||||
|
### 🎭 Brand Identity
|
||||||
|
- **Peony flower** directly represents "Pivoine"
|
||||||
|
- **Purple/pink theme** matches landing page perfectly
|
||||||
|
- **Memorable design** stands out from generic doc icons
|
||||||
|
- **Professional yet creative** aesthetic
|
||||||
|
|
||||||
|
### 🎨 Visual Excellence
|
||||||
|
- **Multi-layer depth** with 3 petal layers
|
||||||
|
- **Smooth gradients** create dimension
|
||||||
|
- **Golden center** adds warmth and focus
|
||||||
|
- **Document integration** clearly shows purpose
|
||||||
|
|
||||||
|
### ⚡ Technical Excellence
|
||||||
|
- **GPU accelerated** animations (60 FPS)
|
||||||
|
- **Zero dependencies** except React
|
||||||
|
- **Optimized** for performance (~10KB)
|
||||||
|
- **Accessible** with reduced motion support
|
||||||
|
|
||||||
|
### 🎯 Versatile Usage
|
||||||
|
- **Works at all sizes** (16px to 512px+)
|
||||||
|
- **Multiple formats** (React, SVG, PNG)
|
||||||
|
- **PWA ready** with manifest
|
||||||
|
- **Cross-platform** (web, iOS, Android)
|
||||||
|
|
||||||
|
## 📱 Progressive Web App Features
|
||||||
|
|
||||||
|
With the manifest.json and icons in place, users can:
|
||||||
|
|
||||||
|
1. **Add to Home Screen** on mobile devices
|
||||||
|
2. **Offline capable** (with service worker, to be added)
|
||||||
|
3. **Native app feel** with standalone display
|
||||||
|
4. **Fast loading** with cached icons
|
||||||
|
5. **Proper branding** across all platforms
|
||||||
|
|
||||||
|
## 🎯 Next Steps
|
||||||
|
|
||||||
|
### Optional Enhancements
|
||||||
|
|
||||||
|
1. **Generate PNG icons**:
|
||||||
|
```bash
|
||||||
|
./scripts/generate-icons.sh
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **Add service worker** for offline support:
|
||||||
|
```bash
|
||||||
|
# Add workbox or next-pwa
|
||||||
|
```
|
||||||
|
|
||||||
|
3. **Customize colors**:
|
||||||
|
- Edit gradients in `PivoineDocsIcon.tsx`
|
||||||
|
- Update theme colors in `manifest.json`
|
||||||
|
|
||||||
|
4. **Create variations**:
|
||||||
|
- Different color schemes for events
|
||||||
|
- Seasonal variants
|
||||||
|
- Dark/light mode versions
|
||||||
|
|
||||||
|
5. **Add more sizes**:
|
||||||
|
- Edit script to generate additional sizes
|
||||||
|
- Update manifest with new icons
|
||||||
|
|
||||||
|
## 🐛 Troubleshooting
|
||||||
|
|
||||||
|
### Icon not appearing?
|
||||||
|
```bash
|
||||||
|
rm -rf .next
|
||||||
|
pnpm dev
|
||||||
|
```
|
||||||
|
|
||||||
|
### Animations not working?
|
||||||
|
- Check browser supports SVG filters
|
||||||
|
- Verify no CSS conflicts
|
||||||
|
- Check `prefers-reduced-motion` setting
|
||||||
|
|
||||||
|
### PNG icons not generating?
|
||||||
|
```bash
|
||||||
|
# Install librsvg first
|
||||||
|
brew install librsvg # macOS
|
||||||
|
sudo apt-get install librsvg2-bin # Ubuntu
|
||||||
|
```
|
||||||
|
|
||||||
|
### Performance issues?
|
||||||
|
- Use `interactive={false}` for lists
|
||||||
|
- Reduce size for better performance
|
||||||
|
- Consider static SVG for multiple instances
|
||||||
|
|
||||||
|
## 🎊 Summary
|
||||||
|
|
||||||
|
✅ **Animated React component** - Full-featured with beautiful effects
|
||||||
|
✅ **Static SVG icons** - Perfect quality at any size
|
||||||
|
✅ **PWA manifest** - Ready for app installation
|
||||||
|
✅ **Icon generation script** - Easy PNG creation
|
||||||
|
✅ **Hero integration** - Prominently displayed
|
||||||
|
✅ **Favicon setup** - Shows in browser tabs
|
||||||
|
✅ **Apple touch icon** - iOS home screen ready
|
||||||
|
✅ **Complete documentation** - Everything you need to know
|
||||||
|
|
||||||
|
## 🌟 Result
|
||||||
|
|
||||||
|
You now have a **stunning, unique branding icon** that:
|
||||||
|
- Perfectly represents your "Pivoine" brand
|
||||||
|
- Clearly communicates "documentation"
|
||||||
|
- Works beautifully at all sizes
|
||||||
|
- Features smooth, engaging animations
|
||||||
|
- Is fully accessible and performant
|
||||||
|
- Can be used across all platforms
|
||||||
|
- Matches your purple/pink theme perfectly
|
||||||
|
|
||||||
|
The icon creates a strong brand identity and memorable visual presence for your documentation hub! 🌸
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Questions or need help?** Check:
|
||||||
|
- [PIVOINE_DOCS_ICON.md](./PIVOINE_DOCS_ICON.md) - Complete technical docs
|
||||||
|
- [components/README.md](../README.md) - Component guide
|
||||||
|
- [README.md](../../README.md) - Main documentation
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Created with passion for Valknar** | [pivoine.art](http://pivoine.art)
|
||||||
|
|
||||||
|
*A peony in full bloom, with knowledge at its heart* 🌸📚✨
|
||||||
@@ -11,6 +11,7 @@ A stunning, modern documentation hub landing page for all Pivoine projects by Va
|
|||||||
|
|
||||||
- **Modern Stack**: Built with Next.js 15 App Router, React 19, TypeScript, and Tailwind CSS 4
|
- **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
|
- **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
|
- **Responsive**: Fully responsive design that works on all devices
|
||||||
- **Performance Optimized**: Turbopack for lightning-fast dev builds, image optimization, and production-ready configuration
|
- **Performance Optimized**: Turbopack for lightning-fast dev builds, image optimization, and production-ready configuration
|
||||||
- **SEO Ready**: Comprehensive metadata and Open Graph tags
|
- **SEO Ready**: Comprehensive metadata and Open Graph tags
|
||||||
|
|||||||
@@ -10,6 +10,21 @@ export const metadata: Metadata = {
|
|||||||
keywords: ['documentation', 'pivoine', 'valknar', 'developer', 'guides', 'api'],
|
keywords: ['documentation', 'pivoine', 'valknar', 'developer', 'guides', 'api'],
|
||||||
authors: [{ name: 'Valknar', url: 'https://pivoine.art' }],
|
authors: [{ name: 'Valknar', url: 'https://pivoine.art' }],
|
||||||
creator: 'Valknar',
|
creator: 'Valknar',
|
||||||
|
manifest: '/manifest.json',
|
||||||
|
icons: {
|
||||||
|
icon: [
|
||||||
|
{ url: '/favicon.svg', type: 'image/svg+xml' },
|
||||||
|
{ url: '/icon.svg', type: 'image/svg+xml', sizes: 'any' },
|
||||||
|
],
|
||||||
|
apple: [
|
||||||
|
{ url: '/apple-touch-icon.png', sizes: '180x180', type: 'image/png' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
appleWebApp: {
|
||||||
|
capable: true,
|
||||||
|
statusBarStyle: 'black-translucent',
|
||||||
|
title: 'Pivoine Docs',
|
||||||
|
},
|
||||||
openGraph: {
|
openGraph: {
|
||||||
type: 'website',
|
type: 'website',
|
||||||
locale: 'en_US',
|
locale: 'en_US',
|
||||||
|
|||||||
@@ -3,6 +3,7 @@
|
|||||||
import React, { useState, useEffect } from 'react'
|
import React, { useState, useEffect } from 'react'
|
||||||
import { BookOpen, Code2, Globe, ChevronRight, Sparkles, Terminal } from 'lucide-react'
|
import { BookOpen, Code2, Globe, ChevronRight, Sparkles, Terminal } from 'lucide-react'
|
||||||
import KomposeIcon from '@/components/icons/KomposeIcon'
|
import KomposeIcon from '@/components/icons/KomposeIcon'
|
||||||
|
import { PivoineDocsIcon } from '@/components/icons'
|
||||||
|
|
||||||
export default function DocsHub() {
|
export default function DocsHub() {
|
||||||
const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
|
const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
|
||||||
@@ -70,6 +71,11 @@ export default function DocsHub() {
|
|||||||
<div className="relative z-10 container mx-auto px-6 py-12 max-w-6xl">
|
<div className="relative z-10 container mx-auto px-6 py-12 max-w-6xl">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<header className="text-center mb-20 pt-12">
|
<header className="text-center mb-20 pt-12">
|
||||||
|
{/* Hero Icon */}
|
||||||
|
<div className="flex justify-center mb-8">
|
||||||
|
<PivoineDocsIcon size="200px" showLabel={false} interactive={true} />
|
||||||
|
</div>
|
||||||
|
|
||||||
<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">
|
<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" />
|
<Sparkles className="w-4 h-4 text-purple-400" />
|
||||||
<span className="text-sm text-purple-300">Documentation Hub</span>
|
<span className="text-sm text-purple-300">Documentation Hub</span>
|
||||||
@@ -107,8 +113,8 @@ export default function DocsHub() {
|
|||||||
<div className="relative">
|
<div className="relative">
|
||||||
<div className="flex items-start justify-between mb-4">
|
<div className="flex items-start justify-between mb-4">
|
||||||
{project.name === 'Kompose' ? (
|
{project.name === 'Kompose' ? (
|
||||||
<div className="relative">
|
<div className={`relative w-12 h-12 rounded-xl bg-gradient-to-br ${project.gradient} shadow-lg flex items-center justify-center`}>
|
||||||
<KomposeIcon size="48px" interactive={false} />
|
<KomposeIcon size="32px" interactive={false} className='' />
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className={`p-3 rounded-xl bg-gradient-to-br ${project.gradient} shadow-lg`}>
|
<div className={`p-3 rounded-xl bg-gradient-to-br ${project.gradient} shadow-lg`}>
|
||||||
|
|||||||
@@ -4,7 +4,81 @@ This directory contains reusable React components for the Pivoine Docs Hub.
|
|||||||
|
|
||||||
## Icons
|
## Icons
|
||||||
|
|
||||||
Custom animated icons for documentation projects.
|
Custom animated icons for the documentation hub and projects.
|
||||||
|
|
||||||
|
### PivoineDocsIcon ⭐ NEW
|
||||||
|
|
||||||
|
The official branding icon for the Pivoine Docs Hub - a beautiful peony flower with integrated documentation elements.
|
||||||
|
|
||||||
|
#### Features
|
||||||
|
- 🌸 Multi-layer peony flower design (18 petals, 3 layers)
|
||||||
|
- 📄 Document pages in the center with text lines
|
||||||
|
- ✨ Twinkling sparkles and orbiting particles
|
||||||
|
- 💫 Smooth bloom animation on hover
|
||||||
|
- 🎯 3D rotation and ripple effect on click
|
||||||
|
- 🎨 Purple/pink gradients matching theme
|
||||||
|
- 📱 Fully responsive and touch-optimized
|
||||||
|
- ♿ Accessibility support (reduced motion)
|
||||||
|
- 🚀 GPU-accelerated animations (60 FPS)
|
||||||
|
|
||||||
|
#### Usage
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { PivoineDocsIcon } from '@/components/icons'
|
||||||
|
|
||||||
|
// Hero section - large, interactive
|
||||||
|
<PivoineDocsIcon size="200px" />
|
||||||
|
|
||||||
|
// With label
|
||||||
|
<PivoineDocsIcon size="256px" showLabel={true} />
|
||||||
|
|
||||||
|
// Small, non-interactive
|
||||||
|
<PivoineDocsIcon size="64px" interactive={false} />
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Props
|
||||||
|
|
||||||
|
| Prop | Type | Default | Description |
|
||||||
|
|------|------|---------|-------------|
|
||||||
|
| `size` | `string` | `'256px'` | Size of the icon (CSS width/height) |
|
||||||
|
| `interactive` | `boolean` | `true` | Enable/disable hover and click animations |
|
||||||
|
| `className` | `string` | `''` | Additional CSS classes |
|
||||||
|
| `showLabel` | `boolean` | `false` | Show "Pivoine Docs" text below icon |
|
||||||
|
|
||||||
|
#### Animations
|
||||||
|
|
||||||
|
**Default State:**
|
||||||
|
- Subtle pulsing background
|
||||||
|
- Twinkling sparkles (2s cycle)
|
||||||
|
- Orbiting particles (8s cycle)
|
||||||
|
- Gentle page floating
|
||||||
|
- Text lines appear on mount
|
||||||
|
|
||||||
|
**On Hover:**
|
||||||
|
- Icon scales and lifts
|
||||||
|
- Petals bloom in sequence (outer → middle → inner)
|
||||||
|
- Center glows intensely
|
||||||
|
- Sparkles burst
|
||||||
|
- Pages fan out with rotation
|
||||||
|
|
||||||
|
**On Click/Tap:**
|
||||||
|
- 3D rotation flip (360°)
|
||||||
|
- Petal explosion effect
|
||||||
|
- Center burst
|
||||||
|
- Ripple effect emanates from center
|
||||||
|
- Duration: ~800ms
|
||||||
|
|
||||||
|
#### Use Cases
|
||||||
|
- Hero sections and splash screens
|
||||||
|
- About pages
|
||||||
|
- Branding materials
|
||||||
|
- Favicon and PWA icons
|
||||||
|
- Social media graphics
|
||||||
|
|
||||||
|
#### Documentation
|
||||||
|
See [PIVOINE_DOCS_ICON.md](./icons/PIVOINE_DOCS_ICON.md) for complete documentation.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
### KomposeIcon
|
### KomposeIcon
|
||||||
|
|
||||||
|
|||||||
426
Projects/docs.pivoine.art/components/icons/PIVOINE_DOCS_ICON.md
Normal file
426
Projects/docs.pivoine.art/components/icons/PIVOINE_DOCS_ICON.md
Normal file
@@ -0,0 +1,426 @@
|
|||||||
|
# 🌸 Pivoine Docs Icon - Complete Documentation
|
||||||
|
|
||||||
|
The official branding icon for the Pivoine Documentation Hub, featuring a beautiful peony flower with integrated documentation elements.
|
||||||
|
|
||||||
|
## 🎨 Design Concept
|
||||||
|
|
||||||
|
The icon combines two powerful visual metaphors:
|
||||||
|
|
||||||
|
1. **Peony Flower (Pivoine)** - Represents the brand identity
|
||||||
|
- Multiple layers of petals in purple and pink gradients
|
||||||
|
- Symbolizes beauty, elegance, and growth
|
||||||
|
- Reflects the "Pivoine" brand name
|
||||||
|
|
||||||
|
2. **Documentation Pages** - Represents the hub's purpose
|
||||||
|
- Stacked pages in the center of the flower
|
||||||
|
- Blue text lines suggesting content
|
||||||
|
- Golden center representing knowledge/enlightenment
|
||||||
|
|
||||||
|
### Color Palette
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* Primary Petals */
|
||||||
|
Purple 1: #a855f7 → #ec4899 /* Violet to pink */
|
||||||
|
Purple 2: #9333ea → #db2777 /* Deep purple to rose */
|
||||||
|
Purple 3: #c026d3 → #f472b6 /* Fuchsia to pink */
|
||||||
|
|
||||||
|
/* Center & Accents */
|
||||||
|
Golden: #fbbf24 → #f59e0b → #d97706 /* Warm gold gradient */
|
||||||
|
Pages: #f3f4f6 → #e5e7eb /* Light gray */
|
||||||
|
Text: #6366f1, #a855f7 /* Indigo and purple */
|
||||||
|
Background: #1e293b /* Dark slate */
|
||||||
|
```
|
||||||
|
|
||||||
|
## 📦 Available Formats
|
||||||
|
|
||||||
|
### React Component (Animated)
|
||||||
|
**File**: `components/icons/PivoineDocsIcon.tsx`
|
||||||
|
- Full animations (hover, click, orbiting particles)
|
||||||
|
- Interactive and responsive
|
||||||
|
- Customizable size and behavior
|
||||||
|
- For hero sections and prominent displays
|
||||||
|
|
||||||
|
### Static SVG Icons
|
||||||
|
**Files**:
|
||||||
|
- `public/icon.svg` (256x256) - Full detail, all platforms
|
||||||
|
- `public/favicon.svg` (32x32 optimized) - Browser tabs
|
||||||
|
|
||||||
|
### PNG Icons (Generated)
|
||||||
|
Generate with: `./scripts/generate-icons.sh`
|
||||||
|
- `icon-192.png` - PWA icon (Android)
|
||||||
|
- `icon-512.png` - PWA icon (Android HD)
|
||||||
|
- `apple-touch-icon.png` - iOS home screen
|
||||||
|
- `favicon-32x32.png` - Standard favicon
|
||||||
|
- `favicon-16x16.png` - Small favicon
|
||||||
|
|
||||||
|
## 🎭 React Component Usage
|
||||||
|
|
||||||
|
### Basic Usage (Hero Area)
|
||||||
|
```tsx
|
||||||
|
import { PivoineDocsIcon } from '@/components/icons'
|
||||||
|
|
||||||
|
<PivoineDocsIcon size="200px" />
|
||||||
|
```
|
||||||
|
|
||||||
|
### Props
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
interface PivoineDocsIconProps {
|
||||||
|
size?: string // Default: '256px'
|
||||||
|
interactive?: boolean // Default: true
|
||||||
|
className?: string // Additional classes
|
||||||
|
showLabel?: boolean // Default: false - Shows "Pivoine Docs" text
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Examples
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
// Large hero icon with full interactivity
|
||||||
|
<PivoineDocsIcon size="256px" showLabel={true} />
|
||||||
|
|
||||||
|
// Medium size, interactive
|
||||||
|
<PivoineDocsIcon size="128px" />
|
||||||
|
|
||||||
|
// Small, non-interactive (for cards/lists)
|
||||||
|
<PivoineDocsIcon size="64px" interactive={false} />
|
||||||
|
|
||||||
|
// Custom styling
|
||||||
|
<PivoineDocsIcon
|
||||||
|
size="180px"
|
||||||
|
className="my-custom-class"
|
||||||
|
showLabel={false}
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
## ✨ Animations & Effects
|
||||||
|
|
||||||
|
### Default State
|
||||||
|
- **Subtle pulsing** background circle
|
||||||
|
- **Twinkling sparkles** at corners
|
||||||
|
- **Orbiting particles** around the flower
|
||||||
|
- **Gentle floating** of document pages
|
||||||
|
- **Text lines** appear with staggered animation
|
||||||
|
|
||||||
|
### Hover State (when `interactive={true}`)
|
||||||
|
- Icon **scales up** and **lifts** (transform 3D)
|
||||||
|
- Enhanced **shadow and glow** effects
|
||||||
|
- Petals **bloom** outward in sequence
|
||||||
|
- Outer petals bloom first
|
||||||
|
- Middle petals follow (0.1s delay)
|
||||||
|
- Inner petals last (0.2s delay)
|
||||||
|
- Center golden circle **glows intensely**
|
||||||
|
- Sparkles **burst** and expand
|
||||||
|
- Pages **fan out** slightly with rotation
|
||||||
|
- Particles **accelerate**
|
||||||
|
|
||||||
|
### Click/Tap State
|
||||||
|
- **3D bounce** with rotation (0-180-360°)
|
||||||
|
- Petals **explode** outward briefly
|
||||||
|
- Center **bursts** with glow
|
||||||
|
- **Ripple effect** emanates from center
|
||||||
|
- Duration: ~800ms
|
||||||
|
- Smooth cubic-bezier easing
|
||||||
|
|
||||||
|
### Continuous Animations
|
||||||
|
Even when not hovered:
|
||||||
|
- Background pulse (4s cycle)
|
||||||
|
- Sparkle twinkle (2s cycle, staggered)
|
||||||
|
- Particle orbit (8s rotation, staggered)
|
||||||
|
- Center pulse (3s cycle)
|
||||||
|
- Page float (3s gentle movement)
|
||||||
|
- Text lines draw in on mount
|
||||||
|
|
||||||
|
## 📱 Responsive & Accessible
|
||||||
|
|
||||||
|
### Responsive Behavior
|
||||||
|
```css
|
||||||
|
/* Desktop: Full effects */
|
||||||
|
@media (min-width: 769px) {
|
||||||
|
hover: scale(1.08) translateY(-8px)
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tablet/Mobile: Reduced scale */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
hover: scale(1.05) translateY(-4px)
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Touch devices: Active state */
|
||||||
|
@media (hover: none) and (pointer: coarse) {
|
||||||
|
active: scale(0.95)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Accessibility
|
||||||
|
- ✅ **Reduced Motion**: All animations disabled when `prefers-reduced-motion: reduce`
|
||||||
|
- ✅ **Touch Optimized**: Larger hit areas, optimized tap response
|
||||||
|
- ✅ **Keyboard Navigation**: Focusable when interactive
|
||||||
|
- ✅ **Screen Readers**: Appropriate ARIA labels (add as needed)
|
||||||
|
|
||||||
|
## 🎯 Integration Points
|
||||||
|
|
||||||
|
### 1. Hero Section (Landing Page)
|
||||||
|
**Location**: `app/page.tsx`
|
||||||
|
```tsx
|
||||||
|
<div className="flex justify-center mb-8">
|
||||||
|
<PivoineDocsIcon size="200px" showLabel={false} />
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. Favicon (Browser Tab)
|
||||||
|
**Location**: `app/layout.tsx`
|
||||||
|
```tsx
|
||||||
|
icons: {
|
||||||
|
icon: [
|
||||||
|
{ url: '/favicon.svg', type: 'image/svg+xml' },
|
||||||
|
{ url: '/icon.svg', type: 'image/svg+xml', sizes: 'any' },
|
||||||
|
],
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. PWA Manifest
|
||||||
|
**Location**: `public/manifest.json`
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "/icon.svg",
|
||||||
|
"sizes": "any",
|
||||||
|
"type": "image/svg+xml"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "/icon-192.png",
|
||||||
|
"sizes": "192x192",
|
||||||
|
"type": "image/png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "/icon-512.png",
|
||||||
|
"sizes": "512x512",
|
||||||
|
"type": "image/png"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 4. Apple Touch Icon
|
||||||
|
**Location**: `app/layout.tsx`
|
||||||
|
```tsx
|
||||||
|
icons: {
|
||||||
|
apple: [
|
||||||
|
{ url: '/apple-touch-icon.png', sizes: '180x180' },
|
||||||
|
],
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🛠️ Technical Details
|
||||||
|
|
||||||
|
### Performance
|
||||||
|
- **GPU Accelerated**: All animations use CSS transforms
|
||||||
|
- **Optimized**: Minimal JavaScript, mostly CSS
|
||||||
|
- **60 FPS**: Smooth on modern devices
|
||||||
|
- **No External Assets**: Inline SVG, no image loading
|
||||||
|
- **File Size**: ~10KB component + ~3KB SVG
|
||||||
|
|
||||||
|
### Browser Support
|
||||||
|
- ✅ Chrome/Edge 90+
|
||||||
|
- ✅ Firefox 88+
|
||||||
|
- ✅ Safari 14+
|
||||||
|
- ✅ iOS Safari 14+
|
||||||
|
- ✅ Chrome Mobile
|
||||||
|
- ✅ Samsung Internet
|
||||||
|
|
||||||
|
### SVG Filters Used
|
||||||
|
- `feGaussianBlur` - Glow effects
|
||||||
|
- `feMerge` - Combining blur with original
|
||||||
|
- `feDropShadow` - Page shadows
|
||||||
|
|
||||||
|
### Gradients
|
||||||
|
- **8 unique gradients** total
|
||||||
|
- Linear gradients for petals
|
||||||
|
- Radial gradients for ripple
|
||||||
|
- Golden gradient for center
|
||||||
|
- Page gradients for documents
|
||||||
|
|
||||||
|
## 📐 Size Guidelines
|
||||||
|
|
||||||
|
| Context | Recommended Size | Interactive |
|
||||||
|
|---------|-----------------|-------------|
|
||||||
|
| Hero section | 200-256px | Yes |
|
||||||
|
| Page header | 64-96px | Optional |
|
||||||
|
| Sidebar | 48-64px | No |
|
||||||
|
| Favicon | Auto (SVG) | N/A |
|
||||||
|
| PWA Icon | Auto (PNG) | N/A |
|
||||||
|
| Avatar/Profile | 40-48px | No |
|
||||||
|
|
||||||
|
## 🎨 Customization
|
||||||
|
|
||||||
|
### Changing Colors
|
||||||
|
|
||||||
|
Edit the gradient definitions in `PivoineDocsIcon.tsx`:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
<linearGradient id="petal-gradient-1">
|
||||||
|
<stop offset="0%" style={{ stopColor: '#YOUR_COLOR' }} />
|
||||||
|
<stop offset="100%" style={{ stopColor: '#YOUR_COLOR' }} />
|
||||||
|
</linearGradient>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Adjusting Animations
|
||||||
|
|
||||||
|
Modify keyframes in the `<style jsx>` section:
|
||||||
|
|
||||||
|
```css
|
||||||
|
@keyframes your-custom-animation {
|
||||||
|
0% { /* start state */ }
|
||||||
|
100% { /* end state */ }
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Adding New Effects
|
||||||
|
|
||||||
|
1. Add new SVG elements to the component
|
||||||
|
2. Define animations in CSS
|
||||||
|
3. Apply animations to elements
|
||||||
|
4. Test hover/click states
|
||||||
|
|
||||||
|
## 🚀 Generating PNG Icons
|
||||||
|
|
||||||
|
### Prerequisites
|
||||||
|
Install `librsvg`:
|
||||||
|
```bash
|
||||||
|
# macOS
|
||||||
|
brew install librsvg
|
||||||
|
|
||||||
|
# Ubuntu/Debian
|
||||||
|
sudo apt-get install librsvg2-bin
|
||||||
|
```
|
||||||
|
|
||||||
|
### Generate All Icons
|
||||||
|
```bash
|
||||||
|
chmod +x scripts/generate-icons.sh
|
||||||
|
./scripts/generate-icons.sh
|
||||||
|
```
|
||||||
|
|
||||||
|
This creates:
|
||||||
|
- icon-192.png (192x192)
|
||||||
|
- icon-512.png (512x512)
|
||||||
|
- apple-touch-icon.png (180x180)
|
||||||
|
- favicon-32x32.png (32x32)
|
||||||
|
- favicon-16x16.png (16x16)
|
||||||
|
|
||||||
|
### Manual Generation
|
||||||
|
```bash
|
||||||
|
cd public
|
||||||
|
rsvg-convert -w 192 -h 192 icon.svg -o icon-192.png
|
||||||
|
rsvg-convert -w 512 -h 512 icon.svg -o icon-512.png
|
||||||
|
rsvg-convert -w 180 -h 180 icon.svg -o apple-touch-icon.png
|
||||||
|
```
|
||||||
|
|
||||||
|
## 📝 Usage in Documentation
|
||||||
|
|
||||||
|
### Markdown
|
||||||
|
```markdown
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
### HTML
|
||||||
|
```html
|
||||||
|
<img src="/icon.svg" alt="Pivoine Docs" width="64" height="64">
|
||||||
|
```
|
||||||
|
|
||||||
|
### React
|
||||||
|
```tsx
|
||||||
|
import { PivoineDocsIcon } from '@/components/icons'
|
||||||
|
<PivoineDocsIcon size="64px" />
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🎯 Design Philosophy
|
||||||
|
|
||||||
|
### Why This Design?
|
||||||
|
|
||||||
|
1. **Brand Recognition**: The peony (pivoine) directly represents the brand
|
||||||
|
2. **Purpose Clarity**: Document pages in center clearly indicate "documentation"
|
||||||
|
3. **Visual Hierarchy**: Flower draws eye to center (docs)
|
||||||
|
4. **Modern Aesthetic**: Gradients and effects feel contemporary
|
||||||
|
5. **Memorable**: Unique design stands out from generic doc icons
|
||||||
|
6. **Scalable**: Works at all sizes (16px to 512px+)
|
||||||
|
7. **Thematic**: Matches the purple/pink theme of the landing page
|
||||||
|
|
||||||
|
### Symbolism
|
||||||
|
|
||||||
|
- **Petals**: Multiple layers represent comprehensive documentation
|
||||||
|
- **Colors**: Purple/pink for creativity and accessibility
|
||||||
|
- **Golden Center**: Knowledge and enlightenment
|
||||||
|
- **Pages**: Clear representation of documentation
|
||||||
|
- **Bloom Animation**: Growth and expanding knowledge
|
||||||
|
- **Particles**: Dynamic, always-evolving content
|
||||||
|
|
||||||
|
## 🐛 Troubleshooting
|
||||||
|
|
||||||
|
### Icon Not Showing
|
||||||
|
```bash
|
||||||
|
# Clear Next.js cache
|
||||||
|
rm -rf .next
|
||||||
|
pnpm dev
|
||||||
|
```
|
||||||
|
|
||||||
|
### Animations Not Working
|
||||||
|
- Check browser support for SVG filters
|
||||||
|
- Verify no conflicting CSS
|
||||||
|
- Check `prefers-reduced-motion` setting
|
||||||
|
|
||||||
|
### PNG Icons Not Generating
|
||||||
|
```bash
|
||||||
|
# Check if rsvg-convert is installed
|
||||||
|
which rsvg-convert
|
||||||
|
|
||||||
|
# If not, install librsvg
|
||||||
|
brew install librsvg # macOS
|
||||||
|
```
|
||||||
|
|
||||||
|
### Performance Issues
|
||||||
|
- Use `interactive={false}` for multiple icons
|
||||||
|
- Reduce size for better performance
|
||||||
|
- Consider static SVG for lists/grids
|
||||||
|
|
||||||
|
## 📊 File Structure
|
||||||
|
|
||||||
|
```
|
||||||
|
docs.pivoine.art/
|
||||||
|
├── components/
|
||||||
|
│ └── icons/
|
||||||
|
│ ├── PivoineDocsIcon.tsx # React component
|
||||||
|
│ ├── KomposeIcon.tsx # Other icons
|
||||||
|
│ └── index.ts # Exports
|
||||||
|
├── public/
|
||||||
|
│ ├── icon.svg # Full detail SVG
|
||||||
|
│ ├── favicon.svg # Simplified for small sizes
|
||||||
|
│ ├── manifest.json # PWA manifest
|
||||||
|
│ ├── icon-192.png # Generated
|
||||||
|
│ ├── icon-512.png # Generated
|
||||||
|
│ └── apple-touch-icon.png # Generated
|
||||||
|
├── scripts/
|
||||||
|
│ └── generate-icons.sh # PNG generation script
|
||||||
|
└── app/
|
||||||
|
├── layout.tsx # Icon metadata
|
||||||
|
└── page.tsx # Icon usage
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🎉 Credits
|
||||||
|
|
||||||
|
- **Design**: Custom peony + documentation hybrid
|
||||||
|
- **Colors**: Tailwind CSS palette (purple, pink, gold)
|
||||||
|
- **Animations**: CSS keyframes + React hooks
|
||||||
|
- **Inspiration**: Nature (peony flower) + technology (docs)
|
||||||
|
|
||||||
|
## 📚 Related Documentation
|
||||||
|
|
||||||
|
- [components/README.md](../README.md) - Component usage guide
|
||||||
|
- [components/icons/SHOWCASE.md](./SHOWCASE.md) - KomposeIcon example
|
||||||
|
- [README.md](../../README.md) - Main project documentation
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Created with care for Valknar** | [pivoine.art](http://pivoine.art)
|
||||||
|
|
||||||
|
*A peony in full bloom, with knowledge at its heart* 🌸📚
|
||||||
520
Projects/docs.pivoine.art/components/icons/PivoineDocsIcon.tsx
Normal file
520
Projects/docs.pivoine.art/components/icons/PivoineDocsIcon.tsx
Normal file
@@ -0,0 +1,520 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import React, { useState } from 'react'
|
||||||
|
|
||||||
|
interface PivoineDocsIconProps {
|
||||||
|
size?: string
|
||||||
|
interactive?: boolean
|
||||||
|
className?: string
|
||||||
|
showLabel?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function PivoineDocsIcon({
|
||||||
|
size = '256px',
|
||||||
|
interactive = true,
|
||||||
|
className = '',
|
||||||
|
showLabel = false
|
||||||
|
}: PivoineDocsIconProps) {
|
||||||
|
const [isClicked, setIsClicked] = useState(false)
|
||||||
|
const [showRipple, setShowRipple] = useState(false)
|
||||||
|
|
||||||
|
const handleClick = () => {
|
||||||
|
if (!interactive) return
|
||||||
|
|
||||||
|
setIsClicked(true)
|
||||||
|
setShowRipple(true)
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
setIsClicked(false)
|
||||||
|
}, 800)
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
setShowRipple(false)
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleTouch = (e: React.TouchEvent) => {
|
||||||
|
if (!interactive) return
|
||||||
|
handleClick()
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`pivoine-docs-icon-wrapper ${isClicked ? 'is-clicked' : ''} ${interactive ? 'is-interactive' : ''} ${className}`}
|
||||||
|
onClick={handleClick}
|
||||||
|
onTouchStart={handleTouch}
|
||||||
|
style={{ width: size, height: size }}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="pivoine-docs-icon"
|
||||||
|
viewBox="0 0 256 256"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<defs>
|
||||||
|
{/* Gradients */}
|
||||||
|
<linearGradient id="petal-gradient-1" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" style={{ stopColor: '#a855f7', stopOpacity: 1 }} />
|
||||||
|
<stop offset="100%" style={{ stopColor: '#ec4899', stopOpacity: 1 }} />
|
||||||
|
</linearGradient>
|
||||||
|
|
||||||
|
<linearGradient id="petal-gradient-2" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" style={{ stopColor: '#9333ea', stopOpacity: 1 }} />
|
||||||
|
<stop offset="100%" style={{ stopColor: '#db2777', stopOpacity: 1 }} />
|
||||||
|
</linearGradient>
|
||||||
|
|
||||||
|
<linearGradient id="petal-gradient-3" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" style={{ stopColor: '#c026d3', stopOpacity: 1 }} />
|
||||||
|
<stop offset="100%" style={{ stopColor: '#f472b6', stopOpacity: 1 }} />
|
||||||
|
</linearGradient>
|
||||||
|
|
||||||
|
<linearGradient id="center-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" style={{ stopColor: '#fbbf24', stopOpacity: 1 }} />
|
||||||
|
<stop offset="50%" style={{ stopColor: '#f59e0b', stopOpacity: 1 }} />
|
||||||
|
<stop offset="100%" style={{ stopColor: '#d97706', stopOpacity: 1 }} />
|
||||||
|
</linearGradient>
|
||||||
|
|
||||||
|
<linearGradient id="page-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" style={{ stopColor: '#f3f4f6', stopOpacity: 0.95 }} />
|
||||||
|
<stop offset="100%" style={{ stopColor: '#e5e7eb', stopOpacity: 0.95 }} />
|
||||||
|
</linearGradient>
|
||||||
|
|
||||||
|
{/* Filters */}
|
||||||
|
<filter id="petal-glow">
|
||||||
|
<feGaussianBlur stdDeviation="4" result="coloredBlur" />
|
||||||
|
<feMerge>
|
||||||
|
<feMergeNode in="coloredBlur" />
|
||||||
|
<feMergeNode in="SourceGraphic" />
|
||||||
|
</feMerge>
|
||||||
|
</filter>
|
||||||
|
|
||||||
|
<filter id="intense-glow">
|
||||||
|
<feGaussianBlur stdDeviation="8" result="coloredBlur" />
|
||||||
|
<feMerge>
|
||||||
|
<feMergeNode in="coloredBlur" />
|
||||||
|
<feMergeNode in="SourceGraphic" />
|
||||||
|
</feMerge>
|
||||||
|
</filter>
|
||||||
|
|
||||||
|
<filter id="page-shadow">
|
||||||
|
<feDropShadow dx="0" dy="2" stdDeviation="3" floodOpacity="0.3" />
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
{/* Background circle */}
|
||||||
|
<circle className="bg-circle" cx="128" cy="128" r="120" fill="#1e293b" opacity="0.6" />
|
||||||
|
|
||||||
|
{/* Outer petals (8 petals) */}
|
||||||
|
<g className="outer-petals">
|
||||||
|
{[0, 45, 90, 135, 180, 225, 270, 315].map((angle, i) => (
|
||||||
|
<ellipse
|
||||||
|
key={`outer-${i}`}
|
||||||
|
className={`petal outer-petal petal-${i}`}
|
||||||
|
cx="128"
|
||||||
|
cy="128"
|
||||||
|
rx="35"
|
||||||
|
ry="65"
|
||||||
|
fill={`url(#petal-gradient-${(i % 3) + 1})`}
|
||||||
|
filter="url(#petal-glow)"
|
||||||
|
transform={`rotate(${angle} 128 128)`}
|
||||||
|
opacity="0.85"
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</g>
|
||||||
|
|
||||||
|
{/* Middle petals (6 petals) */}
|
||||||
|
<g className="middle-petals">
|
||||||
|
{[30, 90, 150, 210, 270, 330].map((angle, i) => (
|
||||||
|
<ellipse
|
||||||
|
key={`middle-${i}`}
|
||||||
|
className={`petal middle-petal petal-m-${i}`}
|
||||||
|
cx="128"
|
||||||
|
cy="128"
|
||||||
|
rx="28"
|
||||||
|
ry="50"
|
||||||
|
fill={`url(#petal-gradient-${((i + 1) % 3) + 1})`}
|
||||||
|
filter="url(#petal-glow)"
|
||||||
|
transform={`rotate(${angle} 128 128)`}
|
||||||
|
opacity="0.9"
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</g>
|
||||||
|
|
||||||
|
{/* Inner petals (4 petals) */}
|
||||||
|
<g className="inner-petals">
|
||||||
|
{[45, 135, 225, 315].map((angle, i) => (
|
||||||
|
<ellipse
|
||||||
|
key={`inner-${i}`}
|
||||||
|
className={`petal inner-petal petal-i-${i}`}
|
||||||
|
cx="128"
|
||||||
|
cy="128"
|
||||||
|
rx="22"
|
||||||
|
ry="38"
|
||||||
|
fill={`url(#petal-gradient-${((i + 2) % 3) + 1})`}
|
||||||
|
filter="url(#petal-glow)"
|
||||||
|
transform={`rotate(${angle} 128 128)`}
|
||||||
|
opacity="0.95"
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</g>
|
||||||
|
|
||||||
|
{/* Center - Document pages */}
|
||||||
|
<g className="center-docs">
|
||||||
|
{/* Page stack */}
|
||||||
|
<rect
|
||||||
|
className="page page-3"
|
||||||
|
x="102"
|
||||||
|
y="102"
|
||||||
|
width="52"
|
||||||
|
height="52"
|
||||||
|
rx="4"
|
||||||
|
fill="url(#page-gradient)"
|
||||||
|
filter="url(#page-shadow)"
|
||||||
|
opacity="0.4"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
className="page page-2"
|
||||||
|
x="104"
|
||||||
|
y="104"
|
||||||
|
width="48"
|
||||||
|
height="48"
|
||||||
|
rx="4"
|
||||||
|
fill="url(#page-gradient)"
|
||||||
|
filter="url(#page-shadow)"
|
||||||
|
opacity="0.6"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
className="page page-1"
|
||||||
|
x="106"
|
||||||
|
y="106"
|
||||||
|
width="44"
|
||||||
|
height="44"
|
||||||
|
rx="4"
|
||||||
|
fill="url(#page-gradient)"
|
||||||
|
filter="url(#page-shadow)"
|
||||||
|
opacity="0.9"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Text lines on front page */}
|
||||||
|
<line className="text-line line-1" x1="112" y1="115" x2="138" y2="115" stroke="#6366f1" strokeWidth="2" strokeLinecap="round" opacity="0.6" />
|
||||||
|
<line className="text-line line-2" x1="112" y1="122" x2="144" y2="122" stroke="#6366f1" strokeWidth="2" strokeLinecap="round" opacity="0.6" />
|
||||||
|
<line className="text-line line-3" x1="112" y1="129" x2="135" y2="129" stroke="#6366f1" strokeWidth="2" strokeLinecap="round" opacity="0.6" />
|
||||||
|
<line className="text-line line-4" x1="112" y1="136" x2="142" y2="136" stroke="#a855f7" strokeWidth="2" strokeLinecap="round" opacity="0.6" />
|
||||||
|
<line className="text-line line-5" x1="112" y1="143" x2="137" y2="143" stroke="#a855f7" strokeWidth="2" strokeLinecap="round" opacity="0.6" />
|
||||||
|
</g>
|
||||||
|
|
||||||
|
{/* Center golden circle */}
|
||||||
|
<circle className="center-circle" cx="128" cy="128" r="18" fill="url(#center-gradient)" filter="url(#petal-glow)" opacity="0.8" />
|
||||||
|
|
||||||
|
{/* Sparkle dots */}
|
||||||
|
<g className="sparkles">
|
||||||
|
<circle className="sparkle sparkle-1" cx="180" cy="80" r="3" fill="#fbbf24" opacity="0.8" />
|
||||||
|
<circle className="sparkle sparkle-2" cx="76" cy="76" r="2.5" fill="#a855f7" opacity="0.8" />
|
||||||
|
<circle className="sparkle sparkle-3" cx="180" cy="180" r="2" fill="#ec4899" opacity="0.8" />
|
||||||
|
<circle className="sparkle sparkle-4" cx="76" cy="180" r="2.5" fill="#c026d3" opacity="0.8" />
|
||||||
|
</g>
|
||||||
|
|
||||||
|
{/* Orbiting particles */}
|
||||||
|
<g className="particles">
|
||||||
|
<circle className="particle particle-1" cx="128" cy="48" r="2" fill="#a855f7" opacity="0.6" />
|
||||||
|
<circle className="particle particle-2" cx="208" cy="128" r="2" fill="#ec4899" opacity="0.6" />
|
||||||
|
<circle className="particle particle-3" cx="128" cy="208" r="2" fill="#db2777" opacity="0.6" />
|
||||||
|
<circle className="particle particle-4" cx="48" cy="128" r="2" fill="#c026d3" opacity="0.6" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
{/* Ripple effect */}
|
||||||
|
{showRipple && <div className="ripple-effect"></div>}
|
||||||
|
|
||||||
|
{/* Optional label */}
|
||||||
|
{showLabel && (
|
||||||
|
<div className="icon-label">
|
||||||
|
<span className="label-text">Pivoine Docs</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<style jsx>{`
|
||||||
|
.pivoine-docs-icon-wrapper {
|
||||||
|
position: relative;
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pivoine-docs-icon-wrapper:not(.is-interactive) {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pivoine-docs-icon {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
filter: drop-shadow(0 10px 40px rgba(168, 85, 247, 0.3));
|
||||||
|
transition: filter 0.4s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Background pulse */
|
||||||
|
.bg-circle {
|
||||||
|
animation: bg-pulse 4s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Petal animations */
|
||||||
|
.petal {
|
||||||
|
transform-origin: 128px 128px;
|
||||||
|
transition: all 0.4s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sparkles twinkle */
|
||||||
|
.sparkle {
|
||||||
|
animation: twinkle 2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.sparkle-1 { animation-delay: 0s; }
|
||||||
|
.sparkle-2 { animation-delay: 0.5s; }
|
||||||
|
.sparkle-3 { animation-delay: 1s; }
|
||||||
|
.sparkle-4 { animation-delay: 1.5s; }
|
||||||
|
|
||||||
|
/* Particles orbit */
|
||||||
|
.particle {
|
||||||
|
animation: orbit 8s linear infinite;
|
||||||
|
transform-origin: 128px 128px;
|
||||||
|
}
|
||||||
|
.particle-1 { animation-delay: 0s; }
|
||||||
|
.particle-2 { animation-delay: 2s; }
|
||||||
|
.particle-3 { animation-delay: 4s; }
|
||||||
|
.particle-4 { animation-delay: 6s; }
|
||||||
|
|
||||||
|
/* Center circle pulse */
|
||||||
|
.center-circle {
|
||||||
|
animation: center-pulse 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Pages subtle movement */
|
||||||
|
.page {
|
||||||
|
transform-origin: center;
|
||||||
|
animation: page-float 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.page-1 { animation-delay: 0s; }
|
||||||
|
.page-2 { animation-delay: 0.3s; }
|
||||||
|
.page-3 { animation-delay: 0.6s; }
|
||||||
|
|
||||||
|
/* Text lines appear */
|
||||||
|
.text-line {
|
||||||
|
stroke-dasharray: 30;
|
||||||
|
stroke-dashoffset: 30;
|
||||||
|
animation: line-appear 2s ease-out forwards;
|
||||||
|
}
|
||||||
|
.line-1 { animation-delay: 0.2s; }
|
||||||
|
.line-2 { animation-delay: 0.4s; }
|
||||||
|
.line-3 { animation-delay: 0.6s; }
|
||||||
|
.line-4 { animation-delay: 0.8s; }
|
||||||
|
.line-5 { animation-delay: 1s; }
|
||||||
|
|
||||||
|
/* Hover effects */
|
||||||
|
.pivoine-docs-icon-wrapper.is-interactive:hover {
|
||||||
|
transform: scale(1.08) translateY(-8px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pivoine-docs-icon-wrapper.is-interactive:hover .pivoine-docs-icon {
|
||||||
|
filter: drop-shadow(0 20px 60px rgba(168, 85, 247, 0.6));
|
||||||
|
}
|
||||||
|
|
||||||
|
.pivoine-docs-icon-wrapper.is-interactive:hover .outer-petal {
|
||||||
|
animation: petal-bloom 1.2s ease-out forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pivoine-docs-icon-wrapper.is-interactive:hover .middle-petal {
|
||||||
|
animation: petal-bloom 1.2s ease-out 0.1s forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pivoine-docs-icon-wrapper.is-interactive:hover .inner-petal {
|
||||||
|
animation: petal-bloom 1.2s ease-out 0.2s forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pivoine-docs-icon-wrapper.is-interactive:hover .center-circle {
|
||||||
|
animation: center-glow 1s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pivoine-docs-icon-wrapper.is-interactive:hover .sparkle {
|
||||||
|
animation: sparkle-burst 0.8s ease-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pivoine-docs-icon-wrapper.is-interactive:hover .page {
|
||||||
|
animation: page-fan 0.8s ease-out forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Click effects */
|
||||||
|
.pivoine-docs-icon-wrapper.is-clicked {
|
||||||
|
animation: icon-bounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pivoine-docs-icon-wrapper.is-clicked .pivoine-docs-icon {
|
||||||
|
animation: icon-spin 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||||
|
filter: drop-shadow(0 25px 80px rgba(168, 85, 247, 0.9));
|
||||||
|
}
|
||||||
|
|
||||||
|
.pivoine-docs-icon-wrapper.is-clicked .petal {
|
||||||
|
animation: petal-explode 0.8s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pivoine-docs-icon-wrapper.is-clicked .center-circle {
|
||||||
|
animation: center-burst 0.8s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ripple effect */
|
||||||
|
.ripple-effect {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: radial-gradient(circle, rgba(168, 85, 247, 0.6) 0%, rgba(168, 85, 247, 0) 70%);
|
||||||
|
transform: translate(-50%, -50%) scale(0);
|
||||||
|
animation: ripple-expand 1s ease-out;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Label */
|
||||||
|
.icon-label {
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-text {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 700;
|
||||||
|
background: linear-gradient(135deg, #a855f7, #ec4899);
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
animation: label-shimmer 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Keyframes */
|
||||||
|
@keyframes bg-pulse {
|
||||||
|
0%, 100% { opacity: 0.4; transform: scale(1); }
|
||||||
|
50% { opacity: 0.7; transform: scale(1.05); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes twinkle {
|
||||||
|
0%, 100% { opacity: 0.4; transform: scale(1); }
|
||||||
|
50% { opacity: 1; transform: scale(1.3); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes orbit {
|
||||||
|
from { transform: rotate(0deg) translateX(80px) rotate(0deg); }
|
||||||
|
to { transform: rotate(360deg) translateX(80px) rotate(-360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes center-pulse {
|
||||||
|
0%, 100% { opacity: 0.6; transform: scale(1); }
|
||||||
|
50% { opacity: 1; transform: scale(1.15); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes page-float {
|
||||||
|
0%, 100% { transform: translateY(0); }
|
||||||
|
50% { transform: translateY(-2px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes line-appear {
|
||||||
|
to { stroke-dashoffset: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes petal-bloom {
|
||||||
|
0% { opacity: 0.85; }
|
||||||
|
50% { opacity: 1; filter: url(#intense-glow); }
|
||||||
|
100% { opacity: 0.95; filter: url(#petal-glow); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes center-glow {
|
||||||
|
0%, 100% { opacity: 0.8; transform: scale(1); }
|
||||||
|
50% { opacity: 1; transform: scale(1.2); filter: url(#intense-glow); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sparkle-burst {
|
||||||
|
0%, 100% { opacity: 0.8; transform: scale(1); }
|
||||||
|
50% { opacity: 1; transform: scale(1.8); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes page-fan {
|
||||||
|
0% { transform: translateY(0) rotate(0deg); }
|
||||||
|
100% { transform: translateY(-3px) rotate(2deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes icon-bounce {
|
||||||
|
0% { transform: scale(1) translateY(0) rotateZ(0deg); }
|
||||||
|
30% { transform: scale(0.9) translateY(0) rotateZ(0deg); }
|
||||||
|
60% { transform: scale(1.15) translateY(-15px) rotateZ(180deg); }
|
||||||
|
80% { transform: scale(0.95) translateY(0) rotateZ(360deg); }
|
||||||
|
100% { transform: scale(1) translateY(0) rotateZ(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes icon-spin {
|
||||||
|
0% { transform: perspective(1000px) rotateY(0deg); }
|
||||||
|
50% { transform: perspective(1000px) rotateY(180deg); }
|
||||||
|
100% { transform: perspective(1000px) rotateY(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes petal-explode {
|
||||||
|
0% { transform: scale(1); opacity: 1; }
|
||||||
|
50% { transform: scale(1.3); opacity: 0.8; filter: url(#intense-glow); }
|
||||||
|
100% { transform: scale(1); opacity: 1; filter: url(#petal-glow); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes center-burst {
|
||||||
|
0% { transform: scale(1); opacity: 0.8; }
|
||||||
|
50% { transform: scale(1.8); opacity: 1; }
|
||||||
|
100% { transform: scale(1); opacity: 0.8; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes ripple-expand {
|
||||||
|
0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
|
||||||
|
100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes label-shimmer {
|
||||||
|
0%, 100% { filter: brightness(1); }
|
||||||
|
50% { filter: brightness(1.3); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.pivoine-docs-icon-wrapper.is-interactive:hover {
|
||||||
|
transform: scale(1.05) translateY(-4px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Reduced motion */
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.pivoine-docs-icon-wrapper,
|
||||||
|
.pivoine-docs-icon,
|
||||||
|
.petal,
|
||||||
|
.sparkle,
|
||||||
|
.particle,
|
||||||
|
.center-circle,
|
||||||
|
.page,
|
||||||
|
.text-line,
|
||||||
|
.ripple-effect,
|
||||||
|
.label-text {
|
||||||
|
animation: none !important;
|
||||||
|
transition: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pivoine-docs-icon-wrapper.is-interactive:hover {
|
||||||
|
transform: scale(1.03);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Touch devices */
|
||||||
|
@media (hover: none) and (pointer: coarse) {
|
||||||
|
.pivoine-docs-icon-wrapper.is-interactive:active {
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -1 +1,2 @@
|
|||||||
export { default as KomposeIcon } from './KomposeIcon'
|
export { default as KomposeIcon } from './KomposeIcon'
|
||||||
|
export { default as PivoineDocsIcon } from './PivoineDocsIcon'
|
||||||
|
|||||||
18
Projects/docs.pivoine.art/public/favicon.svg
Normal file
18
Projects/docs.pivoine.art/public/favicon.svg
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="fg" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#a855f7"/>
|
||||||
|
<stop offset="100%" style="stop-color:#ec4899"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<!-- Simplified flower for small sizes -->
|
||||||
|
<circle cx="16" cy="16" r="14" fill="#1e293b"/>
|
||||||
|
<ellipse cx="16" cy="16" rx="5" ry="10" fill="url(#fg)" opacity="0.9" transform="rotate(0 16 16)"/>
|
||||||
|
<ellipse cx="16" cy="16" rx="5" ry="10" fill="url(#fg)" opacity="0.9" transform="rotate(60 16 16)"/>
|
||||||
|
<ellipse cx="16" cy="16" rx="5" ry="10" fill="url(#fg)" opacity="0.9" transform="rotate(120 16 16)"/>
|
||||||
|
<ellipse cx="16" cy="16" rx="5" ry="10" fill="url(#fg)" opacity="0.9" transform="rotate(180 16 16)"/>
|
||||||
|
<ellipse cx="16" cy="16" rx="5" ry="10" fill="url(#fg)" opacity="0.9" transform="rotate(240 16 16)"/>
|
||||||
|
<ellipse cx="16" cy="16" rx="5" ry="10" fill="url(#fg)" opacity="0.9" transform="rotate(300 16 16)"/>
|
||||||
|
<rect x="12" y="12" width="8" height="8" rx="1" fill="#f3f4f6" opacity="0.9"/>
|
||||||
|
<circle cx="16" cy="16" r="3" fill="#fbbf24"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
67
Projects/docs.pivoine.art/public/icon.svg
Normal file
67
Projects/docs.pivoine.art/public/icon.svg
Normal file
@@ -0,0 +1,67 @@
|
|||||||
|
<svg viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="petal-gradient-1" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#a855f7;stop-opacity:1" />
|
||||||
|
<stop offset="100%" style="stop-color:#ec4899;stop-opacity:1" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="petal-gradient-2" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#9333ea;stop-opacity:1" />
|
||||||
|
<stop offset="100%" style="stop-color:#db2777;stop-opacity:1" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="petal-gradient-3" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#c026d3;stop-opacity:1" />
|
||||||
|
<stop offset="100%" style="stop-color:#f472b6;stop-opacity:1" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="center-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#fbbf24;stop-opacity:1" />
|
||||||
|
<stop offset="50%" style="stop-color:#f59e0b;stop-opacity:1" />
|
||||||
|
<stop offset="100%" style="stop-color:#d97706;stop-opacity:1" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="page-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#f3f4f6;stop-opacity:0.95" />
|
||||||
|
<stop offset="100%" style="stop-color:#e5e7eb;stop-opacity:0.95" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- Background -->
|
||||||
|
<circle cx="128" cy="128" r="120" fill="#1e293b" opacity="0.6" />
|
||||||
|
|
||||||
|
<!-- Outer petals -->
|
||||||
|
<ellipse cx="128" cy="128" rx="35" ry="65" fill="url(#petal-gradient-1)" transform="rotate(0 128 128)" opacity="0.85" />
|
||||||
|
<ellipse cx="128" cy="128" rx="35" ry="65" fill="url(#petal-gradient-2)" transform="rotate(45 128 128)" opacity="0.85" />
|
||||||
|
<ellipse cx="128" cy="128" rx="35" ry="65" fill="url(#petal-gradient-3)" transform="rotate(90 128 128)" opacity="0.85" />
|
||||||
|
<ellipse cx="128" cy="128" rx="35" ry="65" fill="url(#petal-gradient-1)" transform="rotate(135 128 128)" opacity="0.85" />
|
||||||
|
<ellipse cx="128" cy="128" rx="35" ry="65" fill="url(#petal-gradient-2)" transform="rotate(180 128 128)" opacity="0.85" />
|
||||||
|
<ellipse cx="128" cy="128" rx="35" ry="65" fill="url(#petal-gradient-3)" transform="rotate(225 128 128)" opacity="0.85" />
|
||||||
|
<ellipse cx="128" cy="128" rx="35" ry="65" fill="url(#petal-gradient-1)" transform="rotate(270 128 128)" opacity="0.85" />
|
||||||
|
<ellipse cx="128" cy="128" rx="35" ry="65" fill="url(#petal-gradient-2)" transform="rotate(315 128 128)" opacity="0.85" />
|
||||||
|
|
||||||
|
<!-- Middle petals -->
|
||||||
|
<ellipse cx="128" cy="128" rx="28" ry="50" fill="url(#petal-gradient-2)" transform="rotate(30 128 128)" opacity="0.9" />
|
||||||
|
<ellipse cx="128" cy="128" rx="28" ry="50" fill="url(#petal-gradient-3)" transform="rotate(90 128 128)" opacity="0.9" />
|
||||||
|
<ellipse cx="128" cy="128" rx="28" ry="50" fill="url(#petal-gradient-1)" transform="rotate(150 128 128)" opacity="0.9" />
|
||||||
|
<ellipse cx="128" cy="128" rx="28" ry="50" fill="url(#petal-gradient-2)" transform="rotate(210 128 128)" opacity="0.9" />
|
||||||
|
<ellipse cx="128" cy="128" rx="28" ry="50" fill="url(#petal-gradient-3)" transform="rotate(270 128 128)" opacity="0.9" />
|
||||||
|
<ellipse cx="128" cy="128" rx="28" ry="50" fill="url(#petal-gradient-1)" transform="rotate(330 128 128)" opacity="0.9" />
|
||||||
|
|
||||||
|
<!-- Inner petals -->
|
||||||
|
<ellipse cx="128" cy="128" rx="22" ry="38" fill="url(#petal-gradient-3)" transform="rotate(45 128 128)" opacity="0.95" />
|
||||||
|
<ellipse cx="128" cy="128" rx="22" ry="38" fill="url(#petal-gradient-1)" transform="rotate(135 128 128)" opacity="0.95" />
|
||||||
|
<ellipse cx="128" cy="128" rx="22" ry="38" fill="url(#petal-gradient-2)" transform="rotate(225 128 128)" opacity="0.95" />
|
||||||
|
<ellipse cx="128" cy="128" rx="22" ry="38" fill="url(#petal-gradient-3)" transform="rotate(315 128 128)" opacity="0.95" />
|
||||||
|
|
||||||
|
<!-- Document pages in center -->
|
||||||
|
<rect x="102" y="102" width="52" height="52" rx="4" fill="url(#page-gradient)" opacity="0.4" />
|
||||||
|
<rect x="104" y="104" width="48" height="48" rx="4" fill="url(#page-gradient)" opacity="0.6" />
|
||||||
|
<rect x="106" y="106" width="44" height="44" rx="4" fill="url(#page-gradient)" opacity="0.9" />
|
||||||
|
|
||||||
|
<!-- Text lines -->
|
||||||
|
<line x1="112" y1="115" x2="138" y2="115" stroke="#6366f1" stroke-width="2" stroke-linecap="round" opacity="0.6" />
|
||||||
|
<line x1="112" y1="122" x2="144" y2="122" stroke="#6366f1" stroke-width="2" stroke-linecap="round" opacity="0.6" />
|
||||||
|
<line x1="112" y1="129" x2="135" y2="129" stroke="#6366f1" stroke-width="2" stroke-linecap="round" opacity="0.6" />
|
||||||
|
<line x1="112" y1="136" x2="142" y2="136" stroke="#a855f7" stroke-width="2" stroke-linecap="round" opacity="0.6" />
|
||||||
|
<line x1="112" y1="143" x2="137" y2="143" stroke="#a855f7" stroke-width="2" stroke-linecap="round" opacity="0.6" />
|
||||||
|
|
||||||
|
<!-- Center circle -->
|
||||||
|
<circle cx="128" cy="128" r="18" fill="url(#center-gradient)" opacity="0.8" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.7 KiB |
45
Projects/docs.pivoine.art/public/manifest.json
Normal file
45
Projects/docs.pivoine.art/public/manifest.json
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
{
|
||||||
|
"name": "Pivoine Docs Hub",
|
||||||
|
"short_name": "Pivoine Docs",
|
||||||
|
"description": "Documentation hub for all Pivoine projects by Valknar",
|
||||||
|
"start_url": "/",
|
||||||
|
"display": "standalone",
|
||||||
|
"background_color": "#0f172a",
|
||||||
|
"theme_color": "#a855f7",
|
||||||
|
"orientation": "portrait-primary",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "/icon.svg",
|
||||||
|
"sizes": "any",
|
||||||
|
"type": "image/svg+xml",
|
||||||
|
"purpose": "any maskable"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "/icon-192.png",
|
||||||
|
"sizes": "192x192",
|
||||||
|
"type": "image/png",
|
||||||
|
"purpose": "any maskable"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "/icon-512.png",
|
||||||
|
"sizes": "512x512",
|
||||||
|
"type": "image/png",
|
||||||
|
"purpose": "any maskable"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"categories": ["documentation", "developer", "tools"],
|
||||||
|
"screenshots": [
|
||||||
|
{
|
||||||
|
"src": "/screenshot-wide.png",
|
||||||
|
"sizes": "1280x720",
|
||||||
|
"type": "image/png",
|
||||||
|
"form_factor": "wide"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "/screenshot-narrow.png",
|
||||||
|
"sizes": "750x1334",
|
||||||
|
"type": "image/png",
|
||||||
|
"form_factor": "narrow"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
45
Projects/docs.pivoine.art/scripts/generate-icons.sh
Normal file
45
Projects/docs.pivoine.art/scripts/generate-icons.sh
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
#!/bin/bash
|
||||||
|
|
||||||
|
# Script to generate PNG icons from SVG
|
||||||
|
# Requires: librsvg (for rsvg-convert)
|
||||||
|
# Install on macOS: brew install librsvg
|
||||||
|
# Install on Ubuntu: sudo apt-get install librsvg2-bin
|
||||||
|
|
||||||
|
set -e
|
||||||
|
|
||||||
|
echo "🎨 Generating PNG icons from SVG..."
|
||||||
|
|
||||||
|
# Check if rsvg-convert is installed
|
||||||
|
if ! command -v rsvg-convert &> /dev/null; then
|
||||||
|
echo "❌ Error: rsvg-convert not found"
|
||||||
|
echo "Please install librsvg:"
|
||||||
|
echo " macOS: brew install librsvg"
|
||||||
|
echo " Ubuntu: sudo apt-get install librsvg2-bin"
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
|
||||||
|
cd "$(dirname "$0")/../public"
|
||||||
|
|
||||||
|
# Generate various sizes from icon.svg
|
||||||
|
echo "📱 Generating PWA icons..."
|
||||||
|
rsvg-convert -w 192 -h 192 icon.svg -o icon-192.png
|
||||||
|
rsvg-convert -w 512 -h 512 icon.svg -o icon-512.png
|
||||||
|
|
||||||
|
echo "🍎 Generating Apple touch icon..."
|
||||||
|
rsvg-convert -w 180 -h 180 icon.svg -o apple-touch-icon.png
|
||||||
|
|
||||||
|
echo "🌐 Generating standard favicons..."
|
||||||
|
rsvg-convert -w 32 -h 32 favicon.svg -o favicon-32x32.png
|
||||||
|
rsvg-convert -w 16 -h 16 favicon.svg -o favicon-16x16.png
|
||||||
|
|
||||||
|
echo "✅ All icons generated successfully!"
|
||||||
|
echo ""
|
||||||
|
echo "Generated files:"
|
||||||
|
echo " - icon-192.png (192x192) - PWA icon"
|
||||||
|
echo " - icon-512.png (512x512) - PWA icon"
|
||||||
|
echo " - apple-touch-icon.png (180x180) - Apple touch icon"
|
||||||
|
echo " - favicon-32x32.png (32x32) - Standard favicon"
|
||||||
|
echo " - favicon-16x16.png (16x16) - Standard favicon"
|
||||||
|
echo ""
|
||||||
|
echo "Note: SVG versions (icon.svg, favicon.svg) are already in place"
|
||||||
|
echo "and will be used by modern browsers automatically."
|
||||||
Reference in New Issue
Block a user