Added About Page and Custom Font

src/components/footer.js

@@ -11,10 +11,6 @@ export default () => (
       discord
     </a>
     .
-    <a target="_blanc" href="https://steamcommunity.com/groups/urban_group">
-      steam
-    </a>
-    .
     <a target="_blanc" href="https://github.com/creyD/urban_website">
       github
     </a>

src/pages/about.js

@@ -1,9 +1,30 @@
 import React from "react"
 import Header from "../components/header"
+import Footer from "../components/footer"
 
 export default () => (
   <div>
     <Header headline="About" />
-    // TODO Impressum
+    <div class="container">
+      <p>
+        As this is a private website, it doesn't need an imprint. However let's
+        clarify a few things:
+      </p>
+
+      <h2>Cookies</h2>
+      <p>This site uses none.</p>
+
+      <h2>GDPR</h2>
+      <p>
+        As this site doesn't use any user data, it complies with GDPR
+        regulations.
+      </p>
+
+      <a href="/">
+        <button>Back to homepage</button>
+      </a>
+
+      <Footer />
+    </div>
   </div>
 )

src/pages/history.js

@@ -1,61 +0,0 @@
-import React from "react"
-import dateFormat from "dateformat"
-import Header from "../components/header"
-
-const GIT_OWNER = "creyD"
-const GIT_REPO = "urban_website"
-const GIT_URL =
-  "https://api.github.com/repos/" + GIT_OWNER + "/" + GIT_REPO + "/events"
-const GIT_COMMIT_URL =
-  "https://github.com/" + GIT_OWNER + "/" + GIT_REPO + "/commit/"
-
-// Format the date provided by the GitHub API
-function getDateFormatted(unformated_date) {
-  return dateFormat(unformated_date, "dd.mm.yyyy")
-}
-
-// Adds Git History to the site
-function addGitHistory(data) {
-  for (var push in data) {
-    for (var commit in data[push]["payload"]["commits"]) {
-      var new_li = document.createElement("li")
-      var url = GIT_COMMIT_URL + data[push]["payload"]["commits"][commit].sha
-      new_li.innerHTML =
-        data[push]["payload"]["commits"][commit].author.name +
-        " committed on " +
-        getDateFormatted(data[push].created_at) +
-        ": " +
-        data[push]["payload"]["commits"][commit].message +
-        " <a href=" +
-        url +
-        " target='_blanc'>(Link)</a>"
-      var log = document.getElementById("log")
-      log.appendChild(new_li)
-    }
-  }
-}
-
-// Send HTTP request to the GitHub API to get information about this repo
-function getGitHubAPIData() {
-  const Http = new XMLHttpRequest()
-  Http.open("GET", GIT_URL)
-  Http.send()
-
-  // If the API responds call the addGitHistory function
-  Http.onreadystatechange = function() {
-    if (this.readyState === 4 && this.status === 200) {
-      addGitHistory(JSON.parse(Http.responseText))
-    }
-  }
-}
-
-export default () => (
-  <div>
-    <Header headline="git log" />
-    <p>
-      You can see the full commit history{" "}
-      <a href="https://github.com/creyD/urban_website/commits/master">here</a>.
-    </p>
-    <ul id="log"></ul>
-  </div>
-)

src/pages/index.js

@@ -6,8 +6,26 @@ import Footer from "../components/footer"
 export default () => (
   <div>
     <Header headline="The Urban Brothers" />
-    <MainEntry title="Intro" text="" />
-    <MainEntry title="Ressources" text="" />
+    <p id="tagline">Welcome to the Urban Brothers Website</p>
+    <div class="container">
+      <MainEntry title="Ressources" />
+      <ul>
+        <a href="ts3server://urbanbrothers.de">
+          <li>TeamSpeak 3 Server</li>
+        </a>
+        <a href="https://discord.gg/k6TnPq">
+          <li>Discord Server</li>
+        </a>
+        <a href="https://steamcommunity.com/groups/urban_group" target="_blanc">
+          <li>Steam Community Group</li>
+        </a>
+      </ul>
+      <MainEntry title="Help" />
+      <p>
+        For help with any community related matters, please contact one of our
+        moderators or admins on either TeamSpeak or Discord.
+      </p>
+    </div>
     <Footer />
   </div>
 )

src/styles/global.css

@@ -1,3 +1,26 @@
+@import url("https://fonts.googleapis.com/css?family=Merriweather&display=swap");
+
 html {
   background-color: lightgrey;
 }
+
+* {
+  font-family: "Merriweather", serif;
+}
+
+a,
+a:visited,
+a:hover {
+  color: red;
+}
+
+#tagline {
+  text-align: center;
+  font-style: italic;
+}
+
+.container {
+  width: 80%;
+  margin-left: 10%;
+  margin-right: 10%;
+}