Add hugo site

.gitignore

@@ -1,3 +1,6 @@
 node_modules/
 dist/
 coverage/
+site/public
+site/resources
+site/static/js/bundle.js

Makefile

@@ -1,7 +1,7 @@
 SOURCES=$(shell find src -name "*.js")
 
 .PHONY: all clean coverage lint test major-version minor-version patch-version \
-	publish
+	publish site
 
 all: dist/flyps.js
 
@@ -29,5 +29,8 @@ patch-version:
 publish:
 	npm publish
 
+site:
+	make -C site
+
 clean:
 	rm -f dist/*

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flyps",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Flyps is just flyps.",
   "browser": "dist/flyps.umd.js",
   "module": "dist/flyps.esm.js",

site/Makefile

@@ -0,0 +1,17 @@
+.PHONY: all js
+
+all: js site
+
+js: static/js/bundle.js
+
+static/js/bundle.js: index.js node_modules
+	npm run build
+
+node_modules: package.json
+	npm install
+
+site:
+	hugo
+
+clean:
+	rm -rf static/js/bundle.js resources

site/config.toml

@@ -0,0 +1,5 @@
+languageCode = "en-us"
+title = "Flyps"
+baseURL = "https://contargo.github.io/flyps"
+pygmentsStyle = "friendly"
+disableKinds = ["taxonomy", "RSS"]

site/content/_index.md

@@ -0,0 +1,8 @@
+---
+title:  "Flyps"
+date: 2019-06-18T10:00:00+02:00
+---
+
+Woha, what's this. This is the new home for the Flyps project. We're just starting out, but make sure to come by again for an update.
+
+For now, here are some examples.

site/content/example/bmi/bmi.js

@@ -0,0 +1,78 @@
+let data = signal({ height: 1.8, weight: 78 });
+
+let bmi = signalFn(
+  withInputSignals(
+    () => data,
+    ({ height, weight }) => weight / (height * height)
+  )
+);
+
+let diagnose = signalFn(
+  withInputSignals(
+    () => bmi,
+    bmi => {
+      if (bmi < 18.5) return "underweight";
+      if (bmi < 25) return "healthy";
+      if (bmi < 30) return "overweight";
+      return "obese";
+    }
+  )
+);
+
+let color = signalFn(
+  withInputSignals(
+    () => diagnose,
+    diagnose => {
+      switch (diagnose) {
+        case "underweight":
+        case "overweight":
+          return "orange";
+        case "healthy":
+          return "green";
+        default:
+          return "red";
+      }
+    }
+  )
+);
+
+function slider(key, value, min, max, step = 1) {
+  return h("input", {
+    attrs: {
+      type: "range",
+      value,
+      min,
+      max,
+      step
+    },
+    style: { width: "100%" },
+    on: {
+      input: function(e) {
+        data.update(data => ({
+          ...data,
+          [key]: e.target.value
+        }));
+      }
+    }
+  });
+}
+
+function calculator([data, bmi, diagnose, color]) {
+  let { height, weight } = data;
+
+  return h("div.bmi", [
+    h("h3", "BMI calculator"),
+    h("div", [`Height: ${height}m`, slider("height", height, 1.0, 2.2, 0.01)]),
+    h("div", [`Weight: ${weight}kg`, slider("weight", weight, 30, 200)]),
+    h("p", [
+      `BMI: ${Math.round(bmi)}`,
+      " - ",
+      h("strong", { style: { color: color } }, diagnose)
+    ])
+  ]);
+}
+
+mount(
+  mountPoint,
+  withInputSignals(() => [data, bmi, diagnose, color], calculator)
+);

site/content/example/bmi/index.md

@@ -0,0 +1,6 @@
+---
+title: "BMI calculator"
+date: 2019-06-25T10:00:00+02:00
+resources:
+  - src: bmi.js
+---

site/content/example/clock/clock.js

@@ -0,0 +1,22 @@
+let color = signal("#000");
+let now = signal(new Date());
+
+setInterval(() => now.reset(new Date()), 1000);
+
+function display() {
+    let time = now.value().toTimeString().split(" ")[0];
+    return h("h1", { style: { color: color.value() } }, time);
+} 
+
+function colorInput() {
+    return h("input", {
+        attrs: { type: "color", value: color.value() },
+        on: { input: e => color.reset(e.target.value) },
+    });
+}
+
+function clock() {
+    return h("div.clock", [display(), colorInput()]);
+}
+
+mount(mountPoint, clock);

site/content/example/clock/index.md

@@ -0,0 +1,6 @@
+---
+title: "Clock"
+date: 2019-06-24T10:00:00+02:00
+resources:
+  - src: clock.js
+---

site/content/example/counter/counter.js

@@ -0,0 +1,19 @@
+let count = signal(0);
+
+signal({ height: 180, weight: 80 });
+function counter() {
+  return h("div.counter", [
+    "Number of clicks: ",
+    count.value(),
+    h(
+      "button",
+      {
+        style: { margin: "10px" },
+        on: { click: () => count.update(count => count + 1) }
+      },
+      "Click!"
+    )
+  ]);
+}
+
+mount(mountPoint, counter);

site/content/example/counter/index.md

@@ -0,0 +1,6 @@
+---
+title: "Counter"
+date: 2019-06-21T10:00:00+02:00
+resources:
+  - src: counter.js
+---

site/content/example/list/index.md

@@ -0,0 +1,6 @@
+---
+title: "List"
+date: 2019-06-20T10:00:00+02:00
+resources:
+  - src: list.js
+---

site/content/example/list/list.js

@@ -0,0 +1,14 @@
+function list(items) {
+    return h("ul", items.map(
+        item => h("li", `Item ${item}`)
+    ));
+} 
+
+function numberList() {
+    return h("div", [
+        "Here is a list of numbers:",
+        list([1,2,3])
+    ]);
+}
+
+mount(mountPoint, numberList);

site/content/example/simple-parent/index.md

@@ -0,0 +1,6 @@
+---
+title: "Simple Parent"
+date: 2019-06-19T14:00:00+02:00
+resources:
+  - src: simple-parent.js
+---

site/content/example/simple-parent/simple-parent.js

@@ -0,0 +1,21 @@
+function simple() {
+    return h("div", [
+        h("p", "I am a simple view!"),
+        h("p.special", [
+            "I render text ",
+            h("strong", "bold"),
+            " and ",
+            h("span", { style: { color: "red" } }, "red"),
+            "."
+        ])
+    ]);
+} 
+
+function parent() {
+    return h("div", [
+        h("p", "I'm the parent of the simple view"),
+        simple()
+    ]);
+}
+
+mount(mountPoint, parent);

site/content/example/simple/index.md

@@ -0,0 +1,6 @@
+---
+title: "Simple"
+date: 2019-06-19T10:00:00+02:00
+resources:
+  - src: simple.js
+---

site/content/example/simple/simple.js

@@ -0,0 +1,14 @@
+function simple() {
+    return h("div", [
+        h("p", "I am a simple view!"),
+        h("p.special", [
+            "I render text ",
+            h("strong", "bold"),
+            " and ",
+            h("span", { style: { color: "red" } }, "red"),
+            "."
+        ])
+    ]);
+} 
+
+mount(mountPoint, simple);

site/index.js

@@ -0,0 +1,9 @@
+import { signal, signalFn, withInputSignals } from "flyps";
+import { h, mount } from "flyps-dom-snabbdom";
+
+window.signal = signal;
+window.signalFn = signalFn;
+window.withInputSignals = withInputSignals;
+
+window.h = h;
+window.mount = mount;

site/layouts/_default/baseof.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="{{ .Site.Language.Lang }}">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>{{ .Title }} | {{ $.Site.Title }}</title>
+    <link rel="stylesheet" href="{{ "css/normalize.css" | relURL }}">
+    <link rel="stylesheet" href="{{ "css/style.css" | relURL }}">
+    <script type="text/javascript" src="{{ "js/bundle.js" | relURL }}"></script>
+  </head>
+  <body>
+    {{ partial "header.html" . }}
+    <main>
+      {{ block "main" . }}{{ end }}
+    </main>
+    {{ partial "footer.html" . }}
+  </body>
+</html>

site/layouts/example/list.html

@@ -0,0 +1,6 @@
+{{ define "main" }}
+  <h1>{{ .Title }}</h1>
+  {{ .Content }}
+  {{ partial "example-list.html" . }}
+{{ end }}
+

site/layouts/example/single.html

@@ -0,0 +1,4 @@
+{{ define "main" }}
+  <h1>{{ .Title }}</h1>
+  {{ partial "example-single.html" . }}
+{{ end }}

site/layouts/index.html

@@ -0,0 +1,5 @@
+{{ define "main" }}
+  <h1>{{ .Title }}</h1>
+  {{ .Content }}
+  {{ partial "example-list.html" . }}
+{{ end }}

site/layouts/partials/example-list.html

@@ -0,0 +1,4 @@
+{{ range where .Pages.ByPublishDate "Section" "example" }}
+  <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
+  {{ partial "example-single.html" . }}
+{{ end }}

site/layouts/partials/example-single.html

@@ -0,0 +1,17 @@
+{{ $id := .File.ContentBaseName }}
+<div id="{{ $id }}">
+  {{ .Content }}
+
+  {{ range .Resources.Match "*.js" }}
+    {{ $example := strings.TrimSuffix ".js" .Name }}
+  <div id="{{ $example }}" class="mount"></div>
+  {{ highlight .Content "javascript" "" }}
+  <script type="text/javascript">
+    {
+      let mountPoint = document.createElement("div");
+      document.querySelector("#{{ $id }} > #{{ $example }}.mount").appendChild(mountPoint);
+      {{ .Content | safeJS }}
+    }
+  </script>
+  {{ end }}
+</div>

site/layouts/partials/footer.html

@@ -0,0 +1,2 @@
+<footer>
+</footer>

site/layouts/partials/header.html

@@ -0,0 +1,7 @@
+<header>
+  <ul>
+    <li><a href="/flyps/">Flyps</a></li>
+    <li><a href="/flyps/example/">Examples</a></li>
+    <li><a href="https://github.com/Contargo/flyps">Source</a></li>
+  </ul>
+</header>