From 4e921d7741a65f7051dbb51afe71e969c4f1ac93 Mon Sep 17 00:00:00 2001
From: Cassius de Leeuwe <cadeleeuwe@gmail.com>
Date: Fri, 19 Jul 2019 19:46:20 +0700
Subject: [PATCH] feat: Add meta tags

---
 web/gatsby-config.js           |  3 ++-
 web/src/pages/index.js         | 38 +++++++++++++++++++++++-----------
 web/src/pages/index.module.css |  8 +++----
 3 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/web/gatsby-config.js b/web/gatsby-config.js
index 1d15ae329..5a1455217 100644
--- a/web/gatsby-config.js
+++ b/web/gatsby-config.js
@@ -1,6 +1,7 @@
 module.exports = {
   siteMetadata: {
-    title: `Pathwar.land`,
+    title: `Pathwar Land`,
+    description: `Pathwar is an educational platform with a focus on security/cryptography, where you can go through levels (courses) to learn new things and hone your skills.`
   },
   plugins: [
     `gatsby-plugin-react-helmet`,
diff --git a/web/src/pages/index.js b/web/src/pages/index.js
index c0324a950..00e2cf2a2 100644
--- a/web/src/pages/index.js
+++ b/web/src/pages/index.js
@@ -6,27 +6,41 @@ import { graphql } from "gatsby";
 
 import styles from "./index.module.css";
 
-const title = "Pathwar.land";
-const description = "Pathwar is an educational platform with a focus on security/cryptography, where you can go through levels (courses) to learn new things and hone your skills.";
-
 export default ({ data }) => <div className={styles.page}>
-  <Helmet defer={false}>
-    <title>{title}</title>
-    <meta name="description" content={description} />
+  <Helmet>
+    <title>{data.site.siteMetadata.title}</title>
+    <meta name="description" content={data.site.siteMetadata.description} />
+
+    <meta property="og:description" content={data.site.siteMetadata.description} />
+    <meta property="og:url" content={data.site.siteMetadata.description} />
+    <meta property="og:site_name" content={data.site.siteMetadata.title} />
+    <meta property="og:type" content="website" />
+    <meta property="og:image" content={data.file.childImageSharp.fixed} />
+    <meta property="og:image:width" content="200" />
+    <meta property="og:image:height" content="200" />
+
+    <meta property="twitter:card" content="summary" />
+    <meta property="twitter:title" content={data.site.siteMetadata.title} />
+    <meta property="twitter:description" content={data.site.siteMetadata.description} />
+    <meta property="twitter:image" content={data.file.childImageSharp.fixed} />
   </Helmet>
 
   <div className={styles.content}>
-    <div>
-      <Img fixed={data.file.childImageSharp.fixed} alt="Pathwar Logo" />
-    </div>
-    <h1>Pathwar Land</h1>
-    <p>{description}</p>
-    <h2 className={styles.comingSoon}>Coming Soon..</h2>
+    <div><Img fixed={data.file.childImageSharp.fixed} alt="Pathwar Logo" /></div>
+    <h1>{data.site.siteMetadata.title}</h1>
+    <p>{data.site.siteMetadata.description}</p>
+    <h2>Coming Soon..</h2>
   </div>
 </div>
 
 export const query = graphql`
   query {
+    site {
+      siteMetadata {
+        title
+        description
+      }
+    }
     file(relativePath: { eq: "images/pathwar-logo.png" }) {
       childImageSharp {
         fixed(width: 200, height: 200) {
diff --git a/web/src/pages/index.module.css b/web/src/pages/index.module.css
index 6dadbf7a1..fa5ad4290 100644
--- a/web/src/pages/index.module.css
+++ b/web/src/pages/index.module.css
@@ -16,15 +16,15 @@
   padding: 0 15px;
 }
 
-.coming-soon {
-  margin-top: 50px;
-}
-
 h1 {
   font-size: 40px;
   margin-bottom: 10px;
 }
 
+h2 {
+  margin-top: 50px;
+}
+
 p {
   font-size: 130%;
   font-weight: 300;