Skip to content

Commit 39705f5

Browse files
jesseabordenfedericobucchi
jesseaborden
authored and
federicobucchi
committed
Feat/blog page v5 (#1154)
* feat(blog-page): Update blog page template, JS, and styles per latest design. Add dark mode version of blog post featured image. * feat(): Update post layout to include featured image and dark image. * chor(): Remove FPO featured image from post front matter. * chor(): Revert formatting from blog post. * chor(): Revert formatting from blog post. * chor(): Revert formatting from blog post.
1 parent e5a3f17 commit 39705f5

File tree

8 files changed

+112
-93
lines changed

8 files changed

+112
-93
lines changed

‎_layouts/new-layouts/post.html‎

Lines changed: 64 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -3,69 +3,76 @@
33
---
44

55
<section id="post" class="section">
6-
<div class="swoop swoop-1"></div>
6+
<div class="swoop swoop-1"></div>
77

8-
<div class="content">
9-
<h1>{{ page.title }}</h1>
8+
<div class="content">
9+
<h1>{{ page.title }}</h1>
1010

11-
{% include authors.html authors=page.author compact=true %}
11+
{% include authors.html authors=page.author compact=true %}
1212

13-
<time pubdate datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%B %-d, %Y" }}</time>
13+
<time pubdate datetime="{{ page.date | date_to_xmlschema }}"
14+
>{{ page.date | date: "%B %-d, %Y" }}</time
15+
>
16+
{% assign featured_image = page.featured-image %} {% assign
17+
featured_image_dark = page.featured-image-dark %} {% if featured_image.url
18+
%}
19+
<img
20+
class="featured{% if featured_image_dark.url %} hide-dark{% endif %}"
21+
src="{{ featured_image.url }}"
22+
alt="{{ featured_image.alt }}"
23+
/>
24+
{% endif %} {% if featured_image_dark.url %}
25+
<img
26+
class="featured hide-light"
27+
src="{{ featured_image_dark.url }}"
28+
alt="{{ featured_image_dark.alt }}"
29+
/>
30+
{% endif %}
31+
<div class="details">
32+
{{ content }} {% if page.author %}
33+
<hr />
34+
<h2>Authors</h2>
35+
{% include authors.html authors=page.author %} {% endif %}
1436

15-
{% if page.image %}
16-
<img class="featured" src="/assets/images/{{ page.image | split: '.' | first }}/{{ page.image }}"
17-
alt="{{ page.title }} featured image" />
18-
{% endif %}
37+
<hr />
1938

20-
<div class="details">
21-
{{ content }}
39+
<h2>Continue Reading</h2>
2240

23-
{% if page.author %}
24-
<hr />
25-
<h2>Authors</h2>
26-
{% include authors.html authors=page.author %}
27-
{% endif %}
28-
29-
<hr />
30-
31-
<h2>Continue Reading</h2>
32-
33-
{% if page.previous or page.next %}
34-
<nav class="section card-grid">
35-
<div class="content">
36-
<ul class="tertiary-cards">
37-
{% if page.previous %}
38-
<li>
39-
<div>
40-
<h3>{{ page.previous.title }}</h3>
41-
<time pubdate datetime="{{ page.date | date_to_xmlschema }}">{{ page.previous.date | date: "%B %-d, %Y" }}</time>
42-
<p class="nav-excerpt">
43-
{{ page.previous.excerpt | strip_html | truncate: 80, '..' }}
44-
</p>
45-
<a href="{{ page.previous.url }}" rel="prev">
46-
More
47-
</a>
48-
</div>
49-
</li>
50-
{% endif %}
51-
{% if page.next %}
52-
<li>
53-
<div>
54-
<h3>{{ page.next.title }}</h3>
55-
<time pubdate datetime="{{ page.date | date_to_xmlschema }}">{{ page.next.date | date: "%B %-d, %Y" }}</time>
56-
<p class="nav-excerpt">
57-
{{ page.next.excerpt | strip_html | truncate: 80, '..' }}
58-
</p>
59-
<a href="{{ page.next.url }}" rel="next">
60-
More
61-
</a>
62-
</div>
63-
</li>
64-
{% endif %}
65-
</ul>
66-
</div>
67-
</nav>
41+
{% if page.previous or page.next %}
42+
<nav class="section card-grid">
43+
<div class="content">
44+
<ul class="tertiary-cards">
45+
{% if page.previous %}
46+
<li>
47+
<div>
48+
<h3>{{ page.previous.title }}</h3>
49+
<time pubdate datetime="{{ page.date | date_to_xmlschema }}"
50+
>{{ page.previous.date | date: "%B %-d, %Y" }}</time
51+
>
52+
<p class="nav-excerpt">
53+
{{ page.previous.excerpt | strip_html | truncate: 80, '..' }}
54+
</p>
55+
<a href="{{ page.previous.url }}" rel="prev"> More </a>
56+
</div>
57+
</li>
58+
{% endif %} {% if page.next %}
59+
<li>
60+
<div>
61+
<h3>{{ page.next.title }}</h3>
62+
<time pubdate datetime="{{ page.date | date_to_xmlschema }}"
63+
>{{ page.next.date | date: "%B %-d, %Y" }}</time
64+
>
65+
<p class="nav-excerpt">
66+
{{ page.next.excerpt | strip_html | truncate: 80, '..' }}
67+
</p>
68+
<a href="{{ page.next.url }}" rel="next"> More </a>
69+
</div>
70+
</li>
6871
{% endif %}
72+
</ul>
6973
</div>
74+
</nav>
75+
{% endif %}
7076
</div>
71-
</section>
77+
</div>
78+
</section>

‎_posts/2024-09-17-announcing-swift-6.md‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,6 @@ date: 2024-09-17 10:00:00
55
title: Announcing Swift 6
66
author: [hborla]
77
category: "Language"
8-
featured-image:
9-
url: '/assets/images/placeholders/image_placeholder_large.png'
10-
alt: 'An FPO image for a blog.'
118
---
129

1310
We're delighted to announce the general availability of Swift 6. This is a major new release that expands Swift to more platforms and domains.

‎assets/images/6.2-blog/[email protected]‎

940 KB
Loading

‎assets/images/6.2-blog/[email protected]‎

878 KB
Loading

‎assets/javascripts/new-javascripts/blog.js‎

Lines changed: 26 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,30 @@
11
const wrapper = document.querySelector('.blogs-and-filter-wrapper')
22
const postsWrapper = wrapper.querySelector('.blogs-wrapper')
33
const postData = JSON.parse(wrapper.querySelector('#post-data').textContent)
4-
const checkboxes = [...wrapper.querySelectorAll('.category-filter')]
4+
const filters = [...wrapper.querySelectorAll('.category-filter')]
55
const selectAllBox = document.querySelector('.select-all')
66
const dropdown = document.querySelector('.dropdown')
7-
const allCheckboxes = [selectAllBox, ...checkboxes]
7+
const allCheckboxes = [selectAllBox, ...filters]
88
const filterMenuToggle = document.querySelector('.dropdown-toggle')
9-
const dropdownCloseButton = document.querySelector('.dropdown-close')
9+
1010
// create post links
1111
const createAnchor = (postData) => {
1212
const anchor = document.createElement('a')
13-
const imgEl = postData['image-url']
14-
? `<img src="${postData['image-url']}" alt="${postData['image-alt']}" />`
15-
: ''
16-
console.log(imgEl, postData.title)
1713
anchor.href = postData.url
18-
anchor.classList = imgEl ? 'post-link post-link-with-image' : 'post-link'
14+
anchor.classList = 'post-link'
1915
anchor.innerHTML = `
20-
${imgEl}
21-
${imgEl ? '<div>' : ''}
2216
<h3 class="title">${postData.title}</h3>
2317
<time pubdate datetime="${postData.date}" class="blog-date">${postData.date}</time>
2418
<p class="body-copy">${postData.excerpt}</p>
2519
${postData.categories.reduce((markup, category) => {
2620
return markup + ` <span class="category body-copy">${category}</span>`
2721
}, '')}
28-
${imgEl ? '</div>' : ''}
2922
`
3023
return anchor
3124
}
3225

3326
// checks all filters
34-
const selectAllCategories = () => {
27+
const selectAllCategories = (selectAllBox, checkboxes) => {
3528
if (selectAllBox.checked) {
3629
checkboxes.forEach((checkbox) => {
3730
checkbox.checked = true
@@ -71,12 +64,12 @@ const elementsCache = postData.map((post) => {
7164
}
7265
})
7366

74-
updatePosts(filterPosts(elementsCache, checkboxes), postsWrapper, postsWrapper)
67+
updatePosts(filterPosts(elementsCache, filters), postsWrapper, postsWrapper)
7568

7669
filterMenuToggle.addEventListener('click', () => {
7770
dropdown.classList.toggle('active')
7871

79-
const isExpanded = this.getAttribute('aria-expanded') === 'true'
72+
const isExpanded = filterMenuToggle.getAttribute('aria-expanded') === 'true'
8073
filterMenuToggle.toggleAttribute('aria-expanded', !isExpanded)
8174
})
8275

@@ -89,28 +82,32 @@ window.addEventListener('click', (evt) => {
8982
})
9083

9184
// Select all category filters
92-
selectAllBox.addEventListener('click', selectAllCategories)
93-
94-
dropdownCloseButton.addEventListener('click', () => {
95-
const dropdown = this.closest('.dropdown')
96-
dropdown.classList.remove('active')
97-
document
98-
.querySelector('.dropdown-toggle')
99-
.setAttribute('aria-expanded', 'false')
100-
})
85+
selectAllBox.addEventListener('click', () =>
86+
selectAllCategories(selectAllBox, filters),
87+
)
10188

102-
checkboxes.forEach((checkbox) => {
89+
filters.forEach((checkbox) => {
10390
checkbox.addEventListener('change', () => {
104-
// If every box is either checked or none are, set all filter to checked
105-
if (
106-
checkboxes.every((checkbox) => checkbox.checked === checkboxes[0].checked)
107-
) {
91+
const enabledFilters = filters.filter((checkbox) => checkbox.checked)
92+
93+
if (enabledFilters.length === 1) {
94+
enabledFilters[0].disabled = true
95+
} else {
96+
filters.forEach((checkbox) => (checkbox.disabled = false))
97+
}
98+
99+
// If every box is checked, select all
100+
if (enabledFilters.length === filters.length) {
108101
selectAllBox.checked = true
102+
selectAllBox.disabled = true
109103
selectAllCategories()
110104
return
105+
// Uncheck all select all if filter was unchecked
111106
} else if (!checkbox.checked && selectAllBox.checked) {
112107
selectAllBox.checked = false
108+
selectAllBox.disabled = false
113109
}
114-
updatePosts(filterPosts(elementsCache, checkboxes), postsWrapper)
110+
111+
updatePosts(filterPosts(elementsCache, filters), postsWrapper)
115112
})
116113
})

‎assets/stylesheets/new-stylesheets/_helpers.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -195,6 +195,20 @@
195195
}
196196
}
197197

198+
body[data-color-scheme='light'] {
199+
.hide-light {
200+
display: none
201+
}
202+
}
203+
204+
body[data-color-scheme='dark'] {
205+
.hide-dark {
206+
display: none
207+
}
208+
}
209+
210+
211+
198212
@mixin underline {
199213
text-decoration: underline;
200214
text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);

‎assets/stylesheets/new-stylesheets/pages/_blog.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -325,7 +325,7 @@
325325
}
326326

327327
.dropdown-header {
328-
padding: 53px 0 20px;
328+
padding: 23px 0 20px;
329329
}
330330

331331
&.active {
@@ -361,6 +361,7 @@
361361
width: 25px;
362362
height: 25px;
363363
border-radius: 5px;
364+
outline: 1px solid var(--site-text-color);
364365
}
365366

366367
label {

‎blog/index.md‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,14 @@ title: Blog
1111
{% assign hero_card_title = site.data.new-data.blog.page-data.category_titles[0] %}
1212
{% assign hero_card_post = site.categories[hero_card_title][0] %}
1313
{% assign hero_card_thumbnail = hero_card_post.featured-image %}
14+
{% assign hero_card_thumbnail_dark = hero_card_post.featured-image-dark %}
1415
<h3 class="blog-featured-grid-category-headline">{{hero_card_title}}</h3>
1516
<div class="blog-featured-hero-card {% if hero_card_thumbnail.url %} blog-featured-hero-card-with-image {% endif %}">
1617
{% if hero_card_thumbnail.url %}
17-
<img class="blog-featured-hero-card-image" src="{{ hero_card_thumbnail.url }}" alt="{{hero_card_thumbnail.alt}}" />
18+
<img class="blog-featured-hero-card-image {% if hero_card_thumbnail_dark.url %}hide-dark{% endif %}" src="{{ hero_card_thumbnail.url }}" alt="{{hero_card_thumbnail.alt}}" />
19+
{% endif %}
20+
{% if hero_card_thumbnail_dark.url %}
21+
<img class="blog-featured-hero-card-image hide-light" src="{{ hero_card_thumbnail_dark.url }}" alt="{{hero_card_thumbnail_dark.alt}}" />
1822
{% endif %}
1923
<span class="blog-title">{{ hero_card_post.title }}</span>
2024
<time class="blog-date body-copy" pubdate datetime="{{ hero_card_post.date | date_to_xmlschema }}">{{ hero_card_post.date | date: "%B %-d, %Y" }}</time>
@@ -49,9 +53,8 @@ title: Blog
4953
</button>
5054
<div class="dropdown-menu" role="menu">
5155
<div class="dropdown-header">
52-
<button class="dropdown-close" aria-label="Close"></button>
5356
<label>
54-
<input name="select-all" class="select-all" type="checkbox" value="select-all" checked="true">
57+
<input disabled name="select-all" class="select-all" type="checkbox" value="select-all" checked="true">
5558
<span class="checkbox-symbol"></span> <span class="dropdown-filter-text">All Categories</span>
5659
</label>
5760
</div>

0 commit comments

Comments
 (0)