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

middleware proxy api et optimisation ssg

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
app.vue
View File

@ -5,34 +5,40 @@
</main>
</template>
<script setup>
const { getItems } = useDirectusItems();
const global = ref([]);
onMounted(async () => {
const items = await getItems({ collection: "global" });
global.value = items;
});
<script>
export default {
setup() {
const global = ref([]);
provide('globalData', global);
const { data, error } = useFetch('/api/items/global', {
server: true,
onResponse({ request, response, options }) {
global.value = response._data.data;
},
});
useSeoMeta({
ogImage: '/card.jpg',
ogImageAlt: global.value.contact_image_titre,
twitterImage: '/card.jpg',
});
provide('globalData', global);
useHead({
htmlAttrs: {
lang: 'fr'
},
link: [
{
rel: 'icon',
type: 'image/png',
href: 'favicon.png'
}
]
});
useSeoMeta({
ogImage: '/card.jpg',
ogImageAlt: global.value.contact_image_titre,
twitterImage: '/card.jpg',
});
useHead({
htmlAttrs: {
lang: 'fr'
},
link: [
{
rel: 'icon',
type: 'image/png',
href: 'favicon.png'
}
]
});
}
}
</script>
<style lang="scss">

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: {

33
error.vue
View File

@ -3,35 +3,30 @@
<div class="error-page">
<h1 v-if="error.statusCode === 404">Erreur 404</h1>
<p v-if="error.statusCode === 404">La page {{ error.url }} n'existe pas</p>
<NuxtImg
<img
v-if="global.error_img"
:src="img(global.error_img)"
:alt="global.error_img_title"
format="webp"
placeholder
lazy
sizes="sm:100vw" />
:src="`/api/assets/${globalData.error_img}.webp`"
:alt="global.error_img_title" />
</div>
</template>
<script>
export default {
setup() {
const { getItems } = useDirectusItems();
const { getThumbnail : img } = useDirectusFiles();
const global = ref([]);
const global = ref([]);
onMounted(async () => {
const items = await getItems({ collection: "global" });
global.value = items;
});
const { data, error } = useFetch('/api/items/global', {
server: true,
onResponse({ request, response, options }) {
global.value = response._data.data;
},
});
provide('globalData', global);
provide('globalData', global);
return {
global,
img
}
return {
globalData
}
},
props: {

41
nuxt.config.ts
View File

@ -1,3 +1,8 @@
// nitro hook to get Directus files working on ssg
// https://github.com/codepie-io/nuxt3-dynamic-routes/blob/main/nuxt.config.ts
import { createDirectus, staticToken, rest, readFiles } from '@directus/sdk';
export default defineNuxtConfig({
devtools: { enabled: true },
modules: [
@ -5,6 +10,38 @@ export default defineNuxtConfig({
'@nuxt/image',
'@nuxtjs/seo'
],
runtimeConfig: {
apiURL: process.env.DIRECTUS_URL,
apiToken: process.env.DIRECTUS_API_TOKEN
},
nitro: {
hooks: {
async 'prerender:routes'(routes) {
const client = createDirectus(process.env.DIRECTUS_URL)
.with(staticToken(process.env.DIRECTUS_API_TOKEN))
.with(rest());
const directusFiles = await client.request(
readFiles({
query: {
filter: {
type: {
_eq: 'image',
},
},
},
})
);
for (let image of directusFiles) {
// @TODO: vérifier si le fichier existe pas déjà
// avant de l'ajouter aux routes à prerender
routes.add(`/api/assets/${image.id}.webp`);
}
}
}
},
app: {
pageTransition: { name: 'page', mode: 'out-in' }
},
@ -19,7 +56,7 @@ export default defineNuxtConfig({
token: process.env.DIRECTUS_API_TOKEN
},
image: {
domains: [ `${process.env.DIRECTUS_URL}` ],
format: ['webp'],
provider: 'ipx',
// domains: [ `${process.env.URL}/api/assets/` ]
}
})

23
package-lock.json generated
View File

@ -7,6 +7,7 @@
"name": "nuxt-app",
"hasInstallScript": true,
"dependencies": {
"@directus/sdk": "^15.1.0",
"@nuxt/image": "^1.3.0",
"nuxt": "^3.10.1",
"nuxt-directus": "^5.6.0",
@ -1035,6 +1036,28 @@
"node": ">= 10"
}
},
"node_modules/@directus/sdk": {
"version": "15.1.0",
"resolved": "https://registry.npmjs.org/@directus/sdk/-/sdk-15.1.0.tgz",
"integrity": "sha512-M2+Z1WmU8Q5KlR22K5ugmBHq10a6tcGl3QuvGKnN+jNwDnRyN5brJxt7FvgtWrY3Q1ToGLxmL37GHAH9s12dlQ==",
"dependencies": {
"@directus/system-data": "1.0.2"
},
"engines": {
"node": ">=18.0.0"
},
"funding": {
"url": "https://github.com/directus/directus?sponsor=1"
}
},
"node_modules/@directus/system-data": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@directus/system-data/-/system-data-1.0.2.tgz",
"integrity": "sha512-PweDAwTz4zImEGJnhoaX8apOCvcAfE0aGQrCSk+3cf1sLso0ShNlcDvUymtVfrqOXy0qT9sLa833bpJVaXF5ng==",
"funding": {
"url": "https://github.com/directus/directus?sponsor=1"
}
},
"node_modules/@emnapi/runtime": {
"version": "0.45.0",
"resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-0.45.0.tgz",

1
package.json
View File

@ -10,6 +10,7 @@
"postinstall": "nuxt prepare"
},
"dependencies": {
"@directus/sdk": "^15.1.0",
"@nuxt/image": "^1.3.0",
"nuxt": "^3.10.1",
"nuxt-directus": "^5.6.0",

12
pages/contact.vue
View File

@ -1,13 +1,10 @@
<template>
<main id="contact">
<div v-if="globalData.contact_image">
<NuxtImg
:src="img(globalData.contact_image)"
<div>
<img
:src="`/api/assets/${globalData.contact_image}.webp`"
:alt="globalData.contact_image_titre"
format="webp"
placeholder
lazy
sizes="sm:40vw" />
/>
</div>
<div>
<p>{{ globalData.contact_texte }}</p>
@ -18,7 +15,6 @@
<script setup>
const globalData = inject('globalData');
const { getThumbnail : img } = useDirectusFiles();
</script>
<style lang="scss">

11
pages/galerie.vue
View File

@ -7,15 +7,18 @@ import Projects from '@/components/Projects.vue';
export default {
setup() {
const { getItems } = useDirectusItems();
const galerie = ref([]);
const { data: itemsData, error: itemsError } = useFetch('/api/items/galerie', { server: true });
onMounted(async () => {
const items = await getItems({ collection: "galerie" });
galerie.value = items;
if (!itemsError.value && itemsData.value) {
galerie.value = itemsData.value.data;
}
});
return {
galerie
galerie,
itemsError
};
},
components: {

98
pages/index.vue
View File

@ -1,67 +1,75 @@
<template>
<main>
<div class="indexImg" v-for="image in itemsAccueil" :key="image.id">
<NuxtImg
:src="img(image.image_accueil)"
<img
:src="`/api/assets/${image.image_accueil}.webp`"
:alt="image.titre"
format="webp"
placeholder
lazy
sizes="sm:150vw" />
/>
</div>
</main>
</template>
<script setup>
const { getItems } = useDirectusItems();
<script>
export default {
setup() {
const itemsAccueil = ref([]);
const itemsAccueil = await getItems({
collection: "images_accueil"
});
const { data: itemsData, error: itemsError } = useFetch('/api/items/images_accueil', { server: true });
const { getThumbnail : img } = useDirectusFiles();
onMounted(async () => {
if (!itemsError.value && itemsData.value) {
itemsAccueil.value = itemsData.value.data;
}
});
onMounted(() => {
const imgs = document.querySelectorAll('.indexImg img');
return {
itemsAccueil,
itemsError
};
const showingTime = 5000, transitionTime = 2000;
for (let img of imgs) {
img.addEventListener('click', function() {
nextSlide();
resetTimer();
});
img.style.transition = `opacity ${transitionTime / 1000}s ease-out`;
}
function startSlider() {
const imgs = document.querySelectorAll('.indexImg img');
imgs[0].style.opacity = 1;
const showingTime = 5000, transitionTime = 2000;
let diapoTimer = setInterval(nextSlide, showingTime + transitionTime);
let index = 1;
function nextSlide() {
if (index === 0) {
imgs[imgs.length - 1].style.opacity = 0;
imgs[index].style.opacity = 1;
} else {
imgs[index - 1].style.opacity = 0;
imgs[index].style.opacity = 1;
for (let img of imgs) {
img.addEventListener('click', function() {
nextSlide();
resetTimer();
});
img.style.transition = `opacity ${transitionTime / 1000}s ease-out`;
}
if (index === imgs.length - 1) {
index = 0;
} else {
index ++;
imgs[0].style.opacity = 1;
let diapoTimer = setInterval(nextSlide, showingTime + transitionTime);
let index = 1;
function nextSlide() {
if (index === 0) {
imgs[imgs.length - 1].style.opacity = 0;
imgs[index].style.opacity = 1;
} else {
imgs[index - 1].style.opacity = 0;
imgs[index].style.opacity = 1;
}
if (index === imgs.length - 1) {
index = 0;
} else {
index ++;
}
}
function resetTimer() {
clearInterval(diapoTimer);
diapoTimer = setInterval(nextSlide, showingTime + transitionTime);
}
}
function resetTimer() {
clearInterval(diapoTimer);
diapoTimer = setInterval(nextSlide, showingTime + transitionTime);
}
});
}
};
</script>
<style lang="scss">

14
pages/magasin.vue
View File

@ -10,18 +10,22 @@ import Projects from '@/components/Projects.vue';
export default {
setup() {
const { getItems } = useDirectusItems();
const magasin = ref([]);
onMounted(async () => {
const items = await getItems({ collection: "magasin" });
magasin.value = items;
const { data: itemsData, error: itemsError } = useFetch('/api/items/magasin', { server: true });
onBeforeMount(async () => {
if (!itemsError.value && itemsData.value) {
magasin.value = itemsData.value.data;
}
});
const globalData = inject('globalData');
return {
globalData,
magasin
magasin,
itemsError
};
},
components: {

18
server/api/[...].ts Normal file
View File

@ -0,0 +1,18 @@
// The BEST way to proxy your API in Nuxt
// by Alexander Lichter
// https://www.youtube.com/watch?v=J4E5uYz5AY8
// to run as static `npm run generate --prerender`
import { joinURL } from 'ufo'
export default defineEventHandler(async (event) => {
const proxyUrl = useRuntimeConfig().apiURL
if (event.path.startsWith('/api')) {
const path = event.path.replace(/^\/api\//, '')
const target = joinURL(proxyUrl, path)
return proxyRequest(event, target, { headers: { Authorization: `Bearer ${useRuntimeConfig().apiToken}`}})
}
})