Fix: champs camelCase + anglais, contact data, nettoyage debug
All checks were successful
Deploy / Deploy to Production (push) Successful in 15s
All checks were successful
Deploy / Deploy to Production (push) Successful in 15s
- Blueprint site.yml : renommage en camelCase (contactEmail, contactAddress, socialLinks, legalNotices) - Controller site.php : mentionsLegales() → legalNotices(), fix (string) casts pour la sérialisation JSON - state/site.svelte.js : ajout champ contact - Menu.svelte : nouveau composant dialog pour le menu overlay - Header.svelte : intégration Menu, animation hamburger CSS - router/index.js : suppression des console.log de debug Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
isUnknown
parent
cfdaf1a6e2
commit
3e9657430f
6 changed files with 296 additions and 16 deletions
|
|
@ -14,19 +14,19 @@ columns:
|
|||
status: listed
|
||||
- width: 1/2
|
||||
fields:
|
||||
contact_email:
|
||||
contactEmail:
|
||||
label: Email
|
||||
type: email
|
||||
width: 1/2
|
||||
translate: false
|
||||
contact_address:
|
||||
contactAddress:
|
||||
label: Adresse
|
||||
type: writer
|
||||
buttons: false
|
||||
nodes: false
|
||||
width: 1/2
|
||||
placeholder: 33 rue Jean Dupont
|
||||
social_links:
|
||||
socialLinks:
|
||||
label: Liens réseaux sociaux
|
||||
type: structure
|
||||
translate: false
|
||||
|
|
@ -55,7 +55,7 @@ columns:
|
|||
contact:
|
||||
type: fields
|
||||
fields:
|
||||
mentions_legales:
|
||||
legalNotices:
|
||||
label: Mentions légales (PDF)
|
||||
type: files
|
||||
max: 1
|
||||
|
|
|
|||
|
|
@ -24,6 +24,18 @@ return function ($page, $kirby, $site) {
|
|||
'name' => $l->name()
|
||||
];
|
||||
})->values(),
|
||||
'contact' => [
|
||||
'email' => (string)$site->contactEmail()->value(),
|
||||
'address' => (string)$site->contactAddress()->value(),
|
||||
'socials' => $site->socialLinks()->toStructure()->map(function($item) {
|
||||
return [
|
||||
'label' => (string)$item->label()->value(),
|
||||
'url' => (string)$item->url()->value(),
|
||||
'picto' => (string)$item->picto()->value(),
|
||||
];
|
||||
})->values(),
|
||||
'legalNotice' => $site->legalNotices()->toFile()?->url(),
|
||||
],
|
||||
'navigation' => $navPages->map(function($p) use ($kirby) {
|
||||
$titles = [];
|
||||
foreach ($kirby->languages() as $lang) {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import { navigation } from '@state/navigation.svelte'
|
||||
import { locale } from '@state/locale.svelte'
|
||||
import { slides } from '@state/slides.svelte'
|
||||
import Menu from '@components/layout/Menu.svelte'
|
||||
|
||||
const isMenuOpen = $derived(navigation.isMenuOpen)
|
||||
const currentLang = $derived(locale.current)
|
||||
|
|
@ -41,6 +42,7 @@
|
|||
onclick={toggleMenu}
|
||||
aria-label={isMenuOpen ? 'Fermer le menu' : 'Ouvrir le menu'}
|
||||
aria-expanded={isMenuOpen}
|
||||
aria-controls="main-menu"
|
||||
>
|
||||
<svg width="50" height="50" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="7" cy="7" r="2" fill="white" class="dot dot-tl" />
|
||||
|
|
@ -53,6 +55,8 @@
|
|||
</button>
|
||||
</nav>
|
||||
|
||||
<Menu />
|
||||
|
||||
<style>
|
||||
.navbar {
|
||||
width: 100%;
|
||||
|
|
|
|||
273
src/components/layout/Menu.svelte
Normal file
273
src/components/layout/Menu.svelte
Normal file
|
|
@ -0,0 +1,273 @@
|
|||
<script>
|
||||
import { navigation } from '@state/navigation.svelte'
|
||||
import { locale } from '@state/locale.svelte'
|
||||
import { slides } from '@state/slides.svelte'
|
||||
import { site } from '@state/site.svelte'
|
||||
|
||||
const isMenuOpen = $derived(navigation.isMenuOpen)
|
||||
const currentLang = $derived(locale.current)
|
||||
const activeId = $derived(slides.active?.id ?? 'home')
|
||||
const contact = $derived(site.contact)
|
||||
|
||||
let dialogEl = $state(null)
|
||||
|
||||
$effect(() => {
|
||||
if (!dialogEl) return
|
||||
if (isMenuOpen) {
|
||||
dialogEl.showModal()
|
||||
} else if (dialogEl.open) {
|
||||
dialogEl.close()
|
||||
}
|
||||
})
|
||||
|
||||
function handleCancel() {
|
||||
navigation.closeMenu()
|
||||
}
|
||||
|
||||
function handleNavClick() {
|
||||
navigation.closeMenu()
|
||||
// La navigation elle-même est gérée par le router via le <a href>
|
||||
}
|
||||
|
||||
function getTitle(slide) {
|
||||
return slide.titles?.[currentLang] || slide.title || slide.id
|
||||
}
|
||||
|
||||
const labels = {
|
||||
menu: { fr: 'MENU', en: 'MENU' },
|
||||
connect: { fr: 'CONNECT', en: 'CONNECT' },
|
||||
address: { fr: 'ADRESSE', en: 'LOCATION' },
|
||||
mail: { fr: 'MAIL', en: 'MAIL' },
|
||||
socials: { fr: 'RÉSEAUX', en: 'SOCIALS' },
|
||||
legal: { fr: 'MENTIONS LÉGALES', en: 'LEGAL NOTICE' },
|
||||
}
|
||||
|
||||
function t(key) {
|
||||
return labels[key]?.[currentLang] || labels[key]?.fr || key
|
||||
}
|
||||
</script>
|
||||
|
||||
<dialog
|
||||
bind:this={dialogEl}
|
||||
id="main-menu"
|
||||
class="menu golden-grid"
|
||||
aria-label="Menu principal"
|
||||
oncancel={handleCancel}
|
||||
>
|
||||
<div class="vertical-line-start"></div>
|
||||
<div class="vertical-line vertical-line-col8"></div>
|
||||
<div class="vertical-line-center"></div>
|
||||
<div class="vertical-line vertical-line-col14"></div>
|
||||
<div class="vertical-line-end"></div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="menu-list font-face-terminal" aria-label="Navigation principale">
|
||||
<p class="menu-title">{t('menu')}</p>
|
||||
<ol class="menu-nav-list font-face-danzza-bold">
|
||||
{#each slides.all as slide, i}
|
||||
<li class="menu-nav-item">
|
||||
<a
|
||||
href={slide.path}
|
||||
onclick={handleNavClick}
|
||||
class="menu-nav-link"
|
||||
class:active={activeId === slide.id}
|
||||
aria-current={activeId === slide.id ? 'page' : undefined}
|
||||
>
|
||||
<span class="menu-nav-number font-face-danzza-medium">
|
||||
{String(i + 1).padStart(2, '0')}
|
||||
</span>
|
||||
<span class="menu-nav-label">
|
||||
{getTitle(slide)}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<!-- Connect -->
|
||||
<aside class="menu-connect" aria-label="Contact">
|
||||
<p class="menu-connect-title">{t('connect')}</p>
|
||||
|
||||
{#if contact.address}
|
||||
<p class="menu-connect-label">{t('address')}</p>
|
||||
<p class="menu-connect-info">{@html contact.address}</p>
|
||||
{/if}
|
||||
|
||||
{#if contact.email}
|
||||
<p class="menu-connect-label">MAIL</p>
|
||||
<a href="mailto:{contact.email}" class="menu-connect-info menu-connect-email">
|
||||
{contact.email}
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
{#if contact.socials?.length}
|
||||
<p class="menu-connect-label">{t('socials')}</p>
|
||||
{#each contact.socials as social}
|
||||
<a href={social.url} class="menu-connect-info menu-connect-social" target="_blank" rel="noopener noreferrer">
|
||||
{social.label}
|
||||
</a>
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
{#if contact.legalNotice}
|
||||
<a
|
||||
href={contact.legalNotice}
|
||||
download
|
||||
class="menu-connect-legal"
|
||||
>
|
||||
{t('legal')}
|
||||
</a>
|
||||
{/if}
|
||||
</aside>
|
||||
</dialog>
|
||||
|
||||
<style>
|
||||
/* Dialog reset + full screen */
|
||||
dialog.menu {
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
max-width: 100vw;
|
||||
max-height: 100vh;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
color: white;
|
||||
}
|
||||
|
||||
dialog.menu::backdrop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Extra vertical lines positions */
|
||||
.vertical-line-col8 { grid-area: 1 / 8 / span 20 / span 1; }
|
||||
.vertical-line-col14 { grid-area: 1 / 14 / span 20 / span 1; }
|
||||
|
||||
/* Nav section */
|
||||
.menu-list {
|
||||
grid-area: 7/6 / span 8 / span 4;
|
||||
color: white;
|
||||
align-self: center;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
font-size: var(--font-size-title-hero);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.menu-nav-list {
|
||||
list-style: none;
|
||||
font-size: var(--font-size-title-main);
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
.menu-nav-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.menu-nav-link {
|
||||
display: block;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.menu-nav-number {
|
||||
display: block;
|
||||
font-size: var(--font-size-caption);
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
.menu-nav-label {
|
||||
display: block;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
text-transform: uppercase;
|
||||
color: transparent;
|
||||
-webkit-text-stroke: 0.5px white;
|
||||
transition: color 0.2s, -webkit-text-stroke 0.2s;
|
||||
}
|
||||
|
||||
.menu-nav-link.active .menu-nav-label,
|
||||
.menu-nav-link:hover .menu-nav-label {
|
||||
color: #04fea0;
|
||||
-webkit-text-stroke: 0px;
|
||||
}
|
||||
|
||||
/* Connect section */
|
||||
.menu-connect {
|
||||
grid-area: 9/14 / span 6 / span 4;
|
||||
font-size: var(--font-size-paragraph);
|
||||
text-align: left;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.menu-connect-title {
|
||||
font-family: "Danzza Bold", sans-serif;
|
||||
font-size: var(--font-size-title-section);
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.menu-connect-label {
|
||||
font-family: "Danzza Medium", sans-serif;
|
||||
text-transform: uppercase;
|
||||
margin-top: 0.8em;
|
||||
}
|
||||
|
||||
.menu-connect-info,
|
||||
.menu-connect-email,
|
||||
.menu-connect-social {
|
||||
display: block;
|
||||
font-size: var(--font-size-paragraph-small);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.menu-connect-legal {
|
||||
display: block;
|
||||
margin-top: 1em;
|
||||
font-family: "Danzza Medium", sans-serif;
|
||||
font-size: var(--font-size-paragraph-small);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
@media screen and (max-width: 700px) {
|
||||
.menu-list {
|
||||
font-size: var(--font-size-subtitle-mobile);
|
||||
grid-area: 6/4 / span 8 / span 8;
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
.menu-connect {
|
||||
font-size: var(--font-size-button-mobile);
|
||||
grid-area: 8/12 / span 8 / span 8;
|
||||
text-align: left;
|
||||
align-self: start;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.menu-connect-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-nav-list {
|
||||
font-size: var(--font-size-subtitle-mobile);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet */
|
||||
@media screen and (min-width: 701px) and (max-width: 912px) {
|
||||
.menu-list {
|
||||
font-size: var(--font-size-title-section-tablet);
|
||||
}
|
||||
|
||||
.menu-connect {
|
||||
font-size: var(--font-size-subtitle-tablet);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -16,29 +16,19 @@ async function loadSlide(path) {
|
|||
slides.setLoading(path, true);
|
||||
}
|
||||
|
||||
console.log(`[router] loadSlide: ${path}`);
|
||||
|
||||
try {
|
||||
const response = await fetch(`${path}.json`);
|
||||
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
||||
const data = await response.json();
|
||||
|
||||
console.log(`[router] fetch ok: ${path}`, {
|
||||
template: data.template,
|
||||
hasSite: !!data.site,
|
||||
navigation: data.site?.navigation,
|
||||
});
|
||||
|
||||
if (!siteInitialized && data.site) {
|
||||
site.set(data.site);
|
||||
locale.initialize(data.site.language, data.site.languages);
|
||||
slides.init(data.site.navigation);
|
||||
siteInitialized = true;
|
||||
console.log(`[router] slides initialized:`, slides.all.map(s => s.path));
|
||||
}
|
||||
|
||||
slides.setData(path, data);
|
||||
console.log(`[router] setData done: ${path}, slides loaded:`, slides.all.map(s => `${s.path}=${s.loaded}`));
|
||||
} catch (error) {
|
||||
console.error(`[router] Failed to load slide ${path}:`, error);
|
||||
slides.setLoading(path, false);
|
||||
|
|
@ -72,12 +62,10 @@ export function slideTo(path, { skipHistory = false } = {}) {
|
|||
|
||||
export async function initRouter() {
|
||||
const initialPath = normalizePath(window.location.pathname);
|
||||
console.log(`[router] initRouter, initialPath: ${initialPath}`);
|
||||
|
||||
await loadSlide(initialPath);
|
||||
|
||||
const idx = slides.getIndexByPath(initialPath);
|
||||
console.log(`[router] after initial load, idx=${idx}, slides.all.length=${slides.all.length}`);
|
||||
if (idx !== -1) {
|
||||
slides.setActiveIndex(idx);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ let language = $state('fr')
|
|||
let languages = $state([])
|
||||
let logo = $state(null)
|
||||
let navigation = $state([])
|
||||
let contact = $state({})
|
||||
|
||||
export const site = {
|
||||
get title() { return title },
|
||||
|
|
@ -12,6 +13,7 @@ export const site = {
|
|||
get languages() { return languages },
|
||||
get logo() { return logo },
|
||||
get navigation() { return navigation },
|
||||
get contact() { return contact },
|
||||
|
||||
set: (data) => {
|
||||
title = data.title || ''
|
||||
|
|
@ -20,5 +22,6 @@ export const site = {
|
|||
languages = data.languages || []
|
||||
logo = data.logo || null
|
||||
navigation = data.navigation || []
|
||||
contact = data.contact || {}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue