Create wpcarro.dev/goals

Create a simple React app to define my goals. See the goals/README.md for more
context.
This commit is contained in:
William Carroll 2020-03-25 16:30:22 +00:00
parent 265b691c9b
commit 89cd77a64b
9 changed files with 3705 additions and 21 deletions

View file

@ -1,11 +1,13 @@
{ pkgs, ... }:
{ pkgs, briefcase, ... }:
pkgs.stdenv.mkDerivation {
name = "wpcarro.dev";
src = ./.;
buildPhase = ''
installPhase = ''
mkdir -p $out
cp $src/index.html $out
mkdir -p $out/goals
cp -r ${briefcase.website.goals}/* $out/goals
'';
dontInstall = true;
}

5
website/goals/README.md Normal file
View file

@ -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.

10
website/goals/default.nix Normal file
View file

@ -0,0 +1,10 @@
{ pkgs, ... }:
pkgs.stdenv.mkDerivation {
name = "goals";
src = ./.;
installPhase = ''
mkdir -p $out
cp $srcs/index.{html,jsx} $out
'';
}

10
website/goals/index.html Normal file
View file

@ -0,0 +1,10 @@
<head>
<link rel="stylesheet" href="https://www.unpkg.com/tailwindcss@0.7.4/dist/tailwind.css">
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16.12.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.12.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.8.3/babel.js"></script>
<script type="text/babel" src="/index.jsx"></script>
</body>

97
website/goals/index.jsx Normal file
View file

@ -0,0 +1,97 @@
function ProgressBar(props) {
const { done, total, units, color } = props
const width = Math.floor(done / total * 100)
const rest = 100 - width
let [fg, bg] = [`bg-${color}`, `bg-${color}-lightest`]
if (color === 'white') {
[fg, bg] = ['bg-grey', 'bg-grey-lightest']
}
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) {
const { subject, goal, done, total, units, color } = props
const width = "6em"
const Tr = (props) => (
<tr className="flex py-2">
<td className="text-grey-dark" 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) {
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>
)
}
ReactDOM.render(<App />, document.getElementById('root'))

3524
website/goals/package-lock.json generated Normal file

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,15 @@
{
"name": "goals",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "browser-sync start --server --files *"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.26.7"
}
}

7
website/goals/shell.nix Normal file
View file

@ -0,0 +1,7 @@
let
pkgs = import <nixpkgs> {};
in pkgs.mkShell {
buildInputs = with pkgs; [
nodejs
];
}

View file

@ -6,25 +6,39 @@
</head>
<body>
<h1>Sitemap</h1>
<ul>
<li>
<a href="https://blog.wpcarro.dev">blog.wpcarro.dev</a>
</li>
<li>
<a href="https://learn.wpcarro.dev">learn.wpcarro.dev</a>
</li>
<li>
<a href="https://sandbox.wpcarro.dev">sandbox.wpcarro.dev</a>
</li>
<li>
<a href="https://twitter.com/wpcarro">Twitter</a>
</li>
<li>
<a href="https://github.com/wpcarro">Github</a>
</li>
<li>
<a href="https://linkedin.com/in/williampatrickcarroll">LinkedIn</a>
</li>
<li>Documents</li>
<ul>
<li>
<a href="/goals">Goals</a>
</li>
</ul>
<li>Other</li>
<ul>
<li>
<a href="https://blog.wpcarro.dev">blog.wpcarro.dev</a>
</li>
<li>
<a href="https://learn.wpcarro.dev">learn.wpcarro.dev</a>
</li>
<li>
<a href="https://sandbox.wpcarro.dev">sandbox.wpcarro.dev</a>
</li>
</ul>
<li>Social</li>
<ul>
<li>
<a href="https://twitter.com/wpcarro">Twitter</a>
</li>
<li>
<a href="https://github.com/wpcarro">Github</a>
</li>
<li>
<a href="https://linkedin.com/in/williampatrickcarroll">LinkedIn</a>
</li>
</ul>
</ul>
</body>
</html>