feat: style theme

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+.cache
+public

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Jason Lengstorf
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,5 @@
+# Gatsby Theme: Styling Abstracted Data
+
+This is a simplified theme that _only_ handles styling data. It relies on the data abstraction in [`@jlengstorf/gatsby-theme-data](https://github.com/jlengstorf/gatsby-theme-data).
+
+Eventually, a post explaining how this works will be posted at <https://lengstorf.com/code/data-abstraction-in-apps/>

gatsby-config.js

@@ -0,0 +1,20 @@
+const pkg = require('./package.json');
+
+module.exports = {
+  siteMetadata: {
+    title: 'My Website'
+  },
+  __experimentalThemes: ['gatsby-theme-data'],
+  plugins: [
+    /*
+     * We need to make sure that Webpack processes this theme as ES6, so we add
+     * this plugin and specify the package name in `modules`.
+     */
+    {
+      resolve: 'gatsby-plugin-compile-es6-packages',
+      options: {
+        modules: [pkg.name]
+      }
+    }
+  ]
+};

index.js

@@ -0,0 +1,2 @@
+// boop
+export { default as Layout } from './src/components/layout';

package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@jlengstorf/gatsby-theme-style",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "develop": "gatsby clean && GATSBY_GRAPHQL_IDE=playground gatsby develop"
+  },
+  "dependencies": {
+    "@jlengstorf/gatsby-theme-data": "^0.0.2"
+  },
+  "peerDependencies": {
+    "gatsby": "^2.2.1",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4"
+  },
+  "devDependencies": {
+    "gatsby": "^2.2.1",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4"
+  }
+}

src/components/layout.css

@@ -0,0 +1,66 @@
+html,
+body {
+  color: #666;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
+  font-size: 18px;
+  margin: 0;
+  padding: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: #222;
+}
+
+.site-header {
+  background: rebeccapurple;
+  color: white;
+}
+
+.site-header nav {
+  margin: 0 auto;
+  max-width: 600px;
+  padding: 1rem 0;
+}
+
+.site-header a {
+  color: inherit;
+  margin-right: 1rem;
+}
+
+.site-content {
+  margin: 3rem auto;
+  max-width: 600px;
+}
+
+.post-preview {
+  margin: 0 0 1.5rem;
+  padding: 0;
+}
+
+.post-preview + .post-preview {
+  border-top: 1px solid #666;
+  padding-top: 1rem;
+}
+
+.post-heading {
+  margin: 0;
+}
+
+.post-byline,
+.read-more {
+  margin: 0.5rem 0 0;
+}
+
+.post-byline {
+  font-size: 0.875rem;
+}
+
+.post-content {
+  margin-top: 2rem;
+}

src/components/layout.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Link } from 'gatsby';
+import useSiteMetadata from '../hooks/use-sitemetadata';
+
+import './layout.css';
+
+const Layout = ({ children }) => {
+  const meta = useSiteMetadata();
+
+  return (
+    <React.Fragment>
+      <header className="site-header">
+        <nav>
+          <Link to="/">{meta.title}</Link>
+          <Link to="/posts/">Posts</Link>
+        </nav>
+      </header>
+      <main className="site-content">{children}</main>
+    </React.Fragment>
+  );
+};
+
+export default Layout;

src/components/post-preview.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Link } from 'gatsby';
+
+const PostPreview = ({ title, date, slug, author }) => (
+  <section className="post-preview">
+    <h2 className="post-heading">{title}</h2>
+    <p className="post-byline">
+      Posted on{' '}
+      <time dateTime={new Date(date).toISOString()}>
+        {new Date(date).toLocaleDateString('en-US', {
+          year: 'numeric',
+          month: 'long',
+          day: 'numeric'
+        })}
+      </time>{' '}
+      by {author.name}
+    </p>
+    <p className="read-more">
+      <Link to={`/posts${slug}`}>Read this post &rarr;</Link>
+    </p>
+  </section>
+);
+
+export default PostPreview;

src/components/post.js

@@ -0,0 +1,24 @@
+import React from 'react';
+
+const Post = ({ title, content, author, date }) => (
+  <React.Fragment>
+    <h1 className="post-heading">{title}</h1>
+    <p className="post-byline">
+      Posted on{' '}
+      <time dateTime={new Date(date).toISOString()}>
+        {new Date(date).toLocaleDateString('en-US', {
+          year: 'numeric',
+          month: 'long',
+          day: 'numeric'
+        })}
+      </time>{' '}
+      by {author.name}
+    </p>
+    <div
+      className="post-content"
+      dangerouslySetInnerHTML={{ __html: content }}
+    />
+  </React.Fragment>
+);
+
+export default Post;

src/gatsby-theme-data/components/layout.js

@@ -0,0 +1,3 @@
+import Layout from '../../components/layout';
+
+export default Layout;

src/gatsby-theme-data/components/post-preview.js

@@ -0,0 +1,3 @@
+import PostPreview from '../../components/post-preview';
+
+export default PostPreview;

src/gatsby-theme-data/components/post.js

@@ -0,0 +1,3 @@
+import Post from '../../components/post';
+
+export default Post;

src/hooks/use-sitemetadata.js

@@ -0,0 +1,17 @@
+import { graphql, useStaticQuery } from 'gatsby';
+
+const useSiteMetadata = () => {
+  const data = useStaticQuery(graphql`
+    {
+      site {
+        siteMetadata {
+          title
+        }
+      }
+    }
+  `);
+
+  return data.site.siteMetadata;
+};
+
+export default useSiteMetadata;