Merge pull request #135 from liftbridge-io/add_slack

Add slack

README.md

@@ -20,6 +20,11 @@ for more context and some of the inspiration behind it.
 - [FAQ](https://liftbridge.io/docs/faq.html)
 - [Website](https://liftbridge.io)
 
+## Community
+
+- [Slack](https://liftbridge.slack.com) - click [here](https://liftbridge.io/help.html) to request an invite
+- [Twitter](https://twitter.com/liftbridge_io)
+
 
 [License-Url]: https://www.apache.org/licenses/LICENSE-2.0
 [License-Image]: https://img.shields.io/badge/License-Apache2-blue.svg

website/pages/en/help.js

@@ -27,6 +27,17 @@ function Help(props) {
                'and submit issues. Create pull requests to contribute bug fixes and new features.',
       title: 'GitHub',
     },
+    {
+      content: '<div class="slack-signup">' + 
+                 '<h2>Join the Slack Community</h2>' +
+                 '<p>Want to talk with project maintainers, contributors, and the community? Join the Liftbridge Slack channel by requesting an invitation below.</p>' +
+                 '<form action="//docs.google.com/forms/u/1/d/e/1FAIpQLSd_-F2yXdoL7zVpZwFxrZrNgHF2aqT5qLYNCNiv14t4NlxDdg/formResponse" method="post" target="_blank">' +
+                   '<input class="form-input" type="email" autocomplete="email" name="emailAddress" placeholder="Email Address">' +
+                   '<input class="form-submit" type="submit" value="Invite Me">' +
+                 '</form>'+
+                '</div>',
+      title: '',
+    },
   ];
 
   return (

website/static/css/custom.css

@@ -47,3 +47,62 @@ a {
   margin-bottom: 20px !important;
   font-size: 20px;
 }
+
+.slack-signup {
+  text-align: center;
+  color: #666;
+  display: block;
+  max-width: 80%;
+  height: auto;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 30px;
+  margin-bottom: 30px;
+  padding-top: 10px;
+  padding-bottom: 20px;
+  padding-left: 30px;
+  padding-right: 20px;
+  box-shadow: 2px 2px 0px #edefed, -2px -2px 0px #edefed, 2px -2px 0px #edefed, -2px 2px 0px #edefed;
+}
+
+.slack-signup h2 {
+  margin-top: 10px;
+  margin-bottom: 20px;
+}
+
+.form-input,
+.form-submit {
+    display: inline-block;
+    padding: 10px 15px;
+    font-size: 20px;
+    border-radius: 0;
+    -webkit-appearance: none;
+}
+
+.form-input {
+    border: 1px solid lightgray;
+    margin-bottom: 10px;
+}
+
+.form-submit {
+    color: white;
+    background-color: #3B4763;
+    /**
+     * If the input field has a border,
+     * you need it here too to achieve equal heights.
+     */
+    border: 1px solid transparent;
+    cursor: pointer;
+}
+
+.form-submit:hover {
+    background-color: #323859;
+}
+
+/**
+ * Firefox Fix
+ * Without that the submit button will be too high.
+ */
+.form-submit::-moz-focus-inner { 
+    border: 0;
+}