File size: 2,553 Bytes
ebec85b
 
9d8008e
 
 
 
 
 
ebec85b
 
9d8008e
 
 
b139dbe
 
 
 
 
 
 
9d8008e
ebec85b
9d8008e
 
 
 
 
ebec85b
9d8008e
 
 
ebec85b
 
b5bffcc
 
 
d1c33d3
 
 
b5bffcc
 
 
ebec85b
 
9d8008e
b139dbe
9d8008e
 
b139dbe
9d8008e
 
 
 
 
 
 
b139dbe
 
 
 
ebec85b
 
 
 
 
9d8008e
ebec85b
 
 
 
 
9d8008e
ebec85b
 
 
 
9d8008e
ebec85b
 
 
9d8008e
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
import importlib
from pathlib import Path

import fasthtml.common as fh
from fasthtml.common import A, Div, Table, Tbody, Td, Th, Thead, Tr

from tutorial import utils
from tutorial.example import Example

hdrs = (
    fh.MarkdownJS(),
    utils.HighlightJS(langs=["python", "javascript", "html", "css"]),
    *fh.Socials(
        title="HTMX examples with FastHTML",
        description="Reproduction of HTMX official examples with Python FastHTML",
        site_name="phihung-htmx-examples.hf.space",
        twitter_site="@hunglp",
        image="/social.png",
        url="https://phihung-htmx-examples.hf.space",
    ),
    utils.alpine(),
)
html_kv = {
    "x-data": "{darkMode: localStorage.getItem('darkMode') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')}",
    "x-init": "$watch('darkMode', val => localStorage.setItem('darkMode', val))",
    "x-bind:data-theme": "darkMode !== 'system'? darkMode : (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')",
}

app, rt = fh.fast_app(hdrs=hdrs, static_path="public", htmlkw=html_kv, surreal=False)

htmx_examples = sorted([f.stem for f in Path(__file__).parent.glob("htmx/*.py") if f.stem not in ["__init__"]])


INTRO = """
# HTMX examples with FastHTML

Reproduction of HTMX official [examples](https://htmx.org/examples/) with Python [FastHTML](https://docs.fastht.ml/).

The code can be found on [GitHub](https://github.com/phihung/fasthtml_examples).
"""


@app.get("/")
def homepage():
    ls = [get_example(name) for name in htmx_examples]
    return (
        fh.Title("HTMX examples with FastHTML"),
        fh.Main(cls="container")(
            Div(INTRO, cls="marked"),
            Div(
                "Choose theme ",
                fh.Select(style="display:inline-block;max-width:100px;", **{"x-model": "darkMode"})(
                    fh.Option("Light", value="light"),
                    fh.Option("Dark", value="dark"),
                ),
            ),
            Table(
                Thead(Tr(Th("Pattern"), Th("Description"))),
                Tbody(tuple(Tr(Td(A(ex.title, href="/" + ex.slug)), Td(ex.desc)) for ex in ls)),
            ),
        ),
    )


def get_app():
    for name in htmx_examples:
        get_example(name).create_routes(app)
    return app


def get_example(name):
    module = importlib.import_module(f"tutorial.htmx.{name}")
    return Example(module, name[4:])


def start():
    fh.serve("tutorial.__init__", app="get_app")


if __name__ == "__main__":
    fh.serve(app="get_app")