From caf90d7a9525829c13ea3c553a4f87bdef86a669 Mon Sep 17 00:00:00 2001
From: jeangab <jg@nationtech.io>
Date: Wed, 17 Apr 2024 22:44:58 -0400
Subject: [PATCH] feat(sreez): Improve subscribe look, integrate it on the blog
 page

---
 sreez/assets/icons/discord_black.svg           |  1 +
 sreez/src/components/footer.rs                 |  6 ++++++
 sreez/src/components/subscribe.rs              |  6 +++---
 sreez/src/pages/okd_installation_overview_1.rs | 18 ++++++++++++++++--
 sreez/style/main.scss                          |  5 +++++
 5 files changed, 31 insertions(+), 5 deletions(-)
 create mode 100644 sreez/assets/icons/discord_black.svg

diff --git a/sreez/assets/icons/discord_black.svg b/sreez/assets/icons/discord_black.svg
new file mode 100644
index 0000000..4b74773
--- /dev/null
+++ b/sreez/assets/icons/discord_black.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"><g id="图层_2" data-name="图层 2"><g id="Discord_Logos" data-name="Discord Logos"><g id="Discord_Logo_-_Large_-_White" data-name="Discord Logo - Large - White"><path d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/></g></g></g></svg>
\ No newline at end of file
diff --git a/sreez/src/components/footer.rs b/sreez/src/components/footer.rs
index 241c235..d85dc38 100644
--- a/sreez/src/components/footer.rs
+++ b/sreez/src/components/footer.rs
@@ -13,6 +13,12 @@ pub fn Footer() -> impl IntoView {
             </a>
             </p>
             <p>
+            <a href="https://discord.gg/jKprrek8AF" aria-label="Discord" aria-hidden="true" target="_blank" class="row items-center">
+            <img src="assets/icons/discord_black.svg" width="32px"/>
+            <span class="pad-left-1">"Join our Discord community"</span>
+            </a>
+            </p>
+            <p>
             <a href="https://jggc.youcanbook.me" aria-label="You Can Book Me" aria-hidden="true" target="_blank" class="row items-center">
             <img src="assets/icons/youcanbookme_black.png" height="32px"/>
             <span class="pad-left-1">"Book a meeting"</span>
diff --git a/sreez/src/components/subscribe.rs b/sreez/src/components/subscribe.rs
index 0aec3c7..04cb55a 100644
--- a/sreez/src/components/subscribe.rs
+++ b/sreez/src/components/subscribe.rs
@@ -46,9 +46,9 @@ pub fn SubscribeButton() -> impl IntoView {
 
     view! {
         <form on:submit=send class="margin-y-3">
-            <label for="email" class="margin-right-1">"Email : "</label>
-            <input type="text" value="email" node_ref=email class="margin-right-3 input"/>
-            <input type="Submit" value="Get notified !" class="btn"/>
+            <label for="email" class="margin-right-1 margin-y-1">"Email : "</label>
+            <input type="text" placeholder="your@email.com" node_ref=email class="margin-right-3 input margin-y-1"/>
+            <input type="Submit" value="Subscribe" class="btn margin-y-1"/>
         <p class=format!("form-message initial status-{}", form_status.get())><span>"Status is "</span><span>{form_status}</span></p>
         </form>
     }
diff --git a/sreez/src/pages/okd_installation_overview_1.rs b/sreez/src/pages/okd_installation_overview_1.rs
index 6b5dd74..768fc96 100644
--- a/sreez/src/pages/okd_installation_overview_1.rs
+++ b/sreez/src/pages/okd_installation_overview_1.rs
@@ -1,5 +1,5 @@
 use leptos::*;
-use crate::components::SubscribeButton;
+use crate::components::{Footer, SubscribeButton};
 /// Renders the home page of your application.
 #[component]
 pub fn OkdInstallationOverview1() -> impl IntoView {
@@ -95,8 +95,22 @@ pub fn OkdInstallationOverview1() -> impl IntoView {
                     </p>
 
                 </div>
+                <div>
+                    <p>"Want more ?"</p>
+                    <p>"Get notified when we release the next part !"</p>
+                    <SubscribeButton/>
+                </div>
+                <div class="margin-y-3 margin-x-1 font-m text-justify">
+                    <p>"Article écrit par : "</p>
+                    <p><strong>"Sylvain Tremblay"</strong></p>
+                    <p><a href="https://www.linkedin.com/in/sylvain-tremblay-a881151/" target="_blank">"LinkedIn"</a></p>
+                    <p><a href="mailto:stremblay@nationtech.io" target="_blank">"stremblay@nationtech.io"</a></p>
+                    <p>"Sylvain, co-fondateur et CTO de NationTech, a \"été choisi\" par l'informatique dès l'age de 9 ans. Passioné par tous les aspects du domaine, c'est particulièrement l'administration de systèmes et les infrastructures complexes qui l'intéressent dès l'apparition des BBS ou des premiers canaux IRC avant même qu'internet soit disponible aux clients résidentiels. Il a été parmi les premiers utilisateurs de Linux dès 1993, a ensuite touché aux différents systèmes Unix commerciaux à l'occasion de ses années de travail chez Bombardier Transports, Ferrari F1 ou Hyundai-Kia Motor Company. "</p>
+                    <p>"Il est ensuite revenu dans le monde de l'informatique pure après un séjour en tant qu'informaticien au millieu d'ingénieurs mécaniques. C'est alors qu'il occupe le poste de programmeur pendant plusieurs années, puis d'architecte cloud, spécialiste en infrastructures distribuée, etc. En plus de son travail dans le domaine, il s'affaire dans ses passes temps à des expérimentations poussées avec les technologies de l'heure soit OpenStack dans les années 2010 puis Kubernetes dont il développe une maîtrise avancée."</p>
+                    <p>"Effectivement, pour Sylvain toutes les raisons sont bonnes pour acheter un serveur à ajouter dans son homelab ou une imprimante 3D de plus et il les utilise à bon escient, toujours fidèle à sa grande générosité."</p>
+                </div>
             </div>
-            <SubscribeButton/>
         </div>
+        <Footer />
     }
 }
diff --git a/sreez/style/main.scss b/sreez/style/main.scss
index 8307cf2..ab202ae 100644
--- a/sreez/style/main.scss
+++ b/sreez/style/main.scss
@@ -192,6 +192,11 @@ ol {
   margin-bottom: 2rem;
 }
 
+.margin-y-1 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
 .pad-right-1 {
   padding-right: 1rem;
 }