Skip to content
Coverflow page for Gatsby projects
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.
demo
theme
.gitignore
.travis.yml
README.md
netlify.toml
package.json
yarn.lock

README.md

Cover flow Gatsby theme plugin

A Gatsby theme for creating cover flow pages with customizable sources.

See https://datakurre.github.io/gatsby-theme-coverflow/ for a live demo where cover flow has been mixed with gatsby-theme-blog and gatsby-source-rss-feed:

Cover flow supports customizable sources, customizable colors, and both internal and external links. Cover flow pages support keyboard navigation.

Installation

Manually add to your site

npm install --save gatsby-theme-coverflow

Usage

Theme options

Key Default value Description
path /coverflow/ Url for the created cover flow page
colors {} Configurable text, cover and backdrop colors (see example usage)
query `` GraphQL query for fetching the cover flow data (see example usage)

Each instance of cover flow theme plugin creates just a single page at configured path.

Colors of that page can be customized. Supported color keys and their default values are:

{
  text: `#fff`,
  cover: `#663399`,
  backdrop: `#333`,
}

Content of the cover page is defined with a GraphQL query:

{
  allCoverPages {
    edges {
      node {
        title
        link
      }
    }
  }
}

See the examples below on how to use GraphQL query aliases to conform with the required query...

Example usage

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-theme-blog`,
      options: {
        basePath: `/blog/`,
      },
    },
    {
      resolve: "gatsby-theme-coverflow",
      options: {
        path: `/`,
        colors: {
          text: `#fff`,
          cover: `#663399`,
          backdrop: `#333`,
        },
        query: `
{
  allCoverPages: allBlogPost(sort: {fields: date, order: DESC}) {
    edges {
      node {
        title
        link: slug
      }
    }
  }
}
      `,
      },
    },
    {
      resolve: `gatsby-source-rss-feed`,
      options: {
        url: `https://www.gatsbyjs.org/blog/rss.xml`,
        name: `GatsbyBlog`,
      },
    },
    {
      resolve: "gatsby-theme-coverflow",
      options: {
        path: `rss-feed`,
        query: `
{
  allCoverPages: allFeedGatsbyBlog {
    edges {
      node {
        title
        link
      }
    } 
  }
}
      `,
      },
    },
  ],
}
You can’t perform that action at this time.