From 854294a799338bd3d0f13ffa647b909c7f1bb403 Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Tue, 14 Mar 2017 11:01:37 -0700 Subject: [PATCH] Upgrade branch to latest gatsby --- components/Bio.js | 8 +- components/ReadNext.js | 53 - gatsby-config.js | 49 +- gatsby-node.js | 66 +- html.js | 42 +- layouts/default.js | 9 +- package.json | 31 +- page-templates/blog-post.js | 71 - pages/2015-05-01-hello-world/salty_egg.jpg | Bin 10114 -> 684322 bytes pages/404.md | 6 - pages/index.js | 29 +- templates/template-blog-post.js | 59 + yarn.lock | 8650 ++++++++++++++++++++ 13 files changed, 8871 insertions(+), 202 deletions(-) delete mode 100644 components/ReadNext.js delete mode 100644 page-templates/blog-post.js delete mode 100644 pages/404.md create mode 100644 templates/template-blog-post.js create mode 100644 yarn.lock diff --git a/components/Bio.js b/components/Bio.js index 56b86e6..b16e7f7 100644 --- a/components/Bio.js +++ b/components/Bio.js @@ -3,6 +3,10 @@ import { rhythm } from 'utils/typography' import { prefixLink } from 'gatsby-helpers' import profilePic from './profile-pic.jpg' +// Import typefaces +import 'typeface-montserrat' +import 'typeface-merriweather' + class Bio extends React.Component { render () { return ( @@ -13,7 +17,7 @@ class Bio extends React.Component { > {`author - Written by TODO author name who lives and works in TODO San Francisco building useful things. You should follow him on Twitter + Written by Kyle Mathews who lives and works in San Francisco building useful things. You should follow him on Twitter

) } diff --git a/components/ReadNext.js b/components/ReadNext.js deleted file mode 100644 index 59b86ea..0000000 --- a/components/ReadNext.js +++ /dev/null @@ -1,53 +0,0 @@ -const React = require('react') -const { Link } = require('react-router') - -const { rhythm, adjustFontSizeToMSValue } = require('utils/typography') - -const Component = React.createClass({ - render () { - const { nextPost } = this.props - if (!nextPost) { - return null - } else { - return ( -
-
- READ THIS NEXT: -
-

- - {nextPost.frontmatter.title} - -

-

{nextPost.excerpt}

-
-
- ) - } - } -}) - -export default Component - -export const query = ` -readNext { - id - excerpt(pruneLength: 200) - frontmatter { - title - } -} -` - diff --git a/gatsby-config.js b/gatsby-config.js index d46145e..75fec1e 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -1,10 +1,49 @@ -const config = { +module.exports = { siteMetadata: { title: 'Gatsby Starter Blog', author: 'Kyle Mathews', - homeCity: 'San Francisco', }, - sources: `${__dirname}/pages/`, + plugins: [ + { + resolve: `gatsby-source-filesystem`, + options: { + path: `${__dirname}/pages`, + name: 'pages', + }, + }, + `gatsby-parser-remark`, + `gatsby-parser-sharp`, + { + resolve: `gatsby-typegen-remark`, + options: { + plugins: [ + { + resolve: `gatsby-typegen-remark-responsive-image`, + options: { + maxWidth: 590, + }, + }, + { + resolve: `gatsby-typegen-remark-responsive-iframe`, + options: { + wrapperStyle: `margin-bottom: 1.0725rem`, + }, + }, + 'gatsby-typegen-remark-prismjs', + 'gatsby-typegen-remark-copy-linked-files', + 'gatsby-typegen-remark-smartypants', + ], + }, + }, + `gatsby-typegen-filesystem`, + `gatsby-typegen-sharp`, + `gatsby-plugin-sharp`, + { + resolve: `gatsby-plugin-google-analytics`, + options: { + //trackingId: `ADD YOUR TRACKING ID HERE`, + }, + }, + `gatsby-plugin-offline`, + ], } - -export default config diff --git a/gatsby-node.js b/gatsby-node.js index 34c2b8f..af4204c 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -1,46 +1,66 @@ -import _ from 'lodash' -import Promise from 'bluebird' -import path from 'path' +const _ = require('lodash') +const Promise = require('bluebird') +const path = require('path') +const select = require(`unist-util-select`) +const precache = require(`sw-precache`) +const fs = require(`fs-extra`) -exports.rewritePath = (parsedFilePath, metadata) => { - if (parsedFilePath.ext === 'md') { - return `/${parsedFilePath.dirname.split('---')[1]}/` - } -} +exports.createPages = ({ args }) => { + const { graphql } = args -exports.createPages = ({ graphql }) => ( - new Promise((resolve, reject) => { + return new Promise((resolve, reject) => { const pages = [] - const blogPost = path.resolve('./page-templates/blog-post.js') + const blogPost = path.resolve('templates/template-blog-post.js') graphql(` { - allMarkdown(first: 1000) { + allMarkdownRemark(limit: 1000) { edges { node { - path + slug } } } } `) - .then(result => { + .then((result) => { if (result.errors) { console.log(result.errors) reject(result.errors) } // Create blog posts pages. - _.each(result.data.allMarkdown.edges, (edge) => { - if (edge.node.path !== '/404/') { - pages.push({ - path: edge.node.path, - component: blogPost, - }) - } + _.each(result.data.allMarkdownRemark.edges, (edge) => { + pages.push({ + path: edge.node.slug, // required + component: blogPost, + context: { + slug: edge.node.slug, + }, + }) }) - console.log(pages) resolve(pages) }) }) -) +} + +// Add custom url pathname for blog posts. +exports.modifyAST = ({ args }) => { + const { ast } = args + const files = select(ast, 'File') + files.forEach((file) => { + if (file.extension !== `md`) { + return + } + const parsedFilePath = path.parse(file.relativePath) + console.log(parsedFilePath) + const slug = `/${parsedFilePath.dir}/` + console.log(slug) + file.slug = slug + const markdownNode = select(file, `MarkdownRemark`)[0] + if (markdownNode) { + markdownNode.slug = slug + } + }) + return files +} diff --git a/html.js b/html.js index 05dc687..6562349 100644 --- a/html.js +++ b/html.js @@ -1,19 +1,25 @@ import React from 'react' -import DocumentTitle from 'react-document-title' -import { prefixLink } from 'gatsby-helpers' -import { GoogleFont, TypographyStyle } from 'react-typography' +import { TypographyStyle } from 'react-typography' +import Helmet from 'react-helmet' + import typography from './utils/typography' -import HTMLScripts from 'html-scripts' -import HTMLStyles from 'html-styles' + +let stylesStr +if (process.env.NODE_ENV === `production`) { + try { + stylesStr = require(`!raw-loader!./public/styles.css`) + } catch (e) { + console.log(e) + } +} module.exports = React.createClass({ - displayName: 'HTML', - propTypes: { - body: React.PropTypes.string, - }, render () { - const { body } = this.props - const title = DocumentTitle.rewind() + const head = Helmet.rewind() + let css + if (process.env.NODE_ENV === `production`) { + css =