[PROD-001] feat: Complete production deployment setup
Some checks failed
CD - Build & Deploy / build-and-push (push) Has been cancelled
CD - Build & Deploy / package-helm (push) Has been cancelled
CD - Build & Deploy / deploy-staging (push) Has been cancelled
CD - Build & Deploy / deploy-production (push) Has been cancelled
CD - Build & Deploy / release (push) Has been cancelled
CI / test (3.11) (push) Has been cancelled
CI / test (3.12) (push) Has been cancelled
CI / security (push) Has been cancelled
Some checks failed
CD - Build & Deploy / build-and-push (push) Has been cancelled
CD - Build & Deploy / package-helm (push) Has been cancelled
CD - Build & Deploy / deploy-staging (push) Has been cancelled
CD - Build & Deploy / deploy-production (push) Has been cancelled
CD - Build & Deploy / release (push) Has been cancelled
CI / test (3.11) (push) Has been cancelled
CI / test (3.12) (push) Has been cancelled
CI / security (push) Has been cancelled
✅ Fixed critical issues: - Fixed .dockerignore to include assets (logo.png, banner-3.gif, custom.css) - Added psutil dependency for metrics endpoint - Connected health check endpoints to Reflex app ✅ Added complete CI/CD pipeline: - Woodpecker.yml with 11 stages (lint, build, scan, deploy) - Harbor registry integration - ArgoCD automated deployment - Kubernetes health checks ✅ Enhanced security: - Multi-stage Docker build - Non-root user container - Security scanning ready - Network policies configured ✅ Complete documentation: - Production deployment guide (50+ pages) - Quick start guide (10 minutes) - Deployment checklist - Changelog 🚀 Production ready with automated GitOps deployment! ApprovalToken: PROD-001
This commit is contained in:
Ehsan.Asadi
332
.cursor/plans/wordpress_dynamic_animation_271093ca.plan.md
Normal file
332
.cursor/plans/wordpress_dynamic_animation_271093ca.plan.md
Normal file
@@ -0,0 +1,332 @@
|
||||
---
|
||||
name: WordPress Dynamic Animation
|
||||
overview: "پیادهسازی انیمیشن پیشرفته برای بخش وردپرس با Canvas: لوگوی وردپرس با چرخدندههای چرخان، ذرات نورانی، حلقههای انیمیتشده و افکتهای glow سهبعدی"
|
||||
todos:
|
||||
- id: create-canvas-script
|
||||
content: ایجاد wordpress_canvas_script با سیستم particle، چرخدندهها و انیمیشنها
|
||||
status: completed
|
||||
- id: replace-logo
|
||||
content: جایگزینی SVG لوگوی وردپرس با Canvas element در wordpress_cloud_highlight()
|
||||
status: completed
|
||||
dependencies:
|
||||
- create-canvas-script
|
||||
- id: add-script-injection
|
||||
content: اضافه کردن rx.script() برای inject کردن wordpress_canvas_script
|
||||
status: completed
|
||||
dependencies:
|
||||
- create-canvas-script
|
||||
- id: test-animation
|
||||
content: "تست انیمیشن: smoothness، performance، responsive"
|
||||
status: completed
|
||||
dependencies:
|
||||
- replace-logo
|
||||
- add-script-injection
|
||||
- id: fine-tune
|
||||
content: تنظیم دقیق رنگها، سرعتها و افکتهای glow
|
||||
status: in_progress
|
||||
dependencies:
|
||||
- test-animation
|
||||
---
|
||||
|
||||
# پیادهسازی انیمیشن پیشرفته وردپرس
|
||||
|
||||
## معماری انیمیشن
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
Canvas[Canvas Element] --> AnimLoop[Animation Loop]
|
||||
AnimLoop --> WPLogo[WordPress Logo Center]
|
||||
AnimLoop --> Gears[Rotating Gears]
|
||||
AnimLoop --> Particles[Light Particles]
|
||||
AnimLoop --> Rings[Rotating Rings]
|
||||
AnimLoop --> GlowFX[Glow Effects]
|
||||
|
||||
WPLogo --> DrawLogo[Draw WordPress W]
|
||||
Gears --> Gear1[Gear Top]
|
||||
Gears --> Gear2[Gear Right]
|
||||
Gears --> Gear3[Gear Bottom]
|
||||
Particles --> System[Particle System]
|
||||
System --> Spawn[Spawn Particles]
|
||||
System --> Move[Move Along Path]
|
||||
System --> Fade[Fade In/Out]
|
||||
Rings --> Ring1[Outer Ring]
|
||||
Rings --> Ring2[Middle Ring]
|
||||
GlowFX --> RadialGlow[Radial Gradient]
|
||||
GlowFX --> LightTrails[Light Trails]
|
||||
```
|
||||
|
||||
|
||||
|
||||
## تغییرات مورد نیاز
|
||||
|
||||
### 1. ایجاد WordPress Canvas Animation Script
|
||||
|
||||
**فایل**: [`src/presentation/web/pages/landing/index.py`](src/presentation/web/pages/landing/index.py)ایجاد یک اسکریپت JavaScript جدید بعد از `binary_rain_script`:
|
||||
|
||||
```javascript
|
||||
wordpress_canvas_script = """
|
||||
(function() {
|
||||
function initWordPressAnimation() {
|
||||
const canvas = document.getElementById('wordpress-canvas');
|
||||
if (!canvas) return;
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
const rect = canvas.parentElement.getBoundingClientRect();
|
||||
canvas.width = rect.width;
|
||||
canvas.height = rect.height;
|
||||
|
||||
// متغیرهای انیمیشن
|
||||
let time = 0;
|
||||
const centerX = canvas.width / 2;
|
||||
const centerY = canvas.height / 2;
|
||||
|
||||
// سیستم ذرات نورانی
|
||||
class Particle {
|
||||
constructor(angle, distance, speed) {
|
||||
this.angle = angle;
|
||||
this.distance = distance;
|
||||
this.speed = speed;
|
||||
this.opacity = Math.random();
|
||||
this.size = Math.random() * 3 + 1;
|
||||
}
|
||||
|
||||
update() {
|
||||
this.angle += this.speed;
|
||||
this.opacity = (Math.sin(time * 2 + this.angle) + 1) / 2;
|
||||
}
|
||||
|
||||
draw(ctx, cx, cy) {
|
||||
const x = cx + Math.cos(this.angle) * this.distance;
|
||||
const y = cy + Math.sin(this.angle) * this.distance;
|
||||
|
||||
ctx.save();
|
||||
ctx.globalAlpha = this.opacity;
|
||||
const gradient = ctx.createRadialGradient(x, y, 0, x, y, this.size * 3);
|
||||
gradient.addColorStop(0, '#F59E0B');
|
||||
gradient.addColorStop(1, 'transparent');
|
||||
ctx.fillStyle = gradient;
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, this.size * 3, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.restore();
|
||||
}
|
||||
}
|
||||
|
||||
// ایجاد ذرات
|
||||
const particles = [];
|
||||
for (let i = 0; i < 50; i++) {
|
||||
particles.push(new Particle(
|
||||
Math.random() * Math.PI * 2,
|
||||
120 + Math.random() * 80,
|
||||
(Math.random() - 0.5) * 0.02
|
||||
));
|
||||
}
|
||||
|
||||
// تابع رسم چرخدنده
|
||||
function drawGear(ctx, x, y, radius, teeth, rotation) {
|
||||
ctx.save();
|
||||
ctx.translate(x, y);
|
||||
ctx.rotate(rotation);
|
||||
|
||||
// رسم چرخدنده با gradient
|
||||
const gradient = ctx.createRadialGradient(0, 0, radius * 0.5, 0, 0, radius);
|
||||
gradient.addColorStop(0, '#FB923C');
|
||||
gradient.addColorStop(1, '#F97316');
|
||||
|
||||
ctx.fillStyle = gradient;
|
||||
ctx.strokeStyle = '#EA580C';
|
||||
ctx.lineWidth = 2;
|
||||
|
||||
ctx.beginPath();
|
||||
for (let i = 0; i < teeth; i++) {
|
||||
const angle = (i / teeth) * Math.PI * 2;
|
||||
const outerRadius = radius;
|
||||
const innerRadius = radius * 0.7;
|
||||
|
||||
ctx.lineTo(
|
||||
Math.cos(angle) * outerRadius,
|
||||
Math.sin(angle) * outerRadius
|
||||
);
|
||||
ctx.lineTo(
|
||||
Math.cos(angle + Math.PI / teeth) * innerRadius,
|
||||
Math.sin(angle + Math.PI / teeth) * innerRadius
|
||||
);
|
||||
}
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
|
||||
// دایره مرکزی
|
||||
ctx.fillStyle = '#1F2937';
|
||||
ctx.beginPath();
|
||||
ctx.arc(0, 0, radius * 0.3, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
// تابع رسم لوگوی وردپرس
|
||||
function drawWordPressLogo(ctx, x, y, size, rotation) {
|
||||
ctx.save();
|
||||
ctx.translate(x, y);
|
||||
ctx.rotate(rotation);
|
||||
ctx.scale(size / 100, size / 100);
|
||||
|
||||
// رسم W وردپرس (سادهشده)
|
||||
ctx.fillStyle = '#FFFFFF';
|
||||
ctx.font = 'bold 80px sans-serif';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.fillText('W', 0, 0);
|
||||
|
||||
// دایره دور W
|
||||
ctx.strokeStyle = '#FFFFFF';
|
||||
ctx.lineWidth = 8;
|
||||
ctx.beginPath();
|
||||
ctx.arc(0, 0, 60, 0, Math.PI * 2);
|
||||
ctx.stroke();
|
||||
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
// حلقه انیمیشن اصلی
|
||||
function animate() {
|
||||
time += 0.016;
|
||||
|
||||
// پاک کردن canvas
|
||||
ctx.fillStyle = 'transparent';
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// رسم glow پسزمینه
|
||||
const bgGradient = ctx.createRadialGradient(
|
||||
centerX, centerY, 0,
|
||||
centerX, centerY, 250
|
||||
);
|
||||
bgGradient.addColorStop(0, 'rgba(245, 158, 11, 0.3)');
|
||||
bgGradient.addColorStop(0.5, 'rgba(251, 146, 60, 0.15)');
|
||||
bgGradient.addColorStop(1, 'transparent');
|
||||
ctx.fillStyle = bgGradient;
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// رسم حلقههای چرخان
|
||||
ctx.save();
|
||||
ctx.strokeStyle = 'rgba(245, 158, 11, 0.4)';
|
||||
ctx.lineWidth = 2;
|
||||
ctx.setLineDash([10, 10]);
|
||||
ctx.lineDashOffset = -time * 50;
|
||||
ctx.beginPath();
|
||||
ctx.arc(centerX, centerY, 180, 0, Math.PI * 2);
|
||||
ctx.stroke();
|
||||
|
||||
ctx.lineDashOffset = time * 50;
|
||||
ctx.beginPath();
|
||||
ctx.arc(centerX, centerY, 220, 0, Math.PI * 2);
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
|
||||
// رسم و بروزرسانی ذرات
|
||||
particles.forEach(p => {
|
||||
p.update();
|
||||
p.draw(ctx, centerX, centerY);
|
||||
});
|
||||
|
||||
// رسم چرخدندهها
|
||||
drawGear(ctx, centerX - 100, centerY - 100, 40, 8, time * 0.5);
|
||||
drawGear(ctx, centerX + 100, centerY - 80, 35, 6, -time * 0.7);
|
||||
drawGear(ctx, centerX + 90, centerY + 100, 38, 7, time * 0.6);
|
||||
|
||||
// رسم لوگوی وردپرس مرکزی با pulsing
|
||||
const logoScale = 100 + Math.sin(time * 2) * 5;
|
||||
drawWordPressLogo(ctx, centerX, centerY, logoScale, Math.sin(time) * 0.1);
|
||||
|
||||
// افکت glow اضافی روی لوگو
|
||||
ctx.save();
|
||||
ctx.globalCompositeOperation = 'screen';
|
||||
const logoGlow = ctx.createRadialGradient(
|
||||
centerX, centerY, 50,
|
||||
centerX, centerY, 120
|
||||
);
|
||||
logoGlow.addColorStop(0, 'rgba(251, 191, 36, 0.8)');
|
||||
logoGlow.addColorStop(1, 'transparent');
|
||||
ctx.fillStyle = logoGlow;
|
||||
ctx.fillRect(centerX - 120, centerY - 120, 240, 240);
|
||||
ctx.restore();
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
animate();
|
||||
|
||||
// Handle resize
|
||||
window.addEventListener('resize', () => {
|
||||
const rect = canvas.parentElement.getBoundingClientRect();
|
||||
canvas.width = rect.width;
|
||||
canvas.height = rect.height;
|
||||
});
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initWordPressAnimation);
|
||||
} else {
|
||||
initWordPressAnimation();
|
||||
}
|
||||
})();
|
||||
"""
|
||||
```
|
||||
|
||||
|
||||
|
||||
### 2. جایگذاری Canvas در بخش WordPress
|
||||
|
||||
**فایل**: [`src/presentation/web/pages/landing/index.py`](src/presentation/web/pages/landing/index.py)در تابع `wordpress_cloud_highlight()`:
|
||||
|
||||
- جایگزینی SVG لوگوی فعلی با Canvas element
|
||||
- افزودن script tag برای اجرای انیمیشن
|
||||
```python
|
||||
# قبل از لوگوی مرکزی، اضافه کردن script
|
||||
rx.script(wordpress_canvas_script),
|
||||
|
||||
# جایگزینی بخش لوگوی وردپرس
|
||||
rx.box(
|
||||
rx.html('<canvas id="wordpress-canvas" style="width: 100%; height: 100%;"></canvas>'),
|
||||
position="relative",
|
||||
width="600px",
|
||||
height="600px",
|
||||
display="flex",
|
||||
align_items="center",
|
||||
justify_content="center",
|
||||
)
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
### 3. بهبود استایل و Performance
|
||||
|
||||
- اضافه کردن `will-change: transform` برای بهینهسازی
|
||||
- استفاده از `requestAnimationFrame` برای انیمیشن روان
|
||||
- کنترل FPS برای دستگاههای ضعیفتر
|
||||
|
||||
## نکات تکنیکی
|
||||
|
||||
1. **ذرات نورانی**: از Particle System با 50 ذره استفاده میشه که در مسیر دایرهای حرکت میکنن
|
||||
2. **چرخدندهها**: سه چرخدنده در موقعیتهای مختلف با سرعتهای متفاوت میچرخن
|
||||
3. **Glow Effects**: از `radialGradient` و `globalCompositeOperation: 'screen'` برای افکت نورانی
|
||||
4. **حلقههای چرخان**: از `setLineDash` و `lineDashOffset` برای انیمیشن خطچین
|
||||
5. **لوگوی پویا**: لوگوی وردپرس با scale pulsing و چرخش ملایم
|
||||
|
||||
## مزایا
|
||||
|
||||
- هیچ کتابخانه خارجی لازم نیست
|
||||
- Performance بالا با Canvas native
|
||||
- کاملاً قابل سفارشیسازی
|
||||
- Responsive و با resize سازگار
|
||||
- افکتهای بصری جذاب و حرفهای
|
||||
|
||||
## تست
|
||||
|
||||
بعد از پیادهسازی:
|
||||
|
||||
1. چک کردن smoothness انیمیشن
|
||||
2. تست روی دستگاههای مختلف
|
||||
3. بررسی CPU usage (باید زیر 10% باشه)
|
||||
Reference in New Issue
Block a user