nemunaire/travel-steps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

frontend: initial commit

Browse source 
Signed-off-by: Nicolas Froger <nicolas@kektus.xyz>
This commit is contained in:
Nicolas Froger 2024-07-21 22:33:33 +02:00
commit 08d529c381
No known key found for this signature in database
19 changed files with 5714 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

14
summer2024-frontend/.eslintrc.cjs Normal file
View file

@ -0,0 +1,14 @@
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')
module.exports = {
root: true,
'extends': [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/eslint-config-prettier/skip-formatting'
],
parserOptions: {
ecmaVersion: 'latest'
}
}

30
summer2024-frontend/.gitignore vendored Normal file
View file

@ -0,0 +1,30 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
.DS_Store
dist
dist-ssr
coverage
*.local
/cypress/videos/
/cypress/screenshots/
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
*.tsbuildinfo

8
summer2024-frontend/.prettierrc.json Normal file
View file

@ -0,0 +1,8 @@
{
"$schema": "https://json.schemastore.org/prettierrc",
"semi": false,
"tabWidth": 2,
"singleQuote": true,
"printWidth": 100,
"trailingComma": "none"
}

7
summer2024-frontend/.vscode/extensions.json vendored Normal file
View file

@ -0,0 +1,7 @@
{
"recommendations": [
"Vue.volar",
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode"
]
}

35
summer2024-frontend/README.md Normal file
View file

@ -0,0 +1,35 @@
# summer2024-frontend
This template should help get you started developing with Vue 3 in Vite.
## Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
## Customize configuration
See [Vite Configuration Reference](https://vitejs.dev/config/).
## Project Setup
```sh
npm install
```
### Compile and Hot-Reload for Development
```sh
npm run dev
```
### Compile and Minify for Production
```sh
npm run build
```
### Lint with [ESLint](https://eslint.org/)
```sh
npm run lint
```

13
summer2024-frontend/index.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>carnet de voyage été 2024 - kektus</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

8
summer2024-frontend/jsconfig.json Normal file
View file

@ -0,0 +1,8 @@
{
"compilerOptions": {
"paths": {
"@/*": ["./src/*"]
}
},
"exclude": ["node_modules", "dist"]
}

5092
summer2024-frontend/package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

32
summer2024-frontend/package.json Normal file
View file

@ -0,0 +1,32 @@
{
"name": "summer2024-frontend",
"version": "0.0.0",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
"format": "prettier --write src/"
},
"dependencies": {
"date-fns": "^3.6.0",
"lucide-vue-next": "^0.412.0",
"marked": "^13.0.2",
"pinia": "^2.1.7",
"vue": "^3.4.29",
"vue-fullpage.js": "^0.2.17",
"vue-router": "^4.3.3"
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.8.0",
"@vitejs/plugin-vue": "^5.0.5",
"@vue/eslint-config-prettier": "^9.0.0",
"eslint": "^8.57.0",
"eslint-plugin-vue": "^9.23.0",
"generate-license-file": "^3.5.0",
"prettier": "^3.2.5",
"vite": "^5.3.1"
}
}

BIN
summer2024-frontend/public/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.2 KiB

28
summer2024-frontend/src/App.vue Normal file
View file

@ -0,0 +1,28 @@
<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>
<template>
<div class="header">
<a id="kektus-link" href="https://www.kektus.fr"><h1 id="kektus">kektus</h1></a>
<h1 style="font-weight: 300">carnet de voyage été 2024</h1>
</div>
<RouterView />
</template>
<style scoped>
.header {
position: fixed;
width: 100%;
top: 0;
z-index: 9;
backdrop-filter: blur(10px);
background-color: rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
}
.header h1 {
font-size: 15pt;
}
</style>

23
summer2024-frontend/src/assets/main.css Normal file
View file

@ -0,0 +1,23 @@
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
body {
background-color: #262626;
color: white;
font-family: 'Raleway', sans-serif;
}
#kektus {
font-family: 'Montserrat', sans-serif;
user-select: none;
margin-left: 20px;
margin-right: 20px;
text-decoration: none;
}
#kektus-link,
#kektus-link:visited,
#kektus-link:hover {
color: white;
text-decoration: none;
}

156
summer2024-frontend/src/components/PostComponent.vue Normal file
View file

@ -0,0 +1,156 @@
<script setup>
import { ref } from 'vue'
import { EyeOff, Info } from 'lucide-vue-next'
defineProps(['post'])
const section = ref(null)
let postDataVisible = ref(true)
const postData = ref(null)
const postDataTitle = ref(null)
const postDataDescription = ref(null)
const postActionBtn = ref(null)
function postDataToggle() {
if (postDataVisible.value) {
for (const data of postData.value) {
data.classList.remove('post-data-visible')
}
for (const title of postDataTitle.value) {
title.style.display = 'none'
}
for (const desc of postDataDescription.value) {
desc.style.display = 'none'
}
for (const btn of postActionBtn.value) {
btn.style.top = 'auto'
btn.style.right = 'auto'
btn.style.left = '0'
btn.style.bottom = '0'
}
postDataVisible.value = false
} else {
for (const data of postData.value) {
data.classList.add('post-data-visible')
}
for (const title of postDataTitle.value) {
title.style.display = 'block'
}
for (const desc of postDataDescription.value) {
desc.style.display = 'block'
}
for (const btn of postActionBtn.value) {
btn.style.top = '0'
btn.style.right = '0'
btn.style.left = 'auto'
btn.style.bottom = 'auto'
}
postDataVisible.value = true
}
}
</script>
<template>
<div class="section" ref="section" :data-anchor="'post-' + post.id">
<div class="slide" v-for="asset in post.assets" :key="asset">
<img class="post-bg-media" :src="asset" />
<div class="post-container">
<div ref="postData" class="post-data post-data-visible">
<div class="post-action-btn" ref="postActionBtn" @click="postDataToggle">
<EyeOff v-if="postDataVisible" :size="20" />
<Info :size="20" v-else />
</div>
<h2 ref="postDataTitle">{{ post.location.city }}, {{ post.location.country }}</h2>
<div
ref="postDataDescription"
class="post-data-description scrollable-element"
v-html="post.formatedDescription"
></div>
</div>
</div>
</div>
</div>
</template>
<style scoped>
.post-action-btn {
position: absolute;
top: 0;
right: 0;
margin: 10px;
padding: 5px;
backdrop-filter: blur(10px);
border-radius: 4px;
background-color: rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: background-color 0.2s;
}
.post-action-btn:hover {
background-color: rgba(0, 0, 0, 0.2);
}
.section,
.slide {
position: relative;
background-size: cover;
overflow: hidden;
}
.post-container {
position: absolute;
right: 0;
bottom: 0;
top: 0;
width: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
pointer-events: none;
}
.post-data-visible {
backdrop-filter: blur(3px);
background-color: rgba(205, 205, 205, 0.1);
}
.post-data {
grid-area: 3 / 1 / 4 / 2;
padding: 5px 20px;
margin: 30px;
border-radius: 6px;
pointer-events: auto;
}
@media screen and (max-width: 1024px) {
.post-data {
grid-area: 3 / 1 / 4 / 3;
}
}
@media screen and (max-width: 500px) {
.post-data {
grid-area: 3 / 1 / 4 / 4;
margin: 5px;
}
}
.post-data-description {
max-height: 200px;
overflow: scroll;
}
.post-bg-media {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
object-fit: cover;
z-index: -100;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
</style>

65
summer2024-frontend/src/components/WelcomeComponent.vue Normal file
View file

@ -0,0 +1,65 @@
<script setup>
import { usePostsStore } from '@/stores/posts.js'
const postsStore = usePostsStore()
</script>
<template>
<div class="section" ref="section" data-anchor="welcome-section">
<div id="welcome-container">
<h3 class="welcome-content">3 semaines pour traverser 7 pays d'Europe en train</h3>
<div v-if="postsStore.posts.length > 0">
<p class="welcome-content">suivez mon voyage en naviguant vers le bas</p>
<div class="arrow" />
</div>
<div v-else>
<p>le contenu n'est pas encore disponible, revenez plus tard</p>
</div>
</div>
</div>
</template>
<style scoped>
#welcome-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
text-align: center;
}
.welcome-content {
margin-left: 20px;
margin-right: 20px;
}
.arrow {
margin-top: 40px;
margin-left: auto;
margin-right: auto;
display: block;
width: 1.5vw;
height: 1.5vw;
border-bottom: 5px solid white;
border-right: 5px solid white;
transform: rotate(45deg);
animation: arrowAnimation 3s infinite;
}
@keyframes arrowAnimation {
0% {
opacity: 0;
transform: rotate(45deg) translate(-20px, -20px);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: rotate(45deg) translate(20px, 20px);
}
}
</style>

17
summer2024-frontend/src/main.js Normal file
View file

@ -0,0 +1,17 @@
import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import 'vue-fullpage.js/dist/style.css'
import VueFullPage from 'vue-fullpage.js'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(VueFullPage)
app.use(createPinia())
app.use(router)
app.mount('#app')

15
summer2024-frontend/src/router/index.js Normal file
View file

@ -0,0 +1,15 @@
import { createRouter, createWebHistory } from 'vue-router'
import PostsView from '@/views/PostsView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: PostsView
}
]
})
export default router

33
summer2024-frontend/src/stores/posts.js Normal file
View file

@ -0,0 +1,33 @@
import { defineStore } from 'pinia'
import { ref } from 'vue'
import { formatRelative } from 'date-fns'
import { fr } from 'date-fns/locale'
import { marked } from 'marked'
export const usePostsStore = defineStore('posts', () => {
const postsApiPath = '/posts.json'
const posts = ref([])
function fetchPosts() {
fetch(postsApiPath)
.then((response) => {
return response.json()
})
.then((data) => {
posts.value = data.sort((a, b) => b.id - a.id) // highest ID (more recent) first
for (const post of posts.value) {
const postDate = new Date(post.date)
post.formatedDate = formatRelative(postDate, new Date(), { locale: fr })
post.formatedDescription = marked.parse(post.description)
}
})
.catch((error) => {
console.log('post list parsing failed with error: ' + error)
})
}
fetchPosts()
return { posts }
})

122
summer2024-frontend/src/views/PostsView.vue Normal file
View file

@ -0,0 +1,122 @@
<script setup>
import PostComponent from '@/components/PostComponent.vue'
import { usePostsStore } from '@/stores/posts.js'
import { ref } from 'vue'
import WelcomeComponent from '@/components/WelcomeComponent.vue'
const postsStore = usePostsStore()
const fullpage = ref(null)
const fullpageOptions = ref({
licenseKey: 'gplv3-license',
menu: '#menu',
scrollBar: true,
normalScrollElements: '.scrollable-element',
scrollOverflow: false,
onLeave: onLeave,
afterLoad: afterLoad,
credits: {enabled: false}
})
const menu = ref(null)
function onLeave(origin, destination, direction, trigger) {
if (destination.anchor === 'welcome-section') {
menu.value.style.opacity = '0'
} else {
menu.value.style.opacity = '1'
}
}
function afterLoad(origin, destination, direction, trigger) {
if (destination.anchor === 'welcome-section') {
menu.value.style.opacity = '0'
}
}
</script>
<template>
<div id="menu-grid">
<ul id="menu" class="scrollable-element" ref="menu">
<li :data-menuanchor="'post-' + post.id" v-for="post in postsStore.posts" :key="post.id">
<a :href="'#post-' + post.id">{{ post.formatedDate }}</a>
</li>
</ul>
</div>
<full-page
id="fullpage"
ref="fullpage"
:options="fullpageOptions"
@on-leave="onLeave"
@after-load="afterLoad"
>
<WelcomeComponent />
<PostComponent class="section" v-for="post in postsStore.posts" :key="post.id" :post="post" />
</full-page>
</template>
<style scoped>
#menu-grid {
position: fixed;
height: 100%;
width: 100%;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
z-index: 70;
pointer-events: none;
}
#menu {
grid-area: 3 / 5 / 4 / 6;
pointer-events: auto;
list-style-type: none;
max-height: 220px;
overflow-y: scroll;
margin-right: 20px;
transition: opacity 1s;
opacity: 0;
}
@media screen and (max-width: 1024px) {
#menu {
grid-area: 4 / 4 / 6 / 6;
}
}
@media screen and (max-width: 500px) {
#menu {
grid-area: 1 / 1 / 2 / 6;
margin-top: 50px;
}
}
#menu li {
margin: 10px;
border-radius: 10px;
backdrop-filter: blur(10px);
background-color: rgba(0, 0, 0, 0.1);
}
#menu li:hover {
background-color: rgba(100, 100, 100, 0.1);
}
#menu li.active,
#menu li.active:hover {
background-color: rgba(255, 255, 255, 0.1);
}
#menu li a {
text-decoration: none;
color: #fff;
padding: 9px 18px;
display: block;
text-align: right;
}
#menu li.active a,
#menu li.active:hover a:hover {
font-weight: bold;
}
</style>

16
summer2024-frontend/vite.config.js Normal file
View file

@ -0,0 +1,16 @@
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})