[ux/onboarding] Scaffolding for hax-devcontainer-nodejs, defining recommended extensions

.devcontainer/devcontainer.json

@@ -0,0 +1,41 @@
+// For format details, see https://aka.ms/devcontainer.json.
+{
+	"name": "Webcomponents Dev Container",
+	"image": "ghcr.io/haxtheweb/devcontainer-nodejs:latest",
+  // Compatibility with SELinux
+	"runArgs": ["--security-opt", "label=disable"],
+
+	// Configure tool-specific properties.
+	"customizations": {
+		"vscode": {
+			"settings": {},
+			"extensions": [
+				"runem.lit-plugin",
+        "bierner.lit-html",
+        "deque-systems.vscode-axe-linter",
+        "ecmel.vscode-html-css",
+        "oliversturm.fix-json",
+        "yzhang.markdown-all-in-one",
+        "zdodson.dddignore"
+			]
+		}
+	},
+
+	// Use 'portsAttributes' to set default properties for specific forwarded ports. 
+	// More info: https://containers.dev/implementors/json_reference/#port-attributes
+	"portsAttributes": {
+		"3000": {
+			"label": "Express Port",
+			"onAutoForward": "silent"
+		},
+    "8000": {
+        "label": "HAXsite Port",
+        "onAutoForward": "silent"
+    }
+	},
+
+  "workspaceFolder": "/home/ubuntu/${localWorkspaceFolderBasename}",
+  "workspaceMount": "source=${localWorkspaceFolder},target=/home/ubuntu/${localWorkspaceFolderBasename},type=bind,consistency=cached",
+
+	"postCreateCommand": "bash scripts/haxthewebme.sh"
+}

.vscode/extensions.json

@@ -0,0 +1,12 @@
+{
+    "recommendations": [
+        "bierner.lit-html",
+        "deque-systems.vscode-axe-linter",
+        "ecmel.vscode-html-css",
+        "oliversturm.fix-json",
+        "runem.lit-plugin",
+        "yzhang.markdown-all-in-one",
+        "zdodson.dddignore",
+        "ms-vscode-remote.remote-containers"
+    ]
+}

README.md

@@ -44,7 +44,24 @@ Web components that can work in just about anything, are very small (Vanila or L
 
 *Notice: You will need to use [Node](https://nodejs.org/en/) version 6.0 or higher. Verify that you have yarn enabled — if not [install yarn globally](https://yarnpkg.com/lang/en/docs/install/). These web components are written in [ES6](http://es6-features.org/) and build routines compile to es5 to encompass legacy browsers.*
 
-### Quick Install for Git Bash/WSL/macOS/Linux
+### Quick Install: Dev Containers 
+
+HAXTheWeb is dedicated to making contribution an accessible and simple experience. That's why we prepare an environment tailored with the right tools for getting started! Our project follows the [Dev Container specification](https://containers.dev/implementors/spec/) to provide a consistent, UX-focused experience across operating systems.
+
+#### Prerequisites
+
+1. Install Docker (or another container runtime)
+    * [Windows](https://docs.docker.com/desktop/setup/install/windows-install/)
+        * Ensure that you select the **WSL 2 Backend** option
+    * [macOS](https://docs.docker.com/desktop/setup/install/mac-install/)
+    * [Linux](https://docs.docker.com/desktop/setup/install/linux/)
+    * [Dev Containers](https://containers.dev/) are broadly supported across OCI-compliant runtimes like Docker, Podman, and OrbStack.
+
+After this step you're ready to go, no fiddling with the command line! Clone the project, open your IDE, accept our recommended extensions, then select **Reopen in Container**!
+
+### Quick Install: Git Bash/WSL/macOS/Linux
+
+You can also install the `webcomponents` monorepo natively. Use our onboarding script or follow the manual steps below:
 ```bash
 curl -fsSL https://raw.githubusercontent.com/haxtheweb/webcomponents/master/scripts/haxthewebme.sh -o haxthewebme.sh && sh haxthewebme.sh
 ```
@@ -75,17 +92,17 @@ git fetch upstream
 git pull
 ```
 
-## Windows Install
-[Git Bash](https://git-scm.com/install/windows) or [Windows Subsystem for Linux (WSL)](https://learn.microsoft.com/en-us/windows/wsl/install) are recommended for the best cross-compatibility with HAX's developer tooling. We also support native **PowerShell** for Windows contributors, although certain advanced utilities may experience instability.
+### Windows Support
+[Git Bash](https://git-scm.com/install/windows) or [Windows Subsystem for Linux (WSL)](https://learn.microsoft.com/en-us/windows/wsl/install) are recommended for the best cross-compatibility with HAX's developer tooling. We also support **PowerShell** for Windows contributors, although certain utilities may experience instability.
 
-### Windows Developer Mode
-HAXTheWeb uses symlinks in many parts of the local environment. This allows us to emulate the functionality of a live HAXsite without running the full system. On Windows, PowerShell-based symlinks normally require running the shell as *Administrator*.
+#### Windows Developer Mode
+The monorepo uses symlinks in many parts of its local environment. This allows us to emulate the functionality of a live HAXsite without running the full system. On Windows, symlinks normally require running the shell as *Administrator*.
 
 Enabling **Developer Mode** removes this *Administrator* requirement for common development tasks. Start by opening your **Windows Settings**:
 * On Windows 10: Update and Security -> For developers -> Developer Mode
 * On Windows 11: System -> Advanced -> For developers -> Developer Mode
 
-### Quick Install for Windows
+#### Quick Install: Windows
 ```powershell
 irm https://raw.githubusercontent.com/haxtheweb/webcomponents/master/scripts/haxthewebme.ps1 | iex
 ```

scripts/haxthewebme.sh

@@ -108,11 +108,18 @@ if ! command -v yarn;then
 fi
 
 clone_and_install () {
-  git clone https://github.com/haxtheweb/webcomponents.git
-  cd webcomponents
+  if [[ "$PWD" == *webcomponents* && -d ".git/" ]]; then
+    echo "Already cloned repository to working directory, continuing"
+  else
+    git clone https://github.com/haxtheweb/webcomponents.git
+    cd webcomponents
+  fi
   npm install -g add @haxtheweb/create
   yarn global add web-component-analyzer
-  yarn install
+  [ ! -d node_modules ] && { [ -f yarn.lock ] && rm yarn.lock; yarn install; }
+
+  printf "Use \033[34myarn run haxsite\033[0m to work on the HAXcms interface\n"
+  printf "Run \033[34mcd elements/<ELEMENTNAME>\033[0m, then \033[34myarn start\033[0m to work on a specific element\n"
 }
 
 if [[ "${machine}" == "Cygwin" || "${machine}" == "MinGw" ]]; then