Merge branch 'master' into docs/contents-revamp

docs-website/src/pages/_components/Hero/index.js

@@ -8,6 +8,7 @@ import { QuestionCircleOutlined } from "@ant-design/icons";
 import styles from "./hero.module.scss";
 import CodeBlock from "@theme/CodeBlock";
 import CardCTAs from "../CardCTAs";
+import TownhallButton from "../TownhallButton";
 
 const HeroAnnouncement = ({ message, linkUrl, linkText }) => (
   <div className={clsx("hero__alert alert alert--primary", styles.hero__alert)}>
@@ -46,6 +47,7 @@ const Hero = ({}) => {
             <Link className="button button--secondary button--md" to="https://slack.datahubproject.io">
               Join our Slack
             </Link>
+            <TownhallButton />
           </div>
         </div>
         <CardCTAs />

docs-website/src/pages/_components/TownhallButton/index.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import styles from "./townhallbutton.module.scss";
+import clsx from "clsx";
+import Link from "@docusaurus/Link";
+
+const TownhallButton = () => {
+  const today = new Date();
+  const currentDay = today.getDate();
+  const lastDayOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);
+  const lastThursday = lastDayOfMonth.getDate() - ((lastDayOfMonth.getDay() + 7 - 4) % 7);
+
+  const daysUntilLastThursday = lastThursday - currentDay;
+
+  let showButton = false;
+  let currentMonth = '';
+
+  if (daysUntilLastThursday > 0 && daysUntilLastThursday <= 14) {
+    showButton = true;
+    currentMonth = new Intl.DateTimeFormat('en-US', { month: 'long' }).format(today);
+  }
+
+  return (
+    showButton && (
+      <Link to="http://rsvp.datahubproject.io" className={clsx('button button--primary button--md', styles.feature)}>
+        Join {currentMonth} Townhall!&nbsp;✨
+      </Link>
+    )
+  );
+};
+
+export default TownhallButton;

docs-website/src/pages/_components/TownhallButton/townhallbutton.module.scss

@@ -0,0 +1,14 @@
+.feature {
+  color: white;
+  border: 1px solid transparent;
+  background-image: linear-gradient(to right, #1890ff 0%, #9c27b0 100%);
+  background-origin: border-box;
+  opacity: 90%;
+
+  &:hover {
+    opacity: 100%;
+    background: linear-gradient(to right, #1890ff 0%, #9c27b0 100%);
+    background-image: linear-gradient(to right, #1890ff 0%, #9c27b0 100%);
+    background-origin: border-box;
+  }
+}