Add community section to README.md and website

README.md

@@ -143,6 +143,17 @@ vscode ➜ /workspaces/fasttrackml (main) $ make run
 ```
 </details>
 
+### Community
+
+We invite you to join our community on Slack:
+
+- If you haven't joined the `MLOps.community` workspace yet, please sign
+  up [here](https://join.slack.com/t/mlops-community/shared_invite/zt-258yl6ifq-zZNzBaddwlhifj56yt7ONg).
+- Once you're a member, feel free to join us in
+  the [#fasttrackml](https://mlops-community.slack.com/archives/C05ALNZ1XJN) channel.
+
+We look forward to seeing you there!
+
 ### License
 
 Copyright 2022-2023 G-Research

website/docusaurus.config.js

@@ -16,7 +16,8 @@ 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';
+    const slackWorkspaceInviteUrl = 'https://join.slack.com/t/mlops-community/shared_invite/zt-258yl6ifq-zZNzBaddwlhifj56yt7ONg';
+    const slackChannelUrl = 'https://mlops-community.slack.com/archives/C05ALNZ1XJN';
 
     /** @type {import('@docusaurus/types').Config} */
     return {
@@ -39,7 +40,8 @@ module.exports = async function configCreatorAsync() {
 
         customFields: {
             email: '[email protected]',
-            slackInviteUrl: slackUrl,
+            slackWorkspaceInviteUrl: slackWorkspaceInviteUrl,
+            slackChannelUrl: slackChannelUrl,
         },
 
         presets: [
@@ -73,25 +75,31 @@ module.exports = async function configCreatorAsync() {
                     items: [
                         // left
                         {
-                            to: '/#quickstart',
+                            to: '#quickstart',
                             label: 'Quickstart',
                             position: 'left',
                             activeBaseRegex: `dummy-never-match`,
                         },
                         {
-                            to: '/#contact-us',
+                            to: '#contact-us',
                             label: 'Contact Us',
                             position: 'left',
                             activeBaseRegex: `dummy-never-match`,
                         },
+                        {
+                            to: '#community',
+                            label: 'Community',
+                            position: 'left',
+                            activeBaseRegex: `dummy-never-match`,
+                        },
                         // right
                         {
                             href: 'https://github.com/G-Research/fasttrackml',
                             label: 'GitHub',
                             position: 'right',
                         },
                         {
-                            href: slackUrl,
+                            to: '#community',
                             label: 'Join our Slack',
                             position: 'right',
                         },
@@ -109,19 +117,19 @@ module.exports = async function configCreatorAsync() {
                             items: [
                                 {
                                     label: 'Quickstart',
-                                    to: '/#quickstart',
+                                    to: '#quickstart',
                                 },
                                 {
                                     label: `Contact Us`,
-                                    to: '/#contact-us',
+                                    to: '#contact-us',
                                 },
                                 {
                                     label: `Report an Issue`,
-                                    to: 'https://github.com/G-Research/fasttrackml/issues',
+                                    href: 'https://github.com/G-Research/fasttrackml/issues',
                                 },
                                 {
                                     label: `Create a Pull Request`,
-                                    to: 'https://github.com/G-Research/fasttrackml/pulls',
+                                    href: 'https://github.com/G-Research/fasttrackml/pulls',
                                 },
                             ],
                         },
@@ -134,7 +142,7 @@ module.exports = async function configCreatorAsync() {
                                 },
                                 {
                                     label: 'Join our Slack',
-                                    href: slackUrl,
+                                    to: '#community',
                                 },
                                 {
                                     label: 'Twitter',

website/src/components/Index/CommunitySection/CommunitySection.module.css

@@ -0,0 +1,2 @@
+.section {
+}

website/src/components/Index/CommunitySection/CommunitySection.view.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './CommunitySection.module.css';
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+
+export default function CommunitySection(): React.JSX.Element {
+    const {
+        siteConfig: {customFields}
+    } = useDocusaurusContext();
+    const slackWorkspaceInviteUrl = customFields?.slackWorkspaceInviteUrl as string;
+    const slackChannelUrl = customFields?.slackChannelUrl as string;
+
+    return (
+        <section className={clsx(styles.section)}>
+            <div className="container padding-bottom--xl text--center">
+                <h1 id="community" className={clsx("section__ref")}>Community</h1>
+                <p>We invite you to join our community on Slack:</p>
+                <p>
+                    - If you haven't joined the <strong>MLOps.community</strong> workspace yet, please sign
+                    up <a
+                    href={slackWorkspaceInviteUrl} target="_blank">here</a>.
+                </p>
+                <p>
+                    - Once you're a member, feel free to join us in the{` `}
+                    <strong><a href={slackChannelUrl} target="_blank">#fasttrackml</a></strong> channel.
+                </p>
+                <p>We look forward to seeing you there!</p>
+            </div>
+        </section>
+    );
+}

website/src/components/Index/CommunitySection/index.ts

@@ -0,0 +1 @@
+export {default as default} from './CommunitySection.view';

website/src/components/Index/ContactUsSection/ContactUsSection.view.tsx

@@ -30,16 +30,16 @@ export default function ContactUsSection(): React.JSX.Element {
         siteConfig: {customFields}
     } = useDocusaurusContext();
     const email = customFields?.email;
-    const slackInviteUrl = customFields?.slackInviteUrl
 
     const onSendEmail: SubmitHandler<Inputs> = data => {
         openNewEmail(email as string, data.subject, getMessage(data.name, data.company, data.message));
     };
 
     return <section>
-        <div className="container padding-bottom--xl text--center">
+        <div className="container 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>
+            <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(onSendEmail)}>
                 <div className='row'>
                     <div className='col col--6'>
@@ -86,7 +86,6 @@ export default function ContactUsSection(): React.JSX.Element {
                     </div>
                 </div>
             </form>
-	    <p>Or, join the <a href={slackInviteUrl} target="_blank">#fasttrackml channel on the MLOps.community Slack!</a></p>
         </div>
     </section>;
 }

website/src/pages/Index/Index.view.tsx

@@ -5,6 +5,7 @@ import HeroSection from '@site/src/components/Index/HeroSection';
 import FeaturesSection from '@site/src/components/Index/FeaturesSection';
 import QuickStartSection from '@site/src/components/Index/QuickStartSection';
 import ContactUsSection from '@site/src/components/Index/ContactUsSection';
+import CommunitySection from '@site/src/components/Index/CommunitySection';
 
 
 export default function Home(): React.JSX.Element {
@@ -18,6 +19,7 @@ export default function Home(): React.JSX.Element {
                 <FeaturesSection/>
                 <QuickStartSection/>
                 <ContactUsSection/>
+                <CommunitySection/>
             </main>
         </Layout>
     );