ENG-6355: template for highlight pages

pcweb/components/docpage/navbar/navbar.py

@@ -271,7 +271,7 @@ def new_resource_section():
         {"label": "Newsletter", "url": "https://reflex.dev/#newsletter", "icon": "mails"},
         {"label": "Blog", "url": "/blog", "icon": "library-big"},
         {"label": "Affiliates", "url": "/affiliates", "icon": "network"},
-        {"label": "Use Cases", "url": "/docs/ai-builder/overview/use-cases", "icon": "list-checks"},
+        {"label": "Use Cases", "url": "/use-cases", "icon": "list-checks"},
     ]
 
     _open_source_items = [

pcweb/components/docpage/sidebar/sidebar_items/learn.py

@@ -18,7 +18,6 @@ def get_sidebar_items_learn():
                 getting_started.project_structure,
                 getting_started.dashboard_tutorial,
                 getting_started.chatapp_tutorial,
-                getting_started.use_cases,
             ],
         ),
         create_item(

pcweb/pages/__init__.py

@@ -1,6 +1,7 @@
 from pcweb.route import Route
 from .affiliates import affiliates as affiliates
 from .databricks import databricks as databricks
+from .use_cases import use_cases as use_cases
 from .blog import blog_routes
 from .customers.data.customers import customers_routes
 from .customers.landing import customers as customers

pcweb/pages/customers/views/footer.py

@@ -18,6 +18,7 @@
     LINKEDIN_URL,
 )
 
+from pcweb.pages.framework.views.footer_index import dark_mode_toggle
 
 def footer_link(text: str, href: str) -> rx.Component:
     return rx.link(
@@ -148,7 +149,9 @@ def footer_customer() -> rx.Component:
                     footer_link("Common Errors", errors.path),
                     footer_link("Roadmap", ROADMAP_URL),
                     footer_link("Forum", FORUM_URL),
-                    footer_link("Use Cases", "/docs/ai-builder/overview/use-cases"),
+                    footer_link("Use Cases", "/use-cases"),
+                    rx.box(class_name="grow"),
+                    dark_mode_toggle(),
                 ],
                 class_name="!row-span-3 !border-t-0",
             ),

pcweb/pages/databricks/databricks.py

@@ -1,35 +1,14 @@
-
-import reflex as rx
-
 import flexdown
+import reflex as rx
 from pcweb.flexdown import xd2 as xd
-from pcweb.components.docpage.navbar import navbar
-from pcweb.pages.customers.views.footer import footer_customer
-from pcweb.views.bottom_section.bottom_section import bottom_section
-from pcweb.pages.framework.index_colors import index_colors
 
+from pcweb.templates.highlightpage import highlight_page
 
 document = flexdown.parse_file("pcweb/pages/databricks/databricks.md")
 
-def databricks_content():
+def databricks_content() -> rx.Component:
     return rx.box(xd.render(document, document.filename))
 
-
-@rx.page(route="/databricks", title="Databricks - Reflex")
-def databricks():
-    return rx.box(
-        rx.box(
-            index_colors(),
-            navbar(),
-            rx.el.main(
-                databricks_content(),
-                rx.box(class_name="flex-grow"),
-                class_name="w-full z-[1] relative flex flex-col justify-center mx-auto max-w-[640px] lg:px-0 px-4 pb-20",
-            ),
-            rx.box(class_name="h-[1px] bg-slate-3 w-full"),
-            bottom_section(),
-            footer_customer(),
-            class_name="relative flex flex-col justify-start items-center w-full h-full min-h-screen font-instrument-sans gap-4 mx-auto max-w-[64.19rem] lg:border-x border-slate-3 pt-24 lg:pt-48",
-        ),
-        class_name="relative overflow-hidden",
-    )
+@highlight_page(route="/databricks", title="Databricks - Reflex")
+def databricks_page():
+    return databricks_content()

pcweb/pages/use_cases/use_cases.py

@@ -0,0 +1,14 @@
+import flexdown
+import reflex as rx
+from pcweb.flexdown import xd2 as xd
+
+from pcweb.templates.highlightpage import highlight_page
+
+document = flexdown.parse_file("pcweb/pages/use_cases/use_cases.md")
+
+def use_cases_content() -> rx.Component:
+    return rx.box(xd.render(document, document.filename))
+
+@highlight_page(route="/use-cases", title="Use Cases - Reflex")
+def use_cases_page():
+    return use_cases_content()

pcweb/templates/highlightpage.py

@@ -0,0 +1,52 @@
+import reflex as rx
+
+from reflex.event import EventType
+from typing import Callable, Any
+from pcweb.components.docpage.navbar import navbar
+from pcweb.pages.customers.views.footer import footer_customer
+from pcweb.views.bottom_section.bottom_section import bottom_section
+from pcweb.pages.framework.index_colors import index_colors
+
+def highlight_page(
+    route: str | None = None,
+    title: str | None = None,
+    image: str | None = None,
+    description: str | None = None,
+    meta: list[Any] | None = None,
+    script_tags: list[Any] | None = None,
+    on_load: EventType[()] | None = None,
+) -> Callable[[Callable[[], rx.Component]], Callable[[], rx.Component]]:
+    """Decorator that wraps a page's main content in a consistent layout and registers it with rx.page."""
+
+    def decorator(page_func: Callable[[], rx.Component]) -> Callable[[], rx.Component]:
+        @rx.page(
+            route=route,
+            title=title,
+            image=image,
+            description=description,
+            meta=meta,
+            script_tags=script_tags,
+            on_load=on_load,
+        )
+        def wrapped_page() -> rx.Component:
+            content = page_func()
+            return rx.box(
+                rx.box(
+                    index_colors(),
+                    navbar(),
+                    rx.el.main(
+                        content,
+                        rx.box(class_name="flex-grow"),
+                        class_name="w-full z-[1] relative flex flex-col justify-center mx-auto max-w-[640px] lg:px-0 px-4 pb-20",
+                    ),
+                    rx.box(class_name="h-[1px] bg-slate-3 w-full"),
+                    bottom_section(),
+                    footer_customer(),
+                    class_name="relative flex flex-col justify-start items-center w-full h-full min-h-screen font-instrument-sans gap-4 mx-auto max-w-[64.19rem] lg:border-x border-slate-3 pt-24 lg:pt-48",
+                ),
+                class_name="relative overflow-hidden",
+            )
+
+        return wrapped_page
+
+    return decorator

pcweb/views/footer.py

@@ -174,7 +174,7 @@ def footer() -> rx.Component:
                     footer_link("Roadmap", ROADMAP_URL),
                     footer_link("Forum", FORUM_URL),
                     footer_link("Affiliates", "/affiliates"),
-                    footer_link("Use Cases", "/docs/ai-builder/overview/use-cases"),
+                    footer_link("Use Cases", "/use-cases"),
                     rx.box(class_name="grow"),
                     dark_mode_toggle(),
                 ],