0.1.2 • Published 4 years ago

gatsby-theme-weather v0.1.2

Weekly downloads
2
License
MIT
Repository
github
Last release
4 years ago

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.

OptionValue TypeDefault Value
refreshIntervalInteger20

Note: refreshInterval is expressed in minutes

Components

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

FilenameComponent NameTypeDescription
ColorSwatch.jsColorSwatchCard componentDisplays current color palette
CurrentWeather.jsCurrentWeatherCard componentDisplays current weather in a card
CurrentTime.jsCurrentTimeTime componentDisplays current time (12-hour, 2-digit minute format)
w-icon.jsWIconIcon componentUsed to retrieve appropriate icon based on props.icon
Card.jsCard { StyledCard }Card componentBase card and named StyledCard export for wrapping

License

MIT