Fully automate learner setup with Gitpod (epicweb-dev#260)

Author: jacobparis

.gitpod.yml

@@ -0,0 +1,27 @@
+tasks:
+  - name: App
+    init: npm install
+    command: npm run start
+    openMode: split-left
+
+  - name: Test
+    command: npm run test
+    openMode: split-right
+
+  - name: Set up email
+    command: |
+      clear
+      printf "\n\n\n"
+      printf "\u001b[36;1mAutofilling Email\u001b[0m\n"
+      printf "\u001b[2;1mEach exercise comes with a elaboration form to help your retention. Providing your email now will mean you don't have to provide it each time you fill out the form.\u001b[0m\n"
+
+      npx "https://gist.github.com/kentcdodds/2d44448a8997b9964b1be44cd294d1f5" \
+        && exit 0
+
+vscode:
+  extensions:
+    - VisualStudioExptTeam.vscodeintellicode
+    - dbaeumer.vscode-eslint
+    - formulahendry.auto-rename-tag
+    - esbenp.prettier-vscode
+    - ms-azuretools.vscode-docker

.vscode/settings.kcd.json

@@ -54,6 +54,9 @@
   },
   "workbench.colorTheme": "Night Owl",
   "workbench.iconTheme": "material-icon-theme",
+  "workbench.editorAssociations": {
+    "*.md": "vscode.markdown.preview.editor"
+  },
   "breadcrumbs.enabled": true,
   "grunt.autoDetect": "off",
   "gulp.autoDetect": "off",

README.md

@@ -25,6 +25,7 @@
 [![GPL 3.0 License][license-badge]][license]
 [![All Contributors][all-contributors-badge]](#contributors-)
 [![Code of Conduct][coc-badge]][coc]
+[![Gitpod ready-to-code][gitpod-badge]](https://gitpod.io/#https://github.com/kentcdodds/react-fundamentals)
 <!-- prettier-ignore-end -->
 
 ## Prerequisites
@@ -40,6 +41,19 @@
 > material in this repo has been updated to React version ^18. Differences are
 > minor and any relevant differences are noted in the instructions.
 
+## Quick start
+
+It's recommended you run everything in the same environment you work in every
+day, but if you don't want to set up the repository locally, you can get started
+in one click with [Gitpod](https://gitpod.io),
+[CodeSandbox](https://codesandbox.io/s/github/kentcdodds/react-fundamentals), or
+by following the [video demo](https://www.youtube.com/watch?v=gCoVJm3hGk4)
+instructions for [GitHub Codespaces](https://github.com/features/codespaces).
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/kentcdodds/react-fundamentals)
+
+For a local development environment, follow the instructions below
+
 ## System Requirements
 
 - [git][git] v2.13 or greater
@@ -102,12 +116,6 @@ setup the project with the following command:
 docker-compose up
 ```
 
-It's recommended you run everything locally in the same environment you work in
-every day, but if you're having issues getting things set up, you can also set
-this up using [GitHub Codespaces](https://github.com/features/codespaces)
-([video demo](https://www.youtube.com/watch?v=gCoVJm3hGk4)) or
-[Codesandbox](https://codesandbox.io/s/github/kentcdodds/react-fundamentals).
-
 ## Running the app
 
 To get the app up and running (and really see if it worked), run:
@@ -277,6 +285,7 @@ Thank you! https://kcd.im/rf-ws-feedback
 [license-badge]: https://img.shields.io/badge/license-GPL%203.0%20License-blue.svg?style=flat-square
 [license]: https://github.com/kentcdodds/react-fundamentals/blob/main/LICENSE
 [coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
+[gitpod-badge]: https://img.shields.io/badge/Gitpod-ready--to--code-908a85?logo=gitpod
 [coc]: https://github.com/kentcdodds/react-fundamentals/blob/main/CODE_OF_CONDUCT.md
 [emojis]: https://github.com/kentcdodds/all-contributors#emoji-key
 [all-contributors]: https://github.com/kentcdodds/all-contributors