From 44073ab643d3285856b0aa8a905d3edd593068e8 Mon Sep 17 00:00:00 2001
From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com>
Date: Mon, 29 May 2023 19:10:56 +0200
Subject: [PATCH] chore: add GitHub codespace

---
 .devcontainer/devcontainer.json   | 42 +++++++++++++++++++++++++++++++
 .devcontainer/welcome-message.txt |  7 ++++++
 README.md                         | 17 ++++++++++++-
 3 files changed, 65 insertions(+), 1 deletion(-)
 create mode 100644 .devcontainer/devcontainer.json
 create mode 100644 .devcontainer/welcome-message.txt

diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
new file mode 100644
index 0000000..51e4fa6
--- /dev/null
+++ b/.devcontainer/devcontainer.json
@@ -0,0 +1,42 @@
+// For format details, see https://aka.ms/devcontainer.json.
+{
+  "name": "angular-testing-library",
+  "image": "mcr.microsoft.com/devcontainers/typescript-node:0-18-bullseye",
+
+  // Features to add to the dev container. More info: https://containers.dev/features.
+  "features": {
+    "ghcr.io/devcontainers/features/github-cli:1": {},
+    "ghcr.io/devcontainers/features/sshd:1": {}
+  },
+
+  // Use 'forwardPorts' to make a list of ports inside the container available locally.
+  // "forwardPorts": [],
+
+  // Use 'postCreateCommand' to run commands after the container is created.
+  "postCreateCommand": "npm i",
+  "onCreateCommand": "sudo cp .devcontainer/welcome-message.txt /usr/local/etc/vscode-dev-containers/first-run-notice.txt",
+  "waitFor": "postCreateCommand",
+
+  // Configure tool-specific properties.
+  "customizations": {
+    // Configure properties specific to VS Code.
+    "vscode": {
+      "settings": {
+        "[typescript]": {
+          "editor.defaultFormatter": "esbenp.prettier-vscode",
+          "editor.formatOnSave": true
+        },
+        "[md]": {
+          "editor.defaultFormatter": "esbenp.prettier-vscode",
+          "editor.formatOnSave": true
+        },
+        "[json]": {
+          "editor.defaultFormatter": "esbenp.prettier-vscode",
+          "editor.formatOnSave": true
+        }
+      },
+      // Add the IDs of extensions you want installed when the container is created.
+      "extensions": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
+    }
+  }
+}
diff --git a/.devcontainer/welcome-message.txt b/.devcontainer/welcome-message.txt
new file mode 100644
index 0000000..952d2c4
--- /dev/null
+++ b/.devcontainer/welcome-message.txt
@@ -0,0 +1,7 @@
+👋 Welcome to "Angular Testing Library" in GitHub Codespaces!
+
+🛠️  Your environment is fully setup with all the required software.
+
+🔍 To explore VS Code to its fullest, search using the Command Palette (Cmd/Ctrl + Shift + P or F1).
+
+📝 Edit away, run your app as usual, and we'll automatically make it available for you to access.
\ No newline at end of file
diff --git a/README.md b/README.md
index 46f5c6a..8dbaf24 100644
--- a/README.md
+++ b/README.md
@@ -47,11 +47,14 @@ practices.</p>
   </a>
 </div>
 
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://github.com/codespaces/new?hide_repo_select=true&ref=main&repo=137053739)
+
 ## Table of Contents
 
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
+- [Table of Contents](#table-of-contents)
 - [The problem](#the-problem)
 - [This solution](#this-solution)
 - [Example](#example)
@@ -60,10 +63,12 @@ practices.</p>
 - [Contributors](#contributors)
 - [Docs](#docs)
 - [FAQ](#faq)
+  - [I am using Reactive Forms and the `jest-dom` matcher `toHaveFormValues` always returns an empty object or there are missing fields. Why?](#i-am-using-reactive-forms-and-the-jest-dom-matcher-tohaveformvalues-always-returns-an-empty-object-or-there-are-missing-fields-why)
 - [Issues](#issues)
   - [🐛 Bugs](#-bugs)
   - [💡 Feature Requests](#-feature-requests)
   - [❓ Questions](#-questions)
+- [Getting started with GitHub Codespaces](#getting-started-with-github-codespaces)
 - [LICENSE](#license)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
@@ -250,7 +255,7 @@ Contributions of any kind welcome!
 
 ## FAQ
 
-##### I am using Reactive Forms and the `jest-dom` matcher `toHaveFormValues` always returns an empty object or there are missing fields. Why?
+### I am using Reactive Forms and the `jest-dom` matcher `toHaveFormValues` always returns an empty object or there are missing fields. Why?
 
 Only form elements with a `name` attribute will have their values passed to `toHaveFormsValues`.
 
@@ -280,6 +285,16 @@ instead of filing an issue on GitHub.
 - [Discord][discord]
 - [Stack Overflow][stackoverflow]
 
+## Getting started with GitHub Codespaces
+
+To get started, create a codespace for this repository by clicking this 👇
+
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://github.com/codespaces/new?hide_repo_select=true&ref=main&repo=137053739)
+
+A codespace will open in a web-based version of Visual Studio Code. The [dev container](.devcontainer/devcontainer.json) is fully configured with software needed for this project.
+
+**Note**: Dev containers is an open spec which is supported by [GitHub Codespaces](https://github.com/codespaces) and [other tools](https://containers.dev/supporting).
+
 ## LICENSE
 
 MIT