Minimal styling and make code lines less long so easier in split view

Author: Isaac-Flath

examples/visualizations/observable_plot/app.py

@@ -1,6 +1,5 @@
 from fasthtml.common import *
 import numpy as np
-from starlette.responses import JSONResponse
 
 plot_js = """
 function createPlot(data) {
@@ -20,28 +19,24 @@
 """
 
 app, rt = fast_app(
-    pico=False,
-    hdrs=(
-        Script(src="https://cdn.jsdelivr.net/npm/d3@7"),
-        Script(src="https://cdn.jsdelivr.net/npm/@observablehq/[email protected]"),
-        Script(src="https://unpkg.com/@tailwindcss/browser@4")
-    )
-)
+    hdrs=(Script(src="https://cdn.jsdelivr.net/npm/d3@7"),
+          Script(src="https://cdn.jsdelivr.net/npm/@observablehq/[email protected]")))
 
 @rt
 def index():
     return Div(
-        H1("Observable Plot Demo", cls="text-4xl font-bold"),
-        P("This FastHTML example renders an ", A("Observable Plot", href="https://observablehq.com/@observablehq/plot", target="_blank", cls="visited:text-purple-600 underline"), " chart. The data is randomly generated on the server and is fetched on initial page load. You can also click the button to fetch new random data from the server. Try opening the browser developer tools and viewing the Network tab to see the data reponse for each http request.", cls="my-4"),
-        Button("Refresh Data", hx_get="get_data", hx_target="#data-store", cls="cursor-pointer rounded-md bg-slate-600 px-3.5 py-2.5 my-2 text-sm font-semibold text-white shadow-xs hover:bg-slate-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-600"),
+        H1(A("Observable", href="https://observablehq.com/@observablehq/plot", target="_blank"), " Plot Demo"),
+        P("The data is randomly generated on the server and is fetched on initial page load."),
+        P("Try opening the browser developer tools and viewing the Network tab to see the data reponse for each http request."),
+        # On bytton click it sends a get request to the `get_data` route and puts the response in the `data-store` div 
+        Button("Fetch New Data", get=get_data, hx_target="#data-store", cls='btn btn-primary'),
         # Store for the JSON chart data
-        Div(id="data-store", hx_get="get_data", hx_trigger="load", cls="hidden"),
+        Div(id="data-store", get=get_data, hx_trigger="load", hidden=True),
         # Plot container
-        Div(id="plot", cls="mt-12"),
+        Div(id="plot"),
         # Include the JavaScript for the plot
-        Script(plot_js),
-        cls="m-12"
-    )
+        Script(plot_js)
+        )
 
 @rt
 def get_data():