first commit

.env.example

@@ -0,0 +1,3 @@
+DIRECTUS_API_TOKEN=
+URL=
+DIRECTUS_URL=

.gitignore

@@ -0,0 +1,26 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+public/api
+public/imgs
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

README.md

@@ -0,0 +1,39 @@
+# Nuxt Static Site Generation Boilerplate
+
+Generate static site with content from [Directus CMS](https://directus.io/).
+
+Use the [Directus MariaDB boilerplate]() to launch the CMS locally.
+
+The files are retrieved and cached from Directus on build time.
+
+## Develop
+
+Install the dependencies :
+
+```bash
+npm install
+```
+
+Create the `.env` file from `.env.example`
+
+Work with
+
+```bash
+npm run dev
+```
+
+Build the site in `.output/public` directory
+
+```bash
+npm run generate --prerender
+```
+
+Preview the freshly built site with
+
+```bash
+npx serve .output/public
+```
+
+## Deploy
+
+Deploy on a Debian VPS with the [Deploy CDCN]() script.

app.vue

@@ -0,0 +1,27 @@
+<template>
+  <NuxtPage />
+</template>
+
+<script setup>
+    let globalData = await useFetchGlobalData();
+    globalData = globalData.globalData._object.$sglobalData;
+
+    useSeoMeta({
+      ogImage: '', // img from public folder
+      ogImageAlt: , // globalData.something
+      twitterImage: '', // img from public folder
+    });
+
+    useHead({
+      htmlAttrs: {
+        lang: 'fr'
+      },
+      link: [
+        {
+          rel: 'icon',
+          type: 'image/png',
+          href: '' // img from public folder
+        }
+      ]
+    });
+</script>

composables/useFetchGlobalData.js

@@ -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
+  }
+}

error.vue

@@ -0,0 +1,15 @@
+<template>
+    <div class="error-page">
+      <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>
+    </div>
+</template>
+  
+<script>
+export default {
+    props: {
+      error: Object
+    }
+}
+</script>

nuxt.config.ts

@@ -0,0 +1,47 @@
+// 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 { crawlImages } from './ssg_hooks/crawlImages.js'
+import { cacheImages } from './ssg_hooks/cacheImages.js'
+
+export default defineNuxtConfig({
+  devtools: { enabled: true },
+  modules: [
+    '@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: {
+    pageTransition: { name: '', mode: '' } // define in the app.vue css
+  },
+  site: {
+    url: process.env.URL,
+    defaultLocale: 'fr',
+    name: '',
+    description: ''
+  },
+})

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "@directus/sdk": "^15.1.0",
+    "sharp": "^0.33.3",
+    "vue": "^3.4.15",
+    "vue-router": "^4.2.5"
+  },
+  "devDependencies": {
+    "@nuxtjs/seo": "^2.0.0-rc.8",
+    "nuxt": "^3.11.2",
+    "sass": "^1.71.0"
+  }
+}

pages/contact.vue

@@ -0,0 +1,73 @@
+<template>
+    <main id="contact">
+        <div>
+            <img 
+                :src="`/imgs/small/${globalData.contact_image}.webp`"
+                :alt="globalData.contact_image_titre"
+            />
+        </div>
+        <div>
+            <p>{{ globalData.contact_text }}</p>
+            <a :href="'mailto:' + globalData.email">{{ globalData.email }}</a>
+        </div>
+    </main>
+</template>
+
+<script>
+export default {
+    async setup() {
+
+        let globalData = await useFetchGlobalData();
+        globalData = globalData.globalData._object.$sglobalData;
+
+        return {
+            globalData
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+    #contact {
+        display: flex;
+        flex-direction: column;
+        > div:first-of-type {
+            width: 40vw;
+            > img {
+                width: 100%;
+            }
+        }
+        > div:last-of-type {
+            margin-top: 2rem;
+            > p {
+                line-height: 1.2;
+                margin-bottom: 1.5rem;
+            }
+        }
+    }
+
+    @media screen and (min-width: 800px) {
+        #contact {
+            flex-direction: row;
+            > div:first-of-type {
+                width: 30vw;
+            }
+            > div:last-of-type {
+                width: 40vw;
+                margin-left: 2rem;
+                align-self: flex-end;
+            }
+        }
+    }
+
+    @media screen and (min-width: 1200px) {
+        #contact {
+            > div:first-of-type {
+                width: 15vw;
+            }
+            > div:last-of-type {
+                width: 30vw;
+            }
+        }
+    }
+</style>

pages/galerie.vue

@@ -0,0 +1,28 @@
+<template>
+    <Projects :contents="galerie" />
+</template>
+
+<script>
+import Projects from '@/components/Projects.vue';
+
+export default {
+    setup() {
+        const galerie = ref([]);
+
+        const { data: itemsData } = useFetch('/api/items/galerie', { server: true });
+        
+        onMounted(async () => {
+            if (itemsData.value) {
+                galerie.value = itemsData.value.data;
+            }
+        });
+
+        return {
+            galerie
+        };
+    },
+    components: {
+        Projects
+    }
+};
+</script>

pages/index.vue

@@ -0,0 +1,95 @@
+<template>
+    <main>
+        <div class="indexImg" v-for="image in itemsAccueil" :key="image.id">
+            <img
+                :src="`/imgs/large/${image.image_accueil}.webp`"
+                :alt="image.titre"
+            />
+       </div>
+    </main>
+</template>
+
+<script>
+export default {
+    setup() {
+        const itemsAccueil = ref([]);
+
+        const { data: itemsData } = useFetch('/api/items/images_accueil', { server: true });
+        
+        onMounted(async () => {
+            if (itemsData.value) {
+                itemsAccueil.value = itemsData.value.data;
+                setTimeout(() => {
+                    startSlider();
+                }, 1);
+            }
+        });
+
+        
+
+        return {
+            itemsAccueil,
+        };
+
+
+        function startSlider() {
+            const imgs = document.querySelectorAll('.indexImg img');
+            
+            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`;
+            }
+
+            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);
+            }
+        }
+    }
+};
+</script>
+
+<style lang="scss">
+    .indexImg {
+        z-index: -1;
+        position: absolute;
+        overflow: hidden;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        img {
+            object-fit: cover;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+        }
+    }
+</style>

pages/magasin.vue

@@ -0,0 +1,35 @@
+<template>
+    <main>
+        <p>{{ globalData.magasin_explication }}</p>
+        <Projects :contents="magasin" />
+    </main>
+</template>
+
+<script>
+import Projects from '@/components/Projects.vue';
+
+export default {
+    async setup() {
+        const magasin = ref([]);
+
+        const { data: itemsData } = useFetch('/api/items/magasin', { server: true });
+
+        onBeforeMount(async () => {
+            if (itemsData.value) {
+                magasin.value = itemsData.value.data;
+            }
+        });
+
+        let globalData = await useFetchGlobalData();
+        globalData = globalData.globalData._object.$sglobalData;
+
+        return {
+            globalData,
+            magasin
+        };
+    },
+    components: {
+        Projects
+    }
+};
+</script>

server/api/[...].ts

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

server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

ssg_hooks/cacheImages.js

@@ -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);
+}

ssg_hooks/crawlImages.js

@@ -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));
+        }
+    }
+}

ssg_hooks/resizeImages.js

@@ -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.');
+}

tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}