Configure custom fonts/stylesheets instead of hardcoding (fixes #364)

mesop/examples/__init__.py

@@ -5,6 +5,7 @@
 from mesop.examples import buttons as buttons
 from mesop.examples import checkbox_and_radio as checkbox_and_radio
 from mesop.examples import composite as composite
+from mesop.examples import custom_font as custom_font
 from mesop.examples import docs as docs
 from mesop.examples import dynamic_values as dynamic_values
 from mesop.examples import error as error

mesop/examples/custom_font.py

@@ -0,0 +1,9 @@
+import mesop as me
+
+
+@me.page(
+  path="/custom_font",
+  stylesheets=["https://fonts.googleapis.com/css2?family=Tiny5&display=swap"],
+)
+def app():
+  me.text("custom font", style=me.Style(font_family="Tiny5"))

mesop/features/page.py

@@ -8,6 +8,7 @@ def page(
   *,
   path: str = "/",
   title: str | None = None,
+  stylesheets: list[str] | None = None,
   security_policy: SecurityPolicy | None = None,
   on_load: OnLoadHandler | None = None,
 ) -> Callable[[Callable[[], None]], Callable[[], None]]:
@@ -18,6 +19,7 @@ def page(
   Args:
     path: The URL path for the page. Defaults to "/".
     title: The title of the page. If None, a default title is generated.
+    stylesheets: List of stylesheet URLs to load.
     security_policy: The security policy for the page. If None, a default strict security policy is used.
     on_load: An optional event handler to be called when the page is loaded.
 
@@ -29,11 +31,15 @@ def decorator(func: Callable[[], None]) -> Callable[[], None]:
     def wrapper() -> None:
       return func()
 
+    # Note: this will be replaced downstream, so do not inline/rename.
+    default_stylesheets = []
+
     runtime().register_page(
       path=path,
       page_config=PageConfig(
         page_fn=wrapper,
         title=title or f"Mesop: {path}",
+        stylesheets=stylesheets or default_stylesheets,
         security_policy=security_policy
         if security_policy
         else SecurityPolicy(),

mesop/runtime/runtime.py

@@ -28,6 +28,7 @@ class EmptyState:
 class PageConfig:
   page_fn: Callable[[], None]
   title: str
+  stylesheets: list[str]
   security_policy: SecurityPolicy
   on_load: OnLoadHandler | None
 

mesop/server/static_file_serving.py

@@ -32,6 +32,7 @@ def get_path(path: str):
     return get_runfile_location(safe_path)
 
   def retrieve_index_html() -> io.BytesIO | str:
+    page_config = runtime().get_page_config(path=request.path)
     file_path = get_path("index.html")
     with open(file_path) as file:
       lines = file.readlines()
@@ -47,6 +48,18 @@ def retrieve_index_html() -> io.BytesIO | str:
           f'<script src="{livereload_script_url}" nonce={g.csp_nonce}></script>\n'
         )
 
+      if (
+        page_config
+        and page_config.stylesheets
+        and line.strip() == "<!-- Inject stylesheet (if needed) -->"
+      ):
+        lines[i] = "\n".join(
+          [
+            f'<link href="{stylesheet}" rel="stylesheet">'
+            for stylesheet in page_config.stylesheets
+          ]
+        )
+
     # Create a BytesIO object from the modified lines
     modified_file_content = "".join(lines)
     binary_file = io.BytesIO(modified_file_content.encode())

mesop/web/src/app/editor/index.html

@@ -5,23 +5,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Mesop</title>
     <base href="/" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0"
       rel="stylesheet"
     />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Google+Sans+Text:wght@400;500;700"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Google+Sans+Mono:wght@400;500;700"
-      rel="stylesheet"
-    />
     <link rel="stylesheet" href="./styles.css" />
+    <!-- Inject stylesheet (if needed) -->
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
   </head>
   <body>

mesop/web/src/app/prod/index.html

@@ -5,23 +5,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Mesop</title>
     <base href="/" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0"
       rel="stylesheet"
     />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Google+Sans+Text:wght@400;500;700"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Google+Sans+Mono:wght@400;500;700"
-      rel="stylesheet"
-    />
     <link rel="stylesheet" href="./styles.css" />
+    <!-- Inject stylesheet (if needed) -->
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
   </head>
   <body>