What is Weather Dial?

Weather Dial is a SvelteKit weather web application that displays information in a circular barplot. It is currently a demo that does not fetch real data from any API.

View the production website or learn more about the project’s design.

Technical Overview

Weahter Dial is built using SvelteKit and styled with Dart Sass. The production site is deployed using Vercel.

Commit Messages

Commit messages are prefixed with the following labels to make them easier to read:

• ♿️A11Y: accessibility
• 🔧CNFG: configuration
• 💄CSS: styling (CSS or SCSS)
• 📐DES: design
• 📝DOC: documentation
• 🐛FIX: bug fix
• 🟠SVLT: Svelte and SvelteKit
• 🚧WIP: work in progress (broken/partial code)
• 🎉RLS: new release (main branch merge)

Architecture

This repository is separated into the designs, src, and static folders, along with a few top-level files. Top-level files such as this README.md file are usually configuration or documentation files.

designs
├── WeatherDial-GitHub-banner.png           GitHub banner image
├── WeatherDial-GitHub-mockup.jpg           GitHub mockup image
├── WeatherDial-GitHub-socialPreview.png    GitHub social preview image
├── MachinistsEdge-UIconcepts-1.ai          Illustrator file with all assets (v1)
└── MachinistsEdge-UIconcepts-2.ai          Illustrator file with all assets (v2)

src
├── lib                       libaray of all Svelte components
│   └── SVGs                  all illustration and icon SVGs
│
├── routes                    all Svelte file for different pages of the web app
│   ├── cloud
│   │   └── +page.svelte      Cloud Cover page
│   │
│   ├── humidity
│   │   └── +page.svelte      Humidity page
│   │
│   ├── precipitation
│   │   └── +page.svelte      Precipitation page
│   │
│   ├── uv
│   │   └── +page.svelte      UV Index page
│   │
│   ├── wind
│   │   └── +page.svelte      Wind Speed page
│   │
│   ├── +layout.svelte        layout file (applied to all pages)
│   ├── +layout.ts            layout load file
│   └── +page.svelte          Temperature page
│
├── store
│   └── store.ts              Svelte stores (state management)
│
├── styles                    global styling
│   ├── _colors.scss          sass map with all colors
│   ├── _global.scss          global styles
│   ├── _index.scss           fowards all partial SCSS files in this folder
│   ├── _resets.scss          style resets
│   └── _variables.scss       CSS & SCSS variables
│
└── app.html                  main HTML

static
├── light-barBG.png           transparent gradient background for circular barplot
└── favicon.png               favicon