From 7ad4c3511d409a12b892774150afbc52c715d2be Mon Sep 17 00:00:00 2001
From: Nick Van Doorn <vandoorn.nick@gmail.com>
Date: Sat, 6 Apr 2019 19:13:02 -0700
Subject: Comments on demo

---
 readme.md             | 17 ++++++++++++++---
 src/demo-component.js | 19 ++++++++++++++-----
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/readme.md b/readme.md
index 2702989..fbd46b6 100644
--- a/readme.md
+++ b/readme.md
@@ -1,5 +1,7 @@
 # sunlight-theme
 
+A theme provider for `@emotion/core` and `emotion-theming` that supplies the level of sunlight with `use-sunlight`. Supports middleware via a prop.
+
 ## Demo
 
 [https://optimistic-kalam-56c21b.netlify.com](https://optimistic-kalam-56c21b.netlify.com)
@@ -7,10 +9,9 @@
 ## Usage
 
 ```javascript
-const containerStyle = ({ colours }) => css`
-  color: ${colours.main};
-`
+// src/demo-component.js
 
+// define an array of 11 colours
 const mainRange = colormap({
   colormap: 'autumn',
   nshades: 11,
@@ -18,6 +19,14 @@ const mainRange = colormap({
   alpha: 1
 })
 
+// define an emotion style
+const containerStyle = ({ colours }) => css`
+  color: ${colours.main};
+`
+
+// define a middleware function that translates
+// the light level to a "theme" (some object
+// that's useful for styles)
 const colourMiddleware = theme => {
   return {
     ...theme,
@@ -28,6 +37,8 @@ const colourMiddleware = theme => {
 }
 
 export const DemoComponent = ({ children }) => {
+  // middleware is optional but encouraged
+  // for mapping light level to colours
   return (
     <SunlightTheme middleware={[colourMiddleware]}>
       <div css={containerStyle}>{children}</div>
diff --git a/src/demo-component.js b/src/demo-component.js
index 15fe3ed..54a341e 100644
--- a/src/demo-component.js
+++ b/src/demo-component.js
@@ -1,15 +1,14 @@
 // In production, it's worth configuring things
-// to handle the `css` prop at build time
+// to handle the `css` prop at build time,
+// but for now, we use the `jsx` callback
+// provided from `@emotion/core`
 /** @jsx jsx */
 import { jsx } from '@emotion/core'
 import { SunlightTheme } from './sunlight-theme'
 import { css } from '@emotion/core'
 import colormap from 'colormap'
 
-const containerStyle = ({ colours }) => css`
-  color: ${colours.main};
-`
-
+// define an array of 11 colours
 const mainRange = colormap({
   colormap: 'autumn',
   nshades: 11,
@@ -17,6 +16,14 @@ const mainRange = colormap({
   alpha: 1
 })
 
+// define an emotion style
+const containerStyle = ({ colours }) => css`
+  color: ${colours.main};
+`
+
+// define a middleware function that translates
+// the light level to a "theme" (some object
+// that's useful for styles)
 const colourMiddleware = theme => {
   return {
     ...theme,
@@ -27,6 +34,8 @@ const colourMiddleware = theme => {
 }
 
 export const DemoComponent = ({ children }) => {
+  // middleware is optional but encouraged
+  // for mapping light level to colours
   return (
     <SunlightTheme middleware={[colourMiddleware]}>
       <div css={containerStyle}>{children}</div>
-- 
cgit v1.2.3