Skip to content
Editorial theme for Gatsby
CSS JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
static
.eslintrc.js
.gitignore
.prettierrc
.travis.yml
LICENSE
README.md
gatsby-browser.js
gatsby-config.js
gatsby-node.js
gatsby-ssr.js
index.js
package-lock.json
package.json
with-theme-path.js

README.md

Gatsby Theme Editoral

Demo of Gatsby Starter Blog with Editorial theme

Converted to Gatsby by https://gatsbytemplates.io/

Original theme by html5up https://html5up.net/

Installation

To use this theme in your Gatsby sites, check this example and follow these instructions:

  1. Install the theme

    npm i gatsby-theme-editorial
  2. Install dependencies

    npm i gatsby-plugin-sass node-sass
    
  3. Add the theme and sass plugin to your gatsby-config.js:

    module.exports = {
      plugins: [
        `gatsby-theme-editorial`,
        `gatsby-plugin-sass`
      ]
    }
  4. Start your site

    gatsby develop

Usage

Pages

In your %pagename%.jsx import Layout component from theme and pass location prop to it:

import Layout from 'gatsby-theme-editorial/src/components/layout'
import '../styles/main.css'

class About extends React.Component {
  render() {
    console.log(this.props)
    return (
      <Layout location={this.props.location}>
        <Helmet
          htmlAttributes={{ lang: 'en' }}
        />

        <section>
          <header className="main content">
            <h1>About</h1>
          </header>
          <div className="content">We are people</div>
        </section>
      </Layout>
    )
  }
}

Blog Posts

In your src/templates/blog-post.js, make a query and re-export template from theme, following this example:

import React from 'react'
import { graphql } from 'gatsby'
import BlogPostTemplate from 'gatsby-theme-editorial/src/components/blog-post'

export default BlogPostTemplate

export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!) {
    site {
      siteMetadata {
        title
        author
        description
        social {
          twitter
          facebook
          snapchat
          instagram
          medium
        }
        menuLinks {
          name
          link
        }
        contact {
          info
          email
          tel
          address
        }
      }
    }
    markdownRemark(fields: { slug: { eq: $slug } }) {
      id
      excerpt
      html
      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
      }
    }
    allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
      edges {
        node {
          excerpt
          fields {
            slug
          }
          frontmatter {
            date(formatString: "DD MMMM, YYYY")
            title
          }
        }
      }
    }
  }
`

Support

Any bugfixes, bug reports and feature requests are welcome.

You can’t perform that action at this time.