From 17811be37405f2c46b9ca52f51f0902e70078875 Mon Sep 17 00:00:00 2001 From: Will Chen Date: Sun, 9 Jun 2024 23:49:59 -0700 Subject: [PATCH] Configure custom fonts/stylesheets instead of hardcoding (fixes #364) (#395) --- mesop/examples/__init__.py | 1 + mesop/examples/custom_font.py | 9 +++++++++ mesop/features/page.py | 6 ++++++ mesop/runtime/runtime.py | 1 + mesop/server/static_file_serving.py | 13 +++++++++++++ mesop/web/src/app/editor/index.html | 15 +++------------ mesop/web/src/app/prod/index.html | 15 +++------------ 7 files changed, 36 insertions(+), 24 deletions(-) create mode 100644 mesop/examples/custom_font.py diff --git a/mesop/examples/__init__.py b/mesop/examples/__init__.py index e974b2631..5bba7f7a6 100644 --- a/mesop/examples/__init__.py +++ b/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 diff --git a/mesop/examples/custom_font.py b/mesop/examples/custom_font.py new file mode 100644 index 000000000..f94c89848 --- /dev/null +++ b/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")) diff --git a/mesop/features/page.py b/mesop/features/page.py index 16cc22a2f..2f5ebfb4b 100644 --- a/mesop/features/page.py +++ b/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(), diff --git a/mesop/runtime/runtime.py b/mesop/runtime/runtime.py index 46afd977a..18b307bda 100644 --- a/mesop/runtime/runtime.py +++ b/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 diff --git a/mesop/server/static_file_serving.py b/mesop/server/static_file_serving.py index f87a48de5..7121b3709 100644 --- a/mesop/server/static_file_serving.py +++ b/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'\n' ) + if ( + page_config + and page_config.stylesheets + and line.strip() == "" + ): + lines[i] = "\n".join( + [ + f'' + 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()) diff --git a/mesop/web/src/app/editor/index.html b/mesop/web/src/app/editor/index.html index dc4cf10c5..09912c988 100644 --- a/mesop/web/src/app/editor/index.html +++ b/mesop/web/src/app/editor/index.html @@ -5,23 +5,14 @@ Mesop + + - - - + diff --git a/mesop/web/src/app/prod/index.html b/mesop/web/src/app/prod/index.html index a38a1c6f2..f3fecce25 100644 --- a/mesop/web/src/app/prod/index.html +++ b/mesop/web/src/app/prod/index.html @@ -5,23 +5,14 @@ Mesop + + - - - +