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

Gatsby Theme Massively
https://github.com/vse-volod/gatsby-theme-massively

gatsby gatsby-blog gatsby-theme gatsbyjs gatsbyjs-theme massively-theme

Last synced: 3 months ago
JSON representation

Gatsby Theme Massively

• Host: GitHub
• URL: https://github.com/vse-volod/gatsby-theme-massively
• Owner: vse-volod
• License: mit
• Created: 2019-08-26T05:06:32.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-04T01:36:19.000Z (almost 2 years ago)
• Last Synced: 2024-09-30T10:01:24.042Z (4 months ago)
• Topics: gatsby, gatsby-blog, gatsby-theme, gatsbyjs, gatsbyjs-theme, massively-theme
• Language: SCSS
• Homepage:
• Size: 4.11 MB
• Stars: 12
• Watchers: 2
• Forks: 4
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Gatsby Theme Massively

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

Converted to Gatsby by [Gatsby Templates Team](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-massively

    ```

    

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-massively`,

        `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-massively/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-massively/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.