valentin_le_moign/mahee-auffret
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

middleware proxy api et optimisation ssg

Browse Source
This commit is contained in:
Valentin
2024-04-06 00:46:44 +02:00
parent 348071e591
commit 13d6b3682d
11 changed files with 211 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
components/Projects.vue
View File

@@ -2,14 +2,11 @@
<main>
<article v-for="content in contents" :key="content.id">
<div>
<NuxtImg
:src="img((content.image ? content.image : content.shop_image))"
<img
:src="`/api/assets/${content.image ? content.image : content.shop_image}.webp`"
:alt="content.titre"
format="webp"
placeholder
lazy
sizes="sm:40vw lg:30vw"
@click="displaySlider(content.id)" />
@click="displaySlider(content.id)"
/>
</div>
<div>
<p v-if="content.titre">{{ content.titre }}</p>
@@ -30,12 +27,10 @@
>
<swiper-slide v-for="content in contents" :key="content.id">
<div class="swiper-zoom-container">
<NuxtImg
:src="img((content.image ? content.image : content.shop_image))"
<img
:src="`/api/assets/${content.image ? content.image : content.shop_image}.webp`"
:alt="content.titre"
format="webp"
placeholder
lazy />
/>
</div>
</swiper-slide>
<div class="swiper-button-close" @click="closeSlider()"></div>
@@ -51,8 +46,6 @@ import 'swiper/css/zoom';
export default {
setup() {
const { getThumbnail : img } = useDirectusFiles();
const swiperInstance = ref(null);
const onSwiper = (swiper) => {
swiperInstance.value = swiper;
@@ -73,11 +66,11 @@ export default {
const closeSlider = () => {
const body = document.querySelector('body');
body.style.overflowY = 'auto';
const swiperEl = document.querySelector('.swiper');
swiperEl.style.opacity = 0;
setTimeout(() => {
swiperEl.style.display = "none";
body.style.overflowY = 'auto';
}, 300);
}
@@ -87,7 +80,6 @@ export default {
modules: [Navigation, A11y, Zoom],
displaySlider,
closeSlider,
img
};
},
components: {