Utilisation de ThatLatexLib.

Merge pull request #293 from Skyost/that-latex-lib
Skyost · Jul 22, 2024 · 3a3df46 · 3a3df46
2 parents 19b3da1 + c38718f
commit 3a3df46
Show file tree

Hide file tree

Showing 64 changed files with 11,434 additions and 9,199 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
diff --git a/assets/app.scss b/assets/app.scss
@@ -115,3 +115,11 @@ $enable-rounded: false;
   --bs-btn-active-bg: #{shade-color($green, 20%)};
   --bs-btn-active-border-color: #{shade-color($green, 20%)};
 }
+
+.btn-link.dropdown-toggle {
+  text-decoration: none;
+}
+
+.vue-icon {
+  vertical-align: -0.125em;
+}
diff --git a/components/Cards/BigCard.vue b/components/Cards/BigCard.vue
@@ -2,7 +2,7 @@
 import FlatCard from '~/components/Cards/FlatCard'
 
 withDefaults(defineProps<{
-  sal?: string,
+  sal?: string
   blue?: boolean
 }>(), {
   sal: undefined,
@@ -11,13 +11,24 @@ withDefaults(defineProps<{
 </script>
 
 <template>
-  <ski-container :fluid="true">
-    <ski-columns :data-sal="sal" class="justify-content-center">
-      <ski-column width="12" xl="9" lg="10" class="pr-md-0 pl-md-0">
-        <flat-card :big="true" :blue="blue">
+  <b-container :fluid="true">
+    <b-row
+      :data-sal="sal"
+      class="justify-content-center"
+    >
+      <b-col
+        cols="12"
+        xl="9"
+        lg="10"
+        class="pr-md-0 pl-md-0"
+      >
+        <flat-card
+          :big="true"
+          :blue="blue"
+        >
           <slot />
         </flat-card>
-      </ski-column>
-    </ski-columns>
-  </ski-container>
+      </b-col>
+    </b-row>
+  </b-container>
 </template>
diff --git a/components/Cards/CardColumn.vue b/components/Cards/CardColumn.vue
@@ -2,10 +2,10 @@
 import FlatCard from '~/components/Cards/FlatCard'
 
 withDefaults(defineProps<{
-  to?: string,
-  blue?: boolean,
-  size: number,
-  mb?: number,
+  to?: string
+  blue?: boolean
+  size: number
+  mb?: number
   image?: string
 }>(), {
   to: undefined,
@@ -16,13 +16,25 @@ withDefaults(defineProps<{
 </script>
 
 <template>
-  <ski-column :class="`mb-xl-${mb}`" width="12" :lg="(size + 1).toString()" :xl="size.toString()">
-    <nuxt-link class="link" :to="to">
-      <flat-card :image="image" class="h-100" :blue="blue">
+  <b-col
+    :class="`mb-xl-${mb}`"
+    cols="12"
+    :lg="size + 1"
+    :xl="size"
+  >
+    <nuxt-link
+      class="link"
+      :to="to"
+    >
+      <flat-card
+        :image="image"
+        class="h-100"
+        :blue="blue"
+      >
         <slot />
       </flat-card>
     </nuxt-link>
-  </ski-column>
+  </b-col>
 </template>
 
 <style lang="scss" scoped>

diff --git a/components/Cards/CardsRow.vue b/components/Cards/CardsRow.vue
@@ -7,11 +7,17 @@ withDefaults(defineProps<{
 </script>
 
 <template>
-  <ski-container class="flat-cards" :fluid="true">
-    <ski-columns class="justify-content-center" :data-sal="sal">
+  <b-container
+    class="flat-cards"
+    :fluid="true"
+  >
+    <b-row
+      class="justify-content-center"
+      :data-sal="sal"
+    >
       <slot />
-    </ski-columns>
-  </ski-container>
+    </b-row>
+  </b-container>
 </template>
 
 <style lang="scss" scoped>

diff --git a/components/Cards/CommentCard.vue b/components/Cards/CommentCard.vue
@@ -13,23 +13,41 @@ const avatarUrl = computed<string>(() => getAvatarUrl(props.comment.author))
 
 <template>
   <big-card class="comment">
-    <ski-columns>
-      <ski-column width="12" lg="3" class="mb-lg-0 mb-4">
+    <b-row>
+      <b-col
+        cols="12"
+        lg="3"
+        class="mb-lg-0 mb-4"
+      >
         <a :href="`#commentaire-${comment._id}`">
-          <img :src="avatarUrl" :alt="comment.author" class="avatar">
+          <img
+            :src="avatarUrl"
+            :alt="comment.author"
+            class="avatar"
+          >
         </a>
-      </ski-column>
-      <ski-column width="12" lg="9" class="content">
+      </b-col>
+      <b-col
+        cols="12"
+        lg="9"
+        class="content"
+      >
         <h3 :id="`commentaire-${comment._id}`">
           {{ comment.author }}
-          <span v-if="site.moderators.includes(comment.author)" class="badge bg-info">
+          <span
+            v-if="site.moderators.includes(comment.author)"
+            class="badge bg-info"
+          >
             Modérateur
           </span>
         </h3>
-        <p class="mb-4" v-text="comment.message" />
+        <p
+          class="mb-4"
+          v-text="comment.message"
+        />
         <small class="d-block text-right text-muted">{{ date }} {{ time }}</small>
-      </ski-column>
-    </ski-columns>
+      </b-col>
+    </b-row>
   </big-card>
 </template>
 

diff --git a/components/Cards/ErrorCard.vue b/components/Cards/ErrorCard.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import katex from 'katex'
 import BigCard from '~/components/Cards/BigCard.vue'
 
 const props = defineProps<{ error: any }>()
@@ -22,6 +23,14 @@ const title = computed<string>(() => {
   }
   return 'Erreur'
 })
+
+const integral = computed<string>(() => {
+  return katex.renderToString(`\\begin{align*}
+  \\int_1^5 9x^2 + 2x + 2 \\, \\mathrm{d}x &= \\left[ 3x^3 + x^2 + 2x \\right]_1^5 \\\\
+  &= (3 \\times 5^3 + 5^2 + 2 \\times 5) - (3 \\times 1^3 + 1^2 + 2 \\times 1) \\\\
+  &= \\color{red} 404
+\\end{align*}`, { displayMode: true })
+})
 </script>
 
 <template>
@@ -30,16 +39,25 @@ const title = computed<string>(() => {
 
     <p>
       Vous pouvez continuer votre navigation en allant sur <a href="javascript:history.back()">la page précédente</a>,
-      en allant sur <nuxt-link to="/">la page d'accueil</nuxt-link> ou accédant à <nuxt-link to="/cours">l'index des cours</nuxt-link>.
+      en allant sur <nuxt-link to="/">
+        la page d'accueil
+      </nuxt-link> ou accédant à <nuxt-link to="/cours">
+        l'index des cours
+      </nuxt-link>.
     </p>
 
     <p v-if="errorCode === 404">
       Si quelque chose devait se trouver ici, n'hésitez pas à
-      <nuxt-link to="/a-propos/#contact">me contacter</nuxt-link> pour me le signaler.
+      <nuxt-link to="/a-propos/#contact">
+        me contacter
+      </nuxt-link> pour me le signaler.
     </p>
 
-    <span v-if="errorCode === 404" class="d-block mt-4">
-      <span class="katex-display"><span class="katex"><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height: 5.80007em; vertical-align: -2.65003em;" /><span class="mord"><span class="mtable"><span class="col-align-r"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height: 3.15003em;"><span class="" style="top: -5.15003em;"><span class="pstrut" style="height: 3.56401em;" /><span class="mord"><span class="mop"><span class="mop op-symbol large-op" style="margin-right: 0.44445em; position: relative; top: -0.001125em;">∫</span><span class="msupsub"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height: 1.56401em;"><span class="" style="top: -1.78805em; margin-left: -0.44445em; margin-right: 0.05em;"><span class="pstrut" style="height: 2.7em;" /><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mtight">1</span></span></span></span><span class="" style="top: -3.8129em; margin-right: 0.05em;"><span class="pstrut" style="height: 2.7em;" /><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mtight">5</span></span></span></span></span><span class="vlist-s">&ZeroWidthSpace;</span></span><span class="vlist-r"><span class="vlist" style="height: 0.91195em;"><span class="" /></span></span></span></span></span><span class="mspace" style="margin-right: 0.166667em;" /><span class="mord">9</span><span class="mord"><span class="mord mathnormal">x</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height: 0.864108em;"><span class="" style="top: -3.113em; margin-right: 0.05em;"><span class="pstrut" style="height: 2.7em;" /><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">2</span></span></span></span></span></span></span></span><span class="mspace" style="margin-right: 0.222222em;" /><span class="mbin">+</span><span class="mspace" style="margin-right: 0.222222em;" /><span class="mord">2</span><span class="mord mathnormal">x</span><span class="mspace" style="margin-right: 0.222222em;" /><span class="mbin">+</span><span class="mspace" style="margin-right: 0.222222em;" /><span class="mord">2</span><span class="mspace" style="margin-right: 0.166667em;" /><span class="mord mathrm">d</span><span class="mord mathnormal">x</span></span></span><span class="" style="top: -3.07398em;"><span class="pstrut" style="height: 3.56401em;" /><span class="mord" /></span><span class="" style="top: -1.57398em;"><span class="pstrut" style="height: 3.56401em;" /><span class="mord" /></span></span><span class="vlist-s">&ZeroWidthSpace;</span></span><span class="vlist-r"><span class="vlist" style="height: 2.65003em;"><span class="" /></span></span></span></span><span class="col-align-l"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height: 3.15003em;"><span class="" style="top: -5.15003em;"><span class="pstrut" style="height: 3.56401em;" /><span class="mord"><span class="mord" /><span class="mspace" style="margin-right: 0.277778em;" /><span class="mrel">=</span><span class="mspace" style="margin-right: 0.277778em;" /><span class="minner"><span class="minner"><span class="mopen delimcenter" style="top: 0;"><span class="delimsizing size1">[</span></span><span class="mord">3</span><span class="mord"><span class="mord mathnormal">x</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height: 0.864108em;"><span class="" style="top: -3.113em; margin-right: 0.05em;"><span class="pstrut" style="height: 2.7em;" /><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">3</span></span></span></span></span></span></span></span><span class="mspace" style="margin-right: 0.222222em;" /><span class="mbin">+</span><span class="mspace" style="margin-right: 0.222222em;" /><span class="mord"><span class="mord mathnormal">x</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height: 0.864108em;"><span class="" style="top: -3.113em; margin-right: 0.05em;"><span class="pstrut" style="height: 2.7em;" /><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">2</span></span></span></span></span></span></span></span><span class="mspace" style="margin-right: 0.222222em;" /><span class="mbin">+</span><span class="mspace" style="margin-right: 0.222222em;" /><span class="mord">2</span><span class="mord mathnormal">x</span><span class="mclose delimcenter" style="top: 0;"><span class="delimsizing size1">]</span></span></span><span class="msupsub"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height: 1.06812em;"><span class="" style="top: -2.30029em; margin-right: 0.05em;"><span class="pstrut" style="height: 2.7em;" /><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">1</span></span></span><span class="" style="top: -3.31701em; margin-right: 0.05em;"><span class="pstrut" style="height: 2.7em;" /><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">5</span></span></span></span><span class="vlist-s">&ZeroWidthSpace;</span></span><span class="vlist-r"><span class="vlist" style="height: 0.39971em;"><span class="" /></span></span></span></span></span></span></span><span class="" style="top: -3.07398em;"><span class="pstrut" style="height: 3.56401em;" /><span class="mord"><span class="mord" /><span class="mspace" style="margin-right: 0.277778em;" /><span class="mrel">=</span><span class="mspace" style="margin-right: 0.277778em;" /><span class="minner"><span class="mopen delimcenter" style="top: 0;"><span class="delimsizing size1">(</span></span><span class="mord">3</span><span class="mspace" style="margin-right: 0.222222em;" /><span class="mbin">×</span><span class="mspace" style="margin-right: 0.222222em;" /><span class="mord"><span class="mord">5</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height: 0.864108em;"><span class="" style="top: -3.113em; margin-right: 0.05em;"><span class="pstrut" style="height: 2.7em;" /><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">3</span></span></span></span></span></span></span></span><span class="mspace" style="margin-right: 0.222222em;" /><span class="mbin">+</span><span class="mspace" style="margin-right: 0.222222em;" /><span class="mord"><span class="mord">5</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height: 0.864108em;"><span class="" style="top: -3.113em; margin-right: 0.05em;"><span class="pstrut" style="height: 2.7em;" /><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">2</span></span></span></span></span></span></span></span><span class="mspace" style="margin-right: 0.222222em;" /><span class="mbin">+</span><span class="mspace" style="margin-right: 0.222222em;" /><span class="mord">2</span><span class="mspace" style="margin-right: 0.222222em;" /><span class="mbin">×</span><span class="mspace" style="margin-right: 0.222222em;" /><span class="mord">5</span><span class="mclose delimcenter" style="top: 0;"><span class="delimsizing size1">)</span></span></span><span class="mspace" style="margin-right: 0.222222em;" /><span class="mbin">−</span><span class="mspace" style="margin-right: 0.222222em;" /><span class="minner"><span class="mopen delimcenter" style="top: 0;"><span class="delimsizing size1">(</span></span><span class="mord">3</span><span class="mspace" style="margin-right: 0.222222em;" /><span class="mbin">×</span><span class="mspace" style="margin-right: 0.222222em;" /><span class="mord"><span class="mord">1</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height: 0.864108em;"><span class="" style="top: -3.113em; margin-right: 0.05em;"><span class="pstrut" style="height: 2.7em;" /><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">3</span></span></span></span></span></span></span></span><span class="mspace" style="margin-right: 0.222222em;" /><span class="mbin">+</span><span class="mspace" style="margin-right: 0.222222em;" /><span class="mord"><span class="mord">1</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height: 0.864108em;"><span class="" style="top: -3.113em; margin-right: 0.05em;"><span class="pstrut" style="height: 2.7em;" /><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">2</span></span></span></span></span></span></span></span><span class="mspace" style="margin-right: 0.222222em;" /><span class="mbin">+</span><span class="mspace" style="margin-right: 0.222222em;" /><span class="mord">2</span><span class="mspace" style="margin-right: 0.222222em;" /><span class="mbin">×</span><span class="mspace" style="margin-right: 0.222222em;" /><span class="mord">1</span><span class="mclose delimcenter" style="top: 0;"><span class="delimsizing size1">)</span></span></span></span></span><span class="" style="top: -1.57398em;"><span class="pstrut" style="height: 3.56401em;" /><span class="mord"><span class="mord" /><span class="mspace" style="margin-right: 0.277778em;" /><span class="mrel">=</span><span class="mspace" style="margin-right: 0.277778em;" /><span class="mord" style="color: red;"><span class="mord" style="color: red;">404</span></span></span></span></span><span class="vlist-s">&ZeroWidthSpace;</span></span><span class="vlist-r"><span class="vlist" style="height: 2.65003em;"><span class="" /></span></span></span></span></span></span></span></span></span></span>
+    <span
+      v-if="errorCode === 404"
+      class="d-block mt-4"
+    >
+      <span v-html="integral" />
     </span>
   </big-card>
 </template>
diff --git a/components/Cards/FlatCard.vue b/components/Cards/FlatCard.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 withDefaults(defineProps<{
-  big?: boolean,
+  big?: boolean
   blue?: boolean
   image?: string
 }>(), {
@@ -12,8 +12,16 @@ withDefaults(defineProps<{
 
 <template>
   <div class="flat-card">
-    <div class="flat-card-content h-100" :class="{'big-flat-card-content': big, 'blue': blue}">
-      <img v-if="image" class="flat-card-image" :src="image" :alt="image">
+    <div
+      class="flat-card-content h-100"
+      :class="{ 'big-flat-card-content': big, 'blue': blue }"
+    >
+      <img
+        v-if="image"
+        class="flat-card-image"
+        :src="image"
+        :alt="image"
+      >
       <slot />
     </div>
   </div>

diff --git a/components/Cards/LessonCard.vue b/components/Cards/LessonCard.vue
@@ -5,7 +5,7 @@ import type { Lesson } from '~/types'
 import { levels } from '~/site/site'
 
 const props = withDefaults(defineProps<{
-  lesson: Lesson,
+  lesson: Lesson
   showLevel?: boolean
 }>(), {
   showLevel: false
@@ -19,20 +19,33 @@ const variant = computed<string>(() => props.lesson.specialty ? 'green' : 'prima
 <template>
   <flat-card class="lesson-card">
     <div class="lesson-card-content">
-      <img class="lesson-preview" :src="lesson.preview" :alt="lesson.title">
-      <span class="lesson-caption" v-html="lesson.caption" />
+      <img
+        class="lesson-preview"
+        :src="lesson.preview"
+        :alt="lesson.title"
+      >
+      <span
+        class="lesson-caption"
+        v-html="lesson.caption"
+      />
       <span class="text-muted text-uppercase">
         <span v-if="showLevel">{{ levelName }} •</span> Chapitre {{ chapter }}
       </span>
-      <h3 class="lesson-title" v-html="lesson.title" />
-      <p class="lesson-description" v-html="lesson.description" />
-      <ski-button
+      <h3
+        class="lesson-title"
+        v-html="lesson.title"
+      />
+      <p
+        class="lesson-description"
+        v-html="lesson.description"
+      />
+      <b-button
         :to="`/cours/${lesson.level}/${lesson.id}/`"
         :variant="variant"
         class="btn"
       >
         Lire ce cours
-      </ski-button>
+      </b-button>
     </div>
   </flat-card>
 </template>
@@ -100,7 +113,7 @@ const variant = computed<string>(() => props.lesson.specialty ? 'green' : 'prima
       color: rgba(black, 0.75);
     }
 
-    .btn {
+    :deep(.btn) {
       font-weight: bold;
       padding: 14px;
     }

diff --git a/components/CurrentCommitSha.vue b/components/CurrentCommitSha.vue
@@ -2,7 +2,7 @@
 import { site } from '~/site/site'
 
 interface CommitSha {
-  long: string,
+  long: string
   short: string
 }
 

diff --git a/components/ImageHeader.vue b/components/ImageHeader.vue
@@ -7,23 +7,37 @@ const slots = useSlots()
 </script>
 
 <template>
-  <ski-columns class="ms-0 me-0">
-    <ski-column
-      width="12"
+  <b-row class="ms-0 me-0">
+    <b-col
+      cols="12"
       xl="2"
       lg="3"
       md="3"
       class="mb-4 mb-md-0 d-flex align-items-center offset-xl-3 offset-lg-2 offset-md-1"
     >
-      <slot v-if="slots.image" name="image" />
-      <img v-else class="header-image ms-auto me-auto ms-md-0 me-md-0" :src="image" alt="En-tête">
-    </ski-column>
-    <ski-column width="12" xl="4" lg="5" md="7" class="d-flex align-items-center">
+      <slot
+        v-if="slots.image"
+        name="image"
+      />
+      <img
+        v-else
+        class="header-image ms-auto me-auto ms-md-0 me-md-0"
+        :src="image"
+        alt="En-tête"
+      >
+    </b-col>
+    <b-col
+      cols="12"
+      xl="4"
+      lg="5"
+      md="7"
+      class="d-flex align-items-center"
+    >
       <div class="w-100">
         <slot />
       </div>
-    </ski-column>
-  </ski-columns>
+    </b-col>
+  </b-row>
 </template>
 
 <style lang="scss" scoped>