Skip to content

Commit 1fd383d

Browse files
dosteinacherdosteinacher
committed
new block for 2 featured articles
Added new folder and new files for 2 featured articles
1 parent 0dd6bcd commit 1fd383d

File tree

2 files changed

+224
-0
lines changed

2 files changed

+224
-0
lines changed

‎blocks/featured-articles/featured-articles.css‎

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
/* stylelint-disable no-descending-specificity */
2+
3+
@media (min-width: 600px) {
4+
main .featured-article-container > div {
5+
max-width: unset;
6+
}
7+
}
8+
9+
@media (min-width: 1200px) {
10+
main .featured-article-container div h1 {
11+
max-width: 1200px;
12+
}
13+
}
14+
15+
main .featured-article-card {
16+
display: flex;
17+
flex-direction: column;
18+
margin: 0 auto;
19+
}
20+
21+
@media (min-width: 600px) {
22+
main .featured-article-card {
23+
flex-direction: row;
24+
align-items: center;
25+
margin-top: 40px;
26+
}
27+
}
28+
29+
@media (min-width: 1200px) {
30+
main .featured-article-card {
31+
width: calc(100% - 64px);
32+
max-width: 1200px;
33+
}
34+
}
35+
36+
main .featured-article a:any-link {
37+
text-decoration: none;
38+
}
39+
40+
main .featured-article-card-image {
41+
height: 320px;
42+
width: 100%;
43+
background: var(--color-black);
44+
}
45+
46+
@media (min-width: 600px) {
47+
main .featured-article-card-image {
48+
width: 40%;
49+
}
50+
}
51+
52+
@media (min-width: 1200px) {
53+
main .featured-article-card-image {
54+
width: 60%;
55+
}
56+
}
57+
58+
main .featured-article-card-image img {
59+
object-fit: cover;
60+
height: 100%;
61+
width: 100%;
62+
transition: .4s;
63+
}
64+
65+
main .featured-article-card-image img:hover {
66+
opacity: 0.6;
67+
}
68+
69+
main .featured-article-card-body {
70+
padding: 2rem;
71+
text-align: center;
72+
}
73+
74+
@media (min-width: 600px) {
75+
main .featured-article-card-body {
76+
width: 60%;
77+
text-align: left;
78+
}
79+
}
80+
81+
@media (min-width: 1200px) {
82+
main .featured-article-card-body {
83+
width: 40%;
84+
}
85+
}
86+
87+
main .featured-article-card-body p,
88+
main .featured-article-card-body h3 {
89+
margin-left: 0;
90+
margin-right: 0;
91+
padding-left: 0;
92+
padding-right: 0;
93+
}
94+
95+
main p.featured-article-card-category,
96+
main p.featured-article-card-category a,
97+
main p.featured-article-card-date {
98+
font-weight: var(--detail-font-weight);
99+
color: var(--detail-color);
100+
font-size: var(--detail-font-size-s);
101+
line-height: var(--detail-line-height);
102+
text-transform: uppercase;
103+
letter-spacing: .1em;
104+
margin-bottom: 0.5rem;
105+
}
106+
107+
main .featured-article-card-body h3 {
108+
font-size: var(--heading-font-size-m);
109+
line-height: var(--heading-line-height);
110+
margin: 0;
111+
margin-bottom: 1rem;
112+
overflow: hidden;
113+
text-overflow: ellipsis;
114+
}
115+
116+
@media (min-width: 600px) {
117+
main .featured-article-card-body h3 {
118+
font-size: var(--heading-font-size-xl);
119+
display: -webkit-box;
120+
-webkit-line-clamp: 3;
121+
-webkit-box-orient: vertical;
122+
}
123+
}
124+
125+
main .featured-article-card-body .featured-article-card-description {
126+
color: var(--color-gray-700);
127+
overflow: hidden;
128+
text-overflow: ellipsis;
129+
}
130+
131+
@media (min-width: 600px) {
132+
main .featured-article-card-body .featured-article-card-description {
133+
display: -webkit-box;
134+
-webkit-line-clamp: 2;
135+
-webkit-box-orient: vertical;
136+
}
137+
}
138+
139+
/* TAGS PAGE */
140+
main .tag-header-container .featured-article-card {
141+
background: var(--color-white);
142+
margin: 2rem;
143+
padding: 16px;
144+
border-radius: 4px;
145+
border: solid 1px var(--color-gray-200);
146+
text-decoration: none;
147+
}
148+
149+
@media (min-width: 600px) {
150+
main .tag-header-container .featured-article-card {
151+
margin-left: auto;
152+
margin-right: auto;
153+
max-width: 800px;
154+
}
155+
}
156+
157+
@media (min-width: 1200px) {
158+
main .tag-header-container .featured-article-card {
159+
max-width: calc(1200px - 2rem);
160+
}
161+
}
162+
163+
main .tag-header-container .featured-article-card div {
164+
text-align: left;
165+
padding: 0;
166+
}
167+
168+
main .tag-header-container .featured-article-card-image {
169+
max-height: 180px;
170+
}
171+
172+
@media (min-width: 600px) {
173+
main .tag-header-container .featured-article-card-image {
174+
max-height: unset;
175+
margin-right: 16px;
176+
}
177+
}
178+
179+
main .tag-header-container .featured-article-card-category {
180+
margin: 2rem 0 16px;
181+
}
182+
183+
main .tag-header-container .featured-article-card-body p:not(:first-child) {
184+
font-size: var(--body-font-size-xs);
185+
}
186+
187+
@media (min-width: 600px) {
188+
main .tag-header-container .featured-article-card-body p:not(:first-child) {
189+
font-size: var(--body-font-size-m);
190+
}
191+
}

‎blocks/featured-articles/featured-articles.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/* eslint-disable import/named, import/extensions */
2+
3+
import {
4+
buildArticleCard,
5+
getBlogArticle,
6+
} from '../../scripts/scripts.js';
7+
8+
async function decorateFeaturedArticle(featuredArticleEl, articlePath, eager = false) {
9+
const article = await getBlogArticle(articlePath);
10+
if (article) {
11+
const card = buildArticleCard(article, 'featured-article', eager);
12+
const tagHeader = document.querySelector('.tag-header-container > div');
13+
if (tagHeader) {
14+
featuredArticleEl.append(card);
15+
tagHeader.append(featuredArticleEl);
16+
} else {
17+
featuredArticleEl.append(card);
18+
}
19+
} else {
20+
const { origin } = new URL(window.location.href);
21+
// eslint-disable-next-line no-console
22+
console.warn(`Featured article does not exist or is missing in index: ${origin}${articlePath}`);
23+
}
24+
}
25+
26+
export default async function decorate(block, blockName, document, eager) {
27+
const a = block.querySelector('a');
28+
block.innerHTML = '';
29+
if (a && a.href) {
30+
const path = new URL(a.href).pathname;
31+
await decorateFeaturedArticle(block, path, eager);
32+
}
33+
}

0 commit comments

Comments
 (0)