Skip to content

Commit d3ad2d0

Browse files
SeramisSeramis
committed
Improved design on tags and series.
1 parent 3b31eaa commit d3ad2d0

File tree

13 files changed

+248
-72
lines changed

13 files changed

+248
-72
lines changed

‎_config/filters.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@ export default function(eleventyConfig) {
1717
// dateObj input: https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string
1818
return DateTime.fromJSDate(dateObj, { zone: "utc" }).toFormat('yyyy-LL-dd HH:ii:ss');
1919
});
20+
eleventyConfig.addFilter("formatDate", (dateObj, format) => {
21+
// dateObj input: https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string
22+
return DateTime.fromJSDate(dateObj, { zone: "utc" }).toFormat(format);
23+
});
2024

2125
// Get the first `n` elements of a collection.
2226
eleventyConfig.addFilter("head", (array, n) => {

‎_includes/layouts/post.njk‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,9 @@ article {
2222
}
2323
.links-nextprev li.links-nextprev-prev,
2424
.links-nextprev li.links-nextprev-next {
25+
display: flex;
26+
flex-direction: column;
27+
justify-content: space-between;
2528
background-color: var(--bg-color-secondary);
2629
box-shadow: 2px 2px 4px var(--shadow-color);
2730
transition: background-color 0.3s;
@@ -57,6 +60,8 @@ h1.post-title {
5760

5861
{% include "partials/socials.njk" %}
5962

63+
<hr />
64+
6065
{% if collections.posts %}
6166
{% set previousPost = collections.posts | getPreviousCollectionItem %}
6267
{% set nextPost = collections.posts | getNextCollectionItem %}
@@ -68,7 +73,7 @@ h1.post-title {
6873
<img eleventy:ignore src="{{ previousPost.data.imageUrl }}" alt="" /><br>
6974
{{ previousPost.data.title }}
7075
</a>
71-
<br>← Previous
76+
<span>← Previous</span>
7277
{% else %}
7378
<li>
7479
{% endif %}
@@ -79,7 +84,7 @@ h1.post-title {
7984
<img eleventy:ignore src="{{ nextPost.data.imageUrl }}" alt="" /><br>
8085
{{ nextPost.data.title }}
8186
</a>
82-
<br>Next →
87+
<span>Next →</span>
8388
{% else %}
8489
<li>
8590
{% endif %}

‎_includes/partials/post-card.njk‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77
padding: 8px;
88
background-color: var(--bg-color-secondary);
99
box-shadow: 2px 2px 4px var(--shadow-color);
10+
justify-content: space-between;
11+
transition: background-color 0.3s;
1012
}
1113

1214
.post-card h2 {
@@ -16,16 +18,17 @@
1618
{% endcss %}
1719

1820
<div class="post-card">
19-
20-
<h2><a href="{{ post.url }}">
21-
{% if post.data.imageUrl %}
22-
<img eleventy:ignore src="{{ post.data.imageUrl }}" alt="{{ post.data.title }}" class="post-card-image" />
23-
{% endif %}
21+
<div>
22+
<h2><a href="{{ post.url }}">
23+
{% if post.data.imageUrl %}
24+
<img eleventy:ignore src="{{ post.data.imageUrl }}" alt="{{ post.data.title }}" class="post-card-image" />
25+
{% endif %}
2426

25-
{% if post.data.title %}{{ post.data.title }}{% else %}<code>{{ post.url }}</code>{% endif %}
26-
</a></h2>
27-
28-
<div class="excerpt"><em>{{ post | excerpt | truncate(500) }}</em></div>
27+
{% if post.data.title %}{{ post.data.title }}{% else %}<code>{{ post.url }}</code>{% endif %}
28+
</a></h2>
29+
30+
<div class="excerpt"><em>{{ post | excerpt | truncate(500) }}</em></div>
31+
</div>
2932

3033
{% include "./post-meta.njk" %}
3134

‎_includes/partials/series.njk‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,9 @@
2020
margin: 0
2121
}
2222
.series-post {
23+
display: flex;
24+
flex-direction: column;
25+
justify-content: space-between;
2326
padding: 0.5rem;
2427
background-color: var(--bg-color-secondary);
2528
box-shadow: 2px 2px 4px var(--shadow-color);
@@ -38,8 +41,7 @@
3841
<img eleventy:ignore src="{{seriePost.data.imageUrl }}" alt="{{ seriePost.data.title }}" class="series-post-image" />
3942
{{ seriePost.data.title }}
4043
</a>
41-
<br />
42-
{{ seriePost.data.date | readableDate }}
44+
<div>{{ seriePost.data.date | readableDate }}</div>
4345
</div>
4446
{% endfor %}
4547
{% endif %}

‎_includes/partials/socials.njk‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,5 +68,5 @@
6868
>
6969
<i class="fa-brands fa-bluesky"></i>
7070
</a>
71-
<span>Share:</span>
71+
<b>Share:</b>
7272
</div>

‎_includes/partials/taglist.njk‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{% css %}
2+
.taglist {
3+
display: flex;
4+
flex-wrap: wrap;
5+
justify-content: space-between;
6+
gap: 1rem;
7+
}
8+
.taglist .tag {
9+
border: 1px solid var(--border-color);
10+
border-radius: 4px;
11+
background-color: var(--bg-color-secondary);
12+
padding: 0 0.25rem;
13+
transition: background-color 0.3s, border-color 0.3s;
14+
white-space: nowrap;
15+
}
16+
17+
.taglist .tag.active {
18+
font-weight: bold;
19+
}
20+
{% endcss %}
21+
22+
<div class="taglist">
23+
{% for tag in pageTags(collections.tags) %}
24+
{% if tag.posts.length > 0 %}
25+
{% set tagUrl %}/tags/{{ tag.name | slugify }}/{% endset %}
26+
<span class="tag{% if tagUrl == page.url %} active{% endif %}">
27+
<i class="fa-solid fa-tags"></i>
28+
<a href="{{ tagUrl }}" class="post-tag">{{ tag.name }}</a> ({{ tag.posts.length }})
29+
</span>
30+
{% endif %}
31+
{% endfor %}
32+
</div>

‎content/archive.njk‎

Lines changed: 41 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,21 @@
1-
---
2-
eleventyNavigation:
3-
key: "Archive"
4-
order: 4
5-
aside: true
1+
---js
2+
// <script>
3+
const eleventyNavigation = {
4+
key: "Archive",
5+
order: 4,
6+
};
7+
const aside = true;
8+
9+
function pagePosts(collection){
10+
return Object.keys(collection)
11+
.map((name) => ({
12+
name: name,
13+
posts: collection[name],
14+
}))
15+
.sort((a, b) => b.posts.length - a.posts.length);
16+
};
17+
18+
// </script>
619
---
720
{%- css %}
821
.archive-list .year {
@@ -14,22 +27,38 @@ aside: true
1427
margin: 0;
1528
padding: 0;
1629
}
30+
1731
.archive-list li {
1832
margin: 0.5rem;
1933
padding: 0.5rem;
20-
background: linear-gradient(90deg, var(--bg-color-secondary) 0%, var(--bg-color) 50%, var(--bg-color-secondary) 100%);
34+
35+
background: var(--bg-color-secondary);
36+
box-shadow: 2px 2px 4px var(--shadow-color);
37+
38+
transition: background-color 0.3s;
39+
}
40+
41+
.archive-list li.post {
42+
margin-left: 2rem;
2143
}
2244
{% endcss %}
2345

2446
<h1>Archive</h1>
2547

48+
{% set year = undefined %}
49+
2650
<div class="archive-list">
2751
<ul>
28-
{% for post in collections.posts | reverse %}
29-
<li>
30-
<span>{{ post.date | readableDate }}</span>
31-
<a href="{{ post.url }}">{{ post.data.title }}</a>
32-
</li>
33-
{% endfor %}
52+
{% for post in collections.posts | reverse %}
53+
{% set postYear = post.date.getFullYear() %}
54+
{% if postYear != year %}
55+
{% set year = postYear %}
56+
<li class="year">{{ year }}</li>
57+
{% endif %}
58+
<li class="post">
59+
<span>{{ post.date | formatDate('MMMM d') }}</span>
60+
<a href="{{ post.url }}">{{ post.data.title }}</a>
61+
</li>
62+
{% endfor %}
3463
</ul>
3564
</div>

‎content/series-pages.njk‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,14 @@ const eleventyComputed = {
2121
.posts {
2222
display: grid;
2323
grid-gap: 1rem;
24-
grid-template-columns: 1fr 1fr;
24+
grid-template-columns: 1fr 1fr 1fr;
2525
}
2626
@media(max-width: 1024px) {
27+
.posts {
28+
grid-template-columns: 1fr 1fr;
29+
}
30+
}
31+
@media(max-width: 640px) {
2732
.posts {
2833
grid-template-columns: 100%;
2934
}

‎content/series.njk‎

Lines changed: 68 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,72 @@
1+
---js
2+
// <script>
3+
const eleventyNavigation = {
4+
key: "Series",
5+
order: 2,
6+
};
7+
const aside = true;
8+
9+
function pageSeries(collection){
10+
return Object.keys(collection)
11+
.map((name) => ({
12+
name: name,
13+
latestPostDate: new Date(Math.max(...collection[name].map(p => p.date))),
14+
posts: collection[name],
15+
}))
16+
.sort((a, b) => b.latestPostDate - a.latestPostDate);
17+
};
18+
// </script>
119
---
2-
eleventyNavigation:
3-
key: "Series"
4-
order: 2
5-
aside: true
6-
---
20+
{% css %}
21+
.series-posts {
22+
display: grid;
23+
grid-gap: 1rem;
24+
grid-template-columns: 1fr 1fr 1fr 1fr;
25+
}
26+
.series-post {
27+
display: flex;
28+
flex-direction: column;
29+
gap: 1rem;
30+
padding: 8px;
31+
background-color: var(--bg-color-secondary);
32+
box-shadow: 2px 2px 4px var(--shadow-color);
33+
transition: background-color 0.3s;
34+
}
35+
36+
.series-view-all {
37+
display: flex;
38+
align-items: center;
39+
justify-content: center;
40+
font-weight: bold;
41+
padding: 8px;
42+
background-color: var(--bg-color-secondary);
43+
box-shadow: 2px 2px 4px var(--shadow-color);
44+
transition: background-color 0.3s;
45+
}
46+
h3.series-title {
47+
margin-bottom: 0.5rem;
48+
}
49+
{% endcss %}
750
<h1>Series</h1>
851

9-
<ul>
10-
{% for k, posts in collections.series %}
11-
{% if posts.length > 0 %}
12-
{% set serieUrl %}/series/{{ k | slugify }}/{% endset %}
13-
<li><a href="{{ serieUrl }}" class="post-tag">{{ k }}</a> ({{ posts.length }})</li>
52+
{% for series in pageSeries(collections.series) %}
53+
{% if series.posts.length > 0 %}
54+
{% set serieUrl %}/series/{{ series.name | slugify }}/{% endset %}
55+
<h3 class="series-title"><a href="{{ serieUrl }}">{{ series.name }}</a></h3>
56+
<div class="series-posts">
57+
{% for post in series.posts.slice(-3) | reverse %}
58+
<div class="series-post">
59+
<a href="{{ post.url }}">
60+
<img eleventy:ignore src="{{ post.data.imageUrl }}" alt="{{ post.data.title }}" />
61+
{{ post.data.title }}
62+
</a>
63+
</div>
64+
{% endfor %}
65+
{% if series.posts.length > 3 %}
66+
<div class="series-view-all">
67+
<a href="{{ serieUrl }}">View all {{ series.posts.length }} posts &gt;&gt;</a>
68+
</div>
69+
{% endif %}
70+
</div>
1471
{% endif %}
15-
{% endfor %}
16-
</ul>
72+
{% endfor %}

‎content/tag-pages.njk‎

Lines changed: 40 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,33 +10,66 @@ const pagination = {
1010
1111
const eleventyExcludeFromCollections = true;
1212
13+
const aside = true;
14+
1315
const eleventyComputed = {
1416
title: "Tagged '{{ tag }}'",
1517
permalink: function(data) {
1618
return `/tags/${this.slugify(data.tag)}/`;
1719
}
1820
};
21+
22+
function pageTags(collection){
23+
return Object.keys(collection)
24+
.map((name) => ({
25+
name: name,
26+
posts: collection[name],
27+
}))
28+
.sort((a, b) => b.posts.length - a.posts.length);
29+
};
1930
// </script>
2031
---
2132
{% css %}
2233
.posts {
2334
display: grid;
2435
grid-gap: 1rem;
25-
grid-template-columns: 1fr 1fr;
36+
grid-template-columns: 1fr 1fr 1fr;
37+
margin-top: 1rem;
2638
}
2739
@media(max-width: 1024px) {
2840
.posts {
29-
grid-template-columns: 100%;
41+
grid-template-columns: 1fr 1fr;
3042
}
3143
}
44+
@media(max-width: 480px) {
45+
.posts {
46+
grid-template-columns: 1fr;
47+
}
48+
}
49+
.tag-post {
50+
display: flex;
51+
flex-direction: column;
52+
justify-content: space-between;
53+
gap: 0.5rem;
54+
padding: 8px;
55+
background-color: var(--bg-color-secondary);
56+
box-shadow: 2px 2px 4px var(--shadow-color);
57+
transition: background-color 0.3s;
58+
}
3259
{% endcss %}
3360

3461
<h1>Tagged “{{ tag }}”</h1>
3562

63+
{% include "partials/taglist.njk" %}
64+
3665
<div class="posts">
37-
{% for post in collections[tag] | reverse %}
38-
{% include "partials/post-card.njk" %}
39-
{% endfor %}
66+
{% for post in collections[tag] | reverse %}
67+
<div class="tag-post">
68+
<a href="{{ post.url }}">
69+
<img eleventy:ignore src="{{ post.data.imageUrl }}" alt="{{ post.data.title }}" />
70+
{{ post.data.title }}
71+
</a>
72+
<span>{{ post.data.date | readableDate }}</span>
73+
</div>
74+
{% endfor %}
4075
</div>
41-
42-
<p>See <a href="tags.njk">all tags</a>.</p>

0 commit comments

Comments
 (0)