wip: Blog, codeblock component

src/components/codeblock.rs

@@ -0,0 +1,8 @@
+use leptos::*;
+
+#[component]
+pub fn CodeBlock(cx: Scope, children: Children) -> impl IntoView {
+    view! {cx,
+        <pre class="p-4 m-4 bg-slate-700 rounded-lg overflow-x-scroll">{children(cx)}</pre>
+    }
+}

src/components/mod.rs

@@ -0,0 +1,2 @@
+mod codeblock;
+pub use codeblock::*;

src/lib.rs

@@ -1,4 +1,5 @@
 pub mod app;
+mod components;
 mod routes;
 use cfg_if::cfg_if;
 

src/routes/blog/page.rs

@@ -1,28 +1,29 @@
 use leptos::*;
 use leptos_meta::*;
+use crate::components::*;
 
 #[component]
 pub fn Blog(cx: Scope) -> impl IntoView {
-    let es_health_green = concat!(
+    let es_health_green = [
+        "$ kubectl exec -n <namespace> <elasticsearch-pod> -it -- curl localhost:9200/_cluster/health?pretty",
         "{",
-        "kubectl exec -n <namespace> <elasticsearch-pod> -it -- curl localhost:9200/_cluster/health?pretty",
-         r#""cluster_name" : "elastic","#,
-         r#""status" : "green", # <<<<< Make sure this is green <<<<<"#,
-         r#""timed_out" : false,"#,
-         r#""number_of_nodes" : 7,"#,
-         r#""number_of_data_nodes" : 2,"#,
-         r#""active_primary_shards" : 202,"#,
-         r#""active_shards" : 404,"#,
-         r#""relocating_shards" : 0,"#,
-         r#""initializing_shards" : 0,"#,
-         r#""unassigned_shards" : 0,"#,
-         r#""delayed_unassigned_shards" : 0,"#,
-         r#""number_of_pending_tasks" : 0,"#,
-         r#""number_of_in_flight_fetch" : 0,"#,
-         r#""task_max_waiting_in_queue_millis" : 0,"#,
-         r#""active_shards_percent_as_number" : 100.0"#,
-         "}",
-        );
+        r#"  "cluster_name" : "elastic","#,
+        r#"  "status" : "green", # <<<<< Make sure this is green <<<<<"#,
+        r#"  "timed_out" : false,"#,
+        r#"  "number_of_nodes" : 7,"#,
+        r#"  "number_of_data_nodes" : 2,"#,
+        r#"  "active_primary_shards" : 202,"#,
+        r#"  "active_shards" : 404,"#,
+        r#"  "relocating_shards" : 0,"#,
+        r#"  "initializing_shards" : 0,"#,
+        r#"  "unassigned_shards" : 0,"#,
+        r#"  "delayed_unassigned_shards" : 0,"#,
+        r#"  "number_of_pending_tasks" : 0,"#,
+        r#"  "number_of_in_flight_fetch" : 0,"#,
+        r#"  "task_max_waiting_in_queue_millis" : 0,"#,
+        r#"  "active_shards_percent_as_number" : 100.0"#,
+        "}",
+    ].join("\n");
     view! { cx,
         <Title text="Blog - NationTech - Unconventional team for extraordinary challenges"/>
         <div class="text-white bg-indigo-950 min-h-screen">
@@ -30,17 +31,19 @@ pub fn Blog(cx: Scope) -> impl IntoView {
             <h1 class="text-6xl text-orange-400 font-extrabold pt-12">"Blog"</h1>
             <h2 class="text-3xl">"Modifying storageClass of kubernetes bitnami ElasticSearch cluster without downtime"</h2>
             <p class="text-lg">"Thanks Percona for this excellent article "
-                <a class="underline text-orange-400" href="https://www.percona.com/blog/change-storage-class-on-kubernetes-on-the-fly/">"Change Storage Class on Kubernetes on the Fly."</a>
+                <a class="text-orange-400" href="https://www.percona.com/blog/change-storage-class-on-kubernetes-on-the-fly/">"Change Storage Class on Kubernetes on the Fly."</a>
             </p>
-            <p>"It inspired most of this procedure. Here is the summary"
+            <p class="text-lg">"It inspired most of this procedure. Here is the summary"
                 <ol class="list-decimal list-inside">
                     <li class="pb-2">"Delete the statefulset with "<code class="inline-block">"kubectl delete -n <namespace> statefulset --cascade=orphan <statefulset_name>"</code>" the "<code class="">"orphan"</code>" option is key here and will allow Kubernetes to delete the statefulset without deleting the pods."</li>
                     <li class="pb-2">"Change the storage class in the helm chart to the new one"</li>
                     <li class="pb-2">"Upgrade the deployment with "<code>"helm upgrade"</code></li>
                     <li class="pb-2">"Make sure  your cluster is green "
-                        <pre>{es_health_green}</pre>
+                        <CodeBlock>{es_health_green}</CodeBlock>
+                    </li>
+                    <li class="pb-2">"Make sure  your cluster is green "
+                        <CodeBlock>"kubectl exec -n <namespace> <elasticsearch-pod> -it -- curl localhost:9200/_cluster/health?pretty"</CodeBlock>
                     </li>
-                    <li class="pb-2">"Make sure  your cluster is green "<code>"kubectl exec -n <namespace> <elasticsearch-pod> -it -- curl localhost:9200/_cluster/health?pretty"</code></li>
                 </ol>
             </p>
         </div>

tailwind.config.js

@@ -2,6 +2,9 @@
 module.exports = {
   content: ["./src/**/*.rs"],
   theme: {
+    fontSize: {
+      base: '1.125rem',
+    },
     extend: {
       fontFamily: {
         //        'sans': ['Nunito', 'ui-sans-serif', 'system-ui'],