first commit
This commit is contained in:
Valentin
commit
bd3e224471
|
|
@ -0,0 +1,27 @@
|
|||
# Nuxt dev/build outputs
|
||||
.output
|
||||
.data
|
||||
.nuxt
|
||||
.nitro
|
||||
.cache
|
||||
dist
|
||||
public/api
|
||||
public/imgs
|
||||
public/videos
|
||||
|
||||
# Node dependencies
|
||||
node_modules
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
||||
# Misc
|
||||
.DS_Store
|
||||
.fleet
|
||||
.idea
|
||||
|
||||
# Local env files
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
# Nuxt Static Site Generation Boilerplate
|
||||
|
||||
Generate static site with content from [Directus CMS](https://directus.io/).
|
||||
|
||||
Use the [Directus MariaDB boilerplate](https://gitea.valentin-le-moign.fr/val/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
|
||||
```
|
||||
|
||||
Create and populate the `pages`, `public`, `components` and `assets` folders.
|
||||
|
||||
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 DCDN Static](https://gitea.valentin-le-moign.fr/val/deployment_dcdn_static) script.
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<template>
|
||||
<main>
|
||||
<transition :name="'fade'" mode="out-in">
|
||||
<div :key="transitionKey">
|
||||
<LanguageSwitch />
|
||||
<Introduction />
|
||||
<Works />
|
||||
<ExternalLinks />
|
||||
</div>
|
||||
</transition>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
let globalData = await useFetchGlobalData();
|
||||
globalData = globalData.globalData._object.$sglobalData;
|
||||
|
||||
useFetchTranslation('global');
|
||||
|
||||
let { locale } = useI18n()
|
||||
const transitionKey = ref(0);
|
||||
|
||||
watch(() => locale.value, (newVal, oldVal) => {
|
||||
transitionKey.value += 1;
|
||||
});
|
||||
|
||||
/*
|
||||
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>
|
||||
|
||||
<style lang="scss">
|
||||
@import 'assets/scss/_variables.scss';
|
||||
@import 'assets/scss/_fonts.scss';
|
||||
@import 'assets/scss/_styles.scss';
|
||||
</style>
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,20 @@
|
|||
@font-face {
|
||||
font-family: 'Aeonik';
|
||||
src: url('assets/fonts/AeonikPro-Regular.woff') format('woff');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Aeonik';
|
||||
src: url('assets/fonts/Aeonik-Light.woff') format('woff');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Ballpill';
|
||||
src: url('assets/fonts/ballpill-regular.woff2') format('woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -0,0 +1,254 @@
|
|||
* {
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Aeonik', sans-serif;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
text-decoration: none;
|
||||
color: #0e312f;
|
||||
a {
|
||||
color: $brand-color;
|
||||
transition: opacity 0.2s;
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
margin: $margin-y $margin-x;
|
||||
height: calc(100vh - $margin-y * 2);
|
||||
@media screen and (min-width: $breakpoint-medium) {
|
||||
margin: $margin-y $margin-x-large;
|
||||
}
|
||||
@media screen and (min-width: $breakpoint-large) {
|
||||
margin: $margin-y $margin-x;
|
||||
}
|
||||
> #__nuxt {
|
||||
height: 100%;
|
||||
main {
|
||||
height: 100%;
|
||||
> div {
|
||||
@media screen and (min-width: $breakpoint-large) {
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, auto);
|
||||
grid-template-rows: 1.6rem auto auto;
|
||||
}
|
||||
> #intro {
|
||||
width: 75vw;
|
||||
@media screen and (min-width: $breakpoint-large) {
|
||||
grid-row: 1 / span 2;
|
||||
grid-column: 1 / span 1;
|
||||
max-width: 33vw;
|
||||
padding-right: 7vw;
|
||||
}
|
||||
> p:first-of-type {
|
||||
@media screen and (min-width: $breakpoint-large) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> #work-label {
|
||||
margin-top: 5rem;
|
||||
grid-row: 1/span 1;
|
||||
grid-column: 2/ span 1;
|
||||
@media screen and (min-width: $breakpoint-large) {
|
||||
padding-left: $margin-x;
|
||||
margin-top: 0;
|
||||
z-index: 1;
|
||||
padding-bottom: 2vh;
|
||||
border-left: solid 1px $light-color;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $breakpoint-xlarge) {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> #works {
|
||||
margin-top: 1.2rem;
|
||||
@media screen and (min-width: $breakpoint-large) {
|
||||
margin-top : 0;
|
||||
border-left: solid 1px $light-color;
|
||||
grid-row: 2 / span 2;
|
||||
grid-column: 2 / span 2;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
|
||||
.work-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
@media screen and (min-width: $breakpoint-large) {
|
||||
padding: 0 5vw;
|
||||
}
|
||||
> .work-poster {
|
||||
> a {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
> img, > video {
|
||||
border-radius: 10px;
|
||||
width: 100%;
|
||||
transition: transform 0.2s ease, opacity 0.4s ease;
|
||||
transform: scale(1);
|
||||
}
|
||||
> video {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
@media screen and (min-width: $breakpoint-large) {
|
||||
> video {
|
||||
display: block;
|
||||
z-index: 0;
|
||||
}
|
||||
> img {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
&:hover {
|
||||
> img {
|
||||
transform: scale(0.98);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .work-catchphrase {
|
||||
font-family: 'Ballpill', sans-serif;
|
||||
font-size: $l-txt-size;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
> .work-infos {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-top: solid 1px #b9aeb5;
|
||||
border-bottom: solid 1px #b9aeb5;
|
||||
.text-content > p:first-of-type {
|
||||
margin: 0.8rem 0;
|
||||
}
|
||||
> div:first-of-type {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> p {
|
||||
margin: 0;
|
||||
margin-left: 0.5rem;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
> p::before {
|
||||
margin-left: 0.3rem;
|
||||
content: '– ';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> ul#links {
|
||||
width: 100%;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
align-self: flex-end;
|
||||
margin-top: 5rem;
|
||||
margin-bottom: 2rem;
|
||||
@media screen and (min-width: $breakpoint-large) {
|
||||
grid-row: 3 / span 1;
|
||||
grid-column: 1 / span 1;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
> li {
|
||||
padding: 0.6rem 0;
|
||||
> a {
|
||||
display: inline-block;
|
||||
color: white;
|
||||
background-color: $brand-color;
|
||||
padding: 5px 10px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> #locale-switch {
|
||||
display: flex;
|
||||
height: 1.6rem;
|
||||
width: 100%;
|
||||
justify-content: end;
|
||||
@media screen and (min-width: $breakpoint-large) {
|
||||
grid-row: 1 / span 1;
|
||||
grid-column: 3 / span 1;
|
||||
z-index: 1;
|
||||
}
|
||||
button {
|
||||
border: none;
|
||||
background-color: unset;
|
||||
cursor: pointer;
|
||||
&:last-of-type {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-content {
|
||||
> p {
|
||||
font-weight: 300;
|
||||
margin: 0.8rem 0;
|
||||
line-height: 1.2rem;
|
||||
> strong {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
em, .l-text > h2 {
|
||||
font-style: normal;
|
||||
font-size: 1.6rem;
|
||||
display: inline-block;
|
||||
line-height: 1.3;
|
||||
font-weight: 400;
|
||||
> del {
|
||||
font-family: 'Ballpill', serif;
|
||||
font-size: $l-txt-size;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
&::after {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: $brand-color;
|
||||
display: block;
|
||||
transition: transform 0.2s ease;
|
||||
transform: rotate(-1.2deg) translateY(-3px) translateX(2px);
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
&:hover::after {
|
||||
transform: rotate(0deg) translateY(-3px) translateX(2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity 0.3s ease, filter 0.3s ease;
|
||||
}
|
||||
.fade-enter, .fade-leave-to {
|
||||
opacity: 0;
|
||||
filter: blur(2px);
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
$breakpoint-medium: 600px;
|
||||
$breakpoint-large: 960px;
|
||||
$breakpoint-xlarge: 2000px;
|
||||
|
||||
$brand-color: #f36831;
|
||||
$light-color: #c2baa8;
|
||||
|
||||
$margin-x: 20px;
|
||||
$margin-x-large: 10vw;
|
||||
$margin-y: 20px;
|
||||
|
||||
$l-txt-size: 1.5rem;
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<template>
|
||||
<ul id="links">
|
||||
<li>
|
||||
<a :href="'mailto:' + globalData.mail">{{ $t('global.mail_label') }}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a :href="globalData.instagram_link" target="_blank">Instagram</a>
|
||||
</li>
|
||||
<li>
|
||||
<a :href="globalData.linkedin_link" target="_blank">Linkedin</a>
|
||||
</li>
|
||||
<li>
|
||||
<a :href="globalData.code_link" target="_blank">Code</a>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
async setup() {
|
||||
let globalData = await useFetchGlobalData();
|
||||
globalData = globalData.globalData._object.$sglobalData;
|
||||
|
||||
return {
|
||||
globalData
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<template>
|
||||
<div id="intro" class="text-content" v-html="marked($t('global.introduction'))"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { marked } from 'marked';
|
||||
</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<template>
|
||||
<div id="locale-switch">
|
||||
<button @click="setLocale('en')" :class="{ active: locale === 'en' }">en</button>
|
||||
<button @click="setLocale('fr')" :class="{ active: locale === 'fr' }">fr</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const { locale, setLocale } = useI18n()
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../assets/scss/_variables.scss';
|
||||
|
||||
.active {
|
||||
color: $brand-color;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,138 @@
|
|||
<template>
|
||||
<div id="work-label" class="l-text">
|
||||
<h2>{{ $t('global.work_label') }}</h2>
|
||||
</div>
|
||||
<div id="works">
|
||||
<swiper
|
||||
:modules="modules"
|
||||
:navigation="true"
|
||||
:keyboard="{ enabled: true }"
|
||||
|
||||
:slidesPerView="1"
|
||||
:breakpoints="{
|
||||
'1000': {
|
||||
slidesPerView: 1.5,
|
||||
},
|
||||
}"
|
||||
:centeredSlides="true"
|
||||
>
|
||||
<swiper-slide v-for="work in works.slice().reverse()" :key="work.works_id" class="work-card">
|
||||
<div class="work-poster">
|
||||
<a :href="work.url" target="_blank">
|
||||
<video :src="`/videos/${work.video}.mp4`" no-controls autoplay loop disablePictureInPicture mute></video>
|
||||
<img
|
||||
:src="`/imgs/small/${work.poster}.webp`"
|
||||
:alt="$t(`works.${ work.id }.title`)"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="work-catchphrase">{{ $t(`works.${ work.id }.catchphrase`) }}</div>
|
||||
<div class="work-infos">
|
||||
<div class="text-content">
|
||||
<a :href="work.url" target="_blank">{{ $t(`works.${ work.id }.title`) }}</a>
|
||||
<p>{{ work.year }}</p>
|
||||
</div>
|
||||
<div class="text-content">
|
||||
<p>{{ work.technologies }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="text-content">
|
||||
<p>
|
||||
{{ $t(`works.${ work.id }.description`) }}
|
||||
</p>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Keyboard, A11y, Navigation } from "swiper/modules";
|
||||
import { Swiper, SwiperSlide } from "swiper/vue";
|
||||
import "swiper/css";
|
||||
|
||||
export default {
|
||||
async setup() {
|
||||
const works = ref([]);
|
||||
|
||||
const { data: worksData } = useFetch('/api/items/works', { server: true });
|
||||
|
||||
onMounted(async () => {
|
||||
if (worksData.value) {
|
||||
works.value = worksData.value.data;
|
||||
}
|
||||
});
|
||||
|
||||
useFetchTranslation('works');
|
||||
|
||||
let globalData = await useFetchGlobalData();
|
||||
globalData = globalData.globalData._object.$sglobalData;
|
||||
|
||||
return {
|
||||
modules: [Keyboard, Navigation, A11y],
|
||||
works,
|
||||
globalData,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Swiper,
|
||||
SwiperSlide,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import 'assets/scss/_variables.scss';
|
||||
|
||||
.swiper {
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr auto;
|
||||
@media screen and (min-width: $breakpoint-large) {
|
||||
width: calc(100% + $margin-x);
|
||||
}
|
||||
.swiper-wrapper {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
grid-row-start: 1;
|
||||
grid-row-end: 1;
|
||||
}
|
||||
.swiper-button-prev,
|
||||
.swiper-button-next {
|
||||
height: 3rem;
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s;
|
||||
display: flex;
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
.swiper-button-prev {
|
||||
margin-right: 1rem;
|
||||
justify-self: end;
|
||||
}
|
||||
.swiper-button-next {
|
||||
margin-left: 1rem;
|
||||
justify-self: start;
|
||||
}
|
||||
.swiper-button-disabled::before {
|
||||
color: $light-color !important;
|
||||
}
|
||||
.swiper-button-prev::before,
|
||||
.swiper-button-next::before {
|
||||
transition: color 0.2s ease;
|
||||
font-size: $l-txt-size;
|
||||
color: $brand-color;
|
||||
cursor: pointer;
|
||||
align-self: flex-end;
|
||||
}
|
||||
.swiper-button-prev::before {
|
||||
content: "←";
|
||||
}
|
||||
.swiper-button-next::before {
|
||||
content: "→";
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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,51 @@
|
|||
export const useFetchTranslation = async (collection) => {
|
||||
const i18n = useI18n();
|
||||
|
||||
try {
|
||||
const translations = await $fetch(`/api/items/${collection}_translations`);
|
||||
|
||||
translations.data.forEach(value => {
|
||||
let translationValues = {};
|
||||
translationValues[collection] = {};
|
||||
|
||||
Object.entries(value).forEach(([k, v]) => {
|
||||
if (k !== 'id' && k !== `${collection}_id`) {
|
||||
if(hasDuplicateValueForKey(translations.data, 'languages_code')) {
|
||||
const collectionIdKey = value[`${collection}_id`];
|
||||
if (!translationValues[collection][collectionIdKey]) {
|
||||
translationValues[collection][collectionIdKey] = {};
|
||||
}
|
||||
translationValues[collection][collectionIdKey][k] = v;
|
||||
} else {
|
||||
// singleton
|
||||
translationValues[collection][k] = v;
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
i18n.mergeLocaleMessage(
|
||||
value.languages_code.toLowerCase(),
|
||||
translationValues
|
||||
);
|
||||
// console.log(i18n.getLocaleMessage(value.languages_code.toLowerCase()));
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error fetching translations:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// check if collection is singleton or multiple items
|
||||
function hasDuplicateValueForKey(array, key) {
|
||||
const seenValues = new Set();
|
||||
|
||||
for (const obj of array) {
|
||||
if (seenValues.has(obj[key])) {
|
||||
return true;
|
||||
}
|
||||
seenValues.add(obj[key]);
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
|
@ -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,8 @@
|
|||
export default defineI18nConfig(() => ({
|
||||
legacy: false,
|
||||
locale: 'en',
|
||||
messages: {
|
||||
fr: {},
|
||||
en: {},
|
||||
},
|
||||
}));
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
// 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 { crawlMedia } from './ssg_hooks/crawlMedia.js'
|
||||
import { cacheMedia } from './ssg_hooks/cacheMedia.js'
|
||||
|
||||
export default defineNuxtConfig({
|
||||
devtools: { enabled: true },
|
||||
|
||||
modules: [
|
||||
'@nuxtjs/seo',
|
||||
'@nuxtjs/i18n',
|
||||
],
|
||||
|
||||
runtimeConfig: {
|
||||
apiURL: process.env.DIRECTUS_URL,
|
||||
apiToken: process.env.DIRECTUS_API_TOKEN,
|
||||
},
|
||||
|
||||
nitro: {
|
||||
hooks: {
|
||||
async 'prerender:routes'(routes) {
|
||||
await crawlMedia(routes);
|
||||
},
|
||||
},
|
||||
prerender: {
|
||||
routes: [
|
||||
'/api/items/global_translations',
|
||||
'/api/items/works_translations',
|
||||
'/api/items/works',
|
||||
]
|
||||
},
|
||||
},
|
||||
|
||||
hooks: {
|
||||
'nitro:build:public-assets': async () => {
|
||||
const imageSizes = [
|
||||
{ small: 750 },
|
||||
{ large: 1920 },
|
||||
];
|
||||
await cacheMedia(imageSizes);
|
||||
}
|
||||
},
|
||||
|
||||
app: {
|
||||
pageTransition: { name: 'page', mode: 'out-in' } // define in the app.vue css
|
||||
},
|
||||
|
||||
site: {
|
||||
url: process.env.URL,
|
||||
defaultLocale: 'fr',
|
||||
name: '',
|
||||
description: ''
|
||||
},
|
||||
|
||||
compatibilityDate: '2024-08-14',
|
||||
})
|
||||
|
||||
// TODO
|
||||
// - lazy images static
|
||||
// - clean media url
|
||||
// - 404 static
|
||||
// - handle file deletion
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,26 @@
|
|||
{
|
||||
"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",
|
||||
"marked": "^14.0.0",
|
||||
"sharp": "^0.33.3",
|
||||
"swiper": "^11.1.10",
|
||||
"vue": "^3.4.15",
|
||||
"vue-router": "^4.2.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nuxtjs/i18n": "^8.3.3",
|
||||
"@nuxtjs/seo": "^2.0.0-rc.8",
|
||||
"nuxt": "^3.11.2",
|
||||
"sass": "^1.71.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -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,72 @@
|
|||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import { promisify } from 'util';
|
||||
|
||||
import { resizeImages } from '../ssg_hooks/resizeImages.js'
|
||||
import { cacheVideos } from '../ssg_hooks/cacheVideos.js';
|
||||
|
||||
export async function cacheMedia(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);
|
||||
await cacheVideos();
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
}
|
||||
}
|
||||
|
||||
copyFilesIfNotExist(sourceFolder, destinationFolder);
|
||||
}
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import { promisify } from 'util';
|
||||
|
||||
export async function cacheVideos() {
|
||||
const stat = promisify(fs.stat);
|
||||
const copyFile = promisify(fs.copyFile);
|
||||
|
||||
const sourceFolder = './public/api/assets';
|
||||
const videoOutputFolder = './.output/public/videos';
|
||||
const videoCacheFolder = './public/videos'; // Cache folder for videos
|
||||
|
||||
// Ensure the video output and cache folders exist
|
||||
if (!fs.existsSync(videoOutputFolder)) fs.mkdirSync(videoOutputFolder, { recursive: true });
|
||||
if (!fs.existsSync(videoCacheFolder)) fs.mkdirSync(videoCacheFolder, { recursive: true });
|
||||
|
||||
const files = fs.readdirSync(sourceFolder);
|
||||
|
||||
for (const file of files) {
|
||||
const filePath = `${sourceFolder}/${file}`;
|
||||
|
||||
if (file.slice(-3) === "mp4") {
|
||||
// Handle videos (cache and copy to video output folder)
|
||||
const cachedVideoFile = path.join(videoCacheFolder, file);
|
||||
const videoDestination = path.join(videoOutputFolder, file);
|
||||
|
||||
try {
|
||||
await stat(cachedVideoFile); // Check if video is already cached
|
||||
} catch (error) {
|
||||
if (error.code === 'ENOENT') {
|
||||
// Cache the video if it's not already cached
|
||||
await copyFile(filePath, cachedVideoFile);
|
||||
} else {
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
await stat(videoDestination); // Check if video is already copied to output
|
||||
} catch (error) {
|
||||
if (error.code === 'ENOENT') {
|
||||
// Copy cached video to output folder
|
||||
await copyFile(cachedVideoFile, videoDestination);
|
||||
} else {
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
console.log('Videos cached and copied successfully.');
|
||||
}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
import { createDirectus, staticToken, rest, readFiles } from '@directus/sdk';
|
||||
import fs from 'fs';
|
||||
|
||||
export async function crawlMedia(routes) {
|
||||
const client = createDirectus(process.env.DIRECTUS_URL)
|
||||
.with(staticToken(process.env.DIRECTUS_API_TOKEN))
|
||||
.with(rest());
|
||||
|
||||
const directusFiles = await client.request(
|
||||
// le filtre fonctionne pas
|
||||
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}`;
|
||||
const format = image.type === 'video/mp4' ? 'mp4' : 'webp';
|
||||
|
||||
fileExists(filePath)
|
||||
.then(exists => {
|
||||
if (!exists) {
|
||||
routes.add(`/api/assets/${image.id}.${format}`);
|
||||
}
|
||||
})
|
||||
.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 imgOutputFolder = './.output/public/imgs';
|
||||
const sizeCacheFolder = './public/imgs';
|
||||
|
||||
for (const size of sizes) {
|
||||
const key = Object.keys(size)[0];
|
||||
const sizeFolder = `${imgOutputFolder}/${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}`;
|
||||
|
||||
if (file.slice(-3) !== "mp4") {
|
||||
const image = sharp(filePath);
|
||||
|
||||
for (const size of sizes) {
|
||||
const key = Object.keys(size)[0];
|
||||
const destinationFile = path.join(sizeCacheFolder, key, file);
|
||||
try {
|
||||
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(imgOutputFolder, key, file));
|
||||
} else {
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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