style: apply prettier as formatter

.prettierignore

@@ -0,0 +1,4 @@
+node_modules/**
+**/kaplay/**
+**/books/** 
+/dist/**

.prettierrc

@@ -0,0 +1,29 @@
+{
+    "printWidth": 80,
+    "tabWidth": 4,
+    "useTabs": false,
+    "htmlWhitespaceSensitivity": "strict",
+    "plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
+    "overrides": [
+        {
+            "files": "*.astro",
+            "options": {
+                "parser": "astro"
+            }
+        },
+        {
+            "files": "*.json",
+            "options": {
+                "tabWidth": 2,
+                "parser": "json"
+            }
+        },
+        {
+            "files": "*.{yml,yaml}",
+            "options": {
+                "tabWidth": 2,
+                "parser": "yaml"
+            }
+        }
+    ]
+}

.vscode/extensions.json

@@ -1,7 +1,4 @@
 {
-  "recommendations": [
-    "astro-build.astro-vscode",
-    "unifiedjs.vscode-mdx"
-  ],
+  "recommendations": ["astro-build.astro-vscode", "unifiedjs.vscode-mdx"],
   "unwantedRecommendations": []
 }

.vscode/settings.json

@@ -7,9 +7,10 @@
     "editor.defaultFormatter": "dprint.dprint"
   },
   "[astro]": {
-    "editor.defaultFormatter": "dprint.dprint"
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "cSpell.words": [
-    "KAPLAY"
-  ]
-}
+  "cSpell.words": ["KAPLAY"],
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}

CONTRIBUTING.md

@@ -3,15 +3,15 @@
 Follow [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/)
 specification
 
-- feat: A new feature
-- fix: A bug fix
-- docs: Documentation only changes
-- style: Changes that do not affect the meaning of the code (white-space,
-  formatting, missing semi-colons, etc)
-- refactor: A code change that neither fixes a bug nor adds a feature
-- perf: A code change that improves performance
-- test: Adding missing tests or correcting existing tests
-- chore: Daily tasks, maintenance, etc
-- build: Changes that affect the build system or external dependencies
-- ci: Changes to our CI configuration files and scripts
-- revert: Reverts a previous commit
+-   feat: A new feature
+-   fix: A bug fix
+-   docs: Documentation only changes
+-   style: Changes that do not affect the meaning of the code (white-space,
+    formatting, missing semi-colons, etc)
+-   refactor: A code change that neither fixes a bug nor adds a feature
+-   perf: A code change that improves performance
+-   test: Adding missing tests or correcting existing tests
+-   chore: Daily tasks, maintenance, etc
+-   build: Changes that affect the build system or external dependencies
+-   ci: Changes to our CI configuration files and scripts
+-   revert: Reverts a previous commit

README.md

@@ -3,7 +3,7 @@
 This is the website and documentation of [KAPLAY](https://kaplayjs.com), the
 JavaScript game library to make games fast and fun.
 
-- Documentation for KAPLAY library
-- Guides to help you get started
-- Blogs about the latest on KAPLAY
-- Landing page, presenting the library
+-   Documentation for KAPLAY library
+-   Guides to help you get started
+-   Blogs about the latest on KAPLAY
+-   Landing page, presenting the library

astro.config.mjs

@@ -38,9 +38,7 @@ export default defineConfig({
                 transformerNotationWordHighlight(),
             ],
         },
-        remarkPlugins: [
-            remarkMath,
-        ],
+        remarkPlugins: [remarkMath],
         rehypePlugins: [
             [rehypeKatex, {}],
             [rehypeKAPLAY, {}],

guides/en/0_making_your_first_game/0_creating_your_first_game.md

@@ -89,13 +89,13 @@ onKeyPress("space", () => {
 
 Let's see what components we're using:
 
-- `sprite()` makes it render as a sprite, with the `"bean"` sprite we just
-  loaded with `loadSprite()`
-- `pos()` gives it a position on screen, at X: 80 Y: 40
-- `area()` gives it a collider area, so we can check for collisions with other
-  characters later on
-- `body()` gives it a physical body, making it fall due to gravity and ability
-  to jump,
+-   `sprite()` makes it render as a sprite, with the `"bean"` sprite we just
+    loaded with `loadSprite()`
+-   `pos()` gives it a position on screen, at X: 80 Y: 40
+-   `area()` gives it a collider area, so we can check for collisions with other
+    characters later on
+-   `body()` gives it a physical body, making it fall due to gravity and ability
+    to jump,
 
 We're also testing out our player character with a little interaction here.
 `onKeyPress()` registers an event that runs every time user presses a certain
@@ -122,17 +122,17 @@ add([
 Woah! That looks like a lot, but it's actually really simple, let's look at each
 component
 
-- `rect()` renders a rectangle. It accepts 2 arguments, the width and height,
-  which we give it the game width (returned by `width()`) and height of 48
-  pixels
-- `pos()` position. We give it a x: 0 and y: `height() - 48` so it sits right on
-  the bottom of the screen
-- `outline()` renders an outline of `4` pixels
-- `area()` adds a collider to it
-- `body({ isStatic: true })` the object won't move, and all non static objects
-  won't move past it
-- `color()` makes it render with an RGB color, we give it a R: 127 G: 200 B: 255
-  which is a blue-ish color
+-   `rect()` renders a rectangle. It accepts 2 arguments, the width and height,
+    which we give it the game width (returned by `width()`) and height of 48
+    pixels
+-   `pos()` position. We give it a x: 0 and y: `height() - 48` so it sits right on
+    the bottom of the screen
+-   `outline()` renders an outline of `4` pixels
+-   `area()` adds a collider to it
+-   `body({ isStatic: true })` the object won't move, and all non static objects
+    won't move past it
+-   `color()` makes it render with an RGB color, we give it a R: 127 G: 200 B: 255
+    which is a blue-ish color
 
 Now, before run, we should define the gravity of our world:
 
@@ -178,12 +178,12 @@ add([
 A lot of these we have already seen you should know what they do, but some new
 ones here:
 
-- `anchor()` defines the origin point of positioning. By default `pos()` defines
-  the top left point of the shape, here we change it to the bottom left point
-  because we want it to be just above the platform, so we give it Y position of
-  `height() - 48`
-- `move()` makes it move towards a direction infinitely. In this case we move
-  towards the `LEFT` by `480` pixels per second
+-   `anchor()` defines the origin point of positioning. By default `pos()` defines
+    the top left point of the shape, here we change it to the bottom left point
+    because we want it to be just above the platform, so we give it Y position of
+    `height() - 48`
+-   `move()` makes it move towards a direction infinitely. In this case we move
+    towards the `LEFT` by `480` pixels per second
 
 ![tree](intro/tree.png)
 

guides/en/1_getting_started/0_why_kaplay.md

@@ -11,15 +11,15 @@ should I use KAPLAY instead of X library?"_.
 
 There's some reasons why you should use KAPLAY:
 
-- 🧪 **Simplicity**: KAPLAY design and API looks for the simplicity to create
-  games. You can create a game with a few lines of code.
-- 📏 **Flexibility**: KAPLAY is a **library**, not a framework or game engine.
-  You can use KAPLAY with other libraries or frameworks, do you want to use
-  _React_? _Vue_? No problem, you can use it with KAPLAY.
-- 🍳 **Pre-cooked**: KAPLAY comes with a lot of features pre-cooked. Pre-made
-  arcade physics, input manager, tilemap levels, assets and more.
-- ❤️ **Open Source**: KAPLAY is **open source** and the KAPLAY Team is a
-  **collective** of developers **non-profit**.
+-   🧪 **Simplicity**: KAPLAY design and API looks for the simplicity to create
+    games. You can create a game with a few lines of code.
+-   📏 **Flexibility**: KAPLAY is a **library**, not a framework or game engine.
+    You can use KAPLAY with other libraries or frameworks, do you want to use
+    _React_? _Vue_? No problem, you can use it with KAPLAY.
+-   🍳 **Pre-cooked**: KAPLAY comes with a lot of features pre-cooked. Pre-made
+    arcade physics, input manager, tilemap levels, assets and more.
+-   ❤️ **Open Source**: KAPLAY is **open source** and the KAPLAY Team is a
+    **collective** of developers **non-profit**.
 
 # FAQ
 

guides/en/1_getting_started/1_install.md

@@ -8,12 +8,12 @@ url: install
 
 This guide covers:
 
-- [create-kaplay](https://npmjs.com/package/create-kaplay) for create KAPLAY
-  projects easily
-- Using KAPLAY with a CDN
-- Using KAPLAY with Node.js
-- Loading assets
-- Running a static file server
+-   [create-kaplay](https://npmjs.com/package/create-kaplay) for create KAPLAY
+    projects easily
+-   Using KAPLAY with a CDN
+-   Using KAPLAY with Node.js
+-   Loading assets
+-   Running a static file server
 
 The most easy way to get started with KAPLAY is to use the
 [CLI tool](https://www.npmjs.com/package/create-kaplay), which will generate a
@@ -72,10 +72,10 @@ $ npm install kaplay
 You'll need to use a bundler to use Kaboom with NPM. There's a lot of options
 like:
 
-- `esbuild`,
-- `webpack`,
-- `parcel`,
-- `vitejs`,
+-   `esbuild`,
+-   `webpack`,
+-   `parcel`,
+-   `vitejs`,
 
 This is a short example of how to use Kaboom with
 ["esbuild"](https://esbuild.github.io/).
@@ -105,14 +105,14 @@ system, that is because browser won't allow loading local files with JavaScript.
 To get around that you'll need to use a static file that serves the files
 through HTTP. There're a lot of programs that helps you to do that.
 
-- `$ python3 -m http.server` if you have [python3](https://www.python.org)
-  installed
-- `$ python -m SimpleHTTPServer` if you have [python2](https://www.python.org)
-  installed
-- `$ serve` if you have [serve](https://github.com/vercel/serve) installed
-- `$ caddy file-server` if you have [caddy](https://caddyserver.com/) installed
-- `$ static-here` if you have
-  [static-here](https://github.com/amasad/static-here) installed
+-   `$ python3 -m http.server` if you have [python3](https://www.python.org)
+    installed
+-   `$ python -m SimpleHTTPServer` if you have [python2](https://www.python.org)
+    installed
+-   `$ serve` if you have [serve](https://github.com/vercel/serve) installed
+-   `$ caddy file-server` if you have [caddy](https://caddyserver.com/) installed
+-   `$ static-here` if you have
+    [static-here](https://github.com/amasad/static-here) installed
 
 Let's say you have a folder structure like this:
 

guides/en/1_getting_started/2_basic_concepts.md

@@ -53,9 +53,9 @@ the object, like how it moves, looks, and interacts with other objects.
 In KAPLAY, there are many built-in components that you can use to create your
 game objects. For example:
 
-- `pos(x, y)` sets the position of the object.
-- `rect(width, height)` draws a rectangle.
-- `color(r, g, b)` sets the color of the object.
+-   `pos(x, y)` sets the position of the object.
+-   `rect(width, height)` draws a rectangle.
+-   `color(r, g, b)` sets the color of the object.
 
 We will go in deep on components in the [**Components**](/guides/components)
 guide.