Reflex 0.6.4

.gitignore

@@ -3,4 +3,4 @@
 .venv
 .web
 __pycache__/
-assets/external/
+assets/external/

README.md

@@ -1,7 +1,7 @@
 # Calendario de aDEViento Web
 
 [![Python](https://img.shields.io/badge/Python-3.11+-yellow?style=for-the-badge&logo=python&logoColor=white&labelColor=101010)](https://python.org)
-[![Reflex](https://img.shields.io/badge/Reflex-0.3.6+-5646ED?style=for-the-badge&logo=python&logoColor=white&labelColor=101010)](https://reflex.dev)
+[![Reflex](https://img.shields.io/badge/Reflex-0.6.4+-5646ED?style=for-the-badge&logo=python&logoColor=white&labelColor=101010)](https://reflex.dev)
 [![NES.css](https://img.shields.io/badge/NES.css-2.3.0-007bff?style=for-the-badge&logo=css3&logoColor=white&labelColor=101010)](https://nostalgic-css.github.io/NES.css)
 [![Vercel](https://img.shields.io/badge/Vercel-static-gray?style=for-the-badge&logo=vercel&logoColor=white&labelColor=101010)](https://vercel.com)
 

adeviento_web/adeviento_web.py

@@ -20,18 +20,17 @@ def index() -> rx.Component:
         rx.script("document.documentElement.lang='es'"),
         rx.script(src="/js/snow.js"),
         navbar(),
-        rx.center(
-            rx.vstack(
-                header(),
-                calendar(),
-                partners(),
-                instructions(),
-                author(),
-                footer(),
-                github(),
-                width="100%",
-                spacing=Size.VERY_BIG.value
-            )
+        rx.vstack(
+            header(),
+            calendar(),
+            partners(),
+            instructions(),
+            author(),
+            footer(),
+            github(),
+            align="center",
+            width="100%",
+            spacing=Size.VERY_BIG.value
         )
     )
 
@@ -67,5 +66,3 @@ def index() -> rx.Component:
         {"name": "twitter:site", "content": "@mouredev"}
     ]
 )
-
-app.compile()

adeviento_web/components/button.py

@@ -2,11 +2,11 @@
 
 
 def button(text: str, url: str) -> rx.Component:
-    return rx.link(
-        rx.button(
-            text,
-            class_name="nes-btn is-error"
-        ),
-        href=url,
-        is_external=True
+    return rx.el.button(
+        text,
+        class_name="nes-btn is-error",
+        on_click=rx.redirect(
+            url,
+            external=True
+        )
     )

adeviento_web/components/github.py

@@ -8,18 +8,18 @@ def github() -> rx.Component:
 
         rx.vstack(
             rx.vstack(
-                rx.span(
+                rx.el.span(
                     "Proyecto"
                 ),
-                rx.span(
+                rx.el.span(
                     "en GitHub"
                 ),
                 align_items="start",
                 class_name="nes-balloon from-right is-dark",
                 margin_bottom=Size.BIG.value
             ),
             rx.box(
-                rx.span(
+                rx.el.span(
                     constants.VERSION,
                     class_name="is-error"
                 ),

adeviento_web/components/header_text.py

@@ -13,5 +13,6 @@ def header_text(icon: str, text: str, dark=True) -> rx.Component:
             color=TextColor.ACCENT.value if dark else TextColor.SECONDARY.value
         ),
         spacing=Size.DEFAULT.value,
-        padding_bottom=Size.BUTTON.value
+        padding_bottom=Size.BUTTON.value,
+        align="center"
     )

adeviento_web/components/link_icon.py

@@ -2,9 +2,11 @@
 
 
 def link_icon(icon: str, url: str) -> rx.Component:
-    return rx.link(
+    return rx.el.i(
         "",
         class_name=f"nes-icon {icon} is-medium",
-        href=url,
-        is_external=True
+        on_click=rx.redirect(
+            url,
+            external=True
+        )
     )

adeviento_web/constants.py

@@ -1,4 +1,4 @@
-VERSION = "2.1.0"
+VERSION = "2.2.0"
 
 MOUREDEV_URL = "https://moure.dev"
 

adeviento_web/styles/colors.py

@@ -4,7 +4,7 @@
 class Color(Enum):
     ACCENT = "#EA5940"
     PRIMARY = "#212529"
-    SECONDARY = "#D3D3D3",
+    SECONDARY = "#D3D3D3"
     TERTIARY = "#37946E"
 
 

adeviento_web/styles/styles.py

@@ -26,21 +26,21 @@ class Size(Enum):
     "font_family": Font.DEFAULT.value,
     "color": TextColor.PRIMARY.value,
     "background": Color.PRIMARY.value,
-    rx.Heading: {
+    rx.heading: {
         "font_family": Font.DEFAULT.value,
         "color": TextColor.ACCENT.value
     },
-    rx.Link: {
+    rx.link: {
         "text_decoration": "none",
         "_hover": {
             "color": TextColor.ACCENT.value,
             "text_decoration": "none"
         }
     },
-    rx.Span: {
+    rx.el.span: {
         "font_size": Size.MEDIUM.value
     },
-    rx.Button: {
+    rx.button: {
         "margin_bottom": Size.DEFAULT.value,
         "height": Size.BUTTON.value,
         "color": f"{TextColor.SECONDARY.value} !important",

adeviento_web/views/author.py

@@ -14,24 +14,25 @@ def author() -> rx.Component:
             "Hola, mi nombre es Brais Moure"
         ),
         rx.flex(
-            rx.avatar(
-                name="Brais Moure",
-                size="2xl",
+            rx.image(
                 src="avatar.jpg",
+                width="128px",
+                height="128px",
                 bg=Color.PRIMARY.value,
                 padding="2px",
-                border="4px",
-                border_color=Color.SECONDARY.value,
+                border=f"4px solid {str(Color.SECONDARY.value)}",
+                border_radius="50%",
                 margin_right=Size.SMALL.value,
                 margin_bottom=Size.SMALL.value
             ),
             rx.vstack(
-                rx.span(
-                    f"Soy ingeniero de software desde hace más de {_experience()} años."
+                rx.el.span(
+                    f"Soy ingeniero de software desde hace más de {
+                        _experience()} años."
                 ),
-                rx.span(
+                rx.el.span(
                     "En 2018 comencé a divulgar contenido sobre programación y desarrollo de software en redes sociales como ",
-                    rx.span(
+                    rx.el.span(
                         "@mouredev",
                         color=TextColor.ACCENT.value,
                         font_size=Size.DEFAULT.value
@@ -44,14 +45,14 @@ def author() -> rx.Component:
             ),
             align_items="start",
             spacing=Size.BIG.value,
-            direction=styles.FLEX_DIRECTION
+            flex_direction=styles.FLEX_DIRECTION
         ),
         style=styles.max_width_style
     )
 
 
 def _author_buttons() -> rx.Component:
-    return rx.stack(
+    return rx.flex(
         button(
             "YouTube",
             constants.YOUTUBE_URL
@@ -65,7 +66,7 @@ def _author_buttons() -> rx.Component:
             constants.DISCORD_URL
         ),
         align_items="start",
-        direction=styles.FLEX_DIRECTION
+        flex_direction=styles.FLEX_DIRECTION
     )
 
 

adeviento_web/views/calendar.py

@@ -37,10 +37,10 @@ def calendar() -> rx.Component:
             #     "Recordar",
             #     constants.DISCORD_EVENT_URL
             # ),
-            rx.span(
+            rx.el.span(
                 "• Los regalos son sorpresa, permanecerán ocultos hasta el día de su publicación. No olvides pasarte por aquí cada día para descubrir un nuevo sorteo."
             ),
-            rx.span(
+            rx.el.span(
                 "• Puedes seleccionar cada regalo para conocer a los ganadores una vez se haya publicado el nuevo sorteo (aparecerá en rojo)."
             ),
             class_name="nes-container is-dark",
@@ -95,7 +95,7 @@ def calendar() -> rx.Component:
         #     class_name="nes-container is-dark with-title",
         #     align_items="start"
         # ),
-        rx.responsive_grid(
+        rx.grid(
             *[
                 day(
                     number + 1,
@@ -110,7 +110,14 @@ def calendar() -> rx.Component:
                 day(number)
                 for _, number in enumerate(range(_current_day + 2, 25))
             ],
-            columns=[3, 3, 4, 5, 6],
+            columns=rx.breakpoints(
+                initial="2",
+                xs="3",
+                sm="4",
+                md="5",
+                lg="6",
+                xl="6"
+            ),
             spacing=Size.DEFAULT.value,
             width="100%",
             padding_y=Size.BIG.value

adeviento_web/views/footer.py

@@ -15,7 +15,7 @@ def footer() -> rx.Component:
                 ),
                 rx.link(
                     "Creado con ",
-                    rx.box(class_name="nes-icon is-small heart"),
+                    rx.el.i(class_name="nes-icon is-small heart"),
                     " (y gracias a ti) por MoureDev by Brais Moure",
                     href=constants.MOUREDEV_URL,
                     is_external=True,

adeviento_web/views/header.py

@@ -26,19 +26,19 @@ def header() -> rx.Component:
                     rx.text("Del 1 al 24 de diciembre."),
                     class_name="nes-balloon from-left is-dark"
                 ),
-                rx.span(
+                rx.el.span(
                     "Por cuarto año, ¡aquí está el calendario de adviento sorpresa de nuestra ",
-                    rx.span(
+                    rx.el.span(
                         "comunidad de developers",
                         color=TextColor.ACCENT.value,
                         font_size=Size.DEFAULT.value
                     ),
                     "!"
                 ),
-                rx.span(
+                rx.el.span(
                     "Una actividad en la que cada día sortearé un regalo relacionado con programación y desarrollo de software (libros, cursos…)."
                 ),
-                rx.span(
+                rx.el.span(
                     "Su finalidad es ayudar a compartir conocimiento y fomentar el aprendizaje en comunidad."
                 ),
                 button(
@@ -53,7 +53,7 @@ def header() -> rx.Component:
                 ),
                 align_items="start"
             ),
-            direction=styles.FLEX_DIRECTION
+            flex_direction=styles.FLEX_DIRECTION
         ),
         padding_top=Size.VERY_BIG.value,
         style=styles.max_width_style

adeviento_web/views/instructions.py

@@ -13,18 +13,23 @@ def instructions() -> rx.Component:
                 class_name="title",
                 color=TextColor.ACCENT.value
             ),
-            rx.span(
-                "• Del 1 al 24 de diciembre descubriré cada día un nuevo regalo en el calendario."),
-            rx.span("• Puedes participar desde cualquier parte del mundo."),
-            rx.span("• Sólo tendrás que hacer Retweet a la publicación que enlazaré desde esta web. Tu cuenta de Twitter/X tiene que ser pública."),
+            rx.el.span(
+                "• Del 1 al 24 de diciembre descubriré cada día un nuevo regalo en el calendario."
+            ),
+            rx.el.span(
+                "• Puedes participar desde cualquier parte del mundo."
+            ),
+            rx.el.span(
+                "• Sólo tendrás que hacer Retweet a la publicación que enlazaré desde esta web. Tu cuenta de Twitter/X tiene que ser pública."
+            ),
             button(
                 "Twitter/X",
                 constants.TWITTER_URL
             ),
-            rx.span(
+            rx.el.span(
                 "• Al día siguiente realizaré el sorteo de forma pública y compartiré el ganador en la web y en Twitter/X."
             ),
-            rx.span(
+            rx.el.span(
                 "• ¡Vuelta a empezar! Publicaré un nuevo regalo y comenzará de nuevo el proceso."
             ),
             class_name="nes-container is-dark with-title",

adeviento_web/views/navbar.py

@@ -29,6 +29,7 @@ def navbar() -> rx.Component:
                 "github",
                 constants.GITHUB_URL
             ),
+            align="center",
             width="100%"
         ),
         bg=Color.PRIMARY.value,

adeviento_web/views/partners.py

@@ -12,7 +12,7 @@ def partners() -> rx.Component:
                 "Con la ayuda de",
                 False
             ),
-            rx.responsive_grid(
+            rx.grid(
                 _partner_link(
                     "elgato.png",
                     "https://e.lga.to/MoureDev",
@@ -33,13 +33,21 @@ def partners() -> rx.Component:
                     "https://mouredev.pro",
                     "mouredev pro"
                 ),
-                columns=[2, 2, 4, 4],
+                columns=rx.breakpoints(
+                    initial="2",
+                    xs="2",
+                    sm="4",
+                    md="4",
+                    lg="4",
+                    xl="4"
+                ),
                 spacing=Size.VERY_BIG.value
             ),
             padding_y=Size.VERY_BIG.value,
             style=styles.max_width_style
         ),
         bg=Color.ACCENT.value,
+        align="center",
         width="100%"
     )