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.