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 {
|
||||
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
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,6 +6,15 @@
|
|||
</head>
|
||||
<body>
|
||||
<h1>Sitemap</h1>
|
||||
|
||||
<ul>
|
||||
<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>
|
||||
|
|
@ -16,6 +25,9 @@
|
|||
<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>
|
||||
|
|
@ -26,5 +38,7 @@
|
|||
<a href="https://linkedin.com/in/williampatrickcarroll">LinkedIn</a>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue