Add Slack invite links to website (Contact Us, Header, Footer) (#444)

* Use permanent slack invite URI * Adjust contact us to have slack join button * Move the slack invite info below the contact us form * Tweaking the contact us slack section * fix whitespace and link icon in footer * Suggestions from PR
G-Research · Nov 3, 2023 · 4a5272d · 4a5272d
1 parent 34c06e6
commit 4a5272d
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 17 deletions.
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
@@ -16,6 +16,7 @@ module.exports = async function configCreatorAsync() {
     );
     const releaseVersion = data.tag_name.substring(1);
     const releaseUrl = data.html_url;
+    const slackUrl = 'https://join.slack.com/t/mlops-community/shared_invite/zt-258yl6ifq-zZNzBaddwlhifj56yt7ONg';
 
     /** @type {import('@docusaurus/types').Config} */
     return {
@@ -38,7 +39,7 @@ module.exports = async function configCreatorAsync() {
 
         customFields: {
             email: '[email protected]',
-            newIssueUrl: 'https://github.com/G-Research/fasttrackml/issues/new',
+            slackInviteUrl: slackUrl,
         },
 
         presets: [
@@ -89,6 +90,11 @@ module.exports = async function configCreatorAsync() {
                             label: 'GitHub',
                             position: 'right',
                         },
+                        {
+                            href: slackUrl,
+                            label: 'Join our Slack',
+                            position: 'right',
+                        },
                         {
                             href: 'https://twitter.com/oss_gr',
                             label: 'Twitter',
@@ -126,6 +132,10 @@ module.exports = async function configCreatorAsync() {
                                     label: 'GitHub',
                                     href: 'https://github.com/G-Research/fasttrackml',
                                 },
+                                {
+                                    label: 'Join our Slack',
+                                    href: slackUrl,
+                                },
                                 {
                                     label: 'Twitter',
                                     href: 'https://twitter.com/oss_gr',
@@ -173,4 +183,4 @@ module.exports = async function configCreatorAsync() {
                 ],
             }),
     };
-};
+};
diff --git a/website/src/components/Index/ContactUsSection/ContactUsSection.view.tsx b/website/src/components/Index/ContactUsSection/ContactUsSection.view.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import {useForm, SubmitHandler} from "react-hook-form";
 import styles from './ContactUsSection.module.css';
-import {openNewIssue, openNewEmail} from "@site/src/core/utils";
+import {openNewEmail} from "@site/src/core/utils";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 
 
@@ -30,11 +30,7 @@ export default function ContactUsSection(): React.JSX.Element {
         siteConfig: {customFields}
     } = useDocusaurusContext();
     const email = customFields?.email;
-    const newIssueUrl = customFields?.newIssueUrl;
-
-    const onUsingGitHub: SubmitHandler<Inputs> = data => {
-        openNewIssue(newIssueUrl as string, data.subject, getMessage(data.name, data.company, data.message));
-    };
+    const slackInviteUrl = customFields?.slackInviteUrl
 
     const onSendEmail: SubmitHandler<Inputs> = data => {
         openNewEmail(email as string, data.subject, getMessage(data.name, data.company, data.message));
@@ -44,7 +40,7 @@ export default function ContactUsSection(): React.JSX.Element {
         <div className="container padding-bottom--xl text--center">
             <h1 id="contact-us" className={clsx("section__ref")}>Contact Us</h1>
             <p>We would love to hear from you! FastTrackML is a brand new project and any contribution would make a difference!</p>
-            <form onSubmit={handleSubmit(onUsingGitHub)}>
+            <form onSubmit={handleSubmit(onSendEmail)}>
                 <div className='row'>
                     <div className='col col--6'>
                         <label htmlFor="name">Your Name</label>
@@ -82,19 +78,15 @@ export default function ContactUsSection(): React.JSX.Element {
                 </div>
                 <div className="row margin-vert--md">
                     <div className={clsx("col", styles.buttons)}>
-                        <button type="button" className="button button--outline button--primary button--lg"
+                        <button type="button" className="button button--primary button--lg"
                                 title={email as string}
                                 disabled={!isValid} onClick={handleSubmit(onSendEmail)}>
-                            📨 By Email
-                        </button>
-                        <button type="submit" className="button button--primary button--lg"
-                                title={newIssueUrl as string}
-                                disabled={!isValid}>
-                            💬 Using GitHub
+                            📨 Submit
                         </button>
                     </div>
                 </div>
             </form>
+	    <p>Or, join the <a href={slackInviteUrl} target="_blank">#fasttrackml channel on the MLOps.community Slack!</a></p>
         </div>
     </section>;
 }
diff --git a/website/src/components/Index/HeroSection/HeroSection.view.tsx b/website/src/components/Index/HeroSection/HeroSection.view.tsx
@@ -24,7 +24,7 @@ export default function HeroSection(): React.JSX.Element {
                             <Link
                                 className="button button--primary button--lg"
                                 to="/#contact-us">
-                                {`💬 Talk to Us`}
+                                {`💬 Contact Us`}
                             </Link>
                         </div>
                     </div>