Merge branch 'main' into prod

'push to prod'
This commit is contained in:
Valentin 2024-04-18 12:45:16 +02:00
commit 0373091dcb
19 changed files with 3671 additions and 3091 deletions

2
.gitignore vendored
View File

@ -5,6 +5,8 @@
.nitro .nitro
.cache .cache
dist dist
public/api
public/imgs
# Node dependencies # Node dependencies
node_modules node_modules

View File

@ -73,3 +73,4 @@ bun run preview
``` ```
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information. Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
test

53
app.vue
View File

@ -1,38 +1,30 @@
<template> <template>
<Header /> <Header />
<main> <NuxtPage />
<NuxtPage />
</main>
</template> </template>
<script setup> <script setup>
const { getItems } = useDirectusItems(); let globalData = await useFetchGlobalData();
const global = ref([]); globalData = globalData.globalData._object.$sglobalData;
onMounted(async () => {
const items = await getItems({ collection: "global" });
global.value = items;
});
provide('globalData', global); useSeoMeta({
ogImage: '/card.jpg',
ogImageAlt: globalData.contact_image_titre,
twitterImage: '/card.jpg',
});
useSeoMeta({ useHead({
ogImage: '/card.jpg', htmlAttrs: {
ogImageAlt: global.value.contact_image_titre, lang: 'fr'
twitterImage: '/card.jpg', },
}); link: [
{
useHead({ rel: 'icon',
htmlAttrs: { type: 'image/png',
lang: 'fr' href: 'favicon.png'
}, }
link: [ ]
{ });
rel: 'icon',
type: 'image/png',
href: 'favicon.png'
}
]
});
</script> </script>
<style lang="scss"> <style lang="scss">
@ -48,10 +40,13 @@
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
font-family: 'Latitude', serif; font-family: 'Latitude', serif;
font-size: 1.1rem; font-size: 1rem;
font-weight: normal; font-weight: normal;
text-decoration: none; text-decoration: none;
color: #0e312f; color: #0e312f;
@media screen and (min-width: 800px) {
font-size: 1.1rem;
}
} }
body { body {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 74 KiB

After

Width:  |  Height:  |  Size: 28 KiB

View File

@ -32,17 +32,21 @@
</template> </template>
<script> <script>
export default { export default {
setup() { async setup() {
const globalData = inject('globalData'); let globalData = await useFetchGlobalData();
return { globalData }; globalData = globalData.globalData._object.$sglobalData;
return {
globalData
};
},
methods: {
isActive(path) {
return this.$route.path === path;
}, },
methods: {
isActive(path) {
return this.$route.path === path;
},
}
} }
}
</script> </script>
<style lang="scss"> <style lang="scss">
@ -127,6 +131,7 @@
width: 3rem; width: 3rem;
z-index: 1; z-index: 1;
img { img {
padding-top: 10px;
width: 100%; width: 100%;
transform: rotate(0deg); transform: rotate(0deg);
transition: transform 0.3s ease-out; transition: transform 0.3s ease-out;
@ -152,6 +157,9 @@
} }
} }
} }
> div > a > img {
padding: 10px;
}
} }
} }
</style> </style>

View File

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

View File

@ -0,0 +1,11 @@
export const useFetchGlobalData = async () => {
const globalData = useState('globalData', () => {})
await callOnce(async () => {
globalData.value = await $fetch(`/api/items/global`)
globalData.value = globalData.value.data
})
return {
globalData
}
}

View File

@ -2,42 +2,29 @@
<Header /> <Header />
<div class="error-page"> <div class="error-page">
<h1 v-if="error.statusCode === 404">Erreur 404</h1> <h1 v-if="error.statusCode === 404">Erreur 404</h1>
<h1 v-else>Erreur {{ error.statusCode }}</h1>
<p v-if="error.statusCode === 404">La page {{ error.url }} n'existe pas</p> <p v-if="error.statusCode === 404">La page {{ error.url }} n'existe pas</p>
<NuxtImg <img
v-if="global.error_img" :src="`/api/assets/${globalData.error_img}.webp`"
:src="img(global.error_img)" :alt="globalData.error_img_title" />
:alt="global.error_img_title"
format="webp"
placeholder
lazy
sizes="sm:100vw" />
</div> </div>
</template> </template>
<script> <script>
export default { export default {
setup() { async setup() {
const { getItems } = useDirectusItems(); let globalData = await useFetchGlobalData();
const { getThumbnail : img } = useDirectusFiles(); globalData = globalData.globalData._object.$sglobalData;
const global = ref([]); return {
onMounted(async () => { globalData
const items = await getItems({ collection: "global" }); }
global.value = items;
});
provide('globalData', global);
return {
global,
img
}
}, },
props: { props: {
error: Object error: Object
} }
} }
</script> </script>
<style scoped> <style scoped>

View File

@ -1,10 +1,42 @@
// nitro hook to get Directus files working on ssg
// https://github.com/codepie-io/nuxt3-dynamic-routes/blob/main/nuxt.config.ts
// + ssg homemade caching to not retrieve all the files each generation
// import { createDirectus, staticToken, rest, readFiles } from '@directus/sdk';
import { crawlImages } from './ssg_hooks/crawlImages.js'
import { cacheImages } from './ssg_hooks/cacheImages.js'
export default defineNuxtConfig({ export default defineNuxtConfig({
devtools: { enabled: true }, devtools: { enabled: true },
modules: [ modules: [
'nuxt-directus', '@nuxtjs/seo',
'@nuxt/image',
'@nuxtjs/seo'
], ],
runtimeConfig: {
apiURL: process.env.DIRECTUS_URL,
apiToken: process.env.DIRECTUS_API_TOKEN
},
nitro: {
hooks: {
async 'prerender:routes'(routes) {
await crawlImages(routes);
},
},
prerender: {
routes: [
'/api/items/global',
]
},
},
hooks: {
'nitro:build:public-assets': async () => {
const imageSizes = [
{ small: 750 },
{ large: 1920 },
];
await cacheImages(imageSizes);
}
},
app: { app: {
pageTransition: { name: 'page', mode: 'out-in' } pageTransition: { name: 'page', mode: 'out-in' }
}, },
@ -14,12 +46,4 @@ export default defineNuxtConfig({
name: 'Mahée Auffret', name: 'Mahée Auffret',
description: 'Portfolio de l\'artiste-peintre basée à Rennes Mahée Auffret' description: 'Portfolio de l\'artiste-peintre basée à Rennes Mahée Auffret'
}, },
directus: {
url: process.env.DIRECTUS_URL,
token: process.env.DIRECTUS_API_TOKEN
},
image: {
domains: [ `${process.env.DIRECTUS_URL}` ],
format: ['webp'],
}
}) })

6209
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -10,15 +10,15 @@
"postinstall": "nuxt prepare" "postinstall": "nuxt prepare"
}, },
"dependencies": { "dependencies": {
"@nuxt/image": "^1.3.0", "@directus/sdk": "^15.1.0",
"nuxt": "^3.10.1", "sharp": "^0.33.3",
"nuxt-directus": "^5.6.0",
"swiper": "^11.0.6", "swiper": "^11.0.6",
"vue": "^3.4.15", "vue": "^3.4.15",
"vue-router": "^4.2.5" "vue-router": "^4.2.5"
}, },
"devDependencies": { "devDependencies": {
"@nuxtjs/seo": "^2.0.0-rc.8", "@nuxtjs/seo": "^2.0.0-rc.8",
"nuxt": "^3.11.2",
"sass": "^1.71.0" "sass": "^1.71.0"
} }
} }

View File

@ -1,24 +1,30 @@
<template> <template>
<main id="contact"> <main id="contact">
<div v-if="globalData.contact_image"> <div>
<NuxtImg <img
:src="img(globalData.contact_image)" :src="`/imgs/small/${globalData.contact_image}.webp`"
:alt="globalData.contact_image_titre" :alt="globalData.contact_image_titre"
format="webp" />
placeholder
lazy
sizes="sm:40vw" />
</div> </div>
<div> <div>
<p>{{ globalData.contact_texte }}</p> <p>{{ globalData.contact_text }}</p>
<a :href="'mailto:' + globalData.email">{{ globalData.email }}</a> <a :href="'mailto:' + globalData.email">{{ globalData.email }}</a>
</div> </div>
</main> </main>
</template> </template>
<script setup> <script>
const globalData = inject('globalData'); export default {
const { getThumbnail : img } = useDirectusFiles(); async setup() {
let globalData = await useFetchGlobalData();
globalData = globalData.globalData._object.$sglobalData;
return {
globalData
}
}
}
</script> </script>
<style lang="scss"> <style lang="scss">

View File

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

View File

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

View File

@ -9,15 +9,19 @@
import Projects from '@/components/Projects.vue'; import Projects from '@/components/Projects.vue';
export default { export default {
setup() { async setup() {
const { getItems } = useDirectusItems();
const magasin = ref([]); const magasin = ref([]);
onMounted(async () => {
const items = await getItems({ collection: "magasin" }); const { data: itemsData } = useFetch('/api/items/magasin', { server: true });
magasin.value = items;
onBeforeMount(async () => {
if (itemsData.value) {
magasin.value = itemsData.value.data;
}
}); });
const globalData = inject('globalData'); let globalData = await useFetchGlobalData();
globalData = globalData.globalData._object.$sglobalData;
return { return {
globalData, globalData,

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}`}})
}
})

69
ssg_hooks/cacheImages.js Normal file
View File

@ -0,0 +1,69 @@
import fs from 'fs';
import path from 'path';
import { promisify } from 'util';
import { resizeImages } from '../ssg_hooks/resizeImages.js'
export async function cacheImages(imageSizes) {
const sourceFolder = './.output/public/api/assets';
const destinationFolder = './public/api/assets';
if (!fs.existsSync(destinationFolder)) fs.mkdirSync(destinationFolder, { recursive: true });
const readdir = promisify(fs.readdir);
const stat = promisify(fs.stat);
const copyFile = promisify(fs.copyFile);
async function directoryExists(directoryPath) {
try {
const stats = await fs.promises.stat(directoryPath);
return stats.isDirectory();
} catch (error) {
if (error.code === 'ENOENT') {
return false;
} else {
throw error;
}
}
}
async function copyFilesIfNotExist(sourceFolder, destinationFolder) {
try {
const exists = await directoryExists(sourceFolder);
if (!exists) {
console.log(`Source folder '${sourceFolder}' does not exist.`);
return;
}
const files = await readdir(sourceFolder);
for (const file of files) {
const sourceFilePath = path.join(sourceFolder, file);
const destinationFilePath = path.join(destinationFolder, file);
const sourceFileStat = await stat(sourceFilePath);
if (sourceFileStat.isFile()) {
try {
await stat(destinationFilePath);
} catch (error) {
if (error.code === 'ENOENT') {
await copyFile(sourceFilePath, destinationFilePath);
console.log(`Copied '${file}' to '${destinationFolder}'.`);
} else {
throw error;
}
}
}
}
console.log('Files copied successfully.');
console.log('Start images resizing.');
await resizeImages(imageSizes);
} catch (error) {
console.error('Error:', error);
}
}
copyFilesIfNotExist(sourceFolder, destinationFolder);
}

35
ssg_hooks/crawlImages.js Normal file
View File

@ -0,0 +1,35 @@
import { createDirectus, staticToken, rest, readFiles } from '@directus/sdk';
import fs from 'fs';
export async function crawlImages(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) {
if (image.type != "image/heic") {
const fileExists = async (filePath) => !!(await fs.promises.access(filePath, fs.constants.F_OK).then(() => true).catch(() => false));
const filePath = `./public/api/assets/${image.id}.webp`;
fileExists(filePath)
.then(exists => {
if (!exists) {
routes.add(`/api/assets/${image.id}.webp`);
}
})
.catch(error => console.error('Error:', error));
}
}
}

49
ssg_hooks/resizeImages.js Normal file
View File

@ -0,0 +1,49 @@
import fs from 'fs';
import path from 'path';
import sharp from 'sharp';
import { promisify } from 'util';
export async function resizeImages(sizes) {
const stat = promisify(fs.stat);
const copyFile = promisify(fs.copyFile);
const sourceFolder = './public/api/assets';
const outputFolder = './.output/public/imgs';
const sizeCacheFolder = './public/imgs';
for (const size of sizes) {
const key = Object.keys(size)[0];
const sizeFolder = `${outputFolder}/${key}`;
if (!fs.existsSync(sizeFolder)) fs.mkdirSync(sizeFolder, { recursive: true });
const cacheSizeFolder = `${sizeCacheFolder}/${key}`;
if (!fs.existsSync(cacheSizeFolder)) fs.mkdirSync(cacheSizeFolder, { recursive: true });
}
const files = fs.readdirSync(sourceFolder);
for (const file of files) {
const filePath = `${sourceFolder}/${file}`;
const image = sharp(filePath);
for (const size of sizes) {
const key = Object.keys(size)[0];
const destinationFile = path.join(sizeCacheFolder, key, file);
try {
const destinationFileStat = await stat(destinationFile);
} catch (error) {
if (error.code === 'ENOENT') {
const width = parseInt(size[key]);
await image.clone().resize({ width }).toFile(destinationFile);
await copyFile(destinationFile, path.join(outputFolder, key, file));
} else {
throw error;
}
}
}
}
fs.rmSync('./.output/public/api/assets', { recursive: true, force: true });
console.log('Images resized and cached successfully.');
}