Migration vers Nuxt3

.eslintrc.json

@@ -1,31 +1,6 @@
 {
-  "root": true,
-  "env": {
-    "browser": true,
-    "node": true
-  },
-  "parserOptions": {
-    "parser": "@babel/eslint-parser",
-    "requireConfigFile": false
-  },
-  "extends": ["@nuxtjs", "plugin:nuxt/recommended", "prettier"],
-  "plugins": ["prettier"],
+  "extends": ["@nuxtjs/eslint-config-typescript"],
   "rules": {
-    "vue/no-v-html": "off",
-    "curly": [2, "multi-line"],
-    "vue/attribute-hyphenation": ["error", "never"],
-    "unicorn/number-literal-case": "off",
-    "no-console": "warn",
-    "no-debugger": "warn",
-    "prettier/prettier": [
-      2,
-      {
-        "singleQuote": true,
-        "semi": false,
-        "tabWidth": 2,
-        "endOfLine": "lf",
-        "printWidth": 120
-      }
-    ]
+    "vue/multi-word-component-names": "off"
   }
 }

.gitignore

@@ -1,90 +1,9 @@
-# Created by .ignore support plugin (hsz.mobi)
-### Node template
-# Logs
-/logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# TypeScript v1 declaration files
-typings/
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-
-# next.js build output
-.next
-
-# nuxt.js build output
+node_modules
+*.log*
 .nuxt
-
-# Nuxt generate
+.nitro
+.cache
+.output
+.env
 dist
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless
-
-# IDE / Editor
-.idea
-
-# Service worker
-sw.*
-
-# macOS
 .DS_Store
-
-# Vim swap files
-*.swp

.npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false

assets/css/reset.css

@@ -134,8 +134,6 @@ table {
 /* apply a natural box layout model to all elements */
 *,
 *::before,
-*::after,
-*::before,
 *::after {
   box-sizing: border-box;
 }

components/Footer.vue

@@ -40,6 +40,7 @@ footer {
     .separator {
       margin: 0 8px;
     }
+
     @media screen and (max-width: 720px) {
       flex-direction: column;
 

components/Header.vue

@@ -1,30 +1,31 @@
 <template>
   <header>
     <nuxt-link class="brand" to="/" title="Accueil">
-      <Logo class="logo" />
-      <h1 class="name">BLAGUES API</h1>
+      <img src="@/assets/logo.svg?data" class="logo" alt="Logo Blagues-API" title="Logo Blagues-API">
+      <h1 class="name">
+        BLAGUES API
+      </h1>
     </nuxt-link>
     <div class="overlay" :class="{ open }" @click="open = false" />
     <div class="navigation" :class="{ open }">
       <a class="item" href="https://github.com/Blagues-API/blagues-api" title="Github de Blagues API"> GITHUB </a>
       <a class="item" href="https://discord.gg/PPNpVaF" title="Discord de Blagues API"> DISCORD </a>
-      <nuxt-link v-if="$auth.loggedIn" class="user-place" to="/account">
+      <!-- <nuxt-link v-if="$auth.loggedIn" class="user-place" to="/account">
         <div
           class="avatar"
           :style="{
             'background-image': `url(https://cdn.discordapp.com/avatars/${$auth.user.id}/${$auth.user.avatar}?size=64)`,
           }"
         />
         <span class="username">{{ $auth.user.username }}</span>
-      </nuxt-link>
-      <span
-        v-else
+      </nuxt-link> -->
+      <!-- <span
         class="item rounded"
         title="Connexion Discord"
         @click="$auth.loginWith('discord', { params: { prompt: 'none' } })"
       >
         CONNEXION
-      </span>
+      </span> -->
     </div>
     <div class="burger" :class="{ open }" @click="open = !open">
       <div class="burger-target">
@@ -33,7 +34,7 @@
         </div>
       </div>
       <a href="https://discord.gg/PPNpVaF" class="item"> <DiscordIcon /> </a>
-      <a
+      <!-- <a
         class="item"
         @click="$auth.loggedIn ? $router.push('/account') : $auth.loginWith('discord', { params: { prompt: 'none' } })"
       >
@@ -45,31 +46,18 @@
           }"
         />
         <LoginIcon v-else />
-      </a>
+      </a> -->
       <a href="https://github.com/Blagues-API/blagues-api" class="item"> <GithubIcon /> </a>
     </div>
   </header>
 </template>
 
-<script>
-import Logo from '@/assets/logo.svg?inline'
-import GithubIcon from '@/assets/icons/github.svg?inline'
-import DiscordIcon from '@/assets/icons/discord.svg?inline'
-import LoginIcon from '@/assets/icons/login.svg?inline'
-
-export default {
-  components: {
-    Logo,
-    GithubIcon,
-    DiscordIcon,
-    LoginIcon,
-  },
-  data() {
-    return {
-      open: false,
-    }
-  },
-}
+<script setup lang="ts">
+import GithubIcon from '@/assets/icons/github.svg?component'
+import DiscordIcon from '@/assets/icons/discord.svg?component'
+// import LoginIcon from '@/assets/icons/login.svg?inline'
+
+const open = ref(false)
 </script>
 
 <style lang="scss">
@@ -112,6 +100,7 @@ header {
     bottom: 16px;
     width: 72px;
     height: 72px;
+
     .burger-target {
       display: flex;
       position: absolute;
@@ -123,7 +112,7 @@ header {
       transition: transform 0.4s cubic-bezier(0.17, 0.9, 0.3, 1.3), box-shadow 0.4s ease-out;
       border-radius: 48px;
       background-color: white;
-      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
+      box-shadow: 0 2px 20px rgb(0 0 0 / 50%);
       cursor: pointer;
 
       .burger-icon {
@@ -170,6 +159,7 @@ header {
         }
       }
     }
+
     .item {
       display: flex;
       position: absolute;
@@ -189,11 +179,13 @@ header {
         background-size: 32px;
       }
     }
+
     &.open {
       .burger-target {
         transform: scale(0.8);
         transform: transform 0.2s linear;
-        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
+        box-shadow: 0 1px 8px rgb(0 0 0 / 50%);
+
         .burger-lines {
           background-color: transparent;
 
@@ -219,17 +211,21 @@ header {
           }
         }
       }
+
       .item {
         transition-timing-function: cubic-bezier(0.95, 0, 0.35, 1.3);
-        box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
+        box-shadow: 0 0 12px rgb(0 0 0 / 30%);
+
         &:nth-child(2) {
           transform: translate3d(-96px, 0, 0);
           transition-duration: 0.2s;
         }
+
         &:nth-child(3) {
           transform: translate3d(-72px, -72px, 0);
           transition-duration: 0.3s;
         }
+
         &:nth-child(4) {
           transform: translate3d(0, -96px, 0);
           transition-duration: 0.4s;
@@ -281,6 +277,7 @@ header {
       }
     }
   }
+
   @media screen and (max-width: 720px) {
     .burger {
       display: flex;

components/doc/API.vue

@@ -2,7 +2,9 @@
   <div>
     <div id="api" class="block">
       <div class="flex-space top">
-        <h2 class="title">API publique</h2>
+        <h2 class="title">
+          API publique
+        </h2>
       </div>
       <p>
         L'API Rest est le meilleur moyen d'utiliser Blagues-API sans dépendances, en requièrera nénanmoins plus de
@@ -18,19 +20,27 @@
         vous permettront de récupérer une blague aléatoirement dans un thème ou type de blague spécifique.
       </p>
       <div class="example">
-        <h5 class="language">BLAGUE ALÉATOIRE</h5>
+        <h5 class="language">
+          BLAGUE ALÉATOIRE
+        </h5>
         <pre><code class="language-javascript">GET /api/random</code></pre>
       </div>
       <div class="example">
-        <h5 class="language">BLAGUE ALÉATOIRE CATÉGORISÉ</h5>
+        <h5 class="language">
+          BLAGUE ALÉATOIRE CATÉGORISÉ
+        </h5>
         <pre><code class="language-javascript">GET /api/type/:type:/random // type: global, dev, dark, limit, beauf, blondes</code></pre>
       </div>
       <div class="example">
-        <h5 class="language">BLAGUE PAR ID</h5>
+        <h5 class="language">
+          BLAGUE PAR ID
+        </h5>
         <pre><code class="language-javascript">GET /api/id/:id:</code></pre>
       </div>
       <div class="example">
-        <h5 class="language">NOMBRES DE BLAGUES</h5>
+        <h5 class="language">
+          NOMBRES DE BLAGUES
+        </h5>
         <pre><code class="language-javascript">GET /api/count</code></pre>
       </div>
     </div>
@@ -44,11 +54,15 @@
         filtrer les blagues et donc d'en retirer celles qui font partie d'une catégorie qui ne vous convient pas.
       </p>
       <div class="example">
-        <h5 class="language">UTILISATION D'UN SEUL FILTRE</h5>
+        <h5 class="language">
+          UTILISATION D'UN SEUL FILTRE
+        </h5>
         <pre><code class="language-javascript">GET /api/random?disallow=dark</code></pre>
       </div>
       <div class="example">
-        <h5 class="language">UTILISATION DE PLUSIEURS FILTRES</h5>
+        <h5 class="language">
+          UTILISATION DE PLUSIEURS FILTRES
+        </h5>
         <pre><code class="language-javascript">GET /api/random?disallow=dark&disallow=limit&disallow=dev</code></pre>
       </div>
     </div>
@@ -58,10 +72,10 @@
       </a>
       <p class="text">
         L'api de blagues utilise un token d'authentification Bearer pour les requêtes. Vous pouvez le gérer depuis votre
-        profil.<br />
+        profil.<br>
         Les requêtes doivent toutes être effectuées via
         <a href="http://en.wikipedia.org/wiki/HTTP_Secure">HTTPS</a>. Tous les appels effectuées sans authentification
-        ou en HTTP échoueront.<br />
+        ou en HTTP échoueront.<br>
         Si vous avez des difficultées à obtenir un certificat HTTPS, voici
         <a href="https://certbot.eff.org/">Certbot</a>, un outil qui permet d'en obtenir un gratuitement !
       </p>