Skip to content
A weather dashboard Gatsby theme, composed using MDX and Theme UI, powered by Dark Sky.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.config
.vscode
demo
images
theme
.gitignore
netlify.toml
package.json
readme.md
yarn.lock

readme.md

gatsby-theme-weather

A weather dashboard Gatsby theme, composed using MDX and Theme UI, powered by Dark Sky.

gatsby-theme-weather screenshot

Features

  • MDX composition with custom shortcodes
  • Theme UI-based theming
  • Geolocation-provided weather
  • Weather context state hook available for custom components - useWeather
  • Refresh interval for data fetching

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',
          options: {
            apiKey: process.env.API_KEY,
          },
        },
      ],
    }
  3. Install dotenv to keep your API key a secret

    yarn add -D dotenv
  4. Sign up for an API key with Dark Sky to successfully fetch weather data.

  5. Create and populate ENV file, .env.development

    API_KEY=your-api-key-here
    
  6. Dynamically load ENV file based on NODE_ENV (*Note: this is automatically set to development by Gatsby in development mode*)

    // gatsby-config.js
    const d = require('dotenv')
    if (process.env.NODE_ENV !== 'PRODUCTION') {
      d.config({
        path: `.env.development`,
      })
    }
    
    module.exports = {
      plugins: [
        {
          resolve: 'gatsby-theme-weather',
          options: {
            apiKey: process.env.API_KEY,
          },
        },
      ],
    }
  7. Start your site

    gatsby develop

Deploying

In the context of production deployments, ensure the API_KEY environment variable is appropriately set.

Customization

Each piece in 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. Please refer to the Theme UI container styles to modify styles of our other core components (Header, Footer, Main, Container, etc.).

Options

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

Option Value Type Default Value
apiKey String n/a
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

Theme

This theme uses Theme UI for MDX. To customize the color palette, shadow the Theme UI configuration file.

// src/gatsby-plugin-theme-ui/index.js
export default {
  colors: {
    text: '#273242',
    background: '#FDF8F7',
    muted: '#A09D9E',
    secondary: '#EFBDB0',
    primary: '#c6797e',
    accent: '#E3F0E5',
  },
}

License

MIT

You can’t perform that action at this time.