From 0e22cacc48f2a8a4a4868c92e60a580fafa83f09 Mon Sep 17 00:00:00 2001
From: Carlos Esteban Lopez <lcarlosesteb@vmware.com>
Date: Thu, 9 Feb 2023 18:29:08 -0500
Subject: [PATCH] feat: Hardcode dar theme, set up top left logo & add adopters
 form

Signed-off-by: Carlos Esteban Lopez <lcarlosesteb@vmware.com>
---
 microsite-next/docusaurus.config.js           |  9 ++-
 microsite-next/src/pages/home/_home.tsx       | 71 ++++++++++++++-----
 .../home/_hub-spot-new-adopters-form.tsx      | 52 ++++++++++++++
 .../src/pages/home/home.module.scss           |  4 ++
 .../hub-spot-new-adopters-form.module.scss    | 38 ++++++++++
 5 files changed, 154 insertions(+), 20 deletions(-)
 create mode 100644 microsite-next/src/pages/home/_hub-spot-new-adopters-form.tsx
 create mode 100644 microsite-next/src/pages/home/hub-spot-new-adopters-form.module.scss

diff --git a/microsite-next/docusaurus.config.js b/microsite-next/docusaurus.config.js
index 28e74f3633..4f7e0472be 100644
--- a/microsite-next/docusaurus.config.js
+++ b/microsite-next/docusaurus.config.js
@@ -85,8 +85,15 @@ module.exports = {
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     {
+      colorMode: {
+        defaultMode: 'dark',
+        // disableSwitch: true,
+      },
       navbar: {
-        title: 'Backstage Software Catalog and Developer Platform',
+        logo: {
+          alt: 'Backstage Software Catalog and Developer Platform',
+          src: 'img/logo.svg',
+        },
         items: [
           {
             href: 'https://github.com/backstage/backstage',
diff --git a/microsite-next/src/pages/home/_home.tsx b/microsite-next/src/pages/home/_home.tsx
index 59951646ce..292a5a2dc0 100644
--- a/microsite-next/src/pages/home/_home.tsx
+++ b/microsite-next/src/pages/home/_home.tsx
@@ -5,39 +5,70 @@ import { BannerSectionColumns } from '@site/src/components/banner-section/banner
 import { ContentBlock } from '@site/src/components/content-block/content-block';
 import Layout from '@theme/Layout';
 import { clsx } from 'clsx';
-import React from 'react';
+import React, { useState } from 'react';
 
 import homeStyles from './home.module.scss';
+import { HubSpotNewAdoptersForm } from './_hub-spot-new-adopters-form';
+
+const hiddenNewsletterBannerKey = 'hiddenNewsletterBanner';
 
 export function Home() {
   const { siteConfig } = useDocusaurusContext();
 
+  const [hiddenNewsletterBanner, setHideNewsletterBanner] = useState(() => {
+    return JSON.parse(localStorage.getItem(hiddenNewsletterBannerKey)) || false;
+  });
+
+  const hideNewsletterBanner = (shouldHide: boolean) => {
+    localStorage.setItem(hiddenNewsletterBannerKey, JSON.stringify(shouldHide));
+    setHideNewsletterBanner(shouldHide);
+  };
+
   return (
     <Layout>
       <div className={homeStyles.homePage}>
         <BannerSection greyBackground>
           <BannerSectionColumns
             header={
-              <div
-                className={clsx(
-                  'card',
-                  'padding--md',
-                  homeStyles.newsletterBanner,
-                )}
-              >
-                <div className="text--left bannerContent">
-                  🗞️ Want to stay up to date with Backstage? Sign up for our{' '}
-                  <Link
-                    to="https://info.backstage.spotify.com/newsletter_subscribe"
-                    className="text--secondary"
+              <>
+                {!hiddenNewsletterBanner && (
+                  <div
+                    className={clsx(
+                      'card',
+                      'padding--md',
+                      homeStyles.newsletterBanner,
+                    )}
                   >
-                    Newsletter
-                  </Link>
-                  !
-                </div>
+                    <div className="text--left bannerContent">
+                      🗞️ Want to stay up to date with Backstage? Sign up for our{' '}
+                      <Link
+                        to="https://info.backstage.spotify.com/newsletter_subscribe"
+                        className="text--secondary"
+                      >
+                        Newsletter
+                      </Link>
+                      !
+                    </div>
 
-                <div className="bannerCloseButton">X</div>
-              </div>
+                    <div
+                      className={clsx(
+                        'button button--link',
+                        'bannerCloseButton',
+                      )}
+                      onClick={() => hideNewsletterBanner(true)}
+                    >
+                      <svg
+                        className="text--secondary"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                      >
+                        <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+                      </svg>
+                    </div>
+                  </div>
+                )}
+              </>
             }
           >
             <ContentBlock
@@ -500,6 +531,8 @@ export function Home() {
             />
           </div>
         </BannerSection>
+
+        <HubSpotNewAdoptersForm />
       </div>
     </Layout>
   );
diff --git a/microsite-next/src/pages/home/_hub-spot-new-adopters-form.tsx b/microsite-next/src/pages/home/_hub-spot-new-adopters-form.tsx
new file mode 100644
index 0000000000..18b720098f
--- /dev/null
+++ b/microsite-next/src/pages/home/_hub-spot-new-adopters-form.tsx
@@ -0,0 +1,52 @@
+import clsx from 'clsx';
+import React, { useEffect, useState } from 'react';
+
+import hubSpotStyles from './hub-spot-new-adopters-form.module.scss';
+
+export const HubSpotNewAdoptersForm = () => {
+  const [isClosed, setClosed] = useState(true);
+
+  useEffect(() => {
+    const script = document.createElement('script');
+    script.src = 'https://js.hsforms.net/forms/v2.js';
+    document.body.appendChild(script);
+
+    script.addEventListener('load', () => {
+      // @ts-ignore
+      if (window.hbspt) {
+        // @ts-ignore
+        window.hbspt.forms.create({
+          portalId: '21894833',
+          formId: '9a5aa2af-87f3-4a44-819f-88ee243bb61e',
+          target: `.${hubSpotStyles.hubSpotNewAdopterFormContent}`,
+          pageId: '79735607665',
+        });
+      }
+    });
+  }, []);
+
+  return (
+    <div
+      className={clsx(
+        hubSpotStyles.hubSpotNewAdopterFormContainer,
+        isClosed && 'adoptersFormHidden',
+      )}
+    >
+      <button
+        className="button button--primary"
+        onClick={() => {
+          setClosed(!isClosed);
+        }}
+      >
+        New Adopters
+      </button>
+
+      <div
+        className={clsx(
+          'padding-left--lg padding-vert--lg thin-scrollbar',
+          hubSpotStyles.hubSpotNewAdopterFormContent,
+        )}
+      ></div>
+    </div>
+  );
+};
diff --git a/microsite-next/src/pages/home/home.module.scss b/microsite-next/src/pages/home/home.module.scss
index 1cc4ba8238..6b33c17681 100644
--- a/microsite-next/src/pages/home/home.module.scss
+++ b/microsite-next/src/pages/home/home.module.scss
@@ -26,6 +26,10 @@ $desktopUpBreakpoint: 997px;
   :global(.bannerContent) {
     flex: 1;
   }
+
+  :global(.bannerCloseButton) {
+    color: var(--ifm-color-secondary);
+  }
 }
 
 .svgContainer {
diff --git a/microsite-next/src/pages/home/hub-spot-new-adopters-form.module.scss b/microsite-next/src/pages/home/hub-spot-new-adopters-form.module.scss
new file mode 100644
index 0000000000..83735db349
--- /dev/null
+++ b/microsite-next/src/pages/home/hub-spot-new-adopters-form.module.scss
@@ -0,0 +1,38 @@
+.hubSpotNewAdopterFormContainer {
+  top: 50%;
+  right: 0;
+  display: flex;
+  position: fixed;
+  transform: translateY(-50%);
+
+  transition: all 250ms ease-in-out;
+
+  &:global(.adoptersFormHidden) {
+    transform: translate(500px, -50%);
+  }
+
+  > button {
+    top: 50%;
+    left: -2rem;
+    position: fixed;
+
+    transform: rotate(-90deg) translateX(-50%);
+    transform-origin: top left;
+  }
+}
+
+.hubSpotNewAdopterFormContent {
+  height: 600px;
+  max-width: 500px;
+  overflow-y: hidden;
+  border-radius: 8px 0 0 8px;
+  background-color: var(--ifm-color-content);
+
+  form {
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+
+    padding-right: 2rem;
+  }
+}