From 09006281ca3114840d8351ef9f617eb383d85d1f Mon Sep 17 00:00:00 2001 From: CheariX Date: Tue, 16 Apr 2024 13:57:03 +0000 Subject: [PATCH] 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. grafik 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 <31376482+george-gca@users.noreply.github.com> --- .devcontainer/devcontainer.json | 31 +++++++++++++++++++++++++++++++ INSTALL.md | 13 ++++++++++--- 2 files changed, 41 insertions(+), 3 deletions(-) create mode 100644 .devcontainer/devcontainer.json diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json new file mode 100644 index 000000000000..fcb4b72b4ce8 --- /dev/null +++ b/.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" +} diff --git a/INSTALL.md b/INSTALL.md index 754e5e19c240..ccd7ea07f05a 100644 --- a/INSTALL.md +++ b/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.