Migrate off Chakra & Update Docker (#15)

* Update Docker * API changes to work w/ Reflex 0.5.4 * build(migrate off chakra) --------- Co-authored-by: Jacob Pieniazek <[email protected]>
jakepenzak · Jun 20, 2024 · ca62f36 · ca62f36
1 parent ed8ffc4
commit ca62f36
Show file tree

Hide file tree

Showing 21 changed files with 383 additions and 483 deletions.
diff --git a/.dockerignore b/.dockerignore
@@ -1,2 +1,8 @@
 .web
-__pycache__/*
+.git
+__pycache__/*
+Dockerfile
+Caddy.Dockerfile
+compose.yaml
+compose.*.yaml
+uploaded_files
diff --git a/Caddyfile b/Caddyfile
@@ -4,13 +4,13 @@ encode gzip
 
 @backend_routes path /_event/* /ping /_upload /_upload/*
 handle @backend_routes {
-        reverse_proxy app:8000
+	reverse_proxy app:8000
 }
 
 root * /srv
 route {
-        try_files {path} {path}/ /404.html
-        file_server
+	try_files {path} {path}/ /404.html
+	file_server
 }
 }
 

diff --git a/Dockerfile b/Dockerfile
diff --git a/compose.prod.yaml b/compose.prod.yaml
@@ -0,0 +1,25 @@
+# Use this override file to run the app in prod mode with postgres and redis
+#     docker compose -f compose.yaml -f compose.prod.yaml up -d
+services:
+  db:
+    image: postgres
+    restart: always
+    environment:
+      POSTGRES_PASSWORD: secret
+    volumes:
+       - postgres-data:/var/lib/postgresql/data
+
+  redis:
+    image: redis
+    restart: always
+
+  app:
+    environment:
+      DB_URL: postgresql+psycopg2://postgres:secret@db/postgres
+      REDIS_URL: redis://redis:6379
+    depends_on:
+      - db
+      - redis
+
+volumes:
+  postgres-data:
diff --git a/compose.tools.yaml b/compose.tools.yaml
@@ -0,0 +1,18 @@
+# Use this override file with `compose.prod.yaml` to run admin tools
+# for production services.
+#     docker compose -f compose.yaml -f compose.prod.yaml -f compose.tools.yaml up -d
+services:
+  adminer:
+    image: adminer
+    ports:
+      - 8080:8080
+
+  redis-commander:
+    image: ghcr.io/joeferner/redis-commander:latest
+    environment:
+    - REDIS_HOSTS=local:redis:6379
+    ports:
+    - "8081:8081"
+
+volumes:
+  redis-ui-settings:
diff --git a/compose.yml b/compose.yml
@@ -1,19 +1,29 @@
+# Base compose file production deployment of reflex app with Caddy webserver
+# providing TLS termination and reverse proxying.
+#
+# See `compose.prod.yaml` for more robust and performant deployment option.
+#
 # During build and run, set environment DOMAIN pointing
 # to publicly accessible domain where app will be hosted
 services:
   app:
     image: local/reflex-app
+    environment:
+      DB_URL: sqlite:///data/reflex.db
     build:
       context: .
-      args:
-        API_URL: https://${DOMAIN:-localhost}
+      dockerfile: prod.Dockerfile
+    volumes:
+       - db-data:/app/data
+       - upload-data:/app/uploaded_files
+    restart: always
 
   webserver:
     environment:
       DOMAIN: ${DOMAIN:-localhost}
     ports:
       - 443:443
-      - 80:80  # for acme-challenge via HTTP
+      - 80:80  # For acme-challenge via HTTP.
     build:
       context: .
       dockerfile: Caddy.Dockerfile
@@ -22,3 +32,11 @@ services:
     restart: always
     depends_on:
       - app
+
+volumes:
+  # SQLite data
+  db-data:
+  # Uploaded files
+  upload-data:
+  # TLS keys and certificates
+  caddy-data:
diff --git a/personal_website/components/footer.py b/personal_website/components/footer.py
@@ -11,40 +11,35 @@ def footer() -> rx.Component:
     Returns:
         rx.Component: The footer component.
     """
-    footer = rx.chakra.box(
-        rx.chakra.hstack(
-            rx.chakra.hstack(
-                rx.chakra.link(
-                    rx.chakra.image(src=asset_data.LINKEDIN_LOGO, height="3em"),
+    footer = rx.box(
+        rx.hstack(
+            rx.hstack(
+                rx.link(
+                    rx.image(src=asset_data.LINKEDIN_LOGO, height="3em"),
                     href=asset_data.LINKEDIN_URL,
-                    style=styles.FOOTER["FOOTER_ITEM_STYLE"],
                     is_external=True,
                 ),
-                rx.chakra.link(
-                    rx.chakra.image(src=asset_data.MEDIUM_LOGO, height="3em"),
+                rx.link(
+                    rx.image(src=asset_data.MEDIUM_LOGO, height="3em"),
                     href=asset_data.MEDIUM_URL,
-                    style=styles.FOOTER["FOOTER_ITEM_STYLE"],
                     is_external=True,
                 ),
-                rx.chakra.link(
-                    rx.chakra.image(src=asset_data.GITHUB_LOGO, height="3em"),
+                rx.link(
+                    rx.image(src=asset_data.GITHUB_LOGO, height="3em"),
                     href=asset_data.GITHUB_URL,
-                    style=styles.FOOTER["FOOTER_ITEM_STYLE"],
                     is_external=True,
                 ),
-                rx.chakra.link(
-                    rx.chakra.image(src=asset_data.EMAIL_LOGO, height="3em"),
+                rx.link(
+                    rx.image(src=asset_data.EMAIL_LOGO, height="3em"),
                     href=asset_data.CONTACT_URL,
-                    style=styles.FOOTER["FOOTER_ITEM_STYLE"],
                 ),
+                align="center",
             ),
             footer_logo(**styles.FOOTER["FOOTER_LOGO_STYLE"]),
-            justify="space-between",
-            color="#94a3b8",
-            align_items="top",
-            min_width="100%",
+            justify="between",
+            align="center",
+            **styles.FOOTER["FOOTER_STYLE"],
         ),
-        **styles.FOOTER["FOOTER_STYLE"],
     )
 
     return footer
@@ -60,8 +55,8 @@ def footer_logo(**style_props) -> rx.Component:
     Returns:
         rx.Component: The logo component.
     """
-    return rx.chakra.link(
-        rx.chakra.image(
+    return rx.link(
+        rx.image(
             src=asset_data.FOOTER_LOGO,
             **style_props,
         ),

diff --git a/personal_website/components/navbar.py b/personal_website/components/navbar.py
@@ -12,74 +12,60 @@ def navbar() -> rx.Component:
         rx.Component: The created navbar component.
     """
 
-    navbar = rx.chakra.vstack(
-        rx.chakra.box(
-            rx.chakra.hstack(
-                navbar_logo(**styles.NAVBAR["NAVBAR_LOGO_STYLE"]),
-                rx.chakra.spacer(),
-                rx.chakra.link(
+    navbar = rx.box(
+        rx.hstack(
+            navbar_logo(),
+            rx.spacer(),
+            rx.center(
+                rx.link(
                     "Articles",
                     href="/articles",
                     display=["none", "none", "none", "none", "flex", "flex"],
                     **styles.NAVBAR["NAVBAR_BUTTON_STYLE"],
                 ),
-                rx.chakra.link(
+                rx.link(
                     "Professional Resume",
                     href="/resume",
                     display=["none", "none", "none", "none", "flex", "flex"],
                     **styles.NAVBAR["NAVBAR_BUTTON_STYLE"],
                 ),
-                rx.chakra.link(
+                rx.link(
                     "Research",
                     href="/research",
                     display=["none", "none", "none", "none", "flex", "flex"],
                     **styles.NAVBAR["NAVBAR_BUTTON_STYLE"],
                 ),
-                rx.chakra.menu(
-                    rx.chakra.menu_button(
-                        rx.chakra.hstack(
-                            rx.chakra.text(
-                                "Projects", **styles.NAVBAR["NAVAR_MENU_BUTTON_STYLE"]
-                            ),
-                            rx.chakra.icon(
-                                tag="chevron_down",
-                                **styles.NAVBAR["NAVBAR_MENU_CHEVRON_STYLE"],
-                            ),
+                rx.menu.root(
+                    rx.menu.trigger(
+                        rx.button(
+                            rx.text("Projects", **styles.NAVBAR["NAVBAR_BUTTON_STYLE"]),
+                            rx.icon("chevron_down"),
+                            variant="ghost",
+                            radius="full",
                         ),
                         display=["none", "none", "none", "none", "flex", "flex"],
-                        width="8em",
-                        border="none",
-                        _hover={"text_decoration": "underline"},
                     ),
-                    rx.chakra.menu_list(
-                        rx.chakra.link(
-                            rx.chakra.menu_item(
-                                "About", **styles.NAVBAR["NAVBAR_DROPDOWN_STYLE"]
-                            ),
-                            href="/projects",
-                        ),
-                        rx.chakra.menu_divider(),
-                        rx.chakra.link(
-                            rx.chakra.menu_item(
-                                "Forthcoming", **styles.NAVBAR["NAVBAR_DROPDOWN_STYLE"]
-                            ),
-                            href="/projects",
-                        ),
+                    rx.menu.content(
+                        rx.menu.item(navbar_link("About", "/projects")),
+                        rx.divider(),
+                        rx.menu.item(navbar_link("Forthcoming", "/projects")),
                     ),
                 ),
                 menu_button(),
             ),
+            align="center",
             **styles.NAVBAR["NAVBAR_STYLE"],
         ),
-        position="sticky",
-        top="0",
-        z_index="999",
     )
 
     return navbar
 
 
-def navbar_logo(**style_props) -> rx.Component:
+def navbar_link(text: str, url: str) -> rx.Component:
+    return rx.link(rx.text(text, size="4", weight="medium"), href=url)
+
+
+def navbar_logo() -> rx.Component:
     """
     Create a Reflex logo component.
 
@@ -89,10 +75,10 @@ def navbar_logo(**style_props) -> rx.Component:
     Returns:
         rx.Component: The logo component.
     """
-    navbar_logo = rx.chakra.link(
-        rx.chakra.image(
+    navbar_logo = rx.link(
+        rx.image(
             src=asset_data.NAVBAR_LOGO,
-            **style_props,
+            height="4em",
         ),
         href="/",
     )
@@ -109,20 +95,20 @@ def menu_button() -> rx.Component:
     """
     pages = ["Articles", "Resume", "Research", "Projects"]
 
-    menu_button = rx.chakra.box(
-        rx.chakra.menu(
-            rx.chakra.menu_button(
-                rx.chakra.icon(tag="hamburger", size="4em"),
+    menu_button = rx.box(
+        rx.menu.root(
+            rx.menu.trigger(
+                rx.button(
+                    rx.icon("menu"),
+                    weight="medium",
+                    variant="ghost",
+                    size="3",
+                    color="#522181",
+                ),
             ),
-            rx.chakra.menu_list(
+            rx.menu.content(
                 *[
-                    rx.chakra.menu_item(
-                        rx.chakra.link(
-                            page,
-                            href=f"/{page.lower()}",
-                            width="100%",
-                        )
-                    )
+                    rx.menu.item(navbar_link(page, f"/{page.lower()}"))
                     for page in pages
                 ],
             ),