wonderfulfrog/wonderfulfrog.com
1
0
Fork 0
Code Issues Pull requests Activity Actions

feat: add star rating macro

Browse source
This commit is contained in:
Devin Haska 2024-02-22 15:06:19 -08:00
parent 251ffdf1c4
commit 41b79ba54d
5 changed files with 31 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/_includes/layouts/catalogue-item.html
View file

@ -17,6 +17,12 @@ imageCaption: ""
{% block title %}<h1>{{ title }}</h1>{% endblock %} {% block title %}<h1>{{ title }}</h1>{% endblock %}
{% block subtitle %}<h2 class="[ text-fadeText ]" style="--flow-space: 0.25em">{{ subtitle }}</h2>{% endblock %} {% block subtitle %}<h2 class="[ text-fadeText ]" style="--flow-space: 0.25em">{{ subtitle }}</h2>{% endblock %}
{{ tertiary | safe }} {{ tertiary | safe }}
{% if rating %}
<div class="[ flex justify-center ]">
{% from "macros/utils.njk" import stars %}
{{ stars(rating) }}
</div>
{% endif %}
{% if filteredTags | length > 0 %} {% if filteredTags | length > 0 %}
<ul class="[ categories list-none p-0 ] [ cluster justify-center ]"> <ul class="[ categories list-none p-0 ] [ cluster justify-center ]">
{% for tag in filteredTags %}<li class="[ flex gap-0.25 ]">{{ tag }}</li>{% endfor %} {% for tag in filteredTags %}<li class="[ flex gap-0.25 ]">{{ tag }}</li>{% endfor %}

12
src/_includes/macros/utils.njk Normal file
View file

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

3
src/_includes/svgs/star-empty.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 592 B

3
src/_includes/svgs/star.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 376 B

7
src/css/blocks/stars.css Normal file
View file

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