feat: vscode devcontainer (#2335)

I added a [Remote Development
Containers](https://code.visualstudio.com/docs/devcontainers/tutorial)
in Visual Studio Code (VSCode).

Lots of people like to develop in Containers to have a clean system.
With this PR, it is possible to work with al-folio without any
installation (except for VS Code, its Remote Dev Container extension,
and Docker).

Once you've opened the `al-folio` repository, a prompt will appear
requesting to reopen the project within a container.

<img width="541" alt="grafik"
src="https://github.com/alshedivat/al-folio/assets/1998723/2963446f-8e42-4df1-9e8c-22691d78b7e4">

Upon doing so, Jekyll will automatically start within the container and
prompt you to open the website's preview sidebar directly in VSCode or
using your Browser. Additionally, it installs extensions for `liquid`
and Prettier (`npx prettier`). Files are formatted using
`al-folios`-prettier settings (`.prettierrc`) to streamline pull request
submission.

Additionally, the performance seems to be much better compared to the
`docker-compose`setup, see #2333.

---------

Co-authored-by: George <[email protected]>

Author: CheariX

.devcontainer/devcontainer.json

@@ -0,0 +1,31 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/jekyll
+{
+  "name": "Jekyll",
+  "image": "mcr.microsoft.com/devcontainers/jekyll",
+
+  // Features to add to the dev container. More info: https://containers.dev/features.
+  "features": {
+    "ghcr.io/rocker-org/devcontainer-features/apt-packages:1": {
+      "packages": "build-essential,imagemagick,inotify-tools,jupyter-nbconvert,procps,ruby-full,zlib1g-dev"
+    },
+    "ghcr.io/devcontainers-contrib/features/prettier:1": {}
+  },
+
+  // Optionally: run jekyll serve automatically on container entering using the Docker entrypoint
+  "postAttachCommand": "./bin/entry_point.sh",
+
+  "customizations": {
+    "vscode": {
+      "extensions": ["esbenp.prettier-vscode", "sissel.shopify-liquid", "yzhang.markdown-all-in-one"],
+      "settings": {
+        // use prettier code formatter as default formatter
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "prettier.configPath": ".prettierrc",
+        "editor.formatOnSave": true
+      }
+    }
+  },
+
+  "remoteUser": "vscode"
+}

INSTALL.md

@@ -1,11 +1,13 @@
 # Table of Contents
 
+- [Table of Contents](#table-of-contents)
 - [Installing and Deploying](#installing-and-deploying)
   - [Recommended Approach](#recommended-approach)
   - [Local Setup on Windows](#local-setup-on-windows)
   - [Local Setup using Docker (Recommended)](#local-setup-using-docker-recommended)
     - [Build your own docker image](#build-your-own-docker-image)
-  - [Local Setup (Legacy)](#local-setup-legacy)
+  - [Local Setup with Development Containers](#local-setup-with-development-containers)
+  - [Local Setup (Legacy, no longer supported)](#local-setup-legacy-no-longer-supported)
   - [Deployment](#deployment)
     - [For personal and organization webpages](#for-personal-and-organization-webpages)
     - [For project pages](#for-project-pages)
@@ -74,7 +76,12 @@ $ docker compose up --build
 
 If you want to use a specific docker version, you can do so by changing `latest` tag to `your_version` in `docker-compose.yaml`. For example, you might have created your website on `v0.10.0` and you want to stick with that.
 
-## Local Setup (Legacy)
+## Local Setup with Development Containers
+
+`al-folio` supports [Development Containers](https://containers.dev/supporting).
+For example, when you open the repository with Visual Studio Code (VSCode), it prompts you to install the necessary extension and automatically install everything necessary.
+
+## Local Setup (Legacy, no longer supported)
 
 For a hands-on walkthrough of running al-folio locally without using Docker, check out [this cool blog post](https://george-gca.github.io/blog/2022/running-local-al-folio/) by one of the community members!
 
@@ -176,7 +183,7 @@ In its default configuration, al-folio will copy the top-level `README.md` to th
 
 **Note:** Do _not_ run `jekyll clean` on your publishing source repo as this will result in the entire directory getting deleted, irrespective of the content of `keep_files` in `_config.yml`.
 
-### Upgrading from a previous version
+## Upgrading from a previous version
 
 If you installed **al-folio** as described above, you can configure a [GitHub action](https://github.com/AndreasAugustin/actions-template-sync) to automatically sync your repository with the latest version of the theme.