diff --git a/.gitignore b/.gitignore index dd81a36..52e47bc 100644 --- a/.gitignore +++ b/.gitignore @@ -3,4 +3,4 @@ .venv .web __pycache__/ -assets/external/ \ No newline at end of file +assets/external/ diff --git a/README.md b/README.md index 917f37c..d042881 100644 --- a/README.md +++ b/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) diff --git a/adeviento_web/adeviento_web.py b/adeviento_web/adeviento_web.py index e693ff5..7e46770 100644 --- a/adeviento_web/adeviento_web.py +++ b/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() diff --git a/adeviento_web/components/button.py b/adeviento_web/components/button.py index 0ab44a3..dc40717 100644 --- a/adeviento_web/components/button.py +++ b/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 + ) ) diff --git a/adeviento_web/components/github.py b/adeviento_web/components/github.py index dcb98c4..dfb4f11 100644 --- a/adeviento_web/components/github.py +++ b/adeviento_web/components/github.py @@ -8,10 +8,10 @@ def github() -> rx.Component: rx.vstack( rx.vstack( - rx.span( + rx.el.span( "Proyecto" ), - rx.span( + rx.el.span( "en GitHub" ), align_items="start", @@ -19,7 +19,7 @@ def github() -> rx.Component: margin_bottom=Size.BIG.value ), rx.box( - rx.span( + rx.el.span( constants.VERSION, class_name="is-error" ), diff --git a/adeviento_web/components/header_text.py b/adeviento_web/components/header_text.py index bb1b1bc..cc914fa 100644 --- a/adeviento_web/components/header_text.py +++ b/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" ) diff --git a/adeviento_web/components/link_icon.py b/adeviento_web/components/link_icon.py index 55851d4..552835d 100644 --- a/adeviento_web/components/link_icon.py +++ b/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 + ) ) diff --git a/adeviento_web/constants.py b/adeviento_web/constants.py index 402ccc5..143b4f7 100644 --- a/adeviento_web/constants.py +++ b/adeviento_web/constants.py @@ -1,4 +1,4 @@ -VERSION = "2.1.0" +VERSION = "2.2.0" MOUREDEV_URL = "https://moure.dev" diff --git a/adeviento_web/styles/colors.py b/adeviento_web/styles/colors.py index fc030b9..07b7062 100644 --- a/adeviento_web/styles/colors.py +++ b/adeviento_web/styles/colors.py @@ -4,7 +4,7 @@ class Color(Enum): ACCENT = "#EA5940" PRIMARY = "#212529" - SECONDARY = "#D3D3D3", + SECONDARY = "#D3D3D3" TERTIARY = "#37946E" diff --git a/adeviento_web/styles/styles.py b/adeviento_web/styles/styles.py index 49e4dd8..4a61d57 100644 --- a/adeviento_web/styles/styles.py +++ b/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", diff --git a/adeviento_web/views/author.py b/adeviento_web/views/author.py index 6f8d952..0e14581 100644 --- a/adeviento_web/views/author.py +++ b/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 ) diff --git a/adeviento_web/views/calendar.py b/adeviento_web/views/calendar.py index b7e4d03..569c947 100644 --- a/adeviento_web/views/calendar.py +++ b/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 diff --git a/adeviento_web/views/footer.py b/adeviento_web/views/footer.py index 7269ee1..adfeb95 100644 --- a/adeviento_web/views/footer.py +++ b/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, diff --git a/adeviento_web/views/header.py b/adeviento_web/views/header.py index 79159fa..56e2f30 100644 --- a/adeviento_web/views/header.py +++ b/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 diff --git a/adeviento_web/views/instructions.py b/adeviento_web/views/instructions.py index c1c4684..522761b 100644 --- a/adeviento_web/views/instructions.py +++ b/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", diff --git a/adeviento_web/views/navbar.py b/adeviento_web/views/navbar.py index e9b12f2..076808d 100644 --- a/adeviento_web/views/navbar.py +++ b/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, diff --git a/adeviento_web/views/partners.py b/adeviento_web/views/partners.py index ff8a4a5..e66aed0 100644 --- a/adeviento_web/views/partners.py +++ b/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%" ) diff --git a/public/404.html b/public/404.html index fcd278b..5600639 100644 --- a/public/404.html +++ b/public/404.html @@ -1,22 +1 @@ -
e||125 >16&255,d[c++]=t>>8&255,d[c++]=255&t;return 2===i&&(t=a[e.charCodeAt(r)]<<2|a[e.charCodeAt(r+1)]>>4,d[c++]=255&t),1===i&&(t=a[e.charCodeAt(r)]<<10|a[e.charCodeAt(r+1)]<<4|a[e.charCodeAt(r+2)]>>2,d[c++]=t>>8&255,d[c++]=255&t),d}function p(e){return r[e>>18&63]+r[e>>12&63]+r[e>>6&63]+r[63&e]}function f(e,t,r){for(var a=[],n=t;n_?(j=C,C=null):j=C.sibling;var z=r(u,C,o[_],s);if(null===z){null===C&&(C=j);break}a&&C&&null===z.alternate&&b(u,C),i=f(z,i,_),null===x?w=z:x.sibling=z,x=z,C=j}if(_===o.length)return c(u,C),t8&&tg(u,_),w;if(null===C){for(;_g(j,C)?(a[o]=j,a[_]=i,o=_):(a[o]=C,a[x]=i,o=x);else if(_g(j,i))a[o]=j,a[_]=i,o=_;else break}}return u}function g(a,u){var i=a.sortIndex-u.sortIndex;return 0!==i?i:a.id-u.id}if("object"==typeof performance&&"function"==typeof performance.now){var i,o=performance;u.unstable_now=function(){return o.now()}}else{var s=Date,w=s.now();u.unstable_now=function(){return s.now()-w}}var x=[],C=[],_=1,j=null,z=3,P=!1,U=!1,V=!1,B="function"==typeof setTimeout?setTimeout:null,$="function"==typeof clearTimeout?clearTimeout:null,Y="undefined"!=typeof setImmediate?setImmediate:null;function G(a){for(var u=h(C);null!==u;){if(null===u.callback)k(C);else if(u.startTime<=a)k(C),u.sortIndex=u.expirationTime,f(x,u);else break;u=h(C)}}function H(a){if(V=!1,G(a),!U){if(null!==h(x))U=!0,I(J);else{var u=h(C);null!==u&&K(H,u.startTime-a)}}}function J(a,i){U=!1,V&&(V=!1,$(ee),ee=-1),P=!0;var o=z;try{for(G(i),j=h(x);null!==j&&(!(j.expirationTime>i)||a&&!M());){var s=j.callback;if("function"==typeof s){j.callback=null,z=j.priorityLevel;var w=s(j.expirationTime<=i);i=u.unstable_now(),"function"==typeof w?j.callback=w:j===h(x)&&k(x),G(i)}else k(x);j=h(x)}if(null!==j)var _=!0;else{var B=h(C);null!==B&&K(H,B.startTime-i),_=!1}return _}finally{j=null,z=o,P=!1}}"undefined"!=typeof navigator&&void 0!==navigator.scheduling&&void 0!==navigator.scheduling.isInputPending&&navigator.scheduling.isInputPending.bind(navigator.scheduling);var Z=!1,X=null,ee=-1,en=5,et=-1;function M(){return!(u.unstable_now()-etr&&(e+=" ... "),"e.length)throw RangeError("Index out of range")}function q(e,t,r,a,n,s){if(r+a>e.length||r<0)throw RangeError("Index out of range")}function W(e,t,r,a,s){return t=+t,r>>>=0,s||q(e,t,r,4,34028234663852886e22,-34028234663852886e22),n.write(e,t,r,a,23,4),r+4}function G(e,t,r,a,s){return t=+t,r>>>=0,s||q(e,t,r,8,17976931348623157e292,-17976931348623157e292),n.write(e,t,r,a,52,8),r+8}d.prototype.slice=function(e,t){var r=this.length;e=~~e,t=void 0===t?r:~~t,e<0?(e+=r)<0&&(e=0):e>r&&(e=r),t<0?(t+=r)<0&&(t=0):t>r&&(t=r),t0&&(e=this.toString("hex",0,t).match(/.{2}/g).join(" "),this.length>t&&(e+=" ... ")),"e.length)throw RangeError("Index out of range")}function _9(e,t,r,a){t<0&&(t=65535+t+1);for(var n=0,s=Math.min(e.length-r,2);n>>(a?n:1-n)*8}function _5(e,t,r,a){t<0&&(t=4294967295+t+1);for(var n=0,s=Math.min(e.length-r,4);n>>(a?n:3-n)*8&255}function Ie(e,t,r,a,n,s){if(r+a>e.length||r<0)throw RangeError("Index out of range")}function It(e,t,r,a,n){return n||Ie(e,t,r,4),_E(e,t,r,a,23,4),r+4}function Ir(e,t,r,a,n){return n||Ie(e,t,r,8),_E(e,t,r,a,52,8),r+8}_T.prototype.slice=function(e,t){var r,a=this.length;if(e=~~e,t=void 0===t?a:~~t,e<0?(e+=a)<0&&(e=0):e>a&&(e=a),t<0?(t+=a)<0&&(t=0):t>a&&(t=a),t>>=0,r=void 0===r?this.length:r>>>0,e||(e=0),"number"==typeof e)for(n=t;n