feat: add star rating macro

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 %}

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 %}

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>

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>

src/css/blocks/stars.css

@@ -0,0 +1,7 @@
+.stars li:not(:first-child) {
+  margin-inline-start: -4px;
+}
+
+.stars li {
+  line-height: 16px;
+}