From 9b0e5cdd6a0e22ed3aaa0746ddd876c3411e1ed8 Mon Sep 17 00:00:00 2001
From: Pierre-Alexandre Martin <pierre-alexandre.martin@imt-atlantique.net>
Date: Tue, 14 Jan 2025 13:31:10 +0100
Subject: [PATCH] =?UTF-8?q?Fin=20du=20tutoriel=20Nuxt=20et=20configuration?=
=?UTF-8?q?=20du=20style=20conform=C3=A9ment=20=C3=A0=20la=20charte=20grap?=
=?UTF-8?q?hique?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
app.vue | 7 ++++++
assets/css/fonts.css | 35 ++++++++++++++++++++++++++++
assets/css/transitions.css | 24 +++++++++++++++++++
components/AppFooter.vue | 22 +++++++++++++++++-
components/AppHeader.vue | 18 ++++++++++++++-
data/mock/exercices.json | 38 +++++++++++++++++++++++++++++++
layouts/default.vue | 8 ++++++-
layouts/login.vue | 5 ++++
middleware/auth.ts | 6 +++++
nuxt.config.ts | 16 ++++++++++++-
package.json | 4 +++-
pages/about.vue | 5 ++++
pages/exercices.vue | 25 ++++++++++++++++++++
pages/exercices/[id].vue | 11 +++++++++
pages/index.vue | 5 ++++
pages/login.vue | 21 +++++++++++++++++
types/Exercice.ts | 14 ++++++++++++
types/enum/ExerciseCategory.ts | 5 ++++
types/enum/ExerciseSubCategory.ts | 8 +++++++
19 files changed, 272 insertions(+), 5 deletions(-)
create mode 100644 assets/css/fonts.css
create mode 100644 assets/css/transitions.css
create mode 100644 data/mock/exercices.json
create mode 100644 layouts/login.vue
create mode 100644 middleware/auth.ts
create mode 100644 pages/exercices.vue
create mode 100644 pages/exercices/[id].vue
create mode 100644 pages/login.vue
create mode 100644 types/Exercice.ts
create mode 100644 types/enum/ExerciseCategory.ts
create mode 100644 types/enum/ExerciseSubCategory.ts
diff --git a/app.vue b/app.vue
index d857939..8e56977 100644
--- a/app.vue
+++ b/app.vue
@@ -6,6 +6,13 @@ useHead({
})
</script>
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wdth,wght@0,75..100,300..800;1,75..100,300..800&family=Oswald:wght@200..700&display=swap');
+body {
+ margin: 0;
+}
+</style>
+
<template>
<div>
<NuxtLayout>
diff --git a/assets/css/fonts.css b/assets/css/fonts.css
new file mode 100644
index 0000000..bd03fb3
--- /dev/null
+++ b/assets/css/fonts.css
@@ -0,0 +1,35 @@
+/*source : https://fonts.google.com/selection/embed*/
+:root {
+ --montserrat-width: 700; /* Use a value from 100 to 900 */
+ --open-sans-width: 400; /* Use a value from 300 to 800 */
+ --oswald-width: 400; /* Use a value from 200 to 700 */
+}
+
+h1, h2, h3, h4, h5, h6, .header {
+ font-family: "Montserrat", serif;
+ font-optical-sizing: auto;
+ font-weight: var(--montserrat-width);
+ font-style: normal;
+}
+
+h1 { font-size: clamp(32px, 6vw, 36px); }
+h2 { font-size: clamp(24px, 5vw, 28px); }
+h3 { font-size: clamp(18px, 4vw, 22px); }
+p { font-size: clamp(14px, 3vw, 16px); }
+p p { font-size: clamp(12px, 2vw, 14px); }
+
+div, p, a, .open-sans {
+ font-family: "Open Sans", serif;
+ font-optical-sizing: auto;
+ font-weight: var(--open-sans-width);
+ font-style: normal;
+ font-variation-settings: "wdth" 100; /* Use a value from 75 to 100 */
+}
+
+.number {
+ font-family: "Oswald", serif;
+ font-optical-sizing: auto;
+ font-weight: var(--oswald-width);
+ font-style: normal;
+ font-size: clamp(18px, 4vw, 22px);
+}
\ No newline at end of file
diff --git a/assets/css/transitions.css b/assets/css/transitions.css
new file mode 100644
index 0000000..6a362a7
--- /dev/null
+++ b/assets/css/transitions.css
@@ -0,0 +1,24 @@
+/* Style transitions for page transitions */
+.page-enter-active, .page-leave-active {
+ transition: all 0.4s;
+}
+.page-enter-from, .page-leave-to {
+ opacity: 0;
+ filter: blur(1rem);
+}
+
+.rotate-enter-active, .rotate-leave-active {
+ transition: all 0.4s;
+}
+.rotate-enter-from, .rotate-leave-to {
+ opacity: 0;
+ transform: rotate3d(1, 1, 1, 15deg);
+}
+
+.layout-enter-active, .layout-leave-active {
+ transition: all 0.4s;
+}
+.layout-enter-from, .layout-leave-to {
+ opacity: 0;
+ filter: blur(1rem);
+}
\ No newline at end of file
diff --git a/components/AppFooter.vue b/components/AppFooter.vue
index 81db4d3..eeee7b9 100644
--- a/components/AppFooter.vue
+++ b/components/AppFooter.vue
@@ -1,5 +1,25 @@
+<script setup lang="ts">
+const appConfig = useAppConfig()
+</script>
+
+<style>
+footer {
+ position: fixed;
+ bottom: 0;
+ padding-left: 8px;
+ width: 100%;
+
+ display: flex;
+ background-color: v-bind(appConfig.theme.dark.colors.background);
+}
+footer > p {
+ margin: 1vh;
+ color: v-bind(appConfig.theme.dark.colors.primary);
+}
+</style>
+
<template>
<footer>
- <p>© 2024 3SPA</p>
+ <p>© 2025 3SPA</p>
</footer>
</template>
\ No newline at end of file
diff --git a/components/AppHeader.vue b/components/AppHeader.vue
index 848b86a..b21062f 100644
--- a/components/AppHeader.vue
+++ b/components/AppHeader.vue
@@ -2,8 +2,24 @@
const appConfig = useAppConfig()
</script>
+<style>
+header {
+ position: sticky;
+ top: 0;
+ padding-left: 8px;
+
+ display: flex;
+ justify-content: center;
+ background-color: v-bind(appConfig.theme.dark.colors.background);
+}
+.header {
+ margin: 1vh;
+ color: v-bind(appConfig.theme.dark.colors.secondary);
+}
+</style>
+
<template>
<header>
- <h1>{{appConfig.title}}</h1>
+ <h1 class="header">{{appConfig.title}}</h1>
</header>
</template>
diff --git a/data/mock/exercices.json b/data/mock/exercices.json
new file mode 100644
index 0000000..bdd45eb
--- /dev/null
+++ b/data/mock/exercices.json
@@ -0,0 +1,38 @@
+[
+ {
+ "id": 1,
+ "name": "Push-up",
+ "description": "The push-up is a basic exercise used in athletic training or physical therapy. It is a type of resistance training that develops the pectoral muscles and triceps, as well as the deltoids, serratus anterior, coracobrachialis and the midsection as a whole. Push-ups are a basic exercise used in civilian athletic training or physical education and commonly in military physical training.",
+ "category": "Renforcement",
+ "subCategory": "Upper Body",
+ "safetyInstructions": [
+ "Keep your body in a straight line from head to heels.",
+ "Keep your elbows close to your body."
+ ],
+ "generalInstructions": [
+ "Start in a plank position with your hands shoulder-width apart.",
+ "Lower your body until your chest nearly touches the floor.",
+ "Push yourself back up to the starting position."
+ ],
+ "diagram": "https://upload.wikimedia.org/wikipedia/commons/b/b8/Liegestuetz02_ani_fcm.gif",
+ "video": "https://www.youtube.com/watch?v=IODxDxX7oi4"
+ },
+ {
+ "id": 2,
+ "name": "Squat",
+ "description": "The squat is a lower body exercise. It primarily targets the quadriceps and the glutes, but also involves the hamstrings, the calves, and the lower back. The squat is often called 'the king of exercises' because it works many muscles at the same time.",
+ "category": "Renforcement"
+ },
+ {
+ "id": 3,
+ "name": "Running",
+ "description": "Running is a method of terrestrial locomotion allowing humans and other animals to move rapidly on foot. It is simply defined in athletics terms as a gait in which at regular points during the running cycle both feet are off the ground.",
+ "category": "Cardio"
+ },
+ {
+ "id": 4,
+ "name": "Stretching exercises",
+ "description": "Stretching is a form of physical exercise in which a specific muscle or tendon (or muscle group) is deliberately flexed or stretched in order to improve the muscle's felt elasticity and achieve comfortable muscle tone. The result is a feeling of increased muscle control, flexibility, and range of motion.",
+ "category": "Stretching"
+ }
+]
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
index 0d69f14..2b99b62 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,7 +1,13 @@
+<style>
+body {
+ margin-bottom: 6vh;
+}
+</style>
+
<template>
<div>
<AppHeader />
<slot />
<AppFooter />
</div>
-</template>
+</template>
\ No newline at end of file
diff --git a/layouts/login.vue b/layouts/login.vue
new file mode 100644
index 0000000..4dff124
--- /dev/null
+++ b/layouts/login.vue
@@ -0,0 +1,5 @@
+<template>
+ <div>
+ <slot />
+ </div>
+</template>
\ No newline at end of file
diff --git a/middleware/auth.ts b/middleware/auth.ts
new file mode 100644
index 0000000..bb7f74c
--- /dev/null
+++ b/middleware/auth.ts
@@ -0,0 +1,6 @@
+function isAuthenticated(): boolean { return true }
+export default defineNuxtRouteMiddleware((to, from) => {
+ if (!isAuthenticated()) {
+ return navigateTo('/login')
+ }
+})
diff --git a/nuxt.config.ts b/nuxt.config.ts
index c86f424..940648b 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -31,12 +31,26 @@ export default defineNuxtConfig({
head: {
charset: 'utf-8',
viewport: 'width=device-width, initial-scale=1',
- }
+ },
+ pageTransition: { name: 'page', mode: 'out-in' },
+ layoutTransition: { name: 'layout', mode: 'out-in' }
},
+
+ /** Les feuilles de style */
+ css: [
+ '~/assets/css/fonts.css',
+ '~/assets/css/transitions.css',
+ ],
+
components: [
{
path: '~/components',
pathPrefix: true,
},
],
+ imports: {
+ dirs: [
+ 'types/**'
+ ]
+ }
})
diff --git a/package.json b/package.json
index c9c523f..b19fa8a 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,9 @@
"dev": "node_modules/.bin/nuxt dev",
"generate": "node_modules/.bin/nuxt generate",
"preview": "node_modules/.bin/nuxt preview",
- "postinstall": "node_modules/.bin/nuxt prepare"
+ "postinstall": "node_modules/.bin/nuxt prepare",
+ "start": "node_modules/.bin/nuxt start",
+ "prod": " node .output/server/index.mjs"
},
"dependencies": {
"nuxt": "^3.15.1",
diff --git a/pages/about.vue b/pages/about.vue
index 2b2de16..52467d3 100644
--- a/pages/about.vue
+++ b/pages/about.vue
@@ -5,6 +5,11 @@ useHead({
{ name: 'description', content: 'Page d\'accueil de l\'interface administrateur du projet.' }
]
})
+definePageMeta({
+ pageTransition: {
+ name: 'rotate'
+ }
+})
</script>
<template>
diff --git a/pages/exercices.vue b/pages/exercices.vue
new file mode 100644
index 0000000..371b856
--- /dev/null
+++ b/pages/exercices.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import myData from '../data/mock/exercices.json';
+
+const router = useRouter()
+
+const exercices = ref(myData)
+</script>
+
+<template>
+ <div>
+ <h2>Exercices</h2>
+ <p v-for="exercice in exercices">
+ {{ exercice.name }} <br>
+ <p>{{ exercice.description }}</p>
+ </p>
+ <p v-for="exercice in exercices">
+ {{ exercice.name }} <br>
+ <p>{{ exercice.description }}</p>
+ </p>
+ </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/pages/exercices/[id].vue b/pages/exercices/[id].vue
new file mode 100644
index 0000000..96c0baf
--- /dev/null
+++ b/pages/exercices/[id].vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 1b10de4..b6d994c 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -4,10 +4,15 @@ useHead({
{ name: 'description', content: 'Page d\'accueil de l\'interface administrateur du projet.' }
]
})
+definePageMeta({
+ middleware: 'auth'
+})
</script>
<template>
<div>
<h2>Index vue</h2>
+ <NuxtLink to="/about">About page</NuxtLink><br>
+ <NuxtLink to="/login">Log in</NuxtLink>
</div>
</template>
\ No newline at end of file
diff --git a/pages/login.vue b/pages/login.vue
new file mode 100644
index 0000000..334f535
--- /dev/null
+++ b/pages/login.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+definePageMeta({
+ layout: 'login'
+})
+
+import { useRouter } from 'vue-router'
+const router = useRouter()
+</script>
+
+<template>
+ <div>
+ <h2>Login</h2><br>
+ username: <input type="text" /><br>
+ password: <input type="password" /><br>
+ <button @click="router.push('/')">Log in</button>
+ </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/types/Exercice.ts b/types/Exercice.ts
new file mode 100644
index 0000000..80fc46f
--- /dev/null
+++ b/types/Exercice.ts
@@ -0,0 +1,14 @@
+import type {ExerciseCategory} from "~/types/enum/ExerciseCategory";
+import type {ExerciseSubCategory} from "~/types/enum/ExerciseSubCategory";
+
+export interface Exercise {
+ id: number;
+ name: string;
+ description: string;
+ category: ExerciseCategory;
+ subCategory?: ExerciseSubCategory;
+ safetyInstructions?: string[];
+ generalInstructions?: string[];
+ diagram?: string;
+ video?: string;
+}
\ No newline at end of file
diff --git a/types/enum/ExerciseCategory.ts b/types/enum/ExerciseCategory.ts
new file mode 100644
index 0000000..760928e
--- /dev/null
+++ b/types/enum/ExerciseCategory.ts
@@ -0,0 +1,5 @@
+export enum ExerciseCategory {
+ Renforcement = 'Renforcement',
+ Cardio = 'Cardio',
+ Stretching = 'Stretching',
+}
\ No newline at end of file
diff --git a/types/enum/ExerciseSubCategory.ts b/types/enum/ExerciseSubCategory.ts
new file mode 100644
index 0000000..2dd536e
--- /dev/null
+++ b/types/enum/ExerciseSubCategory.ts
@@ -0,0 +1,8 @@
+export enum ExerciseSubCategory {
+ Chest = "Chest",
+ Back = "Back",
+ Legs = "Legs",
+ Shoulders = "Shoulders",
+ Arms = "Arms",
+ Other = "Other"
+}
\ No newline at end of file
--
GitLab