1.0.10 • Published 5 years ago

@rafaelquintanilha/gatsby-theme-countdown v1.0.10

Weekly downloads
10
License
MIT
Repository
github
Last release
5 years ago

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):

OptionDefaultDescription
repoUrl"https://github.com/rafaelquintanilha/gatsby-theme-countdown"Link to the theme repository
targetDateNext 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
hideGithubButtonfalseHide the top right Github link to the repo
hideDaysfalseHide days count
hideHoursfalseHide hours count
hideMinutesfalseHide minutes count
hideSecondsfalseHide seconds count
hideWhatsappShareButtonfalseHide Whatsapp share button
hideTwitterShareButtonfalseHide Whatsapp share button
hideFacebookShareButtonfalseHide Whatsapp share button
hideParticlesfalseHide 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.

ComponentPathDescription
MainHeadersrc/components/main-header.jsDisplays the mainHeader text as configured in options
SecondaryHeadersrc/components/secondary-header.jsDisplays the secondaryHeader text as configured in options
GithubLinksrc/components/github-link.jsComponent for the Github button displayed in the page
ShareButtonssrc/components/share-buttons.jsComponent for the share buttons displayed below SecondaryHeader
Creditssrc/components/credits.jsCredits displayed in the footer
SEOsrc/components/seo.js<Helmet> for the page
Particlessrc/components/particles.jsWrapper for particles.js
CountdownContainersrc/components/countdown-containerContainer for the countdown
CountNumbersrc/components/count-numberIndividual 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.