Initial commit

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "santa-cruz-js-preact-talk-completed",
+  "description": null,
+  "version": "0.0.94",
+  "dependencies": {
+    "preact-compat": "3.17.0",
+    "preact": "8.2.5",
+    "linkstate": "1.1.0"
+  },
+  "devDependencies": {
+    "eslint": "^4.5.0",
+    "eslint-config-synacor": "^1.1.0",
+    "if-env": "^1.0.0",
+    "less": "^2.7.2",
+    "less-loader": "^4.0.5",
+    "node-sass": "^4.5.3",
+    "preact-cli": "^1.4.1",
+    "sass-loader": "^6.0.6",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^3.0.1"
+  },
+  "scripts": {
+    "test": "eslint . && preact test",
+    "start": "if-env NODE_ENV=production && npm run -s serve || npm run -s dev",
+    "build": "preact build",
+    "serve": "preact build && preact serve",
+    "dev": "preact watch"
+  },
+  "eslintConfig": {
+    "extends": "eslint-config-synacor"
+  }
+}

src/data.js

@@ -0,0 +1,60 @@
+export const drinks = [
+  {
+    id: 1,
+    name: 'Old Fashioned',
+    ingredients: [
+      'Bourbon (or Rye)',
+      'Sweet Vermouth',
+      'Simple Syrup',
+      'Mariscino Cherries (2)'
+    ],
+    directions: [
+      'Mix alcohols',
+      'Stir',
+    ],
+  },
+  {
+    id: 2,
+    name: 'Corpse Reviver #2',
+    ingredients: [
+      'Gin',
+      'Lemon Juice',
+      'Simple Syrup',
+      'Lorem Ipsum'
+    ],
+    directions: [
+      'Mix alcohols',
+      'Shake',
+    ],
+  },
+  {
+    id: 3,
+    name: 'Martini',
+    ingredients: [
+      'Simple Syrup',
+      'Sweet Vermouth',
+      'Bourbon (or Rye)',
+      'Mariscino Cherries (2)'
+    ],
+    directions: [
+      'Stir',
+      'Mix alcohols',
+    ],
+  },
+  {
+    id: 4,
+    name: 'Trinidad Sour',
+    ingredients: [
+      'Angostura Bitters',
+      'Bourbon (or Rye)',
+      'Sweet Vermouth',
+      'Simple Syrup',
+      'Mariscino Cherries (2)'
+    ],
+    directions: [
+      'Mix alcohols',
+      'Stir',
+    ],
+  },
+
+];

src/default/default.js

@@ -0,0 +1,32 @@
+import "./style";
+import { Component, render } from "preact";
+import { Result } from "./result";
+
+const SEARCH = "//api.github.com/search/repositories";
+
+export default class App extends Component {
+  componentDidMount() {
+    fetch(`${SEARCH}?q=preact`)
+      .then(r => r.json())
+      .then(json => {
+        this.setState({
+          results: (json && json.items) || []
+        });
+      });
+  }
+
+  render(props, { results = [] }) {
+    return (
+      <div>
+        <h1>Wow</h1>
+        <div class="list">
+          {results.map(result => <Result result={result} />)}
+        </div>
+      </div>
+    );
+  }
+}
+
+if (typeof window !== "undefined") {
+  render(<App />, document.getElementById("root"));
+}

src/index.js

@@ -0,0 +1,71 @@
+import "./style";
+import { h, Component, render } from "preact";
+import linkState from "linkstate";
+import { drinks } from "./data";
+
+/**
+ * @TODOs
+ * 
+ * Build Ingredients Component
+ * Build Steps Component
+ * Add Toggle between each?
+ * Add Images
+ * Add Nicer Styles
+ * 
+ */
+
+const DrinkList = ({ drinks, onSelectDrink }) => (
+ <ul class='drink-list'>
+    {drinks.map(({ name, id }) => (
+      <Drink
+        key={id}
+        id={id}
+        name={name}
+        onSelectDrink={onSelectDrink}
+      />
+    ))}
+  </ul>
+)
+
+class Drink extends Component {
+  onClick = () => {
+    const { id, onSelectDrink } = this.props;
+    onSelectDrink( { id });
+  }
+
+  render({ name, index, id }) {
+    return <li>
+      <button onClick={this.onClick}>{name}</button>
+    </li>;
+  }
+} 
+
+export default class App extends Component {
+  state = {
+    selected: null,
+  }
+
+  render(_, { selected }) {
+    return (
+      <div>
+        <h1>Who needs a drink?</h1>
+        <DrinkList 
+          drinks={drinks} 
+          onSelectDrink={linkState(this, 'selected', 'id')}/>
+
+        {selected && <div class="selected">
+          {drinks[selected - 1].ingredients.map(i => <p>{i}</p>)}
+        </div>}
+
+        {selected && <hr/>}
+        {selected && <div class="selected">
+          {drinks[selected - 1].directions.map(i => <p>{i}</p>)}
+        </div>}
+      </div>
+    );
+  }
+}
+
+if (typeof window !== "undefined") {
+  render(<App />, document.getElementById("root"));
+}

src/manifest.json

@@ -0,0 +1,19 @@
+{
+  "name": "Preact PWA",
+  "short_name": "Preact PWA",
+  "start_url": "/",
+  "display": "standalone",
+  "orientation": "portrait",
+  "background_color": "#fff",
+  "theme_color": "#673ab8",
+  "icons": [{
+    "src": "/assets/icons/android-chrome-192x192.png",
+    "type": "image/png",
+    "sizes": "192x192"
+  },
+  {
+    "src": "/assets/icons/android-chrome-512x512.png",
+    "type": "image/png",
+    "sizes": "512x512"
+  }]
+}

src/result.js

@@ -0,0 +1,15 @@
+export const Result = ({ result }) => {
+  return (
+    <div class="result">
+      <div>
+        <a href={result.html_url} target="_blank">
+          {result.full_name}
+        </a>
+        🌟<strong>{result.stargazers_count}</strong>
+      </div>
+      <p>
+        {result.description}
+      </p>
+    </div>
+  );
+};

src/style/index.scss

@@ -0,0 +1,18 @@
+html, body {
+	font: 14px/1.21 'Helvetica Neue', arial, sans-serif;
+	font-weight: 400;
+	color: #444;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+h1 {
+	text-align: center;
+}
+
+.result {
+	padding: 10px;
+	margin: 10px;
+	background: white;
+	box-shadow: 0 1px 5px rgba(0,0,0,0.5);
+}