chore: update

TODO.md

@@ -0,0 +1,25 @@
+- Update to latest React
+- Package a local version of Gatsby with hooks support
+- Switch to SVG emoji heart
+
+```jsx
+import React, { useState } from 'react'
+
+const handleSubmit = (value, mutation) => {
+  return ev => {
+    ev.preventDefault()
+  }
+
+  // use value
+}
+
+function() {
+  const [value, setValue] = useState('')
+
+  return (
+    <form onSubmit={handleSubmit(value, mutation)}>
+      <input value={value} onChange={ev => setValue(ev.target.value)} />
+    </form>
+  )
+}
+```

client/src/components/canvas.js

@@ -49,6 +49,8 @@ export default class Canvas extends Component {
     context.clearRect(0, 0, this.canvas.width, this.canvas.height)
   }
 
+  positionInScaledCanvas = points => points.map(point => point / 4)
+
   render() {
     const { children, render = children } = this.props
     const { context } = this.state
@@ -58,6 +60,7 @@ export default class Canvas extends Component {
           ? render({
               ...this.state,
               clear: this.clear,
+              getPosition: this.positionInScaledCanvas,
             })
           : null}
       </Container>

client/src/components/footer.js

@@ -1,16 +1,39 @@
 import React from 'react'
 import styled from 'react-emotion'
+import { FaGithub } from 'react-icons/fa'
+
+import Link from './outbound-link'
 
 import { position } from '../style'
 
 const Container = styled.footer`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   box-sizing: border-box;
   background-color: #fffaf5;
+  border-top: 2px solid #c51104;
   width: 100%;
   padding: 1rem 0.5rem;
   ${position.absolute({ bottom: true })}
 `
 
-export default function Footer({ children }) {
-  return <Container>{children}</Container>
+const GithubIcon = styled(FaGithub)`
+  font-size: 24px;
+`
+
+export default function Footer() {
+  return (
+    <Container>
+      <span>
+        <GithubIcon />
+      </span>
+      <Link
+        css={{ fontWeight: 'bold' }}
+        href="https://twitter.com?q=#buildwithgatsby"
+      >
+        #buildwithgatsby
+      </Link>
+    </Container>
+  )
 }

client/src/components/heart-canvas.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import Canvas from './canvas'
+
+function HeartCanvas() {
+  return (
+    <Canvas>
+      {({ context, x, y }) => {
+        const NUM_ROWS = Math.ceil(Math.sqrt(x))
+        const blockSize = Math.ceil(x / NUM_ROWS)
+
+        for (let i = 0; i < NUM_ROWS; i++) {
+          const x = i * blockSize
+          const numCols = Math.ceil(y / blockSize)
+          for (let j = 0; j < numCols; j++) {
+            const y = j * blockSize
+            const fontSize = Math.ceil(Math.sqrt(y / 2.5))
+            context.font = `${fontSize}px sans-serif`
+            context.fillStyle = `rgba(255, 255, 255, ${Math.random()})`
+            context.fillText('❤', x / 2, y / 2)
+          }
+        }
+
+        return null
+      }}
+    </Canvas>
+  )
+}
+
+export default HeartCanvas

client/src/components/heart.js

@@ -1,23 +1,28 @@
 import React from 'react'
-import styled from 'react-emotion'
+import styled, { css } from 'react-emotion'
 
 import { PULSE_ANIMATION } from '../style'
 
 const Container = styled.span`
   display: inline-block;
-  animation: 2s infinite ${PULSE_ANIMATION}
-    cubic-bezier(0.455, 0.03, 0.515, 0.955);
-  transition: 2s ease-in-out;
-
-  :hover {
-    animation: none;
-  }
+  ${props =>
+    props.animate &&
+    css`
+      animation: 2s infinite ${PULSE_ANIMATION}
+        cubic-bezier(0.455, 0.03, 0.515, 0.955);
+    `}
 `
 
-export default function Heart() {
+function Heart({ animate }) {
   return (
-    <Container role="img" aria-label="Heart">
+    <Container role="img" aria-label="Heart" animate={animate}>
       ❤️
     </Container>
   )
 }
+
+Heart.defaultProps = {
+  animate: true,
+}
+
+export default Heart

client/src/components/index.js

@@ -1,3 +1,6 @@
 export { default as Canvas } from './canvas'
 export { default as Heart } from './heart'
+export { default as HeartCanvas } from './heart-canvas'
 export { default as Footer } from './footer'
+export { default as LoveCanvas } from './love-canvas'
+export { default as OutboundLink } from './outbound-link'

client/src/components/love-canvas.js

@@ -0,0 +1,82 @@
+import React from 'react'
+import styled from 'react-emotion'
+import PropTypes from 'prop-types'
+
+import Canvas from './canvas'
+import Heart from './heart'
+
+const Container = styled.div`
+  font-family: monospace;
+  font-size: 10vw;
+`
+
+const Empty = () => (
+  <Container>
+    {`{...`}
+    <Heart />
+    {`}`}
+  </Container>
+)
+
+/*
+ * TODO: implement fill algorithm
+ */
+function Love({ items }) {
+  if (items.length === 0) {
+    return <Empty />
+  }
+
+  const total = items.reduce((count, item) => {
+    return count + item.count
+  }, 0)
+
+  return (
+    <Canvas
+      render={canvasArgs => {
+        const { x, y, context } = canvasArgs
+
+        const gridSize = Math.ceil(Math.sqrt(items.length))
+        const clone = items.slice(0)
+
+        for (let i = 0; i < gridSize; i++) {
+          const blockSize = x / gridSize
+          const xPos = (i / gridSize) * x
+
+          for (let j = 0; j < gridSize; j++) {
+            const yPos = (j / gridSize) * y
+
+            const item = clone.shift()
+
+            if (item) {
+              context.fillStyle = 'red'
+              context.fillRect(xPos / 2, yPos / 2, blockSize / 2, y / 2)
+              context.fillStyle = 'black'
+              context.fillText(
+                item.name,
+                (xPos + blockSize) / 4,
+                (yPos + blockSize) / 2
+              )
+            }
+          }
+        }
+
+        return null
+      }}
+    />
+  )
+}
+
+Love.defaultProps = {
+  items: [],
+}
+
+Love.propTypes = {
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      count: PropTypes.number,
+      name: PropTypes.string,
+    })
+  ),
+}
+
+export default Love

client/src/components/outbound-link.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import styled from 'react-emotion'
+
+const Link = styled.a`
+  text-decoration: none;
+  color: inherit;
+`
+
+Link.defaultProps = {
+  target: '_blank',
+  rel: 'noopener noreferrer',
+}
+
+export default Link

client/src/layouts/index.js

@@ -24,8 +24,16 @@ const Layout = ({ children }) => (
         <Helmet
           title={data.site.siteMetadata.title}
           meta={[
-            { name: 'description', content: 'Sample' },
-            { name: 'keywords', content: 'sample, something' },
+            {
+              name: 'description',
+              content:
+                'Spread love; a simple Gatsby application to share what you love and what you are passionate about',
+            },
+            {
+              name: 'keywords',
+              content:
+                'gatsby, web app, application, javascript, react, graphql, love',
+            },
           ]}
         >
           <html lang="en" />