✨ Story 5.7: liens contact secondaires
This commit is contained in:
@@ -4,6 +4,7 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
initMobileMenu();
|
||||
initNavbarScroll();
|
||||
initEmailProtection();
|
||||
});
|
||||
|
||||
function initMobileMenu() {
|
||||
@@ -73,4 +74,18 @@ function initNavbarScroll() {
|
||||
navbar.classList.remove('shadow-lg');
|
||||
}
|
||||
}, { passive: true });
|
||||
}
|
||||
}
|
||||
|
||||
function initEmailProtection() {
|
||||
const emailLink = document.getElementById('email-link');
|
||||
if (!emailLink) return;
|
||||
|
||||
const user = emailLink.dataset.user;
|
||||
const domain = emailLink.dataset.domain;
|
||||
|
||||
if (user && domain) {
|
||||
const email = `${user}@${domain}`;
|
||||
emailLink.href = `mailto:${email}`;
|
||||
emailLink.title = email;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
## Status
|
||||
|
||||
Ready for Dev
|
||||
review
|
||||
|
||||
## Story
|
||||
|
||||
@@ -20,24 +20,24 @@ Ready for Dev
|
||||
|
||||
## Tasks / Subtasks
|
||||
|
||||
- [] **Task 1 : Ajouter la section dans contact.php** (AC: 1, 4)
|
||||
- [] Titre "Retrouvez-moi aussi sur"
|
||||
- [] Positionnement sous le formulaire (mt-16, pt-8, border-t)
|
||||
- [] Style distinct mais cohérent (bg-surface-alt, border)
|
||||
- [x] **Task 1 : Ajouter la section dans contact.php** (AC: 1, 4)
|
||||
- [x] Titre "Retrouvez-moi aussi sur"
|
||||
- [x] Positionnement sous le formulaire (mt-16, pt-8, border-t)
|
||||
- [x] Style distinct mais cohérent (bg-surface-alt, border)
|
||||
|
||||
- [] **Task 2 : Ajouter les liens avec icônes** (AC: 2)
|
||||
- [] LinkedIn avec icône SVG (#0A66C2)
|
||||
- [] GitHub avec icône SVG
|
||||
- [] Email avec icône SVG (primary)
|
||||
- [x] **Task 2 : Ajouter les liens avec icônes** (AC: 2)
|
||||
- [x] LinkedIn avec icône SVG (#0A66C2)
|
||||
- [x] GitHub avec icône SVG
|
||||
- [x] Email avec icône SVG (primary)
|
||||
|
||||
- [] **Task 3 : Configurer les liens** (AC: 3)
|
||||
- [] `target="_blank"` + `rel="noopener noreferrer"` pour LinkedIn/GitHub
|
||||
- [] `mailto:` généré par JS pour l'email
|
||||
- [x] **Task 3 : Configurer les liens** (AC: 3)
|
||||
- [x] `target="_blank"` + `rel="noopener noreferrer"` pour LinkedIn/GitHub
|
||||
- [x] `mailto:` généré par JS pour l'email
|
||||
|
||||
- [] **Task 4 : Protéger l'email** (AC: 5)
|
||||
- [] data-user et data-domain dans le HTML
|
||||
- [] initEmailProtection() dans main.js
|
||||
- [] Reconstruction du mailto au chargement
|
||||
- [x] **Task 4 : Protéger l'email** (AC: 5)
|
||||
- [x] data-user et data-domain dans le HTML
|
||||
- [x] initEmailProtection() dans main.js
|
||||
- [x] Reconstruction du mailto au chargement
|
||||
|
||||
## Dev Notes
|
||||
|
||||
@@ -181,22 +181,28 @@ $encodedEmail = encodeEmail($email);
|
||||
## Dev Agent Record
|
||||
|
||||
### Agent Model Used
|
||||
Claude Opus 4.5 (claude-opus-4-5-20251101)
|
||||
GPT-5 Codex
|
||||
|
||||
### Implementation Plan
|
||||
- Implémenter les tâches 1 à 4 dans l’ordre avec tests à chaque étape.
|
||||
- Ajouter section et protection email via main.js.
|
||||
|
||||
### File List
|
||||
| File | Action | Description |
|
||||
|------|--------|-------------|
|
||||
| `pages/contact.php` | Modified | Section liens secondaires (LinkedIn, GitHub, Email) |
|
||||
| `assets/js/main.js` | Modified | Ajout initEmailProtection() |
|
||||
| `tests/contact-links.test.php` | Added | Tests liens secondaires |
|
||||
| `tests/run.ps1` | Modified | Ajout du test contact-links |
|
||||
|
||||
### Completion Notes
|
||||
- Section "Retrouvez-moi aussi sur" avec 3 liens
|
||||
- LinkedIn : https://linkedin.com/in/celian-music (à personnaliser)
|
||||
- LinkedIn : https://linkedin.com/in/celian-music
|
||||
- GitHub : https://github.com/skycel
|
||||
- Email protégé : data-user/data-domain + reconstruction JS
|
||||
- Icônes SVG avec couleurs appropriées (LinkedIn bleu, GitHub inherit, Email primary)
|
||||
- Hover state : border-primary/50
|
||||
- target="_blank" + rel="noopener noreferrer" pour les liens externes
|
||||
- Tests : `powershell -ExecutionPolicy Bypass -File tests/run.ps1`
|
||||
|
||||
### Debug Log References
|
||||
Aucun problème rencontré.
|
||||
@@ -207,3 +213,4 @@ Aucun problème rencontré.
|
||||
|------|---------|-------------|--------|
|
||||
| 2026-01-22 | 0.1 | Création initiale | Sarah (PO) |
|
||||
| 2026-01-24 | 1.0 | Implémentation complète | James (Dev) |
|
||||
| 2026-02-04 | 1.1 | Liens secondaires contact | Amelia (Dev) |
|
||||
|
||||
@@ -176,6 +176,52 @@ include_template('navbar', compact('currentPage'));
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="mt-16 pt-8 border-t border-border">
|
||||
<h2 class="text-lg font-semibold text-center mb-6">Retrouvez-moi aussi sur</h2>
|
||||
|
||||
<div class="flex flex-wrap justify-center gap-6">
|
||||
<a
|
||||
href="https://linkedin.com/in/celian-music"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex items-center gap-3 px-6 py-3 bg-surface border border-border/50 rounded-lg hover:bg-surface-light hover:border-primary/50 transition-colors group"
|
||||
aria-label="Profil LinkedIn"
|
||||
>
|
||||
<svg class="w-6 h-6 text-[#0A66C2]" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
|
||||
</svg>
|
||||
<span class="font-medium text-text-primary group-hover:text-primary transition-colors">LinkedIn</span>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://github.com/skycel"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex items-center gap-3 px-6 py-3 bg-surface border border-border/50 rounded-lg hover:bg-surface-light hover:border-primary/50 transition-colors group"
|
||||
aria-label="Profil GitHub"
|
||||
>
|
||||
<svg class="w-6 h-6 text-text-primary" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
||||
</svg>
|
||||
<span class="font-medium text-text-primary group-hover:text-primary transition-colors">GitHub</span>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
id="email-link"
|
||||
class="flex items-center gap-3 px-6 py-3 bg-surface border border-border/50 rounded-lg hover:bg-surface-light hover:border-primary/50 transition-colors group"
|
||||
aria-label="Envoyer un email"
|
||||
data-user="contact"
|
||||
data-domain="codex.skycel.me"
|
||||
>
|
||||
<svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
<span class="font-medium text-text-primary group-hover:text-primary transition-colors">Email</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
23
tests/contact-links.test.php
Normal file
23
tests/contact-links.test.php
Normal file
@@ -0,0 +1,23 @@
|
||||
<?php
|
||||
function assertTrue($cond, $msg) {
|
||||
if (!$cond) {
|
||||
fwrite(STDERR, $msg . PHP_EOL);
|
||||
exit(1);
|
||||
}
|
||||
}
|
||||
|
||||
$content = file_get_contents(__DIR__ . '/../pages/contact.php');
|
||||
assertTrue(strpos($content, 'Retrouvez-moi aussi sur') !== false, 'missing section title');
|
||||
assertTrue(strpos($content, 'linkedin.com/in/') !== false, 'missing linkedin link');
|
||||
assertTrue(strpos($content, 'github.com/') !== false, 'missing github link');
|
||||
assertTrue(strpos($content, 'id="email-link"') !== false, 'missing email link');
|
||||
assertTrue(strpos($content, 'data-user=') !== false, 'missing data-user');
|
||||
assertTrue(strpos($content, 'data-domain=') !== false, 'missing data-domain');
|
||||
assertTrue(strpos($content, 'target="_blank"') !== false, 'missing target blank');
|
||||
assertTrue(strpos($content, 'rel="noopener') !== false, 'missing rel noopener');
|
||||
|
||||
$js = file_get_contents(__DIR__ . '/../assets/js/main.js');
|
||||
assertTrue(strpos($js, 'initEmailProtection') !== false, 'missing initEmailProtection');
|
||||
assertTrue(strpos($js, 'mailto:') !== false, 'missing mailto reconstruction');
|
||||
|
||||
fwrite(STDOUT, "OK\n");
|
||||
@@ -26,4 +26,5 @@ php (Join-Path $here 'contact-state.test.php')
|
||||
php (Join-Path $here 'recaptcha.test.php')
|
||||
php (Join-Path $here 'contact-api.test.php')
|
||||
php (Join-Path $here 'contact-submit.test.php')
|
||||
php (Join-Path $here 'contact-links.test.php')
|
||||
'OK'
|
||||
|
||||
Reference in New Issue
Block a user