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