🔀 Resolve merge conflicts for about page

Author: Mw3y

.dockerignore

@@ -0,0 +1,23 @@
+node_modules
+Dockerfile*
+docker-compose*
+.dockerignore
+.git
+.gitignore
+README.md
+LICENSE
+.vscode
+Makefile
+helm-charts
+.env
+.editorconfig
+.idea
+coverage*
+
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist

.gitlab-ci.yml

@@ -0,0 +1,46 @@
+variables:
+  GIT_SUBMODULE_STRATEGY: recursive
+  DOCKER_IMAGE: 'docker:latest'
+  FOLDER_TO_BUILD: '.'
+
+stages:
+  - trigger
+  - build
+  - docker-push
+
+trigger-pipeline:
+  stage: trigger
+  script:
+    - echo "Manual trigger to start the pipeline."
+  when: manual
+
+.docker-stage:
+  image: $DOCKER_IMAGE
+  services:
+    - docker:dind
+  before_script:
+    - docker login -u "$CI_REGISTRY_USER" -p "$CI_REGISTRY_PASSWORD" $CI_REGISTRY
+
+docker-build:
+  extends: .docker-stage
+  stage: build
+  before_script:
+    - docker login -u "$CI_REGISTRY_USER" -p "$CI_REGISTRY_PASSWORD" $CI_REGISTRY
+  script:
+    - docker pull "$CI_REGISTRY_IMAGE:$CI_COMMIT_REF_SLUG" || true
+    - docker pull "$CI_REGISTRY_IMAGE:latest" || true
+    - docker build --pull --cache-from "$CI_REGISTRY_IMAGE:$CI_COMMIT_REF_SLUG" --cache-from "$CI_REGISTRY_IMAGE:latest" -t "$CI_REGISTRY_IMAGE:$CI_COMMIT_SHORT_SHA" -t "$CI_REGISTRY_IMAGE:$CI_COMMIT_REF_SLUG" "$FOLDER_TO_BUILD"
+    - docker push "$CI_REGISTRY_IMAGE:$CI_COMMIT_SHORT_SHA"
+    - docker push "$CI_REGISTRY_IMAGE:$CI_COMMIT_REF_SLUG"
+  when: on_success
+
+docker-push-latest:
+  extends: .docker-stage
+  stage: docker-push
+  script:
+    - docker pull "$CI_REGISTRY_IMAGE:$CI_COMMIT_SHORT_SHA"
+    - docker tag "$CI_REGISTRY_IMAGE:$CI_COMMIT_SHORT_SHA" "$CI_REGISTRY_IMAGE:latest"
+    - docker push "$CI_REGISTRY_IMAGE:latest"
+  rules:
+    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
+      when: on_success

Dockerfile

@@ -1,14 +1,36 @@
-FROM node:22-alpine3.19
+# use the official Bun image
+# see all versions at https://hub.docker.com/r/oven/bun/tags
+FROM oven/bun:1 AS base
+WORKDIR /usr/src/app
 
-WORKDIR /app
+# install dependencies into temp directory
+# this will cache them and speed up future builds
+FROM base AS install
+RUN mkdir -p /temp/dev
+COPY package.json bun.lockb /temp/dev/
+RUN cd /temp/dev && bun install --frozen-lockfile
 
-COPY package*.json ./
-
-RUN yarn install
+# install with --production (exclude devDependencies)
+RUN mkdir -p /temp/prod
+COPY package.json bun.lockb /temp/prod/
+RUN cd /temp/prod && bun install --frozen-lockfile --production
 
+# copy node_modules from temp directory
+# then copy all (non-ignored) project files into the image
+FROM base AS prerelease
+COPY --from=install /temp/dev/node_modules node_modules
 COPY . .
 
-EXPOSE 3000
+# [optional] tests & build
+ENV NODE_ENV=production
+RUN bun test
+RUN bun run build
+
+# copy production dependencies and source code into final image
+FROM base AS release
+COPY --from=prerelease /usr/src/app/.output .
 
-RUN yarn run build
-CMD [ "yarn", "run", "start" ]
+# run the app
+USER bun
+EXPOSE 3000/tcp
+ENTRYPOINT [ "bun", "run", "./server/index.mjs" ]

README.md

@@ -33,3 +33,5 @@ bun run preview
 ```
 
 Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+
+- ne pas mettre de tabs dans les codes, mais des espaces

bun.lockb

@@ -12,6 +12,9 @@
   const studentData = useStudentDataStore();
   const { section } = storeToRefs(studentData);
 
+  const isLoadingNextExercise = ref(false);
+  const isLoadingPreviousExercise = ref(false);
+
   const colorMode = useColorMode();
   const isDarkMode = computed(() => colorMode.value === 'dark');
   function switchColorMode() {
@@ -76,12 +79,25 @@
           <Tooltip>
             <TooltipTrigger>
               <Button
-                @click="navigateTo(previousExerciseUrl)"
-                :disabled="!previousExerciseUrl"
+                @click="
+                  () => {
+                    isLoadingPreviousExercise = true;
+                    navigateTo(previousExerciseUrl);
+                  }
+                "
+                :disabled="
+                  !previousExerciseUrl ||
+                  isLoadingPreviousExercise ||
+                  isLoadingNextExercise
+                "
                 variant="outline"
                 size="icon"
               >
-                <LucideChevronLeft class="w-4 h-4" />
+                <LucideLoaderCircle
+                  v-if="isLoadingPreviousExercise"
+                  class="w-4 h-4 animate-spin"
+                />
+                <LucideChevronLeft v-else class="w-4 h-4" />
               </Button>
             </TooltipTrigger>
             <TooltipContent>
@@ -111,12 +127,25 @@
 
         <Button
           v-if="isPlayground"
-          @click="navigateTo(nextExerciseUrl)"
-          :disabled="!nextExerciseUrl"
+          @click="
+            () => {
+              isLoadingNextExercise = true;
+              navigateTo(nextExerciseUrl);
+            }
+          "
+          :disabled="
+            !nextExerciseUrl ||
+            isLoadingPreviousExercise ||
+            isLoadingNextExercise
+          "
           variant="default"
           size="default"
         >
-          <LucideChevronRight class="w-4 h-4 mr-1" />
+          <LucideLoaderCircle
+            v-if="isLoadingNextExercise"
+            class="w-4 h-4 mr-1 animate-spin"
+          />
+          <LucideChevronRight v-else class="w-4 h-4 mr-1" />
           {{ nextExerciseUrl ? 'Exercice suivant' : 'Aucun exercice suivant' }}
         </Button>
 

components/Navbar.vue

@@ -24,9 +24,9 @@
           <LucideSwatchBook class="ml-2 h-5 w-5" />
         </AlertDialogTitle>
         <AlertDialogDescription>
-          Voluptate reprehenderit aute ullamco culpa consectetur laboris
-          voluptate ea proident ut. Reprehenderit occaecat dolore qui ad enim
-          dolor.
+          Bienvenue sur le site web de programmation de Students 4 Students !
+          Chaque section apprend un langage de programmation différent, veuillez
+          choisir celle dans laquelle vous êtes inscrits en BA1 ou CMS.
         </AlertDialogDescription>
       </AlertDialogHeader>
       <AlertDialogFooter>

components/on-boarding/SectionDialog.vue

@@ -14,32 +14,22 @@
 <template>
   <div class="h-full bg-accent">
     <ContentRenderer :value="props.exerciseData">
-      <ScrollAreaRoot class="h-full px-4">
-        <ScrollAreaViewport
-          class="h-full w-full [&>div]:!flex [&>div]:flex-col [&>div]:justify-between [&>div]:h-full"
-        >
-          <ContentRendererMarkdown
-            :value="props.exerciseData"
-            class="py-4 prose font-main text-justify prose-headings:text-left dark:prose-invert text-neutral-700 dark:text-neutral-200 prose-img:w-full prose-img:border prose-img:rounded-md prose-img:first:mt-0 prose-pre:bg-background prose-pre:border prose-pre:p-4 lg:prose-lg prose-code:font-code prose-code:after:content-[''] prose-code:before:content-[''] prose-h2:after:mt-2 prose-h2:font-[750] prose-h2:first:mt-0 prose-h2:after:content-[''] prose-h2:after:w-full prose-h2:after:h-0.5 prose-h2:after:block prose-h2:after:bg-primary/50 prose-h3:after:mt-1 prose-h3:after:content-[''] prose-h3:after:w-full prose-h3:after:h-0.5 prose-h3:after:block prose-h3:after:bg-primary/35 prose-a:prose-headings:font-[610] prose-a:prose-headings:pointer-events-none prose-a:prose-headings:cursor-default prose-a:prose-headings:no-underline prose-a:prose-headings:text-neutral-950 prose-a:prose-headings:dark:text-neutral-100 prose-a:font-[570] prose-a:underline-offset-[3px] prose-a:text-primary prose-strong:font-semibold prose-strong:dark:font-bold prose-strong:dark:text-[0.99em] prose-code:prose-p:bg-background prose-code:prose-p:dark:border-slate-400/25 prose-code:prose-p:break-keep prose-code:prose-p:border prose-code:prose-p:rounded prose-code:prose-p:px-2 prose-code:prose-p:m-0.5 prose-code:prose-p:inline-block prose-blockquote:border-slate-300/50 prose-ul:mt-0"
-          />
-          <div class="flex gap-2 [&>*]:w-full pb-4">
-            <Button @click="navigateTo('/about')" variant="outline" size="lg">
-              <LucideUsers class="h-4 mr-1" />
-              À propos
-            </Button>
-            <PlaygroundDialogNeedHelp>
-              <template #trigger>
-                <Button variant="outline" size="lg">
-                  <LucideCircleHelp class="h-4 mr-1" />
-                  J'ai besoin d'aide
-                </Button>
-              </template>
-            </PlaygroundDialogNeedHelp>
-          </div>
-        </ScrollAreaViewport>
-        <ScrollBar />
-        <ScrollAreaCorner />
-      </ScrollAreaRoot>
+      <ScrollArea class="h-full px-4">
+        <ContentRendererMarkdown
+          :value="props.exerciseData"
+          class="py-4 pb-0 prose font-main text-justify prose-headings:text-left dark:prose-invert text-neutral-700 dark:text-neutral-200 prose-img:w-full prose-img:border prose-img:rounded-md prose-img:first:mt-0 prose-pre:bg-background prose-pre:border prose-pre:p-4 lg:prose-lg prose-code:font-code prose-code:after:content-[''] prose-code:before:content-[''] prose-h2:after:mt-2 prose-h2:font-[750] prose-h2:first:mt-0 prose-h2:after:content-[''] prose-h2:after:w-full prose-h2:after:h-0.5 prose-h2:after:block prose-h2:after:bg-primary/50 prose-h3:after:mt-1 prose-h3:after:content-[''] prose-h3:after:w-full prose-h3:after:h-0.5 prose-h3:after:block prose-h3:after:bg-primary/35 prose-a:prose-headings:font-[610] prose-a:prose-headings:pointer-events-none prose-a:prose-headings:cursor-default prose-a:prose-headings:no-underline prose-a:prose-headings:text-neutral-950 prose-a:prose-headings:dark:text-neutral-100 prose-a:font-[570] prose-a:underline-offset-[3px] prose-a:text-primary prose-strong:font-semibold prose-strong:dark:font-bold prose-strong:dark:text-[0.99em] prose-code:prose-p:bg-background prose-code:prose-p:dark:border-slate-400/25 prose-code:prose-p:break-keep prose-code:prose-p:border prose-code:prose-p:rounded prose-code:prose-p:px-2 prose-code:prose-p:m-0.5 prose-code:prose-p:inline-block prose-blockquote:border-slate-300/50 prose-ul:mt-0"
+        />
+        <div class="flex gap-2 [&>*]:w-full mb-4">
+          <Button variant="outline" size="lg">
+            <LucideCircleHelp class="h-4 mr-1" />
+            J'ai besoin d'aide
+          </Button>
+          <Button variant="outline" size="lg">
+            <LucideUsers class="h-4 mr-1" />
+            À propos
+          </Button>
+        </div>
+      </ScrollArea>
       <template #empty>
         <div class="flex h-full items-center justify-center">
           <div class="flex flex-col space-y-4 items-center justify-center">

components/playground/ExerciseView.vue

@@ -1,20 +1,36 @@
+<script setup lang="ts">
+  const props = defineProps<{
+    onlyKeepTrigger?: boolean;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'acknowledgeWarning'): void;
+  }>();
+</script>
+
 <template>
-  <Dialog>
+  <slot v-if="props.onlyKeepTrigger" name="trigger" />
+  <Dialog v-bind="$attrs" v-else>
+    <DialogTrigger as-child>
+      <slot name="trigger" />
+    </DialogTrigger>
     <DialogContent>
       <DialogHeader>
         <DialogTitle>Attention</DialogTitle>
         <DialogDescription>
-          Laboris commodo cillum est laborum nulla do nulla eu velit. Eu ullamco
-          nostrud ex adipisicing duis ad cupidatat. Consectetur ex esse occaecat
-          pariatur.
+          Avez-vous déjà passé du temps à chercher la solution par vous-même ?
+          Passer du temps à chercher maintenant auprès d'assistants est le plus
+          productif pour vous !
         </DialogDescription>
       </DialogHeader>
 
       <DialogFooter>
-        <Button size="default">Oui</Button>
-        <Button size="default" variant="outline">
-          Non, je souhaite continuer à chercher
-        </Button>
+        <Button @click="emit('acknowledgeWarning')" size="default">Oui</Button>
+        <DialogClose as-child>
+          <Button size="default" variant="outline">
+            Non, je souhaite continuer à chercher
+          </Button>
+        </DialogClose>
       </DialogFooter>
     </DialogContent>
   </Dialog>

components/playground/dialog/CorrectedCodeWarning.vue

@@ -15,9 +15,7 @@
         />
         <DialogTitle>Exercice réussi !</DialogTitle>
         <DialogDescription>
-          Laboris commodo cillum est laborum nulla do nulla eu velit. Eu ullamco
-          nostrud ex adipisicing duis ad cupidatat. Consectetur ex esse occaecat
-          pariatur.
+          Bravo ! Votre code fonctionne exactement comme demandé.
         </DialogDescription>
       </DialogHeader>
 

components/playground/dialog/ExerciseCompletion.vue

@@ -0,0 +1,27 @@
+<template>
+  <PlaygroundEditorSkeleton v-if="!hasEditorLoaded && displayLoader" />
+  <DelayHydration>
+    <LazyPlaygroundEditorWrapper
+      @update:load="hasEditorLoaded = true"
+      v-bind="$props"
+      v-model="writtenCode"
+    />
+  </DelayHydration>
+</template>
+
+<script lang="ts" setup>
+  import type { EditorProps, EditorEmits } from '.';
+
+  defineProps<EditorProps>();
+  defineEmits<EditorEmits>();
+
+  const displayLoader = ref(false);
+  const hasEditorLoaded = ref(false);
+  const writtenCode = defineModel<string>();
+
+  onMounted(() => {
+    setTimeout(() => {
+      displayLoader.value = true;
+    }, 1000);
+  });
+</script>

components/playground/editor/EditorOptimized.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+  // The width of each skeleton element in percentage
+  const skeletonSizes = [30, 55, 40, 0, 25, 40, 35, 30, 20, 15, 0, 50, 35, 40];
+</script>
+
+<template>
+  <div class="w-full space-y-2 p-4">
+    <p class="font-medium mb-4 text-muted-foreground">
+      Chargement de l'éditeur en cours... Cela peut prendre un moment.
+    </p>
+    <Skeleton
+      v-for="width in skeletonSizes"
+      :style="`width: ${width}%`"
+      :class="`h-5`"
+    />
+  </div>
+</template>