160 add links to slack channel and mailing list (#161)

* add connect with us section * update the connect with us section * also add to dropdown * inquires to questions * update text * center everything * lowercase s
IN-CORE · Nov 2, 2023 · 3ac6305 · 3ac6305
1 parent 43a0894
commit 3ac6305
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 26 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
 
+### Added
+- Links to Slack channel and mailing list to the landing page [#160](https://github.com/IN-CORE/incore-ui/issues/160)
+
 ### Changed
 - Missing Filters title for both Data viewer and Semantics Viewer [#156](https://github.com/IN-CORE/incore-ui/issues/156)
 - Semantic viewer needs to show description [#157](https://github.com/IN-CORE/incore-ui/issues/157)

diff --git a/src/app.config.js b/src/app.config.js
@@ -8,6 +8,7 @@ config["client_id"] = "react-auth";
 config["pyIncoreDocUrl"] = `${hostname}/doc/pyincore/index.html`;
 config["pyIncoreVizDocUrl"] = `${hostname}/doc/pyincore_viz/index.html`;
 config["pyIncoreDataDocUrl"] = `${hostname}/doc/pyincore_data/index.html`;
+config["incoreDocUrl"] = `${hostname}/doc/incore/introduction.html`;
 config["swaggerUrl"] = `${hostname}/doc/api/`;
 config["webVersion"] = "1.8.0";
 config["spaceServiceBase"] = `${hostname}/space/api/`;
@@ -36,5 +37,7 @@ config["playbookImageDetails"] = [
 ];
 
 config["mailingList"] = "[email protected]";
+config["slackInvitationLink"] = "https://bit.ly/in-core";
+config["slackWorkspaceLink"] = "https://in-core.slack.com";
 
 export default config;
diff --git a/src/components/App.jsx b/src/components/App.jsx
@@ -347,6 +347,16 @@ class App extends Component {
 							Contact Us
 						</Link>
 					</MenuItem>
+					<MenuItem
+						className={classes.denseStyle}
+						onClick={() => {
+							this.handleProfileMenuClose();
+						}}
+					>
+						<Link href={config.slackInvitationLink} target="_blank" style={{ textDecoration: "none" }}>
+							Join Slack
+						</Link>
+					</MenuItem>
 					<MenuItem
 						className={classes.denseStyle}
 						onClick={() => {

diff --git a/src/components/HomePage.jsx b/src/components/HomePage.jsx
@@ -1,8 +1,11 @@
-import React, { Component } from "react";
-import { Chip, Container, Grid, Link, Typography } from "@material-ui/core";
-import { withStyles } from "@material-ui/core/styles";
+import React, {Component} from "react";
+import {Chip, Container, Grid, Link, Typography, Box} from "@material-ui/core";
+import {withStyles} from "@material-ui/core/styles";
 import Version from "./children/Version";
-import { getRepoVersion } from "../actions/index";
+import {getRepoVersion} from "../actions/index";
+import config from "../app.config";
+import Button from "@material-ui/core/Button";
+import MailOutlineIcon from "@material-ui/icons/MailOutline";
 
 const styles = (theme) => ({
 	root: {
@@ -61,6 +64,13 @@ const styles = (theme) => ({
 		textAlign: "center",
 		marginTop: theme.spacing(2)
 	},
+	connectWithUs: {
+		padding: "3em",
+		margin: "2em auto",
+		borderRadius: "0.5em",
+		background: "#eeeeee",
+		textAlign: "center"
+	},
 	versionSection: {
 		margin: theme.spacing(0.5)
 	},
@@ -286,52 +296,83 @@ class HomePage extends Component {
 	}
 
 	render() {
-		const { classes } = this.props;
+		const {classes} = this.props;
 
 		return (
 			<div>
 				{/*header*/}
 				<section className={classes.root}>
 					<Container className={classes.container}>
-						<img src="/public/resilience-logo.png" />
+						<img src="/public/resilience-logo.png"/>
 						<Typography color="inherit" align="center" variant="h5" className={classes.h5}>
 							{this.state.subTitle}
 						</Typography>
 						<Typography variant="body1" color="inherit" className={classes.more}>
 							The{" "}
-							<a href="https://www.nist.gov" className={classes.link} target="_blank">
+							<Link href="https://www.nist.gov" className={classes.link} target="_blank">
 								National Institute of Standards and Technology (NIST)
-							</a>{" "}
+							</Link>{" "}
 							funded the multi-university five-year{" "}
-							<a href="http://resilience.colostate.edu" className={classes.link} target="_blank">
+							<Link href="http://resilience.colostate.edu" className={classes.link} target="_blank">
 								Center of Excellence for Risk-Based Community Resilience Planning (CoE)
-							</a>
+							</Link>
 							, headquartered at{" "}
-							<a href="https://www.colostate.edu" className={classes.link} target="_blank">
+							<Link href="https://www.colostate.edu" className={classes.link} target="_blank">
 								Colorado State University
-							</a>
+							</Link>
 							, to develop the measurement science to support community resilience assessment. Measurement
 							science is implemented on a platform called{" "}
-							<a
+							<Link
 								href="http://resilience.colostate.edu/in_core.shtml"
 								className={classes.link}
 								target="_blank"
 							>
 								Interdependent Networked Community Resilience Modeling Environment (IN-CORE)
-							</a>
+							</Link>
 							. On IN-CORE, users can run scientific analyses that model the impact of natural hazards and
 							resiliency against the impact on communities. The IN-CORE platform is built on a{" "}
-							<a href="https://kubernetes.io" className={classes.link} target="_blank">
+							<Link href="https://kubernetes.io" className={classes.link} target="_blank">
 								Kubernetes cluster
-							</a>{" "}
+							</Link>{" "}
 							with
-							<a href="https://www.docker.com" className={classes.link} target="_blank">
+							<Link href="https://www.docker.com" className={classes.link} target="_blank">
 								{" "}
 								Docker
-							</a>{" "}
+							</Link>{" "}
 							container technology.
 						</Typography>
 
+						<Box className={classes.connectWithUs}>
+							<Typography>
+								Got questions or need assistance? Join us on&nbsp;
+								<Link href={config.slackInvitationLink} target="_blank" className={classes.link}>
+									Slack</Link> and say hi in the <b>#general</b> channel. For specific questions,
+								head over to the <b>#in-core</b> channel. You can also reach out via&nbsp;
+								<Link href={`mailto:${config.mailingList}`} className={classes.link}>email</Link> or
+								check out our <Link href={config.incoreDocUrl} target="_blank" className={classes.link}>
+								documentation</Link> for more information.
+							</Typography>
+							<Box style={{margin:"1em auto"}}>
+								<Button href={config.slackInvitationLink}
+										target="_blank"
+										variant="contained" color="primary"
+										className={classes.button}
+										style={{marginRight: "1em"}}
+								>
+									<img src="/public/slack-logo.png" style={{ height: "1em", marginRight: "8px"}}/>
+									Join Slack
+								</Button>
+								<Button href={`mailto:${config.mailingList}`}
+										variant="contained"
+										color="primary"
+										className={classes.button}
+										startIcon={<MailOutlineIcon />}
+								>
+									Email Us
+								</Button>
+							</Box>
+						</Box>
+
 						{/*if version exists, display version; otherwise just the text*/}
 						{this.state.githubVersions && this.state.githubVersions["in-core"] ? (
 							<Chip
@@ -380,19 +421,19 @@ class HomePage extends Component {
 								</div>
 							))}
 						</div>
-						<div className={classes.backdrop} />
-						<div className={classes.background} />
+						<div className={classes.backdrop}/>
+						<div className={classes.background}/>
 					</Container>
 				</section>
-				<section className={classes.sectionLight} />
+				<section className={classes.sectionLight}/>
 				{/*products*/}
 				<section className={classes.sectionDark}>
 					<Container className={classes.sectionContainers}>
 						<Grid container spacing={4}>
 							{this.state.sections.map((section) => (
 								<Grid item xs={12} md={3}>
 									<div className={classes.item}>
-										<img className={classes.image} src={section.image} />
+										<img className={classes.image} src={section.image}/>
 										<div className={classes.title}>
 											{section.titles.map((title) => (
 												<Typography variant="h6">{title}</Typography>
@@ -421,17 +462,17 @@ class HomePage extends Component {
 										spacing={2}
 									>
 										<Grid item className={classes.icons}>
-											<a href={footerLogo.url} target="_blank">
-												<img src={footerLogo.image} className={classes.icon} />
-											</a>
+											<Link href={footerLogo.url} target="_blank">
+												<img src={footerLogo.image} className={classes.icon}/>
+											</Link>
 										</Grid>
 									</Grid>
 								</Grid>
 							))}
 						</Grid>
 					</Container>
 					{/*version*/}
-					<Version />
+					<Version/>
 				</section>
 			</div>
 		);

diff --git a/src/public/slack-logo.png b/src/public/slack-logo.png