More FH by Example, start Getting Started FH video tutorial

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")

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()

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}"

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()

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": {