Add initial templates

demo/content/blog/my-first-post/index.md

@@ -0,0 +1,10 @@
+---
+title: My First Blog Post!
+date: "2019-07-28"
+featuredImage: "./featured.jpeg"
+featured: true
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent varius fringilla quam ultrices tincidunt. Etiam imperdiet massa a libero dignissim efficitur. Suspendisse tempor dictum nisi, sed tincidunt lorem blandit in. Morbi est diam, gravida vitae condimentum id, finibus imperdiet leo. Donec at tortor placerat, ullamcorper leo non, rutrum purus. Aenean varius luctus sapien, in sollicitudin augue blandit vestibulum. Cras elementum orci vel metus venenatis faucibus. Cras tempus cursus eros, vel consequat diam placerat et. Vestibulum ornare laoreet vulputate. In tellus orci, viverra a massa id, tristique fermentum arcu. Ut in velit lacus.
+
+Mauris commodo nisi mauris, imperdiet finibus tortor viverra non. Sed sit amet purus quis nibh lacinia consequat ac efficitur tellus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin egestas malesuada orci non porta. Aliquam erat volutpat. Sed hendrerit semper lacus porta sollicitudin. Nam tristique diam sem, sit amet condimentum tortor lacinia id. Donec ac mauris arcu. Praesent sodales sed nibh vel suscipit. In venenatis pretium gravida. Mauris ante lorem, imperdiet id iaculis nec, auctor sed dui. Aenean sagittis, purus vel aliquet condimentum, quam felis aliquet elit, nec dictum velit justo id nibh. Mauris non ex ac lacus condimentum rhoncus. Etiam hendrerit pretium mi. Morbi accumsan quis orci at viverra.

demo/content/blog/my-second-post/index.md

@@ -0,0 +1,10 @@
+---
+title: My Second Blog Post!
+date: "2019-07-29"
+featuredImage: "./featured.jpeg"
+featured: true
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent varius fringilla quam ultrices tincidunt. Etiam imperdiet massa a libero dignissim efficitur. Suspendisse tempor dictum nisi, sed tincidunt lorem blandit in. Morbi est diam, gravida vitae condimentum id, finibus imperdiet leo. Donec at tortor placerat, ullamcorper leo non, rutrum purus. Aenean varius luctus sapien, in sollicitudin augue blandit vestibulum. Cras elementum orci vel metus venenatis faucibus. Cras tempus cursus eros, vel consequat diam placerat et. Vestibulum ornare laoreet vulputate. In tellus orci, viverra a massa id, tristique fermentum arcu. Ut in velit lacus.
+
+Mauris commodo nisi mauris, imperdiet finibus tortor viverra non. Sed sit amet purus quis nibh lacinia consequat ac efficitur tellus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin egestas malesuada orci non porta. Aliquam erat volutpat. Sed hendrerit semper lacus porta sollicitudin. Nam tristique diam sem, sit amet condimentum tortor lacinia id. Donec ac mauris arcu. Praesent sodales sed nibh vel suscipit. In venenatis pretium gravida. Mauris ante lorem, imperdiet id iaculis nec, auctor sed dui. Aenean sagittis, purus vel aliquet condimentum, quam felis aliquet elit, nec dictum velit justo id nibh. Mauris non ex ac lacus condimentum rhoncus. Etiam hendrerit pretium mi. Morbi accumsan quis orci at viverra.

gatsby-theme-writer/content/blog/my-first-post/index.md

@@ -0,0 +1,10 @@
+---
+title: My First Blog Post!
+date: "2019-07-28"
+featuredImage: "./featured.jpg"
+featured: true
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent varius fringilla quam ultrices tincidunt. Etiam imperdiet massa a libero dignissim efficitur. Suspendisse tempor dictum nisi, sed tincidunt lorem blandit in. Morbi est diam, gravida vitae condimentum id, finibus imperdiet leo. Donec at tortor placerat, ullamcorper leo non, rutrum purus. Aenean varius luctus sapien, in sollicitudin augue blandit vestibulum. Cras elementum orci vel metus venenatis faucibus. Cras tempus cursus eros, vel consequat diam placerat et. Vestibulum ornare laoreet vulputate. In tellus orci, viverra a massa id, tristique fermentum arcu. Ut in velit lacus.
+
+Mauris commodo nisi mauris, imperdiet finibus tortor viverra non. Sed sit amet purus quis nibh lacinia consequat ac efficitur tellus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin egestas malesuada orci non porta. Aliquam erat volutpat. Sed hendrerit semper lacus porta sollicitudin. Nam tristique diam sem, sit amet condimentum tortor lacinia id. Donec ac mauris arcu. Praesent sodales sed nibh vel suscipit. In venenatis pretium gravida. Mauris ante lorem, imperdiet id iaculis nec, auctor sed dui. Aenean sagittis, purus vel aliquet condimentum, quam felis aliquet elit, nec dictum velit justo id nibh. Mauris non ex ac lacus condimentum rhoncus. Etiam hendrerit pretium mi. Morbi accumsan quis orci at viverra.

gatsby-theme-writer/content/blog/my-second-post/index.md

@@ -0,0 +1,10 @@
+---
+title: My Second Blog Post!
+date: "2019-07-29"
+featuredImage: "./featured.jpg"
+featured: true
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent varius fringilla quam ultrices tincidunt. Etiam imperdiet massa a libero dignissim efficitur. Suspendisse tempor dictum nisi, sed tincidunt lorem blandit in. Morbi est diam, gravida vitae condimentum id, finibus imperdiet leo. Donec at tortor placerat, ullamcorper leo non, rutrum purus. Aenean varius luctus sapien, in sollicitudin augue blandit vestibulum. Cras elementum orci vel metus venenatis faucibus. Cras tempus cursus eros, vel consequat diam placerat et. Vestibulum ornare laoreet vulputate. In tellus orci, viverra a massa id, tristique fermentum arcu. Ut in velit lacus.
+
+Mauris commodo nisi mauris, imperdiet finibus tortor viverra non. Sed sit amet purus quis nibh lacinia consequat ac efficitur tellus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin egestas malesuada orci non porta. Aliquam erat volutpat. Sed hendrerit semper lacus porta sollicitudin. Nam tristique diam sem, sit amet condimentum tortor lacinia id. Donec ac mauris arcu. Praesent sodales sed nibh vel suscipit. In venenatis pretium gravida. Mauris ante lorem, imperdiet id iaculis nec, auctor sed dui. Aenean sagittis, purus vel aliquet condimentum, quam felis aliquet elit, nec dictum velit justo id nibh. Mauris non ex ac lacus condimentum rhoncus. Etiam hendrerit pretium mi. Morbi accumsan quis orci at viverra.

gatsby-theme-writer/gatsby-config.js

@@ -1,6 +1,47 @@
 module.exports = {
   siteMetadata: {
-    title: "Gatsby Theme Jam Example Submission",
+    title: "Gatsby Theme Writer",
   },
-  plugins: ["gatsby-plugin-theme-ui"],
+  plugins: [
+    "gatsby-plugin-theme-ui",
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        path: `${__dirname}/content/blog`,
+        name: `blog`,
+      },
+    },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        path: `${__dirname}/content/assets`,
+        name: `assets`,
+      },
+    },
+    {
+      resolve: `gatsby-transformer-remark`,
+      options: {
+        plugins: [
+          {
+            resolve: `gatsby-remark-images`,
+            options: {
+              maxWidth: 590,
+            },
+          },
+          {
+            resolve: `gatsby-remark-responsive-iframe`,
+            options: {
+              wrapperStyle: `margin-bottom: 1.0725rem`,
+            },
+          },
+          `gatsby-remark-copy-linked-files`,
+          `gatsby-remark-smartypants`,
+          `@weknow/gatsby-remark-twitter`,
+        ],
+      },
+    },
+    `gatsby-transformer-sharp`,
+    `gatsby-plugin-sharp`,
+    `gatsby-plugin-offline`,
+  ],
 }

gatsby-theme-writer/gatsby-node.js

@@ -1,21 +1,32 @@
-exports.createPages = ({ actions, reporter }) => {
+const fs = require("fs")
+
+exports.onPreBootstrap = ({ reporter }, options) => {
+  const contentPath = options.contentPath || "content"
+  const blogPath = `${contentPath}/blog`
+  const assetsPath = `${contentPath}/assets`
+
+  const paths = [contentPath, blogPath, assetsPath]
+
+  // each of these paths must exist, or gatsby-source-filesystem will throw an error
+  paths.forEach(path => {
+    if (!fs.existsSync(path)) {
+      reporter.info(`Creating the ${path} directory`)
+      fs.mkdirSync(path)
+    }
+  })
+
+  if (!fs.existsSync(contentPath)) {
+    reporter.info(`Creating the ${contentPath} directory`)
+    fs.mkdirSync(contentPath)
+  }
+}
+
+exports.createPages = ({ actions, reporter }, options) => {
   reporter.warn("make sure to load data from somewhere!")
 
   // TODO replace this with data from somewhere
   actions.createPage({
-    path: "/",
+    path: options.basePath || "/",
     component: require.resolve("./src/templates/page.js"),
-    context: {
-      heading: "Your Theme Here",
-      content: `
-        <p>
-          Use this handy theme example as the basis for your own amazing theme!
-        </p>
-        <p>
-          For more information, see 
-          <a href="https://themejam.gatsbyjs.org">themejam.gatsbyjs.org</a>.
-        </p>
-      `,
-    },
   })
 }

gatsby-theme-writer/package.json

@@ -21,9 +21,20 @@
   "dependencies": {
     "@emotion/core": "^10.0.14",
     "@mdx-js/react": "^1.0.21",
+    "@weknow/gatsby-remark-twitter": "^0.2.1",
     "gatsby-image": "^2.2.7",
+    "gatsby-plugin-offline": "^2.2.4",
+    "gatsby-plugin-react-helmet": "^3.1.2",
+    "gatsby-plugin-sharp": "^2.2.9",
     "gatsby-plugin-theme-ui": "^0.2.2",
-    "theme-ui": "^0.2.2",
+    "gatsby-remark-copy-linked-files": "^2.1.3",
+    "gatsby-remark-images": "^3.1.7",
+    "gatsby-remark-responsive-iframe": "^2.2.4",
+    "gatsby-remark-smartypants": "^2.1.2",
+    "gatsby-source-filesystem": "^2.1.6",
+    "gatsby-transformer-remark": "^2.6.9",
+    "gatsby-transformer-sharp": "^2.2.4",
+    "theme-ui": "^0.2.21",
     "typeface-petit-formal-script": "^0.0.72",
     "typeface-rubik": "^0.0.72"
   },

gatsby-theme-writer/src/components/featured-post.js

@@ -0,0 +1,29 @@
+import { Link } from "gatsby"
+import Image from "gatsby-image"
+import React from "react"
+import { Styled } from "theme-ui"
+import PostMetadata from "./post-metadata"
+/** @jsx jsx */
+import { jsx } from "theme-ui"
+
+const FeaturedPost = ({
+  title,
+  formattedDate,
+  descriptionHTML,
+  slug,
+  fluidImageData,
+  timeToRead,
+}) => {
+  return (
+    <article>
+      <Image fluid={fluidImageData} />
+      <Styled.h2 sx={{ marginBottom: 0 }}>{title}</Styled.h2>
+      <PostMetadata timeToRead={timeToRead} formattedDate={formattedDate} />
+      <p>
+        {descriptionHTML} <Link to={slug}>Read more</Link>
+      </p>
+    </article>
+  )
+}
+
+export default FeaturedPost

gatsby-theme-writer/src/components/featured-posts.js

@@ -0,0 +1,31 @@
+import FeaturedPost from "./featured-post"
+/** @jsx jsx */
+import { jsx } from "theme-ui"
+
+const FeaturedPosts = ({ posts }) => {
+  return (
+    <div
+      sx={{
+        display: "grid",
+        gridColumnGap: 3,
+        gridTemplateColumns: "repeat(2, 1fr)",
+        padding: 3,
+        border: "1px solid #eee",
+        backgroundColor: "#fcfcfc",
+        borderRadius: 4,
+      }}
+    >
+      {posts.map(post => (
+        <FeaturedPost
+          title={post.frontmatter.title}
+          formattedDate={post.frontmatter.date}
+          descriptionHTML={post.excerpt}
+          fluidImageData={post.frontmatter.featuredImage.childImageSharp.fluid}
+          timeToRead={post.timeToRead}
+        />
+      ))}
+    </div>
+  )
+}
+
+export default FeaturedPosts

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

@@ -2,7 +2,7 @@ import React from "react"
 import { css, Global } from "@emotion/core"
 import { Layout as StyledLayout, Header, Main, Container } from "theme-ui"
 import { graphql, useStaticQuery } from "gatsby"
-import SiteTitle from "./SiteTitle"
+import SiteTitle from "./site-title"
 
 const Layout = ({ children }) => {
   const data = useStaticQuery(graphql`

gatsby-theme-writer/src/components/post-metadata.js

@@ -0,0 +1,11 @@
+import React from "react"
+
+const PostMetadata = ({ timeToRead, formattedDate }) => {
+  return (
+    <small>
+      {formattedDate} | {`${timeToRead || 0} minute read`}
+    </small>
+  )
+}
+
+export default PostMetadata

gatsby-theme-writer/src/components/SiteTitle.js → gatsby-theme-writer/src/components/site-title.js

@@ -1,10 +1,19 @@
 /** @jsx jsx */
 import { jsx } from "theme-ui"
+// eslint-disable-next-line
 import React from "react"
 
 const SiteTitle = ({ baseUrl, children }) => {
   return (
-    <a href={baseUrl} sx={{ textDecoration: "none", color: "text" }}>
+    <a
+      href={baseUrl}
+      sx={{
+        textDecoration: "none",
+        color: "text",
+        paddingLeft: 4,
+        paddingRight: 4,
+      }}
+    >
       <h1 sx={{ fontFamily: "title" }}>{children}</h1>
     </a>
   )

gatsby-theme-writer/src/gatsby-plugin-theme-ui/index.js

@@ -8,22 +8,20 @@ export default {
     text: "#232129",
     background: "#fff",
     primary: "#4d13d1",
-    light: "#eeeeee",
+    gray: ["#efefef", "#ddd", "#333", "#111"],
   },
   fonts: {
-    body: "Lora, serif",
     heading: "Rubik, sans-serif",
     title: "Petit Formal Script, sans-serif",
-    default:
-      '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+    default: "Lora, serif",
   },
-  fontSizes: [16, 18, 20, 22, 27, 36],
+  fontSizes: [18, 20, 22, 27, 36, 48],
   lineHeights: {
     text: "1.45",
     heading: "1.1",
   },
   sizes: {
-    container: 650,
+    container: 900,
   },
   styles: {
     Layout: {
@@ -34,18 +32,9 @@ export default {
       lineHeight: "text",
     },
     Header: {
-      backgroundColor: "primary",
-      color: "background",
-      fontWeight: "bold",
-      margin: 0,
-      span: {
-        display: "block",
-        fontSize: 3,
-        margin: "0 auto",
-        maxWidth: "container",
-        padding: 3,
-        width: "90vw",
-      },
+      marginTop: 2,
+      display: "flex",
+      justifyContent: "center",
     },
     Main: {
       margin: "0 auto",
@@ -61,6 +50,13 @@ export default {
       color: "text",
       fontSize: 5,
       lineHeight: "heading",
+      fontFamily: "heading",
+      fontWeight: 400,
+    },
+    h2: {
+      color: "text",
+      fontFamily: "heading",
+      fontWeight: 400,
     },
   },
 }