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

Lines changed: 4 additions & 4 deletions
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

Lines changed: 38 additions & 230 deletions
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/bootstrap@5.3.3/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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy