From 41b79ba54d9146b85ffa01c557a946c304b6f3c7 Mon Sep 17 00:00:00 2001
From: Devin Haska <wonderfulfrog@users.noreply.github.com>
Date: Thu, 22 Feb 2024 15:06:19 -0800
Subject: [PATCH] feat: add star rating macro

---
 src/_includes/layouts/catalogue-item.html |  6 ++++++
 src/_includes/macros/utils.njk            | 12 ++++++++++++
 src/_includes/svgs/star-empty.svg         |  3 +++
 src/_includes/svgs/star.svg               |  3 +++
 src/css/blocks/stars.css                  |  7 +++++++
 5 files changed, 31 insertions(+)
 create mode 100644 src/_includes/macros/utils.njk
 create mode 100644 src/_includes/svgs/star-empty.svg
 create mode 100644 src/_includes/svgs/star.svg
 create mode 100644 src/css/blocks/stars.css

diff --git a/src/_includes/layouts/catalogue-item.html b/src/_includes/layouts/catalogue-item.html
index 724147b..1ab61b5 100644
--- a/src/_includes/layouts/catalogue-item.html
+++ b/src/_includes/layouts/catalogue-item.html
@@ -17,6 +17,12 @@ imageCaption: ""
         {% block title %}<h1>{{ title }}</h1>{% endblock %}
         {% block subtitle %}<h2 class="[ text-fadeText ]" style="--flow-space: 0.25em">{{ subtitle }}</h2>{% endblock %}
         {{ tertiary | safe }}
+        {% if rating %}
+        <div class="[ flex justify-center ]">
+            {% from "macros/utils.njk" import stars %}
+            {{ stars(rating) }}
+        </div>
+        {% endif %}
         {% if filteredTags | length > 0 %}
             <ul class="[ categories list-none p-0 ] [ cluster justify-center ]">
                 {% for tag in filteredTags %}<li class="[ flex gap-0.25 ]">{{ tag }}</li>{% endfor %}
diff --git a/src/_includes/macros/utils.njk b/src/_includes/macros/utils.njk
new file mode 100644
index 0000000..9abc927
--- /dev/null
+++ b/src/_includes/macros/utils.njk
@@ -0,0 +1,12 @@
+{% macro stars(number) %}
+    {% set filledStars = number %}
+    {% set emptyStars = 5 - number %}
+    <ul class="[ stars ] [ flex list-none p-0 text-primary ]" aria-description="{{ number }} out of 5 stars">
+    {% for i in range(0, filledStars) %}
+        <li>{% include "svgs/star.svg" %}</li>
+    {% endfor %}
+    {% for i in range(0, emptyStars) %}
+        <li>{% include "svgs/star-empty.svg" %}</li>
+    {% endfor %}
+    </ul>
+{% endmacro %}
diff --git a/src/_includes/svgs/star-empty.svg b/src/_includes/svgs/star-empty.svg
new file mode 100644
index 0000000..eec0263
--- /dev/null
+++ b/src/_includes/svgs/star-empty.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0242 9.30754L15.9175 6.47892L15.2994 4.57681L10.4871 4.57681L9.00001 0H7.00001L5.51292 4.57681L0.700554 4.57682L0.0825195 6.47893L3.97581 9.30756L2.48873 13.8843L4.10677 15.0599L8.00002 12.2313L11.8933 15.0599L13.5113 13.8843L12.0242 9.30754ZM11.6581 13.035L10.2609 8.7346L13.919 6.07681L9.39729 6.07681L8.00001 1.77642L6.60273 6.07681L2.08102 6.07682L5.73917 8.7346L4.3419 13.035L8.00002 10.3772L11.6581 13.035Z" fill="currentColor"/>
+</svg>
diff --git a/src/_includes/svgs/star.svg b/src/_includes/svgs/star.svg
new file mode 100644
index 0000000..ccc8291
--- /dev/null
+++ b/src/_includes/svgs/star.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.00001 0H7.00001L5.51292 4.57681L0.700554 4.57682L0.0825195 6.47893L3.97581 9.30756L2.48873 13.8843L4.10677 15.0599L8.00002 12.2313L11.8933 15.0599L13.5113 13.8843L12.0242 9.30754L15.9175 6.47892L15.2994 4.57681L10.4871 4.57681L9.00001 0Z" fill="currentColor"/>
+</svg>
diff --git a/src/css/blocks/stars.css b/src/css/blocks/stars.css
new file mode 100644
index 0000000..a750f44
--- /dev/null
+++ b/src/css/blocks/stars.css
@@ -0,0 +1,7 @@
+.stars li:not(:first-child) {
+  margin-inline-start: -4px;
+}
+
+.stars li {
+  line-height: 16px;
+}