Merge pull request #608 from achrafmam2/doc

Misc documentation fixes to the "By Example" tutorial

nbs/tutorials/by_example.ipynb

@@ -1033,6 +1033,9 @@
    "metadata": {},
    "outputs": [],
    "source": [
+    "from fasthtml.common import *\n",
+    "from starlette.testclient import TestClient\n",
+    "\n",
     "app = FastHTML()\n",
     "cli = TestClient(app)"
    ]
@@ -1093,7 +1096,7 @@
    "source": [
     "reg_re_param(\"imgext\", \"ico|gif|jpg|jpeg|webm\")\n",
     "\n",
-    "@app.get(r'/static/{path:path}{fn}.{ext:imgext}')\n",
+    "@app.get(r'/static/{path:path}/{fn}.{ext:imgext}')\n",
     "def get_img(fn:str, path:str, ext:str): return f\"Getting {fn}.{ext} from /{path}\"\n",
     "\n",
     "cli.get('/static/foo/jph.ico').text"
@@ -1179,7 +1182,7 @@
     "fake_db = [{\"name\": \"Foo\"}, {\"name\": \"Bar\"}]\n",
     "\n",
     "@app.get(\"/items/\")\n",
-    "def read_item(idx:int|None = 0): return fake_db[idx]\n",
+    "def read_item(idx: int = 0): return fake_db[idx]\n",
     "\n",
     "print(cli.get('/items/?idx=1').text)"
    ]
@@ -1198,6 +1201,7 @@
     }
    ],
    "source": [
+    "# Equivalent to `/items/?idx=0`.\n",
     "print(cli.get('/items/').text)"
    ]
   },
@@ -1905,7 +1909,7 @@
     "}\n",
     "```\n",
     "\n",
-    "The [AI Pictionary example](https://github.com/AnswerDotAI/fasthtml-example/tree/main/ai_pictionary) uses a larger chunk of custom JavaScript to handle the drawing canvas. It's a good example of the type of application where running code on the client side makes the most sense, but still shows how you can integrate it with FastHTML on the server side to add functionality (like the AI responses) easily.\n",
+    "The [AI Pictionary example](https://github.com/AnswerDotAI/fasthtml-example/tree/main/03_pictionary) uses a larger chunk of custom JavaScript to handle the drawing canvas. It's a good example of the type of application where running code on the client side makes the most sense, but still shows how you can integrate it with FastHTML on the server side to add functionality (like the AI responses) easily.\n",
     "\n",
     "Adding styling with custom CSS and libraries such as tailwind is done the same way we add custom JavaScript. The [doodle example](https://github.com/AnswerDotAI/fasthtml-example/tree/main/doodle) uses [Doodle.CSS](https://github.com/chr15m/DoodleCSS) to style the page in a quirky way."
    ]
@@ -1944,7 +1948,7 @@
     "6. Fetches and displays the URL of our app.\n",
     "7. By default, mounts a `/app/data` folder on the cloud to our app's root folder. The app is run in `/app` by default, so from our app anything we store in `/data` will persist across restarts.\n",
     "\n",
-    "A final note about Railway: We can add secrets like API keys that can be accessed as environment variables from our apps via ['Variables'](https://docs.railway.app/guides/variables). For example, for the image app (TODO link), we can add a `REPLICATE_API_KEY` variable, and then in `main.py` we can access it as `os.environ['REPLICATE_API_KEY']`.\n",
+    "A final note about Railway: We can add secrets like API keys that can be accessed as environment variables from our apps via ['Variables'](https://docs.railway.app/guides/variables). For example, for the [image generation app](https://github.com/AnswerDotAI/fasthtml-example/tree/main/image_app_simple), we can add a `REPLICATE_API_KEY` variable, and then in `main.py` we can access it as `os.environ['REPLICATE_API_KEY']`.\n",
     "\n",
     "\n",
     "\n",