Run Prettier across projects

Problem:
Prettier was not running when I saved Emacs buffers.

Why?
- prettier-js-mode needs needs node; lorri exposes node to direnv; direnv
  exposes node to Emacs; lorri was not working as expected.

Solution:
Now that I'm using nix-buffer, I can properly expose node (and other
dependencies) to my Emacs buffers. Now Prettier is working.

Commentary:
Since prettier hadn't worked for so long, I stopped thinking about it. As such,
I did not include it as a dependency in boilerplate/typescript. I added it
now. I retroactively ran prettier across a few of my frontend projects to unify
the code styling.

I may need to run...
```shell
$ cd ~/briefcase
$ nix-shell
$ npx prettier --list-different "**/*.{js,ts,jsx,tsx,html,css,json}"
```
...to see which files I should have formatted.

16 files changed, 158 insertions, 118 deletions

diff --git a/website/goals/package.json b/website/goals/package.json
index ced454a8a315..c812e9a38ecd 100644
--- a/website/goals/package.json
+++ b/website/goals/package.json
@@ -4,11 +4,13 @@
   "main": "index.js",
   "license": "MIT",
   "scripts": {
-    "dev": "npx parcel src/index.html & npx tsc --watch --noEmit"
+    "dev": "parcel src/index.html & npx tsc --watch --noEmit",
+    "prettier": "prettier --ignore-path .gitignore --write \"**/*.{js,ts,jsx,tsx,html,css.json}\""
   },
   "devDependencies": {
     "@types/node": "^13.9.3",
     "parcel-bundler": "^1.12.4",
+    "prettier": "^2.0.2",
     "tailwindcss": "^1.2.0",
     "typescript": "^3.8.3"
   },
diff --git a/website/goals/postcss.config.js b/website/goals/postcss.config.js
index d68fa618664e..a23795075b11 100644
--- a/website/goals/postcss.config.js
+++ b/website/goals/postcss.config.js
@@ -1,7 +1,5 @@
-const tailwindcss = require('tailwindcss')
+const tailwindcss = require("tailwindcss");
 
 module.exports = {
-  plugins: [
-    tailwindcss('./tailwind.config.js')
-  ]
-}
+  plugins: [tailwindcss("./tailwind.config.js")],
+};
diff --git a/website/goals/src/App.tsx b/website/goals/src/App.tsx
index 078a75460181..53195d9af98f 100644
--- a/website/goals/src/App.tsx
+++ b/website/goals/src/App.tsx
@@ -1,74 +1,84 @@
-import React  from "react";
+import React from "react";
 
 function ProgressBar(props: {
-  done: number,
-  total: number,
-  units: string,
-  color: string,
+  done: number;
+  total: number;
+  units: string;
+  color: string;
 }) {
-  const { done, total, units, color } = props
-  const width = Math.floor(done / total * 100)
-  const rest = 100 - width
+  const { done, total, units, color } = props;
+  const width = Math.floor((done / total) * 100);
+  const rest = 100 - width;
 
-  let [fg, bg] = [`bg-${color}-600`, `bg-${color}-100`]
+  let [fg, bg] = [`bg-${color}-600`, `bg-${color}-100`];
 
-  if (color === 'white') {
-    [fg, bg] = ['bg-gray-600', 'bg-gray-100']
+  if (color === "white") {
+    [fg, bg] = ["bg-gray-600", "bg-gray-100"];
   }
 
   return (
     <div className={`relative ${bg} h-5`}>
-      <div className={`${fg} h-5 absolute top-0 left-0`} style={{width: `${width}%`}}></div>
-      <p className="absolute text-xs pl-1 pt-1">{done} of {total} {units}</p>
+      <div
+        className={`${fg} h-5 absolute top-0 left-0`}
+        style={{ width: `${width}%` }}
+      ></div>
+      <p className="absolute text-xs pl-1 pt-1">
+        {done} of {total} {units}
+      </p>
     </div>
-  )
+  );
 }
 
 function Goal(props: {
-  subject: string,
-  goal: string,
-  done: number,
-  total: number,
-  units: string,
-  color: string,
+  subject: string;
+  goal: string;
+  done: number;
+  total: number;
+  units: string;
+  color: string;
 }) {
-  const { subject, goal, done, total, units, color } = props
-  const width = "6em"
+  const { subject, goal, done, total, units, color } = props;
+  const width = "6em";
 
   const Tr = (props: {
-    label: string,
-    value: string,
-    valueComponent?: React.ReactElement,
+    label: string;
+    value: string;
+    valueComponent?: React.ReactElement;
   }) => (
     <tr className="flex py-2">
-      <td className="text-gray-600" style={{width: width}}>{props.label}</td>
+      <td className="text-gray-600" style={{ width: width }}>
+        {props.label}
+      </td>
       <td className="flex-1">
         {props.valueComponent ? props.valueComponent : props.value}
       </td>
     </tr>
-  )
+  );
 
   return (
     <table className="w-full mb-10">
       <tbody>
         <Tr label="Subject" value={subject} />
         <Tr label="Goal" value={goal} />
-        <Tr label="Progress" value={goal} valueComponent={
-          <ProgressBar done={done} total={total} units={units} color={color} />
-        }/>
+        <Tr
+          label="Progress"
+          value={goal}
+          valueComponent={
+            <ProgressBar
+              done={done}
+              total={total}
+              units={units}
+              color={color}
+            />
+          }
+        />
       </tbody>
     </table>
-  )
+  );
 }
 
-function Copy(props: {
-  children: React.ReactNode
-}) {
-  return (
-    <p className="pb-4 leading-loose">
-      {props.children}
-    </p>
-  )
+function Copy(props: { children: React.ReactNode }) {
+  return <p className="pb-4 leading-loose">{props.children}</p>;
 }
 
 function App() {
@@ -78,7 +88,7 @@ function App() {
         <h1 className="text-center pt-12 pb-6">Goals</h1>
         <Copy>
           For me, a goal is something that is difficult for me to complete but
-          easy for me to measure.  I tend to add new goals as time progresses,
+          easy for me to measure. I tend to add new goals as time progresses,
           mistakenly assuming that I can support additional goals for free. To
           counterbalance my tendancy to casually accumulate goals, I aim to only
           have three goals; I will not add a new goal until I complete an
@@ -90,27 +100,33 @@ function App() {
         </Copy>
       </section>
       <section className="pt-4">
-        <Goal subject="Meditation"
-              goal="Meditate for 10,000 hours"
-              done={100}
-              total={10000}
-              units="hrs"
-              color="purple" />
-        <Goal subject="Debt"
-              goal="Pay my student debt balance"
-              done={30000}
-              total={70000}
-              units="USD"
-              color="green" />
-        <Goal subject="Brazilian Jiu Jitsu"
-              goal="Train until an instructor gives me a black belt"
-              done={1}
-              total={5}
-              units="belts"
-              color="white" />
+        <Goal
+          subject="Meditation"
+          goal="Meditate for 10,000 hours"
+          done={100}
+          total={10000}
+          units="hrs"
+          color="purple"
+        />
+        <Goal
+          subject="Debt"
+          goal="Pay my student debt balance"
+          done={30000}
+          total={70000}
+          units="USD"
+          color="green"
+        />
+        <Goal
+          subject="Brazilian Jiu Jitsu"
+          goal="Train until an instructor gives me a black belt"
+          done={1}
+          total={5}
+          units="belts"
+          color="white"
+        />
       </section>
     </div>
-  )
+  );
 }
 
 export default App;
diff --git a/website/goals/src/index.html b/website/goals/src/index.html
index 05dd7ad95e79..91752af916a4 100644
--- a/website/goals/src/index.html
+++ b/website/goals/src/index.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <link rel="stylesheet" href="./index.css">
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./index.css" />
   </head>
   <body>
     <div id="mount"></div>
diff --git a/website/goals/tailwind.config.js b/website/goals/tailwind.config.js
index af829e20f9cb..3da6fa0dc7b7 100644
--- a/website/goals/tailwind.config.js
+++ b/website/goals/tailwind.config.js
@@ -4,4 +4,4 @@ module.exports = {
   },
   variants: {},
   plugins: [],
-}
+};
diff --git a/website/goals/tsconfig.json b/website/goals/tsconfig.json
index 013f34fdf0b1..fe07ec1da4d4 100644
--- a/website/goals/tsconfig.json
+++ b/website/goals/tsconfig.json
@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -19,7 +15,5 @@
     "noEmit": true,
     "jsx": "react"
   },
-  "include": [
-    "src/**/*"
-  ]
+  "include": ["src/**/*"]
 }
diff --git a/website/goals/yarn.lock b/website/goals/yarn.lock
index 558b9c5cd9ca..358922838b16 100644
--- a/website/goals/yarn.lock
+++ b/website/goals/yarn.lock
@@ -4287,6 +4287,11 @@ prelude-ls@~1.1.2:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
   integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
 
+prettier@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.0.2.tgz#1ba8f3eb92231e769b7fcd7cb73ae1b6b74ade08"
+  integrity sha512-5xJQIPT8BraI7ZnaDwSbu5zLrB6vvi8hVV58yHQ+QK64qrY40dULy0HSRlQ2/2IdzeBpjhDkqdcFBnFeDEMVdg==
+
 pretty-hrtime@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
diff --git a/website/learn/static/index.html b/website/learn/static/index.html
index e28869ca1854..1c421a43d715 100644
--- a/website/learn/static/index.html
+++ b/website/learn/static/index.html
@@ -4,7 +4,10 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="description" content="Learn to code" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
+    <link
+      href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
+      rel="stylesheet"
+    />
     <title>Learn to code</title>
   </head>
   <body class="font-serif container max-w-2xl mx-auto px-8">
@@ -42,33 +45,58 @@
       <h2 class="text-3xl">Pricing</h2>
       <p class="leading-relaxed mb-4">
         I charge <bold class="font-bold">£50</bold> per hour for video lessons
-        and <bold class="font-bold">£100</bold> per hour for in-person
-        sessions. I am currently based in South Kensington, London.
+        and <bold class="font-bold">£100</bold> per hour for in-person sessions.
+        I am currently based in South Kensington, London.
       </p>
     </div>
     <div class="my-4">
       <h2 class="text-3xl">Contact</h2>
       <p class="leading-relaxed mb-4">
         Whether you want to sign-up or simply want to learn more, send me an
-        email at <a href="mailto:wpcarro@gmail.com" class="font-bold text-blue-600 hover:underline">wpcarro@gmail.com</a>.
+        email at
+        <a
+          href="mailto:wpcarro@gmail.com"
+          class="font-bold text-blue-600 hover:underline"
+          >wpcarro@gmail.com</a
+        >.
       </p>
       <p class="text-center my-8">Why delay? <em>Start today.</em></p>
     </div>
     <footer class="mb-8 lg:flex">
-      <a class="block py-2 lg:w-1/4 text-center hover:underline" href="https://blog.wpcarro.dev">Blog</a>
-      <a class="block py-2 lg:w-1/4 text-center hover:underline" href="https://linkedin.com/in/williampatrickcarroll">LinkedIn</a>
-      <a class="block py-2 lg:w-1/4 text-center hover:underline" href="https://twitter.com/wpcarro">Twitter</a>
-      <a class="block py-2 lg:w-1/4 text-center hover:underline" href="https://github.com/wpcarro">Github</a>
+      <a
+        class="block py-2 lg:w-1/4 text-center hover:underline"
+        href="https://blog.wpcarro.dev"
+        >Blog</a
+      >
+      <a
+        class="block py-2 lg:w-1/4 text-center hover:underline"
+        href="https://linkedin.com/in/williampatrickcarroll"
+        >LinkedIn</a
+      >
+      <a
+        class="block py-2 lg:w-1/4 text-center hover:underline"
+        href="https://twitter.com/wpcarro"
+        >Twitter</a
+      >
+      <a
+        class="block py-2 lg:w-1/4 text-center hover:underline"
+        href="https://github.com/wpcarro"
+        >Github</a
+      >
     </footer>
     <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-160226702-1">
-    </script>
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=UA-160226702-1"
+    ></script>
     <script>
-     window.dataLayer = window.dataLayer || [];
-     function gtag(){dataLayer.push(arguments);}
-     gtag('js', new Date());
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
 
-     gtag('config', 'UA-160226702-1');
+      gtag("config", "UA-160226702-1");
     </script>
   </body>
 </html>
diff --git a/website/sandbox/contentful/postcss.config.js b/website/sandbox/contentful/postcss.config.js
index d68fa618664e..a23795075b11 100644
--- a/website/sandbox/contentful/postcss.config.js
+++ b/website/sandbox/contentful/postcss.config.js
@@ -1,7 +1,5 @@
-const tailwindcss = require('tailwindcss')
+const tailwindcss = require("tailwindcss");
 
 module.exports = {
-  plugins: [
-    tailwindcss('./tailwind.config.js')
-  ]
-}
+  plugins: [tailwindcss("./tailwind.config.js")],
+};
diff --git a/website/sandbox/contentful/src/App.tsx b/website/sandbox/contentful/src/App.tsx
index 6342bfc98dd6..288f03321804 100644
--- a/website/sandbox/contentful/src/App.tsx
+++ b/website/sandbox/contentful/src/App.tsx
@@ -8,7 +8,7 @@ import type { Book } from "./store";
 
 const App: React.FC = () => {
   const dispatch = useDispatch();
-  const { isLoading, books } = useTypedSelector(state => ({
+  const { isLoading, books } = useTypedSelector((state) => ({
     isLoading: state.isLoading,
     books: state.books,
   }));
@@ -16,7 +16,7 @@ const App: React.FC = () => {
   useEffect(() => {
     async function fetchData() {
       const entries = await getClient().getEntries();
-      const books = entries.items.map(x => x.fields) as Book[];
+      const books = entries.items.map((x) => x.fields) as Book[];
 
       dispatch(actions.setBooks(books));
     }
@@ -30,9 +30,12 @@ const App: React.FC = () => {
           <div className="container mx-auto">
             <h1 className="py-6 text-2xl">Books</h1>
             <ul>
-              {books.map(book => (
+              {books.map((book) => (
                 <li key={book.title} className="py-3">
-                  <p><span className="font-bold pr-3">{book.title}</span><span className="text-gray-600">{book.author}</span></p>
+                  <p>
+                    <span className="font-bold pr-3">{book.title}</span>
+                    <span className="text-gray-600">{book.author}</span>
+                  </p>
                 </li>
               ))}
             </ul>
diff --git a/website/sandbox/contentful/src/contentful.ts b/website/sandbox/contentful/src/contentful.ts
index e09cd8fc4ad3..02ebc92b68df 100644
--- a/website/sandbox/contentful/src/contentful.ts
+++ b/website/sandbox/contentful/src/contentful.ts
@@ -8,10 +8,10 @@ let client: ContentfulClientApi;
 
 // Idempotent way to get a reference to the Contentful client.
 export const getClient = (): ContentfulClientApi => {
-  if (typeof client !== 'undefined') {
+  if (typeof client !== "undefined") {
     return client;
   } else {
-    if (typeof space === 'string' && typeof accessToken === 'string') {
+    if (typeof space === "string" && typeof accessToken === "string") {
       let client = createClient({
         space,
         accessToken,
@@ -19,7 +19,9 @@ export const getClient = (): ContentfulClientApi => {
 
       return client;
     } else {
-      throw new Error('Please set CONTENTFUL_SPACE_ID and CONTENTFUL_ACCESS_TOKEN');
+      throw new Error(
+        "Please set CONTENTFUL_SPACE_ID and CONTENTFUL_ACCESS_TOKEN"
+      );
     }
   }
-}
+};
diff --git a/website/sandbox/contentful/src/index.html b/website/sandbox/contentful/src/index.html
index 05dd7ad95e79..91752af916a4 100644
--- a/website/sandbox/contentful/src/index.html
+++ b/website/sandbox/contentful/src/index.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <link rel="stylesheet" href="./index.css">
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./index.css" />
   </head>
   <body>
     <div id="mount"></div>
diff --git a/website/sandbox/contentful/src/store.ts b/website/sandbox/contentful/src/store.ts
index c4396d681a17..b02053d302b6 100644
--- a/website/sandbox/contentful/src/store.ts
+++ b/website/sandbox/contentful/src/store.ts
@@ -22,9 +22,9 @@ export const { actions, reducer } = createSlice({
   name: "application",
   initialState,
   reducers: {
-    toggleIsLoading: state => ({ ...state, isLoading: !state.isLoading }),
-    setBooks: (state, action) => ({ ... state, books: action.payload }),
-  }
+    toggleIsLoading: (state) => ({ ...state, isLoading: !state.isLoading }),
+    setBooks: (state, action) => ({ ...state, books: action.payload }),
+  },
 });
 
 /**
diff --git a/website/sandbox/contentful/tailwind.config.js b/website/sandbox/contentful/tailwind.config.js
index af829e20f9cb..3da6fa0dc7b7 100644
--- a/website/sandbox/contentful/tailwind.config.js
+++ b/website/sandbox/contentful/tailwind.config.js
@@ -4,4 +4,4 @@ module.exports = {
   },
   variants: {},
   plugins: [],
-}
+};
diff --git a/website/sandbox/contentful/tsconfig.json b/website/sandbox/contentful/tsconfig.json
index 013f34fdf0b1..fe07ec1da4d4 100644
--- a/website/sandbox/contentful/tsconfig.json
+++ b/website/sandbox/contentful/tsconfig.json
@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -19,7 +15,5 @@
     "noEmit": true,
     "jsx": "react"
   },
-  "include": [
-    "src/**/*"
-  ]
+  "include": ["src/**/*"]
 }
diff --git a/website/sandbox/index.html b/website/sandbox/index.html
index b549bf443e07..ecd5475af266 100644
--- a/website/sandbox/index.html
+++ b/website/sandbox/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
+    <meta charset="UTF-8" />
     <title>sandbox.wpcarro.dev</title>
   </head>
   <body>