Clean website and add calendar integration

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

README.md

@@ -1,49 +1,163 @@
-# MBAZA-NLP WEBSITE
+<a name="readme-top"></a>
 
-## Table of Contents
 
-* [Tech stack and main functions](#tech-stack)
-* [Include how to contribute, push to the website](#how-to-contribute)
-* [PR template](#pr-template)
-* [Issue template](#issue-template)
-* [Community Channels](#community-channels)
-* [Contributers](#contributers)
+[![Contributors][contributors-shield]][contributors-url]
+[![Issues][issues-shield]][issues-url]
 
 
 
-## tech-stack
-* [HTML](https://www.w3schools.com/html/)
-* [JAVASCRIPT](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
+<!-- PROJECT LOGO -->
+<br />
+<div align="center">
+  <a href="https://github.com/MBAZA-NLP/community.website">
+    <img src="assets/img/logo/MBAZA-LOGO-WHITE.png" alt="Logo" width="80" height="80">
+  </a>
 
+  <h3 align="center">MBAZA NLP Community website</h3>
 
+  <p align="center">
+    A guide on how to  contribute to the community website!
+    <br />
+    <a href="https://www.mbaza.org">View Website</a>
+    ·
+    <a href="https://github.com/MBAZA-NLP/community.website/issues">Report Bug</a>
+    ·
+    <a href="https://github.com/MBAZA-NLP/community.website/issues">Request Feature</a>
+  </p>
+</div>
 
-## how-to-contribute
- ``` bash
- # Raise a PR from your feature branch dev branch
- # Wait for a review
- # Your changes Will merged by the reviewer
- ```
 
 
+  <summary>Table of Contents</summary>
+  <ol>
+    <li>
+      <a href="#about-the-project">About The Project</a>
+      <ul>
+        <li><a href="#built-with">Built With</a></li>
+      </ul>
+    </li>
+    <li>
+      <a href="#getting-started">Getting Started</a>
+      <ul>
+        <li><a href="#prerequisites">Prerequisites</a></li>
+      </ul>
+    </li>
+    <li><a href="#usage">Usage</a></li>
+    <li><a href="#roadmap">Roadmap</a></li>
+    <li><a href="#contributing">Contributing</a></li>
+    <li><a href="#contact">Contact</a></li>
+  </ol>
 
-## pr-template
-* [Template](.github/pull_request_template.md)
+<!-- ABOUT THE PROJECT -->
+## About the Project
 
+The website aims to showcase our work as community including the upcomming events, ongoing projects, members of the community and means to communication we use.
 
-## community-channels
-* [Slack](https://join.slack.com/t/mbazanlpcommunity/shared_invite/zt-1e5mxv2x2-XH25edKoZ4tFZou4SvLsQA)
+Main Objectives:
+* Gallery of Past events
+* Community members profiles
+* Past & Upcoming events such as meetups hackathons
+* Ongoing Projects
+* Contact Page
+* Blog
 
 
-## contributers
-* [Olivier IRADUKUNDA](https://github.com/twist250)
-* [Sam RUTUNDA](https://github.com/rutsam)
 
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
 
 
+<!-- GETTING STARTED -->
+## Getting Started
 
+We welcome any contribution to the website and community as a whole. Bellow is an introduction on how to get started.
 
+Contribution areas:
+* Content Creator: We look forward to onboarding a content creator for our blog.
+* Content Moderator: We look forward to onboarding a content creator for our blog.
 
+Please feel free to also suggest any other area you might be intrested to contribute
 
 
+### Built With
 
+The community website is built with the following stack. You are also welcome to suggest other stack to include!
 
+[![HTML][html.com]][html-url]
+[![Javascript][javascript.com]][javascript-url]
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+### Prerequisites
+
+To be honest, there are no pre-requisite apart from joining our <a href="https://join.slack.com/t/mbazanlpcommunity/shared_invite/zt-1e5mxv2x2-XH25edKoZ4tFZou4SvLsQA">slack channel</a>
+
+
+<!-- ROADMAP -->
+## Roadmap
+
+- [ ] Add calendar to the community website
+- [ ] Add Ghost CMS
+
+
+See the [open issues](https://github.com/MBAZA-NLP/community.website/issues) for a full list of proposed features (and known issues).
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+
+
+<!-- CONTRIBUTING -->
+## Contributing
+
+Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+
+If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
+Don't forget to give the project a star! Thanks again!
+
+1. Fork the Project
+2. Create your Feature Branch (`git checkout -b AmazinFeature`)
+3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the Branch (`git push origin dev`)
+5. Open a Pull Request to the dev branch
+
+### Thank you to our contributors
+
+<a href="https://github.com/mbaza-nlp/community.website/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=mbaza-nlp/community.website" />
+</a>
+
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+
+
+<!-- CONTACT -->
+## Contact
+
+* [Isaac Manzi](https://github.com/IMdtman)
+* [Samuel Rutunda](https://github.com/rutsam)
+* [Olivier Iradukunda](https://github.com/twist250) 
+* [Floris Nzabakira](https://github.com/Kira-Floris)
+* [Rene Promesse](https://github.com/renepromesse) 
+* [Arnaud Kayonga](https://github.com/agent87)
+
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+
+
+<!-- MARKDOWN LINKS & IMAGES -->
+<!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
+[contributors-shield]: https://img.shields.io/github/contributors/MBAZA-NLP/community.website
+[contributors-url]: https://github.com/MBAZA-NLP/community.website/graphs/contributors
+[forks-shield]: https://img.shields.io/github/forks/MBAZA-NLP/community.website
+[forks-url]: MBAZA-NLP/community.website
+[stars-shield]: https://img.shields.io/github/stars/MBAZA-NLP/community.website
+[stars-url]: MBAZA-NLP/community.website
+[issues-shield]: https://img.shields.io/github/issues/MBAZA-NLP/community.website
+[issues-url]: https://github.com/MBAZA-NLP/community.website/issues
+[slack-shield]: https://img.shields.io/badge/Slack-4A154B?style=for-the-badge&logo=slack&logoColor=white
+[slack-url]: https://join.slack.com/t/mbazanlpcommunity/shared_invite/zt-1e5mxv2x2-XH25edKoZ4tFZou4SvLsQA
+[html.com]: https://img.shields.io/badge/HTML-239120?style=for-the-badge&logo=html5&logoColor=white
+[html-url]: https://html.com
+[javascript.com]: https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E
+[javascript-url]: https://javascript.com 

assets/js/calendar.js

@@ -0,0 +1,74 @@
+(function($){
+  const username = "[email protected]";
+  const key = "AIzaSyBxDGuEdlEgMyPbyjNjymNwI10vSdByrhs";
+  function injectCalendarEvents(title, uri, location, date, time) {
+      return `
+            <li>
+              <div class="post d-sm-flex align-items-center mb-20">
+                <div class="post__img mr-20">
+                  <!-- <img src="assets/img/blog/14.jpg" alt="" /> -->
+                </div>
+                <div class="post__text">
+                  <h5><a href="${uri}">${title}</a></h5>
+                  <span><i class="far fa-map-marker-alt"></i> ${location}</span> <br />
+                  <span><i class="far fa-calendar-alt"></i> ${date}</span> <br />
+                  <span><i class="far fa-watch"></i> ${time}</span>
+                </div>
+              </div>
+            </li>
+          `;
+    }
+    function getDate(time) {
+      return time === undefined ? "" : "<b>" + time.split("T")[0] + "</b>";
+    }
+    function getTime(time) {
+      return time === undefined ? "" : time.split("T")[1];
+    }
+    function undefinedCase(text) {
+      return text === undefined ? "" : text;
+    }
+    function getTodayDate() {
+      var date = new Date();
+      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
+    }
+    $(window).on('load',async function () {
+
+      $.ajax({
+        url:
+          "https://www.googleapis.com/calendar/v3/calendars/" +
+          username +
+          "/events?key=" +
+          key +
+          "&singleEvents=true&orderBy=startTime&timeMin=" +
+          getTodayDate() +
+          "T00:00:00.000Z",
+        success: await function (data) {
+          var calendarUl = document.getElementById("calendar-post-list");
+          let htmlCode = ``;
+          data.items.forEach(function (item) {
+            item.summary === undefined
+              ? ""
+              : (htmlCode =
+                  htmlCode +
+                  injectCalendarEvents(
+                    item.summary,
+                    undefinedCase(item.htmlLink),
+                    undefinedCase(item.location),
+                    item.start.dateTime === undefined
+                      ? "<i>Pending</i>"
+                      : getDate(item.start.dateTime) +
+                          " to " +
+                          getDate(item.end.dateTime),
+                    getTime(item.start.dateTime) +
+                      " " +
+                      undefinedCase(item.start.timeZone)
+                  ));
+              });
+          calendarUl.innerHTML = htmlCode;
+        },
+        error: function (err) {
+          console.log(err);
+        },
+      });
+    });
+})(jQuery);

index.html

@@ -353,63 +353,7 @@ <h5>Gallery</h5>
 
         <div class="widget white-bg mb-40 pb-10 wow fadeInUp2 animated" data-wow-delay='.1s' id="events-section">
             <h4 class="widget-title pt-40 mb-40 pl-35">Up Coming events</h4>
-            <ul class="post-list">
-                <li>
-                    <div class="post d-sm-flex align-items-center mb-20">
-                        <div class="post__img mr-20">
-                            <img src="assets/img/blog/14.jpg" alt="">
-                        </div>
-                        <div class="post__text">
-                            <h5><a href="#">Smaing Podcast Epis
-                                Ode 15 With Phile</a></h5>
-                                <span><i class="far fa-map-marker-alt"></i> Location</span> <br>
-                                <span><i class="far fa-calendar-alt"></i> Date</span> <br>
-                                <span><i class="far fa-watch"></i> Time</span>
-                        </div>
-                    </div>
-                </li>
-                <li>
-                    <div class="post d-sm-flex align-items-center mb-20">
-                        <div class="post__img mr-20">
-                            <img src="assets/img/blog/15.jpg" alt="">
-                        </div>
-                        <div class="post__text">
-                            <h5><a href="#">Epis Smaing Podcast
-                                Ode 15 With Phile</a></h5>
-                                <span><i class="far fa-map-marker-alt"></i> Location</span> <br>
-                                <span><i class="far fa-calendar-alt"></i> Date</span> <br>
-                                <span><i class="far fa-watch"></i> Time</span>
-                        </div>
-                    </div>
-                </li>
-                <li>
-                    <div class="post d-sm-flex align-items-center mb-20">
-                        <div class="post__img mr-20">
-                            <img src="assets/img/blog/16.jpg" alt="">
-                        </div>
-                        <div class="post__text">
-                            <h5><a href="#">Phile Podcast Smaing Epis
-                                Ode 15 With </a></h5>
-                                <span><i class="far fa-map-marker-alt"></i> Location</span> <br>
-                                <span><i class="far fa-calendar-alt"></i> Date</span> <br>
-                                <span><i class="far fa-watch"></i> Time</span>
-                        </div>
-                    </div>
-                </li>
-                <li>
-                    <div class="post d-sm-flex align-items-center mb-20">
-                        <div class="post__img mr-20">
-                            <img src="assets/img/blog/17.jpg" alt="">
-                        </div>
-                        <div class="post__text">
-                            <h5><a href="#">Smaing Podcast Epis
-                                Ode 15 With Phile</a></h5>
-                                <span><i class="far fa-map-marker-alt"></i> Location</span> <br>
-                                <span><i class="far fa-calendar-alt"></i> Date</span> <br>
-                                <span><i class="far fa-watch"></i> Time</span>
-                        </div>
-                    </div>
-                </li>
+            <ul class="post-list" id="calendar-post-list">
             </ul>
         </div>
     </div>
@@ -599,6 +543,8 @@ <h5 class="semi-title mb-25">Follow Us</h5>
     <script src="assets/js/plugins.js"></script>
     <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
     <script src="assets/js/main.js"></script>
+    <script src="assets/js/calendar.js"></script>
+
 </body>
 
 </html>