Skip to content
Create simple yet flexible countdowns with this Gatsby theme.
JavaScript
Branch: master
Clone or download
Pull request Compare This branch is 27 commits ahead of jlengstorf:master.
rafaelquintanilha Merge pull request #1 from kevinfoerster/master
added font feature setting to avoid resizing of container on update
Latest commit ef56da5 Aug 2, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples Improved SEO Jul 30, 2019
theme Merge pull request #1 from kevinfoerster/master Aug 2, 2019
.gitignore chore: ignore local Netlify stuff Jul 3, 2019
README.md Update README.md Jul 30, 2019
package.json Final touches Jul 30, 2019
yarn.lock Added theme-jam example Jul 30, 2019

README.md

Gatsby Theme Countdown

Create simple Countdown pages with this flexible Gatsby Theme.

Demos

Usage

  1. Create a Gatsby site
gatsby new countdown-example
  1. Navigate to your project's folder and install the theme
cd countdown-example/
yarn add @rafaelquintanilha/gatsby-theme-countdown
  1. Add the theme to your gatsby-config.js
module.exports = {
  siteMetadata: {
    title: "My Countdown",
    author: "Rafael Quintanilha"
  },
  plugins: [
    {
      resolve: "@rafaelquintanilha/gatsby-theme-countdown",
      options: {
        basePath: "/countdown",
        mainHeader: "My countdown will end in:",
        targetDate: "2020-04-28 00:00:00",
      }
    }
  ],
}

Then run yarn develop and go to http://localhost:8000/countdown to see your countdown working 🎉

Options

This theme is fully configurable through plugin options and shadowing.

Here's the full list of plugin options (add it in your gatsby-config.js):

Option Default Description
repoUrl "https://github.com/rafaelquintanilha/gatsby-theme-countdown" Link to the theme repository
targetDate Next new year's eve (e.g. "2020-01-01 00:00:00") Date for the countdown. Accepts any string that is convertible by MomentJS
mainHeader "Countdown to the New Year's Eve" Main text for the countdown
secondaryHeader "Spread the word!" Secondary text for the countdown
daysLabel "Days" Text that will be displayed below the days count
hoursLabel "Hours" Text that will be displayed below the hours count
minutesLabel "Minutes" Text that will be displayed below the minutes count
secondsLabel "Seconds" Text that will be displayed below the seconds count
hideGithubButton false Hide the top right Github link to the repo
hideDays false Hide days count
hideHours false Hide hours count
hideMinutes false Hide minutes count
hideSeconds false Hide seconds count
hideWhatsappShareButton false Hide Whatsapp share button
hideTwitterShareButton false Hide Whatsapp share button
hideFacebookShareButton false Hide Whatsapp share button
hideParticles false Hide particles.js in the background

You can see options in action for the theme-jam and world-cup examples.

Shadowing

Configs

This theme also comes with two configuration files for react-particles-js and react-share. You can override their default props using a technique called shadowing.

In order to do this, create a src/@rafaelquintanilha/gatsby-theme-countdown/configs folder from the root of your app. In there, you can override both particles.js and share-buttons.js.

Example of an extended particles.js config file

Components

You can also override the default implementation of one of the base components.

Component Path Description
MainHeader src/components/main-header.js Displays the mainHeader text as configured in options
SecondaryHeader src/components/secondary-header.js Displays the secondaryHeader text as configured in options
GithubLink src/components/github-link.js Component for the Github button displayed in the page
ShareButtons src/components/share-buttons.js Component for the share buttons displayed below SecondaryHeader
Credits src/components/credits.js Credits displayed in the footer
SEO src/components/seo.js <Helmet> for the page
Particles src/components/particles.js Wrapper for particles.js
CountdownContainer src/components/countdown-container Container for the countdown
CountNumber src/components/count-number Individual count number container

Example of how to override a component

Theme

Finally, it is also possible to override the theme's styling using theme-ui.

In order to do this, create a src/gatsby-plugin-theme-ui/index.js from the root of your project and override the styles you want.

Example:

import merge from "lodash.merge";
import theme from "@rafaelquintanilha/gatsby-theme-countdown/src/gatsby-plugin-theme-ui/index";

export default merge({}, theme, {
  colors: {
    primary: "#663399",
  },
  svg: {
    fill: "#663399"
  }
})

Development

This theme runs with Yarn workspaces, so you can run each example separately:

yarn dev
yarn dev:theme-jam
yarn dev:world-cup

By default, yarn dev will run the simple example.

Author

Created by Rafael Quintanilha.

Follow @webquintanilha
You can’t perform that action at this time.