Add setting up directions

package.json

@@ -37,8 +37,8 @@
   },
   "scripts": {
     "clear-babel-cache": "rm -rf ./node_modules/.cache/babel-loader/*",
-    "prettier": "prettier --write src/**/*.{js,jsx,css,scss}",
     "clean-build": "rm -rf 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",

public/index.html

@@ -7,6 +7,9 @@
   <meta name="theme-color" content="#000000">
   <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
   <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <link rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css" />
+  <link rel="stylesheet" href="unnamed.css" />
   <link href="https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap" rel="stylesheet">
   <title>React App</title>
 </head>

public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

readme.md

@@ -1,7 +1,19 @@
-## bookmarks
+# setting up
 
-- [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)
+```
+git clone https://github.com/nntrn/react-mini-projects.git
+cd react-mini-projects
+npm install
+npm start
+```
+
+http://localhost:3000
+
+## deploying to github pages:
+
+make sure `gh-pages` is installed
+
+    npm install gh-pages --save-dev
+
+1. update **homepage** in `package.json` with your settings
+2. `npm run deploy`

src/components/Clock/Clock.js

@@ -29,7 +29,7 @@ function Clock() {
 
   const handleAmPm = () =>
     setTimeOfDay(() => {
-      return ampm == 0 ? 1 : 0
+      return ampm === 0 ? 1 : 0
     })
 
   return (

src/components/Confetti/Confetti.js

@@ -4,7 +4,7 @@ import './Confetti.css'
 
 class Confetti extends React.Component {
   render() {
-    return <p>confetti</p>
+    return <h1>confetti</h1>
   }
 }
 export default Confetti

src/components/Layout/Layout.css

@@ -1,7 +1,14 @@
 @charset "UTF-8";
 html {
   overflow-y: scroll;
-  overflow-x: hidden; }
+  overflow-x: hidden;
+}
+
+h1.title,
+h2.title,
+h3.title {
+  margin-top: 0;
+}
 
 body {
   font-family: SF Mono, fira code, Roboto Mono, menlo, Courier, monospace;
@@ -10,111 +17,134 @@ body {
   height: 100%;
   overflow: hidden;
   padding: 0;
-  margin: 0; }
+  margin: 0;
+}
 
 header {
   text-align: center;
   background: #000;
   color: #fff;
-  padding: 0.5rem 0; }
+  padding: 0.5rem 0;
+}
 
 header a {
   color: white;
-  text-decoration: none; }
+  text-decoration: none;
+}
 
 .container {
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  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%;
-    height: fit-content;
-    left: 0;
-    bottom: 0;
-    padding: 0.5rem;
-    position: sticky; }
-    .container .references ul:empty {
-      display: none; }
-    .container .references ul:before {
-      content: 'references';
-      font-weight: bold;
-      font-size: 1em; }
-    .container .references ul {
-      font-size: 0.8em;
-      padding-inline-start: 10px; }
-    .container .references li {
-      display: table !important;
-      padding: 0.15rem 0; }
-    .container .references li::before {
-      content: '•';
-      display: table-cell;
-      color: red;
-      margin-right: 0.5rem;
-      padding-right: 0.5rem; }
-    .container .references a {
-      color: #444; }
-    .container .references a:hover {
-      color: red; }
+  width: 100%;
+}
+.container .project {
+  padding: 1rem;
+  width: 100%;
+  height: 100%;
+  height: 50vh;
+  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%;
+  height: fit-content;
+  left: 0;
+  bottom: 0;
+  padding: 0.5rem;
+  border-top: 2px solid #444;
+  position: sticky;
+}
+.container .references ul:empty {
+  display: none;
+}
+.container .references ul:before {
+  content: 'references';
+  font-weight: bold;
+  font-size: 1em;
+}
+.container .references ul {
+  font-size: 0.8em;
+  padding-inline-start: 10px;
+}
+.container .references li {
+  display: table !important;
+  padding: 0.15rem 0;
+}
+.container .references li::before {
+  content: '•';
+  display: table-cell;
+  color: red;
+  margin-right: 0.5rem;
+  padding-right: 0.5rem;
+}
+.container .references a {
+  color: #444;
+}
+.container .references a:hover {
+  color: red;
+}
 
 *::-webkit-scrollbar {
-  width: 0px; }
+  width: 0px;
+}
 
 *::-webkit-scrollbar-track {
   -webkit-border-radius: 5px;
   border-radius: 5px;
   background: rgba(0, 0, 0, 0);
-  width: 0px; }
+  width: 0px;
+}
 
 *::-webkit-scrollbar-thumb {
   -webkit-border-radius: 5px;
   border-radius: 5px;
   background: rgba(0, 0, 0, 0);
-  width: 0px; }
+  width: 0px;
+}
 
 *::-webkit-scrollbar-thumb:hover {
   background: rgba(0, 0, 0, 0);
-  width: 0px; }
+  width: 0px;
+}
 
 *::-webkit-scrollbar-thumb:window-inactive {
   background: rgba(0, 0, 0, 0);
-  width: 0px; }
+  width: 0px;
+}

src/components/Layout/Source.js

@@ -36,8 +36,12 @@ export const references = {
     ]
   },
   confetti: {
-    title: ['react-confetti', 'Burey on sololearn'],
-    url: ['https://github.com/alampros/react-confetti', 'https://code.sololearn.com/Wg7AAeBKzHaj/']
+    title: ['react-confetti', 'Burey on sololearn', 'Eloquent Javascript: Drawing on Canvas'],
+    url: [
+      'https://github.com/alampros/react-confetti',
+      'https://code.sololearn.com/Wg7AAeBKzHaj/',
+      'https://eloquentjavascript.net/17_canvas.html'
+    ]
   },
 
   clock: {

src/components/Layout/layout.scss

@@ -2,6 +2,11 @@ html {
   overflow-y: scroll;
   overflow-x: hidden;
 }
+h1.title,
+h2.title,
+h3.title {
+  margin-top: 0;
+}
 
 body {
   font-family: SF Mono, fira code, Roboto Mono, menlo, Courier, monospace;
@@ -26,14 +31,13 @@ header a {
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  align-content: space-between;
-  height: 100vh;
   width: 100%;
 
   .project {
     padding: 1rem;
     width: 100%;
     height: 100%;
+    height: 50vh;
     border-top: 2px solid black;
     overflow-x: hidden;
     overflow-y: scroll;
@@ -81,6 +85,7 @@ header a {
     left: 0;
     bottom: 0;
     padding: 0.5rem;
+    border-top: 2px solid #444;
     position: sticky;
 
     ul:empty {