refactor: use npm hosted package and update values

trovster · Oct 6, 2023 · 6436b99 · 6436b99
1 parent f4cfff7
commit 6436b99
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 42 deletions.
diff --git a/README.md b/README.md
@@ -16,22 +16,25 @@ There are two main web components; a ring and a fully featured card.
 
 ```html
 <fitness-ring
-    move-total="item.move.total" move-goal="item.move.goal"
-    exercise-total="item.exercise.total" exercise-goal="item.exercise.goal"
-    stand-total="item.stand.total" move-goal="item.stand.goal"
+    calories-total="item.move.total" calories-goal="item.move.goal"
+    minutes-total="item.exercise.total" minutes-goal="item.exercise.goal"
+    hours-total="item.stand.total" hours-goal="item.stand.goal"
 ></fitness-ring>
 
 <fitness-card
     date="item.date"
     replayable="true"
     steps="item.steps" distance="item.distance" flights="item.flights"
-    move-total="item.move.total" move-goal="item.move.goal"
-    exercise-total="item.exercise.total" exercise-goal="item.exercise.goal"
-    stand-total="item.stand.total" move-goal="item.stand.goal"
+    calories-total="item.move.total" calories-goal="item.move.goal"
+    minutes-total="item.exercise.total" minutes-goal="item.exercise.goal"
+    hours-total="item.stand.total" hours-goal="item.stand.goal"
 >
-    <svg slot="icon-move">…</svg>
-    <svg slot="icon-exercise">…</svg>
-    <svg slot="icon-stand">…</svg>
+    <div slot="calories">Move</div>
+    <div slot="minutes">Exercise</div>
+    <div slot="hours">Stand</div>
+    <svg slot="label-calories">…</svg>
+    <svg slot="label-minutes">…</svg>
+    <svg slot="label-hours">…</svg>
 </fitness-card>
 ```
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,7 +19,7 @@
     "tailwindcss",
     "fitness",
     "health",
-    "web-components"
+    "web components"
   ],
   "license": "ISC",
   "scripts": {
@@ -28,7 +28,7 @@
     "test": "echo \"Warning: No tests\" && exit 0"
   },
   "dependencies": {
-    "fitness-visualisations": "github:trovster/fitness-visualisations"
+    "@trovster/fitness-visualisations": "^1.0.0"
   },
   "devDependencies": {
     "@11ty/eleventy": "^2.0.1",

diff --git a/src/css/site.css b/src/css/site.css
@@ -26,15 +26,15 @@ fitness-card::part(ring) {
 }
 
 .muted {
-    --fitness-move: theme(colors.pink.400);
-    --fitness-exercise: theme(colors.sky.400);
-    --fitness-stand: theme(colors.teal.400);
+    --fitness-calories: theme(colors.pink.300);
+    --fitness-minutes: theme(colors.teal.300);
+    --fitness-hours: theme(colors.sky.300);
 }
 
 @media (prefers-color-scheme: dark) {
     .muted {
-        --fitness-move: theme(colors.fuchsia.600);
-        --fitness-exercise: theme(colors.blue.600);
-        --fitness-stand: theme(colors.emerald.600);
+        --fitness-calories: theme(colors.pink.900);
+        --fitness-minutes: theme(colors.teal.900);
+        --fitness-hours: theme(colors.sky.900);
     }
 }
diff --git a/src/index.njk b/src/index.njk
@@ -14,9 +14,9 @@
                 <a href="#date-{{ item.date | dateSlug }}" class="group flex flex-col items-center space-y-2" title="{{ item.date | dateFormat({ year: 'numeric', month: 'numeric', day: 'numeric' }) }}">
                     <fitness-ring
                         class="muted"
-                        move-total="{{ item.move.total }}" move-goal="{{ item.move.goal }}"
-                        exercise-total="{{ item.exercise.total }}" exercise-goal="{{ item.exercise.goal }}"
-                        stand-total="{{ item.stand.total }}" stand-goal="{{ item.stand.goal }}"
+                        calories-total="{{ item.move.total }}" calories-goal="{{ item.move.goal }}"
+                        minutes-total="{{ item.exercise.total }}" minutes-goal="{{ item.exercise.goal }}"
+                        hours-total="{{ item.stand.total }}" hours-goal="{{ item.stand.goal }}"
                     ></fitness-ring>
                     <span class="group-hover:underline underline-offset-2 decoration-2">{{ item.date | dateFormat({ year: 'numeric', month: 'numeric', day: 'numeric' }) }}</span>
                 </a>
@@ -34,13 +34,16 @@
                     date="{{ item.date | dateFormat }}"
                     replayable="true"
                     steps="{{ item.steps }}" distance="{{ item.distance }}" flights="{{ item.flights }}"
-                    move-total="{{ item.move.total }}" move-goal="{{ item.move.goal }}"
-                    exercise-total="{{ item.exercise.total }}" exercise-goal="{{ item.exercise.goal }}"
-                    stand-total="{{ item.stand.total }}" stand-goal="{{ item.stand.goal }}"
+                    calories-total="{{ item.move.total }}" calories-goal="{{ item.move.goal }}"
+                    minutes-total="{{ item.exercise.total }}" minutes-goal="{{ item.exercise.goal }}"
+                    hours-total="{{ item.stand.total }}" hours-goal="{{ item.stand.goal }}"
                 >
-                    {% svg 'move', { slot: 'icon-move' } %}
-                    {% svg 'exercise', { slot: 'icon-exercise' } %}
-                    {% svg 'stand', { slot: 'icon-stand' } %}
+                    <div slot="calories">Move</div>
+                    <div slot="minutes">Exercise</div>
+                    <div slot="hours">Stand</div>
+                    {% svg 'move', { slot: 'label-calories' } %}
+                    {% svg 'exercise', { slot: 'label-minutes' } %}
+                    {% svg 'stand', { slot: 'label-hours' } %}
                 </fitness-card>
             </li>
             {% endfor %}
@@ -76,22 +79,25 @@
 
         {% highlight 'html' %}
 <fitness-ring
-    move-total="item.move.total" move-goal="item.move.goal"
-    exercise-total="item.exercise.total" exercise-goal="item.exercise.goal"
-    stand-total="item.stand.total" move-goal="item.stand.goal"
+    calories-total="item.move.total" calories-goal="item.move.goal"
+    minutes-total="item.exercise.total" minutes-goal="item.exercise.goal"
+    hours-total="item.stand.total" hours-goal="item.stand.goal"
 ></fitness-ring>
 
 <fitness-card
     date="item.date"
     replayable="true"
     steps="item.steps" distance="item.distance" flights="item.flights"
-    move-total="item.move.total" move-goal="item.move.goal"
-    exercise-total="item.exercise.total" exercise-goal="item.exercise.goal"
-    stand-total="item.stand.total" move-goal="item.stand.goal"
+    calories-total="item.move.total" calories-goal="item.move.goal"
+    minutes-total="item.exercise.total" minutes-goal="item.exercise.goal"
+    hours-total="item.stand.total" hours-goal="item.stand.goal"
 >
-    <svg slot="icon-move">…</svg>
-    <svg slot="icon-exercise">…</svg>
-    <svg slot="icon-stand">…</svg>
+    <div slot="calories">Move</div>
+    <div slot="minutes">Exercise</div>
+    <div slot="hours">Stand</div>
+    <svg slot="icon-calories">…</svg>
+    <svg slot="icon-minutes">…</svg>
+    <svg slot="icon-hours">…</svg>
 </fitness-card>
         {% endhighlight %}