V1 - FaireDesJeux.fr

.editorconfig

@@ -3,7 +3,7 @@ root = true
 [*]
 end_of_line = lf
 indent_style = space
-indent_size = 4
+indent_size = 2
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true

.eslintrc.js

@@ -1,81 +1,31 @@
 module.exports = {
-    env: {
-        browser: true,
-        node: true,
-        es6: true,
-    },
-    extends: [
-        'eslint:recommended',
-        'airbnb-base',
-        'plugin:vue/recommended',
-        'plugin:gridsome/recommended',
-    ],
-    parser: 'vue-eslint-parser',
-    parserOptions: {
-        ecmaVersion: 2018,
-        sourceType: 'module',
-    },
-    plugins: [
-        'vue',
-        'gridsome',
-    ],
-    rules: {
-        'max-len': ['error', 130, 2, {
-            ignoreUrls: true,
-            ignoreComments: true,
-            ignoreRegExpLiterals: true,
-            ignoreStrings: true,
-            ignoreTemplateLiterals: true,
-        }],
-
-        // Gridsome require v-html for certain things and use it in a safe fashion (no content coming from users)
-        'vue/no-v-html': 'off',
-
-        /* Personal preference.
-           Especially for HTML, when there's too many elements I find 2-spaces indentation hard to read.
-
-           An argument could be made that, with 4-spaces indentation, things can get a little too long and hard to read
-           However, it's a compromise I'm willing to make (at least for now, I can be convinced!) for readability
-        */
-        indent: ['warn', 4],
-        'vue/html-indent': ['warn', 4],
-        'vue/script-indent': ['warn', 4, {
-            baseIndent: 1,
-        }],
-
-        /* Personal preference.
-           I don't think it's unreasonable to have multiple attributes on the same line HTML
-           However, as soon as we have multiple lines, I'd rather we only have one attribute per line. Go big or go home?
-        */
-        'vue/max-attributes-per-line': ['warn', {
-            singleline: 4,
-            multiline: {
-                max: 1,
-                allowFirstLine: true,
-            },
-        },
-        ],
-
-        // TODO: Document this lint
-        'vue/html-self-closing': ['warn', {
-            html: {
-                void: 'always',
-                normal: 'never',
-                component: 'always',
-            },
-        }],
-
-        // eslint-plugin-gridsome require Prettier for this which I don't like and don't feel like configuring right now
-        'gridsome/format-query-block': 'off',
-
-    },
-    overrides: [
-        // Fix eslint's indent rule interfering with vue-eslint's script-indent rule
-        {
-            files: ['*.vue'],
-            rules: {
-                indent: 'off',
-            },
-        },
-    ],
+  root: true,
+  env: {
+    node: true,
+  },
+  parser: "vue-eslint-parser",
+  parserOptions: {
+    parser: "@typescript-eslint/parser",
+    ecmaVersion: 2020,
+    sourceType: "module",
+  },
+  plugins: ["@typescript-eslint", "prettier"],
+  extends: [
+    "plugin:@typescript-eslint/recommended",
+    "eslint:recommended",
+    "plugin:prettier/recommended",
+    "plugin:vue/vue3-recommended",
+    "plugin:prettier/recommended",
+  ],
+  rules: {
+    // Since <template> and <style> has a base indent, I think it makes more sense to have one for <script> too
+    "vue/script-indent": ["error", 2, { baseIndent: 1 }],
+  },
+  ignorePatterns: ["dist"],
+  globals: {
+    defineProps: "readonly",
+    defineEmits: "readonly",
+    defineExpose: "readonly",
+    withDefaults: "readonly",
+  },
 };

.gitignore

@@ -1,9 +1,5 @@
-*.log
-.cache
-.DS_Store
-src/.temp
 node_modules
+.DS_Store
 dist
-.env
-.env.*
-.vscode
+dist-ssr
+*.local

.prettierrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  printWidth: 100,
+  tabWidth: 2,
+  trailingComma: "all",
+  vueIndentScriptAndStyle: true
+};

README.md

@@ -1,35 +1,11 @@
-# Bienvenue sur le projet de FaireDesJeux.fr !
+# Vue 3 + Typescript + Vite
 
-FaireDesJeux.fr est un site collaboratif proposant des formations gratuites pour accompagner les débutants et débutantes dans la création de jeux vidéo, tout en leur permettant, une fois les bases acquises, de s'indépendantiser grâce aux documentations officielles et aux diverses ressources en ligne. Dans un contexte où les formations payantes et souvent interminables fleurissent sur le web, nous souhaitons proposer une autre façon d'apprendre, plus ouverte, qui va à l'essentiel et incite les lecteurs ou lectrices à progresser par eux-mêmes.
+This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
 
-Tout le monde peut participer au projet, que ce soit pour corriger une faute ou créer du contenu. Une [charte de qualité](https://fairedesjeux.fr/contribuer/avant-propos/charte/) permet de s'assurer que tout le monde avance dans une même direction, et une [page de référence](https://fairedesjeux.fr/contribuer/comment-contribuer/syntaxe-des-cours/) détaille la syntaxe Markdown ainsi que les fichiers à créer pour commencer l'écriture d'une nouvelle formation.
+## Recommended IDE Setup
 
-## Modifier une page rapidement
+- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
 
-Depuis n’importe quelle page du site, cliquez sur *Modifier cette page* dans le sommaire de droite. Cela ouvrira le fichier correspondant dans le dépôt.
+## Type Support For `.vue` Imports in TS
 
-## Télécharger le site
-
-### 1. Installer Node.js et npm
-
-#### Windows
-[Télécharger la version Current](https://nodejs.org/) et cocher "Install the necessary tools" durant l'installation.
-
-#### Linux
-`sudo apt install nodejs` pour la dernière version d'Ubuntu. [Autres distributions.](https://nodejs.org/en/download/package-manager/)
-
-#### macOS
-[Installer la version Current.](https://nodejs.org/)
-
-### 2. Préparer le dépôt
-
-1. `git clone --recursive https://github.com/gamedevalliance/fairedesjeux.fr`
-2. `cd fairedesjeux.fr`
-3. (`sudo`) `npm install` pour télécharger les dépendances dans le dossier.
-4. (`sudo`) `npm install --global @gridsome/cli` pour installer Gridsome CLI.
-
-Pour une marche à suivre plus détaillée et accessible aux néophytes, lisez le [guide du site](https://fairedesjeux.fr/contribuer/comment-contribuer/installer-le-site/).
-
-### 3. Démarrer un serveur local
-
-`gridsome develop` démarre un serveur local à l'adresse `localhost:8080` pour voir vos changements en direct alors que vous travaillez.
+Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's `.vue` type support plugin by running `Volar: Switch TS Plugin on/off` from VSCode command palette.

content/courses/itchio/course.md → content/courses/itchio/index.md

@@ -16,7 +16,7 @@ Bienvenue dans ce cours sur itch.io ! Si vous lisez ce cours, vous avez probabl
 
 [itch.io](https://itch.io/) est un magasin ouvert à tous les créateurs, et particulièrement axé sur les jeux indépendants, gratuits comme payants. Le site encourage l'exploration et le partage de créations expérimentales.
 
-![Page d'accueil de itch.io](./itchio.png)
+![Page d'accueil de itch.io](/itchio/itchio.png)
 
 Tout le monde peut devenir vendeur, concevoir ses pages et publier son contenu. Vos œuvres sont disponibles dès que vous les mettez en ligne, sans devoir attendre l'approbation de l'équipe ou du public.
 
@@ -28,7 +28,7 @@ itch.io est un site idéal pour débuter dans la publication de jeux sans devoir
 
 Contrairement à d'autres plateformes gratuites de partage de jeux, l'interface est simple et claire. Vous avez la garantie qu'aucune pub ou autre élément intrusif n'entachera la page de votre création.
 
-![](./orchids-to-dusk.png)
+![](/itchio/orchids-to-dusk.png)
 *itch.io est un nid à expériences intriguantes. (Orchids to Dusk)*
 
 Il est possible de mettre un prix minimum au jeu et d'accepter les donations, mais d'autres options de monétisation sont aussi possibles, comme le pré-achat, des *tiers* avec récompense, ou encore du contenu *early access*.

content/courses/renpy/course.md → content/courses/renpy/index.md

@@ -18,12 +18,12 @@ Si vous souhaitez écrire des histoires à embranchements mais que vous n'avez j
 
 Son utilisation est très simple et place l'écriture au centre de l'expérience, tout en proposant d'ajouter de l'interactivité grâce à des notions de programmation que vous découvrirez au fur et à mesure.
 
-![Screenshot de Butterfly Soup](./butterfly-soup.png)
+![Screenshot de Butterfly Soup](/renpy/butterfly-soup.png)
 *Les visual novels contiennent des dialogues et des choix. (Butterfly Soup)*
 
 Ren'Py est peut-être simple, mais il est puissant ! Vous pouvez étendre les fonctionnalités du jeu à votre guise en écrivant du Python, pour créer des phases de point and click, de RPG, ou encore des mini-jeux. Les possibilités sont nombreuses et pour le constater, il suffit de regarder les jeux créés avec Ren'Py [sur itch.io](https://itch.io/games/newest/made-with-renpy) par exemple.
 
-![Screenshot de Doki Doki Literature Club](./doki-doki-literature-club.png)
+![Screenshot de Doki Doki Literature Club](/renpy/doki-doki-literature-club.png)
 *Un système de carnet programmé dans Ren'Py. (Doki Doki Literature Club)*
 
 Les jeux peuvent fonctionner sur Windows, Linux, macOS, Android, iOS ou en tant qu'application Chrome.

content/courses/rpg-maker/03-utiliser-les-plugins/02-installer-un-plugin.md

@@ -26,14 +26,14 @@ La plupart du temps, les scripts ne sont pas compatibles d'une version de RPG Ma
 Les scripts sont écrits en Ruby. Il n'est pas nécessaire de télécharger un fichier : il suffit de copier-coller le code.
 
 ![Icône de l'éditeur de script](./bouton.png)
-*L'éditeur de script peut aussi être ouvert avec F11.*
+_L'éditeur de script peut aussi être ouvert avec F11._
 
 Sélectionnez le contenu du script et copiez-le. Retournez dans RPG Maker et ouvrez l'éditeur de script. La liste sur la gauche représente tous les scripts de votre jeu et vous pouvez constater qu'il en existe déjà beaucoup : ce sont les systèmes de base qu'il ne faut pas supprimer.
 
 ![Insérer un script dans RPG Maker VX Ace](./inserer.png)
-*Création d'un emplacement dans Materials.*
+_Création d'un emplacement dans Materials._
 
-La plupart des scripts que vous trouverez sur Internet doivent être copiés *au-dessus* du script Main mais *en-dessous* de tous les autres scripts de base. Sur RPG Maker VX Ace, une catégorie Materials est présente pour vous aider à choisir un emplacement. Cliquez-droit sur l'emplacement désiré puis choisissez Insérer. Vous pouvez alors nommer votre script comme bon vous semble et copier son contenu dans le grand champ de texte à droite.
+La plupart des scripts que vous trouverez sur Internet doivent être copiés _au-dessus_ du script Main mais _en-dessous_ de tous les autres scripts de base. Sur RPG Maker VX Ace, une catégorie Materials est présente pour vous aider à choisir un emplacement. Cliquez-droit sur l'emplacement désiré puis choisissez Insérer. Vous pouvez alors nommer votre script comme bon vous semble et copier son contenu dans le grand champ de texte à droite.
 
 Les écritures en vert sont des commentaires, ignorés par le programme car destinés uniquement aux humains. Les programmeurs s'en servent généralement pour expliquer le fonctionnement de leurs scripts. Lisez attentivement les commentaires si vous ne savez pas comment utiliser un script.
 

content/courses/rpg-maker/course.md → content/courses/rpg-maker/index.md

@@ -15,19 +15,19 @@ opengraph_image: cover_wide
 
 RPG Maker est un logiciel permettant de créer des JRPG en 2D, mais pas que ! On reconnaît le style de ce logiciel entre mille : il s'est forgé une réputation autour de ses musiques et graphismes inclus, qui simplifient beaucoup la création. Il propose également un système de combat au tour par tour qui imite les RPG old school.
 
-Si l'on met le système de combat de côté, le logiciel permet aussi de réaliser des jeux narratifs centrés sur l'exploration des cartes. Certains jeux de ce type ont connu un fort engouement dans la sphère indé, notamment les célèbres *To the Moon* et *Yume Nikki*.
+Si l'on met le système de combat de côté, le logiciel permet aussi de réaliser des jeux narratifs centrés sur l'exploration des cartes. Certains jeux de ce type ont connu un fort engouement dans la sphère indé, notamment les célèbres _To the Moon_ et _Yume Nikki_.
 
 ![Screenshot de To the Moon](./to-the-moon.png)
-*To the Moon (RPG Maker XP)*
+_To the Moon (RPG Maker XP)_
 
 Une autre grande particularité de RPG Maker est qu'il n'est pas nécessaire de coder pour réaliser son aventure : la logique du jeu est conçue en cliquant sur des boutons. Cela dit, en utilisant un langage de script, les programmeurs et programmeuses peuvent dépasser les limites du logiciel. RPG Maker MV utilise le langage JavaScript tandis que les versions précédentes utilisent Ruby. Et même si vous ne savez pas coder, la communauté a produit beaucoup de scripts (ou plug-ins) que vous pouvez copier dans votre jeu pour ajouter de nouvelles fonctionnalités facilement. Je vous expliquerai comment faire !
 
 ![Combat en vue de face](./combat-vx-ace.png)
-*La vue des combats change selon la version de RPG Maker.*
+_La vue des combats change selon la version de RPG Maker._
 
 ### Pourquoi l'utiliser ?
 
-Le point fort de ce logiciel, c'est que dès que vous le lancez, vous pouvez instantanément dessiner une carte et commencer votre jeu : il n'y a aucune barrière d'entrée. RPG Maker est intéressant si vous souhaitez raconter une aventure *fantasy* sans créer de graphisme ou de musique, car les ressources de base vous permettent d'établir un univers crédible.
+Le point fort de ce logiciel, c'est que dès que vous le lancez, vous pouvez instantanément dessiner une carte et commencer votre jeu : il n'y a aucune barrière d'entrée. RPG Maker est intéressant si vous souhaitez raconter une aventure _fantasy_ sans créer de graphisme ou de musique, car les ressources de base vous permettent d'établir un univers crédible.
 
 Le logiciel est cependant de moins en moins pertinent pour partager votre jeu à un large public ou envisager une activité commerciale : les jeux RPG Maker se ressemblent généralement beaucoup entre eux et peuvent avoir une mauvaise réputation sur les sites comme Steam. Cela dit, cela reste une très bonne initiation au game design et à la narration, car vous pouvez réfléchir au contenu de votre jeu sans vous soucier d'en programmer les systèmes.
 

content/informations-legales.md

@@ -0,0 +1,15 @@
+FaireDesJeux.fr est un site collaboratif de formation à la création de jeux vidéo amateurs. Il est réalisé et hébergé par Game Dev Alliance, une association loi 1901 (parue au journal officiel le [23/02/2019](https://www.journal-officiel.gouv.fr/associations/detail-annonce/associations_b/20190008/1082)) dont l'objet est “développement de la scène francophone de création de jeux vidéo indépendants : formation à la création de jeux, animation d'une communauté de passionnés, aide à la publication de jeux vidéo indépendants”. Le siège social de l'association est déclaré à Pau (France), son président est [Aurélien Dos Santos](https://github.com/aureliendossantos).
+
+Game Dev Alliance ne recueille ni ne stocke les données personnelles de nos utilisateurs. Notre site ne contient également aucune publicité et n'utilise pas de cookie.
+
+En utilisant le site FaireDesJeux.fr, vous confirmez que vous comprenez que le contenu du site est fourni librement et qu’aucune sorte d’accord ou de contrat n’est créé entre vous et Game Dev Alliance, entre vous et les utilisateurs de ce site, ou entre vous et toute autre personne liée à ce projet. Votre utilisation du contenu de ce site n’implique aucune responsabilité de la part de Game Dev Alliance ou de l’un de ses agents, organisateurs ou autres utilisateurs.
+
+Sauf mention contraire, le contenu texte des formations de FaireDesJeux.fr est placé sous les termes de la [licence CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.fr). Fournir du contenu pour FaireDesJeux.fr devrait être fait volontairement, sans aucune hypothèse de préservation du contenu ou de compensation de la part de Game Dev Alliance. Toute information publiée sur FaireDesJeux.fr peut être modifiée ou supprimée.
+
+Les illustrations de nos mascottes “Marvin”, “Astride” et “Rémi”, ainsi que l'illustration de fond, réalisées par [Oriana Marini](https://linktr.ee/aadorah) pour Game Dev Alliance, ainsi que le nom “Game Dev Alliance” et “FaireDesJeux.fr” ne peuvent être utilisés sans notre accord préalable. Les autres illustrations du site sont libres de droits mais leur licence peut varier en fonction de leur origine.
+
+Le code de notre site web est entièrement libre et open source. Il est hébergé publiquement sur [un compte Github](https://github.com/gamedevalliance/fairedesjeux.fr).
+
+Toutes les marques de commerce, marques de service, marques collectives, droits de conception, droits de la personnalité ou droits similaires mentionnés, utilisés ou cités dans un article de FaireDesJeux.fr sont la propriété de leurs propriétaires respectifs. Leur utilisation ici n’implique pas que vous puissiez les utiliser à d’autres fins que des fins informatives similaires à celles envisagées par les auteurs originaux de ces articles.
+
+Sauf indication contraire, FaireDesJeux.fr n’est ni approuvé ni affilié à l’un des détenteurs de tels droits et, en tant que tel, Game Dev Alliance ne peut accorder aucun droit d’utiliser des matériaux autrement protégés.