Skip to content

Commit 4a5c55c

Browse files
eadwinCodeeadwinCode
committed
refactor build context and bootstrap setup
1 parent f871ba5 commit 4a5c55c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+1432
-1187
lines changed

‎Makefile

+4-4
Original file line numberDiff line numberDiff line change
@@ -22,15 +22,15 @@ install-full: ## Install dependencies
2222
pre-commit install -f
2323

2424
lint:fmt ## Run code linters
25-
ruff check py_html
25+
ruff check py_html samples
2626
#mypy ellar_sql_admin
2727

2828
fmt format:clean ## Run code formatters
29-
ruff format py_html
30-
ruff check --fix py_html
29+
ruff format py_html samples
30+
ruff check --fix py_html samples
3131

3232
ruff-fix: ## Run Ruff fixer
33-
ruff check py_html --fix --unsafe-fixes
33+
ruff check py_html samples --fix --unsafe-fixes
3434

3535
test:clean ## Run tests
3636
pytest

‎README.md

+38-230
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,7 @@ Although there are Jinja and Mako in this space, I don't intend to make this lib
1212
## Quick Bootstrap Example
1313

1414
```python
15-
from py_html.contrib.bootstrap.button import BButton, BButtonGroup
16-
from py_html.contrib.bootstrap.breadcrumb import BBreadcrumb, BBreadcrumbItem
17-
from py_html.contrib.bootstrap.main import BootstrapHTML
1815
from py_html.el.base import render_component
19-
from py_html.contrib.bootstrap.icon import BIcon
20-
from py_html.contrib.bootstrap.avatar import BAvatar, BAvatarGroup
21-
from py_html.contrib.bootstrap.layout_grid_system import BContainer, BRow, BCol
22-
from py_html.styles import StyleCSS
2316
import py_html.el as el
2417

2518
from starlette.responses import HTMLResponse
@@ -30,244 +23,59 @@ from ellar.app import AppFactory
3023
from ellar_cli.main import create_ellar_cli
3124

3225

33-
def columns_example():
34-
return el.Fragment(
35-
BContainer(
36-
class_name="p-5 my-5 bg-primary text-white",
37-
content=el.Fragment(
38-
BRow(
39-
class_name="justify-content-md-center",
40-
content=[
41-
BCol(col=True, lg=2, content="1 of 3", style=StyleCSS(background_color="red")),
42-
BCol(cols="12", md="auto", content="Variable width content",
43-
style=StyleCSS(background_color="yellow")),
44-
BCol(col=True, lg=2, content="Variable width content",
45-
style=StyleCSS(background_color="pink")),
46-
]
47-
),
48-
BRow(
49-
content=[
50-
BCol(content="1 of 3", style=StyleCSS(background_color="orange")),
51-
BCol(cols="12", md="auto", content="Variable width content",
52-
style=StyleCSS(background_color="gray")),
53-
BCol(col=True, lg=2, content="Variable width content",
54-
style=StyleCSS(background_color="smoke")),
55-
]
56-
)
57-
)
58-
),
59-
)
60-
61-
def container_example():
62-
return el.Fragment(
63-
BContainer(
64-
fluid=True,
65-
content=(
66-
el.H1(content="Container Fluid"),
67-
el.P(content="This is some text."),
68-
)
69-
),
70-
BContainer(
71-
class_name="p-5 my-5 border",
72-
content=(
73-
el.H1(content="Container"),
74-
el.P(content="This is some text."),
75-
)
76-
),
77-
BContainer(
78-
class_name="p-5 my-5 bg-dark text-white",
79-
content=(
80-
el.H1(content="Container with Dark Color"),
81-
el.P(content="This is some text."),
82-
)
83-
),
84-
BContainer(
85-
class_name="p-5 my-5 bg-primary text-white",
86-
content=(
87-
el.H1(content="Container with Primary Color"),
88-
el.P(content="This is some text.")
89-
)
90-
),
91-
)
92-
93-
def avatar_example():
94-
return el.Fragment(
95-
BContainer(
96-
class_name=f"p-5 my-5 border",
97-
content=(
98-
el.H1(content="Avatars Examples"),
99-
el.Div(class_name="mt-2", content=(
100-
lambda ctx: BAvatar(text="Foo", class_name="mx-2", size="72px"),
101-
BAvatar(icon="people-fill", class_name="mx-2", size="72px"),
102-
BAvatar(
103-
icon="people-fill",
104-
class_name="mx-2",
105-
size="45px",
106-
badge='100',
107-
variant="primary",
108-
badge_variant="dark"
109-
),
110-
lambda ctx: BAvatar(
111-
icon="people-fill",
112-
class_name="mx-2",
113-
size="45px",
114-
badge=BIcon(icon_name="exclamation-circle-fill", variant="warning"),
115-
variant="danger",
116-
badge_variant="danger",
117-
badge_position="bottom-left"
118-
),
119-
)),
120-
el.Hr(),
121-
el.H1(content="Avatars Group Examples"),
122-
el.Div(class_name="mt-2", content=(
123-
BAvatarGroup(
124-
size=f"{i + 1 * 2}rem",
125-
over_lap=0.2,
126-
content=(
127-
BAvatar(text="Foo", size="72px"),
128-
BAvatar(icon="people-fill", size="72px"),
129-
BAvatar(
130-
icon="people-fill",
131-
size="45px",
132-
badge='100',
133-
variant="primary",
134-
badge_variant="dark"
135-
),
136-
lambda ctx: BAvatar(
137-
icon="people-fill",
138-
size="45px",
139-
badge=BIcon(icon_name="exclamation-circle-fill", variant="warning"),
140-
variant="danger",
141-
badge_variant="danger",
142-
badge_position="bottom-right"
143-
),
144-
)
145-
)
146-
for i in range(5)
147-
)),
148-
149-
)
150-
),
151-
)
152-
153-
def icon_example():
154-
return el.Fragment(
155-
BContainer(
156-
class_name="p-5 my-5 border",
157-
content=el.Div(
158-
class_name="h2 mb-0",
159-
content=(
160-
BIcon(icon_name="exclamation-circle-fill", class_name="mx-1", variant="success"),
161-
BIcon(icon_name="exclamation-circle-fill", class_name="mx-1", variant="warning"),
162-
BIcon(icon_name="exclamation-circle-fill", class_name="mx-1", variant="info"),
163-
BIcon(icon_name="exclamation-circle-fill", class_name="mx-1", variant="danger"),
164-
BIcon(icon_name="exclamation-circle-fill", class_name="mx-1", variant="primary"),
165-
BIcon(icon_name="exclamation-circle-fill", class_name="mx-1", variant="secondary"),
166-
BIcon(icon_name="exclamation-circle", class_name="mx-1 bg-info", variant="dark", ),
167-
BIcon(icon_name="bell-fill", class_name="border rounded p-2 mx-1", variant="dark"),
168-
)
169-
)
170-
),
171-
)
172-
173-
def breadcrumb_example():
174-
return el.Fragment(
175-
BContainer(
176-
class_name=f"p-5 my-5 border",
177-
content=(
178-
el.H1(content="Breadcrumb Examples"),
179-
el.Div(
180-
content=(
181-
BBreadcrumb(
182-
{"text": "Home", "href": "https://google.com"},
183-
{"text": "Posts", "href": "#"},
184-
{"text": 'Another Story', "active": True},
185-
),
186-
el.Hr(),
187-
BBreadcrumb(
188-
content=(
189-
BBreadcrumbItem(href="#foo", content="Foo"),
190-
BBreadcrumbItem(href="#bar", content="Bar"),
191-
BBreadcrumbItem(active=True, content="Baz"),
192-
)
193-
)
194-
)
195-
)
196-
)
197-
),
198-
)
199-
200-
def button_example():
201-
return el.Fragment(
202-
BContainer(
203-
class_name=f"p-5 my-5 border",
204-
content=(
205-
el.H1(content="Button Example"),
206-
el.Div(
207-
content=(
208-
(BButton(pill=True, variant=i, content=i, class_name="mx-2") for i in ["primary", "outline-secondary", "success", "outline-danger", "info"]),
209-
el.Hr(),
210-
(BButton(squared=True, variant=i, content=i, class_name="mx-2") for i in
211-
["primary", "outline-secondary", "success", "outline-danger", "info"]),
212-
el.Hr(),
213-
(BButton(variant=i, content=i, class_name="mx-2") for i in
214-
["primary", "secondary", "success", "danger", "warning", "info", "light", "dark"]),
215-
el.Hr(),
216-
(BButton(variant=f"outline-{i}", content=f"outline-{i}", class_name="mx-2") for i in
217-
["primary", "secondary", "success", "danger", "warning", "info", "light", "dark"]),
218-
el.Hr(),
219-
BButton(content="Link", variant="link", class_name="mx-2"),
220-
el.Hr(),
221-
(BButton(content=c, size=i, class_name="mx-2") for i,c in
222-
[("sm", "Small"), ("md","Medium"), ("lg","Large")]),
223-
el.Hr(),
224-
BButtonGroup(
225-
size="md",
226-
squared=True,
227-
content=(
228-
BButton(content="Button 1", variant="outline-primary"),
229-
BButton(content="Button 2", variant="outline-primary"),
230-
BButton(content="Button 3", variant="outline-primary")
231-
)
232-
)
233-
)
234-
)
235-
)
236-
),
237-
)
238-
239-
24026
router = ModuleRouter("/example")
24127

24228

24329
@router.get("/", response=HTMLResponse)
24430
def template():
245-
content = BootstrapHTML(
246-
content=[
247-
el.Body(
248-
content=[
249-
columns_example(),
250-
icon_example(),
251-
avatar_example(),
252-
breadcrumb_example(),
253-
button_example()
254-
]
255-
)
256-
]
31+
content = el.html(
32+
el.head(
33+
el.title("Example HTML"),
34+
lambda ctx: el.link(href=ctx.get("bootstrap_css", ""))
35+
),
36+
el.body(class_name="container py-4", *(
37+
el.header(
38+
class_name="pb-3 mb-4 border-bottom",
39+
*(
40+
el.a(href="/", class_name="d-flex align-items-center text-dark text-decoration-none"),
41+
el.span("Jumbotron example", class_name="fs-4")
42+
)
43+
),
44+
el.div(class_name="p-5 mb-4 bg-light rounded-3", *(
45+
el.div(class_name="container-fluid py-5", *(
46+
el.h1("Custom jumbotron", class_name="display-5 fw-bold"),
47+
el.p("""
48+
Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap.
49+
Check out the examples below for how you can remix and restyle it to your liking.
50+
""", class_name="col-md-8 fs-4"
51+
),
52+
el.button("Example button", class_name="btn btn-primary btn-lg", type="button")
53+
)),
54+
)),
55+
el.footer("© 2024", class_name="pt-3 mt-4 text-muted border-top")
56+
))
25757
)
25858

259-
return render_component(content, {})
59+
return render_component(content, {
60+
"bootstrap_css": "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css",
61+
})
26062

26163

262-
def bootstrap():
64+
def app_bootstrap():
26365
application = AppFactory.create_app(routers=[router])
26466
return application
26567

26668

267-
cli = create_ellar_cli("bootstrap_exercise:bootstrap")
69+
cli = create_ellar_cli("readme:app_bootstrap")
26870

26971
if __name__ == "__main__":
27072
cli()
27173
```
74+
Start up command
75+
```shell
76+
python readme.py runserver --reload
77+
```
78+
79+
Visit [http://127.0.0.1:8000/example/](http://127.0.0.1:8000/example/)
27280

273-
![Swagger UI](docs/images/pyhtml_example.gif)
81+
![Swagger UI](docs/images/readme.png)

0 commit comments

Comments
 (0)