From 6436b9920f765c2f9c2f8e67e6c3bd0d43fca6c0 Mon Sep 17 00:00:00 2001
From: Trevor Morris <code@trovster.com>
Date: Fri, 6 Oct 2023 09:15:56 +0100
Subject: [PATCH] refactor: use npm hosted package and update values

---
 README.md         | 21 ++++++++++++---------
 package-lock.json | 13 ++++++-------
 package.json      |  4 ++--
 src/css/site.css  | 12 ++++++------
 src/index.njk     | 42 ++++++++++++++++++++++++------------------
 5 files changed, 50 insertions(+), 42 deletions(-)

diff --git a/README.md b/README.md
index 5e9ab30..fb4b3bc 100644
--- 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
index 3417f95..04bec7e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
-        "fitness-visualisations": "github:trovster/fitness-visualisations"
+        "@trovster/fitness-visualisations": "^1.0.0"
       },
       "devDependencies": {
         "@11ty/eleventy": "^2.0.1",
@@ -337,6 +337,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/@trovster/fitness-visualisations": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@trovster/fitness-visualisations/-/fitness-visualisations-1.0.0.tgz",
+      "integrity": "sha512-7qMMQ8s39fL5le6QY9ImOyS0nlKWZpoT7YHW4+WJ+AfjcFoXecbpBOO+iNAuTJzwduo7xrC17RexigqMvd3gAQ=="
+    },
     "node_modules/@types/minimatch": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
@@ -1024,12 +1029,6 @@
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
       "dev": true
     },
-    "node_modules/fitness-visualisations": {
-      "name": "@trovster/fitness-visualisations",
-      "version": "1.0.0",
-      "resolved": "git+ssh://git@github.com/trovster/fitness-visualisations.git#33fd1c65a37f8859584500314a901615f29c47c6",
-      "license": "MIT"
-    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
diff --git a/package.json b/package.json
index ec178e1..d642cb8 100644
--- 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
index 5661e4c..26f8dc8 100644
--- 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
index 0679b67..31753ab 100644
--- 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 %}