Se añade documentación

- Documentación del proyecto.
- Pequeños ajustes gráficos.
- Preview.
- Generación recursos estáticos para despliegue.

README.md

@@ -6,14 +6,38 @@
 [![Vercel](https://img.shields.io/badge/Vercel-static-gray?style=for-the-badge&logo=vercel&logoColor=white&labelColor=101010)](https://vercel.com)
 
 ## Proyecto web "Calendario de aDEViento" con Python puro y Reflex
+
+![https://adviento.dev](./images/preview.gif)
+
+> El "Calendario de aDEViento" es una actividad en la que cada día (durante el adviento) se sortea un regalo relacionado con programación y desarrollo de software (libros, cursos…). Su finalidad es ayudar a compartir conocimiento y fomentar el aprendizaje en comunidad.
+
 ### Visita [https://adviento.dev](https://adviento.dev)
 
 #### Desarrollo realizado en directo desde [Twitch](https://twitch.tv/mouredev)
 > ##### Si consideras útil el proyecto, apóyalo haciendo "★ Star" en el repositorio. ¡Gracias!
 
+## Tutorial
+
+*[Próximamente]* Publicaré un vídeo con todo el proceso de desarrollo y despliegue de la web.
+
+Sígueme en mi canal de YouTube secundario "[MoureDev TV](https://youtube.com/@mouredevtv)" para no perdértelo.
+
 ## Proyecto
 
-*[Próximamente]* Estructura e información del proyecto.
+Esta es la estructura general del proyecto.
+
+* **adeviento_web**: código fuente principal
+	* **adeviento_web.py**: index del sitio web
+	* **constants.py**: constantes utilizadas en el sitio
+	* **styles**: directorio de estilos (css, colores y fuentes)
+	* **views**: directorio de vistas (secciones gráficas)
+	* **components**: directorio de componentes (elementos gráficos con menor entidad que una vista)
+* **assets**: recursos gráficos y utilidades JavaScript (nive y cuenta atrás)
+* **rxconfig.py**: configuración principal del proyecto (por defecto)
+* **requirements.txt**: dependencias del proyecto para su ejecución
+* **assets**: recursos gráficos y utilidades JavaScript (nive y cuenta atrás)
+* **build.sh**: script de generación estática de la web para producción
+* **[generado] public**: empaquetado estático del proyecto que se despliega en producción (HTML, CSS, JS e imágenes)
 
 ## Configuración en local
 
@@ -67,15 +91,56 @@
 
 ## Despliegue
 
-*[Próximamente]* Información sobre el despliegue en Vercel.
+Para realizar el despliegue del proyecto se ha creado un archivo `build.sh` que se encarga de ejecutar el flujo necesario para generar el directorio `public` con todos los recursos estáticos que necesita el servidor web. 
+
+Todo el proceso de empaquetado para producción podría ser delegado en el servidor, pero el repositorio cuenta siempre con el directorio `public` para que así puedas revisar el contenido estático de la web sin necesidad de ejecutar el script `build.sh`.
+
+```bash
+source .venv/bin/activate
+pip install --upgrade pip
+pip install -r requirements.txt
+reflex init
+reflex export --frontend-only
+rm -fr public
+unzip frontend.zip -d public
+rm -f frontend.zip
+deactivate
+```
+
+*Básicamente, prepera el entorno, instala dependencias, inicializa el proyecto, crea la construcción de producción, y la descomprime.*
+
+> El proyecto se puede desplegar en cualquier proveedor o servidor que soporte recursos estáticos.
+> 
+> [adviento.dev](https://adviento.dev) se encuentra desplegado en [Vercel](https://vercel.com).
+
+Configuración en Vercel:
+
+* Se ha asociado el repositorio de GitHub al proyecto (para que cada `push` en la rama `main` desencadene un nuevo despliegue)
+* Build & Development Settings: Other
+* Root Directory: `public` (que contiene el empaquetado estático para producción)
+* Custom Domain: adviento.dev 
+
+## Recursos utilizados
+
+![Python](https://img.shields.io/github/stars/python/cpython?label=Python&style=social)
+![Reflex](https://img.shields.io/github/stars/reflex-dev/reflex?label=Reflex&style=social)
+![NES.css](https://img.shields.io/github/stars/nostalgic-css/NES.css?label=NES.css&style=social)
+![Vercel](https://img.shields.io/github/stars/vercel/vercel?label=Vercel&style=social)
+
+* Lenguaje: [Python](https://www.python.org/)
+* Framework: [Reflex](https://reflex.dev/)
+* CSS: [NES.css](https://nostalgic-css.github.io/NES.css/)
+* Fuente: [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P)
+* Hosting: [Vercel](https://vercel.com/)
 
 ## Curso de Python y Reflex
 
 <a href="https://github.com/mouredev/python-web"><img src="https://raw.githubusercontent.com/mouredev/python-web/main/Images/header.jpg"/></a>
 
-Curso gratis para aprender desarrollo frontend Web con Python puro desde cero con Reflex. Las tecnologías usadas para desarrollar el proyecto del "Calendario de aDEViento".
+Curso gratis para aprender desarrollo frontend Web con Python puro desde cero con Reflex. Las tecnologías usadas para desarrollar el proyecto del "Calendario de aDEViento". También tengo un curso de Python desde cero para principiantes.
 
-[![Curso Python](https://img.shields.io/github/stars/mouredev/python-web?label=Curso%20Python%20web&style=social)](https://github.com/mouredev/python-web)
+[![Curso Python Web](https://img.shields.io/github/stars/mouredev/python-web?label=Curso%20Python%20web&style=social)](https://github.com/mouredev/python-web)
+[![Curso Python](https://img.shields.io/github/stars/mouredev/hello-python?label=Curso%20Python&style=social)](https://github.com/mouredev/python-web)
 
 #### Puedes apoyar mi trabajo haciendo "☆ Star" en el repo o nominarme a "GitHub Star". ¡Gracias!
 

adeviento_web/adeviento_web.py

@@ -19,10 +19,10 @@ def index() -> rx.Component:
         rx.center(
             rx.vstack(
                 header(),
-                instructions(),
                 calendar(),
-                author(),
                 partners(),
+                instructions(),
+                author(),
                 footer(),
                 github(),
                 width="100%",
@@ -40,7 +40,11 @@ def index() -> rx.Component:
 app.add_page(
     index,
     title="Calendario de aDEViento 2023 | 24 días. 24 regalos.",
-    description="Por tercer año, ¡aquí está el calendario de adviento sorpresa de nuestra comunidad de developers! Del 1 al 24 de diciembre."
+    description="Por tercer año, ¡aquí está el calendario de adviento sorpresa de nuestra comunidad de developers! Del 1 al 24 de diciembre.",
+    image="preview.jpg",
+    meta=[
+        {"name": "twitter:card", "content": "summary_large_image"}
+    ]
 )
 
 app.compile()

adeviento_web/styles/styles.py

@@ -4,6 +4,7 @@
 from .colors import Color, TextColor
 
 MAX_WIDTH = "1000px"
+FLEX_DIRECTION = ["column", "column", "column", "row", "row"]
 
 
 class Size(Enum):

adeviento_web/views/author.py

@@ -38,29 +38,20 @@ def author() -> rx.Component:
                     ),
                     "."
                 ),
-                rx.mobile_only(
-                    rx.vstack(
-                        author_buttons()
-                    )
-                ),
-                rx.tablet_and_desktop(
-                    rx.hstack(
-                        author_buttons()
-                    )
-                ),
+                author_buttons(),
                 width="100%",
                 align_items="start"
             ),
             align_items="start",
             spacing=Size.BIG.value,
-            flex_direction=["column", "column", "column", "row", "row"]
+            direction=styles.FLEX_DIRECTION
         ),
         style=styles.max_width_style
     )
 
 
 def author_buttons() -> rx.Component:
-    return rx.box(
+    return rx.stack(
         button(
             "YouTube",
             constants.YOUTUBE_URL
@@ -72,7 +63,9 @@ def author_buttons() -> rx.Component:
         button(
             "Discord",
             constants.DISCORD_URL
-        )
+        ),
+        align_items="start",
+        direction=styles.FLEX_DIRECTION
     )
 
 

adeviento_web/views/calendar.py

@@ -11,13 +11,20 @@ def calendar() -> rx.Component:
     return rx.vstack(
         header_text(
             "heart",
-            "Calendario de aDEViento"
+            "Calendario"
         ),
         rx.vstack(
             rx.hstack(
-                rx.text("El evento comienza en "),
-                rx.text(id="countdown"),
-                align_items="start"
+                rx.text(
+                    "El evento comienza en",
+                    margin_right=Size.DEFAULT.value
+                ),
+                rx.text(
+                    id="countdown",
+                    margin_left=Size.ZERO.value
+                ),
+                align_items="start",
+                flex_direction=styles.FLEX_DIRECTION
             ),
             button(
                 "Recordar",

adeviento_web/views/footer.py

@@ -6,29 +6,32 @@
 
 def footer() -> rx.Component:
     return rx.hstack(
-        rx.vstack(
-            rx.text(
-                "Calendario de aDEViento 2023",
-                font_size=Size.MEDIUM.value,
-                margin_bottom=Size.ZERO.value
+        rx.center(
+            rx.vstack(
+                rx.text(
+                    "Calendario de aDEViento 2023",
+                    font_size=Size.MEDIUM.value,
+                    margin_bottom=Size.ZERO.value
+                ),
+                rx.link(
+                    "Creado con ",
+                    rx.box(class_name="nes-icon is-small heart"),
+                    " (y gracias a ti) por MoureDev by Brais Moure",
+                    href=constants.MOUREDEV_URL,
+                    is_external=True,
+                    font_size=Size.MEDIUM.value,
+                    color=TextColor.TERTIARY.value
+                ),
+                align_items="start",
+                spacing=Size.MEDIUM.value
             ),
-            rx.link(
-                "Creado con ",
-                rx.box(class_name="nes-icon is-small heart"),
-                " (y gracias a ti) por MoureDev by Brais Moure",
-                href=constants.MOUREDEV_URL,
-                is_external=True,
-                font_size=Size.MEDIUM.value,
-                color=TextColor.TERTIARY.value
+            rx.spacer(),
+            rx.image(
+                src="logo.png",
+                alt="Logo MoureDev. Una letra \"eme\" entre dos corchetes.",
+                class_name="nes-avatar is-large"
             ),
-            align_items="start",
-            spacing=Size.MEDIUM.value
-        ),
-        rx.spacer(),
-        rx.image(
-            src="logo.png",
-            alt="Logo MoureDev. Una letra \"eme\" entre dos corchetes.",
-            class_name="nes-avatar is-large"
+            width="100%"
         ),
         padding_bottom=Size.BIG.value,
         style=styles.max_width_style

adeviento_web/views/header.py

@@ -45,12 +45,11 @@ def header() -> rx.Component:
                     href=constants.ADEVIENTO_HASHTAG_URL,
                     is_external=True,
                     color=TextColor.TERTIARY.value,
-                    padding_top=Size.BIG.value,
-                    font_size=Size.MEDIUM.value
+                    padding_top=Size.BIG.value
                 ),
                 align_items="start"
             ),
-            flex_direction=["column", "column", "column", "row", "row"]
+            direction=styles.FLEX_DIRECTION
         ),
         padding_top=Size.VERY_BIG.value,
         style=styles.max_width_style

adeviento_web/views/navbar.py

@@ -10,8 +10,8 @@ def navbar() -> rx.Component:
             rx.image(
                 src="mouredev.png",
                 alt="Imagen pixel art de MoureDev con estilo navideño.",
-                width=Size.VERY_BIG.value,
-                height=Size.VERY_BIG.value
+                width="3em",
+                height="3em"
             ),
             rx.text("aDEViento 2023"),
             rx.spacer(),