Refactor KubeWeekly signup form

Turn it into a shortcode. Allow fallback in case localizations have not
yet caught up.

Co-authored-by: Dmitry Shurupov <dmitry.shurupov@palark.com>
Co-authored-by: Sayak Mukhopadhyay <mukhopadhyaysayak@gmail.com>

assets/scss/_custom.scss

@@ -125,6 +125,33 @@ body.td-home main[role="main"] > section:first-of-type .content p:first-child {
   }
 }
 
+.section-feature#kubeweekly {
+
+  a.kubeweekly-signup, a.kubeweekly-signup:hover {
+    color: $primary;
+    font-weight: 400;
+    font-size: 1.1rem;
+  }
+  > .kubeweekly-inner {
+    form p {
+      text-align: center;
+      font-size: 1.2rem;
+      color: $black;
+    }
+    margin-left: auto;
+    margin-right: auto;
+    padding-top: 2rem;
+  }
+
+  h5 {
+    text-align: center;
+
+    a:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
 body.td-404 main .error-details {
   max-width: 1100px;
   margin: 0 auto;

content/en/_index.html

@@ -62,3 +62,5 @@ To download Kubernetes, visit the [download](/releases/download/) section.
 {{< blocks/kubernetes-features >}}
 
 {{< blocks/case-studies >}}
+
+{{< kubeweekly id="kubeweekly" >}}

layouts/index.html

@@ -8,23 +8,20 @@
     </div>
 </section>
 
+{{/* legacy kubeweekly support */}}
+{{/* allows localizations to catch up */}}
+{{- if not (.HasShortcode "kubeweekly") -}}
 <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">
+        <br>
-        	#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>
+                <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>
+                <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>
@@ -36,7 +33,8 @@
         <!--End mc_embed_signup-->
     </div>
 </section>
-{{ end }}
+{{- end -}}
+{{- end -}}
 
 
 {{ define "hero-more" }}

layouts/partials/hooks/head-end.html

@@ -37,6 +37,16 @@
 
 <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 -}}

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>