Create the course page

src/App.vue

@@ -132,5 +132,33 @@ html {
     font-size: 1.5rem;
     line-height: 1.7rem;
   }
+
+  h4 {
+    font-size: 1.3rem;
+    line-height: 1.5rem;
+  }
+
+  h5 {
+    font-size: 1.1rem;
+    line-height: 1.3rem;
+  }
+
+  h6 {
+    font-size: 1rem;
+    line-height: 1.2rem;
+  }
+
+  i {
+    font-style: normal;
+    font-size: 1rem;
+
+    &.nv {
+      font-family: "NovaIcons", sans-serif;
+    }
+
+    &.us {
+      font-family: "Unistra Symbol", sans-serif;
+    }
+  }
 }
 </style>

src/components/Core/PageHeader.vue

+<script lang="ts" setup>
+import SignComponent from '@/components/Core/SignComponent.vue'
+import type { PageHeaderThumbnail } from '#/Picture'
+
+defineProps<{
+  thumbnail: PageHeaderThumbnail;
+}>()
+</script>
+
+<template>
+  <header>
+    <img
+      :alt="thumbnail.alt"
+      :src="thumbnail.url"
+    />
+
+    <SignComponent/>
+  </header>
+</template>
+
+<style lang="scss" scoped>
+header {
+  height: 400px;
+  position: relative;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+</style>

src/router/index.ts

@@ -12,6 +12,7 @@ const router = createRouter({
       path: '/course/:id',
       name: 'CourseDetail',
       component: import('@/views/CourseDetail.vue'),
+      props: true,
     },
   ],
 })

src/stores/useCourseStore.ts

@@ -6,7 +6,7 @@ import type { AxiosError } from 'axios'
 import { customMarked } from '@/plugins/marked'
 
 export interface CourseStateStore {
-  courseDisplayed: CourseDetail | null;
+  courseDisplayed: StrapiObject<CourseWithThumbnail> | null;
   courses: StrapiObject<CourseWithThumbnail>[];
 }
 
@@ -17,6 +17,32 @@ export const useCourseStore = defineStore('Course', {
   }),
 
   actions: {
+    async loadCourse(id: number): Promise<void> {
+      try {
+        const response = await _axios.get<CourseDetail>(`/courses/${id}?populate[]=thumbnail`)
+        this.courseDisplayed = {
+          ...response.data.data,
+          attributes: {
+            ...response.data.data.attributes,
+            abstract: customMarked(response.data.data.attributes.abstract),
+            content: customMarked(response.data.data.attributes.content),
+            thumbnail: {
+              ...response.data.data.attributes.thumbnail,
+              data: {
+                ...response.data.data.attributes.thumbnail.data,
+                attributes: {
+                  ...response.data.data.attributes.thumbnail.data.attributes,
+                  url: `${import.meta.env.VITE_APP_BACK_URL}${response.data.data.attributes.thumbnail.data.attributes.url}`,
+                },
+              },
+            },
+          },
+        }
+      } catch (error) {
+        throw Error((error as AxiosError<StrapiError>).response?.data.error.message)
+      }
+    },
+
     async loadCourses(): Promise<void> {
       try {
         const response = await _axios.get<CourseList>('/courses?populate[]=thumbnail')

src/views/CourseDetail.vue

-<template>
-  <section></section>
-</template>
+<script lang="ts" setup>
+import PageHeader from '@/components/Core/PageHeader.vue'
+import { computed, onMounted, toRefs } from 'vue'
+import { useCourseStore } from '@/stores/useCourseStore'
+import { useQuasar } from 'quasar'
+import type { PageHeaderThumbnail } from '#/Picture'
 
-<script>
-export default {
-  name: 'CourseDetail',
-}
+const props = defineProps<{
+  id: string;
+}>()
+const { id } = toRefs(props)
+
+const courseStore = useCourseStore()
+const { notify } = useQuasar()
+onMounted(async () => {
+  try {
+    await courseStore.loadCourse(parseInt(id.value, 10))
+  } catch (error) {
+    notify({
+      message: (error as Error).message,
+      type: 'negative',
+    })
+  }
+})
+
+const thumbnail = computed<PageHeaderThumbnail>(() => ({
+  url: courseStore.courseDisplayed?.attributes.thumbnail.data.attributes.url || '',
+  alt: courseStore.courseDisplayed?.attributes.thumbnail.data.attributes.alternativeText || '',
+}))
 </script>
 
-<style scoped>
+<template>
+  <main>
+    <PageHeader
+      :thumbnail="thumbnail"
+    />
 
+    <article>
+      <header>
+        <h1>{{ courseStore.courseDisplayed?.attributes.title || '' }}</h1>
+      </header>
+
+      <section v-html="courseStore.courseDisplayed?.attributes.content || ''"/>
+    </article>
+  </main>
+</template>
+
+<style lang="scss" scoped>
+@import "src/assets/style/container";
+
+main {
+  > article {
+    @include container(true);
+  }
+}
 </style>

src/views/HomeView.vue

 <script lang="ts" setup>
-import SignComponent from '@/components/Core/SignComponent.vue'
 import { onMounted } from 'vue'
 import { useCourseStore } from '@/stores/useCourseStore'
 import { useQuasar } from 'quasar'
+import PageHeader from '@/components/Core/PageHeader.vue'
 
 const courseStore = useCourseStore()
 const { notify } = useQuasar()
@@ -20,17 +20,16 @@ onMounted(async () => {
 
 <template>
   <main>
-    <header>
-      <img
-        alt="Illustration montrant des petits robots qui travaillent sur un ordinateur"
-        src="/img/home-header-img.png"
-      />
-
-      <SignComponent/>
-    </header>
+    <PageHeader :thumbnail="{
+      url: '/img/home-header-img.png',
+      alt: 'Illustration montrant des petits robots qui travaillent sur un ordinateur',
+    }"/>
 
     <section>
-      <h1>Liste des tutos</h1>
+      <h1>
+        <i class="nv nv-content-view-module"/>
+        Liste des tutos
+      </h1>
 
       <section>
         <RouterLink
@@ -62,17 +61,6 @@ onMounted(async () => {
 @import "src/assets/style/_container.scss";
 
 main {
-  header {
-    height: 400px;
-    position: relative;
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-  }
-
   > section {
     @include container(true);
 

types/Picture.d.ts

@@ -30,3 +30,8 @@ export interface Picture extends StrapiModel {
   url: string;
   width: number;
 }
+
+interface PageHeaderThumbnail {
+  url: string;
+  alt: string;
+}