From ca65be066b22e26a04828cea1891e39a67005263 Mon Sep 17 00:00:00 2001
From: Phosphorus <fernando.n.p.d.moscu@gmail.com>
Date: Tue, 19 Sep 2023 01:37:56 -0300
Subject: [PATCH] feat: add some mdx files

---
 articles/bienvenido.md         |  6 ++++++
 src/components/blog_content.rs | 33 +++++++++++++++++++++++++++---
 src/components/mdx/center.rs   |  6 ++++++
 src/components/mdx/mod.rs      |  2 ++
 src/components/mdx/youtube.rs  | 18 +++++++++++++++++
 src/components/mod.rs          |  1 +
 src/pages/home.rs              | 37 +++++++++++++++++++++++++++++++---
 7 files changed, 97 insertions(+), 6 deletions(-)
 create mode 100644 src/components/mdx/center.rs
 create mode 100644 src/components/mdx/mod.rs
 create mode 100644 src/components/mdx/youtube.rs

diff --git a/articles/bienvenido.md b/articles/bienvenido.md
index 8fb6792..164f416 100644
--- a/articles/bienvenido.md
+++ b/articles/bienvenido.md
@@ -33,3 +33,9 @@ los videojuegos, etc.
 Rust es un lenguaje de programación de sistemas que se enfoca en la seguridad,
 la velocidad y la concurrencia. Su sintaxis es similar a la de C++, pero
 introduce conceptos nuevos que lo hacen más seguro y más fácil de usar.
+
+Dejamos este video de referencia:
+
+<center>
+<youtube video="KOABboz7PBs"></youtube>
+</center>
\ No newline at end of file
diff --git a/src/components/blog_content.rs b/src/components/blog_content.rs
index 2e8857b..3facfe0 100644
--- a/src/components/blog_content.rs
+++ b/src/components/blog_content.rs
@@ -1,10 +1,37 @@
-use crate::{components::icons::StrToIcon, models::article::Article};
+use crate::{
+    components::{
+        icons::StrToIcon,
+        mdx::{
+            center::{Center, CenterProps},
+            youtube::{Youtube, YoutubeProps},
+        },
+    },
+    models::article::Article,
+};
 use leptos::*;
-use leptos_mdx::mdx::{Components, Mdx};
+use leptos_mdx::mdx::{Components, Mdx, MdxComponentProps};
 
 #[component]
 pub fn BlogContent(#[prop()] article: Article) -> impl IntoView {
-    let components = Components::new();
+    let mut components = Components::new();
+
+    components.add_props(
+        "youtube".to_string(),
+        Youtube,
+        |props: MdxComponentProps| {
+            let video_id = props.attributes.get("video").unwrap().clone();
+
+            YoutubeProps {
+                video: video_id.unwrap(),
+            }
+        },
+    );
+
+    components.add_props("center".to_string(), Center, |props: MdxComponentProps| {
+        CenterProps {
+            children: props.children,
+        }
+    });
 
     view! {
         <div class="group flex flex-col gap-y-6 border border-black p-6 bg-orange-100 drop-shadow-[0_0_0_rgba(0,0,0)] transition justify-between">
diff --git a/src/components/mdx/center.rs b/src/components/mdx/center.rs
new file mode 100644
index 0000000..82e4d38
--- /dev/null
+++ b/src/components/mdx/center.rs
@@ -0,0 +1,6 @@
+use leptos::*;
+
+#[component]
+pub fn Center(children: Children) -> impl IntoView {
+    view! { <div class="mx-auto">{children()}</div> }
+}
diff --git a/src/components/mdx/mod.rs b/src/components/mdx/mod.rs
new file mode 100644
index 0000000..fc68f8f
--- /dev/null
+++ b/src/components/mdx/mod.rs
@@ -0,0 +1,2 @@
+pub mod center;
+pub mod youtube;
diff --git a/src/components/mdx/youtube.rs b/src/components/mdx/youtube.rs
new file mode 100644
index 0000000..e8c1402
--- /dev/null
+++ b/src/components/mdx/youtube.rs
@@ -0,0 +1,18 @@
+use leptos::*;
+
+#[component]
+pub fn Youtube(video: String) -> impl IntoView {
+    view! {
+        <div class="layout">
+            <iframe
+                width="560"
+                height="315"
+                src=format!("https://www.youtube.com/embed/{video}?si=mvuVOHvxBTxYOujJ")
+                title="YouTube video player"
+                frameborder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                allowfullscreen
+            ></iframe>
+        </div>
+    }
+}
diff --git a/src/components/mod.rs b/src/components/mod.rs
index b0ca6ff..e686e01 100644
--- a/src/components/mod.rs
+++ b/src/components/mod.rs
@@ -3,3 +3,4 @@ pub mod button_link;
 pub mod header;
 pub mod icons;
 pub mod layout;
+pub mod mdx;
diff --git a/src/pages/home.rs b/src/pages/home.rs
index a1025e6..025f9df 100644
--- a/src/pages/home.rs
+++ b/src/pages/home.rs
@@ -1,6 +1,16 @@
-use crate::{async_component::Async, components::layout::Layout, list_articles};
+use crate::{
+    async_component::Async,
+    components::{
+        layout::Layout,
+        mdx::{
+            center::{Center, CenterProps},
+            youtube::{Youtube, YoutubeProps},
+        },
+    },
+    list_articles,
+};
 use leptos::*;
-use leptos_mdx::mdx::{Components, Mdx};
+use leptos_mdx::mdx::{Components, Mdx, MdxComponentProps};
 
 #[component]
 pub fn Homepage() -> impl IntoView {
@@ -27,7 +37,28 @@ async fn list_of_articles() -> impl IntoView {
                 .map(|article| {
                     let binding = article.content.to_string().clone();
                     let description = binding.split('\n').take(3).collect::<Vec<&str>>().join("\n");
-                    let components = Components::new();
+                    let mut components = Components::new();
+                    components
+                        .add_props(
+                            "youtube".to_string(),
+                            Youtube,
+                            |props: MdxComponentProps| {
+                                let video_id = props.attributes.get("video").unwrap().clone();
+                                YoutubeProps {
+                                    video: video_id.unwrap(),
+                                }
+                            },
+                        );
+                    components
+                        .add_props(
+                            "center".to_string(),
+                            Center,
+                            |props: MdxComponentProps| {
+                                CenterProps {
+                                    children: props.children,
+                                }
+                            },
+                        );
                     view! {
                         <li class="group flex flex-col gap-y-1 border border-black p-2 sm:p-6 hover:bg-orange-500 bg-orange-200 drop-shadow-[0_0_0_rgba(0,0,0)] hover:drop-shadow-[-4px_-4px_0_rgba(0,0,0)] transition justify-between">
                             <a href=format!("./articles/{}.html", article.slug)>