https://github.com/vse-volod/gatsby-theme-editorial

Editorial theme for Gatsby
https://github.com/vse-volod/gatsby-theme-editorial

editorial-theme gatsby gatsby-blog gatsby-theme gatsbyjs gatsbyjs-theme

Last synced: about 1 month ago
JSON representation

Editorial theme for Gatsby

• Host: GitHub
• URL: https://github.com/vse-volod/gatsby-theme-editorial
• Owner: vse-volod
• License: mit
• Created: 2019-08-31T13:30:06.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-03T10:15:24.000Z (almost 2 years ago)
• Last Synced: 2024-12-15T11:08:33.549Z (about 2 months ago)
• Topics: editorial-theme, gatsby, gatsby-blog, gatsby-theme, gatsbyjs, gatsbyjs-theme
• Language: CSS
• Size: 2.8 MB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Gatsby Theme Editoral

[Demo of Gatsby Starter Blog with Editorial theme](https://editorial.gatsbytemplates.io/)

Converted to Gatsby by [https://gatsbytemplates.io/](https://gatsbytemplates.io/?ref="github")

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

## Installation

To use this theme in your Gatsby sites, check [this example](https://github.com/vse-volod/gatsby-starter-blog) and follow these instructions:

1.  Install the theme

    ```sh

    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`:

    ```js

    module.exports = {

      plugins: [

        `gatsby-theme-editorial`,

        `gatsby-plugin-sass`

      ]

    }

    ```

4.  Start your site

    ```sh

    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 (

      

        

        

          

            
About

          

          
We are people

        

      

    )

  }

}


```

### 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.