first commit
This commit is contained in:
Valentin
commit
dce2819468
|
|
@ -0,0 +1,3 @@
|
|||
DIRECTUS_API_TOKEN=
|
||||
URL=
|
||||
DIRECTUS_URL=
|
||||
|
|
@ -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
|
||||
|
|
@ -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.
|
||||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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: ''
|
||||
},
|
||||
})
|
||||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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}`}})
|
||||
}
|
||||
})
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"extends": "../.nuxt/tsconfig.server.json"
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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.');
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
// https://nuxt.com/docs/guide/concepts/typescript
|
||||
"extends": "./.nuxt/tsconfig.json"
|
||||
}
|
||||
Loading…
Reference in New Issue