Gatsby Theme Countdown

Create simple Countdown pages with this flexible Gatsby Theme.

Demos

• Simple (default configs)
• Theme Jam (config shadowing example)
• World Cup (component shadowing example)

Usage

1. Create a Gatsby site

gatsby new countdown-example

2. Navigate to your project's folder and install the theme

cd countdown-example/
yarn add @rafaelquintanilha/gatsby-theme-countdown

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