Merge pull request #74 from coderplex/metadata

duttakapil · web-flow · commit ee696779bc41 · 2017-11-06T01:55:49.000+05:30
Add proper metadata
diff --git a/components/head.js b/components/head.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import Head from 'next/head';
 
-export default ({ title }) => (
+export default ({ title, description, image }) => (
   <Head>
     <meta charSet="utf-8" />
     <meta
@@ -46,15 +46,18 @@ export default ({ title }) => (
       href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css"
     />
     <title>{title}</title>
-    <meta name="description" content="coderplex" />
+    <meta name="description" content={description} />
     <meta property="og:type" content="website" />
     <meta property="og:title" content={title} />
     <meta property="og:url" content="https://coderplex.org" />
     <meta
       property="og:image"
-      content="https://coderplex.org/static/favicons/android-chrome-512x512.png"
+      content={
+        image ||
+        'https://coderplex.org/static/favicons/android-chrome-512x512.png'
+      }
     />
-    <meta property="og:site_name" content="coderplex" />
-    <meta property="og:description" content="coderplex" />
+    <meta property="og:site_name" content="coderplex.org" />
+    <meta property="og:description" content={description} />
   </Head>
 );
diff --git a/components/header.js b/components/header.js
@@ -9,6 +9,7 @@ import GoStar from 'react-icons/lib/md/library-books';
 import GoCalender from 'react-icons/lib/go/calendar';
 import GoOrg from 'react-icons/lib/go/organization';
 
+import MetaInfo from '../config/meta-info';
 import GlobalStyles from './global-styles';
 import Head from './head';
 
@@ -26,9 +27,8 @@ Router.onRouteChangeError = () => {
 
 export default props => {
   const title =
-    props.url.pathname === '/'
-      ? 'Home'
-      : props.url.pathname.split('/')[1].toUpperCase();
+    props.url.pathname === '/' ? 'home' : props.url.pathname.split('/')[1];
+  const metaData = MetaInfo[title];
   const navItems = [
     {
       title: 'Home',
@@ -64,7 +64,11 @@ export default props => {
   return (
     <Headroom>
       <header>
-        <Head title={`${title} | Coderplex`} />
+        <Head
+          title={metaData.title}
+          description={metaData.description}
+          image={metaData.image}
+        />
         <GlobalStyles />
         <div className="header__container">
           <nav>
diff --git a/config/meta-info.json b/config/meta-info.json
@@ -0,0 +1,25 @@
+{
+  "home": {
+    "title": "Coderplex | Learn, Collaborate and Create with a Community",
+    "description":
+      "We're a non-profit startup on a mission to improve the state of tech across India",
+    "image": ""
+  },
+  "learn": {
+    "title": "Free and Open Source Learning Guides | Coderplex",
+    "description":
+      "Curated guides with crowd-sourced recommendations of the best free online resources to learn various modern technologies",
+    "image": ""
+  },
+  "space": {
+    "title": "Offline Co-learning Spaces | Coderplex",
+    "description":
+      "A network of off-learning spaces for autodidacts to come and engage in peer-learning and collaboration",
+    "image": ""
+  },
+  "events": {
+    "title": "Online and Offline Tech Events | Coderplex",
+    "description": "We host frequent online and offline events, from sessions to competitions",
+    "image": ""
+  }
+}
