docs: add docs devcontainer

PR-URL: hasura/graphql-engine-mono#7296
GitOrigin-RevId: 68d9ac0bc8697aad0661480b33f65949ffdc8a80

Author: robertjdominguez

.devcontainer/docs/devcontainer.json

@@ -0,0 +1,20 @@
+{
+  "name": "Node.js",
+  "image": "mcr.microsoft.com/devcontainers/javascript-node:0-18",
+  "features": {
+    "ghcr.io/devcontainers/features/git:1": {}
+  },
+  "forwardPorts": [3000],
+  "postCreateCommand": "cd docs && yarn install",
+  "customizations": {
+    "codespaces": {
+      "vscode": {
+        "extensions": ["esbenp.prettier-vscode", "streetsidesoftware.code-spell-checker"]
+      },
+      "openFiles": ["docs/CODESPACES.md"]
+    }
+  }
+
+  // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+  // "remoteUser": "root"
+}

docs/CODESPACES.md

@@ -0,0 +1,24 @@
+# You're Using Codespaces
+
+Look at you go! Since this is running in a devcontainer, we've installed dependencies automatically for you 🔥
+
+## The deets
+
+We've installed a few useful extensions for you, too:
+
+- **Prettier** because who formats their own code in this day and age?
+- **code-spell-checker** because words are hard.
+
+We hope these additions make contributing a breeze.
+
+## Next steps
+
+In the terminal below, you should see a `postCreateCommand` script running. When it's done, you'll need to run the following command to fire up the dev server:
+
+```bash
+cd docs && yarn start --host 0.0.0.0
+```
+
+Happy contributing!
+
+❤️ Docs Team

docs/static/img/wiki/codespaces-1.gif

@@ -300,7 +300,7 @@ Assets are stored in `static/img/<feature-folder>`. Just like the file-based rou
 file paths are important for images as well. However, instead of any output to the console, the page will simply crash
 and present a message indicating which image's path cannot be resolved.
 
-<Thumbnail src="/img/wiki/broken-image.png" alt="Add check constraint" width="1000px" />
+<Thumbnail src='/img/wiki/broken-image.png' alt='Add check constraint' width='1000px' />
 
 Use the erroneous image path to identify the error, facepalm, and then fix your typo.
 
@@ -325,3 +325,31 @@ Perhaps the biggest pitfall we've encountered with Docusaurus is how delicate `.
 placement of code blocks and other text. If you've included a code block using common markdown syntax, and things aren't
 rendering as you think they should, try giving the block a bit of breathing room with a single empty line above and
 below it.
+
+## Codespaces
+
+:::info Note
+
+For Hasurians, we've recently introduced a new way to contribute to the docs:
+[Codespaces](https://docs.github.com/en/codespaces). This is a new feature from GitHub that allows you to spin up a
+fully-configured docs dev environment in the cloud. This means you can get started contributing to the docs without
+having to install any dependencies on your local machine.
+
+:::
+
+### Step 1: Create a Codespace
+
+Head to the `hasura/graphql-engine-mono` repo and click the `Code` button. You should see a `Open with Codespaces`
+button. Click it and choose `...` and then `+ New with options...` as in the example below:
+
+<Thumbnail src='/img/wiki/codespaces-1.gif' alt='Create Codespace' width='1000px' />
+
+### Step 2: Configure your Codespace
+
+You'll be presented with a few options. Select the `docs` devcontainer, the region nearest to you, and a machine type
+before clicking `Create codespace`:
+
+<Thumbnail src='/img/wiki/codespaces-2.gif' alt='Create Codespace' width='1000px' />
+
+The Codespace will spin up and you'll be presented with a fully-configured dev environment. We automatically open you to
+the `CODESPACES.md` file where you can follow the instructions to get started quickly.