Deep Dive

“The fastest auto dealership site in the world” Hundreds of hours of perf learnings, distilled

ContactSign Up for Free
Community Plugin
View plugin on GitHub

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
      }
    } 
  }
}
      `,
      },
    },
  ],
}
© 2022 Gatsby, Inc.