diff --git a/PLAN.md b/PLAN.md new file mode 100644 index 0000000..f32487c --- /dev/null +++ b/PLAN.md @@ -0,0 +1,376 @@ +# STRUCT Static Site Improvement Plan + +## 📊 Current State Analysis + +### ✅ What's Working Well + +- Clean, dark theme that fits developer tools aesthetic +- Basic responsive design with mobile viewport meta tag +- Google Analytics integration (GTM) +- Font Awesome icons for visual appeal +- Simple, focused messaging +- PayPal donation integration + +### ❌ Areas for Improvement + +- **Limited Visual Appeal**: No hero section, animations, or modern design elements +- **Missing Key Content**: No installation guide, examples, or getting started section +- **No Interactive Elements**: Static content with no engagement features +- **Basic Typography**: Plain Arial font, limited visual hierarchy +- **Missing Social Proof**: No GitHub stats, testimonials, or showcase +- **No Demo Integration**: VHS tapes we created aren't showcased +- **Limited SEO**: Basic meta tags, no Open Graph or structured data +- **Basic Navigation**: Single page with no clear content organization + +## 🎯 Improvement Plan + +### Phase 1: Foundation & Content Enhancement + +#### 1.1 Modern Design System + +```css +- Implement CSS custom properties for consistent theming +- Add modern typography (Inter, Fira Code for code snippets) +- Create a proper color palette with semantic naming +- Implement dark/light theme toggle +- Add smooth animations and transitions +``` + +#### 1.2 Enhanced Hero Section + +```html +- Add animated background or subtle particles +- Include prominent call-to-action buttons +- Add GitHub star count and download stats +- Feature a rotating showcase of key benefits +- Include the main VHS demo (basic-usage.gif) +``` + +#### 1.3 Navigation & Structure + +```html +- Add sticky navigation header +- Implement smooth scroll navigation +- Create distinct sections: Hero, Features, Demo, Installation, Examples +- Add breadcrumb navigation +- Include footer with links and social media +``` + +### Phase 2: Content & Functionality + +#### 2.1 Interactive Installation Guide + +```html +- Step-by-step installation wizard +- Copy-to-clipboard functionality for commands +- Multiple installation methods (pip, Docker, binary) +- Platform-specific instructions (Windows, macOS, Linux) +- Installation verification steps +``` + +#### 2.2 Live Demo Integration + +```html +- Embed VHS GIFs in an interactive carousel +- Add demo selector (Basic Usage, YAML Config, Mappings, etc.) +- Include before/after code examples +- Add interactive playground (optional) +``` + +#### 2.3 Enhanced Features Section + +```html +- Feature cards with icons and descriptions +- Expandable details for each feature +- Code examples for key features +- Comparison with alternatives +- Use case scenarios +``` + +### Phase 3: Advanced Features + +#### 3.1 Documentation Integration + +```html +- Quick reference guide +- API documentation preview +- Link to full documentation +- Search functionality +- Getting started wizard +``` + +#### 3.2 Community & Social Proof + +```html +- GitHub repository stats (stars, forks, contributors) +- User testimonials or quotes +- Showcase of projects built with STRUCT +- Community links (Discord, Discussions) +- Contributing guidelines +``` + +#### 3.3 Performance & SEO + +```html +- Add comprehensive meta tags +- Implement Open Graph and Twitter Cards +- Add structured data (JSON-LD) +- Optimize images and assets +- Add sitemap and robots.txt +- Implement service worker for offline support +``` + +## 🛠 Technical Implementation + +### Required Files Structure + +``` +site/ +├── index.html +├── css/ +│ ├── main.css +│ ├── components.css +│ └── animations.css +├── js/ +│ ├── main.js +│ ├── github-stats.js +│ └── demo-carousel.js +├── images/ +│ ├── logo.svg +│ ├── hero-bg.svg +│ └── feature-icons/ +├── demos/ +│ └── [VHS GIFs copied from docs/vhs/] +└── assets/ + ├── fonts/ + └── icons/ +``` + +### Key Components to Build + +#### 1. Modern CSS Architecture + +```css +/* CSS Custom Properties */ +:root { + --color-primary: #00d4ff; + --color-secondary: #ff6b6b; + --color-accent: #4ecdc4; + --color-bg-primary: #0a0a0a; + --color-bg-secondary: #1a1a1a; + --color-text-primary: #ffffff; + --color-text-secondary: #b0b0b0; + --font-sans: 'Inter', -apple-system, sans-serif; + --font-mono: 'Fira Code', monospace; +} +``` + +#### 2. Interactive Components + +```javascript +// GitHub Stats Integration +async function fetchGitHubStats() { + const response = await fetch('https://api.github.com/repos/httpdss/struct'); + const data = await response.json(); + return { + stars: data.stargazers_count, + forks: data.forks_count, + openIssues: data.open_issues_count + }; +} + +// Demo Carousel +class DemoCarousel { + constructor(element) { + this.element = element; + this.demos = [ + { name: 'Basic Usage', gif: 'basic-usage.gif' }, + { name: 'YAML Config', gif: 'yaml-config.gif' }, + // ... other demos + ]; + this.init(); + } +} +``` + +#### 3. Content Sections + +##### Hero Section + +```html +
+
+

STRUCT

+

Automated Project Structure Generator

+
+
+ + GitHub Stars +
+
+ +
+
+ STRUCT Demo +
+
+``` + +##### Features Grid + +```html +
+
+

Why Choose STRUCT?

+
+
+
+ +
+

YAML Configuration

+

Define your project structure in simple, readable YAML files

+
+ +
+
+
+``` + +##### Interactive Installation + +```html +
+
+

Quick Installation

+
+ + + +
+
+
+
pip install git+https://github.com/httpdss/struct.git
+ +
+
+
+
+``` + +## 📈 Success Metrics + +### User Experience + +- [ ] Reduced bounce rate (< 40%) +- [ ] Increased time on page (> 2 minutes) +- [ ] Higher conversion to GitHub repository +- [ ] Improved mobile experience (90+ Lighthouse score) + +### Performance + +- [ ] Page load time < 2 seconds +- [ ] Lighthouse Performance score > 90 +- [ ] Accessibility score > 95 +- [ ] SEO score > 90 + +### Engagement + +- [ ] Increased GitHub stars +- [ ] More documentation page visits +- [ ] Higher demo video engagement +- [ ] Improved user feedback + +## 🚀 Implementation Priority + +### High Priority (Week 1) + +1. Modern CSS architecture and design system +2. Enhanced hero section with demo integration +3. Interactive installation guide +4. Mobile responsiveness improvements + +### Medium Priority (Week 2) + +1. Features showcase with examples +2. Demo carousel with all VHS tapes +3. GitHub stats integration +4. SEO enhancements + +### Low Priority (Week 3) + +1. Advanced animations and micro-interactions +2. Community showcase +3. Performance optimizations +4. Analytics and tracking improvements + +## 🎨 Design Inspiration + +### Color Palette + +```css +--primary: #00ff88; /* Bright green for CTAs */ +--secondary: #0066ff; /* Blue for links */ +--accent: #ff6600; /* Orange for highlights */ +--bg-dark: #0a0a0a; /* Deep black background */ +--bg-card: #1a1a1a; /* Card backgrounds */ +--text-primary: #ffffff; /* Primary text */ +--text-secondary: #888; /* Secondary text */ +``` + +### Typography Scale + +```css +--text-xs: 0.75rem; /* 12px */ +--text-sm: 0.875rem; /* 14px */ +--text-base: 1rem; /* 16px */ +--text-lg: 1.125rem; /* 18px */ +--text-xl: 1.25rem; /* 20px */ +--text-2xl: 1.5rem; /* 24px */ +--text-3xl: 1.875rem; /* 30px */ +--text-4xl: 2.25rem; /* 36px */ +``` + +## 📝 Content Strategy + +### Key Messages + +1. **"Automate Your Project Setup"** - Save time and ensure consistency +2. **"YAML-Powered Simplicity"** - Easy to learn and use +3. **"Enterprise-Ready"** - Reliable for teams and production use +4. **"Extensible & Flexible"** - Adaptable to any project type + +### Call-to-Actions + +1. Primary: "Get Started" → Installation guide +2. Secondary: "View Demo" → Demo carousel +3. Tertiary: "Star on GitHub" → GitHub repository + +## 🔧 Development Tools Needed + +### Dependencies + +```json +{ + "clipboard": "^2.0.8", + "highlight.js": "^11.7.0", + "intersection-observer": "^0.12.2", + "smoothscroll-polyfill": "^0.4.4" +} +``` + +### Build Process + +1. HTML minification +2. CSS optimization and purging +3. JavaScript bundling +4. Image optimization +5. Asset compression + +This plan provides a comprehensive roadmap for transforming the STRUCT static site into a modern, engaging, and effective landing page that showcases the tool's capabilities and drives user adoption. diff --git a/docs/usage.md b/docs/usage.md index 176b1aa..4473596 100644 --- a/docs/usage.md +++ b/docs/usage.md @@ -10,7 +10,7 @@ Run the script with the following command using one of the following subcommands For more information, run the script with the `-h` or `--help` option (this is also available for each subcommand): -![Struct List](./vhs/usage.gif) +![Struct List](./vhs/basic-usage.gif) ```sh struct -h diff --git a/docs/vhs/advanced-features.gif b/docs/vhs/advanced-features.gif new file mode 100644 index 0000000..a4e6efe Binary files /dev/null and b/docs/vhs/advanced-features.gif differ diff --git a/docs/vhs/advanced-features.tape b/docs/vhs/advanced-features.tape index 9d5bcdd..501c723 100644 --- a/docs/vhs/advanced-features.tape +++ b/docs/vhs/advanced-features.tape @@ -3,36 +3,58 @@ Output docs/vhs/advanced-features.gif Set Theme "Monokai Vivid" Set FontSize 14 Set TypingSpeed 40ms -Set WindowBar Colorful -Set BorderRadius 8 -Set Margin 0 -Set Padding 10 Set Width 1400 Set Height 800 Set Shell "bash" -Type "# Create a test structure" Enter -Type "mkdir -p existing-project && echo 'old content' > existing-project/README.md" Enter -Sleep 1 -Type "" Enter -Type "# Use dry-run to preview changes" Enter -Type "struct generate --dry-run terraform/module ./existing-project" Enter -Sleep 5 -Type "" Enter -Type "# Validate a YAML configuration" Enter -Type "cat > test-config.yaml << 'EOF'" Enter -Type "files:" Enter -Type " - test.txt:" Enter -Type " content: 'Hello World'" Enter -Type "EOF" Enter -Sleep 2 -Type "struct validate test-config.yaml" Enter -Sleep 3 -Type "" Enter -Type "# Generate with backup strategy" Enter -Type "struct generate --file-strategy=backup --backup=./backups terraform/module ./existing-project" Enter -Sleep 5 -Type "" Enter -Type "# Check backup was created" Enter -Type "ls -la backups/ && echo && echo 'New content:' && head existing-project/README.md" Enter -Sleep 3 +Type "# STRUCT Advanced Features Demo" +Enter +Sleep 1s + +Type "# Generate schema for VSCode autocompletion" +Enter +Type "mkdir -p .vscode" +Enter +Type "struct generate-schema --output .vscode/struct-schema.json" +Enter +Sleep 2s + +Type "# Show the generated schema" +Enter +Type "cat .vscode/struct-schema.json" +Enter +Sleep 3s + +Type "# Create config with remote content" +Enter +Type "cat > remote-demo.yaml << EOF" +Enter +Type "files:" +Enter +Type " - LICENSE:" +Enter +Type " file: https://raw.githubusercontent.com/licenses/license-templates/master/templates/mit.txt" +Enter +Type " - .gitignore:" +Enter +Type " file: https://raw.githubusercontent.com/github/gitignore/refs/heads/main/Python.gitignore" +Enter +Type "EOF" +Enter +Sleep 2s + +Type "# Generate with remote content" +Enter +Type "struct generate remote-demo.yaml ./remote-project" +Enter +Sleep 3s + +Type "# Check what was downloaded" +Enter +Type "ls -la remote-project/" +Enter +Sleep 2s + +Type "# Advanced features make STRUCT incredibly powerful!" +Enter +Sleep 2s \ No newline at end of file diff --git a/docs/vhs/basic-usage.gif b/docs/vhs/basic-usage.gif new file mode 100644 index 0000000..41ad376 Binary files /dev/null and b/docs/vhs/basic-usage.gif differ diff --git a/docs/vhs/basic-usage.tape b/docs/vhs/basic-usage.tape index 39a4e34..32ffb13 100644 --- a/docs/vhs/basic-usage.tape +++ b/docs/vhs/basic-usage.tape @@ -1,28 +1,47 @@ -Output docs/vhs/basic-usage.gif +Output docs/vhs/usage.gif -Set Theme "Monokai Vivid" +Set Theme "Dracula" Set FontSize 14 -Set TypingSpeed 40ms -Set WindowBar Colorful -Set BorderRadius 8 -Set Margin 0 -Set Padding 10 -Set Width 1400 -Set Height 800 +Set Width 1200 +Set Height 600 Set Shell "bash" -Type "# Explore available structures" Enter -Type "struct list" Enter -Sleep 3 -Type "" Enter -Type "# Get information about a specific structure" Enter -Type "struct info terraform/module" Enter -Sleep 5 -Type "" Enter -Type "# Generate a simple project structure" Enter -Type "struct generate terraform/module ./my-terraform-module" Enter -Sleep 8 -Type "" Enter -Type "# Verify the generated structure" Enter -Type "tree my-terraform-module" Enter -Sleep 5 +Type "# STRUCT - Basic Usage Demo" +Enter +Sleep 1s + +Type "# First, let's see what structures are available" +Enter +Sleep 500ms + +Type "struct list" +Enter +Sleep 2s + +Type "# Let's generate a simple Python project" +Enter +Sleep 500ms + +Type "struct generate project/python ./my-python-app" +Enter +Sleep 3s + +Type "# Check what was created" +Enter +Sleep 500ms + +Type "ls -la my-python-app/" +Enter +Sleep 2s + +Type "# View the project structure" +Enter +Sleep 500ms + +Type "tree my-python-app/ || find my-python-app/ -type f" +Enter +Sleep 2s + +Type "# That's it! STRUCT made it easy to bootstrap a project" +Enter +Sleep 1s diff --git a/docs/vhs/install.gif b/docs/vhs/install.gif new file mode 100644 index 0000000..45a7d5e Binary files /dev/null and b/docs/vhs/install.gif differ diff --git a/docs/vhs/install.tape b/docs/vhs/install.tape index d874091..a8e1f04 100644 --- a/docs/vhs/install.tape +++ b/docs/vhs/install.tape @@ -4,22 +4,42 @@ Output docs/vhs/install.gif Set Theme "Monokai Vivid" Set FontSize 14 Set TypingSpeed 40ms -Set WindowBar Colorful -Set BorderRadius 8 -Set Margin 0 -Set Padding 10 Set Width 1400 Set Height 800 Set Shell "bash" -Type "# Create python virtual environment and install struct" Enter -Type "python3 -m venv .venv" Enter -Sleep 5 -Type "source .venv/bin/activate" Enter -Sleep 5 -Type "pip install git+https://github.com/httpdss/struct.git" Enter -# Wait+Screen /Successfully/ -Sleep 20 -Type "# STRUCT is now installed and ready to use" Enter -Type "struct list" Enter -Sleep 10 +Type "# STRUCT Installation Demo" +Enter +Sleep 1s + +Type "# Create python virtual environment and install struct" +Enter +Type "python3 -m venv .venv" +Enter +Sleep 2s + +Type "source .venv/bin/activate" +Enter +Sleep 1s + +Type "# Install STRUCT from GitHub" +Enter +Type "pip install git+https://github.com/httpdss/struct.git" +Enter +Sleep 5s + +Type "# Verify installation" +Enter +Type "struct --help" +Enter +Sleep 2s + +Type "# Check available structures" +Enter +Type "struct list" +Enter +Sleep 3s + +Type "# STRUCT is now installed and ready to use!" +Enter +Sleep 2s diff --git a/docs/vhs/mappings-demo.gif b/docs/vhs/mappings-demo.gif new file mode 100644 index 0000000..38d537f Binary files /dev/null and b/docs/vhs/mappings-demo.gif differ diff --git a/docs/vhs/mappings-demo.tape b/docs/vhs/mappings-demo.tape index f789aee..65707d9 100644 --- a/docs/vhs/mappings-demo.tape +++ b/docs/vhs/mappings-demo.tape @@ -3,52 +3,70 @@ Output docs/vhs/mappings-demo.gif Set Theme "Monokai Vivid" Set FontSize 14 Set TypingSpeed 40ms -Set WindowBar Colorful -Set BorderRadius 8 -Set Margin 0 -Set Padding 10 Set Width 1400 Set Height 800 Set Shell "bash" -Type "# Create mappings file for environment variables" Enter -Type "cat > mappings.yaml << 'EOF'" Enter -Type "mappings:" Enter -Type " environments:" Enter -Type " dev:" Enter -Type " database_url: 'postgres://localhost:5432/myapp_dev'" Enter -Type " debug: true" Enter -Type " prod:" Enter -Type " database_url: 'postgres://prod-server:5432/myapp'" Enter -Type " debug: false" Enter -Type " teams:" Enter -Type " devops: 'devops-team@company.com'" Enter -Type " frontend: 'frontend-team@company.com'" Enter -Type "EOF" Enter -Sleep 2 -Type "" Enter -Type "# Create structure that uses mappings" Enter -Type "cat > app-config.yaml << 'EOF'" Enter -Type "files:" Enter -Type " - config/{{@ env @}}.json:" Enter -Type " content: |" Enter -Type " {" Enter -Type " \"database_url\": \"{{@ mappings.environments[env].database_url @}}\"," Enter -Type " \"debug\": {{@ mappings.environments[env].debug @}}," Enter -Type " \"contact\": \"{{@ mappings.teams.devops @}}\"" Enter -Type " }" Enter -Type "variables:" Enter -Type " - env:" Enter -Type " description: 'Environment (dev/prod)'" Enter -Type " type: string" Enter -Type " default: 'dev'" Enter -Type "EOF" Enter -Sleep 3 -Type "" Enter -Type "# Generate with mappings file" Enter -Type "struct generate --mappings-file mappings.yaml app-config.yaml ./config-output" Enter -Sleep 5 -Type "" Enter -Type "# Check generated configuration" Enter -Type "cat config-output/config/dev.json" Enter -Sleep 3 +Type "# STRUCT Mappings Demo" +Enter +Sleep 1s + +Type "# Create a simple mapping file with team data" +Enter +Type "cat > team-mapping.yaml << EOF" +Enter +Type "mappings:" +Enter +Type " team_info:" +Enter +Type " backend:" +Enter +Type ' lead: "Alice Johnson"' +Enter +Type ' tech_stack: ["Python", "FastAPI", "PostgreSQL"]' +Enter +Type ' repo: "https://github.com/company/backend"' +Enter +Type "EOF" +Enter +Sleep 2s + +Type "# Create structure using mapping data" +Enter +Type "cat > project-with-mapping.yaml << EOF" +Enter +Type "mappings:" +Enter +Type " - team-mapping.yaml" +Enter +Type "files:" +Enter +Type " - README.md:" +Enter +Type " content: |" +Enter +Type " # Backend Team Project" +Enter +Type " Team Lead: Alice Johnson" +Enter +Type " Tech Stack: Python, FastAPI, PostgreSQL" +Enter +Type "EOF" +Enter +Sleep 2s + +Type "# Generate project for backend team" +Enter +Type "struct generate project-with-mapping.yaml ./backend-project" +Enter +Sleep 3s + +Type "# Check the generated README" +Enter +Type "cat backend-project/README.md" +Enter +Sleep 2s + +Type "# Mappings enable data-driven project generation!" +Enter +Sleep 2s diff --git a/docs/vhs/multiple-mappings.gif b/docs/vhs/multiple-mappings.gif new file mode 100644 index 0000000..b8361a7 Binary files /dev/null and b/docs/vhs/multiple-mappings.gif differ diff --git a/docs/vhs/multiple-mappings.tape b/docs/vhs/multiple-mappings.tape index 95fd4e0..341ba60 100644 --- a/docs/vhs/multiple-mappings.tape +++ b/docs/vhs/multiple-mappings.tape @@ -3,63 +3,102 @@ Output docs/vhs/multiple-mappings.gif Set Theme "Monokai Vivid" Set FontSize 14 Set TypingSpeed 40ms -Set WindowBar Colorful -Set BorderRadius 8 -Set Margin 0 -Set Padding 10 Set Width 1400 Set Height 800 Set Shell "bash" -Type "# Create base mappings file" Enter -Type "cat > base-mappings.yaml << 'EOF'" Enter -Type "mappings:" Enter -Type " common:" Enter -Type " app_name: 'MyApp'" Enter -Type " version: '1.0.0'" Enter -Type " environments:" Enter -Type " dev:" Enter -Type " replicas: 1" Enter -Type "EOF" Enter -Sleep 2 -Type "" Enter -Type "# Create environment-specific overrides" Enter -Type "cat > prod-mappings.yaml << 'EOF'" Enter -Type "mappings:" Enter -Type " environments:" Enter -Type " dev:" Enter -Type " debug: true" Enter -Type " prod:" Enter -Type " replicas: 3" Enter -Type " debug: false" Enter -Type "EOF" Enter -Sleep 2 -Type "" Enter -Type "# Create deployment template" Enter -Type "cat > deployment.yaml << 'EOF'" Enter -Type "files:" Enter -Type " - k8s/deployment.yaml:" Enter -Type " content: |" Enter -Type " apiVersion: apps/v1" Enter -Type " kind: Deployment" Enter -Type " metadata:" Enter -Type " name: {{@ mappings.common.app_name @}}" Enter -Type " spec:" Enter -Type " replicas: {{@ mappings.environments[env].replicas @}}" Enter -Type "variables:" Enter -Type " - env:" Enter -Type " description: 'Target environment'" Enter -Type " default: 'dev'" Enter -Type "EOF" Enter -Sleep 3 -Type "" Enter -Type "# Generate with multiple mappings files (deep merge)" Enter -Type "struct generate \\" Enter -Type " --mappings-file base-mappings.yaml \\" Enter -Type " --mappings-file prod-mappings.yaml \\" Enter -Type " deployment.yaml ./k8s-output" Enter -Sleep 5 -Type "" Enter -Type "# Check the merged result" Enter -Type "cat k8s-output/k8s/deployment.yaml" Enter -Sleep 3 +Type "# STRUCT Multiple Mappings Demo" +Enter +Sleep 1s + +Type "# Create company info mapping" +Enter +Type "cat > company-info.yaml << EOF" +Enter +Type "mappings:" +Enter +Type " company:" +Enter +Type ' name: "TechCorp Inc"' +Enter +Type ' website: "https://techcorp.com"' +Enter +Type ' license: "MIT"' +Enter +Type "EOF" +Enter +Sleep 1s + +Type "# Create environment mapping" +Enter +Type "cat > environments.yaml << EOF" +Enter +Type "mappings:" +Enter +Type " environments:" +Enter +Type " development:" +Enter +Type ' domain: "dev.techcorp.com"' +Enter +Type ' database: "postgres://dev-db:5432/app"' +Enter +Type " production:" +Enter +Type ' domain: "techcorp.com"' +Enter +Type ' database: "postgres://prod-db:5432/app"' +Enter +Type "EOF" +Enter +Sleep 1s + +Type "# Create project using multiple mappings" +Enter +Type "cat > multi-mapping-project.yaml << EOF" +Enter +Type "mappings:" +Enter +Type " - company-info.yaml" +Enter +Type " - environments.yaml" +Enter +Type "files:" +Enter +Type " - config/app.yaml:" +Enter +Type " content: |" +Enter +Type " app:" +Enter +Type " name: MyApp" +Enter +Type " company: TechCorp Inc" +Enter +Type " website: https://techcorp.com" +Enter +Type " environment:" +Enter +Type " domain: dev.techcorp.com" +Enter +Type " database: postgres://dev-db:5432/app" +Enter +Type "EOF" +Enter +Sleep 2s + +Type "# Generate for development environment" +Enter +Type "struct generate multi-mapping-project.yaml ./dev-app" +Enter +Sleep 3s + +Type "# View the generated config" +Enter +Type "cat dev-app/config/app.yaml" +Enter +Sleep 2s + +Type "# Multiple mappings provide powerful data composition!" +Enter +Sleep 2s diff --git a/docs/vhs/remote-content.gif b/docs/vhs/remote-content.gif new file mode 100644 index 0000000..a6a3ef2 Binary files /dev/null and b/docs/vhs/remote-content.gif differ diff --git a/docs/vhs/remote-content.tape b/docs/vhs/remote-content.tape index 96cda7c..31d01a7 100644 --- a/docs/vhs/remote-content.tape +++ b/docs/vhs/remote-content.tape @@ -3,38 +3,64 @@ Output docs/vhs/remote-content.gif Set Theme "Monokai Vivid" Set FontSize 14 Set TypingSpeed 40ms -Set WindowBar Colorful -Set BorderRadius 8 -Set Margin 0 -Set Padding 10 Set Width 1400 Set Height 800 Set Shell "bash" -Type "# Create structure using remote content" Enter -Type "cat > remote-demo.yaml << 'EOF'" Enter -Type "files:" Enter -Type " - .gitignore:" Enter -Type " file: github://github/gitignore/main/Python.gitignore" Enter -Type " - LICENSE:" Enter -Type " file: https://raw.githubusercontent.com/licenses/license-templates/master/templates/mit.txt" Enter -Type " - README.md:" Enter -Type " content: |" Enter -Type " # {{@ project_name @}}" Enter -Type " " Enter -Type " This project uses remote content from GitHub." Enter -Type "variables:" Enter -Type " - project_name:" Enter -Type " description: 'Project name'" Enter -Type " default: 'RemoteDemo'" Enter -Type "EOF" Enter -Sleep 3 -Type "" Enter -Type "# Generate project with remote content" Enter -Type "struct generate remote-demo.yaml ./remote-project" Enter -Sleep 8 -Type "" Enter -Type "# Check downloaded content" Enter -Type "echo 'Generated files:' && ls -la remote-project/" Enter -Type "echo && echo 'First few lines of .gitignore:' && head -10 remote-project/.gitignore" Enter -Sleep 5 +Type "# STRUCT Remote Content Demo" +Enter +Sleep 1s + +Type "# Create configuration with remote files" +Enter +Type "cat > remote-example.yaml << EOF" +Enter +Type "files:" +Enter +Type " - .gitignore:" +Enter +Type " file: https://raw.githubusercontent.com/github/gitignore/refs/heads/main/Python.gitignore" +Enter +Type " - LICENSE:" +Enter +Type " file: https://raw.githubusercontent.com/licenses/license-templates/master/templates/mit.txt" +Enter +Type " - README.md:" +Enter +Type " content: |" +Enter +Type " # Remote Content Demo" +Enter +Type " This project uses remote content from various sources." +Enter +Type "EOF" +Enter +Sleep 2s + +Type "# Generate project with remote content" +Enter +Type "struct generate remote-example.yaml ./remote-demo" +Enter +Sleep 4s + +Type "# Check downloaded files" +Enter +Type "ls -la remote-demo/" +Enter +Sleep 2s + +Type "# View the .gitignore from GitHub" +Enter +Type "head -10 remote-demo/.gitignore" +Enter +Sleep 2s + +Type "# View the LICENSE file" +Enter +Type "head -5 remote-demo/LICENSE" +Enter +Sleep 2s + +Type "# Remote content makes reusing existing resources easy!" +Enter +Sleep 2s diff --git a/docs/vhs/schema-generation.gif b/docs/vhs/schema-generation.gif new file mode 100644 index 0000000..1210687 Binary files /dev/null and b/docs/vhs/schema-generation.gif differ diff --git a/docs/vhs/schema-generation.tape b/docs/vhs/schema-generation.tape index fc5ff93..f762a91 100644 --- a/docs/vhs/schema-generation.tape +++ b/docs/vhs/schema-generation.tape @@ -3,28 +3,58 @@ Output docs/vhs/schema-generation.gif Set Theme "Monokai Vivid" Set FontSize 14 Set TypingSpeed 40ms -Set WindowBar Colorful -Set BorderRadius 8 -Set Margin 0 -Set Padding 10 Set Width 1400 Set Height 800 Set Shell "bash" -Type "# Generate JSON schema for available structures" Enter -Type "struct generate-schema" Enter -Sleep 5 -Type "" Enter -Type "# Save schema to file for IDE integration" Enter -Type "struct generate-schema -o struct-schema.json" Enter -Sleep 3 -Type "" Enter -Type "# Check the generated schema" Enter -Type "echo 'Schema file created:' && ls -la struct-schema.json" Enter -Type "echo && echo 'Available structures in schema:' && jq -r '.definitions.PluginList.enum[]' struct-schema.json | head -10" Enter -Sleep 5 -Type "" Enter -Type "# Schema can be used in VS Code for autocompletion" Enter -Type "echo 'Add to your .struct.yaml files for IDE support:'" Enter -Type "echo '# yaml-language-server: \$schema=./struct-schema.json'" Enter -Sleep 3 +Type "# STRUCT Schema Generation Demo" +Enter +Sleep 1s + +Type "# Generate JSON schema for VSCode autocompletion" +Enter +Type "struct generate-schema" +Enter +Sleep 3s + +Type "# Save schema to a file for VSCode" +Enter +Type "mkdir -p .vscode" +Enter +Type "struct generate-schema --output .vscode/struct-plugins.schema.json" +Enter +Sleep 2s + +Type "# View the generated schema" +Enter +Type "cat .vscode/struct-plugins.schema.json" +Enter +Sleep 3s + +Type "# Create VSCode settings to use the schema" +Enter +Type "cat > .vscode/settings.json << EOF" +Enter +Type "{" +Enter +Type ' "yaml.schemas": {' +Enter +Type ' "./.vscode/struct-plugins.schema.json": "*.struct.yaml"' +Enter +Type " }" +Enter +Type "}" +Enter +Type "EOF" +Enter +Sleep 2s + +Type "# Now VSCode will provide autocompletion for struct names!" +Enter +Type "# when you type 'struct:' in a .struct.yaml file" +Enter +Sleep 2s + +Type "# Schema generation enables better IDE support!" +Enter +Sleep 2s diff --git a/docs/vhs/usage.gif b/docs/vhs/usage.gif deleted file mode 100644 index c11e7b5..0000000 Binary files a/docs/vhs/usage.gif and /dev/null differ diff --git a/docs/vhs/yaml-config.gif b/docs/vhs/yaml-config.gif new file mode 100644 index 0000000..a478182 Binary files /dev/null and b/docs/vhs/yaml-config.gif differ diff --git a/docs/vhs/yaml-config.tape b/docs/vhs/yaml-config.tape index 003ede9..b2cabbd 100644 --- a/docs/vhs/yaml-config.tape +++ b/docs/vhs/yaml-config.tape @@ -3,37 +3,62 @@ Output docs/vhs/yaml-config.gif Set Theme "Monokai Vivid" Set FontSize 14 Set TypingSpeed 40ms -Set WindowBar Colorful -Set BorderRadius 8 -Set Margin 0 -Set Padding 10 Set Width 1400 Set Height 800 Set Shell "bash" -Type "# Create a custom YAML configuration" Enter -Type "cat > my-project.yaml << 'EOF'" Enter -Type "files:" Enter -Type " - README.md:" Enter -Type " content: |" Enter -Type " # {{@ project_name @}}" Enter -Type " Welcome to my awesome project!" Enter -Type " - src/main.py:" Enter -Type " content: |" Enter -Type " print('Hello from {{@ project_name @}}!')" Enter -Type "" Enter -Type "variables:" Enter -Type " - project_name:" Enter -Type " description: 'Name of your project'" Enter -Type " type: string" Enter -Type " default: 'MyProject'" Enter -Type "EOF" Enter -Sleep 2 -Type "" Enter -Type "# Generate structure from YAML (note: file:// is automatic)" Enter -Type "struct generate my-project.yaml ./output" Enter -Sleep 5 -Type "" Enter -Type "# Check the generated files" Enter -Type "tree output && echo && cat output/README.md" Enter -Sleep 5 +Type "# STRUCT YAML Configuration Demo" +Enter +Sleep 1s + +Type "# Create a simple project structure configuration" +Enter +Type "cat > my-project.yaml << EOF" +Enter +Type "files:" +Enter +Type " - README.md:" +Enter +Type " content: |" +Enter +Type " # My Project" +Enter +Type " Generated with STRUCT" +Enter +Type " - .gitignore:" +Enter +Type " file: https://raw.githubusercontent.com/github/gitignore/refs/heads/main/Python.gitignore" +Enter +Type "EOF" +Enter +Sleep 3s + +Type "# Validate the configuration" +Enter +Type "struct validate my-project.yaml" +Enter +Sleep 2s + +Type "# Generate the project" +Enter +Type "struct generate my-project.yaml ./my-custom-project" +Enter +Sleep 3s + +Type "# Check the generated structure" +Enter +Type "ls -la my-custom-project/" +Enter +Sleep 2s + +Type "cat my-custom-project/README.md" +Enter +Sleep 2s + +Type "# YAML configuration makes STRUCT highly flexible!" +Enter +Sleep 2s +Sleep 2s + +Type "# YAML configuration makes STRUCT highly flexible!" Enter +Sleep 2s diff --git a/site/css/advanced.css b/site/css/advanced.css new file mode 100644 index 0000000..c5e4ea2 --- /dev/null +++ b/site/css/advanced.css @@ -0,0 +1,570 @@ +/* STRUCT Advanced Components CSS - Phase 2 */ + +/* Search Functionality */ +.search-container { + position: relative; + max-width: 400px; + margin: 0 auto; +} + +.search-input { + width: 100%; + padding: var(--space-3) var(--space-4); + padding-left: var(--space-10); + background-color: var(--color-bg-secondary); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + color: var(--color-text-primary); + font-family: var(--font-sans); + font-size: var(--text-base); + transition: all var(--transition-fast); +} + +.search-input:focus { + outline: none; + border-color: var(--color-primary); + box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.1); +} + +.search-icon { + position: absolute; + left: var(--space-3); + top: 50%; + transform: translateY(-50%); + color: var(--color-text-muted); + font-size: var(--text-lg); + pointer-events: none; +} + +.search-results { + position: absolute; + top: 100%; + left: 0; + right: 0; + background-color: var(--color-bg-secondary); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + box-shadow: var(--shadow-lg); + z-index: var(--z-dropdown); + max-height: 400px; + overflow-y: auto; + margin-top: var(--space-2); +} + +.search-result-item { + padding: var(--space-4); + border-bottom: 1px solid var(--color-border); + cursor: pointer; + transition: background-color var(--transition-fast); +} + +.search-result-item:last-child { + border-bottom: none; +} + +.search-result-item:hover { + background-color: var(--color-bg-tertiary); +} + +.search-result-title { + font-size: var(--text-base); + font-weight: 600; + color: var(--color-text-primary); + margin-bottom: var(--space-1); +} + +.search-result-content { + font-size: var(--text-sm); + color: var(--color-text-secondary); + margin: 0; +} + +.search-no-results { + padding: var(--space-4); + text-align: center; + color: var(--color-text-muted); + font-style: italic; +} + +/* Advanced GitHub Stats */ +.github-stats-advanced { + margin: var(--space-12) 0; +} + +.stats-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: var(--space-4); + max-width: 1000px; + margin: 0 auto; +} + +.stat-card { + background: linear-gradient(135deg, var(--color-bg-secondary), var(--color-bg-tertiary)); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-6); + text-align: center; + transition: all var(--transition-normal); + position: relative; + overflow: hidden; +} + +.stat-card::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.1), transparent); + transition: left 0.5s ease; +} + +.stat-card:hover::before { + left: 100%; +} + +.stat-card:hover { + transform: translateY(-4px); + border-color: var(--color-primary); + box-shadow: var(--shadow-xl); +} + +.stat-icon { + font-size: var(--text-3xl); + margin-bottom: var(--space-3); + display: block; +} + +.stat-value { + font-size: var(--text-2xl); + font-weight: 700; + color: var(--color-primary); + display: block; + margin-bottom: var(--space-2); +} + +.stat-label { + font-size: var(--text-sm); + color: var(--color-text-secondary); + text-transform: uppercase; + letter-spacing: 0.5px; + font-weight: 500; +} + +/* Contributors Showcase */ +.contributors-showcase { + background-color: var(--color-bg-secondary); + border-radius: var(--radius-lg); + padding: var(--space-8); + margin: var(--space-12) 0; +} + +.contributors-title { + text-align: center; + margin-bottom: var(--space-8); + color: var(--color-text-primary); +} + +.contributors-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: var(--space-4); + margin-bottom: var(--space-6); +} + +.contributor-card { + background-color: var(--color-bg-tertiary); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + padding: var(--space-4); + display: flex; + align-items: center; + gap: var(--space-3); + transition: all var(--transition-normal); + position: relative; +} + +.contributor-card:hover { + transform: translateY(-2px); + border-color: var(--color-primary); + box-shadow: var(--shadow-md); +} + +.contributor-avatar { + width: 48px; + height: 48px; + border-radius: var(--radius-full); + border: 2px solid var(--color-border); + transition: border-color var(--transition-fast); +} + +.contributor-card:hover .contributor-avatar { + border-color: var(--color-primary); +} + +.contributor-info { + flex: 1; +} + +.contributor-name { + font-size: var(--text-base); + font-weight: 600; + color: var(--color-text-primary); + margin-bottom: var(--space-1); +} + +.contributor-contributions { + font-size: var(--text-sm); + color: var(--color-text-secondary); + margin: 0; +} + +.contributor-link { + color: var(--color-text-muted); + font-size: var(--text-lg); + transition: color var(--transition-fast); +} + +.contributor-link:hover { + color: var(--color-primary); +} + +/* Project Showcase */ +.project-showcase { + margin: var(--space-12) 0; +} + +.showcase-title { + text-align: center; + margin-bottom: var(--space-8); + color: var(--color-text-primary); +} + +.showcase-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: var(--space-6); +} + +.showcase-card { + background: linear-gradient(135deg, var(--color-bg-secondary), var(--color-bg-tertiary)); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-6); + text-align: center; + transition: all var(--transition-normal); + position: relative; + overflow: hidden; +} + +.showcase-card::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); + transform: scaleX(0); + transition: transform var(--transition-normal); +} + +.showcase-card:hover::after { + transform: scaleX(1); +} + +.showcase-card:hover { + transform: translateY(-8px); + box-shadow: var(--shadow-xl); +} + +.showcase-icon { + font-size: var(--text-4xl); + margin-bottom: var(--space-4); +} + +.showcase-name { + font-size: var(--text-xl); + font-weight: 600; + color: var(--color-text-primary); + margin-bottom: var(--space-3); +} + +.showcase-description { + color: var(--color-text-secondary); + margin-bottom: var(--space-4); + line-height: 1.6; +} + +.showcase-tags { + display: flex; + flex-wrap: wrap; + gap: var(--space-2); + justify-content: center; +} + +.showcase-tag { + background-color: var(--color-bg-primary); + color: var(--color-primary); + padding: var(--space-1) var(--space-2); + border-radius: var(--radius-sm); + font-size: var(--text-xs); + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +/* Demo Modal */ +.demo-modal { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.9); + z-index: var(--z-modal); + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + visibility: hidden; + transition: all var(--transition-normal); +} + +.demo-modal.active { + opacity: 1; + visibility: visible; +} + +.demo-modal-content { + position: relative; + max-width: 90vw; + max-height: 90vh; + background-color: var(--color-bg-secondary); + border-radius: var(--radius-lg); + overflow: hidden; + box-shadow: var(--shadow-xl); +} + +.demo-modal-close { + position: absolute; + top: var(--space-4); + right: var(--space-4); + background: none; + border: none; + color: var(--color-text-primary); + font-size: var(--text-2xl); + cursor: pointer; + z-index: 1; + width: 40px; + height: 40px; + border-radius: var(--radius-full); + background-color: rgba(0, 0, 0, 0.5); + transition: all var(--transition-fast); +} + +.demo-modal-close:hover { + background-color: var(--color-primary); + color: var(--color-bg-primary); +} + +.demo-modal-video { + width: 100%; + height: auto; + display: block; +} + +.demo-modal-info { + padding: var(--space-6); + text-align: center; +} + +.demo-modal-info h3 { + color: var(--color-text-primary); + margin-bottom: var(--space-2); +} + +.demo-modal-info p { + color: var(--color-text-secondary); + font-size: var(--text-sm); +} + +/* Keyboard Shortcuts Modal */ +.shortcuts-modal { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.8); + z-index: var(--z-modal); + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + visibility: hidden; + transition: all var(--transition-normal); +} + +.shortcuts-modal.active { + opacity: 1; + visibility: visible; +} + +.shortcuts-content { + background-color: var(--color-bg-secondary); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-8); + max-width: 400px; + width: 90%; +} + +.shortcuts-content h3 { + text-align: center; + margin-bottom: var(--space-6); + color: var(--color-text-primary); +} + +.shortcuts-list { + display: flex; + flex-direction: column; + gap: var(--space-3); + margin-bottom: var(--space-6); +} + +.shortcut-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: var(--space-2) 0; +} + +.shortcut-item kbd { + background-color: var(--color-bg-tertiary); + border: 1px solid var(--color-border); + border-radius: var(--radius-sm); + padding: var(--space-1) var(--space-2); + font-family: var(--font-mono); + font-size: var(--text-xs); + color: var(--color-text-primary); + margin: 0 var(--space-1); +} + +.shortcut-item span { + color: var(--color-text-secondary); + font-size: var(--text-sm); +} + +/* Enhanced Animations */ +.animate-on-scroll { + opacity: 0; + transform: translateY(30px); + transition: all 0.6s ease-out; +} + +.animate-on-scroll.animate-in { + opacity: 1; + transform: translateY(0); +} + +.stagger-item { + opacity: 0; + transform: translateY(20px); + transition: all 0.4s ease-out; +} + +.stagger-item.animate-in { + opacity: 1; + transform: translateY(0); +} + +/* Loading States */ +.skeleton { + background: linear-gradient(90deg, var(--color-bg-secondary) 25%, var(--color-bg-tertiary) 50%, var(--color-bg-secondary) 75%); + background-size: 200% 100%; + animation: loading 1.5s infinite; + border-radius: var(--radius-sm); +} + +.stat-card.loading .stat-icon, +.stat-card.loading .stat-value, +.stat-card.loading .stat-label { + background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-border) 50%, var(--color-bg-tertiary) 75%); + background-size: 200% 100%; + animation: loading 1.5s infinite; + color: transparent; + border-radius: var(--radius-sm); +} + +/* Progressive Enhancement */ +.no-js .search-container, +.no-js .shortcuts-modal, +.no-js .demo-modal { + display: none; +} + +.js-enabled .enhanced-only { + display: block; +} + +/* Mobile Optimizations */ +@media (max-width: 768px) { + .stats-grid { + grid-template-columns: repeat(2, 1fr); + gap: var(--space-3); + } + + .contributors-grid { + grid-template-columns: 1fr; + } + + .showcase-grid { + grid-template-columns: 1fr; + } + + .demo-modal-content { + max-width: 95vw; + margin: var(--space-4); + } + + .shortcuts-content { + max-width: 95vw; + padding: var(--space-6); + } + + .search-container { + max-width: 100%; + } +} + +/* High Contrast Mode Support */ +@media (prefers-contrast: high) { + .stat-card, + .contributor-card, + .showcase-card { + border-width: 2px; + } + + .search-input:focus { + border-width: 2px; + } +} + +/* Print Styles */ +@media print { + .search-container, + .demo-modal, + .shortcuts-modal { + display: none; + } + + .stat-card, + .contributor-card, + .showcase-card { + break-inside: avoid; + border: 1px solid #000; + } +} diff --git a/site/css/animations.css b/site/css/animations.css new file mode 100644 index 0000000..b982ea7 --- /dev/null +++ b/site/css/animations.css @@ -0,0 +1,475 @@ +/* STRUCT Animations CSS */ + +/* Keyframe Animations */ +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes slideUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes slideInLeft { + from { + opacity: 0; + transform: translateX(-30px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes slideInRight { + from { + opacity: 0; + transform: translateX(30px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes pulse { + 0%, 100% { + transform: scale(1); + } + 50% { + transform: scale(1.05); + } +} + +@keyframes glow { + 0%, 100% { + box-shadow: 0 0 20px rgba(0, 255, 136, 0.3); + } + 50% { + box-shadow: 0 0 30px rgba(0, 255, 136, 0.6); + } +} + +@keyframes gradient { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} + +@keyframes typewriter { + from { + width: 0; + } + to { + width: 100%; + } +} + +@keyframes blink { + 0%, 50% { + opacity: 1; + } + 51%, 100% { + opacity: 0; + } +} + +@keyframes float { + 0%, 100% { + transform: translateY(0px); + } + 50% { + transform: translateY(-10px); + } +} + +@keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +@keyframes bounce { + 0%, 20%, 53%, 80%, 100% { + transform: translate3d(0, 0, 0); + } + 40%, 43% { + transform: translate3d(0, -15px, 0); + } + 70% { + transform: translate3d(0, -7px, 0); + } + 90% { + transform: translate3d(0, -2px, 0); + } +} + +@keyframes shake { + 0%, 100% { + transform: translateX(0); + } + 10%, 30%, 50%, 70%, 90% { + transform: translateX(-5px); + } + 20%, 40%, 60%, 80% { + transform: translateX(5px); + } +} + +@keyframes loading { + 0% { + background-position: 200% 0; + } + 100% { + background-position: -200% 0; + } +} + +/* Animation Classes */ +.fade-in { + animation: fadeIn 0.6s ease-out forwards; +} + +.slide-up { + animation: slideUp 0.4s ease-out forwards; +} + +.slide-in-left { + animation: slideInLeft 0.5s ease-out forwards; +} + +.slide-in-right { + animation: slideInRight 0.5s ease-out forwards; +} + +.pulse { + animation: pulse 2s ease-in-out infinite; +} + +.glow { + animation: glow 3s ease-in-out infinite; +} + +.gradient-animation { + background: linear-gradient(-45deg, var(--color-primary), var(--color-secondary), var(--color-accent), var(--color-primary)); + background-size: 400% 400%; + animation: gradient 15s ease infinite; +} + +.typewriter { + overflow: hidden; + border-right: 2px solid var(--color-primary); + white-space: nowrap; + animation: typewriter 3s steps(40, end), blink 0.75s step-end infinite; +} + +.float { + animation: float 3s ease-in-out infinite; +} + +.spin { + animation: spin 1s linear infinite; +} + +.bounce { + animation: bounce 2s infinite; +} + +.shake { + animation: shake 0.5s ease-in-out; +} + +.loading-animation { + background: linear-gradient(90deg, var(--color-bg-secondary) 25%, var(--color-bg-tertiary) 50%, var(--color-bg-secondary) 75%); + background-size: 200% 100%; + animation: loading 1.5s infinite; +} + +/* Hover Animations */ +.hover-lift:hover { + transform: translateY(-5px); + box-shadow: var(--shadow-lg); + transition: all var(--transition-normal); +} + +.hover-scale:hover { + transform: scale(1.05); + transition: transform var(--transition-fast); +} + +.hover-rotate:hover { + transform: rotate(5deg); + transition: transform var(--transition-normal); +} + +.hover-glow:hover { + box-shadow: 0 0 30px rgba(0, 255, 136, 0.5); + transition: box-shadow var(--transition-normal); +} + +.hover-blur:hover { + filter: blur(1px); + transition: filter var(--transition-fast); +} + +/* Scroll Animations */ +.scroll-reveal { + opacity: 0; + transform: translateY(50px); + transition: all 0.6s ease-out; +} + +.scroll-reveal.revealed { + opacity: 1; + transform: translateY(0); +} + +.scroll-reveal-left { + opacity: 0; + transform: translateX(-50px); + transition: all 0.6s ease-out; +} + +.scroll-reveal-left.revealed { + opacity: 1; + transform: translateX(0); +} + +.scroll-reveal-right { + opacity: 0; + transform: translateX(50px); + transition: all 0.6s ease-out; +} + +.scroll-reveal-right.revealed { + opacity: 1; + transform: translateX(0); +} + +/* Staggered Animations */ +.stagger-1 { + animation-delay: 0.1s; +} + +.stagger-2 { + animation-delay: 0.2s; +} + +.stagger-3 { + animation-delay: 0.3s; +} + +.stagger-4 { + animation-delay: 0.4s; +} + +.stagger-5 { + animation-delay: 0.5s; +} + +.stagger-6 { + animation-delay: 0.6s; +} + +/* Hero Section Specific Animations */ +.hero-title { + animation: fadeIn 1s ease-out 0.5s both; +} + +.hero-subtitle { + animation: fadeIn 1s ease-out 0.8s both; +} + +.hero-actions { + animation: fadeIn 1s ease-out 1.1s both; +} + +/* Feature Cards Animation */ +.feature-card { + opacity: 0; + transform: translateY(30px); + transition: all 0.6s ease-out; +} + +.feature-card.visible { + opacity: 1; + transform: translateY(0); +} + +.feature-card:nth-child(1) { animation-delay: 0.1s; } +.feature-card:nth-child(2) { animation-delay: 0.2s; } +.feature-card:nth-child(3) { animation-delay: 0.3s; } +.feature-card:nth-child(4) { animation-delay: 0.4s; } +.feature-card:nth-child(5) { animation-delay: 0.5s; } +.feature-card:nth-child(6) { animation-delay: 0.6s; } + +/* Code Block Animations */ +.code-block { + position: relative; + overflow: hidden; +} + +.code-block::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.2), transparent); + transition: left 0.5s ease; +} + +.code-block:hover::before { + left: 100%; +} + +/* Button Ripple Effect */ +.btn { + position: relative; + overflow: hidden; +} + +.btn::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 0; + height: 0; + border-radius: 50%; + background: rgba(255, 255, 255, 0.2); + transform: translate(-50%, -50%); + transition: width 0.3s ease, height 0.3s ease; +} + +.btn:active::before { + width: 300px; + height: 300px; +} + +/* Navigation Animation */ +.navbar { + transform: translateY(-100%); + animation: slideDown 0.5s ease-out 0.2s both; +} + +@keyframes slideDown { + from { + transform: translateY(-100%); + } + to { + transform: translateY(0); + } +} + +/* Loading States */ +.btn.loading { + pointer-events: none; + opacity: 0.7; +} + +.btn.loading::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 16px; + height: 16px; + margin: -8px 0 0 -8px; + border: 2px solid transparent; + border-top-color: currentColor; + border-radius: 50%; + animation: spin 1s linear infinite; +} + +/* Reduced Motion */ +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } + + .scroll-reveal, + .scroll-reveal-left, + .scroll-reveal-right { + opacity: 1; + transform: none; + } +} + +/* Dark/Light Theme Transitions */ +@media (prefers-color-scheme: light) { + :root { + transition: background-color 0.3s ease, color 0.3s ease; + } +} + +/* Focus Animations */ +.btn:focus, +.tab-button:focus, +.demo-tab:focus { + animation: pulse 0.3s ease-in-out; +} + +/* Success/Error States */ +.success { + animation: bounce 0.6s ease-in-out; +} + +.error { + animation: shake 0.5s ease-in-out; +} + +/* Particle Animation for Hero Background */ +@keyframes particle-float { + 0%, 100% { + transform: translateY(0px) rotate(0deg); + opacity: 0.3; + } + 50% { + transform: translateY(-20px) rotate(180deg); + opacity: 0.8; + } +} + +.hero::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: + radial-gradient(2px 2px at 20px 30px, rgba(0, 255, 136, 0.3), transparent), + radial-gradient(2px 2px at 40px 70px, rgba(0, 102, 255, 0.3), transparent), + radial-gradient(1px 1px at 90px 40px, rgba(255, 102, 0, 0.3), transparent); + background-size: 100px 100px; + animation: particle-float 20s ease-in-out infinite; + pointer-events: none; +} diff --git a/site/css/components.css b/site/css/components.css new file mode 100644 index 0000000..8c12fab --- /dev/null +++ b/site/css/components.css @@ -0,0 +1,631 @@ +/* STRUCT Components CSS */ + +/* Navigation Bar */ +.navbar { + position: sticky; + top: 0; + z-index: var(--z-sticky); + background: rgba(10, 10, 10, 0.95); + backdrop-filter: blur(10px); + border-bottom: 1px solid var(--color-border); + padding: var(--space-4) 0; +} + +.navbar-content { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-8); /* Add proper spacing between sections */ +} + +.navbar-brand { + display: flex; + align-items: center; + gap: var(--space-3); + font-weight: 700; + font-size: var(--text-xl); + color: var(--color-primary); + flex-shrink: 0; /* Prevent logo from shrinking */ +} + +.navbar-nav { + display: flex; + gap: var(--space-6); + list-style: none; + margin-left: auto; /* Push navigation to the right side */ + margin-right: var(--space-4); /* Add space before search/theme toggle */ +} + +.navbar-nav a { + color: var(--color-text-secondary); + font-weight: 500; + transition: color var(--transition-fast); +} + +.navbar-nav a:hover { + color: var(--color-primary); +} + +/* Buttons */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: var(--space-2); + padding: var(--space-3) var(--space-6); + border: none; + border-radius: var(--radius-md); + font-family: var(--font-sans); + font-size: var(--text-base); + font-weight: 500; + line-height: 1; + cursor: pointer; + transition: all var(--transition-fast); + text-decoration: none; + white-space: nowrap; +} + +.btn:focus { + outline: 2px solid var(--color-primary); + outline-offset: 2px; +} + +.btn-primary { + background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); + color: var(--color-bg-primary); +} + +.btn-primary:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-lg); +} + +.btn-secondary { + background-color: transparent; + color: var(--color-text-primary); + border: 1px solid var(--color-border); +} + +.btn-secondary:hover { + background-color: var(--color-bg-secondary); + border-color: var(--color-primary); + color: var(--color-primary); +} + +.btn-ghost { + background-color: transparent; + color: var(--color-text-secondary); +} + +.btn-ghost:hover { + background-color: var(--color-bg-secondary); + color: var(--color-primary); +} + +.btn-lg { + padding: var(--space-4) var(--space-8); + font-size: var(--text-lg); +} + +.btn-sm { + padding: var(--space-2) var(--space-4); + font-size: var(--text-sm); +} + +/* Cards */ +.card { + background-color: var(--color-bg-secondary); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-6); + transition: all var(--transition-normal); +} + +.card:hover { + border-color: var(--color-primary); + box-shadow: var(--shadow-lg); + transform: translateY(-4px); +} + +.card-header { + margin-bottom: var(--space-4); +} + +.card-title { + font-size: var(--text-xl); + font-weight: 600; + color: var(--color-text-primary); + margin-bottom: var(--space-2); +} + +.card-description { + color: var(--color-text-secondary); + margin-bottom: 0; +} + +.card-content { + margin-bottom: var(--space-4); +} + +.card-footer { + border-top: 1px solid var(--color-border); + padding-top: var(--space-4); + margin-top: var(--space-4); +} + +/* Hero Section */ +.hero { + background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%); + padding: var(--space-20) 0; + text-align: center; + position: relative; + overflow: hidden; +} + +.hero::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: + radial-gradient(circle at 20% 20%, var(--color-primary) 0%, transparent 50%), + radial-gradient(circle at 80% 80%, var(--color-secondary) 0%, transparent 50%); + opacity: 0.1; + pointer-events: none; +} + +.hero-content { + position: relative; + z-index: 1; +} + +.hero-title { + font-size: clamp(var(--text-4xl), 5vw, var(--text-6xl)); + font-weight: 700; + margin-bottom: var(--space-6); + background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.hero-subtitle { + font-size: var(--text-xl); + color: var(--color-text-secondary); + max-width: 600px; + margin: 0 auto var(--space-8); +} + +.hero-actions { + display: flex; + gap: var(--space-4); + justify-content: center; + flex-wrap: wrap; +} + +/* Installation Tabs */ +.installation-tabs { + background-color: var(--color-bg-secondary); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + overflow: hidden; +} + +.tab-buttons { + display: flex; + background-color: var(--color-bg-tertiary); + border-bottom: 1px solid var(--color-border); +} + +.tab-button { + flex: 1; + padding: var(--space-4); + background: none; + border: none; + color: var(--color-text-secondary); + font-family: var(--font-sans); + font-size: var(--text-sm); + font-weight: 500; + cursor: pointer; + transition: all var(--transition-fast); + border-right: 1px solid var(--color-border); +} + +.tab-button:last-child { + border-right: none; +} + +.tab-button.active { + background-color: var(--color-bg-secondary); + color: var(--color-primary); +} + +.tab-button:hover:not(.active) { + background-color: var(--color-bg-secondary); + color: var(--color-text-primary); +} + +.tab-content { + padding: var(--space-6); +} + +.tab-pane { + display: none; +} + +.tab-pane.active { + display: block; +} + +/* Code Block with Copy Button */ +.code-block { + position: relative; + margin: var(--space-4) 0; +} + +.code-block pre { + margin: 0; + padding-right: var(--space-12); +} + +.copy-button { + position: absolute; + top: var(--space-2); + right: var(--space-2); + background-color: var(--color-bg-tertiary); + border: 1px solid var(--color-border); + color: var(--color-text-secondary); + padding: var(--space-2); + border-radius: var(--radius-sm); + cursor: pointer; + font-size: var(--text-xs); + transition: all var(--transition-fast); +} + +.copy-button:hover { + background-color: var(--color-primary); + color: var(--color-bg-primary); +} + +/* Feature Grid */ +.features-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: var(--space-6); + margin: var(--space-12) 0; +} + +.feature-card { + background-color: var(--color-bg-secondary); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-6); + text-align: center; + transition: all var(--transition-normal); +} + +.feature-card:hover { + border-color: var(--color-primary); + transform: translateY(-4px); + box-shadow: var(--shadow-lg); +} + +.feature-icon { + font-size: var(--text-4xl); + margin-bottom: var(--space-4); + color: var(--color-primary); +} + +.feature-title { + font-size: var(--text-xl); + font-weight: 600; + margin-bottom: var(--space-3); + color: var(--color-text-primary); +} + +.feature-description { + color: var(--color-text-secondary); + line-height: 1.6; +} + +/* GitHub Stats */ +.github-stats { + display: flex; + gap: var(--space-4); + justify-content: center; + flex-wrap: wrap; + margin: var(--space-8) 0; +} + +.stat-item { + background-color: var(--color-bg-secondary); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + padding: var(--space-4) var(--space-6); + text-align: center; + min-width: 120px; +} + +.stat-value { + font-size: var(--text-2xl); + font-weight: 700; + color: var(--color-primary); + display: block; +} + +.stat-label { + font-size: var(--text-sm); + color: var(--color-text-secondary); + margin-top: var(--space-1); +} + +/* Demo Carousel */ +.demo-carousel { + position: relative; + background-color: var(--color-bg-secondary); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + overflow: hidden; + margin: var(--space-8) 0; +} + +.demo-tabs { + display: flex; + background-color: var(--color-bg-tertiary); + border-bottom: 1px solid var(--color-border); + overflow-x: auto; +} + +.demo-tab { + padding: var(--space-3) var(--space-4); + background: none; + border: none; + color: var(--color-text-secondary); + font-family: var(--font-sans); + font-size: var(--text-sm); + font-weight: 500; + cursor: pointer; + transition: all var(--transition-fast); + white-space: nowrap; + border-right: 1px solid var(--color-border); +} + +.demo-tab:last-child { + border-right: none; +} + +.demo-tab.active { + background-color: var(--color-bg-secondary); + color: var(--color-primary); +} + +.demo-tab:hover:not(.active) { + background-color: var(--color-bg-secondary); + color: var(--color-text-primary); +} + +.demo-content { + padding: var(--space-6); + text-align: center; +} + +.demo-content-item { + display: none; + animation: fadeIn 0.3s ease-in-out; +} + +.demo-content-item.active { + display: block; +} + +.demo-video { + max-width: 100%; + border-radius: var(--radius-md); + margin: var(--space-4) 0; +} + +/* Footer */ +.footer { + background-color: var(--color-bg-secondary); + border-top: 1px solid var(--color-border); + padding: var(--space-12) 0 var(--space-8); + margin-top: var(--space-20); +} + +.footer-content { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: var(--space-8); + margin-bottom: var(--space-8); +} + +.footer-section h3 { + color: var(--color-text-primary); + margin-bottom: var(--space-4); +} + +.footer-section ul { + list-style: none; +} + +.footer-section li { + margin-bottom: var(--space-2); +} + +.footer-section a { + color: var(--color-text-secondary); + transition: color var(--transition-fast); +} + +.footer-section a:hover { + color: var(--color-primary); +} + +.footer-bottom { + border-top: 1px solid var(--color-border); + padding-top: var(--space-6); + text-align: center; + color: var(--color-text-muted); +} + +/* Responsive Design */ +@media (max-width: 768px) { + .navbar-nav { + display: none; + } + + .hero-actions { + flex-direction: column; + align-items: center; + } + + .btn { + width: 100%; + max-width: 300px; + } + + .tab-buttons { + flex-direction: column; + } + + .tab-button { + border-right: none; + border-bottom: 1px solid var(--color-border); + } + + .tab-button:last-child { + border-bottom: none; + } + + .github-stats { + flex-direction: column; + align-items: center; + } + + .stat-item { + min-width: 200px; + } +} + +/* Loading States */ +.loading { + opacity: 0.6; + pointer-events: none; +} + +.skeleton { + background: linear-gradient(90deg, var(--color-bg-secondary) 25%, var(--color-bg-tertiary) 50%, var(--color-bg-secondary) 75%); + background-size: 200% 100%; + animation: loading 1.5s infinite; +} + +@keyframes loading { + 0% { + background-position: 200% 0; + } + 100% { + background-position: -200% 0; + } +} + +/* Utilities for JavaScript Components */ +.fade-in { + animation: fadeIn 0.5s ease-in-out; +} + +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.slide-up { + animation: slideUp 0.3s ease-out; +} + +@keyframes slideUp { + from { + transform: translateY(10px); + opacity: 0; + } + to { + transform: translateY(0); + opacity: 1; + } +} + +/* Responsive Navigation */ +@media (max-width: 1024px) { + .navbar-content { + gap: var(--space-6); /* Reduce gap on tablets */ + } + + .navbar-nav { + gap: var(--space-4); /* Reduce menu item spacing */ + margin-right: var(--space-3); + } +} + +@media (max-width: 768px) { + .navbar { + padding: var(--space-3) 0; /* Reduce navbar height on mobile */ + } + + .navbar-content { + gap: var(--space-4); /* Further reduce gap on mobile */ + flex-wrap: nowrap; /* Prevent wrapping */ + } + + .navbar-brand { + font-size: var(--text-lg); /* Slightly smaller logo text */ + gap: var(--space-2); + } + + .navbar-nav { + gap: var(--space-3); /* Tighter spacing on mobile */ + margin-right: var(--space-2); + } + + .navbar-nav a { + font-size: var(--text-sm); /* Smaller menu text */ + padding: var(--space-2) 0; /* Add vertical padding for better touch targets */ + } +} + +@media (max-width: 640px) { + .navbar-content { + gap: var(--space-3); + } + + .navbar-nav { + gap: var(--space-2); + margin-right: var(--space-1); + } + + /* Hide some menu items on very small screens if needed */ + .navbar-nav li:nth-child(n+4) { + display: none; + } +} + +@media (max-width: 480px) { + .navbar-brand { + font-size: var(--text-base); + } + + .navbar-nav { + gap: var(--space-1); + } + + /* Show only essential menu items */ + .navbar-nav li:nth-child(n+3) { + display: none; + } +} diff --git a/site/css/main.css b/site/css/main.css new file mode 100644 index 0000000..9f0c6c3 --- /dev/null +++ b/site/css/main.css @@ -0,0 +1,341 @@ +/* STRUCT Modern Static Site - Main CSS */ + +/* Import Google Fonts */ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@300;400;500&display=swap'); + +/* CSS Custom Properties - Design System */ +:root { + /* Colors */ + --color-primary: #00ff88; + --color-secondary: #0066ff; + --color-accent: #ff6600; + --color-bg-primary: #0a0a0a; + --color-bg-secondary: #1a1a1a; + --color-bg-tertiary: #2a2a2a; + --color-text-primary: #ffffff; + --color-text-secondary: #b0b0b0; + --color-text-muted: #888888; + --color-border: #333333; + --color-success: #00ff88; + --color-warning: #ffaa00; + --color-error: #ff4444; + + /* Typography */ + --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + --font-mono: 'Fira Code', 'SF Mono', Monaco, 'Cascadia Code', monospace; + + /* Font Sizes */ + --text-xs: 0.75rem; /* 12px */ + --text-sm: 0.875rem; /* 14px */ + --text-base: 1rem; /* 16px */ + --text-lg: 1.125rem; /* 18px */ + --text-xl: 1.25rem; /* 20px */ + --text-2xl: 1.5rem; /* 24px */ + --text-3xl: 1.875rem; /* 30px */ + --text-4xl: 2.25rem; /* 36px */ + --text-5xl: 3rem; /* 48px */ + --text-6xl: 3.75rem; /* 60px */ + + /* Spacing */ + --space-1: 0.25rem; /* 4px */ + --space-2: 0.5rem; /* 8px */ + --space-3: 0.75rem; /* 12px */ + --space-4: 1rem; /* 16px */ + --space-5: 1.25rem; /* 20px */ + --space-6: 1.5rem; /* 24px */ + --space-8: 2rem; /* 32px */ + --space-10: 2.5rem; /* 40px */ + --space-12: 3rem; /* 48px */ + --space-16: 4rem; /* 64px */ + --space-20: 5rem; /* 80px */ + + /* Border Radius */ + --radius-sm: 0.25rem; /* 4px */ + --radius-md: 0.5rem; /* 8px */ + --radius-lg: 0.75rem; /* 12px */ + --radius-xl: 1rem; /* 16px */ + --radius-full: 9999px; + + /* Shadows */ + --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5); + --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5); + --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5); + --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5); + + /* Transitions */ + --transition-fast: 0.15s ease-in-out; + --transition-normal: 0.3s ease-in-out; + --transition-slow: 0.5s ease-in-out; + + /* Z-index */ + --z-dropdown: 1000; + --z-sticky: 1020; + --z-fixed: 1030; + --z-modal: 1040; + --z-popover: 1050; + --z-tooltip: 1060; +} + +/* Reset and Base Styles */ +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; + font-size: 16px; +} + +body { + font-family: var(--font-sans); + font-size: var(--text-base); + line-height: 1.6; + color: var(--color-text-primary); + background-color: var(--color-bg-primary); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* Typography */ +h1, h2, h3, h4, h5, h6 { + font-weight: 600; + line-height: 1.2; + margin-bottom: var(--space-4); + color: var(--color-text-primary); +} + +h1 { font-size: var(--text-6xl); } +h2 { font-size: var(--text-4xl); } +h3 { font-size: var(--text-2xl); } +h4 { font-size: var(--text-xl); } +h5 { font-size: var(--text-lg); } +h6 { font-size: var(--text-base); } + +p { + margin-bottom: var(--space-4); + color: var(--color-text-secondary); +} + +a { + color: var(--color-secondary); + text-decoration: none; + transition: color var(--transition-fast); +} + +a:hover { + color: var(--color-primary); +} + +/* Code Typography */ +code, pre { + font-family: var(--font-mono); + font-size: var(--text-sm); +} + +code { + background-color: var(--color-bg-secondary); + padding: var(--space-1) var(--space-2); + border-radius: var(--radius-sm); + color: var(--color-primary); +} + +pre { + background-color: var(--color-bg-secondary); + padding: var(--space-4); + border-radius: var(--radius-md); + overflow-x: auto; + border: 1px solid var(--color-border); +} + +pre code { + background: none; + padding: 0; + color: var(--color-text-primary); +} + +/* Layout */ +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 var(--space-4); +} + +.container-fluid { + width: 100%; + padding: 0 var(--space-4); +} + +/* Responsive containers */ +@media (min-width: 640px) { + .container, .container-fluid { + padding: 0 var(--space-6); + } +} + +@media (min-width: 1024px) { + .container, .container-fluid { + padding: 0 var(--space-8); + } +} + +/* Grid System */ +.grid { + display: grid; + gap: var(--space-6); +} + +.grid-cols-1 { grid-template-columns: repeat(1, 1fr); } +.grid-cols-2 { grid-template-columns: repeat(2, 1fr); } +.grid-cols-3 { grid-template-columns: repeat(3, 1fr); } +.grid-cols-4 { grid-template-columns: repeat(4, 1fr); } + +@media (min-width: 768px) { + .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); } + .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); } + .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); } +} + +@media (min-width: 1024px) { + .lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); } + .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); } + .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); } +} + +/* Flexbox Utilities */ +.flex { + display: flex; +} + +.flex-col { + flex-direction: column; +} + +.items-center { + align-items: center; +} + +.justify-center { + justify-content: center; +} + +.justify-between { + justify-content: space-between; +} + +.gap-4 { + gap: var(--space-4); +} + +.gap-6 { + gap: var(--space-6); +} + +.gap-8 { + gap: var(--space-8); +} + +/* Spacing Utilities */ +.mb-4 { margin-bottom: var(--space-4); } +.mb-6 { margin-bottom: var(--space-6); } +.mb-8 { margin-bottom: var(--space-8); } +.mb-12 { margin-bottom: var(--space-12); } + +.mt-4 { margin-top: var(--space-4); } +.mt-6 { margin-top: var(--space-6); } +.mt-8 { margin-top: var(--space-8); } +.mt-12 { margin-top: var(--space-12); } + +.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); } +.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); } +.py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); } +.py-20 { padding-top: var(--space-20); padding-bottom: var(--space-20); } + +.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); } +.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); } +.px-8 { padding-left: var(--space-8); padding-right: var(--space-8); } + +/* Text Utilities */ +.text-center { text-align: center; } +.text-left { text-align: left; } +.text-right { text-align: right; } + +.text-primary { color: var(--color-primary); } +.text-secondary { color: var(--color-text-secondary); } +.text-muted { color: var(--color-text-muted); } + +.font-mono { font-family: var(--font-mono); } +.font-sans { font-family: var(--font-sans); } + +/* Background Utilities */ +.bg-primary { background-color: var(--color-bg-primary); } +.bg-secondary { background-color: var(--color-bg-secondary); } +.bg-tertiary { background-color: var(--color-bg-tertiary); } + +/* Border Utilities */ +.border { border: 1px solid var(--color-border); } +.border-t { border-top: 1px solid var(--color-border); } +.border-b { border-bottom: 1px solid var(--color-border); } + +.rounded { border-radius: var(--radius-md); } +.rounded-lg { border-radius: var(--radius-lg); } +.rounded-full { border-radius: var(--radius-full); } + +/* Animation Utilities */ +.transition { + transition: all var(--transition-normal); +} + +.hover\:scale-105:hover { + transform: scale(1.05); +} + +.hover\:shadow-lg:hover { + box-shadow: var(--shadow-lg); +} + +/* Visibility */ +.hidden { + display: none; +} + +@media (min-width: 768px) { + .md\:block { + display: block; + } + + .md\:hidden { + display: none; + } +} + +@media (min-width: 1024px) { + .lg\:block { + display: block; + } + + .lg\:hidden { + display: none; + } +} + +/* Custom Scrollbar */ +::-webkit-scrollbar { + width: 8px; +} + +::-webkit-scrollbar-track { + background: var(--color-bg-secondary); +} + +::-webkit-scrollbar-thumb { + background: var(--color-border); + border-radius: var(--radius-full); +} + +::-webkit-scrollbar-thumb:hover { + background: var(--color-text-muted); +} diff --git a/site/css/phase3.css b/site/css/phase3.css new file mode 100644 index 0000000..ead4dc4 --- /dev/null +++ b/site/css/phase3.css @@ -0,0 +1,921 @@ +/* Phase 3: Advanced Features & Documentation Integration */ + +/* ===== DOCUMENTATION INTEGRATION ===== */ + +/* Quick Reference Guide */ +.quick-reference { + margin: 4rem 0; + padding: 0; +} + +.quick-reference-header { + text-align: center; + margin-bottom: 3rem; +} + +.quick-reference-title { + font-size: 2.5rem; + font-weight: 700; + margin-bottom: 1rem; + background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.reference-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; + margin-bottom: 3rem; +} + +.reference-card { + background: var(--color-bg-secondary); + border: 1px solid var(--color-border); + border-radius: 12px; + padding: 2rem; + transition: all 0.3s ease; + position: relative; + overflow: hidden; +} + +.reference-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); + transform: scaleX(0); + transition: transform 0.3s ease; +} + +.reference-card:hover::before { + transform: scaleX(1); +} + +.reference-card:hover { + transform: translateY(-4px); + border-color: var(--color-primary); + box-shadow: 0 20px 40px rgba(0, 255, 136, 0.1); +} + +.reference-card-header { + display: flex; + align-items: center; + margin-bottom: 1.5rem; +} + +.reference-icon { + font-size: 1.5rem; + color: var(--color-primary); + margin-right: 1rem; +} + +.reference-card-title { + font-size: 1.25rem; + font-weight: 600; + margin: 0; +} + +.reference-content { + margin-bottom: 1.5rem; +} + +.reference-item { + display: flex; + align-items: flex-start; + margin-bottom: 1rem; + padding: 0.75rem; + background: rgba(255, 255, 255, 0.02); + border-radius: 8px; + border-left: 3px solid var(--color-primary); +} + +.reference-item-icon { + color: var(--color-primary); + margin-right: 0.75rem; + margin-top: 0.125rem; + flex-shrink: 0; +} + +.reference-item-content { + flex: 1; +} + +.reference-item-title { + font-weight: 600; + margin-bottom: 0.25rem; + color: var(--color-text-primary); +} + +.reference-item-description { + color: var(--color-text-secondary); + font-size: 0.875rem; + line-height: 1.4; +} + +.reference-code { + background: rgba(0, 0, 0, 0.4); + padding: 0.5rem; + border-radius: 4px; + font-family: var(--font-mono); + font-size: 0.8rem; + color: var(--color-primary); + margin-top: 0.5rem; + overflow-x: auto; +} + +/* API Documentation Preview */ +.api-preview { + margin: 4rem 0; + padding: 0; +} + +.api-preview-header { + text-align: center; + margin-bottom: 3rem; +} + +.api-preview-title { + font-size: 2.5rem; + font-weight: 700; + margin-bottom: 1rem; + background: linear-gradient(135deg, var(--color-secondary), var(--color-accent)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.api-tabs { + display: flex; + justify-content: center; + margin-bottom: 2rem; + border-bottom: 1px solid var(--color-border); +} + +.api-tab { + background: none; + border: none; + color: var(--color-text-secondary); + font-size: 1rem; + font-weight: 500; + padding: 1rem 2rem; + cursor: pointer; + transition: all 0.3s ease; + position: relative; +} + +.api-tab.active { + color: var(--color-primary); +} + +.api-tab.active::after { + content: ''; + position: absolute; + bottom: -1px; + left: 0; + right: 0; + height: 2px; + background: var(--color-primary); +} + +.api-tab:hover { + color: var(--color-primary); +} + +.api-content { + max-width: 800px; + margin: 0 auto; +} + +.api-panel { + display: none; + background: var(--color-bg-secondary); + border: 1px solid var(--color-border); + border-radius: 12px; + padding: 2rem; +} + +.api-panel.active { + display: block; + animation: fadeIn 0.3s ease; +} + +.api-section { + margin-bottom: 2rem; +} + +.api-section-title { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 1rem; + color: var(--color-text-primary); +} + +.api-method { + background: rgba(0, 0, 0, 0.3); + border: 1px solid var(--color-border); + border-radius: 8px; + padding: 1.5rem; + margin-bottom: 1rem; +} + +.api-method-header { + display: flex; + align-items: center; + margin-bottom: 1rem; +} + +.api-method-type { + background: var(--color-primary); + color: var(--color-bg-primary); + padding: 0.25rem 0.75rem; + border-radius: 4px; + font-weight: 600; + font-size: 0.75rem; + margin-right: 1rem; +} + +.api-method-name { + font-family: var(--font-mono); + font-weight: 600; + color: var(--color-text-primary); +} + +.api-method-description { + color: var(--color-text-secondary); + margin-bottom: 1rem; + line-height: 1.6; +} + +.api-code-block { + background: rgba(0, 0, 0, 0.6); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 6px; + padding: 1rem; + font-family: var(--font-mono); + font-size: 0.875rem; + color: var(--color-text-primary); + overflow-x: auto; + position: relative; +} + +.api-code-copy { + position: absolute; + top: 0.5rem; + right: 0.5rem; + background: rgba(255, 255, 255, 0.1); + border: none; + color: var(--color-text-secondary); + padding: 0.5rem; + border-radius: 4px; + cursor: pointer; + transition: all 0.3s ease; +} + +.api-code-copy:hover { + background: rgba(255, 255, 255, 0.2); + color: var(--color-text-primary); +} + +/* Getting Started Wizard */ +.getting-started-wizard { + margin: 4rem 0; + padding: 0; +} + +.wizard-header { + text-align: center; + margin-bottom: 3rem; +} + +.wizard-title { + font-size: 2.5rem; + font-weight: 700; + margin-bottom: 1rem; + background: linear-gradient(135deg, var(--color-accent), var(--color-primary)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.wizard-container { + max-width: 900px; + margin: 0 auto; + background: var(--color-bg-secondary); + border: 1px solid var(--color-border); + border-radius: 16px; + padding: 3rem; + position: relative; +} + +.wizard-progress { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 3rem; + position: relative; +} + +.wizard-progress::before { + content: ''; + position: absolute; + top: 50%; + left: 0; + right: 0; + height: 2px; + background: var(--color-border); + z-index: 1; +} + +.wizard-progress-line { + position: absolute; + top: 50%; + left: 0; + height: 2px; + background: var(--color-primary); + z-index: 2; + transition: width 0.5s ease; +} + +.wizard-step { + background: var(--color-bg-primary); + border: 2px solid var(--color-border); + border-radius: 50%; + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + font-weight: 600; + color: var(--color-text-secondary); + position: relative; + z-index: 3; + transition: all 0.3s ease; +} + +.wizard-step.active { + border-color: var(--color-primary); + color: var(--color-primary); + background: rgba(0, 255, 136, 0.1); +} + +.wizard-step.completed { + border-color: var(--color-primary); + background: var(--color-primary); + color: var(--color-bg-primary); +} + +.wizard-content { + min-height: 300px; +} + +.wizard-panel { + display: none; +} + +.wizard-panel.active { + display: block; + animation: slideInRight 0.3s ease; +} + +.wizard-panel-title { + font-size: 1.5rem; + font-weight: 600; + margin-bottom: 1rem; + color: var(--color-text-primary); +} + +.wizard-panel-description { + color: var(--color-text-secondary); + margin-bottom: 2rem; + line-height: 1.6; +} + +.wizard-options { + display: grid; + gap: 1rem; + margin-bottom: 2rem; +} + +.wizard-option { + background: rgba(255, 255, 255, 0.02); + border: 1px solid var(--color-border); + border-radius: 8px; + padding: 1.5rem; + cursor: pointer; + transition: all 0.3s ease; + position: relative; + user-select: none; +} + +.wizard-option * { + pointer-events: none; /* Ensure clicks bubble up to the option */ +} + +.wizard-option:hover { + border-color: var(--color-primary); + background: rgba(0, 255, 136, 0.05); + transform: translateY(-2px); +} + +.wizard-option.selected { + border-color: var(--color-primary); + background: rgba(0, 255, 136, 0.1); +} + +.wizard-option-title { + font-weight: 600; + margin-bottom: 0.5rem; + color: var(--color-text-primary); +} + +.wizard-option-description { + color: var(--color-text-secondary); + font-size: 0.875rem; +} + +.wizard-actions { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 2rem; +} + +.wizard-btn { + background: var(--color-primary); + border: none; + color: var(--color-bg-primary); + padding: 0.75rem 2rem; + border-radius: 8px; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; +} + +.wizard-btn:hover { + background: var(--color-primary-dark); + transform: translateY(-2px); +} + +.wizard-btn:disabled { + opacity: 0.5; + cursor: not-allowed; + transform: none; +} + +.wizard-btn-secondary { + background: transparent; + border: 1px solid var(--color-border); + color: var(--color-text-secondary); +} + +.wizard-btn-secondary:hover { + border-color: var(--color-primary); + color: var(--color-primary); + background: rgba(0, 255, 136, 0.05); +} + +/* ===== COMMUNITY & SOCIAL PROOF ===== */ + +/* Community Section */ +.community { + margin: 4rem 0; + padding: 4rem 0; + background: linear-gradient(135deg, rgba(0, 255, 136, 0.05), rgba(0, 102, 255, 0.05)); + border-radius: 20px; + position: relative; + overflow: hidden; +} + +.community::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: radial-gradient(circle at 20% 80%, rgba(0, 255, 136, 0.1) 0%, transparent 50%), + radial-gradient(circle at 80% 20%, rgba(0, 102, 255, 0.1) 0%, transparent 50%); +} + +.community-content { + position: relative; + z-index: 1; +} + +.community-header { + text-align: center; + margin-bottom: 4rem; +} + +.community-title { + font-size: 2.5rem; + font-weight: 700; + margin-bottom: 1rem; + background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.community-subtitle { + font-size: 1.25rem; + color: var(--color-text-secondary); + max-width: 600px; + margin: 0 auto; + line-height: 1.6; +} + +.community-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; + margin-bottom: 3rem; +} + +.community-card { + background: rgba(255, 255, 255, 0.02); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 16px; + padding: 2rem; + text-align: center; + transition: all 0.3s ease; + backdrop-filter: blur(10px); +} + +.community-card:hover { + transform: translateY(-8px); + border-color: var(--color-primary); + box-shadow: 0 20px 40px rgba(0, 255, 136, 0.1); +} + +.community-card-icon { + font-size: 3rem; + color: var(--color-primary); + margin-bottom: 1rem; +} + +.community-card-title { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 1rem; + color: var(--color-text-primary); +} + +.community-card-description { + color: var(--color-text-secondary); + margin-bottom: 1.5rem; + line-height: 1.6; +} + +.community-card-action { + background: var(--color-primary); + color: var(--color-bg-primary); + text-decoration: none; + padding: 0.75rem 1.5rem; + border-radius: 8px; + font-weight: 600; + display: inline-block; + transition: all 0.3s ease; +} + +.community-card-action:hover { + background: var(--color-primary-dark); + transform: translateY(-2px); +} + +/* Testimonials */ +.testimonials { + margin: 4rem 0; +} + +.testimonials-header { + text-align: center; + margin-bottom: 3rem; +} + +.testimonials-title { + font-size: 2.5rem; + font-weight: 700; + margin-bottom: 1rem; + background: linear-gradient(135deg, var(--color-secondary), var(--color-accent)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.testimonials-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); + gap: 2rem; +} + +.testimonial { + background: var(--color-bg-secondary); + border: 1px solid var(--color-border); + border-radius: 16px; + padding: 2rem; + position: relative; + transition: all 0.3s ease; +} + +.testimonial::before { + content: '"'; + position: absolute; + top: -10px; + left: 20px; + font-size: 4rem; + color: var(--color-primary); + opacity: 0.3; + font-family: serif; +} + +.testimonial:hover { + transform: translateY(-4px); + border-color: var(--color-primary); + box-shadow: 0 20px 40px rgba(0, 255, 136, 0.1); +} + +.testimonial-content { + margin-bottom: 1.5rem; + font-style: italic; + color: var(--color-text-primary); + line-height: 1.7; + font-size: 1.1rem; +} + +.testimonial-author { + display: flex; + align-items: center; +} + +.testimonial-avatar { + width: 50px; + height: 50px; + border-radius: 50%; + margin-right: 1rem; + border: 2px solid var(--color-primary); +} + +.testimonial-info { + flex: 1; +} + +.testimonial-name { + font-weight: 600; + color: var(--color-text-primary); + margin-bottom: 0.25rem; +} + +.testimonial-role { + color: var(--color-text-secondary); + font-size: 0.875rem; +} + +/* Project Showcase */ +.project-showcase { + margin: 4rem 0; +} + +.showcase-header { + text-align: center; + margin-bottom: 3rem; +} + +.showcase-title { + font-size: 2.5rem; + font-weight: 700; + margin-bottom: 1rem; + background: linear-gradient(135deg, var(--color-accent), var(--color-secondary)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.showcase-filters { + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 1rem; + margin-bottom: 3rem; +} + +.showcase-filter { + background: transparent; + border: 1px solid var(--color-border); + color: var(--color-text-secondary); + padding: 0.5rem 1.5rem; + border-radius: 25px; + cursor: pointer; + transition: all 0.3s ease; + font-weight: 500; +} + +.showcase-filter.active, +.showcase-filter:hover { + border-color: var(--color-primary); + color: var(--color-primary); + background: rgba(0, 255, 136, 0.1); +} + +.showcase-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); + gap: 2rem; +} + +.showcase-project { + background: var(--color-bg-secondary); + border: 1px solid var(--color-border); + border-radius: 16px; + overflow: hidden; + transition: all 0.3s ease; + position: relative; +} + +.showcase-project:hover { + transform: translateY(-8px); + border-color: var(--color-primary); + box-shadow: 0 20px 40px rgba(0, 255, 136, 0.1); +} + +.showcase-project-image { + width: 100%; + height: 200px; + background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); + display: flex; + align-items: center; + justify-content: center; + font-size: 3rem; + color: var(--color-bg-primary); + position: relative; + overflow: hidden; +} + +.showcase-project-image::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%); + transform: translateX(-100%); + transition: transform 0.6s ease; +} + +.showcase-project:hover .showcase-project-image::before { + transform: translateX(100%); +} + +.showcase-project-content { + padding: 2rem; +} + +.showcase-project-title { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 0.5rem; + color: var(--color-text-primary); +} + +.showcase-project-description { + color: var(--color-text-secondary); + margin-bottom: 1.5rem; + line-height: 1.6; +} + +.showcase-project-tags { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin-bottom: 1.5rem; +} + +.showcase-project-tag { + background: rgba(0, 255, 136, 0.1); + color: var(--color-primary); + padding: 0.25rem 0.75rem; + border-radius: 12px; + font-size: 0.75rem; + font-weight: 500; +} + +.showcase-project-links { + display: flex; + gap: 1rem; +} + +.showcase-project-link { + color: var(--color-primary); + text-decoration: none; + font-weight: 500; + display: flex; + align-items: center; + transition: all 0.3s ease; +} + +.showcase-project-link:hover { + color: var(--color-primary-dark); + transform: translateY(-2px); +} + +.showcase-project-link i { + margin-right: 0.5rem; +} + +/* ===== RESPONSIVE DESIGN ===== */ + +@media (max-width: 768px) { + .reference-grid { + grid-template-columns: 1fr; + } + + .api-tabs { + flex-wrap: wrap; + justify-content: flex-start; + } + + .api-tab { + padding: 0.75rem 1rem; + font-size: 0.875rem; + } + + .wizard-container { + padding: 2rem 1rem; + } + + .wizard-progress { + flex-wrap: wrap; + gap: 1rem; + } + + .community-grid { + grid-template-columns: 1fr; + } + + .testimonials-grid { + grid-template-columns: 1fr; + } + + .showcase-grid { + grid-template-columns: 1fr; + } + + .showcase-filters { + justify-content: flex-start; + } +} + +/* ===== ANIMATIONS ===== */ + +@keyframes slideInRight { + from { + opacity: 0; + transform: translateX(30px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +/* ===== PERFORMANCE OPTIMIZATIONS ===== */ + +/* Critical rendering path optimizations */ +.reference-card, +.api-panel, +.wizard-panel, +.community-card, +.testimonial, +.showcase-project { + contain: layout style paint; +} + +/* GPU acceleration for animations */ +.reference-card, +.community-card, +.testimonial, +.showcase-project { + will-change: transform; +} + +.reference-card:not(:hover), +.community-card:not(:hover), +.testimonial:not(:hover), +.showcase-project:not(:hover) { + will-change: auto; +} diff --git a/site/demos/advanced-features.gif b/site/demos/advanced-features.gif new file mode 100644 index 0000000..a4e6efe Binary files /dev/null and b/site/demos/advanced-features.gif differ diff --git a/site/demos/basic-usage.gif b/site/demos/basic-usage.gif new file mode 100644 index 0000000..41ad376 Binary files /dev/null and b/site/demos/basic-usage.gif differ diff --git a/site/demos/install.gif b/site/demos/install.gif new file mode 100644 index 0000000..45a7d5e Binary files /dev/null and b/site/demos/install.gif differ diff --git a/site/demos/mappings-demo.gif b/site/demos/mappings-demo.gif new file mode 100644 index 0000000..38d537f Binary files /dev/null and b/site/demos/mappings-demo.gif differ diff --git a/site/demos/multiple-mappings.gif b/site/demos/multiple-mappings.gif new file mode 100644 index 0000000..b8361a7 Binary files /dev/null and b/site/demos/multiple-mappings.gif differ diff --git a/site/demos/remote-content.gif b/site/demos/remote-content.gif new file mode 100644 index 0000000..a6a3ef2 Binary files /dev/null and b/site/demos/remote-content.gif differ diff --git a/site/demos/schema-generation.gif b/site/demos/schema-generation.gif new file mode 100644 index 0000000..1210687 Binary files /dev/null and b/site/demos/schema-generation.gif differ diff --git a/site/demos/yaml-config.gif b/site/demos/yaml-config.gif new file mode 100644 index 0000000..a478182 Binary files /dev/null and b/site/demos/yaml-config.gif differ diff --git a/site/images/favicon.svg b/site/images/favicon.svg new file mode 100644 index 0000000..f6e9ecc --- /dev/null +++ b/site/images/favicon.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/site/index.html b/site/index.html index 41c6b43..a16a407 100644 --- a/site/index.html +++ b/site/index.html @@ -12,109 +12,100 @@ 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-M4X52F2D'); + STRUCT - Automated Project Structure Generator + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + max-width: 800px; --> @@ -122,44 +113,491 @@ -
-

STRUCT

-

Automated Project Structure Generator

-
-
-

- Welcome to the official website of STRUCT. Generate your project structures effortlessly using YAML - configurations. -

- -
-

Features

-
+ + +
+ + + +
+
+

STRUCT

+

+ Powerful, flexible tool for automating project structure creation through YAML configurations. + Generate consistent project layouts, boilerplate code, and configurations with template variables. +

+ +
+
+ + +
+
+
+ +
+
+
+ + +
+
+

✨ Key Features

+
+
+
📝
+

YAML-Based Configuration

+

+ Define project structures in simple, readable YAML files with intuitive syntax and validation. +

+
+
+
🔧
+

Template Variables

+

+ Dynamic content with Jinja2 templating, interactive prompts, and custom filters for flexibility. +

+
+
+
🌐
+

Remote Content

+

+ Fetch files from GitHub, HTTP/HTTPS, S3, and Google Cloud Storage with automatic content handling. +

+
+
+
🛡️
+

Smart File Handling

+

+ Multiple strategies for managing existing files: overwrite, skip, backup, append, and more. +

+
+
+
🪝
+

Automation Hooks

+

+ Pre and post-generation shell commands for complete workflow automation and integration. +

+
+
+
🎯
+

Dry Run Mode

+

+ Preview changes before applying them with detailed output and validation checks. +

+
+
+
+
+ + +
+
+

🚀 Quick Installation

+
+
+ + + +
+
+
+

Install via pip

+
+ +
# Install from GitHub
+pip install git+https://github.com/httpdss/struct.git
+
+# Verify installation
+struct --version
+
+

+ Requires Python 3.8+ and pip. This is the recommended installation method for most users. +

+
+
+

Run with Docker

+
+ +
# Pull and run with Docker
+docker run -v $(pwd):/workdir ghcr.io/httpdss/struct:main generate my-config.yaml ./output
+
+# Create an alias for easier usage
+alias struct='docker run -v $(pwd):/workdir ghcr.io/httpdss/struct:main'
+
+

+ Perfect for CI/CD environments and when you don't want to install Python locally. +

+
+
+

Install from Source

+
+ +
# Clone the repository
+git clone https://github.com/httpdss/struct.git
+cd struct
+
+# Install in development mode
+pip install -e .
+
+# Run tests
+python -m pytest tests/
+
+

+ For contributors and users who want the latest development features. +

+
+
+
+
+
+ + +
+
+

🎬 Interactive Demos

+ +
+
+ + +
+
+

⚡ Quick Start

+
+
+
+

1. Create Configuration

+
+
+
+ +
# my-project.yaml
+files:
+  - README.md:
+      content: |
+        # {{@ project_name @}}
+        Generated with STRUCT
+
+folders:
+  - src/:
+      struct: project/python
+
+variables:
+  - project_name:
+      description: "Project name"
+      type: string
+
+
+
+
+
+

2. Generate Project

+
+
+
+ +
# Generate structure
+struct generate my-project.yaml ./my-app
 
-    
- - Visit GitHub Repository - +# List available structures +struct list - - Donate via PayPal - +# Validate configuration +struct validate my-project.yaml
+
+
+
+
+
+
+ + +
+
+
+ +
+
+
+ + +
+
+
+ +
+
+
+
+
+

📚 Documentation

+
+
+
+

+ + Getting Started +

+
+
+

+ Installation guides, quick start tutorials, and basic usage examples to get you up and running. +

+
+ +
+
+
+

+ + Configuration +

+
+
+

+ Complete YAML configuration reference, template variables, and file handling strategies. +

+
+ +
+
+
+

+ + Examples +

+
+
+

+ Real-world examples, templates, and practical use cases for various project types. +

+
+ +
+
+
+
+ + + + +
+
+
+

Quick Reference

+

Essential STRUCT commands and configuration patterns at your fingertips

+
+
+ +
+
+
+ + +
+
+
+

API Reference

+

Comprehensive documentation for all STRUCT features and commands

+
+
+ +
+
+
+ + +
+
+
+

Getting Started Wizard

+

Generate your first STRUCT configuration in minutes

+
+
+
+ +
+
+
+
+ + +
+
+
+

Join Our Community

+

Connect with developers using STRUCT to build amazing projects

+
+
+ +
+
+
+ + +
+
+
+

What Developers Say

+

Real feedback from teams using STRUCT in production

+
+
+ +
+
+
+ + +
+
+
+

Built with STRUCT

+

Discover projects and templates created by the community

+
+
+ +
+
+ +
+
+
+ + +