diff --git a/app.py b/app.py index d6ab0ae..e84cc60 100644 --- a/app.py +++ b/app.py @@ -1,16 +1,26 @@ import sys +from pathlib import Path from loguru import logger -from shiny import App +from shiny import App, ui from pyshiny_template.settings import AppSettings -from pyshiny_template.view.root import get_ui, server +from pyshiny_template.view.root import get_dashboard_ui, server +# Setup settings and logger app_settings = AppSettings() logger.remove() logger.add(sys.stderr, level=app_settings.log_level) +# External resources, like CSS and JS files +# Can be moved to a separate file +google_fonts_tag = ui.TagList( + ui.tags.link(rel="stylesheet", href="https://fonts.googleapis.com/css2?family=Roboto"), + ui.tags.link(rel="stylesheet", href="https://fonts.googleapis.com/css2?family=Maven+Pro"), +) -app_ui = get_ui() +# Combine clean shiny UI with CSS and external resources +ui_with_css = ui.TagList(ui.tags.link(href="style.css", rel="stylesheet"), google_fonts_tag, get_dashboard_ui()) -app = App(app_ui, server) +app_dir = Path(__file__).parent +app = App(ui_with_css, server, static_assets=app_dir / "www") diff --git a/pyshiny_template/view/root/__init__.py b/pyshiny_template/view/root/__init__.py index 1ebb4e3..2a99138 100644 --- a/pyshiny_template/view/root/__init__.py +++ b/pyshiny_template/view/root/__init__.py @@ -1,2 +1,2 @@ -from .ui import get_ui # noqa F401 +from .ui import get_dashboard_ui # noqa F401 from .server import server # noqa F401 diff --git a/pyshiny_template/view/root/ui.py b/pyshiny_template/view/root/ui.py index e041a76..7c4f76f 100644 --- a/pyshiny_template/view/root/ui.py +++ b/pyshiny_template/view/root/ui.py @@ -1,11 +1,17 @@ from shiny import ui -def get_ui(): +def get_dashboard_ui() -> ui.Tag: return ui.page_fluid( - ui.panel_title("Hello world!"), - ui.div( - ui.p("This is a simple Shiny app."), - data_testid="main", + # We can't use styles with ui.panel_title hance the use of ui.h1 and ui.tags.title + ui.head_content(ui.tags.title("Tapyr by Appsilon")), + ui.h1( + ui.span("Tapyr", style="color: #0099f9;"), + " | PyShiny Template by ", + ui.span("Appsilon", style="color: #0099f9;"), ), + ui.card( + ui.p("Check out the ", ui.a("documentation", href=""), " for quick start guide."), + ), + ui.card_footer("By Appsilon with 💙", data_testid="footer"), ) diff --git a/tests/playwirght/test_ui.py b/tests/playwirght/test_ui.py index effcaf4..2c5fe9c 100644 --- a/tests/playwirght/test_ui.py +++ b/tests/playwirght/test_ui.py @@ -2,6 +2,6 @@ from playwright.sync_api import Page, expect -def test_div_main(page: Page): +def test_footer(page: Page): page.goto(APP_URL) - expect(page.get_by_test_id("main")).to_contain_text("This is a simple Shiny app.") + expect(page.get_by_test_id("footer")).to_contain_text("By Appsilon") diff --git a/www/style.css b/www/style.css new file mode 100644 index 0000000..1bfe221 --- /dev/null +++ b/www/style.css @@ -0,0 +1,11 @@ +body { + font-family: 'Roboto', sans-serif; + background-color: #f0f6ff; + color: #333333; +} +h1 { + font-family: 'Maven Pro', sans-serif; + color: #333333; + font-size: 1.9rem; + font-weight: 600; +}