chore: update the development instructions and the task commands (#528

)

## Description

This PR contains updates to the development instructions along with some
changes to the `task` commands for easier development processes.

Fixes #527

---------

Co-authored-by: Somraj Saha <somraj.saha@jarmos.dev>

.pre-commit-config.yaml

@@ -1,14 +1,14 @@
 repos:
   - repo: https://github.com/pre-commit/pre-commit-hooks
-    rev: v4.5.0
+    rev: v4.6.0
     hooks:
       - id: trailing-whitespace
       - id: end-of-file-fixer
       - id: check-yaml
       - id: check-added-large-files
 
   - repo: https://github.com/alessandrojcm/commitlint-pre-commit-hook
-    rev: v9.10.0
+    rev: v9.18.0
     hooks:
       - id: commitlint
         name: lint commit messages
@@ -18,7 +18,7 @@ repos:
           - "@commitlint/config-conventional"
 
   - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: v4.0.0-alpha.7
+    rev: v4.0.0-alpha.8
     hooks:
       - id: prettier
         name: format frontend source code
@@ -37,7 +37,7 @@ repos:
           - javascript
 
   - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: v8.56.0
+    rev: v9.10.0
     hooks:
       - id: eslint
         name: lint frontend source code
@@ -53,7 +53,7 @@ repos:
           - javascript
 
   - repo: https://github.com/antonbabenko/pre-commit-terraform
-    rev: v1.85.0
+    rev: v1.95.0
     hooks:
       - id: terraform_fmt
         name: format Terraform code

README.md

@@ -97,7 +97,7 @@ need;
 Once you've completed the tutorials ensure you've the following tools installed
 on your local development environment;
 
-1. [Node.js](https://nodejs.org)
+1. [Node.js](https://nodejs.org) and [`pnpm`](https://pnpm.io)
 2. [Terraform](https://terraform.io)
 3. [Task](https://taskfile.dev)
 4. [Pre-Commit](https://pre-commit.com)
@@ -111,38 +111,45 @@ to get started with developing the website;
 
 2. Clone the contents of the forked repository by running;
 
-```console
-git clone git@github.com:<YOUR-USERNAME>/jarmos.dev
-```
+   ```console
+   git clone git@github.com:<YOUR-USERNAME>/jarmos.dev
+   ```
+
+   **NOTE**: The blog posts are versioned under a private submodule. To fetch it
+   (with the appropriate permissions of course!), run the following command:
+
+   ```console
+   git clone --recurse-submodules git@github.com:Jarmos-san/jarmos.dev
+   ```
 
 3. Change directory to the cloned repository and then run the following command
    to install the necessary dependencies and the `git-hooks` for quality
    assurance checks.
 
-```console
-task setup
-```
+   ```console
+   task setup
+   ```
 
 4. Once all the dependencies are installed and setup, run the development
    webserver using;
 
-```console
-task
-```
+   ```console
+   task
+   ```
 
 5. After making proper changes to the source code, run the production build of
    the website for a sanity check;
 
-```console
-task preview
-```
+   ```console
+   task preview
+   ```
 
 6. If the production build of the website looks sane and satisfactory, run the
    quality assurance checks by invoking;
 
-```console
-task qa
-```
+   ```console
+   task qa
+   ```
 
 7. If all the QA checks passes, commit your changes and push them to your forked
    repository. From there you will be able to create a Pull Request which will

Taskfile.yml

@@ -15,7 +15,7 @@ tasks:
       setup the correct IP address and the ports to make the website accessible
       on a network.
     dir: ./web
-    cmd: npm run dev -- --host
+    cmd: pnpm dev --host
 
   setup:precommit:
     internal: true
@@ -44,19 +44,19 @@ tasks:
       - "**.tf"
     cmd: terraform init
 
-  setup:npm:
-    desc: Install the "npm" dependencies
+  setup:pnpm:
+    desc: Install the "pnpm" dependencies
     summary: |
-      Install the "npm" dependencies.
+      Install the "pnpm" dependencies.
 
-      This task will install the "npm" dependencies for the Astro project and
+      This task will install the "pnpm" dependencies for the Astro project and
       generate the "package-lock.json" file as well if it deems necessary.
     dir: ./web
     sources:
       - package.json
     generates:
       - package-lock.json
-    cmd: npm ci
+    cmd: pnpm install --frozen-lockfile
 
   setup:
     desc: Setup the local development environment
@@ -67,7 +67,7 @@ tasks:
       else in preparation for starting a development environment for the project.
     dir: ./web
     cmds:
-      - task: setup:npm
+      - task: setup:pnpm
       - task: setup:precommit
       - task: setup:terraform
 
@@ -80,7 +80,7 @@ tasks:
       static assets (the HTML, CSS and JS bundles) for the website. The command
       can be used in an CI/CD environment or chained to another task.
     dir: ./web
-    cmd: npm run build
+    cmd: pnpm build
     generates:
       - "./dist"
     sources:
@@ -98,12 +98,12 @@ tasks:
     deps:
       - task: build
     dir: ./web
-    cmd: npm run preview
+    cmd: pnpm preview --host
 
   format:prettier:
     internal: true
     dir: ./web
-    cmd: npm run format:fix
+    cmd: pnpm format:fix
 
   format:terraform:
     internal: true
@@ -122,10 +122,10 @@ tasks:
       - task: format:prettier
       - task: format:terraform
 
-  qa-checks:npm:
+  qa-checks:pnpm:
     internal: true
     dir: ./web
-    cmd: npm run tests
+    cmd: pnpm tests
 
   qa-checks:terraform:
     internal: true
@@ -143,7 +143,7 @@ tasks:
     cmds:
       - pre-commit run --all-files
       # TODO: Uncomment the line after figuring out proper Playwright usage
-      # - task: qa-checks:npm
+      # - task: qa-checks:pnpm
 
   cleanup:
     desc: Perform a quick cleanup of the local development environment

web/src/components/Header.astro

@@ -1,6 +1,4 @@
 ---
-import { Image } from "astro:assets";
-
 import MenuButton from "./MenuButton.vue";
 ---