feat(okdInstallationBlog): wip part 1

sreez/src/app.rs

@@ -3,6 +3,7 @@ use leptos_meta::*;
 use leptos_router::*;
 
 use crate::pages::ShortLandingPage;
+use crate::pages::OkdInstallationOverview1;
 use crate::pages::HomePage;
 use crate::pages::InitialOffer;
 use crate::components::Matomo;
@@ -28,6 +29,7 @@ pub fn App() -> impl IntoView {
                     <Route path="" view=ShortLandingPage/>
                     <Route path="/home-page" view=HomePage/>
                     <Route path="/initial-offer" view=InitialOffer/>
+                    <Route path="/okd-installation-overview-1" view=OkdInstallationOverview1/>
                     <Route path="/*any" view=NotFound/>
                 </Routes>
             </main>

sreez/src/pages/mod.rs

@@ -1,6 +1,8 @@
 mod home_page;
 mod initial_offer;
 mod short_landing_page;
+mod okd_installation_overview_1;
 pub use short_landing_page::*;
 pub use home_page::*;
 pub use initial_offer::*;
+pub use okd_installation_overview_1::*;

sreez/src/pages/okd_installation_overview_1.rs

@@ -0,0 +1,93 @@
+use leptos::*;
+/// Renders the home page of your application.
+#[component]
+pub fn OkdInstallationOverview1() -> impl IntoView {
+    view! {
+        <div class="margin-x-auto max-width-900">
+            <div class="row margin-y-2 space-between">
+                // <div class="flex-align-center margin-x-1">
+                //     <img src="assets/Red_Hat_logo.png"  alt="RedHat logo" class="height-70"/>
+                // </div>
+                // <img src="assets/Red_Hat_logo.png"  alt="RedHat logo" class=""/>
+                // <div class="margin-x-3 text-left column justify-center">
+                <div class="margin-x-1 text-left column">
+                    <h1 class="font-3xl">"RedHat OKD"
+                        <span class="font-l font-italic">" -OpenShift Community Edition-"</span>
+                        <br/>
+                        <span class="font-2xl color-gray">"Survol d'une installation HA On-Prem."</span>
+                    </h1>
+                    //<h2 class="font-size-3xl">
+                    //    <span>"Stay focused"</span><br/>
+                    //    <span>"on your features,"</span><br/>
+                    //    <span>"we take care"</span><br/>
+                    //    <span>"of the infrastructure."</span>
+                    //</h2>
+                </div>
+                <div class="flex-align-start pad-top-2 pad-right-1">
+                    <img src="assets/Red_Hat_logo.png"  alt="RedHat logo" class="height-70"/>
+                </div>
+                //<div>
+                //    <img src="assets/Red_Hat_logo.png"  alt="RedHat logo" class=""/>
+                //</div>
+            </div>
+            <div>
+                <div class="margin-x-1 text-justify column font-m">
+                    <p>"Dans cet article, je vous offre une vue à haut niveau des requis et étapes nécessaires pour installer un cluster "<b>"RedHat OKD"</b>" hautement disponible (3+ nodes) sur"<i>" bare metal"</i>". Dans la terminologie RedHat, on parle ici d'une installation de type"<b>" UPI"</b>" - "<i><b>"U"</b>"ser "<b>"P"</b>"rovisioned "<b>"I"</b>"nfrastructure"</i>"."</p>
+
+                    <p>"Attention: ne vous attendez pas à un cookbook. Pas de longues listes de commandes, je ne prendrai personne par la main. Il s'agit plutôt d'un survol, un "<i>" preflight check "</i>" pour avoir une idée générale de la marche à suivre, des compétences requises, et être averti de pièges à éviter par lesquels je suis passé." </p>
+
+                    <p>"Si vous comprenez ce que je raconte et avez les skills pour l'exécuter, vous êtes capables d'installer "<b>"OKD"</b>"." </p>
+
+                    <h2 class="margin-top-5 color-okd-gray">"Mais avant de commencer... C'est quoi OKD?"</h2>
+                    <div >
+                        <p>
+                            <img src="assets/OKD4.png"  alt="OKD logo" class="max-width-400 margin-left-2 image-float-right"/>
+                            "Dans le monde de kubernetes, OpenShift de RedHat, c'est plus que du bonbon. Ça ajoute des fonctionnalités et des outils supplémentaires à k8s qui facilitent énormément la vie et permettent de créer rapidement, avec surprenamment peu d'efforts, un environnement "<i>"production ready"</i>" hautement disponible incluant dès le départ du monitoring, de l'alerting, des mises-à-jour automatique, et bien plus. "</p>
+                    </div>
+                    <p>"C'est bien beau, on jase d'OpenShift, mais OKD, c'est quoi? C'est la version open source gratuite d'OpenShift. Le modèle d'affaire de RedHat repose sur la fourniture de solutions logicielles open source, le support technique et les services associés. Donc, en gros, si on engage RedHat pour installer/supporter/opérer un cluster, on a OpenShift. Si on s'arrange par soi-même, on a OKD."</p>
+
+                    <h2 class="margin-top-5 color-okd-gray">"Connaissances requises"</h2>
+                    <p>
+                        "Afin de vous permettre d'évaluer rapidement si cette installation est à votre portée, voici une liste de technos qui vont être utlilisées pour monter le setup. Si tous ces buzzwords vous parlent, ou à tout le moins, ne vous effraient pas, vous avez les skills requis pour vous lancer dans l'installation."
+                        // <div class="row">
+                        <div class="row">
+                            <ul class="columns-list">
+                                <li>PXE</li>
+                                <li>TFTP</li>
+                                <li>DHCP</li>
+                                <li>DNS</li>
+                                <li>HTTPD</li>
+                                <li>Firewall</li>
+                                <li>Load Balancer</li>
+                                <li>VPN</li>
+                                <li>BIOS</li>
+                            </ul>
+                            // <img src="assets/okdPanda.jpeg"  alt="RedHat logo" class="" style="max-height:100%; flex:1;"/>
+                            //<p>yo</p>
+                        </div>
+                        "Cette liste n'est pas exhaustive, mais elle vient donner une idée de la trail dans laquelle on s'embarque / du profil que ça prend pour espérer s'en sortir :)"
+                    </p>
+
+
+                    <h2 class="margin-top-4 color-okd-gray">"Le setup visé"</h2>
+                    <p>
+                      "L'architecture de l'infra que l'on va construire dans les prochains paragraphes va grossièrement comme suit:"
+                      <ul>
+                        <li>Yo</li>
+                      </ul>
+                    </p>
+
+                    <h2 class="margin-top-5 color-okd-gray">"Le hardware requis"</h2>
+                    <p>
+                      <ul>
+                        <li>"Une switch <doh>"</li>
+                        <li>"Une machine pour OPNSense"</li>
+                      </ul>
+                    </p>
+
+
+                </div>
+            </div>
+        </div>
+    }
+}

sreez/style/main.scss

@@ -33,16 +33,62 @@ body {
   font-size: 3rem;
 }
 
+.font-3xl {
+  font-size: 2.5rem;
+}
+
+.font-2xl {
+  font-size: 2rem;
+}
+
 .font-xl {
   font-size: 1.7rem;
 }
 
+.font-l {
+  font-size: 1.5rem;
+}
+
+.font-m {
+  font-size: 1.2rem;
+}
+
+.font-italic {
+  font-style: italic;
+}
+
+.columns-list {
+  display: block;
+  column-count: 3;
+  column-gap: 1rem;
+  padding: 0;
+  margin-top: 2rem;
+  margin-bottom: 3rem;
+  margin-left: 6rem;
+  margin-right: 6rem;
+  list-style-position: inside;
+  white-space: nowrap;
+}
+
+.columns-list li {
+  display: list-item;
+  break-inside: avoid;
+  list-style-position: inside;
+  // padding: 0.5rem 0;
+  // margin-left: 20px;
+  margin-bottom: 0.5rem;
+}
+
 .line-1 {
   line-height: 1rem;
 }
 
 .color-gray {
-  color: gray
+  color: gray;
+}
+
+.color-okd-gray {
+  color: #344559;
 }
 
 ol {
@@ -67,6 +113,13 @@ ol {
   text-decoration: none;
 }
 
+.front-image {
+  // max-width: 900px;
+  min-width: 200px;
+  width: 100%;
+  height: auto;
+}
+
 .icon-as-image {
   color: black;
   text-decoration: none;
@@ -81,6 +134,10 @@ ol {
   align-items: center;
 }
 
+.justify-end {
+  justify-content: end;
+}
+
 .justify-center {
   justify-content: center;
 }
@@ -105,6 +162,18 @@ ol {
   margin-bottom: 2rem;
 }
 
+.pad-right-1 {
+  padding-right: 1rem;
+}
+
+.pad-right-2 {
+  padding-right: 2rem;
+}
+
+.pad-top-2 {
+  padding-top: 2rem;
+}
+
 .pad-y-4 {
   padding-top: 4rem;
   padding-bottom: 4rem;
@@ -128,6 +197,11 @@ ol {
   margin-right: 3rem;
 }
 
+.margin-x-6 {
+  margin-left: 6rem;
+  margin-right: 6rem;
+}
+
 .margin-y-25vh {
   margin-top: 25vh;
   margin-bottom: 25vh;
@@ -187,6 +261,10 @@ ol {
   margin-top: 5rem;
 }
 
+.margin-top-4 {
+  margin-top: 4rem;
+}
+
 .margin-top-2 {
   margin-top: 2rem;
 }
@@ -195,6 +273,18 @@ ol {
   margin-top: 1rem;
 }
 
+.margin-right-1 {
+  margin-right: 1rem;
+}
+
+.margin-right-2 {
+  margin-right: 2rem;
+}
+
+.margin-left-2 {
+  margin-left: 2rem;
+}
+
 .card {
   .card-icon {
     font-size: 7rem;
@@ -202,6 +292,11 @@ ol {
   }
 }
 
+.image-float-right {
+  height: auto;
+  float: right;
+}
+
 .card-list {
   text-align: left;
   justify-content: center;
@@ -249,6 +344,14 @@ ol {
   margin: auto;
 }
 
+.space-between {
+  justify-content: space-between;
+}
+
+.text-justify {
+  text-align: justify;
+}
+
 .text-left {
   text-align: left;
 }
@@ -292,10 +395,24 @@ ol.huge-list-markers li{
   font-weight: 600;
 }
 
+.height-70 {
+  height: 70px;
+}
+
 .height-110 {
   height: 110px;
 }
 
+.flex-align-start {
+  display: flex;
+  align-items: start;
+}
+
+.flex-align-center {
+  display: flex;
+  align-items: center;
+}
+
 .bg-light, body {
   background-color: #F8F9F1;
 }
@@ -347,6 +464,11 @@ ol.huge-list-markers li{
   .sm-margin-top-2 {
     margin-top: 2rem;
   }
+  
+  .columns-list {
+    column-count: 2;
+    margin-left: 4rem;
+  }
 }
 
 
@@ -365,6 +487,11 @@ ol.huge-list-markers li{
     margin-right: 3rem;
   }
 
+  .margin-x-6 {
+    margin-left: 6rem;
+    margin-right: 6rem;
+  }
+
   .lg-lr-sections {
     > div {
       margin-right: 0;