Merge pull request #20 from Appsilon/app-content

feat: improve app content and add css

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")

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

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"),
     )

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")

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;
+}