gatsby-theme-weather

A weather dashboard Gatsby theme powered by weather.gov.

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