Mostly style changes

package.json

@@ -37,15 +37,17 @@
   },
   "scripts": {
     "clear-babel-cache": "rm -rf ./node_modules/.cache/babel-loader/*",
-    "prettier": "prettier --write src/**/*.{js,jsx,json,css,scss,md}",
-    "build-css": "node-sass-chokidar src/ -o src/ && npm run prettier",
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "prettier": "prettier --write src/**/*.{js,jsx,css,scss}",
+    "build-css": "node-sass-chokidar ./src/ -o ./src/css/ && npm run prettier",
+    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
+    "start-js": "react-scripts start",
+    "start": "npm-run-all -p watch-css start-js",
+    "build-js": "react-scripts build",
+    "build": "npm-run-all build-css build-js",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
     "predeploy": "npm run build",
-    "deploy": "gh-pages -d build",
-    "watch": "tsc -watch -p ./"
+    "deploy": "gh-pages -d build"
   },
   "devDependencies": {
     "eslint": "^5.16.0",

readme.md

@@ -2,3 +2,6 @@
 
 - [Use ESLint Like a Pro with ES6 and React](http://www.zsoltnagy.eu/use-eslint-like-a-pro-with-es6-and-react/)
 - [react-boilerplate](https://github.com/react-boilerplate/react-boilerplate/blob/master/package.json)
+- [Functional vs Class-Components in React](https://medium.com/@Zwenza/functional-vs-class-components-in-react-231e3fbd7108) by David Joch
+- React 16.8
+  - [Hooks State](https://reactjs.org/docs/hooks-state.html)

src/components/Clock/index.js

@@ -0,0 +1,3 @@
+import Clock from './Clock'
+
+export default Clock

src/components/Hooks/Hooks.js

@@ -0,0 +1,10 @@
+import React, { useState, useEffect } from 'react'
+import './Hooks.css'
+
+function Hooks() {
+  return <div>hooks</div>
+}
+
+export default Hooks
+
+// npm install eslint-plugin-react-hooks --save-dev

src/components/Hooks/index.js

@@ -0,0 +1,3 @@
+import Hooks from './Hooks'
+
+export default Hooks

src/components/Layout/Layout.css

@@ -1,94 +1,112 @@
 @charset "UTF-8";
-* {
-  box-sizing: border-box;
-}
-
-.list-unstyled {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
+html {
+  overflow-y: scroll;
+  overflow-x: hidden; }
 
 body {
-  font-family: SF Mono, fira code, roboto mono, courier, SFMono-Regular, Menlo, Monaco, Consolas,
-    'Liberation Mono', 'Courier New', monospace;
+  font-family: SF Mono, fira code, Roboto Mono, menlo, Courier, monospace;
   font-weight: 600;
   width: 100%;
   height: 100%;
   overflow: hidden;
-}
+  padding: 0;
+  margin: 0; }
+
+header {
+  text-align: center;
+  background: #000;
+  color: #fff;
+  padding: 0.5rem 0; }
 
 .container {
-  margin: 5vh 5vh;
+  overflow: hidden;
   display: flex;
-  overflow-y: hidden;
-  overflow-x: hidden;
-}
-.container .page-contents {
-  order: 2;
-  flex-grow: 2;
-  box-shadow: inset 0 0 0 4px #222;
-  padding: 1rem 1.5rem;
-  height: 80vh;
-  overflow: scroll;
-}
-.container .page-contents .references {
-  height: 3vh;
-}
-.container .page-contents .references ul {
-  margin: 0 !important;
-  font-size: 0.7em;
-  padding: 0.25rem 0;
-  white-space: pre-line;
-  display: table;
   flex-direction: column;
-}
-.container .page-contents .references li::before {
-  content: '•';
-  color: red;
-  background: black;
-}
-.container .page-contents .references {
-  padding: 0.5rem;
-  width: 100%;
-  height: 2vh;
-  overflow: scroll;
-  background: black;
-  left: 0;
-  background: black;
-}
-.container .page-contents .references:hover {
-  height: fit-content;
-}
-.container .page-contents .references ul li a {
-  color: white;
-  margin: 1rem;
-}
-.container .page-contents .references li:hover {
-  background: #444;
-}
-.container .page-contents .project {
-  height: 90%;
-  overflow: scroll;
-}
-.container .page-contents .page-contents {
-  overflow: hidden !important;
-}
-.container .menu {
-  height: 80vh;
-  margin: 0;
-  padding-right: 1.25rem;
-}
-.container .menu a {
-  color: #000;
-  font-size: 1.25em;
-  box-shadow: inset 0 -4px #2ecc71;
-  text-transform: lowercase;
-  margin-bottom: 0.75rem;
-  display: table;
-  padding: 0;
-  text-decoration: none;
-}
-.container .menu a:hover {
-  box-shadow: inset 0 -4px #ec5f67;
-}
+  align-content: space-between;
+  height: 100vh;
+  width: 100%; }
+  .container .project {
+    padding: 1rem;
+    width: 100%;
+    height: 100%;
+    border-top: 2px solid black;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    position: relative;
+    box-sizing: border-box !important; }
+  .container .menu {
+    margin: 0;
+    padding-right: 1.25rem;
+    display: flex;
+    flex-direction: row;
+    padding: 0.5rem 0.75rem;
+    justify-content: center; }
+    .container .menu a {
+      color: #000;
+      text-transform: lowercase;
+      margin-bottom: 0.75rem;
+      padding: 0.25rem;
+      background: #fff;
+      text-decoration: none;
+      box-shadow: inset 0 0 0 2px #444; }
+    .container .menu a:hover {
+      box-shadow: inset 0 -4px #ec5f67; }
+    .container .menu ul {
+      display: flex;
+      list-style-type: none;
+      margin-block-start: 0em;
+      margin-block-end: 1em;
+      margin-inline-start: 0px;
+      margin-inline-end: 0px;
+      padding-inline-start: 0px; }
+    .container .menu li {
+      margin-right: 1rem; }
+  .container .references {
+    box-sizing: border-box;
+    width: 100%;
+    min-height: 20vh !important;
+    background: black;
+    left: 0;
+    bottom: 0;
+    padding: 0.5rem;
+    position: sticky;
+    overflow: scroll; }
+    .container .references ul {
+      font-size: 0.7em;
+      padding-inline-start: 10px; }
+    .container .references li {
+      display: table !important;
+      padding: 0.15rem 0; }
+    .container .references li:hover {
+      background: #444; }
+    .container .references li::before {
+      content: '•';
+      display: table-cell;
+      color: red;
+      margin-right: 0.5rem;
+      padding-right: 0.25rem; }
+    .container .references a {
+      color: white; }
+
+*::-webkit-scrollbar {
+  width: 0px; }
+
+*::-webkit-scrollbar-track {
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+  background: rgba(0, 0, 0, 0);
+  width: 0px; }
+
+*::-webkit-scrollbar-thumb {
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+  background: rgba(0, 0, 0, 0);
+  width: 0px; }
+
+*::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0);
+  width: 0px; }
+
+*::-webkit-scrollbar-thumb:window-inactive {
+  background: rgba(0, 0, 0, 0);
+  width: 0px; }

src/components/Layout/Layout.js

@@ -3,6 +3,8 @@ import { HashRouter as Router, Route, Switch, Link } from 'react-router-dom'
 
 import Todo from '../Todo'
 import Confetti from '../Confetti'
+import Hooks from '../Hooks'
+import Clock from '../Clock'
 
 import pages, { references, makeObjArr } from './Source'
 import './Layout.css'
@@ -18,61 +20,58 @@ function windowNotHome() {
   return false
 }
 
-class Layout extends Component {
+class Layout extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
       pages: pages,
       references: references
     }
   }
-
   render() {
     const { pages, references } = this.state
 
     return (
       <Router>
         <Switch>
-          <>
-            <header style={{ textAlign: 'center', width: '100%', padding: '0 2rem' }}>
-              react-mini-projects
-            </header>
-            <div className="container">
-              <div className="page-contents" style={{ position: 'relative' }}>
-                <div className="project">
-                  <Route path="/" exact component={Home} />
-                  <Route path="/todo" exact component={Todo} />
-                  <Route path="/confetti" exact component={Confetti} />
-                </div>
-
-                {/* FIXME: setstate to display correct references for page changes  */}
+          <div className="container">
+            <header>react-mini-projects</header>
+            <br />
+            <div className="menu">
+              <ul className="list-unstyled">
+                {pages.map(page => (
+                  <li key={page.id}>
+                    <Link to={page.url}>{page.title}</Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+            <div className="project">
+              <Route path="/" exact component={Home} />
+              <Route path="/todo" exact component={Todo} />
+              <Route path="/confetti" exact component={Confetti} />
+              <Route path="/hooks" exact component={Hooks} />
+              <Route path="/clock" exact component={Clock} />
+            </div>
 
-                {windowNotHome && (
-                  <div className="references" style={{ position: 'absolute', bottom: 0 }}>
-                    <ul>
-                      {makeObjArr(references[getWindowPath()]).map(source => (
-                        <li key={source.title}>
-                          <a href={source.url} title={source.title}>
-                            {source.title}
-                          </a>
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-                )}
-              </div>
+            {/* FIXME: setstate to display correct references for page changes  */}
 
-              <div className="menu">
-                <ul className="toc list-unstyled">
-                  {pages.map(page => (
-                    <li key={page.id}>
-                      <Link to={page.url}>{page.title}</Link>
-                    </li>
-                  ))}
-                </ul>
+            {windowNotHome && (
+              <div className="references">
+                <div className="box">
+                  <ul>
+                    {makeObjArr(references[getWindowPath()]).map(source => (
+                      <li key={source.title}>
+                        <a href={source.url} title={source.title}>
+                          {source.title}
+                        </a>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
               </div>
-            </div>
-          </>
+            )}
+          </div>
         </Switch>
       </Router>
     )