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
parent
265b691c9b
commit
89cd77a64b
9 changed files with 3705 additions and 21 deletions
|
|
@ -1,11 +1,13 @@
|
||||||
{ pkgs, ... }:
|
{ pkgs, briefcase, ... }:
|
||||||
|
|
||||||
pkgs.stdenv.mkDerivation {
|
pkgs.stdenv.mkDerivation {
|
||||||
name = "wpcarro.dev";
|
name = "wpcarro.dev";
|
||||||
src = ./.;
|
src = ./.;
|
||||||
buildPhase = ''
|
installPhase = ''
|
||||||
mkdir -p $out
|
mkdir -p $out
|
||||||
cp $src/index.html $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
5
website/goals/README.md
Normal 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
10
website/goals/default.nix
Normal 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
10
website/goals/index.html
Normal 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
97
website/goals/index.jsx
Normal 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
3524
website/goals/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
15
website/goals/package.json
Normal file
15
website/goals/package.json
Normal 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
7
website/goals/shell.nix
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
let
|
||||||
|
pkgs = import <nixpkgs> {};
|
||||||
|
in pkgs.mkShell {
|
||||||
|
buildInputs = with pkgs; [
|
||||||
|
nodejs
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
@ -6,25 +6,39 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>Sitemap</h1>
|
<h1>Sitemap</h1>
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>Documents</li>
|
||||||
<a href="https://blog.wpcarro.dev">blog.wpcarro.dev</a>
|
<ul>
|
||||||
</li>
|
<li>
|
||||||
<li>
|
<a href="/goals">Goals</a>
|
||||||
<a href="https://learn.wpcarro.dev">learn.wpcarro.dev</a>
|
</li>
|
||||||
</li>
|
</ul>
|
||||||
<li>
|
<li>Other</li>
|
||||||
<a href="https://sandbox.wpcarro.dev">sandbox.wpcarro.dev</a>
|
<ul>
|
||||||
</li>
|
<li>
|
||||||
<li>
|
<a href="https://blog.wpcarro.dev">blog.wpcarro.dev</a>
|
||||||
<a href="https://twitter.com/wpcarro">Twitter</a>
|
</li>
|
||||||
</li>
|
<li>
|
||||||
<li>
|
<a href="https://learn.wpcarro.dev">learn.wpcarro.dev</a>
|
||||||
<a href="https://github.com/wpcarro">Github</a>
|
</li>
|
||||||
</li>
|
<li>
|
||||||
<li>
|
<a href="https://sandbox.wpcarro.dev">sandbox.wpcarro.dev</a>
|
||||||
<a href="https://linkedin.com/in/williampatrickcarroll">LinkedIn</a>
|
</li>
|
||||||
</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>
|
</ul>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue