Merge pull request #29 from creyD/dev

Minor Site Rework

.prettierrc

@@ -1,7 +1,8 @@
 {
-  "endOfLine": "lf",
-  "semi": false,
-  "singleQuote": false,
-  "tabWidth": 4,
-  "trailingComma": "es5"
+    "endOfLine": "lf",
+    "semi": false,
+    "singleQuote": false,
+    "tabWidth": 4,
+    "trailingComma": "es5",
+    "printWidth": 160
 }

src/components/footer.js

@@ -14,6 +14,10 @@ export default () => (
         <a target="_blanc" href="https://github.com/creyD/urban_website">
             github
         </a>
+        .
+        <a target="_blanc" href="https://paypal.me/pools/c/89fz0b2YFk">
+            donate
+        </a>
         .<Link to="/about/">about</Link>
     </div>
 )

src/components/header.js

@@ -1,3 +1,9 @@
 import React from "react"
+import Menu from "../components/menu"
 
-export default (props) => <h1 align="center">{props.headline}</h1>
+export default (props) => (
+    <div>
+        <h1 align="center">{props.headline}</h1>
+        <Menu />
+    </div>
+)

src/components/main_entry.js

@@ -2,7 +2,7 @@ import React from "react"
 
 export default (props) => (
     <div id={props.title}>
-        <h1>{props.title}</h1>
+        <h2>{props.title}</h2>
         <p>{props.text}</p>
     </div>
 )

src/components/menu.js

@@ -0,0 +1,8 @@
+import React from "react"
+import { Link } from "gatsby"
+
+export default () => (
+    <div style={{ textAlign: `center` }}>
+        <Link to="//">Home</Link> | <Link to="/comms/">Communication</Link> | <Link to="/projects/">Projects</Link>
+    </div>
+)

src/pages/about.js

@@ -6,25 +6,17 @@ export default () => (
     <div>
         <Header headline="About" />
         <div class="container">
-            <p>
-                As this is a private website, so no legal notice is required.
-                However let's clarify a few things:
-            </p>
+            <p>As this is a private website, so no legal notice is required. 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>
+            <p>As this site doesn't use/ store any user data, it complies with GDPR regulations.</p>
 
             <h2>Legal</h2>
             <p>
-                If you have any questions or queries regarding this website,
-                please write{" "}
-                <a herf="mailto://webmaster@urbanbrothers.de">an email.</a>
+                If you have any questions or queries regarding this website, please write <a herf="mailto://webmaster@urbanbrothers.de">an email.</a>
             </p>
             <a href="/">
                 <button>Back to homepage</button>

src/pages/comms.js

@@ -0,0 +1,24 @@
+import React from "react"
+import Header from "../components/header"
+import Footer from "../components/footer"
+
+export default () => (
+    <div class="container">
+        <Header headline="Communication" />
+        <h2>Discord</h2>
+        <p>
+            Feel free to join our Urban Discord <a href="https://discord.gg/k6TnPq">here</a>.
+        </p>
+        <h2>TeamSpeak 3</h2>
+        <p>
+            You may also join our TeamSpeak server, accessible under this same <a href="ts3server://urbanbrothers.de">urbanbrothers.de</a> domain.
+        </p>
+        <h2>Steam</h2>
+        The{" "}
+        <a href="https://steamcommunity.com/groups/urban_group" target="_blanc">
+            steam community group
+        </a>{" "}
+        is rarely used for communications, but you may use it to show off the clan tag and join in with other members.
+        <Footer />
+    </div>
+)

src/pages/index.js

@@ -8,39 +8,8 @@ export default () => (
         <Header headline="The Urban Brothers" />
         <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="Contribute" />
-            <p>
-                As it was requested by some people over the last years, we
-                finally created a{" "}
-                <a href="https://paypal.me/pools/c/89fz0b2YFk" target="_blanc">
-                    donation link (PayPal).
-                </a>{" "}
-                All the donated money will go 100% towards keeping up the
-                servers and running other community related projects in the
-                future. However our services will continue to be freely
-                available for anyone. -{" "}
-                <b>Thank you to everyone who donated.</b>
-            </p>
             <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>
+            <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/pages/projects.js

@@ -0,0 +1,16 @@
+import React from "react"
+import Header from "../components/header"
+import Footer from "../components/footer"
+
+export default () => (
+    <div class="container">
+        <Header headline="Projects" />
+        <h2>Minecraft</h2>
+        <p>Our small Minecraft server is hosted on this server. This project currently works with a whitelist of people.</p>
+        <h2>League/ TFT</h2>
+        <p>Most of the times, there are people who play League or TFT in the respecting channels.</p>
+        <h2>More</h2>
+        <p>More projects are coming regularly (kind of) so stay tuned!</p>
+        <Footer />
+    </div>
+)