mdebray/tvl-depot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use boilerplate/typescript for goals

Browse source 
After deploying the version of this application that built everything in the
browser, which originally was the impetus for the entire project, I learned that
the babel in-browser transformer won't work. I'm not sure why, but I need to
move on from this project and do other work.

I ported the code to my boilerplate/typescript, which works. Wahoo!
This commit is contained in:
William Carroll 2020-03-25 17:04:41 +00:00
parent cd06990fe3
commit 06d2467c56
14 changed files with 5785 additions and 3554 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
website/goals/.gitignore vendored Normal file
View file

@ -0,0 +1,2 @@
.cache
dist

17
website/goals/default.nix
View file

@ -1,10 +1,19 @@
{ pkgs, ... }: { pkgs, ... }:
pkgs.stdenv.mkDerivation { pkgs.stdenv.mkDerivation {
name = "goals"; name = "goals-webpage";
src = ./.; srcs = ./.;
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
'';
installPhase = '' installPhase = ''
mkdir -p $out mv dist $out
cp $srcs/index.{html,jsx} $out
''; '';
} }

10
website/goals/index.html
View file

@ -1,10 +0,0 @@
<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>

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

File diff suppressed because it is too large Load diff

25
website/goals/package.json
View file

@ -1,15 +1,26 @@
{ {
"name": "goals", "name": "tailwindcss",
"version": "1.0.0", "version": "1.0.0",
"description": "",
"main": "index.js", "main": "index.js",
"license": "MIT",
"scripts": { "scripts": {
"dev": "browser-sync start --server --files *" "dev": "npx parcel src/index.html & npx tsc --watch --noEmit"
}, },
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": { "devDependencies": {
"browser-sync": "^2.26.7" "@types/node": "^13.9.3",
"parcel-bundler": "^1.12.4",
"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"
} }
} }

7
website/goals/postcss.config.js Normal file
View file

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

1
website/goals/shell.nix
View file

@ -3,5 +3,6 @@ let
in pkgs.mkShell { in pkgs.mkShell {
buildInputs = with pkgs; [ buildInputs = with pkgs; [
nodejs nodejs
yarn
]; ];
} }

37
website/goals/index.jsx → website/goals/src/App.tsx
View file

@ -1,12 +1,19 @@
function ProgressBar(props) { import React from "react";
function ProgressBar(props: {
done: number,
total: number,
units: string,
color: string,
}) {
const { done, total, units, color } = props const { done, total, units, color } = props
const width = Math.floor(done / total * 100) const width = Math.floor(done / total * 100)
const rest = 100 - width const rest = 100 - width
let [fg, bg] = [`bg-${color}`, `bg-${color}-lightest`] let [fg, bg] = [`bg-${color}-600`, `bg-${color}-100`]
if (color === 'white') { if (color === 'white') {
[fg, bg] = ['bg-grey', 'bg-grey-lightest'] [fg, bg] = ['bg-gray-600', 'bg-gray-100']
} }
return ( return (
@ -17,13 +24,24 @@ function ProgressBar(props) {
) )
} }
function Goal(props) { function Goal(props: {
subject: string,
goal: string,
done: number,
total: number,
units: string,
color: string,
}) {
const { subject, goal, done, total, units, color } = props const { subject, goal, done, total, units, color } = props
const width = "6em" const width = "6em"
const Tr = (props) => ( const Tr = (props: {
label: string,
value: string,
valueComponent?: React.ReactElement,
}) => (
<tr className="flex py-2"> <tr className="flex py-2">
<td className="text-grey-dark" style={{width: width}}>{props.label}</td> <td className="text-gray-600" style={{width: width}}>{props.label}</td>
<td className="flex-1"> <td className="flex-1">
{props.valueComponent ? props.valueComponent : props.value} {props.valueComponent ? props.valueComponent : props.value}
</td> </td>
@ -43,7 +61,9 @@ function Goal(props) {
) )
} }
function Copy(props) { function Copy(props: {
children: React.ReactNode
}) {
return ( return (
<p className="pb-4 leading-loose"> <p className="pb-4 leading-loose">
{props.children} {props.children}
@ -93,5 +113,4 @@ function App() {
) )
} }
ReactDOM.render(<App />, document.getElementById('root')) export default App;

3
website/goals/src/index.css Normal file
View file

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

11
website/goals/src/index.html Normal file
View file

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

5
website/goals/src/index.tsx Normal file
View file

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

7
website/goals/tailwind.config.js Normal file
View file

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

25
website/goals/tsconfig.json Normal file
View file

@ -0,0 +1,25 @@
{
"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/**/*"
]
}

5665
website/goals/yarn.lock Normal file
View file

File diff suppressed because it is too large Load diff