Skip to content

Commit 96518eb

Browse files
greatislandergreatislander
authored
feat: allow resources to be filtered by type (#815)
1 parent afed287 commit 96518eb

5 files changed

Lines changed: 94 additions & 34 deletions

File tree

‎package-lock.json‎

Lines changed: 5 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
"@11ty/eleventy": "2.0.1",
3636
"@11ty/eleventy-img": "3.1.0",
3737
"@11ty/eleventy-navigation": "0.3.5",
38-
"@zachleat/filter-container": "3.0.4",
38+
"@zachleat/filter-container": "greatislander/filter-container#feat/paginated-results",
3939
"infusion": "4.6.0",
4040
"modern-css-reset": "1.4.0",
4141
"wicg-inert": "3.1.2"

‎src/_includes/layouts/resources.njk‎

Lines changed: 82 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,31 +3,89 @@
33
{% set bodyClass = "resources" %}
44

55
{% block content %}
6-
{% if resources.length %}
6+
{% if collections.resources.length %}
77
<div class="[ wrapper ]">
8-
<div class="[ flow ] [ flow-md ]">
9-
{% for item in resources %}
10-
<article class="[ resource ] [ two:three ]">
11-
<div class="[ two:three__two ]">
12-
{% if item.data.metaImage %}
13-
{% image item.data.metaImage, item.data.metaImageAlt, "570", "380" %}
14-
{% else %}
15-
{% image "/assets/media/design-activity_hua7f35ba46080e3314a834735ed95f389_2828843_1000x0_resize_q75_box.jpg", "", "570", "380" %}
16-
{% endif %}
17-
</div>
18-
<div class="[ two:three__three ] [ flow ]">
19-
<h2><a href="{{ item.url }}">{{ item.data.title }}</a></h2>
20-
<p class="metadata">{% if item.data.author %}By <span class="[ author ]">{{ item.data.author }}</span> / {% endif %}Posted <time datetime="{{ item.data.date | isoDate }}" class="[ dt-published ]">{{ item.data.date | formatDate }}</time></p>
21-
{% if item.data.description %}
22-
<p>{{ item.data.description | safe }}</p>
23-
{% endif %}
24-
</div>
25-
</article>
26-
{% endfor %}
27-
</div>
28-
{% if pagination.pages.length > 1 %}
29-
{% include "partials/components/pagination.njk" %}
30-
{% endif %}
8+
<div id="resources">
9+
<div class="[ flow-lg ]">
10+
<filter-container class="[ filter ] [ flow ]" oninit data-paginate-results="10">
11+
<h2 class="[ h3 ]">Filter Resources</h2>
12+
<form class="[ filters ]">
13+
<label class="[ label ]" for="type">
14+
Type:
15+
<select class="[ select ]" name="type" id="type" data-filter-key="type">
16+
<option value="">Any Type</option>
17+
{% for type in resourceTags.types %}
18+
<option value="{{ type }}" data-slug="{{ type | slugify }}">{{ type }}</option>
19+
{% endfor %}
20+
</select>
21+
</label>
22+
{# <button type="reset" class="[ button ] [ button--sm ]" id="reset">{% include "svg/reset.svg" %}Clear Filters</button> #}
23+
</form>
24+
<div class="[ alert ]" role="alert" aria-live="polite" data-filter-results="matching resource./matching resources.">
25+
{{ collections.resources.length }} matching resources.</p>
26+
</div>
27+
<div class="[ visually-hidden ]" role="alert" aria-live="polite" data-pagination-results="showing page"></div>
28+
29+
<div class="[ flow ] [ flow-md ]">
30+
{% for item in collections.resources %}
31+
<article class="[ resource ] [ two:three ]" data-filter-type="{{ item.data.type }}">
32+
<div class="[ two:three__two ]">
33+
{% if item.data.metaImage %}
34+
{% image item.data.metaImage, item.data.metaImageAlt, "570", "380" %}
35+
{% else %}
36+
{% image "/assets/media/design-activity_hua7f35ba46080e3314a834735ed95f389_2828843_1000x0_resize_q75_box.jpg", "", "570", "380" %}
37+
{% endif %}
38+
</div>
39+
<div class="[ two:three__three ] [ flow ]">
40+
<h2><a href="{{ item.url }}">{{ item.data.title }}</a></h2>
41+
<p class="metadata">{% if item.data.author %}By <span class="[ author ]">{{ item.data.author }}</span> / {% endif %}Posted <time datetime="{{ item.data.date | isoDate }}" class="[ dt-published ]">{{ item.data.date | formatDate }}</time></p>
42+
{% if item.data.description %}
43+
<p>{{ item.data.description | safe }}</p>
44+
{% endif %}
45+
</div>
46+
</article>
47+
{% endfor %}
48+
</div>
49+
<nav class="[ pagination ]" aria-label="pagination" data-pagination-navigation>
50+
<ul role="list">
51+
<li hidden><a rel="prev"><span aria-hidden="true">&larr;</span><span class="[ visually-hidden ]">previous</span></a></li>
52+
{%- for i in range(0, collections.resources.length / 5) %}
53+
<li><a data-page="{{ i + 1 }}" href="{{ page.url }}?page={{ i + 1 }}"{% if i === 0 %} aria-current="page"{% endif %}>{{ loop.index }}</a></li>
54+
{%- endfor %}
55+
<li><a rel="next" href="{{ page.url }}?page=2"><span class="[ visually-hidden ]">next</span><span aria-hidden="true">&rarr;</span></a></li>
56+
<template data-pagination-link>
57+
<li><a data-page href=""></a></li>
58+
</template>
59+
</ul>
60+
</nav>
61+
</filter-container>
62+
</div>
63+
</div>
64+
<noscript>
65+
<div class="[ flow ] [ flow-md ]">
66+
{% for item in resources %}
67+
<article class="[ resource ] [ two:three ]">
68+
<div class="[ two:three__two ]">
69+
{% if item.data.metaImage %}
70+
{% image item.data.metaImage, item.data.metaImageAlt, "570", "380" %}
71+
{% else %}
72+
{% image "/assets/media/design-activity_hua7f35ba46080e3314a834735ed95f389_2828843_1000x0_resize_q75_box.jpg", "", "570", "380" %}
73+
{% endif %}
74+
</div>
75+
<div class="[ two:three__three ] [ flow ]">
76+
<h2><a href="{{ item.url }}">{{ item.data.title }}</a></h2>
77+
<p class="metadata">{% if item.data.author %}By <span class="[ author ]">{{ item.data.author }}</span> / {% endif %}Posted <time datetime="{{ item.data.date | isoDate }}" class="[ dt-published ]">{{ item.data.date | formatDate }}</time></p>
78+
{% if item.data.description %}
79+
<p>{{ item.data.description | safe }}</p>
80+
{% endif %}
81+
</div>
82+
</article>
83+
{% endfor %}
84+
</div>
85+
{% if pagination.pages.length > 1 %}
86+
{% include "partials/components/pagination.njk" %}
87+
{% endif %}
88+
</noscript>
3189
</div>
3290
{% endif %}
3391
{% endblock %}

‎src/assets/styles/pages/_resources.scss‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,15 @@
22
// This file contains styles that are specific to the resources page.
33
// -----------------------------------------------------------------------------
44

5+
.no-js .resources #resources {
6+
display: none;
7+
}
8+
59
.resources .resource picture img {
610
border-inline-start: var(--space-lg) solid var(--color-orange-75);
711
}
812

9-
.resources .resource + .resource {
13+
.resources .resource:not([class*="--hide"]) ~ .resource {
1014
border-block-start: var(--border-hairline) solid var(--color-black-05);
1115
margin-block-start: var(--space-lg);
1216
padding-block-start: var(--space-lg);

‎src/resources.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,7 @@ eleventyNavigation:
77
parent: Learn
88
key: Accessible Coding Resources
99
order: 1
10-
permalink: /learn/resources/{% if pagination.pageNumber > 0 %}page/{{
11-
pagination.pageNumber + 1 }}/{% endif %}
10+
permalink: /learn/resources/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber + 1 }}/{% endif %}
1211
pagination:
1312
data: collections.resources
1413
size: 10

0 commit comments

Comments
 (0)