Merge pull request #102 from CodeWithGroup/feature/discord-info

Adds a Discord information page

Author: dangerworm

_data/discordQuestions/cantHearAnything.yaml

@@ -0,0 +1,7 @@
+name: "cantHearAnything"
+question: "I can't hear anything!?!"
+answer: "<p>
+    Make sure your speakers/headphones are plugged in/turned on. Make sure your system
+    volume is turned up.
+</p>
+"

_data/discordQuestions/cantSeePresentation.yaml

@@ -0,0 +1,8 @@
+name: "cantSeePresentation"
+question: "I can't see the presentation!"
+answer: "<p>
+    Click on the channel name (on the left of the screen) and you will see everyone's pictures. One of them will have a
+    button saying \"Watch Stream\". Click this button.
+    <img class=\"discord-image mg-fluid\" width=\"300\" src=\"../images/discord/discord-watch-stream.png\">
+</p>
+"

_data/discordQuestions/imTalkingCantHear.yaml

@@ -0,0 +1,21 @@
+name: "imTalkingCantHear"
+question: "I'm talking but you can't hear me!"
+answer: "<p>
+    Make sure your microphone/headset is plugged in/turned on. Make sure your microphone is set in the settings.
+</p>
+<p> You can see settings by clicking the gear icon.
+</p>
+<img class=\"discord-image mg-fluid\" width=\"300\" src=\"../images/discord/discord-setting-button.png\">
+
+<p>Click \"Voice and Video\" </p>
+<img class=\"discord-image mg-fluid\" width=\"300\" src=\"../images/discord/discord-voice.png\">
+
+<p>Make Sure your microphone is selected here:</p>
+
+<img class=\"discord-image mg-fluid\" width=\"500\" src=\"../images/discord/discord-microphone-dropdown.png\">
+
+<p>You can test it by clicking the \"Let's Check\" button:</p>
+
+<img class=\"discord-image mg-fluid\" width=\"500\" src=\"../images/discord/discord-mic-test.png\">
+
+"

_data/questions/discord.yaml

@@ -7,4 +7,6 @@ answer: "<p>
 
     Once you have joined the server, check your email before the event which will tell you which channel to join. Most
     of our events will start at the Main Stage channel.
-</p>"
+
+    
+</p><p>If you would like more information about using Discord then you can see our <a href=\"!SITE_URL!/discord\">Discord guide</a>.</p>"

_layouts/default.html

@@ -22,7 +22,7 @@ <h1 class="cover-heading">CODEWITH<span id="small-screen-break"><br /></span><sp
                 </div>
             </div>
             <div class="row unpadded">
-                <div class="col-lg-10">
+                <div class="col-l-12 col-xl-10">
                     {{content}}
                 </div>
             </div>

css/style.css

@@ -471,6 +471,17 @@ div.event-book-button {
     text-decoration: none;
 }
 
+/*Discord*/
+
+.discord-image{
+    padding-top:10px;
+    padding-bottom:10px;
+}
+
+.discord-cols{
+    padding:10px;
+}
+
 /* RESIZING (min-width) */
 
 @media screen and (min-width: 576px) {

discord.html

@@ -0,0 +1,177 @@
+---
+permalink: /discord/
+layout: default
+suffixes:
+- Committee,
+- Equity,
+- History,
+- Leadership,
+- Publicity,
+- Support,
+- Us
+title: Discord
+---
+
+<h1>{{page.title}}</h1>
+
+<h2>Index</h2>
+<ul>
+    <li><a href="#beforetheevent">Before the event</a></li>
+    <li><a href="#joiningTheEvent">Joining the event</a></li>
+    <li><a href="#controls">Controls</a></li>
+    <li><a href="#troubleshooting">Troubleshooting</a></li>
+</ul>
+
+<a name="beforetheevent"></a>
+<h2>Before the event</h2>
+<p>
+    There are lots of ways to join us, but the most reliable method is to use a
+    'proper' computer or laptop, and log into Discord in Microsoft Edge or Google Chrome.
+    Safari does <b>not</b> work.
+</p>
+<p>
+    It is possible to join using your mobile phone or tablet (e.g. iPad), but be aware that you may
+    be missing the chat functionality and you may not be able to participate in any of the
+    interactive parts of the session. Again, if using an iPad please make sure you have a browser
+    other than Safari.
+</p>
+<p>
+    Some workshops include "code-alongs" where you need to use a 'proper' computer to be able to access the session. If
+    you are not sure, feel free to contact the organisers via the <a href="{{site.url}}\contact">contact us</a> page.
+</p>
+<p>
+    Don't worry, you won't need to install anything! The webinar will be hosted on CodeWith's Discord server. You simply
+    follow the link in the email which will open
+    up in a web browser.
+</p>
+
+<div class="row unpadded">
+    <div class="col">
+        <p class="back-to-top">
+            <a href="#">Back to top</a>
+        </p>
+    </div>
+</div>
+
+
+<a name="joiningTheEvent"></a>
+<h2>Joining the event</h2>
+<p>When you follow the invite link, you should see the following message.</p>
+
+
+<img class="discord-image img-fluid" width="200" src="../images/discord/discord-signup.png">
+
+<p>
+    You can either use the Discord app or, if you don’t have Discord
+    installed, we recommend you join on the web. Click the button shown:
+</p>
+
+<img class="discord-image img-fluid" width="200" src="../images/discord/discord-web.png">
+
+<p>
+    You can then sign up or log into an existing account.
+</p>
+
+<div class="row">
+    <div class="discord-cols col-m-12 col-l-6">
+        <h3>Register</h3><img width="200" class="discord-image img-fluid" src="../images/discord/discord-create.png">
+    </div>
+    <div class="discord-cols col-m-12 col-l-6">
+        <h3>Log in</h3><img width="200" class="discord-image img-fluid" src="../images/discord/discord-login.png">
+    </div>
+</div>
+
+
+<p>Once you are logged in (either by signing up or using an existing account) you can select a channel by clicking on
+    its name on the left of the screen. </p>
+
+<p>
+    Your browser might ask if Discord can use your microphone. Click <b>Allow</b> – don't
+    worry, you can turn it off whenever you like. Turning this on will allow you to ask questions
+    using your microphone during intervals.
+</p>
+<img class="discord-image img-fluid" src="../images/discord/discord-microphone.png">
+<p>
+    If you would like to use your webcam on Discord, select the video button. It will open another dialog box. Click
+    <b>Allow</b> – don’t
+    worry, you can turn it off whenever you like.
+</p>
+
+
+<div class="row">
+    <div class="discord-cols col-m-12 col-l-6">
+        <img class="discord-image img-fluid" src="../images/discord/discord-video.png">
+    </div>
+    <div class="discord-cols col-m-12 col-l-6">
+        <img class="discord-image img-fluid" src="../images/discord/discord-camera.png">
+    </div>
+</div>
+
+<p>
+    Your name should appear underneath the channel name. It will then show the other people in
+    the channel.</p>
+<img class="discord-image img-fluid" src="../images/discord/discord-list.png">
+
+<p>
+    To join the channel click the name, it will look something like this:</p>
+<img class="discord-image img-fluid" src="../images/discord/discord-call.png">
+
+<p>
+    You can click on the <b>Event Chat</b> channel to use text chat. You can use this to ask questions
+    throughout the session. The host may answer during the session, or one of the mentors
+    may respond in the Event Chat.
+</p>
+
+<div class="row unpadded">
+    <div class="col">
+        <p class="back-to-top">
+            <a href="#">Back to top</a>
+        </p>
+    </div>
+</div>
+
+<a name="controls"></a>
+<h2>Controls</h2>
+<div class="row">
+    <div class="discord-cols col-m-12 col-l-4">
+        <h3>Microphone Mute</h3><img class="discord-image img-fluid" src="../images/discord/discord-buttons.png">
+    </div>
+    <div class="discord-cols col-m-12 col-l-4">
+        <h3>Video On/Off</h3><img class="discord-image img-fluid" width="300" src="../images/discord/discord-video.png">
+    </div>
+    <div class="discord-cols col-m-12 col-l-4">
+        <h3>Event Chat</h3><img class="discord-image img-fluid" width="300" src="../images/discord/discord-event-chat.png">
+    </div>
+</div>
+
+
+
+
+<h3>Screen Share</h3>
+<div class="row">
+    <div class="discord-cols col-m-12 col-l-6">
+        <h4>Step 1</h4><img class="discord-image img-fluid" src="../images/discord/discord-screen-1.png">
+    </div>
+    <div class="discord-cols col-m-12 col-l-6">
+        <h4>Step 2</h4><img class="discord-image img-fluid" width="300" src="../images/discord/discord-screen-2.png">
+    </div>
+</div>
+
+<div class="row unpadded">
+    <div class="col">
+        <p class="back-to-top">
+            <a href="#">Back to top</a>
+        </p>
+    </div>
+</div>
+<a name="troubleshooting"></a>
+<h2>Troubleshooting</h2>
+
+<div id="accordion">
+    {% for question_hash in site.data.discordQuestions %}
+    {% assign question = question_hash[1] %}
+    {% include_relative _includes/question.html question=question %}
+    {% endfor %}
+</div>
+
+

events.html

@@ -20,6 +20,9 @@ <h1>{{page.title}}</h1>
     which applies to all events we run. All speakers, mentors, and attendees must agree with this; it helps us all to
     understand the community&apos;s shared values and provides clear guidelines on how we should behave.
 </p>
+
+<p>Attending an online event? Check out our <a href="{{site.url}}/discord">Discord guide</a>.</p>
+
 <p>
     Get our events in your calendar:
     <br>