Added /about and /rules pages (#28)

Added /about and /rules pages

src/components/Header/index.tsx

@@ -19,8 +19,8 @@ export function Header() {
           <SC.Logo src={logo} />
 
           <SC.Menu>
-            <MenuItem to="/">about</MenuItem>
-            <MenuItem to="/">rules</MenuItem>
+            <MenuItem to="/about">about</MenuItem>
+            <MenuItem to="/rules">rules</MenuItem>
             <MenuItem to="/">faq</MenuItem>
             <MenuItem to="/">hotbot</MenuItem>
             <MenuItem to="/resources">resources</MenuItem>

src/content/site/about.md

@@ -0,0 +1,27 @@
+---
+path: /about
+---
+
+# About us
+
+## What is The Programmers Hangout
+
+The Programmer's Hangout (TPH) is a discord community geared towards programming. The use of the word "geared" here is important, because more accurately it's a discord for programmers of all kinds. If you're a totally green noob with 5 lines of code under your belt, or if you're a veteran with 15 years of industry experience - TPH has a place for you. More than that, there are over 30,000 people here. You can guarantee you won't be the only person with your experience level on the server.
+
+## How do I join
+
+All you need to do is click. You'll be prompted to create yourself a Discord account, if you don't already have one. We recommend setting one up, then reading the #rules-and-info channel.
+
+[Join us](https://discord.gg/programming)
+
+## When was this server made
+
+This server was made on the 4th of November, 2016.
+
+## Who owns this server
+
+Elliott#0001
+
+## Am I welcome
+
+Anyone interested in discussing programming and not breaking the [rules](/rules) is welcome.

src/content/site/index.md

@@ -1,6 +1,7 @@
 ---
 path: /
 ---
+
 # The Programmers Hangout
 
 The Programmer's Hangout (TPH) is a Discord community of programmers with members of
@@ -8,7 +9,7 @@ all skill levels. If you're interested in programming, you're welcome here regar
 of how much experience you have. You'll find that we're always learning here regardless
 of expertise.
 
-## How do I join?
+## How do I join
 
 All you need to do is click!
 

src/content/site/rules.md

@@ -0,0 +1,57 @@
+---
+path: /rules
+---
+
+# Rules
+
+## General Rules
+
+Below you will find the rules of the server. These are the do's and don'ts of being here. Follow them if you wish to stay, ignorance is not an excuse.
+
+## 1. Do not advertise
+
+This includes other servers, products or services that you stand to benefit from financially, your youtube channel or the like.
+
+## 2. Do not be a dick
+
+If you make yourself particularly hard to deal with, if you pretend that you are better than anyone else, or if you are just in general very annoying and not a good fit for this server we will remove you. Permanently.
+
+## 3. Use facts, not authority
+
+If you are going to provide anecdote or your own experience, that is fine, provided you don't pass it off as axiomatic. Quote sources when you are asked to.
+
+## 4. Do not flame languages or other such technologies (e.g. text editors).
+
+Doing so is reductive. If someone likes to use VB.Net or JavaScript or Vim, we surprisingly expect you to not jump down their throat about that. Doing so outside of regulated channels where staff have explicitly allowed the discussion for a short period of time is not allowed ( #poll-discussion is one such example of an okay place to talk about it provided the poll allows it )
+
+## 5. Only speak English in chat
+
+This speaks for itself, we do not expect staff to speak extra languages and we cannot moderate what we do not understand. Sorry.
+
+## 6. Do not ask for free work
+
+This is not an advertisement platform. If you are going to take from this community, you are going to give back to it first. We do not care about your work if you do not care about us. Thanks.
+
+## 7. Do not DM people who you have not built a rapport with.
+
+This is self explanatory. Don't be a creep. Don't be a pest, ask questions in relevant channels. Someone's DM is not a relevant channel.
+
+## 8. Do not talk about your infractions publicly
+
+If you are infracted, it's not a big deal. It's simply a formal warning - you can totally recover from that. If you disagree with a warning, DM @ModMail. Complaining about infractions publicly will land you a mute or a ban. Don't pollute chat or other channels with these conversations.
+
+## 9. Do not participate in spoonfeeding.
+
+Asking to be spoonfed is the same as asking someone else to do your work for you. We do not condone just solving the problems of others -- make them work for it. Give a man a fish and you feed him for a day. Teach a man to fish and you feed him for a lifetime.
+
+## 10. Do not impersonate staff members
+
+If you setup your account to impersonate a staff member's (e.g. steal their old avatar and name) we will give you 30 minutes from the time we find out about it for you to fix that.
+
+## 11. Follow the directions of staff members to the letter
+
+Most of us are here for our love of programming, so we like to do as much talking about programming and the like as possible. That being said, we really don't like intervening. But we especially don't like having to intervene twice. Please don't make us do that, thank you :slight_smile:
+
+## 12. No backseat driving
+
+If you see people working through a problem, you shouldn't intermittently interject advice. Let them work it out unless someone asks for help. We understand you want to help out, but this can often cause confusion and overall a negative impact on the person who originally asked the question.

src/pages/about.tsx

@@ -0,0 +1,27 @@
+import React from "react"
+import { graphql } from "gatsby"
+import { Markdown } from "../components/Markdown"
+import { Layout } from "../components/Layout"
+import { MarkdownRemark, Query } from "../generated/graphql"
+import { SEO } from "../components/SEO"
+
+function AboutPage({ data }: ComponentQuery<{ md: MarkdownRemark }>) {
+  const { md } = data
+
+  return (
+    <Layout>
+      <SEO title="About" />
+      <Markdown content={md.html!} />
+    </Layout>
+  )
+}
+
+export const query = graphql`
+  query AboutPage {
+    md: markdownRemark(frontmatter: { path: { eq: "/about" } }) {
+      html
+    }
+  }
+`
+
+export default AboutPage

src/pages/rules.tsx

@@ -0,0 +1,27 @@
+import React from "react"
+import { graphql } from "gatsby"
+import { Markdown } from "../components/Markdown"
+import { Layout } from "../components/Layout"
+import { MarkdownRemark, Query } from "../generated/graphql"
+import { SEO } from "../components/SEO"
+
+function RulesPage({ data }: ComponentQuery<{ md: MarkdownRemark }>) {
+  const { md } = data
+
+  return (
+    <Layout>
+      <SEO title="Rules" />
+      <Markdown content={md.html!} />
+    </Layout>
+  )
+}
+
+export const query = graphql`
+  query RulesPage {
+    md: markdownRemark(frontmatter: { path: { eq: "/rules" } }) {
+      html
+    }
+  }
+`
+
+export default RulesPage

typings.d.ts

@@ -1,2 +1,6 @@
 declare module "*.svg"
 declare module "*.png"
+
+type ComponentQuery<T> = {
+  readonly data: T
+}