https://github.com/trovster/fitness.trovster.com

Fitness Cards and Activity Rings, based on Apple Fitness.
https://github.com/trovster/fitness.trovster.com

11ty activity-rings api eleventy fitness health rings tailwind

Last synced: 22 days ago
JSON representation

Fitness Cards and Activity Rings, based on Apple Fitness.

• Host: GitHub
• URL: https://github.com/trovster/fitness.trovster.com
• Owner: trovster
• Created: 2023-09-28T14:25:04.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-10-06T08:18:52.000Z (about 1 year ago)
• Last Synced: 2024-10-05T10:54:57.489Z (about 1 month ago)
• Topics: 11ty, activity-rings, api, eleventy, fitness, health, rings, tailwind
• Language: Nunjucks
• Homepage: https://fitness.trovster.com/
• Size: 299 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Fitness Web Component

Simple Web Components for fitness cards and activity rings.

The items in this demo are built using

[Fitness Visualisations](https://github.com/trovster/fitness-visualisations)

Web Components.

This website is built using [Eleventy](https://www.11ty.dev), styled using

[Tailwind](https://tailwindcss.com) and the icons are from

[Heroicons](https://heroicons.com).

## The Code

There are two main web components; a ring and a fully featured card.

```html

    
Move

    
Exercise

    
Stand

    …

    …

    …


```

In this [Eleventy](https://www.11ty.dev) codebase, the components loop through

the `fitness.json` dataset. Each card component expects JSON data that looks

like the following.

```json

{

    "date": "2023-09-25T00:00:00+00:00",

    "steps": 18935,

    "distance": 16254,

    "flights": 8,

    "move": {

        "total": 500,

        "goal": 750

    },

    "exercise": {

        "total": 30,

        "goal": 60

    },

    "stand": {

        "total": 8,

        "goal": 10

    }

}

```