No commit message

.github/workflows/action.yml

@@ -0,0 +1,18 @@
+{
+  "name": "action",
+  "on": ["push", "pull_request"],
+  "jobs": {
+    "job": {
+      "runs-on": "ubuntu-latest",
+      "steps": [
+        { "uses": "actions/checkout@v2" },
+        {
+          "uses": "actions/setup-node@v2-beta",
+          "with": { "node-version": "14.3.0" }
+        },
+        { "run": "yarn install" },
+        { "run": "yarn pretty" }
+      ]
+    }
+  }
+}

.gitignore

@@ -0,0 +1,13 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+.DS_Store
+.env.development.local
+.env.local
+.env.production.local
+.env.test.local
+/build
+/dist
+/docs
+/node_modules
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.vscode/extensions.json

@@ -0,0 +1,14 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "eamodio.gitlens",
+    "emeraldwalk.runonsave",
+    "firefox-devtools.vscode-firefox-debug",
+    "johnpapa.vscode-peacock",
+    "ms-python.python",
+    "ms-vsliveshare.vsliveshare",
+    "msjsdiag.debugger-for-chrome",
+    "tyriar.sort-lines",
+    "visualstudioexptteam.vscodeintellicode"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,29 @@
+{
+  "editor.tabCompletion": "on",
+  "editor.tabSize": 2,
+  "files.exclude": {
+    "dist": true,
+    "docs": true,
+    "src/react-app-env.d.ts": true
+  },
+  "peacock.color": "#392c2b",
+  "problems.showCurrentInStatus": true,
+  "workbench.colorCustomizations": {
+    "activityBar.activeBackground": "#564241",
+    "activityBar.activeBorder": "#000000",
+    "activityBar.background": "#564241",
+    "activityBar.foreground": "#e7e7e7",
+    "activityBar.inactiveForeground": "#e7e7e799",
+    "activityBarBadge.background": "#000000",
+    "activityBarBadge.foreground": "#e7e7e7",
+    "statusBar.background": "#392c2b",
+    "statusBar.border": "#392c2b",
+    "statusBar.foreground": "#e7e7e7",
+    "statusBarItem.hoverBackground": "#564241",
+    "titleBar.activeBackground": "#392c2b",
+    "titleBar.activeForeground": "#e7e7e7",
+    "titleBar.border": "#392c2b",
+    "titleBar.inactiveBackground": "#392c2b99",
+    "titleBar.inactiveForeground": "#e7e7e799"
+  }
+}

README.md

@@ -0,0 +1,17 @@
+# Getting Started
+
+Run `./yarn install` in this directory in your Linux terminal to install
+everything required for this project.
+
+You will probably want to open this project directory in
+[Visual Studio Code](https://code.visualstudio.com/). Install the recommended
+extensions if prompted.
+
+You will probably want to do most of your work inside the `core/`,
+`components/`, and `utilities/` subdirectories of `src/`.
+
+Run `./yarn start` to launch the local development server.
+
+Run `./yarn pretty` to format the code.
+
+Run `./yarn build` to build a release version of the site and add it to Git.

package.json

@@ -0,0 +1,75 @@
+{
+  "name": "project",
+  "version": "0.0.0",
+  "license": "UNLICENSED",
+  "private": true,
+  "engines": {
+    "node": "14.3.0"
+  },
+  "scripts": {
+    "build": "yarn pretty; git rm -rf docs || true; rm -rf docs build; yarn react-scripts build; mv build docs; rm -rf docs/asset-manifest.json docs/*/*/*LICENSE* docs/*/*/*.map docs/*manifest*.js docs/service-worker.js; echo \"$(basename \"${PWD}\").otter.academy\" > docs/CNAME; git add --force docs",
+    "noop": "true",
+    "pretty": "jsonsort --arrays *.json src public .github .vscode; prettier --ignore-path .gitignore --write '**/*.{ts,tsx,js,jsx,json,md,yml,yaml,html,css}'; import-sort --ignore-path .gitignore --write '**/*.{ts,tsx,js,jsx}'",
+    "start": "yarn react-scripts start"
+  },
+  "browserslist": {
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version"
+    ],
+    "production": [
+      "Firefox ESR",
+      "last 1 chrome version",
+      "last 1 edge version",
+      "last 1 firefox version",
+      "last 1 ios version"
+    ]
+  },
+  "eslintConfig": {
+    "extends": "react-app",
+    "overrides": [
+      {
+        "files": [
+          "*"
+        ],
+        "rules": {
+          "jsx-a11y/accessible-emoji": "off"
+        }
+      }
+    ]
+  },
+  "importSort": {
+    ".js, .jsx, .ts, .tsx, .mjs": {
+      "style": "module"
+    }
+  },
+  "prettier": {
+    "overrides": [
+      {
+        "files": [
+          "*.yaml",
+          "*.yml"
+        ],
+        "options": {
+          "parser": "json"
+        }
+      }
+    ],
+    "trailingComma": "none"
+  },
+  "type": "module",
+  "dependencies": {
+    "@types/node": "^14.0.5",
+    "@types/react": "^16.9.0",
+    "@types/react-dom": "^16.9.0",
+    "emotion": "^10.0.27",
+    "import-sort-cli": "^6.0.0",
+    "import-sort-parser-typescript": "^6.0.0",
+    "import-sort-style-module": "^6.0.0",
+    "prettier": "^2.0.5",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts": "^3.4.1",
+    "typescript": "^3.9.3"
+  }
+}

public/index.html

@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title></title>
+<link rel="stylesheet" href="/stylesheet.css" />
+<link rel="icon" />
+<main id="main"></main>

public/stylesheet.css

@@ -0,0 +1,213 @@
+html {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 16px;
+  font-size: 16px;
+}
+
+img {
+  vertical-align: middle;
+}
+
+* {
+  box-sizing: inherit;
+  font-family: inherit;
+  transition-duration: 0.5s;
+}
+
+html,
+body,
+input,
+textarea,
+button,
+select {
+  font-size: inherit;
+  font-family: "Fira Sans", sans-serif;
+}
+
+code,
+pre,
+kbd,
+samp {
+  font-size: inherit;
+  font-family: "JetBrains Mono", monospace;
+  white-space: pre-wrap;
+}
+
+@font-face {
+  font-family: "JetBrains Mono";
+  font-weight: 400;
+  src: local("JetBrains Mono"),
+    url("/fonts/JetBrainsMono-Regular.woff2") format("woff2");
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "JetBrains Mono";
+  font-weight: 700;
+  src: local("JetBrains Mono Bold"),
+    url("/fonts/JetBrainsMono-Bold.woff2") format("woff2");
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Fira Sans";
+  src: local("Fira Sans Hair"), url("woff2/FiraSans-Hair.woff2") format("woff2");
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Fira Sans";
+  src: local("Fira Sans Hair Italic"),
+    url("woff2/FiraSans-HairItalic.woff2") format("woff2");
+  font-weight: 100;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Fira Sans";
+  src: local("Fira Sans UltraLight"),
+    url("woff2/FiraSans-UltraLight.woff2") format("woff2");
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Fira Sans";
+  src: local("Fira Sans UltraLight Italic"),
+    url("woff2/FiraSans-UltraLightItalic.woff2") format("woff2");
+  font-weight: 200;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Fira Sans";
+  src: local("Fira Sans Light"),
+    url("woff2/FiraSans-Light.woff2") format("woff2");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Fira Sans";
+  src: local("Fira Sans Light Italic"),
+    url("woff2/FiraSans-LightItalic.woff2") format("woff2");
+  font-weight: 300;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Fira Sans";
+  src: local("Fira Sans Regular"),
+    url("woff2/FiraSans-Regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Fira Sans";
+  src: local("Fira Sans Regular Italic"),
+    url("woff2/FiraSans-Italic.woff2") format("woff2");
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Fira Sans";
+  src: local("Fira Sans Medium"),
+    url("woff2/FiraSans-Medium.woff2") format("woff2");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Fira Sans";
+  src: local("Fira Sans Medium Italic"),
+    url("woff2/FiraSans-MediumItalic.woff2") format("woff2");
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Fira Sans";
+  src: local("Fira Sans SemiBold"),
+    url("woff2/FiraSans-SemiBold.woff2") format("woff2");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Fira Sans";
+  src: local("Fira Sans SemiBold Italic"),
+    url("woff2/FiraSans-SemiBoldItalic.woff2") format("woff2");
+  font-weight: 600;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Fira Sans";
+  src: local("Fira Sans Bold"), url("woff2/FiraSans-Bold.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Fira Sans";
+  src: local("Fira Sans Bold Italic"),
+    url("woff2/FiraSans-BoldItalic.woff2") format("woff2");
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Fira Sans";
+  src: local("Fira Sans ExtraBold"),
+    url("woff2/FiraSans-ExtraBold.woff2") format("woff2");
+  font-weight: 800;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Fira Sans";
+  src: local("Fira Sans ExtraBold Italic"),
+    url("woff2/FiraSans-ExtraBoldItalic.woff2") format("woff2");
+  font-weight: 800;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Fira Sans";
+  src: local("Fira Sans Heavy"),
+    url("woff2/FiraSans-Heavy.woff2") format("woff2");
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Fira Sans";
+  src: local("Fira Sans Heavy Italic"),
+    url("woff2/FiraSans-HeavyItalic.woff2") format("woff2");
+  font-weight: 900;
+  font-style: italic;
+  font-display: swap;
+}

src/components/README.md

@@ -0,0 +1,3 @@
+# src/components/
+
+React/JSX components and their associated styles, that we use to provide the interface for our application.