Modified setup procedure

.gitignore

@@ -2,3 +2,4 @@
 **/__pycache__/
 venv
 !.gitignore
+**/*.env

.gitmodules

@@ -1,3 +1,4 @@
 [submodule "annbot"]
-	path = annbot
-	url = [email protected]:makeopensource/annbot.git
+    path = annbot
+    url = [email protected]:makeopensource/annbot.git
+    branch = main

Makefile

@@ -0,0 +1,33 @@
+
+# builds the pre-requisite materials needed for running
+# the application
+build: web annbot
+
+# Start the server
+up: build
+	docker compose up -d --build
+
+# Shut the server down
+down:
+	docker compose down
+
+# Restart the server
+restart: all
+	docker compose restart
+
+web: web/Dockerfile
+
+annbot: annbot/Dockerfile annbot/.env
+
+annbot/.env: config.py
+	python3 config.py
+
+annbot/Dockerfile: annbot/
+	git submodule init annbot
+	git submodule update --recursive
+
+clean:
+	git submodule deinit --all -f
+
+.PHONY:
+	build up down restart web annbot clean

README.md

@@ -0,0 +1,26 @@
+# makeopensource.org
+
+This repo contains all content and programs for makeopensource.org. 
+
+Web content is stored in `web/data` and `web/templates`. The announcement
+bot is in `annbot/`.
+
+## Prerequisites
+
+* Git
+* Docker/Docker-Compose
+
+## Setup/Configuration
+
+1. To begin, run `$ make` to configure the submodules.
+
+2. Open `annbot/.env`, and enter a discord bot token, and the id of the 
+announcements channel in their respective places (in between the quotes).
+
+3. Open `docker-compose.yml` to configure both the host and port for the
+   applications.
+
+## Run
+
+Run `$ make up` to build the docker container and run it. See `Makefile` for
+additional commands for controlling the composed container set.

config.py

@@ -0,0 +1,13 @@
+if __name__ == "__main__":
+    print("-"*20)
+
+    token = input("please enter your Discord API Token\nToken: ")
+
+    print("-"*20)
+
+    channel_id = input("please enter the Channel ID of the Discord Channel you want to read\nChannel ID: ")
+
+    with open("annbot/.env", "w") as file:
+        file.write(f"TOKEN=\"{token}\"\nCHANNEL_ID=\"{channel_id}\"\n")
+
+    print("\ndone!")

docker-compose.yml

@@ -1,12 +1,27 @@
-version: '3.3'
+version: '3.9'
 services:
   mongo:
     image: mongo:4.2.5
+    deploy:
+      restart_policy:
+        condition: any
   web:
     build: web
     environment:
       WAIT_HOSTS: mongo:27017
     ports:
       - '8080:8000'
+    deploy:
+      restart_policy:
+        condition: any
   annbot:
     build: annbot
+    environment:
+      - HOST=web
+      - PORT=8000
+    env_file:
+      - annbot/.env
+    deploy:
+      restart_policy:
+        condition: any
+

web/data/about.yml

@@ -24,3 +24,11 @@ admins:
 - name:     Nick Brown
   position: Vice President
   image:    assets/nick-brown.jpeg
+
+- name:     Dylan Zinsley
+  position: Event Coordinator
+  image:    assets/icon-rounded-80px.png
+
+- name:     Muhammad Niaz
+  position: Treasurer
+  image:    assets/icon-rounded-80px.png

web/static/css/web.css

@@ -20,29 +20,61 @@ b {
     font-weight: 500;
 }
 
-.program-list {
+.hero {
+    font-size: 30px;
+    line-height: 3rem;
+    padding: 20px 40px;
+    background-color: orange;
+    font-family: "fira mono";
 }
 
-.program-link {
+.program-list {
     display: flex;
+    flex-wrap: wrap;
+}
+
+.program {
     align-items: center;
-    text-decoration: none;
+}
+
+.program-link {
     color: none;
 }
 
 .program-link img {
-    height: 20px;
-    margin-right: 10px;
+    height: 30px;
+    margin-right: 20px;
+}
+
+.program-link p {
+    margin-right: 20px;
+}
+
+.admin-list {
 }
 
 .admin {
     display: flex;
     align-items: center;
+    margin-bottom: 20px;
 }
 
 .admin img {
-    height: 50px;
+    height: 80px;
     margin-right: 10px;
+    border-radius: 100px;
+}
+
+.admin p {
+    margin-block-end: 0;
+}
+
+.admin-name {
+    font-weight: var(--xheavy);
+}
+
+.admin-position {
+    color: var(--blue);
 }
 
 .discord-announcement {
@@ -64,6 +96,10 @@ b {
     margin: 0 10px 10px 0;
 }
 
+.emoji {
+    width: 25px;
+}
+
 .channel {
     font-weight: var(--heavy);
     color: var(--blue);

web/templates/_nav.html

@@ -4,7 +4,8 @@
 	{% block title %}<title>MakeOpenSource</title>{% endblock %}
 
 	<link rel="icon" type="image" href=""/>
-    <link rel="stylesheet" type="text/css" href="static/css/makeopensource-style-guide.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/makeopensource/WebStyles/dist/css/webstyles.css" />
+    <!-- <link rel="stylesheet" type="text/css" href="static/css/makeopensource-style-guide.css" /> -->
     <link rel="stylesheet" type="text/css" href="static/css/web.css" />
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -20,12 +21,12 @@
         <a href="/announcements" class="navlink">Announcements</a>
         <a href="/about" class="navlink">About</a>
         <a href="/github" class="navlink">GitHub</a>
-        <a href="/matrix" class="navlink">Matrix</a>
         <a href="/calendar" class="navlink">Calendar</a>
 	</div>
     <div class="page">
 	    <div>{% block content %}{% endblock %}</div>
     </div>
+    <script src="https://cdn.jsdelivr.net/gh/makeopensource/WebStyles/dist/js/webstyles.js"></script>
 
   </body>
 </html>

web/templates/about.html

@@ -7,23 +7,27 @@ <h1>About</h1>
     <h2>Software</h2>
     <div class="program-list">
     {% for program in software %}
-        <a class="program-link" href="{{ program.url }}">
-            <img src="{{ program.icon }}">
-            <p>{{ program.name }}</p>
-        </a> 
+        <div class="program">
+            <a class="program-link" href="{{ program.url }}">
+                <!-- <img src="{{ program.icon }}">-->
+                <p>{{ program.name }}</p>
+            </a> 
+        </div>
     {% endfor %}
     </div>
 
     <h2>Our Team</h2>
 
+    <div class="admin-list">
     {% for admin in admins %}
         <div class="admin">
             <img src="{{ admin.image }}">
-            <p>
-                <b>{{ admin.position }}</b><br>
-                {{ admin.name }}
-            </p>
+            <div>
+                <p class="admin-name">{{ admin.name }}</p>
+                <p class="admin-position">{{ admin.position }}</p> 
+            </div>
         </div>
     {% endfor %}
+    </div>
 </div>
 {% endblock %} 

web/templates/announcements.html

@@ -2,7 +2,13 @@
 
 {% block content %}
 <h1>Announcements</h1>
-{% for ann in announcements %}
+
+<p>
+    A list of all announcements made in our course. Follow our <a href="/about">social media</a>
+    to keep up to date!
+</p>
+
+{% for ann in announcements %} 
     <div class="discord-announcement">
         {{ ann['createdAt']}}<br>
         <b>{{ ann['author'] }}</b><br><br>

web/templates/index.html

@@ -1,15 +1,30 @@
 {% extends "_nav.html" %}
 
 {% block content %}
-<div >
-    <h1>Welcome to MakeOpenSource, 
-        University at Buffalo's dedicated 
-        Open Source club 😄</h1>
+<div class="hero">
+    Welcome to <b>MakeOpenSource</b>, 
+    University at Buffalo's dedicated 
+    Open Source club!
 </div>
 
 <div>
 
 	<div>
+        <h2>Our Mission</h2>
+        <p>
+            MakeOpenSource's goal is to create a community of programmers 
+            and developers (of any skill level!) who can collaborate and 
+            contribute to one another's projects.
+        </p>
+
+        <h2>Open Source for All</h2>
+        <p>
+            Just as you don't have to be a computer scientist to have an 
+            interest in programming, you don't have to be a computer science 
+            major to be a part of MakeOpenSource. If you want to strengthen 
+            your programming knowledge, MakeOpenSource's events are a great 
+            opportunity to do so.
+        </p>
 		<h2>Learn More</h2>
 		<p>
         To learn more, visit the <a href="/about/">About</a> page or