subtree(users/wpcarro): docking briefcase at '24f5a642'

git-subtree-dir: users/wpcarro
git-subtree-mainline: 464bbcb15c
git-subtree-split: 24f5a642af
Change-Id: I6105b3762b79126b3488359c95978cadb3efa789

users/wpcarro/website/goals/.envrc

@@ -0,0 +1,2 @@
+source_up
+use_nix

users/wpcarro/website/goals/.gitignore

@@ -0,0 +1,3 @@
+/.cache
+/dist/**/*
+/node_modules

users/wpcarro/website/goals/README.md

@@ -0,0 +1,5 @@
+# Goals
+
+Kent C. Dodds taught me that I can create a React website without any bundling
+software. To practice this, I created a simple React app to track some of my
+goals. Notice how I wrote JSX inside of a `<script type="text/babel">` tag.

users/wpcarro/website/goals/default.nix.ignore

@@ -0,0 +1,19 @@
+{ pkgs, ... }:
+
+pkgs.stdenv.mkDerivation {
+  name = "goals-webpage";
+  src = builtins.path { path = ./.; name = "goals"; };
+  buildInputs = with pkgs; [
+    nodejs
+    # Exposes lscpu for parcel.js
+    utillinux
+  ];
+  # parcel.js needs number of CPUs
+  PARCEL_WORKERS = "1";
+  buildPhase = ''
+    npx parcel build src/index.html --public-url ./
+  '';
+  installPhase = ''
+    mv dist $out
+  '';
+}

users/wpcarro/website/goals/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "tailwindcss",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "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"
+  },
+  "dependencies": {
+    "@reduxjs/toolkit": "^1.2.5",
+    "@types/react": "^16.9.25",
+    "@types/react-dom": "^16.9.5",
+    "@types/react-redux": "^7.1.7",
+    "@types/react-router-dom": "^5.1.3",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-redux": "^7.2.0",
+    "react-router-dom": "^5.1.2"
+  }
+}

users/wpcarro/website/goals/postcss.config.js

@@ -0,0 +1,5 @@
+const tailwindcss = require("tailwindcss");
+
+module.exports = {
+  plugins: [tailwindcss("./tailwind.config.js")],
+};

users/wpcarro/website/goals/shell.nix

@@ -0,0 +1,9 @@
+let
+  briefcase = import <briefcase> {};
+  pkgs = briefcase.third_party.pkgs;
+in pkgs.mkShell {
+  buildInputs = with pkgs; [
+    nodejs
+    yarn
+  ];
+}

users/wpcarro/website/goals/src/App.tsx

@@ -0,0 +1,132 @@
+import React from "react";
+
+function ProgressBar(props: {
+  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;
+
+  let [fg, bg] = [`bg-${color}-600`, `bg-${color}-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>
+  );
+}
+
+function Goal(props: {
+  subject: string;
+  goal: string;
+  done: number;
+  total: number;
+  units: string;
+  color: string;
+}) {
+  const { subject, goal, done, total, units, color } = props;
+  const width = "6em";
+
+  const Tr = (props: {
+    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="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}
+            />
+          }
+        />
+      </tbody>
+    </table>
+  );
+}
+
+function Copy(props: { children: React.ReactNode }) {
+  return <p className="pb-4 leading-loose">{props.children}</p>;
+}
+
+function App() {
+  return (
+    <div className="container mx-auto font-mono">
+      <section>
+        <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,
+          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
+          existing goal. I created and published this page to clarify that idea.
+        </Copy>
+        <Copy>
+          Here are my current goals and the progress I have made towards
+          achieving them.
+        </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"
+        />
+      </section>
+    </div>
+  );
+}
+
+export default App;

users/wpcarro/website/goals/src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

users/wpcarro/website/goals/src/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./index.css" />
+  </head>
+  <body>
+    <div id="mount"></div>
+    <script src="./index.tsx"></script>
+  </body>
+</html>

users/wpcarro/website/goals/src/index.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+
+ReactDOM.render(<App />, document.getElementById("mount"));

users/wpcarro/website/goals/tailwind.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  theme: {
+    extend: {},
+  },
+  variants: {},
+  plugins: [],
+};

users/wpcarro/website/goals/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react"
+  },
+  "include": ["src/**/*"]
+}