From 20eb716fb9c81b9d3ef1fcc942e2607d7d36aa77 Mon Sep 17 00:00:00 2001
From: Audrey Roy Greenfeld <aroy@alum.mit.edu>
Date: Thu, 1 Aug 2024 15:45:08 +0100
Subject: [PATCH] More FH by Example, start Getting Started FH video tutorial

---
 apps/{ => fh_by_example}/01_simple.py         |  0
 .../02_constructing_html.py                   |  0
 apps/{ => fh_by_example}/03_routes.py         |  0
 apps/fh_by_example/04_styling.py              | 10 +++++
 apps/fh_by_example/05_forms.py                | 29 +++++++++++++
 apps/fh_by_example/06_htmx.py                 | 24 +++++++++++
 apps/getting_started_w_fh/01_list.py          | 25 +++++++++++
 nbs/2024-07-29-FH-by-Example.ipynb            | 41 +++++++++++++++++++
 8 files changed, 129 insertions(+)
 rename apps/{ => fh_by_example}/01_simple.py (100%)
 rename apps/{ => fh_by_example}/02_constructing_html.py (100%)
 rename apps/{ => fh_by_example}/03_routes.py (100%)
 create mode 100644 apps/fh_by_example/04_styling.py
 create mode 100644 apps/fh_by_example/05_forms.py
 create mode 100644 apps/fh_by_example/06_htmx.py
 create mode 100644 apps/getting_started_w_fh/01_list.py

diff --git a/apps/01_simple.py b/apps/fh_by_example/01_simple.py
similarity index 100%
rename from apps/01_simple.py
rename to apps/fh_by_example/01_simple.py
diff --git a/apps/02_constructing_html.py b/apps/fh_by_example/02_constructing_html.py
similarity index 100%
rename from apps/02_constructing_html.py
rename to apps/fh_by_example/02_constructing_html.py
diff --git a/apps/03_routes.py b/apps/fh_by_example/03_routes.py
similarity index 100%
rename from apps/03_routes.py
rename to apps/fh_by_example/03_routes.py
diff --git a/apps/fh_by_example/04_styling.py b/apps/fh_by_example/04_styling.py
new file mode 100644
index 0000000..2e5a669
--- /dev/null
+++ b/apps/fh_by_example/04_styling.py
@@ -0,0 +1,10 @@
+from fasthtml import *
+
+# App with custom styling to override the pico defaults
+css = Style(":root { --pico-font-size: 100%; --pico-font-family: Pacifico, cursive;}")
+app = FastHTML(hdrs=(picolink, css))
+
+
+@app.route("/")
+def get():
+    return Title("Hello World"), Main(H1("Hello, World"), cls="container")
diff --git a/apps/fh_by_example/05_forms.py b/apps/fh_by_example/05_forms.py
new file mode 100644
index 0000000..0056a61
--- /dev/null
+++ b/apps/fh_by_example/05_forms.py
@@ -0,0 +1,29 @@
+from fasthtml.common import *
+
+app = FastHTML()
+messages = ["This is a message, which will get rendered as a paragraph"]
+
+
+@app.get("/")
+def home():
+    return Main(
+        H1("Messages"),
+        *[P(msg) for msg in messages],
+        A("Link to Page 2 (to add messages)", href="/page2"),
+    )
+
+
+@app.get("/page2")
+def page2():
+    return Main(
+        P("Add a message with the form below:"),
+        Form(
+            Input(type="text", name="data"), Button("Submit"), action="/", method="post"
+        ),
+    )
+
+
+@app.post("/")
+def add_message(data: str):
+    messages.append(data)
+    return home()
diff --git a/apps/fh_by_example/06_htmx.py b/apps/fh_by_example/06_htmx.py
new file mode 100644
index 0000000..b8e37b3
--- /dev/null
+++ b/apps/fh_by_example/06_htmx.py
@@ -0,0 +1,24 @@
+from fasthtml import *
+
+app = FastHTML()
+
+count = 0
+
+
+@app.get("/")
+def home():
+    return Title("Count Demo"), Main(
+        H1("Count Demo"),
+        P(f"Count is set to {count}", id="count"),
+        Button(
+            "Increment", hx_post="/increment", hx_target="#count", hx_swap="innerHTML"
+        ),
+    )
+
+
+@app.post("/increment")
+def increment():
+    print("incrementing")
+    global count
+    count += 1
+    return f"Count is set to {count}"
diff --git a/apps/getting_started_w_fh/01_list.py b/apps/getting_started_w_fh/01_list.py
new file mode 100644
index 0000000..a6ea5ba
--- /dev/null
+++ b/apps/getting_started_w_fh/01_list.py
@@ -0,0 +1,25 @@
+from fasthtml.common import *
+
+app, rt = fast_app(live=True)
+
+def NumList(n):
+    return Ul(*[Li(i+1) for i in range(n)])
+
+@rt("/")
+def get():
+    return Titled(
+        "My Numbers",
+        P("Do you like these numbers?"),
+        NumList(7),
+        A("Change", href="/change"),
+    )
+
+@rt("/change")
+def get():
+    return Titled(
+        "Change",
+        P("Change is good!"),
+        A("Back", href="/"),
+    )
+
+serve()
diff --git a/nbs/2024-07-29-FH-by-Example.ipynb b/nbs/2024-07-29-FH-by-Example.ipynb
index 91961b8..289cd62 100644
--- a/nbs/2024-07-29-FH-by-Example.ipynb
+++ b/nbs/2024-07-29-FH-by-Example.ipynb
@@ -65,6 +65,47 @@
     "r = client.get(\"/\")\n",
     "r.text"
    ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Forms"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/markdown": [
+       "```xml\n",
+       "<form action=\"/\" method=\"post\">\n",
+       "  <input type=\"text\" name=\"data\">\n",
+       "  <button>Submit</button>\n",
+       "</form>\n",
+       "\n",
+       "```"
+      ],
+      "text/plain": [
+       "['form',\n",
+       " (['input', (), {'type': 'text', 'name': 'data'}],\n",
+       "  ['button', ('Submit',), {}]),\n",
+       " {'action': '/', 'method': 'post'}]"
+      ]
+     },
+     "execution_count": null,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "Form(Input(type=\"text\", name=\"data\"),\n",
+    "                     Button(\"Submit\"),\n",
+    "                     action=\"/\", method=\"post\")"
+   ]
   }
  ],
  "metadata": {