Monsterfied session 1

Author: Isaac-Flath

app.py

@@ -1,34 +1,56 @@
-from fh_bootstrap import *
 from itertools import chain
-from markdown import markdown
-
-md_exts='codehilite', 'smarty', 'extra', 'sane_lists'
-def Markdown(s, exts=md_exts, **kw): return Div(NotStr(markdown(s, extensions=exts)), **kw)
+from fasthtml.common import *
+from functools import partial
+from monsterui.all import *
+from fasthtml.components import Uk_theme_switcher
+_A = partial(A, target='_blank')
+def Markdown(s, **kw): return Div(render_md(s, class_map_mods={'ul':'uk-list uk-list-bullet space-y-2 mb-6 ml-6 text-lg'}), **kw)
 
 ghurl = 'https://github.com/AnswerDotAI/fasthtml'
 fhurl = 'https://fastht.ml'
 docs = 'https://docs.fastht.ml'
 
-def BstPage(selidx, title, *c):
+def BstPage(selidx, title, h2s, *c):
     navitems = [('About', '/'), ('Vision', '/vision'), ('Foundations', '/foundation'),
                 ('Technology', '/tech'), ('Components', '/components'), ('Limits', '#', {'disabled':True})]
     logo = 'assets/logo.svg'
-    ra_items = (A('Docs', href=docs, cls="nav-link"),
-                Icon('fab fa-github', dark=False, sz='lg', href=ghurl, cls='ms-2 px-2'))
-    ftlinks = [A(k, href=v, cls='nav-link px-2 text-muted')
-        for k,v in dict(Home='/', Docs=docs, Company='https://www.answer.ai').items()]
+    _NavBarP = partial(P, cls=TextT.lg)
     return (
         Title(title),
-        Script('initTOC()'),
         Container(
-            Navbar('nav', selidx, items=navitems, ra_items=ra_items, cls='navbar-light bg-secondary rounded-lg',
-                image=f'/{logo}', hdr_href=fhurl, placement=PlacementT.Default, expand=SizeT.Md, toggle_left=False),
-            Toc(Container(H1(title, cls='pb-2 pt-1'), *c, cls='mt-3')),
-            BstFooter('© 2024 onwards AnswerDotAI, Inc', File(logo), img_href=fhurl, cs=ftlinks),
-        typ=ContainerT.Xl, cls='mt-3', data_bs_spy='scroll', data_bs_target='#toc'))
+            # NavBar
+            NavBarContainer(
+                NavBarLSide(
+                    NavBarNav(
+                        Li(A(Img(src=logo), href=fhurl)),
+                        *[Li(A(_NavBarP(k), href=v), cls='uk-active' if selidx==i else '') for i, (k,v) in enumerate(navitems[:-1])],
+                        Li(A(_NavBarP('Limits', href='#'), disabled=True, uk_tooltip='No limits!')))),
+                NavBarRSide(
+                    NavBarNav(
+                        Li(A(_NavBarP("Theme"))),DropDownNavContainer(Div(Uk_theme_switcher(), cls='p-6 uk-drop-close'), cls='w-96'),
+                        Li(_A(_NavBarP('Docs'), href=docs)), 
+                        Li(_A(_NavBarP(UkIcon('github')), href=ghurl)))),
+                cls='bg-green-400/70 rounded-lg rounded-tl-3xl shadow-md p-2 px-4'),
+            # Main Content
+            Container(
+                Grid(
+                    Div(NavContainer(*[Li(A(h2, href=f'#sec{i+1}')) for i,h2 in enumerate(h2s)],
+                        sticky=True, uk_scrollspy_nav=True), cls='hidden md:block col-span-1'),
+                    Div(H1(title, cls='mb-12'), *c, cls='col-span-12 md:col-span-5'),
+                    cols=6)),
+            # Footer
+            DividerLine(),
+            Grid(
+                    P("© 2024 onwards AnswerDotAI, Inc", cls=TextPresets.muted_lg),
+                    DivCentered(A(Img(src=logo, height=24), href=fhurl)),
+                    DivRAligned(A("Home"), 
+                                _A("Docs",href='https://docs.fastht.ml/'), 
+                                _A("Company", href='https://www.answer.ai/'), cls=TextPresets.muted_lg+'space-x-4'),
+                ),
+                cls='py-8 mb-4' + ContainerT.xl))
 
 def Sections(h2s, texts):
     colors = 'yellow', 'pink', 'teal', 'blue'
-    div_cls = 'py-2 px-3 mt-4 bg-light-{} rounded-tl-lg'
+    div_cls = 'py-2 px-3 mt-4 mb-2 bg-{}-400/70 shadow-md rounded-lg rounded-tl-3xl' #bg-{}-100
     return chain([Div(H2(h2, id=f'sec{i+1}', cls=div_cls.format(colors[i%4])), Div(txt, cls='px-2'))
                   for i,(h2,txt) in enumerate(zip(h2s, texts))])

assets/hl-styles.css

@@ -4,7 +4,7 @@ def page():
     h2s = 'Why', 'How', 'The future'
     txts = [Markdown(s1), Markdown(s2), Markdown(s3)]
     secs = Sections(h2s, txts)
-    return BstPage(4, "Python HTML components", *secs)
+    return BstPage(4, "Python HTML components", h2s, *secs)
 
 s1 = """
 FastHTML embeds HTML generation inside Python code. The idea of embedding an HTML generator inside a programming language is not new. It is a particularly popular approach in functional languages, and includes libraries like: Elm-html (Elm), hiccl (Common Lisp), hiccup (Clojure), Falco.Markup (F#), Lucid (Haskell), and dream-html (OCaml). But the idea has now gone far beyond the functional programming world--- JSX, an embedded HTML generator for React, is one of the most popular approaches for creating web apps today.

assets/styles.css

@@ -1,9 +1,9 @@
 from app import *
 
 def page():
-    secs = Sections(('ASGI', 'HTMX', 'HTTP', 'HTML/CSS/JS'),
-                    map(Markdown, [s1, s2, s3, s4]))
-    return BstPage(2, 'The foundations of FastHTML', *secs)
+    h2s = 'ASGI', 'HTMX', 'HTTP', 'HTML/CSS/JS'
+    secs = Sections(h2s, map(Markdown, [s1, s2, s3, s4]))
+    return BstPage(2, 'The foundations of FastHTML', h2s, *secs)
 
 s1 = """
 FastHTML brings together and builds on top of two well-established, astonishingly flexible, performant technology frameworks: *ASGI* (implemented in Uvicorn and Starlette), and *HTMX*.
@@ -63,7 +63,7 @@ def page():
 s4 = """
 In the previous section, the server responded with the body "`hello`". But in practice, web server responses today generally are either HTML or JSON. With FastHTML (as we'll see in the [HTMX technology section](/tech#sec2)), our responses are nearly always HTML. Here's an example of a basic HTML page with a header and a body containing a paragraph (`<p>` tag).
 
-```
+```html
 <html>
   <head><title>Example</title></head>
   <body><p>Hello World!</p></body>

components.py

@@ -1,14 +1,15 @@
-from fh_bootstrap import *
 import vision, overview, foundations, tech, components
+from fasthtml.common import *
+from monsterui.all import *
 
 hdrs = (
-    Link(href='/assets/hl-styles.css', rel='stylesheet'),
-    Link(href='/assets/styles.css', rel='stylesheet'),
+    *Theme.blue.headers(highlightjs=True),
+    Script(src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/languages/html.min.js"),
     *Socials(title='About FastHTML', description='Learn the foundations of FastHTML', site_name='about.fastht.ml',
-             twitter_site='@answerdotai', image=f'/assets/og-sq.png', url='')
+             twitter_site='@answerdotai', image=f'/assets/og-sq.png', url=''),
 )
 
-app,rt = fast_app(pico=False, hdrs=bst_hdrs+hdrs, live=False)
+app,rt = fast_app(pico=False, hdrs=hdrs, live=False)
 
 app.get('/')(overview.page)
 app.get('/components')(components.page)

foundations.py

@@ -2,11 +2,11 @@
 
 def page():
     caption = "'Real' web development shouldn't be this hard..."
-    fig = Image('/assets/webdev.jpg', alt='Web dev', caption=caption, left=False)
+    fig = Figure(DivCentered(Img(src='/assets/webdev.jpg', alt='Web dev'), Caption(caption, cls=TextT.lg+'pt-4')), cls='float-right w-1/2 m-4')
     h2s = 'Getting started', 'Background', 'Current Status'
     txts = [Markdown(s1), Div(fig, Markdown(s2)), Markdown(s3)]
     secs = Sections(h2s, txts)
-    return BstPage(0, 'About FastHTML', *secs)
+    return BstPage(0, 'About FastHTML', h2s, *secs)
 
 s1 = """
 FastHTML is a new way to create modern interactive web apps. It scales down to a 6-line python file, and scales up to complex production apps.  Auth, DBs, caching, styling, etc are all built-in, and replaceable and extensible. 1-click deploy is available to Railway, Vercel, Huggingface, and more---or deploy to any Python server or VPS, including Azure, GCP, and AWS.

main.py

@@ -1,5 +1,2 @@
-python-fasthtml>=0.1.11
-pygments
-markdown
-fh-bootstrap>=0.0.3
-
+python-fasthtml
+monsterui

overview.py

@@ -4,7 +4,7 @@ def page():
     h2s = 'Python', 'HTMX', 'Uvicorn', 'Starlette', 'SQLite'
     txts = [Markdown(s1), Markdown(s2), Markdown(s3), Markdown(s4), Markdown(s5)]
     secs = Sections(h2s, txts)
-    return BstPage(3, "FastHTML's tech stack", *secs)
+    return BstPage(3, "FastHTML's tech stack", h2s, *secs)
 
 s1 = """
 Many of the largest software systems in the world are built using Python, such as much of the code for YouTube, Instagram, Dropbox, and many others. In 2019, Dropbox announced that python was their "most widely used language both for backend services and the desktop client app", with 4 million lines of code.
@@ -21,7 +21,7 @@ def page():
 
 An alternative "hypermedia-based" approach, used by [HTMX](https://htmx.org/), simplifies things greatly by just returning HTML. FastHTML is designed to create hypermedia applications. Nearly all of the complexity of client-server programming vanishes when using this approach. When going to a page directly, the server will respond with a standard HTML web page:
 
-```
+```html
 <html>
   <head><title>FastHTML Page</title></head>
   <body>
@@ -39,7 +39,7 @@ def get(): return Div(P('Hello World!'), hx_get="/change")
 
 When clicking on this link, the server will respond with an "*HTML partial*"---that is, just a snippet of HTML which will be inserted into the existing page:
 
-```
+```html
 <p>Nice to be here!</p>
 ```
 

requirements.txt

@@ -2,11 +2,11 @@
 
 def page():
     caption = "A minimal FastHTML app really is minimal."
-    fig = Image('assets/hello.png', alt='Web dev', caption=caption, left=False, retina=True)
+    fig = Figure(DivCentered(Img(src='assets/hello.png', alt='Web dev', cls='h-60'), Caption(caption, cls=TextT.lg+'pt-2')), cls='float-right m-2')
     h2s = 'No compromise', 'Scaling down', 'Scaling up'
     txts = [Markdown(s1), Div(fig, Markdown(s2)), Markdown(s3)]
     secs = Sections(h2s, txts)
-    return BstPage(1, 'The FastHTML Vision', *secs)
+    return BstPage(1, 'The FastHTML Vision', h2s, *secs)
 
 s1 = """FastHTML is a general-purpose full-stack web programming system, in the same vein as Django, NextJS, and Ruby on Rails. The vision is to make it the easiest way to create quick prototypes, and **also** the easiest way to create scalable, powerful, rich applications.