Refactor KubeWeekly signup form

Turn it into a shortcode. Co-authored-by: Dmitry Shurupov <[email protected]> Co-authored-by: Sayak Mukhopadhyay <[email protected]>
kubernetes · Dec 19, 2024 · 283abc5 · 283abc5
1 parent da4af90
commit 283abc5
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 29 deletions.
diff --git 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-top: 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
@@ -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
@@ -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
@@ -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
@@ -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>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -66,3 +66,5 @@ <h2>The Challenges of Migrating 150+ Microservices to Kubernetes</h2>
		{{< blocks/kubernetes-features >}}

		{{< blocks/case-studies >}}

		{{< kubeweekly id="kubeweekly" >}}