Example site using Reflexify

docs/app/app.py

@@ -0,0 +1,14 @@
+# Import the Reflex library and Reflexify modules
+import reflex as rx
+from .states.mainState import MainState
+from .helpers.css_helpers import CSSHelper
+from .router import set_application_routes
+
+# Create a new Reflex Application instance + pass in main state and app css
+app = rx.App(state=MainState, style=CSSHelper.__app_css__())
+
+# Call the router to get and set the pages to the application routes
+set_application_routes(app)
+
+# Compile the application and run
+app.compile()

docs/app/config.py

@@ -0,0 +1,41 @@
+app_configuration: dict = {
+    "site_name": "Reflexify",
+    "repo_name": "LineIndent/reflexify",
+    "repo_url": "https://github.com/LineIndent/reflexify",
+    "copy_right": "Copyright © 2022 - 2023 S. Ahmad P. Hakimi ",
+    "attribute": "Made with Reflex & Reflexify",
+    "drawer": True,
+    "theme": {
+        "primary": "black",
+        "secondary": "teal",
+        "font": "Helvetica",
+    },
+    "socials": {
+        "github": "https://github.com/LineIndent/reflexify",
+        "twitter": "https://twitter.com/getreflex",
+        "youtube": "https://www.youtube.com/playlist?list=PLDHA4931gtc7wHBDGQOYlmcpZm7qyici7",
+        "mastodon": "",
+        "discord": "https://discord.com/invite/T5WSbC2YtQ",
+    },
+    "navigation": {
+        "home": {
+            "getting started": "start.py",
+            "quick start": "run.py",
+            "creating your site": "create.py",
+            "publishing your site": "publish.py",
+        },
+        "setup": {
+            "setup": "setup.py",
+            "setting up navigation": "nav.py",
+            "setting up drawer": "drawer.py",
+            "changing the colors": "color.py",
+            "changing the fonts": "font.py",
+            "adding a git repository": "git.py",
+            "adding social media": "socials.py",
+        },
+        "material": {
+            "setup": "setup.py",
+            "accordions": "accordion.py",
+        },
+    },
+}

docs/app/core/__init__.py

@@ -0,0 +1 @@
+# from app.core.base import RxBasePage  # noqa: F401

docs/app/core/base.py

@@ -0,0 +1,109 @@
+# import the CSSHelper class to easily get application stylesheet
+from app.helpers.css_helpers import CSSHelper
+from app.helpers.app_config import Config
+
+# import the core componenets of the web application
+from app.core.header import RxHeader
+from app.core.left import RxLeft
+from app.core.right import RxRight
+from app.core.middle import RxMiddle
+from app.core.footer import RxFooter
+from app.core.drawer import RxDrawer
+from app.core.mobile import RxMobileNav
+
+# import the Reflex library
+import reflex as rx
+
+
+class RxBasePage:
+    def __init__(
+        self,
+        components: list,
+        left_navigation: rx.Component,
+        right_navigation: list,
+        mobile_navigation: list,
+        remove_drawer: bool = Config.__drawer__(),
+    ):
+        self.components = components
+        self.left_navigation = left_navigation
+        self.right_navigation = right_navigation
+        self.mobile_navigation = mobile_navigation
+        self.remove_drawer = remove_drawer
+
+        self.rx_main_stack = rx.vstack(style=CSSHelper.__base_css__())
+
+        self.rx_header = RxHeader().build()
+
+        nav = self.left_navigation
+        self.rx_left = (
+            RxLeft(
+                nav,
+                CSSHelper.__left_css__(),
+            )
+            if nav
+            else rx.vstack()
+        )
+
+        self.rx_mobile_nav = RxMobileNav(self.mobile_navigation) if nav else []
+
+        self.rx_right = RxRight(
+            self.right_navigation,
+            CSSHelper.__right_css__(),
+        )
+
+        self.rx_middle = RxMiddle(
+            self.components,
+            CSSHelper.__middle_css__(),
+        )
+
+        self.rx_footer = RxFooter(
+            CSSHelper.__footer_style_css__(),
+            CSSHelper.__footer_socials_css__(),
+        ).build()
+
+        self.rx_drawer = RxDrawer().build()
+
+        self.rx_base_components = (
+            [
+                self.set_desktop_layout(),
+                self.set_mobile_tablet_layout(),
+            ]
+            if self.remove_drawer
+            else [
+                self.rx_drawer,
+                self.set_desktop_layout(),
+                self.set_mobile_tablet_layout(),
+            ]
+        )
+
+    def set_desktop_layout(self):
+        return rx.desktop_only(
+            self.rx_header,
+            rx.hstack(
+                self.rx_left,
+                self.rx_middle,
+                self.rx_right,
+                width="100%",
+                align_items="start",
+            ),
+            self.rx_footer,
+            width="100%",
+        )
+
+    def set_mobile_tablet_layout(self):
+        return rx.mobile_and_tablet(
+            self.rx_header,
+            self.rx_mobile_nav,
+            rx.hstack(
+                self.rx_middle,
+                width="100%",
+                align_items="start",
+            ),
+            self.rx_footer,
+            width="100%",
+        )
+
+    def build(self):
+        self.rx_main_stack.children = self.rx_base_components
+
+        return self.rx_main_stack

docs/app/core/drawer.py

@@ -0,0 +1,57 @@
+import reflex as rx
+from app.states.drawerState import DrawerState
+from app.states.headerState import HeaderState
+from app.helpers.app_config import Config
+from app.helpers.nav_helpers import NavHelper
+from app.helpers.css_helpers import CSSHelper
+
+
+class RxDrawer:
+    def __init__(self):
+        self.repo_data = NavHelper.__get_repository__()
+        self.nav_panel = rx.vstack(
+            rx.foreach(HeaderState.withNav, router),
+            spacing="1.25rem",
+            align_items="start",
+        )
+
+        self.rx_drawer = rx.drawer(
+            rx.drawer_overlay(
+                rx.drawer_content(
+                    rx.hstack(
+                        rx.heading(Config.__site_name__(), size="lg"),
+                        style=CSSHelper.__drawer_heading_css__(),
+                    ),
+                    rx.hstack(
+                        self.repo_data,
+                        style=CSSHelper.__drawer_repo_css__(),
+                    ),
+                    rx.drawer_body(self.nav_panel),
+                    rx.drawer_footer(
+                        rx.button("Close", on_click=DrawerState.left),
+                    ),
+                ),
+            ),
+            is_open=DrawerState.show_left,
+            placement="left",
+        )
+
+    def build(self):
+        return self.rx_drawer
+
+
+def router(data: list[str]):
+    return rx.hstack(
+        NavHelper.__get_nav_link__(
+            title=data[0],
+            route_to=data[1],
+            size=15,
+            color=None,
+        ),
+        rx.spacer(),
+        rx.icon(
+            tag="arrow_forward",
+        ),
+        style=CSSHelper.__drawer_router_css__(),
+        on_click=[DrawerState.left, rx.redirect(data[1])],
+    )

docs/app/core/footer.py

@@ -0,0 +1,89 @@
+import reflex as rx
+from app.helpers.app_config import Config
+
+
+class RxFooter:
+    def __init__(self, style: dict, socials: dict):
+        self.style = style
+        self.socials = socials
+
+        self.rx_footer = rx.hstack(style=self.style)
+
+        self.attribution = rx.vstack(
+            rx.text(Config.__attribute__()),
+            rx.text(Config.__copy_right__()),
+            style=footer_css.get("attribute"),
+        )
+
+        self.socials = self.get_user_socials()
+
+        self.rx_footer_desktop = rx.desktop_only(
+            rx.hstack(self.attribution, rx.spacer(), self.socials),
+            style=footer_css.get("max_footer"),
+        )
+
+        self.rx_footer_tablet = rx.tablet_only(
+            rx.hstack(self.attribution, rx.spacer(), self.socials),
+            style=footer_css.get("min_footer"),
+        )
+
+        self.rx_footer_mobile = rx.mobile_only(
+            rx.hstack(
+                rx.vstack(
+                    self.attribution, self.socials, align_items="start", spacing="1rem"
+                )
+            ),
+            style=footer_css.get("min_footer"),
+        )
+
+        self.rx_footer_components = [
+            self.rx_footer_desktop,
+            self.rx_footer_tablet,
+            self.rx_footer_mobile,
+        ]
+
+    def get_user_socials(self):
+        stack = rx.hstack(spacing="2rem")
+        socials = Config.__all_social__()
+        if socials:
+            for name, url in socials.items():
+                if url:
+                    stack.children.append(
+                        rx.link(
+                            rx.html(
+                                self.socials.get(name),
+                                # on_click=rx.redirect(url),
+                                cursor="pointer",
+                            ),
+                            href=url,
+                            _hover={"text_decoration": "None"},
+                        )
+                    )
+
+        return stack
+
+    def build(self):
+        self.rx_footer.children = self.rx_footer_components
+        return self.rx_footer
+
+
+footer_css: dict = {
+    "attribute": {
+        "font_size": "80%",
+        "color": "white",
+        "transition": "all 550ms ease",
+        "align_items": "start",
+    },
+    "max_footer": {
+        "width": "100%",
+        "padding_left": ["", "", "", "4rem", "10rem"],
+        "padding_right": ["", "", "", "4rem", "10rem"],
+        "transition": "all 550ms ease",
+    },
+    "min_footer": {
+        "width": "100%",
+        "padding_left": ["2rem", "2rem", "2rem", "", ""],
+        "padding_right": ["2rem", "2rem", "2rem", "", ""],
+        "transition": "all 550ms ease",
+    },
+}