Merge remote-tracking branch 'origin/main' into joan/mobile-support

Author: Nemikolh

.github/workflows/ci.yaml

@@ -25,13 +25,13 @@ jobs:
       - name: Setup
         uses: pnpm/action-setup@v4
         with:
-          version: 8
+          version: 8.15.6
       - name: Checkout
         uses: actions/checkout@v4
       - name: Install dependencies
         run: pnpm install
       - name: Lint
-        run: pnpm prettier --check .
+        run: pnpm lint
       - name: Build
         run: pnpm build
       - name: Test
@@ -44,7 +44,7 @@ jobs:
       - name: Setup
         uses: pnpm/action-setup@v4
         with:
-          version: 8
+          version: 8.15.6
       - name: Checkout
         uses: actions/checkout@v4
       - name: Install dependencies

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>
-```
+```

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

@@ -5,10 +5,10 @@ slug: fieldset-styling
 focus: /style.css
 ---
 
-Our HTML looks great, but the default styles leave a lot of room for improvements. Thankfully, the way `<fieldset>` and `<legend>` look like can be customized with a standard CSS. 
+Our HTML looks great, but the default styles leave a lot of room for improvements. Thankfully, the way `<fieldset>` and `<legend>` look like can be customized with a standard CSS.
 
-Here some of these styles have already been applied (note the `border-style: solid` in line #3 – see what changes if you comment it out) but they still need some finishing touches! 
+Here some of these styles have already been applied (note the `border-style: solid` in line #3 – see what changes if you comment it out) but they still need some finishing touches!
 
 Try adjusting the properties of these elements to make each fieldset look like this:
 
-<img src="/images/fieldset-styles.png" class="m-auto my-6 w-full max-w-120">
+<img src="/images/fieldset-styles.png" class="m-auto my-6 w-full max-w-120">

docs/demo/src/content/tutorial/1-forms-css/3-fieldset/5-focus-within/content.md

@@ -4,7 +4,7 @@ title: Focus within
 slug: focus-within
 focus: /style.css
 ---
-A great way to give our visitors a pointer to where they are in the form is the `:focus` state. The most common way to apply it is by highlighting the currently focused form controls like buttons and inputs. But now that the fieldset provides us with a higher level of organization for the form, we can also highlight it to give even better visual guidance! 
+A great way to give our visitors a pointer to where they are in the form is the `:focus` state. The most common way to apply it is by highlighting the currently focused form controls like buttons and inputs. But now that the fieldset provides us with a higher level of organization for the form, we can also highlight it to give even better visual guidance!
 
 Although `<fieldset>` doesn't have its own `:focus` state, we can use a similar pseudo-selector, called `:focus-within`. It will match whenever a descendant of the targeted element gets focus. In the case of our form, we can add it on fieldset to make it apply style when an input inside focuses.
 
@@ -18,4 +18,4 @@ fieldset:focus-within legend {
   color: #00a9;
   border-color: #00a6;
 }
-```
+```

docs/demo/src/content/tutorial/1-forms-css/3-fieldset/6-the-end/content.md

@@ -6,6 +6,6 @@ focus: /style.css
 ---
 You've reached the end of this tutorial! We hope you've enjoyed it and learned something new about working with CSS and forms.
 
-This app was built using the TutorialKit framework and you can make a similiar learning resource for your team or open-source community yourself! TutorialKit provides all the necessary tooling, and UI out of the box, so that you can focus on the content. 
+This app was built using the TutorialKit framework and you can make a similiar learning resource for your team or open-source community yourself! TutorialKit provides all the necessary tooling, and UI out of the box, so that you can focus on the content.
 
-To learn more, visit <a href="https://tutorialkit.dev">tutorialkit.dev</a>.
+To learn more, visit <a href="https://tutorialkit.dev">tutorialkit.dev</a>.

docs/tutorialkit.dev/astro.config.ts

@@ -1,6 +1,6 @@
-import { defineConfig } from 'astro/config';
 import react from '@astrojs/react';
 import starlight from '@astrojs/starlight';
+import { defineConfig } from 'astro/config';
 import starlightLinksValidator from 'starlight-links-validator';
 
 // https://astro.build/config
@@ -24,7 +24,7 @@ export default defineConfig({
         {
           label: 'Guides',
           items: [
-            // Each item here is one entry in the navigation menu.
+            // each item here is one entry in the navigation menu
             {
               label: 'About',
               link: '/guides/about/',
@@ -52,9 +52,6 @@ export default defineConfig({
           ],
         },
       ],
-      // social: {
-      // github: 'https://github.com/withastro/starlight',
-      // },
       tableOfContents: {
         maxHeadingLevel: 5,
       },

docs/tutorialkit.dev/src/components/Buttons/Button/Button.module.scss

@@ -7,7 +7,6 @@
   align-items: center;
   justify-content: center;
   height: 52px;
-  // width: fit-content;
   padding: 1px 40px 0;
   border-radius: 26px;
   color: var(--custom-color-text-strong);
@@ -20,10 +19,12 @@
   backdrop-filter: blur(8px);
   transition: var(--transition-fast);
   transition-property: background-color, box-shadow, color;
+
   [data-theme='light'] & {
     --outline-color-hsl: 0, 0%, 0%;
     background-color: hsla(224, 32%, 28%, 0.08);
   }
+
   &:hover {
     --outline-opacity: 0.1;
     color: var(--custom-color-text-strong) !important; // !important for starlight override only
@@ -38,6 +39,7 @@
     color: #fff !important; // !important for starlight override only
     box-shadow: inset 0 1px 0 1px rgba(255, 255, 255, 0.16);
     background-color: #1488fc;
+
     &:hover {
       background-color: #2793ff;
     }

docs/tutorialkit.dev/src/components/Layout/Head.astro

@@ -7,6 +7,7 @@ import Default from '@astrojs/starlight/components/Head.astro';
 
 {/* Google Tag Manager */}
 <script is:inline async src="https://www.googletagmanager.com/gtag/js?id=G-64MFE82HG5"></script>
+
 <script is:inline>
   window.dataLayer = window.dataLayer || [];
   function gtag() {

docs/tutorialkit.dev/src/content/docs/guides/about.mdx

@@ -7,7 +7,7 @@ TutorialKit is an open source tool that enables you to create interactive code t
 
 TutorialKit enables you to spin spin up a live interactive tutorial site in minutes complete with:
 
-- Code editor with syntax highlighting 
+- Code editor with syntax highlighting
 - Live dev server preview that updates as learners experiment with your tutorial code
 - Interactive terminal
 - User friendly “Show me the answer” capability
@@ -17,8 +17,8 @@ TutorialKit enables you to spin spin up a live interactive tutorial site in minu
 
 ## Getting started
 
-This documentation will guide you through the steps to build your first interactive tutorial. 
+This documentation will guide you through the steps to build your first interactive tutorial.
 
 As the first step, see the [Installation](/guides/installation/) page to learn how to generate the project, and once you do, learn the basics of creating the content and corresponding code in [Creating a Lesson](/guides/creating-content/).
 
-This will give you the basics needed to start compiling your training materials into an interactive onboarding experience. However, you'll likely want to customize that experience to fit your specific needs. For that, TutorialKit offers a range of configuration and theming options, which we have covered in the [Configuration](/guides/configuration) page.
+This will give you the basics needed to start compiling your training materials into an interactive onboarding experience. However, you'll likely want to customize that experience to fit your specific needs. For that, TutorialKit offers a range of configuration and theming options, which we have covered in the [Configuration](/guides/configuration) page.

docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx

@@ -48,11 +48,11 @@ title: Welcome to TutorialKit
 ---
 
 # Kitchen Sink [Heading 1]
-Lorem ipsum dolor 
+Lorem ipsum dolor
 <!--  ... -->
 ```
 
-This is a Markdown file with a frontmatter block at the top (marked by a single `---` line at the beginning of the file and another `---` line to close the block). 
+This is a Markdown file with a frontmatter block at the top (marked by a single `---` line at the beginning of the file and another `---` line to close the block).
 
 The frontmatter block contains metadata about the lesson, such as the title, description, and other properties that will allow you to configure this specific lesson.
 
@@ -79,9 +79,9 @@ This will change the URL of the lesson to `localhost:4321/1-basics/1-introductio
 
 ## A lesson code
 
-Beside the `content.md` file in a lesson's directory, you will find two folders: 
-- `_files` 
-- `_solution` 
+Beside the `content.md` file in a lesson's directory, you will find two folders:
+- `_files`
+- `_solution`
 
 The `_files` folder contains any code files that are part of the lesson. For example, if the lesson revolves around React components, you might have a `Button.jsx` file there. The content of this file will be displayed in the tutorial app's code editor and will be run in its preview. You can place any number of files in this folder.
 
@@ -95,17 +95,17 @@ The `_solution` folder contains the code for the lesson in its solved state. Thi
 
 For the code to run in the preview, it must be an actual, working application, including a dev server and any necessary configuration files. Usually, it's not practical to include this kind of boilerplate files in a lesson content (and copy it for every further lesson!). Instead, you can use the `template` feature of TutorialKit to provide a base project that will be used for all lessons.
 
-To display the code in the preview of a lesson, TutorialKit will use the template project and apply the content of the `_files` (or `_solution`) folder on top of it. 
+To display the code in the preview of a lesson, TutorialKit will use the template project and apply the content of the `_files` (or `_solution`) folder on top of it.
 
-You can find the default template in the `src/templates/default` directory. This is a Vite project which is a great starting point for a vanilla JavaScript app. Note, that when you navigate to that folder and run `npm run dev` inside, it will be a fully working Vite project. 
+You can find the default template in the `src/templates/default` directory. This is a Vite project which is a great starting point for a vanilla JavaScript app. Note, that when you navigate to that folder and run `npm run dev` inside, it will be a fully working Vite project.
 
 You can modify this template to fit your needs, or create a new one from scratch. You can also have multiple templates and switch between them for different parts of your tutorial. To do that, you need to specify the template name in the **lesson's**, **chapter's**, or **part's** front matter block:
 
 ```markdown {3}
 ---
 title: Advanced Topics
-template: my-advanced-template 
+template: my-advanced-template
 ---
 ```
 
-This declaration will make TutorialKit use the `src/templates/my-advanced-template` directory as the base for the lesson.
+This declaration will make TutorialKit use the `src/templates/my-advanced-template` directory as the base for the lesson.

docs/tutorialkit.dev/src/content/docs/guides/deployment.mdx

@@ -4,7 +4,7 @@ description: "Deploying TutorialKit to production"
 ---
 import PackageManagerTabs from '@components/Tabs/PackageManagerTabs.astro'
 
-Your TutorialKit project is a static site built using two key technologies: [Astro](https://astro.build/) and [WebContainers](https://webcontainers.io/). These two elements shape the details how you deploy TutorialKit to production. 
+Your TutorialKit project is a static site built using two key technologies: [Astro](https://astro.build/) and [WebContainers](https://webcontainers.io/). These two elements shape the details how you deploy TutorialKit to production.
 
 In the following sections you will learn more about the build process and the deployment configuration.
 
@@ -30,7 +30,7 @@ To prepare the production build of your TutorialKit project, run the following c
   </Fragment>
 </PackageManagerTabs>
 
-This will generate a `dist` directory containing the static files that make up your TutorialKit project. 
+This will generate a `dist` directory containing the static files that make up your TutorialKit project.
 
 You can learn more about the build process in the [Astro documentation](https://docs.astro.build/en/reference/cli-reference/#astro-build).
 
@@ -107,4 +107,4 @@ You can configure headers your `vercel.json` file:
 }
 ```
 
-Read more about [headers on Vercel](https://vercel.com/docs/concepts/projects/project-configuration#headers).
+Read more about [headers on Vercel](https://vercel.com/docs/concepts/projects/project-configuration#headers).

docs/tutorialkit.dev/src/content/docs/guides/installation.mdx

@@ -28,8 +28,7 @@ Run the following command in your terminal to start the install wizard:
   </Fragment>
   <Fragment slot="yarn">
   ```shell
-  # create a new project with Yarn 
-  
+  # create a new project with Yarn
   yarn create tutorial
   ```
   </Fragment>

docs/tutorialkit.dev/src/content/docs/guides/ui.mdx

@@ -36,16 +36,16 @@ Code edits made by a user are automatically picked up by a Preview app's dev ser
 
 ### Preview
 
-The preview displays the application which is a result of applying lesson files to the [code template](/guides/creating-content/#code-templates) and running that code. 
+The preview displays the application which is a result of applying lesson files to the [code template](/guides/creating-content/#code-templates) and running that code.
 
 <Image src={uiPreviewImage} alt="TutorialKit's Preview" />
 
 Before your application template's dev server opens a port with something to be displayed, the preview shows the preparation steps such as "Installing dependencies", "Starting HTTP server" to indicate progress to the user. Note that you can customize these steps for each lesson, chapter or part of the tutorial (see: [prepareCommands](/guides/configuration/#preparecommands) reference).
 
-The preview updates in real-time as the user makes changes to the code, chooses to see the solution or navigates between lessons. 
+The preview updates in real-time as the user makes changes to the code, chooses to see the solution or navigates between lessons.
 
 ### Terminal
 
 The terminal displays the output of your demo application's dev server.
 
-<Image src={uiTerminalImage} alt="TutorialKit's Terminal" />
+<Image src={uiTerminalImage} alt="TutorialKit's Terminal" />