dinner break

Author: NoahLE

gatsby-src/gatsby-config.js

@@ -0,0 +1,21 @@
+module.exports = {
+    siteMetadata: {
+        title: `Blah blah fake title`,
+    },
+    plugins: [
+        `gatsby-plugin-glamor`,
+        {
+            resolve: `gatsby-source-filesystem`,
+            options: {
+                name: `src`,
+                path: `${__dirname}/src/`,
+            },
+        },
+        {
+            resolve: `gatsby-plugin-typography`,
+            options: {
+                pathToConfigModule: `src/utils/typography`,
+            },
+        },
+    ],
+};  

gatsby-src/package-lock.json

@@ -12,6 +12,7 @@
     "gatsby-link": "^1.6.37",
     "gatsby-plugin-glamor": "^1.6.12",
     "gatsby-plugin-typography": "^1.7.14",
+    "gatsby-source-filesystem": "^1.5.24",
     "glamorous": "^4.11.6",
     "typography-theme-kirkham": "^0.16.3"
   }

gatsby-src/package.json

@@ -0,0 +1,43 @@
+
+
+import React from "react";
+import g from "glamorous";
+import { css } from "glamor";
+import Link from "gatsby-link";
+
+import { rhythm } from "../utils/typography";
+
+const linkStyle = css({ float: `right` });
+
+export default ({ children, data }) => (
+    <g.Div
+        margin={`0 auto`}
+        maxWidth={700}
+        padding={rhythm(2)}
+        paddingTop={rhythm(1.5)}
+    >
+        <Link to={`/`}>
+            <g.H3
+                marginBottom={rhythm(2)}
+                display={`inline-block`}
+                fontStyle={`normal`}
+            >
+                {data.site.siteMetadata.title}
+      </g.H3>
+        </Link>
+        <Link className={linkStyle} to={`/about/`}>
+            About
+    </Link>
+        {children()}
+    </g.Div>
+);
+
+export const query = graphql`
+    query LayoutQuery {
+        site {
+            siteMetadata {
+                title
+            }
+        }
+    }
+`

gatsby-src/src/layouts/index.js

@@ -0,0 +1,21 @@
+import React from "react";
+
+export default ({data}) => (
+    <div>
+        <h1>About {data.site.siteMetadata.title}</h1>
+        <p>
+            We're the only site running on your computer dedicated to showing the best
+            photos and videos of pandas eating lots of food.
+    </p>
+    </div>
+);
+
+export const query = graphql`
+    query AboutQuery {
+        site {
+            siteMetadata {
+                title
+            }
+        }
+    }
+`

gatsby-src/src/pages/about.js

@@ -1,3 +1,13 @@
-import React from "react"
+import React from "react";
 
-export default () => <div>Hello world!</div>
+export default () => (
+    <div>
+        <h1>Amazing Pandas Eating Things</h1>
+        <div>
+            <img
+                src="https://2.bp.blogspot.com/-BMP2l6Hwvp4/TiAxeGx4CTI/AAAAAAAAD_M/XlC_mY3SoEw/s1600/panda-group-eating-bamboo.jpg"
+                alt="Group of pandas eating bamboo"
+            />
+        </div>
+    </div>
+);

gatsby-src/src/pages/index.js

@@ -0,0 +1,6 @@
+import Typography from "typography";
+import kirkhamTheme from "typography-theme-kirkham";
+
+const typography = new Typography(kirkhamTheme);
+
+export default typography;