feat: add eslint (#90)

Author: d3lm

.github/workflows/ci.yaml

@@ -31,7 +31,7 @@ jobs:
       - name: Install dependencies
         run: pnpm install
       - name: Lint
-        run: pnpm prettier --check .
+        run: pnpm lint
       - name: Build
         run: pnpm build
       - name: Test

.tool-versions

@@ -1 +1,2 @@
 nodejs 18.18.0
+pnpm 8.10.5

docs/demo/src/content/tutorial/1-forms-css/1-introduction/1-welcome/_files/welcome.css

@@ -1,4 +1,4 @@
-/* 
+/*
 
 Hello, World!
 

docs/demo/src/content/tutorial/1-forms-css/1-introduction/1-welcome/content.md

@@ -4,6 +4,7 @@ title: Style up your forms!
 slug: welcome
 focus: /welcome.css
 ---
+
 :::info{noBorder=true title="Welcome!"}
 This is a demo tutorial built with <a href="https://tutorialkit.dev" target="_blank">TutorialKit</a>. Although we use it for demonstration purposes, the lessons include actual CSS techniques, so we hope you'll enjoy them and learn something new!
 :::
@@ -12,4 +13,4 @@ This is a demo tutorial built with <a href="https://tutorialkit.dev" target="_bl
 
 Forms are an incredibly common set of HTML elements – they are a part of almost every web app – but styling them is often not as straightforward as styling a typical `div` or `section`.
 
-This tutorial will let you learn and experiment with some practical techniques that will help elevate your form's CSS to the next level!
+This tutorial will let you learn and experiment with some practical techniques that will help elevate your form's CSS to the next level!

docs/demo/src/content/tutorial/1-forms-css/2-colors/1-accent-color/content.md

@@ -15,11 +15,10 @@ Such colors might not fit your brand, or the current theme of your application.
 
 Thankfully, you can change them, and the good news is: you only need one CSS property to do that!
 
-
 Try setting `accent-color` for the whole document by adding the following code inside the `body` selector:
 
-```css add={2} 
+```css add={2}
 body {
-    accent-color: #ff3399;
+  accent-color: #ff3399;
 }
-```
+```

docs/demo/src/content/tutorial/1-forms-css/2-colors/2-progressbar/content.md

@@ -14,8 +14,8 @@ Although `accent-color` that we've set in the previous step already impacts this
 
 Let's start by setting removing the border from the element. As you do it, you will notice that it will also change other aspects of the default appearance, like the height and radius.
 
-```css add={2} 
+```css add={2}
 progress {
-    border: none;
+  border: none;
 }
-```
+```

docs/demo/src/content/tutorial/1-forms-css/2-colors/3-more-progressbar/content.md

@@ -8,7 +8,7 @@ template: default
 
 ## Styling the `<progress>`
 
-Now that the default appearance is turned off, we can start customizing the element. Progress bar consists of two parts: 
+Now that the default appearance is turned off, we can start customizing the element. Progress bar consists of two parts:
 
 - `progress-bar`
 - `progress-value`
@@ -17,12 +17,12 @@ Note: this part is not a standardized CSS yet, so when creating these two select
 
 ```css
 progress::-webkit-progress-bar {
- /* ... */
+  /* ... */
 }
 
 progress::-webkit-progress-value {
- /* ... */
+  /* ... */
 }
 ```
 
-In `style.css` you already see these selectors. Try styling them up: set `background` and `border-radius` to values you like!
+In `style.css` you already see these selectors. Try styling them up: set `background` and `border-radius` to values you like!

docs/demo/src/content/tutorial/1-forms-css/2-colors/4-handle-firefox/content.md

@@ -18,4 +18,4 @@ We should make sure only browsers that can support this kind of customization ap
 }
 ```
 
-In `style.css` you already see these selectors. Try styling them up: set `background` and `border-radius` to values you like!
+In `style.css` you already see these selectors. Try styling them up: set `background` and `border-radius` to values you like!

docs/demo/src/content/tutorial/1-forms-css/3-fieldset/1-fieldset-element/content.md

@@ -5,11 +5,11 @@ slug: fieldset-element
 focus: /index.html
 ---
 
-The `<fieldset>` HTML element groups related form controls, such as buttons, inputs, textareas, and labels, within a web form. 
+The `<fieldset>` HTML element groups related form controls, such as buttons, inputs, textareas, and labels, within a web form.
 
 This allows you to apply common styling and functional rules to the entire set of elements. Let's take a closer look at working with fieldsets!
 
-The current forms includes 6 inputs and we will want each pair to be visually and logically grouped together. 
+The current forms includes 6 inputs and we will want each pair to be visually and logically grouped together.
 
 Create **3 fieldsets** by wrapping them around the markup responsible for displaing the form fields:
 
@@ -24,4 +24,4 @@ Create **3 fieldsets** by wrapping them around the markup responsible for displa
       <input id="q_2" />
     </div>
   </fieldset>
-```
+```

docs/demo/src/content/tutorial/1-forms-css/3-fieldset/2-a-legend/content.md

@@ -5,8 +5,8 @@ slug: a-legend
 focus: /index.html
 ---
 
-Even with the default styling `<fieldset>` already visually separates one group of form controls from another. 
-It might be better to explain to a form user what each group represents. That's the purpose of a `<legend>` element. 
+Even with the default styling `<fieldset>` already visually separates one group of form controls from another.
+It might be better to explain to a form user what each group represents. That's the purpose of a `<legend>` element.
 
 Let's add a legend to each of our fieldsets:
 
@@ -22,4 +22,4 @@ Let's add a legend to each of our fieldsets:
       <input id="q_2" />
     </div>
   </fieldset>
-```
+```