From c045e1ee32e7b8f3170169a67ca0a74d51691ddd Mon Sep 17 00:00:00 2001
From: Tim Bannister <tim@scalefactory.com>
Date: Tue, 17 Dec 2024 09:46:21 +0000
Subject: [PATCH] Refactor KubeWeekly signup form

Turn it into a shortcode.

Co-authored-by: Dmitry Shurupov <dmitry.shurupov@palark.com>
---
 assets/scss/_custom.scss             | 19 ++++++++++++++++++
 content/en/_index.html               |  2 ++
 layouts/index.html                   | 29 ----------------------------
 layouts/partials/hooks/head-end.html | 10 ++++++++++
 layouts/shortcodes/kubeweekly.html   | 18 +++++++++++++++++
 5 files changed, 49 insertions(+), 29 deletions(-)
 create mode 100644 layouts/shortcodes/kubeweekly.html

diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss
index de74a05cdf2da..b95fabd11a576 100644
--- a/assets/scss/_custom.scss
+++ b/assets/scss/_custom.scss
@@ -96,6 +96,25 @@ body.td-home main[role="main"] > section:first-of-type .content p:first-child {
   }
 }
 
+.section-feature#kubeweekly {
+
+  .kubeweekly-signup {
+    color: $dark-grey;
+    font-weight: 400;
+    font-size: 1.8rem;
+  }
+  > .kubeweekly-inner {
+    form p {
+      text-align: center;
+      font-size: 1.2rem;
+      color: $black;
+    }
+    margin-left: auto;
+    margin-right: auto;
+    padding-bottom: 2rem;
+  }
+}
+
 body.td-404 main .error-details {
   max-width: 1100px;
   margin-left: auto;
diff --git a/content/en/_index.html b/content/en/_index.html
index 789c9a9fc6d26..3170f431147d7 100644
--- a/content/en/_index.html
+++ b/content/en/_index.html
@@ -66,3 +66,5 @@ <h2>The Challenges of Migrating 150+ Microservices to Kubernetes</h2>
 {{< blocks/kubernetes-features >}}
 
 {{< blocks/case-studies >}}
+
+{{< kubeweekly id="kubeweekly" >}}
diff --git a/layouts/index.html b/layouts/index.html
index 0845663be7399..c2304488c5077 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -7,35 +7,6 @@
         </center>
     </div>
 </section>
-
-<section id="kubeweekly">
-      <div class="main-section">
-        <!-- Begin MailChimp Signup Form -->
-        <link href="https://cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css">
-        <style type="text/css">
-        	#mc_embed_signup{clear:left; width:100%;}
-		    #mc_embed_signup .button, #mc_embed_signup input.email {margin-right:15px; vertical-align: bottom}
-        	/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
-        	   We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
-        </style>
-<br>
-        <div id="mc_embed_signup">
-        <form action="https://kubeweekly.us10.list-manage.com/subscribe/post?u=3885586f8f1175194017967d6&amp;id=11c1b8bcb2" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
-            <div id="mc_embed_signup_scroll">
-        	<p style="font-size: 20px">{{ T "main_kubeweekly_baseline" }}</p>
-
-        	<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="{{ T "input_placeholder_email_address" }}" aria-label="email" required>
-            <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
-            <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_3885586f8f1175194017967d6_11c1b8bcb2" tabindex="-1" value=""></div>
-            <div class="clear"><input type="submit" value="{{ T "subscribe_button" }}" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
-            </div>
-        </form>
-        <h5 style="text-align: center"><a href="https://us10.campaign-archive.com/home/?u=3885586f8f1175194017967d6&id=11c1b8bcb2" aria-label="Kube Weekly" style="color: #3371E3; font-weight: 400; font-size: 20px">{{ T "main_kubeweekly_past_link" }}</a></h5>
-        </div>
-
-        <!--End mc_embed_signup-->
-    </div>
-</section>
 {{ end }}
 
 
diff --git a/layouts/partials/hooks/head-end.html b/layouts/partials/hooks/head-end.html
index 3e27bc1b26d5a..ffda6ecb55ff1 100644
--- a/layouts/partials/hooks/head-end.html
+++ b/layouts/partials/hooks/head-end.html
@@ -1,5 +1,15 @@
 <link rel="manifest" href="/manifest.webmanifest">
 
+{{- if .HasShortcode "kubeweekly" -}}
+<link href="https://cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css">
+<style type="text/css">
+        #mc_embed_signup{clear:left; width:100%;}
+        #mc_embed_signup .button, #mc_embed_signup input.email {margin-right:15px; vertical-align: bottom}
+        /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
+           We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
+</style>
+{{- end -}}
+
 {{- if or (.HasShortcode "table")  (.HasShortcode "feature-gate-table") -}}
   {{- if hugo.IsProduction -}}
     {{- $sortableTableJs :=  resources.Get "js/sortable-table.js" | minify | fingerprint -}}
diff --git a/layouts/shortcodes/kubeweekly.html b/layouts/shortcodes/kubeweekly.html
new file mode 100644
index 0000000000000..707bb34eb6ff1
--- /dev/null
+++ b/layouts/shortcodes/kubeweekly.html
@@ -0,0 +1,18 @@
+{{- $id := .Get "id" | default (printf "kubeweekly-%d" .Ordinal) -}}
+<section class="section-feature" id="{{ $id }}">
+    <div class="kubeweekly-inner">
+    <div id="mc_embed_signup">
+        <form action="https://kubeweekly.us10.list-manage.com/subscribe/post?u=3885586f8f1175194017967d6&amp;id=11c1b8bcb2" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
+            <div id="mc_embed_signup_scroll">
+                <p>{{ T "main_kubeweekly_baseline" }}</p>
+
+                <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="{{ T "input_placeholder_email_address" }}" aria-label="email" required>
+            <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
+            <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_3885586f8f1175194017967d6_11c1b8bcb2" tabindex="-1" value=""></div>
+            <div class="clear"><input type="submit" value="{{ T "subscribe_button" }}" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
+            </div>
+        </form>
+        <h5><a class="kubeweekly-signup" href="https://us10.campaign-archive.com/home/?u=3885586f8f1175194017967d6&id=11c1b8bcb2" aria-label="Kube Weekly">{{ T "main_kubeweekly_past_link" }}</a></h5>
+    </div>
+    </div>
+</section>