diff --git a/src/main.ts b/src/main.ts
index 304c610..ef5087e 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,18 +4,52 @@ import { start } from "@thi.ng/hdom";
// stateless component w/ params
// the first arg is an auto-injected context object
// (not used here, see dedicated section in readme further below)
-const greeter = (_: any, name: string) => ["h1.title", "hello ", name];
+const greeter = (_: any, name: string) => ["h1.title", "Hello ", name];
-// component w/ local state
-const counter = (i = 0) => {
- return () => ["button", { onclick: () => (i++) }, `clicks: ${i}`];
-};
+// Syntax explanation:
+// ["b", "Hello"] === Hello
+// ["div", ["b", "Hello"]] ===
Hello
+// ["div.foo#bar"] ==
+
+const onSubmit = (e: Event) => {
+ console.log("You tried to submit this form!", e)
+ e.preventDefault()
+}
+
+const uploadForm = (_: any) =>
+ ["section",
+ ["h2", "Upload new image"],
+ ["form", {"onsubmit": onSubmit},
+ ["input", {"type": "file", "name": "image"}],
+ ["input", {"type": "submit", "value": "Upload"}]]]
+
+const imageHasBeenUploaded = false
+
+const previousImage = (_: any) =>
+ ["p", "Nice pics!"]
+
+const noImageMessage = (_: any) =>
+ ["p", "Start by picking an image to upload. It will be shown on the connected e-ink displays within the next hour."]
+
+const overview = (_: any) =>
+ ["section.overview",
+ imageHasBeenUploaded ? previousImage : noImageMessage,
+ uploadForm]
+
+const timeline = (_: any) =>
+ ["section.timeline",
+ ["h2", "Recent Activity"],
+ ["ul",
+ ["li", "Hannes uploaded an image", ["em", "Jan 14 2021"]],
+ ["li", "Arne uploaded an image", ["em", "Jan 12 2021"]],
+ ["li", "Hannes uploaded an image", ["em", "Jan 12 2021"]],
+ ["li.special", "You uploaded an image", ["em", "Jan 1 2021"]]]]
const app = () => {
- // initialization steps
- // ...
- // root component is just a static array
- return ["div#app", [greeter, "world"], counter(), counter(100)];
+ return ["main#app",
+ [greeter, "Pau"],
+ [overview],
+ [timeline]];
};
// start RAF update & diff loop
diff --git a/src/style.css b/src/style.css
index 0b14c27..d8bd6f8 100644
--- a/src/style.css
+++ b/src/style.css
@@ -5,11 +5,20 @@ body {
}
body {
- font-family: Avenir, Helvetica, Arial, sans-serif;
+ font-family: Helvetica, Arial, sans-serif;
line-height: 1.2;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
- text-align: center;
color: #2c3e50;
- margin-top: 60px;
+ padding: 24px;
+}
+
+.timeline ul li.special {
+ background: rgba(180,20,220,.2)
+}
+
+.timeline ul li em {
+ padding-left: .6em;
+ font-size: 80%;
+ font-style: normal
}