website: add email subscription form to footer (#5597)

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

website/docusaurus.config.js

@@ -1,9 +1,12 @@
+const fs = require("fs");
 const sidebar = require("./sidebars.js");
 
 const releases = sidebar.docs
     .filter((doc) => doc.link?.slug === "releases")[0]
     .items.filter((release) => typeof release === "string");
 
+const footerEmail = fs.readFileSync("src/footer.html", { encoding: "utf-8" });
+
 /** @type {import('@docusaurus/types').DocusaurusConfig} */
 module.exports = {
     title: "authentik",
@@ -81,6 +84,14 @@ module.exports = {
         },
         footer: {
             links: [
+                {
+                    title: "Subscribe to authentik News",
+                    items: [
+                        {
+                            html: footerEmail,
+                        },
+                    ],
+                },
                 {
                     title: "Documentation",
                     items: [

website/src/footer.html

@@ -0,0 +1,106 @@
+<!-- Begin Mailchimp Signup Form -->
+<link
+  href="//cdn-images.mailchimp.com/embedcode/classic-071822.css"
+  rel="stylesheet"
+  type="text/css"
+/>
+<style type="text/css">
+  #mc_embed_signup {
+    clear: left;
+    font: 14px Helvetica, Arial, sans-serif;
+    width: 600px;
+  }
+
+  #mc_embed_signup .helper_text {
+    background-color: transparent;
+  }
+
+  /* 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>
+<div id="mc_embed_signup">
+  <form
+    action="https://goauthentik.us21.list-manage.com/subscribe/post?u=6b973b3207d334e3355ae0ab1&amp;id=971ed78bf3&amp;f_id=007bb3e1f0"
+    method="post"
+    id="mc-embedded-subscribe-form"
+    name="mc-embedded-subscribe-form"
+    class="validate"
+    target="_blank"
+    novalidate
+  >
+    <div id="mc_embed_signup_scroll">
+      <div class="indicates-required">
+        <span class="asterisk">*</span> indicates required
+      </div>
+      <div class="mc-field-group">
+        <label for="mce-EMAIL"
+          >Email Address <span class="asterisk">*</span>
+        </label>
+        <input
+          type="email"
+          value=""
+          name="EMAIL"
+          class="required email"
+          id="mce-EMAIL"
+          required
+        />
+        <span id="mce-EMAIL-HELPERTEXT" class="helper_text"></span>
+      </div>
+      <div id="mce-responses" class="clear">
+        <div
+          class="response"
+          id="mce-error-response"
+          style="display: none"
+        ></div>
+        <div
+          class="response"
+          id="mce-success-response"
+          style="display: none"
+        ></div>
+      </div>
+      <!-- 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_6b973b3207d334e3355ae0ab1_971ed78bf3"
+          tabindex="-1"
+          value=""
+        />
+      </div>
+    </div>
+  </form>
+</div>
+<div class="clear">
+  <input
+    form="mc-embedded-subscribe-form"
+    type="submit"
+    value="Subscribe"
+    name="subscribe"
+    id="mc-embedded-subscribe"
+    class="button button--primary button--block"
+  />
+</div>
+<script
+  type="text/javascript"
+  src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"
+></script>
+<script type="text/javascript">
+  (function ($) {
+    window.fnames = new Array();
+    window.ftypes = new Array();
+    fnames[0] = "EMAIL";
+    ftypes[0] = "email";
+    fnames[1] = "FNAME";
+    ftypes[1] = "text";
+    fnames[2] = "LNAME";
+    ftypes[2] = "text";
+    fnames[3] = "ADDRESS";
+    ftypes[3] = "address";
+    fnames[4] = "PHONE";
+    ftypes[4] = "phone";
+    fnames[5] = "BIRTHDAY";
+    ftypes[5] = "birthday";
+  })(jQuery);
+  var $mcj = jQuery.noConflict(true);
+</script>
+<!--End mc_embed_signup-->

website/src/pages/index.jsx

@@ -6,7 +6,7 @@ import BrowserOnly from "@docusaurus/core/lib/client/exports/BrowserOnly";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import styles from "./styles.module.css";
-import Comparison from "../comparison";
+import Comparison from "../components/comparison";
 import "react-before-after-slider-component/dist/build.css";
 
 const features = [