feat: PC1 scaffolding Astro 6 + Vue islands + Tailwind 4 + Embla swipe
Initial structure for page-cerveau: - Astro 6.3.1 + @astrojs/vue 6.0.1 + Vue 3.5 - Tailwind 4 via @tailwindcss/vite (vs Tailwind 3.4 in prompt; @astrojs/tailwind incompatible with Astro 6 peer deps) - Embla Carousel Vue for mobile swipe (3 strict positions) - src/components/astro/ : 5 placeholder components (Col*, HamburgerMenu, PopupOnboarding) - src/components/vue/ : SwipeContainer + 3 placeholder islands - src/layouts/BaseLayout.astro - src/pages/index.astro (3 cols desktop ; SwipeContainer mobile) + manifeste.astro placeholder - public/data/ ready for PC3 (carte-o.json) + PC6 (journal.json) Build OK (0 errors, 0 warnings); dev server tested localhost:4321 with all components rendering. Note: Astro version is 6.3.1 (latest stable) instead of 5.x specified in prompt; 6.x is current LTS.
This commit is contained in:
11
src/components/astro/ColCentre.astro
Normal file
11
src/components/astro/ColCentre.astro
Normal file
@@ -0,0 +1,11 @@
|
||||
---
|
||||
// Placeholder Centre : HAUT mindmap AEP (PC3) ; BAS iframe carte AEP (PC4)
|
||||
---
|
||||
<div class="h-full grid grid-rows-2 gap-2 p-2">
|
||||
<section class="border border-dashed border-neutral-300 rounded flex items-center justify-center">
|
||||
<p class="text-sm text-neutral-400">Mindmap AEP — PC3</p>
|
||||
</section>
|
||||
<section class="border border-dashed border-neutral-300 rounded flex items-center justify-center">
|
||||
<p class="text-sm text-neutral-400">Iframe carte AEP — PC4</p>
|
||||
</section>
|
||||
</div>
|
||||
12
src/components/astro/ColInsta.astro
Normal file
12
src/components/astro/ColInsta.astro
Normal file
@@ -0,0 +1,12 @@
|
||||
---
|
||||
// Placeholder Insta : 2 carrousels @aep + @julesneny — PC5 oEmbed
|
||||
---
|
||||
<section class="h-full p-4 flex flex-col gap-4">
|
||||
<h2 class="text-lg font-semibold text-neutral-700">Insta</h2>
|
||||
<div class="border border-dashed border-neutral-300 rounded p-3 flex-1 flex items-center justify-center">
|
||||
<p class="text-sm text-neutral-400">@aep carrousel — PC5</p>
|
||||
</div>
|
||||
<div class="border border-dashed border-neutral-300 rounded p-3 flex-1 flex items-center justify-center">
|
||||
<p class="text-sm text-neutral-400">@julesneny carrousel — PC5</p>
|
||||
</div>
|
||||
</section>
|
||||
14
src/components/astro/ColJournal.astro
Normal file
14
src/components/astro/ColJournal.astro
Normal file
@@ -0,0 +1,14 @@
|
||||
---
|
||||
// Placeholder Journal — PC6 remplit avec entries chrono
|
||||
---
|
||||
<section class="h-full p-4 flex flex-col gap-3">
|
||||
<h2 class="text-lg font-semibold text-neutral-700">Journal</h2>
|
||||
<ul class="flex flex-col gap-2 text-sm text-neutral-500">
|
||||
<li class="border border-dashed border-neutral-300 rounded p-2">Entry placeholder 1</li>
|
||||
<li class="border border-dashed border-neutral-300 rounded p-2">Entry placeholder 2</li>
|
||||
<li class="border border-dashed border-neutral-300 rounded p-2">Entry placeholder 3</li>
|
||||
<li class="border border-dashed border-neutral-300 rounded p-2">Entry placeholder 4</li>
|
||||
<li class="border border-dashed border-neutral-300 rounded p-2">Entry placeholder 5</li>
|
||||
</ul>
|
||||
<p class="text-xs text-neutral-400 mt-auto">Nav latérale + manifeste CTA — PC2</p>
|
||||
</section>
|
||||
12
src/components/astro/HamburgerMenu.astro
Normal file
12
src/components/astro/HamburgerMenu.astro
Normal file
@@ -0,0 +1,12 @@
|
||||
---
|
||||
// Placeholder hamburger menu — PC2 ajoute liens nav
|
||||
---
|
||||
<button
|
||||
type="button"
|
||||
class="fixed top-3 right-3 z-30 p-2 rounded bg-white/80 border border-neutral-200 shadow-sm"
|
||||
aria-label="Menu"
|
||||
>
|
||||
<span class="block w-5 h-0.5 bg-neutral-700 mb-1"></span>
|
||||
<span class="block w-5 h-0.5 bg-neutral-700 mb-1"></span>
|
||||
<span class="block w-5 h-0.5 bg-neutral-700"></span>
|
||||
</button>
|
||||
11
src/components/astro/PopupOnboarding.astro
Normal file
11
src/components/astro/PopupOnboarding.astro
Normal file
@@ -0,0 +1,11 @@
|
||||
---
|
||||
// Placeholder popup onboarding — PC2 fait l'animation et le contenu
|
||||
---
|
||||
<div
|
||||
id="pc-onboarding"
|
||||
class="hidden fixed inset-0 z-40 bg-black/30 items-center justify-center"
|
||||
>
|
||||
<div class="bg-white p-6 rounded shadow-lg max-w-sm">
|
||||
<p class="text-sm text-neutral-600">Pop-up onboarding — PC2</p>
|
||||
</div>
|
||||
</div>
|
||||
9
src/components/vue/CarteO.vue
Normal file
9
src/components/vue/CarteO.vue
Normal file
@@ -0,0 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
// Placeholder Carte O — PC3 implémente avec D3 + GraphView porté de nav-carte
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="h-full w-full flex items-center justify-center text-sm text-neutral-400">
|
||||
Carte O placeholder (PC3)
|
||||
</div>
|
||||
</template>
|
||||
9
src/components/vue/ChatbotPlaceholder.vue
Normal file
9
src/components/vue/ChatbotPlaceholder.vue
Normal file
@@ -0,0 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
// Placeholder chatbot — PC7 branche endpoint API
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="h-full w-full flex items-center justify-center text-sm text-neutral-400">
|
||||
Chatbot placeholder (PC7)
|
||||
</div>
|
||||
</template>
|
||||
9
src/components/vue/JournalList.vue
Normal file
9
src/components/vue/JournalList.vue
Normal file
@@ -0,0 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
// Placeholder journal list — PC6 lit public/data/journal.json
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="h-full w-full flex items-center justify-center text-sm text-neutral-400">
|
||||
Journal list placeholder (PC6)
|
||||
</div>
|
||||
</template>
|
||||
102
src/components/vue/SwipeContainer.vue
Normal file
102
src/components/vue/SwipeContainer.vue
Normal file
@@ -0,0 +1,102 @@
|
||||
<script setup lang="ts">
|
||||
import emblaCarouselVue from 'embla-carousel-vue';
|
||||
import { ref, onMounted } from 'vue';
|
||||
|
||||
const [emblaRef, emblaApi] = emblaCarouselVue({
|
||||
loop: false,
|
||||
align: 'center',
|
||||
containScroll: 'trimSnaps',
|
||||
startIndex: 1,
|
||||
dragFree: false,
|
||||
});
|
||||
|
||||
const selectedIndex = ref(1);
|
||||
const handlesVisible = ref(true);
|
||||
let fadeTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
const resetFade = () => {
|
||||
handlesVisible.value = true;
|
||||
if (fadeTimer) clearTimeout(fadeTimer);
|
||||
fadeTimer = setTimeout(() => {
|
||||
handlesVisible.value = false;
|
||||
}, 3000);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (!emblaApi.value) return;
|
||||
emblaApi.value.on('select', () => {
|
||||
if (!emblaApi.value) return;
|
||||
selectedIndex.value = emblaApi.value.selectedScrollSnap();
|
||||
sessionStorage.setItem('pc-position', String(selectedIndex.value));
|
||||
resetFade();
|
||||
});
|
||||
const saved = sessionStorage.getItem('pc-position');
|
||||
if (saved !== null) {
|
||||
const idx = Number(saved);
|
||||
if (!Number.isNaN(idx)) emblaApi.value.scrollTo(idx, false);
|
||||
}
|
||||
resetFade();
|
||||
});
|
||||
|
||||
const scrollTo = (idx: number) => {
|
||||
emblaApi.value?.scrollTo(idx);
|
||||
resetFade();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative h-full" @pointerdown="resetFade" @touchstart="resetFade">
|
||||
<div ref="emblaRef" class="embla h-full overflow-hidden">
|
||||
<div class="embla__container flex h-full">
|
||||
<div class="embla__slide flex-[0_0_100%] h-full overflow-y-auto">
|
||||
<slot name="left" />
|
||||
</div>
|
||||
<div class="embla__slide flex-[0_0_100%] h-full overflow-y-auto">
|
||||
<slot name="center" />
|
||||
</div>
|
||||
<div class="embla__slide flex-[0_0_100%] h-full overflow-y-auto">
|
||||
<slot name="right" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
v-if="selectedIndex !== 0"
|
||||
type="button"
|
||||
:class="[
|
||||
'absolute left-2 top-1/2 -translate-y-1/2 p-2 bg-white/70 rounded-full shadow transition-opacity duration-300',
|
||||
handlesVisible ? 'opacity-100' : 'opacity-0',
|
||||
]"
|
||||
aria-label="Panneau gauche"
|
||||
@click="scrollTo(selectedIndex - 1)"
|
||||
>
|
||||
←
|
||||
</button>
|
||||
<button
|
||||
v-if="selectedIndex !== 2"
|
||||
type="button"
|
||||
:class="[
|
||||
'absolute right-2 top-1/2 -translate-y-1/2 p-2 bg-white/70 rounded-full shadow transition-opacity duration-300',
|
||||
handlesVisible ? 'opacity-100' : 'opacity-0',
|
||||
]"
|
||||
aria-label="Panneau droit"
|
||||
@click="scrollTo(selectedIndex + 1)"
|
||||
>
|
||||
→
|
||||
</button>
|
||||
|
||||
<div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 z-10">
|
||||
<button
|
||||
v-for="i in 3"
|
||||
:key="i"
|
||||
type="button"
|
||||
:class="[
|
||||
'w-2 h-2 rounded-full transition-colors',
|
||||
selectedIndex === i - 1 ? 'bg-neutral-900' : 'bg-neutral-400',
|
||||
]"
|
||||
:aria-label="`Position ${i}`"
|
||||
@click="scrollTo(i - 1)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user