Dashund rewrite / modernisation

.dockerignore

@@ -0,0 +1,11 @@
+#
+# Ignore files from git source control
+#
+
+node_modules
+coverage
+*.env
+.DS_Store
+.dashund
+.cache
+dist

.editorconfig

@@ -0,0 +1,12 @@
+#
+# Editor config, for sharing IDE preferences (https://editorconfig.org)
+#
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true

.eslintrc.yml

@@ -0,0 +1,17 @@
+#
+# .eslintrc.yml
+#
+
+root: true
+parserOptions:
+  sourceType: module
+  ecmaVersion: 2018
+env:
+  node: true
+  jest: true
+extends:
+  - standard
+  - prettier
+  - prettier/standard
+plugins:
+  - html

.gitignore

@@ -1,10 +1,11 @@
-/public/js/config.js
-
-/web/config.js
-
-/node_modules
-
-/logs/access.log
-/logs/error.log
-
-/store/auth.json
+#
+# Ignore files from git source control
+#
+
+node_modules
+coverage
+*.env
+.DS_Store
+.dashund
+.cache
+dist

.prettierignore

@@ -0,0 +1,6 @@
+#
+# Files for prettier to ignore
+#
+
+coverage
+node_modules

README.md

@@ -1,57 +1,24 @@
-# Smart(ish) Mirror
-- Rob Anderson, robb-j
-- A JQuery & Handlebars webapp to display a heads up for your day with a node server for fetching data
-
-
-###### Requirements
-- Something running node
-- A rough understanding of json
-
-
-## Features
-- The date & time
-- Your iCal events
-- The weather forecast in your area
-- The most positive news from [Good News!](http://gdnws.co.uk/)
-- Display cards from [Trello](https://trello.com)
-- Motivational quotes
-
-
-## Installing Node on a pi
-```
-wget http://node-arm.herokuapp.com/node_latest_armhf.deb
-sudo dpkg -i node_latest_armhf.deb
-rm node_latest_armhf.deb
-```
-
-
-## Mirror Setup
-1. Setup the project with `sudo sh setup.sh`
-2. Arrange your widgets in `public/js/config.js`, the order of the objects is the order they will be displayed
-    * `left` widgets are displayed down the left
-    * `right` widgets down the right
-    * The `bottom` widget is a single object to display at the bottom. Right now only the `quote` widget works well here
-3. Modify the parameters for your widgets, see Widget Configuration below
-4. Configure the node server in `web/config.js`
-    * `weather.apikey` is your api key for [Open Weather Map](https://openweathermap.org), you'll need
-    * `calendar.url` is the url to a shared iCalendar (e.g. generated in iOS's Calendar app)
-    * `server.port` is the port the webapp will run on
-5. Start the node server with `npm start`
-
-
-## Widget Configuration
-  * Each widget is defined by its `type`, the available types are: `calendar`, `clock`, `monzo`, `news`, `quote`, `trello` & `weather`.
-  * You specify how often a widget updates with its `tick` property, the default tick is every hour. See `example.config.js` for examples.
-  * Each widget then defines its own configuration like the clock's time format.
-  * Here are the available customisations:
-    * `clock.timeFormat` is the format time will be displayed in [(format)](https://momentjs.com/docs/#/parsing/string-format/)
-    * `clock.dateFormat` is the format the date will be displayed in [(format)](https://momentjs.com/docs/#/parsing/string-format/)
-     to [generate a one](https://openweathermap.org/appid)
-    * `weather.location` is the default location used to get your weather forecast, used if your location cannot be determined, [find your city](http://openweathermap.org/help/city_list.txt)
-    * `trello.appkey` Is your Trello app key, [find it here](https://trello.com/app-key)
-    * `trello.listId` Is the identifier of the Trello list you want to display, on [Trello.com](https://trello.com) visit a card on the list you want and add `.json` to the url. Your listId is in there under `idList`
-
-
-## Notes
-* Some non-popup based way of authenticating with Trello
-* Perhaps a more user-friendly config like yaml?
+# smartish-mirror
+
+Coming soon...
+
+## JSX DOM
+
+I created a lightweight DOM renderer which is used with jsx for developer ease.
+jsx is transpilled to `createElement` calls.
+This takes a tagName, attributes object a rest parameter for children.
+If tagName is a function it calls the function with the attrs object and children array.
+
+Fragments are transpilled to a `createElement` call passing `DomFragment` tagName.
+Both `createElement` and `DomFragment` are injected onto the window
+so they don't have to be imported everywhere
+
+## Fontawesome
+
+There's also a `FaIcon` component which renders the svg wrapped in a `<div class="fa-icon>`.
+So you can do `<FaIcon prefix="fas" iconName="hat-wizard" />`.
+Any attributes are passed to [#icon](https://fontawesome.com/how-to-use/with-the-api/setup/getting-started)
+
+---
+
+> This project was set up by [puggle](https://npm.im/puggle)

app/.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": ["@babel/preset-env"],
+  "plugins": [
+    [
+      "@babel/plugin-transform-react-jsx",
+      {
+        "pragma": "createElement",
+        "pragmaFrag": "DomFragment"
+      }
+    ]
+  ],
+  "comments": false
+}

app/.browserslistrc

@@ -0,0 +1 @@
+last 1 Chrome version

app/.dockerignore

@@ -0,0 +1,3 @@
+node_modules
+.cache
+*.env

app/Dockerfile

@@ -0,0 +1,22 @@
+#
+# Must run `npm run build` before building
+# This is automatically ran as part of the `npm version`
+#
+FROM robbj/configurable-nginx:1.0.1
+COPY dist /usr/share/nginx/html
+
+# Start with a node 10 image with package info
+# Installs *all* npm packages and runs build script
+# FROM node:10-alpine as builder
+# WORKDIR /app
+# COPY ["package*.json", "/app/"]
+# ENV NODE_ENV=development
+# RUN npm ci &> /dev/null
+# ENV NODE_ENV=production
+# COPY [ ".", "/app/" ]
+# RUN npm run build &> /dev/null
+
+# Swaps to nginx and copies the compiled html ready to be serverd
+# Uses a configurable nginx which can pass envionment variables to JavaScript
+# FROM robbj/configurable-nginx:0.1.0
+# COPY --from=builder /app/dist /usr/share/nginx/html

app/README.md

@@ -0,0 +1,8 @@
+# app | smartish-mirror
+
+> WIP
+
+## Environment variables
+
+- `CONFIG_KEYS` – set to `API_URL`
+- `API_URL` – set the the url where the api container is publicly accessible

app/css/minireset.min.css

@@ -0,0 +1,72 @@
+/*! minireset.css v0.0.5 | MIT License | github.com/jgthms/minireset.css */
+html,
+body,
+p,
+ol,
+ul,
+li,
+dl,
+dt,
+dd,
+blockquote,
+figure,
+fieldset,
+legend,
+textarea,
+pre,
+iframe,
+hr,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  padding: 0;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: 100%;
+  font-weight: normal;
+}
+ul {
+  list-style: none;
+}
+button,
+input,
+select,
+textarea {
+  margin: 0;
+}
+html {
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+img,
+video {
+  height: auto;
+  max-width: 100%;
+}
+iframe {
+  border: 0;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+td,
+th {
+  padding: 0;
+  text-align: left;
+}