nodejs · codeekage · Feb 15, 2019 · Feb 16, 2019 · Feb 16, 2019 · Feb 19, 2019
diff --git a/gatsby-node.js b/gatsby-node.js
@@ -10,6 +10,7 @@ exports.onCreatePage = async ({ page, actions }) => {
     createPage({
       ...page,
       path: '/'
+
     });
     createPage({
       ...page,

diff --git a/src/components/layout.tsx b/src/components/layout.tsx
@@ -1,8 +1,9 @@
-import React from 'react';
-import Helmet from 'react-helmet';
-import { StaticQuery, graphql } from 'gatsby';
+import React from 'react'
+import Helmet from 'react-helmet'
+import { StaticQuery, graphql } from 'gatsby'
+import image from '../images/image.png'
 
-import Header from './header';
+import Header from './header'
 
 import './layout.css';
 import './mobile.css';
@@ -11,9 +12,12 @@ import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
 
 type Props = {
   children: React.ReactNode
+  title: string
+  description: string
+  author : string 
 }
 
-const Layout = ({ children }: Props) => (
+const Layout = ({ children, title, description, author }: Props) => (
   <StaticQuery
     query={graphql`
       query SiteTitleQuery {
@@ -27,18 +31,26 @@ const Layout = ({ children }: Props) => (
     render={data => (
       <>
         <Helmet
-          title={data.site.siteMetadata.title}
+          title={title}
           meta={[
-            { name: 'description', content: 'Sample' },
-            { name: 'keywords', content: 'sample, something' },
+            { name: 'description', content: description },
+            { name: 'keywords', content: 'nodejs, javascript, documentation' },
+            { name: 'title', content: title },
+            { name:"twitter:card", content:"summary"},
+            { name:"twitter:site", content:"@nodejs"},
+            { name:"twitter:creator", content:`@${author}`},
+            { property: 'og:title', content: title },
+            { property: 'og:image', content: image },
+            { property: 'og:image:type', content: 'image/png' },
+            { property: 'og:image:alt', content: description },
+            { property: 'og:image:width', content: '1200' },
+            { property: 'og:image:height', content: '1200' },
           ]}
         >
           <html lang="en" />
         </Helmet>
         <Header siteTitle={data.site.siteMetadata.title} />
-        <main>
-          {children}
-        </main>
+        <main>{children}</main>
       </>
     )}
   />

diff --git a/src/images/image.png b/src/images/image.png
diff --git a/src/pages/learn.tsx b/src/pages/learn.tsx
@@ -92,12 +92,16 @@ function closeNavOnSmallScreens() {
 export default ({ data, location }: Props) => {
   const pages = [];
   let currentPage = location.pathname.split('/').pop();
+
+  let activePage = { title: '404', html: '404', author : '',  description : '' };
+
   let activePage = { title: '404', html: '404' };
 
   let previousPage = { frontmatter: { title: '404', path: '404' } }
   let nextPage = { frontmatter: { title: '404', path: '404' } }
 
 
+
   let foundActive = false;
 
   // For every page,
@@ -107,12 +111,23 @@ export default ({ data, location }: Props) => {
 
     const slug = page.fields.slug;
 
+
     // If there is no current page slug discovered from the URL, use the first page's.
     if (!currentPage) { currentPage = slug; }
 
     // Determine if this is the active page, and mark if we've found the active page yet.
     const isActive = slug === currentPage;
     foundActive = foundActive || isActive;
+
+    if (isActive) { activePage = { 
+      html: page.html, 
+      title: page.frontmatter.title, 
+      author : page.frontmatter.author, 
+      description : page.frontmatter.description 
+     }; }
+
+
+
     if (isActive) {
       activePage = { html: page.html, title: page.frontmatter.title };
 
@@ -121,13 +136,19 @@ export default ({ data, location }: Props) => {
       nextPage = { frontmatter: { title: next && next.frontmatter.title, path: next && next.frontmatter.title.toLowerCase().replace(/ /g, '-').replace(/[^a-z|-]/g, '') } };
     }
 
+
     // Construct class name for this side nav item.
     const className = `side-nav__item ${!foundActive ? 'side-nav__item--done' : ''} ${isActive ? 'side-nav__item--active' : ''}`;
 
     // Add the constructed page JSX to the pages list.
     pages.push(
+
+      <li className={className} key={page.id}>
+        <Link to={`/learn/${slug}`}>
+
       <li className={className}>
         <Link to={`/learn/${slug}`} onClick={closeNavOnSmallScreens}>
+
           {page.frontmatter.title}
         </Link>
       </li>
@@ -141,7 +162,7 @@ export default ({ data, location }: Props) => {
   }
 
   return (
-    <Layout>
+    <Layout title={activePage.title} author={activePage.author} description={activePage.description} slug={currentPage}>
       <div className="hero">
         <h1>{activePage.title}</h1>
         <div className="diagonal-hero-bg">
@@ -158,11 +179,11 @@ export default ({ data, location }: Props) => {
         {/* TODO: H2s should not be in the ULs, but needed to make sticky titles work. Find a new way. */}
         <ul className="side-nav__list">
           <h2 className="side-nav__title">Quick Start</h2>
-          {pages.slice(0, 5)}
+        {pages.slice(0, 5)}
         </ul>
         <ul className="side-nav__list">
           <h2 className="side-nav__title">Getting Started</h2>
-          {pages.slice(5)}
+           {pages.slice(5)}
         </ul>
       </nav>
       <article className="article-reader">