fix: use custom html component elements

trovster · Oct 2, 2023 · cdcf935 · cdcf935
1 parent 8114d2d
commit cdcf935
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 48 deletions.
diff --git a/README.md b/README.md
@@ -10,16 +10,26 @@ This website is built using [Eleventy](https://www.11ty.dev).
 
 ## The Code
 
-The components loop through the `fitness.json` dataset.
+There are two main web components; a ring and a fully featured card.
 
-Each component expects a JSON payload shape that looks like the following.
+```html
+<fitness-ring data="{ move, exercise, stand }">
+</fitness-ring>
+
+<fitness-card data="{ ...json }">
+</fitness-card>
+```
+
+In this 11ty 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",
-    "step_count": 18935,
+    "steps": 18935,
     "distance": 16254,
-    "flights_climbed": 8,
+    "flights": 8,
     "move": {
         "total": 500,
         "goal": 750

diff --git a/src/_data/example.json b/src/_data/example.json
@@ -1,8 +1,8 @@
 {
     "date": "2023-09-25T00:00:00+00:00",
-    "step_count": 18935,
+    "steps": 18935,
     "distance": 16254,
-    "flights_climbed": 8,
+    "flights": 8,
     "move": {
         "total": 500,
         "goal": 750

diff --git a/src/_data/fitness.json b/src/_data/fitness.json
@@ -2,9 +2,9 @@
   "data": [
     {
       "date": "2023-09-25T00:00:00+00:00",
-      "step_count": 18935,
+      "steps": 18935,
       "distance": 16254,
-      "flights_climbed": 8,
+      "flights": 8,
       "move": {
         "total": 500,
         "goal": 750
@@ -20,9 +20,9 @@
     },
     {
       "date": "2023-09-26T00:00:00+00:00",
-      "step_count": 10639,
+      "steps": 10639,
       "distance": 8964,
-      "flights_climbed": 5,
+      "flights": 5,
       "move": {
         "total": 838,
         "goal": 650
@@ -35,6 +35,24 @@
         "total": 16,
         "goal": 12
       }
+    },
+    {
+      "date": "2023-09-27T00:00:00+00:00",
+      "steps": 700,
+      "distance": 1200,
+      "flights": 3,
+      "move": {
+        "total": 412,
+        "goal": 650
+      },
+      "exercise": {
+        "total": 12,
+        "goal": 30
+      },
+      "stand": {
+        "total": 12,
+        "goal": 12
+      }
     }
   ]
 }
diff --git a/src/components/card.njk b/src/components/card.njk
@@ -1,19 +1,19 @@
-<div class="py-6 space-y-6 rounded-2xl mx-auto bg-gray-800 text-white text-center max-w-3xl sm:text-left font-mono">
-    <div class="pb-6 px-6 border-b-2 border-zinc-400 text-center text-lg sm:text-2xl">
+<fitness-card class="block py-6 space-y-6 rounded-2xl mx-auto bg-gray-800 text-white text-center max-w-3xl sm:text-left font-mono">
+    <fitness-card-header class="block pb-6 px-6 border-b-2 border-zinc-400 text-center text-lg sm:text-2xl">
         {% renderFile './src/components/header.njk', { date: date } %}
-    </div>
+    </fitness-card-header>
 
-    <div class="flex flex-col gap-4 items-center px-6 sm:flex-row sm:justify-evenly">
+    <fitness-card-content class="flex flex-col gap-4 items-center px-6 sm:flex-row sm:justify-evenly">
         <div>
             {% renderFile './src/components/details.njk', { move: move, exercise: exercise, stand: stand } %}
         </div>
 
         <div class="relative w-full max-w-xs">
             {% renderFile './src/components/ring.njk', { move: move, exercise: exercise, stand: stand } %}
         </div>
-    </div>
+    </fitness-card-content>
 
-    <div class="pt-6 px-6 border-t-2 border-zinc-400">
-        {% renderFile './src/components/footer.njk', { steps: step_count, distance: distance, flights: flights_climbed } %}
-    </div>
-</div>
+    <fitness-card-footer class="block pt-6 px-6 border-t-2 border-zinc-400">
+        {% renderFile './src/components/footer.njk', { steps: steps, distance: distance, flights: flights } %}
+    </fitness-card-footer>
+</fitness-card>
diff --git a/src/components/ring.njk b/src/components/ring.njk
@@ -1,21 +1,24 @@
+<fitness-ring class="relative block mx-auto" data="">
+    <svg viewBox="0 0 36 36" data-stand="{{ stand | percent }}" data-exercise="{{ exercise | percent }}" data-move="{{ move | percent }}">
+        <g class="origin-center -rotate-90">
+            <circle stroke-width="3" r="16" class="stroke-move scale-100 fill-transparent translate-x-1/2 translate-y-1/2 opacity-25"/>
+            <circle stroke-width="3" r="16" class="stroke-move scale-100 fill-transparent translate-x-1/2 translate-y-1/2 animate-move" stroke-linecap="round" stroke-dashoffset="{{ move | percent | max }}" stroke-dasharray="{{ move | percent | max }}, 100"/>
+        </g>
 
-<svg viewBox="0 0 36 36" class="relative block mx-auto" data-stand="{{ stand | percent }}" data-exercise="{{ exercise | percent }}" data-move="{{ move | percent }}">
-    <g class="origin-center -rotate-90">
-        <circle stroke-width="3" r="16" class="stroke-move scale-100 fill-transparent translate-x-1/2 translate-y-1/2 opacity-25"/>
-        <circle stroke-width="3" r="16" class="stroke-move scale-100 fill-transparent translate-x-1/2 translate-y-1/2 animate-move" stroke-linecap="round" stroke-dashoffset="{{ move | percent | max }}" stroke-dasharray="{{ move | percent | max }}, 100"/>
-    </g>
+        <g class="origin-center -rotate-90">
+            <circle stroke-width="4" r="16" class="stroke-exercise scale-75 fill-transparent translate-x-1/2 translate-y-1/2 opacity-25"/>
+            <circle stroke-width="4" r="16" class="stroke-exercise scale-75 fill-transparent translate-x-1/2 translate-y-1/2 animate-exercise" stroke-linecap="round" stroke-dashoffset="{{ exercise | percent | max }}" stroke-dasharray="{{ exercise | percent | max }}, 100"/>
+        </g>
 
-    <g class="origin-center -rotate-90">
-        <circle stroke-width="4" r="16" class="stroke-exercise scale-75 fill-transparent translate-x-1/2 translate-y-1/2 opacity-25"/>
-        <circle stroke-width="4" r="16" class="stroke-exercise scale-75 fill-transparent translate-x-1/2 translate-y-1/2 animate-exercise" stroke-linecap="round" stroke-dashoffset="{{ exercise | percent | max }}" stroke-dasharray="{{ exercise | percent | max }}, 100"/>
-    </g>
+        <g class="origin-center -rotate-90">
+            <circle stroke-width="6" r="16" class="stroke-stand scale-50 fill-transparent translate-x-1/2 translate-y-1/2 opacity-25"/>
+            <circle stroke-width="6" r="16" class="stroke-stand scale-50 fill-transparent translate-x-1/2 translate-y-1/2 animate-stand" stroke-linecap="round" stroke-dashoffset="{{ stand | percent | max }}" stroke-dasharray="{{ stand | percent | max }}, 100"/>
+        </g>
 
-    <g class="origin-center -rotate-90">
-        <circle stroke-width="6" r="16" class="stroke-stand scale-50 fill-transparent translate-x-1/2 translate-y-1/2 opacity-25"/>
-        <circle stroke-width="6" r="16" class="stroke-stand scale-50 fill-transparent translate-x-1/2 translate-y-1/2 animate-stand" stroke-linecap="round" stroke-dashoffset="{{ stand | percent | max }}" stroke-dasharray="{{ stand | percent | max }}, 100"/>
-    </g>
-
-    {% svg 'move', { width: 2, height: 2, x: 17, y: 1, class: 'stroke-white fill-white @apply animate-pulse-once' } %}
-    {% svg 'exercise', { width: 2, height: 2, x: 17, y: 5, class: 'stroke-white fill-white @apply animate-pulse-once' } %}
-    {% svg 'stand', { width: 2, height: 2, x: 17, y: 9, class: 'stroke-white fill-white @apply animate-pulse-once' } %}
-</svg>
+        {% if true if showIcons else true %}
+        {% svg 'move', { width: 2, height: 2, x: 17, y: 1, class: 'stroke-white fill-white @apply animate-pulse-once' } %}
+        {% svg 'exercise', { width: 2, height: 2, x: 17, y: 5, class: 'stroke-white fill-white @apply animate-pulse-once' } %}
+        {% svg 'stand', { width: 2, height: 2, x: 17, y: 9, class: 'stroke-white fill-white @apply animate-pulse-once' } %}
+        {% endif %}
+    </svg>
+</fitness-ring>
diff --git a/src/index.njk b/src/index.njk
@@ -7,22 +7,34 @@
         <p class="text-lg md:text-xl">{{ site.summary }}</p>
     </div>
 
-    <div class="max-w-4xl mx-auto space-y-2 md:text-lg">
+    <div class="max-w-4xl mx-auto space-y-4 md:text-lg">
         <h2 class="tracking-tight leading-none font-display font-bold text-center text-2xl md:text-4xl">The Code</h2>
 
-        <p class="text-center max-w-3xl mx-auto">
+        <p class="max-w-3xl mx-auto">
             You can download the
             <a href="https://github.com/trovster/fitness.trovster.com" class="underline hover:no-underline focus:no-underline">repository of this project</a>
-            and setup your own components.
-            Each component expects a JSON payload shape that looks like the following.
+            and configure your `fitness.json` data to generate cards and rings. The code in the repository has been organised into
+            different nunjuck components for easiser compartmentalisation.
         </p>
 
+        <p class="max-w-3xl mx-auto">There are two main web components; a ring and a fully featured card.</p>
+
+        {% highlight 'html' %}
+<fitness-ring data="{ move, exercise, stand }">
+</fitness-ring>
+
+<fitness-card data="{ ...json }">
+</fitness-card>
+        {% endhighlight %}
+
+        <p class="max-w-3xl mx-auto">Each card component expects JSON data that looks like the following.</p>
+
         {% highlight 'json' %}
         {{ example | stringify | safe }}
         {% endhighlight %}
     </div>
 
-    <div class="max-w-4xl mx-auto space-y-6 text-center">
+    <div class="max-w-4xl pt-6 mx-auto space-y-6 text-center">
         <h2 class="tracking-tight leading-none font-display font-bold text-center text-2xl md:text-4xl">Cards</h2>
 
         <ul class="space-y-6">
@@ -34,26 +46,26 @@
         </ul>
     </div>
 
-    <div class="max-w-4xl mx-auto space-y-6 text-center">
+    <div class="max-w-4xl pt-6 mx-auto space-y-6 text-center">
         <h2 class="tracking-tight leading-none font-display font-bold text-center text-2xl md:text-4xl">Rings</h2>
 
         <ul class="flex flex-wrap gap-4 justify-center">
             {% for item in fitness.data %}
-            <li class="min-w-[20%]">
+            <li class="min-w-[47%] md:min-w-[20%]">
                 {% renderFile './src/components/ring.njk', item %}
             </li>
-            <li class="min-w-[20%]">
+            <li class="min-w-[47%] md:min-w-[20%]">
                 {% renderFile './src/components/ring.njk', item %}
             </li>
-            <li class="min-w-[20%]">
+            <li class="min-w-[47%] md:min-w-[20%]">
                 {% renderFile './src/components/ring.njk', item %}
             </li>
             {% endfor %}
         </ul>
 
-        <ul class="flex flex-wrap justify-center bg-gray-800 rounded-2xl p-6">
+        <ul class="flex flex-col gap-4 sm:flex-row sm:flex-wrap justify-center bg-gray-800 rounded-2xl p-6">
             {% for item in fitness.data %}
-            <li class="min-w-[48%] mx-[1%]">
+            <li class="min-w-full sm:min-w-[31%]">
                 {% renderFile './src/components/ring.njk', item %}
             </li>
             {% endfor %}