zebflow 0.7.3

Reactive web automation platform — pipelines, templates, and real-time collaboration in a single binary.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

export const page = {
  html: {
    lang: "en",
  },
  body: {
    className: "min-h-screen bg-zinc-50 text-gray-900 font-sans",
  },
  navigation: "history",
};

export function getPage(input) {
  return {
    head: {
      title: input?.seo?.title ?? "",
      description: input?.seo?.description ?? "",
    },
  };
}

export const app = (() => {
return {
  state: {
    pageTitle: "Compile Fixture",
    counter: 0,
    lastToggleAt: 0,
    badge: "warm"
  },
  actions: {
    "card.toggle": ({ get, set }) => {
      const next = (get("state.counter") || 0) + 1;
      set("state.counter", next);
      set("state.lastToggleAt", Date.now());
    }
  },
  memo: {
    pageTitleUpper: ({ state }) => (state.pageTitle || "").toUpperCase(),
    counterLabel: ({ state }) => `count:${state.counter || 0}`
  },
  effect: {
    syncBadge: {
      deps: ["state.counter"],
      run: ({ get, set }) => {
        const count = get("state.counter") || 0;
        set("state.badge", count > 9 ? "hot" : "warm");
      }
    }
  }
};
})();

export default function Page(input) {
  return (
<Page>
    <main className="mx-auto max-w-3xl px-6 py-8">
      <header className="mb-6">
        <h1 className="text-2xl font-black tracking-tight">{input.pageTitle}</h1>
        <p className="text-sm text-gray-600 mt-1">{input.pageSubtitle}</p>
      </header>

      <section className="grid md:grid-cols-2 gap-4">
        <article className="rounded-xl border border-gray-200 p-4">
          <h3 className="text-base font-bold text-gray-900">{input.cards.news.title}</h3>
          <p className="text-sm text-gray-600 mt-2">{input.cards.news.desc}</p>
          <button onClick="card.toggle" className="mt-3 px-3 py-1 rounded bg-gray-900 text-white text-xs font-mono">
            Toggle
          </button>
        </article>
        <article className="rounded-xl border border-gray-200 p-4">
          <h3 className="text-base font-bold text-gray-900">{input.cards.blog.title}</h3>
          <p className="text-sm text-gray-600 mt-2">{input.cards.blog.desc}</p>
          <button onClick="card.toggle" className="mt-3 px-3 py-1 rounded bg-gray-900 text-white text-xs font-mono">
            Toggle
          </button>
        </article>
      </section>
    </main>
</Page>
  );
}