docs(03): create phase 3 plans — pages, components, Docker SSR
4 plans across 3 waves: shared components + deps (wave 1), pages landing/projects/detail + about/contact/fiverr/404 (wave 2), Dockerfile SSR + GA4 + docker-compose (wave 3). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,315 @@
|
||||
---
|
||||
phase: 03-pages-ship
|
||||
plan: 01
|
||||
type: execute
|
||||
wave: 1
|
||||
depends_on: []
|
||||
files_modified:
|
||||
- package.json
|
||||
- package-lock.json
|
||||
- app/data/site.ts
|
||||
- shared/types/index.ts
|
||||
- app/components/sections/HeroSection.vue
|
||||
- app/components/sections/ServicesSection.vue
|
||||
- app/components/sections/FeaturedProjectsSection.vue
|
||||
- app/components/sections/TestimonialsSection.vue
|
||||
- app/components/sections/FAQSection.vue
|
||||
- app/components/sections/CTASection.vue
|
||||
- app/components/ProjectCard.vue
|
||||
- app/components/TechBadge.vue
|
||||
- app/components/ProjectGallery.vue
|
||||
- app/components/ContactForm.vue
|
||||
- server/api/contact.post.ts
|
||||
- nuxt.config.ts
|
||||
- app/app.vue
|
||||
autonomous: true
|
||||
requirements:
|
||||
- COMP-01
|
||||
- COMP-02
|
||||
- COMP-03
|
||||
- COMP-04
|
||||
must_haves:
|
||||
truths:
|
||||
- "Gallery modal opens with UModal + UCarousel and thumbnails, keyboard nav works"
|
||||
- "Contact form validates with Zod, sends via nodemailer SMTP, shows UToast"
|
||||
- "FAQ accordion renders i18n content with UAccordion"
|
||||
- "Testimonials section renders all testimonials with UCard"
|
||||
- "Project cards link to detail pages with translated content"
|
||||
- "Site config data (contact, social, fiverr) is available as typed data"
|
||||
artifacts:
|
||||
- path: "app/components/ProjectGallery.vue"
|
||||
provides: "UModal + UCarousel gallery with thumbnails and keyboard nav"
|
||||
- path: "app/components/ContactForm.vue"
|
||||
provides: "UForm + Zod validated contact form"
|
||||
- path: "server/api/contact.post.ts"
|
||||
provides: "Nodemailer SMTP server route"
|
||||
- path: "app/components/sections/FAQSection.vue"
|
||||
provides: "UAccordion FAQ section"
|
||||
- path: "app/components/sections/TestimonialsSection.vue"
|
||||
provides: "Testimonials with UCard"
|
||||
key_links:
|
||||
- from: "app/components/ContactForm.vue"
|
||||
to: "server/api/contact.post.ts"
|
||||
via: "$fetch('/api/contact', { method: 'POST' })"
|
||||
pattern: "\\$fetch.*api/contact"
|
||||
- from: "app/components/ProjectGallery.vue"
|
||||
to: "UModal + UCarousel"
|
||||
via: "v-model:open + useTemplateRef"
|
||||
pattern: "UModal|UCarousel"
|
||||
---
|
||||
|
||||
<objective>
|
||||
Installer les dependances manquantes (nodemailer, zod), migrer la config site, et creer tous les composants partages reutilisables : sections landing (Hero, Services, FeaturedProjects, Testimonials, FAQ, CTA), ProjectCard, TechBadge, ProjectGallery (UModal+UCarousel), ContactForm (UForm+Zod+nodemailer), et la route serveur contact.
|
||||
|
||||
Purpose: Ces composants sont consommes par toutes les pages en Wave 2-3. Les construire d'abord evite la duplication et permet le parallelisme.
|
||||
Output: Composants dans app/components/, route serveur dans server/api/, dependances installees.
|
||||
</objective>
|
||||
|
||||
<execution_context>
|
||||
@C:\Users\minit\.claude\get-shit-done\workflows\execute-plan.md
|
||||
@C:\Users\minit\.claude\get-shit-done\templates\summary.md
|
||||
</execution_context>
|
||||
|
||||
<context>
|
||||
@.planning/PROJECT.md
|
||||
@.planning/ROADMAP.md
|
||||
@.planning/phases/03-pages-ship/03-CONTEXT.md
|
||||
@.planning/phases/03-pages-ship/03-RESEARCH.md
|
||||
|
||||
@app/data/projects.ts
|
||||
@app/data/testimonials.ts
|
||||
@app/data/faq.ts
|
||||
@app/data/techstack.ts
|
||||
@app/composables/useProjects.ts
|
||||
@shared/types/index.ts
|
||||
@src/config/site.ts
|
||||
@src/components/sections/HeroSection.vue
|
||||
@src/components/sections/ServicesSection.vue
|
||||
@src/components/TestimonialsSection.vue
|
||||
@src/components/ServiceFAQ.vue
|
||||
@src/components/ProjectCard.vue
|
||||
@src/components/TechBadge.vue
|
||||
@src/components/GalleryModal.vue
|
||||
@src/components/FiverrHero.vue
|
||||
@src/components/FiverrServiceCard.vue
|
||||
@app/app.vue
|
||||
@nuxt.config.ts
|
||||
|
||||
<interfaces>
|
||||
From shared/types/index.ts:
|
||||
```typescript
|
||||
export interface Project { id: string; title: string; description: string; longDescription?: string; image: string; technologies: string[]; category: string; date: string; featured?: boolean; buttons?: ProjectButton[]; gallery?: string[]; demoUrl?: string; githubUrl?: string; features?: string[] }
|
||||
export interface Technology { name: string; level: 'Beginner' | 'Intermediate' | 'Advanced'; image: string }
|
||||
export interface TechStack { programming: Technology[]; front: Technology[]; database: Technology[]; devtools: Technology[]; operating_systems: Technology[]; socials: Technology[] }
|
||||
export interface Testimonial { name: string; role: string; company: string; avatar: string; rating: number; content: string; date: string; platform: string; featured?: boolean; project_type: string; results?: string[] }
|
||||
export interface TestimonialsStats { totalReviews: number; averageRating: number; projectsCompleted: number }
|
||||
export interface FAQ { questionKey: string; answerKey: string; featuresKey?: string }
|
||||
```
|
||||
|
||||
From app/composables/useProjects.ts:
|
||||
```typescript
|
||||
export function useProjects(): { projects: ComputedRef<Project[]>; featuredProjects: ComputedRef<Project[]>; filterByCategory(cat: string): ComputedRef<Project[]>; search(query: Ref<string> | string): ComputedRef<Project[]>; findById(id: string): ComputedRef<Project | undefined> }
|
||||
```
|
||||
|
||||
From src/config/site.ts (to migrate):
|
||||
```typescript
|
||||
export interface SiteConfig { name: string; title: string; description: string; author: string; contact: ContactInfo; social: SocialLink[]; fiverr: FiverrConfig; url: string; seo: {...}; performance: {...} }
|
||||
export interface FiverrService { id: string; url: string; image: string; price: string }
|
||||
export interface FiverrConfig { profileUrl: string; services: FiverrService[] }
|
||||
export interface ContactInfo { email: string; phone: string; location: string }
|
||||
export interface SocialLink { name: string; url: string; icon: string; username?: string }
|
||||
```
|
||||
</interfaces>
|
||||
</context>
|
||||
|
||||
<tasks>
|
||||
|
||||
<task type="auto">
|
||||
<name>Task 1: Installer deps, migrer site config, ajouter UApp, configurer runtimeConfig SMTP</name>
|
||||
<files>package.json, package-lock.json, app/data/site.ts, shared/types/index.ts, nuxt.config.ts, app/app.vue</files>
|
||||
<action>
|
||||
1. Installer les dependances :
|
||||
```bash
|
||||
npm install nodemailer zod
|
||||
npm install --save-dev @types/nodemailer
|
||||
```
|
||||
|
||||
2. Creer `app/data/site.ts` en migrant le contenu de `src/config/site.ts`. Copier la structure exacte (siteConfig avec contact, social, fiverr, seo, performance). Ajuster les chemins images fiverr : remplacer `@/assets/images/fiverr/` par `/images/fiverr/` (images dans public/). Exporter `siteConfig` et les interfaces `SiteConfig`, `ContactInfo`, `SocialLink`, `FiverrService`, `FiverrConfig`.
|
||||
|
||||
3. Ajouter les interfaces manquantes dans `shared/types/index.ts` : `SiteConfig`, `ContactInfo`, `SocialLink`, `FiverrService`, `FiverrConfig` (ou les exporter depuis `app/data/site.ts` directement — au choix du plus simple).
|
||||
|
||||
4. Mettre a jour `nuxt.config.ts` pour ajouter le runtimeConfig SMTP prive (per D-11, D-13) :
|
||||
```typescript
|
||||
runtimeConfig: {
|
||||
smtpHost: '', // NUXT_SMTP_HOST
|
||||
smtpUser: '', // NUXT_SMTP_USER
|
||||
smtpPass: '', // NUXT_SMTP_PASS
|
||||
smtpTo: '', // NUXT_SMTP_TO
|
||||
public: {
|
||||
gtag: { id: '' },
|
||||
},
|
||||
},
|
||||
```
|
||||
IMPORTANT : les credentials SMTP dans la section privee, JAMAIS dans public (per RESEARCH.md Pitfall 4).
|
||||
|
||||
5. Mettre a jour `app/app.vue` pour wrapper avec `<UApp>` — requis pour que `useToast()` fonctionne (per D-10, RESEARCH.md Pitfall 1) :
|
||||
```vue
|
||||
<template>
|
||||
<UApp>
|
||||
<NuxtLayout>
|
||||
<NuxtPage />
|
||||
</NuxtLayout>
|
||||
</UApp>
|
||||
</template>
|
||||
```
|
||||
Conserver le `<script setup>` existant (useLocaleHead, useHead).
|
||||
</action>
|
||||
<verify>
|
||||
<automated>cd C:/Users/minit/Desktop/portfolio/portfolio && node -e "require('nodemailer'); require('zod'); console.log('deps OK')" && grep -q "smtpHost" nuxt.config.ts && grep -q "UApp" app/app.vue && echo "PASS"</automated>
|
||||
</verify>
|
||||
<done>nodemailer et zod installes, site config migree dans app/data/site.ts, runtimeConfig SMTP ajoute (section privee), app.vue wrappe avec UApp</done>
|
||||
</task>
|
||||
|
||||
<task type="auto">
|
||||
<name>Task 2: Creer les composants partages — sections landing + ProjectCard + TechBadge + ProjectGallery</name>
|
||||
<files>app/components/sections/HeroSection.vue, app/components/sections/ServicesSection.vue, app/components/sections/FeaturedProjectsSection.vue, app/components/sections/TestimonialsSection.vue, app/components/sections/FAQSection.vue, app/components/sections/CTASection.vue, app/components/ProjectCard.vue, app/components/TechBadge.vue, app/components/ProjectGallery.vue</files>
|
||||
<action>
|
||||
Migrer chaque composant depuis src/ vers app/components/ en utilisant Nuxt UI v3 et les auto-imports Nuxt. Pour chaque composant :
|
||||
- Remplacer les imports manuels (`import { useI18n } from '@/composables/useI18n'`) par les auto-imports Nuxt (`const { t } = useI18n()` direct)
|
||||
- Remplacer `RouterLink` par `NuxtLink`
|
||||
- Remplacer les classes CSS custom par du Tailwind + composants Nuxt UI
|
||||
- Remplacer `getImageUrl()` par `NuxtImg` avec `loading="lazy"` et `format="webp"`
|
||||
|
||||
**HeroSection.vue** (per D-02) : Texte seul — titre (`t('home.title')`), sous-titre (`t('home.subtitle')`), 3 boutons CTA (Projets, Fiverr, Contact) avec `UButton`. Pas d'image, pas d'animation.
|
||||
|
||||
**FeaturedProjectsSection.vue** (per D-03) : Utiliser `useProjects().featuredProjects` pour obtenir les 3 projets featured. Afficher avec `ProjectCard`. Titre et sous-titre via i18n.
|
||||
|
||||
**ServicesSection.vue** : Migrer les 4 cards services (webDev, mobileApps, optimization, maintenance) avec `UCard`. Icones via lucide icon names dans UIcon si dispo, sinon SVG inline.
|
||||
|
||||
**TestimonialsSection.vue** (per COMP-04) : Utiliser `UCard` pour chaque temoignage. Importer `testimonials` et `testimonialsStats` depuis `~/data/testimonials`. Props i18n pour titre, sous-titre, stats labels. Afficher rating avec etoiles, contenu, nom, role, date.
|
||||
|
||||
**FAQSection.vue** (per COMP-03, D-18) : Utiliser `UAccordion` avec `:items` array. Chaque item : `{ label: t(faq.questionKey), content: t(faq.answerKey), value: faq.questionKey }`. Props : `faqs: FAQ[]`, `title: string`, `subtitle: string`. Pattern exact du RESEARCH.md Pattern 4. Ajouter `type="single" collapsible`.
|
||||
|
||||
**CTASection.vue** : Section CTA finale avec titre, sous-titre et bouton UButton vers /contact. Tout i18n.
|
||||
|
||||
**ProjectCard.vue** : Migrer depuis src/. Utiliser `NuxtLink` vers `/project/${project.id}`. Afficher image avec `NuxtImg`, categorie traduite, titre traduit, description traduite, badges technologies (3 max + "+N"), bouton "Voir projet". Schema.org microdata conserve.
|
||||
|
||||
**TechBadge.vue** (per D-17) : Migrer depuis src/. Accepter `Technology | string` en prop. Lookup dans techStack pour resoudre les strings. Afficher image + nom + niveau optionnel. Utiliser `NuxtImg` pour les images tech.
|
||||
|
||||
**ProjectGallery.vue** (per D-05, D-06, D-07, COMP-01) : Nouveau composant utilisant UModal + UCarousel du RESEARCH.md Pattern 1. Implementation exacte :
|
||||
- Props : `gallery: string[]`, `projectTitle: string`
|
||||
- `isOpen` ref + `currentIndex` ref
|
||||
- `useTemplateRef('carousel')` pour acceder a `emblaApi`
|
||||
- `openGallery(index)` : set currentIndex, isOpen=true, `nextTick(() => carouselRef.value?.emblaApi?.scrollTo(index, true))`
|
||||
- `goTo(index)` : set currentIndex, scrollTo
|
||||
- Navigation clavier : `onMounted` keydown listener — ArrowRight/ArrowLeft/Escape (per D-07)
|
||||
- `onUnmounted` cleanup du listener
|
||||
- Template : `UModal v-model:open fullscreen` > `UCarousel ref="carousel" :items="gallery" arrows loop` > `NuxtImg :src="item"`
|
||||
- Thumbnails sous le carousel : boutons avec `NuxtImg :src="img" width="80" height="60"`, ring-2 ring-primary sur le courant (per D-06)
|
||||
- Expose `openGallery` via `defineExpose({ openGallery })` pour que la page parent puisse l'appeler
|
||||
</action>
|
||||
<verify>
|
||||
<automated>cd C:/Users/minit/Desktop/portfolio/portfolio && ls app/components/sections/HeroSection.vue app/components/sections/ServicesSection.vue app/components/sections/FeaturedProjectsSection.vue app/components/sections/TestimonialsSection.vue app/components/sections/FAQSection.vue app/components/sections/CTASection.vue app/components/ProjectCard.vue app/components/TechBadge.vue app/components/ProjectGallery.vue && echo "ALL FILES EXIST"</automated>
|
||||
</verify>
|
||||
<done>9 composants crees : 6 sections landing + ProjectCard + TechBadge + ProjectGallery avec UModal+UCarousel+thumbnails+keyboard nav</done>
|
||||
</task>
|
||||
|
||||
<task type="auto">
|
||||
<name>Task 3: Creer ContactForm + server route nodemailer SMTP</name>
|
||||
<files>app/components/ContactForm.vue, server/api/contact.post.ts</files>
|
||||
<action>
|
||||
**server/api/contact.post.ts** (per D-11, COMP-02) : Route serveur Nuxt avec nodemailer. Implementation exacte du RESEARCH.md Pattern 3 :
|
||||
```typescript
|
||||
import nodemailer from 'nodemailer'
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
const body = await readBody(event)
|
||||
const config = useRuntimeConfig(event)
|
||||
|
||||
// Validation cote serveur (per RESEARCH.md Security)
|
||||
const { name, email, message } = body
|
||||
if (!name || typeof name !== 'string' || name.length < 2 || name.length > 100) {
|
||||
throw createError({ statusCode: 400, message: 'Invalid name' })
|
||||
}
|
||||
if (!email || typeof email !== 'string' || !email.includes('@') || email.length > 200) {
|
||||
throw createError({ statusCode: 400, message: 'Invalid email' })
|
||||
}
|
||||
if (!message || typeof message !== 'string' || message.length < 10 || message.length > 5000) {
|
||||
throw createError({ statusCode: 400, message: 'Invalid message' })
|
||||
}
|
||||
|
||||
const transporter = nodemailer.createTransport({
|
||||
host: config.smtpHost,
|
||||
port: 465,
|
||||
secure: true,
|
||||
auth: { user: config.smtpUser, pass: config.smtpPass },
|
||||
})
|
||||
|
||||
await transporter.sendMail({
|
||||
from: `"Portfolio" <${config.smtpUser}>`,
|
||||
to: config.smtpTo,
|
||||
subject: `Contact portfolio - ${name}`,
|
||||
text: `De: ${name} <${email}>\n\n${message}`,
|
||||
html: `<p><strong>De:</strong> ${name} <${email}></p><p>${message.replace(/\n/g, '<br>')}</p>`,
|
||||
})
|
||||
|
||||
return { success: true }
|
||||
})
|
||||
```
|
||||
IMPORTANT : `server/` a la racine du projet (meme niveau que `app/`), PAS dans `app/server/` (per RESEARCH.md Pitfall 5).
|
||||
|
||||
**ContactForm.vue** (per D-08, D-09, D-10, COMP-02) : Implementation exacte du RESEARCH.md Pattern 2 :
|
||||
- Schema Zod : name min(2), email .email(), message min(10) — 3 champs seulement (per D-08)
|
||||
- State reactive `Partial<Schema>` avec name, email, message undefined
|
||||
- `useToast()` pour feedback (per D-10) — succes en vert, erreur en rouge
|
||||
- `$fetch('/api/contact', { method: 'POST', body: event.data })` sur submit
|
||||
- Loading state sur le bouton submit
|
||||
- Template : `UForm :schema :state @submit` > 3x `UFormField` > `UInput` pour nom/email + `UTextarea rows="5"` pour message > `UButton type="submit" :loading`
|
||||
- Labels i18n : `t('contact.form.name')`, `t('contact.form.email')`, `t('contact.form.message')`, `t('contact.form.submit')`
|
||||
- Toast messages i18n : `t('contact.form.success')`, `t('contact.form.error')`
|
||||
</action>
|
||||
<verify>
|
||||
<automated>cd C:/Users/minit/Desktop/portfolio/portfolio && ls server/api/contact.post.ts app/components/ContactForm.vue && grep -q "nodemailer" server/api/contact.post.ts && grep -q "UForm" app/components/ContactForm.vue && grep -q "zod" app/components/ContactForm.vue && echo "PASS"</automated>
|
||||
</verify>
|
||||
<done>ContactForm.vue cree avec UForm+Zod+UToast, server/api/contact.post.ts cree avec nodemailer SMTP + validation serveur</done>
|
||||
</task>
|
||||
|
||||
</tasks>
|
||||
|
||||
<threat_model>
|
||||
## Trust Boundaries
|
||||
|
||||
| Boundary | Description |
|
||||
|----------|-------------|
|
||||
| client -> server/api/contact.post.ts | Donnees formulaire non fiables traversent vers le serveur SMTP |
|
||||
|
||||
## STRIDE Threat Register
|
||||
|
||||
| Threat ID | Category | Component | Disposition | Mitigation Plan |
|
||||
|-----------|----------|-----------|-------------|-----------------|
|
||||
| T-03-01 | Spoofing | server/api/contact.post.ts | mitigate | Validation Zod cote client + validation longueur/type cote serveur dans readBody |
|
||||
| T-03-02 | Tampering | server/api/contact.post.ts HTML email | mitigate | Echapper le HTML dans le corps email — remplacer newlines par `<br>` mais ne pas injecter de HTML brut utilisateur |
|
||||
| T-03-03 | Information Disclosure | nuxt.config.ts runtimeConfig | mitigate | Credentials SMTP dans section privee runtimeConfig uniquement (jamais public) |
|
||||
| T-03-04 | Denial of Service | server/api/contact.post.ts | accept | Pas de rate limiting en Phase 3 — endpoint public, risque de spam faible pour un portfolio. Mitigation partielle : validation longueur message max 5000 chars |
|
||||
</threat_model>
|
||||
|
||||
<verification>
|
||||
- `npm run build` passe sans erreur TypeScript
|
||||
- `npx nuxi dev` demarre et les composants sont auto-importes
|
||||
- `curl -X POST http://localhost:3000/api/contact -H "Content-Type: application/json" -d '{"name":"Test","email":"test@test.com","message":"Test message long enough"}' ` retourne `{"success":true}` (avec .env SMTP configure) ou une erreur SMTP lisible
|
||||
</verification>
|
||||
|
||||
<success_criteria>
|
||||
- nodemailer et zod dans package.json dependencies
|
||||
- app/data/site.ts exporte siteConfig type
|
||||
- 9 composants sections/partages existent dans app/components/
|
||||
- ProjectGallery utilise UModal + UCarousel + thumbnails + keydown listener
|
||||
- ContactForm utilise UForm + Zod schema + useToast
|
||||
- server/api/contact.post.ts utilise nodemailer avec runtimeConfig prive
|
||||
- app.vue contient UApp wrapper
|
||||
- nuxt.config.ts contient smtpHost/smtpUser/smtpPass/smtpTo dans runtimeConfig (pas public)
|
||||
</success_criteria>
|
||||
|
||||
<output>
|
||||
After completion, create `.planning/phases/03-pages-ship/03-01-SUMMARY.md`
|
||||
</output>
|
||||
Reference in New Issue
Block a user