Skip to main content
Community Plugin
View plugin on GitHub
See starters using this

gatsby-theme-weather

A weather dashboard Gatsby theme powered by weather.gov.

gatsby-theme-weather screenshot

Features

  • Geolocation-provided weather
  • Weather context state hook available for custom components - useWeather
  • Refresh interval for data fetching
  • Custom Notification system
  • Carbon Design System Iconography

Installation

To use this theme in your Gatsby sites, follow these instructions:

  1. Install the theme

    yarn add gatsby-theme-weather
  2. Add the theme to your gatsby-config.js:

    module.exports = {
     plugins: [
       {
         resolve: 'gatsby-theme-weather',
       },
     ],
    }
  3. Start your site

    gatsby develop

Customization

Each piece of this theme is customizable, however it is important to note the Skeleton will be our core data layer component and should not be shadowed without careful consideration.

Theme

To customize the color theme, shadow gatsby-theme-weather/src/theme.js

Options

This theme accepts a few options for functionality, as well as modifying the experience.

Option Value Type Default Value
refreshInterval Integer 20

Note: refreshInterval is expressed in minutes

Components

Below is a table of available components to shadow and use as shortcodes in MDX.

Filename Component Name Type Description
ColorSwatch.js ColorSwatch Card component Displays current color palette
CurrentWeather.js CurrentWeather Card component Displays current weather in a card
CurrentTime.js CurrentTime Time component Displays current time (12-hour, 2-digit minute format)
w-icon.js WIcon Icon component Used to retrieve appropriate icon based on props.icon
Card.js Card { StyledCard } Card component Base card and named StyledCard export for wrapping

License

MIT