Skip to content

Commit 8bbd1a0

Browse files
k8isdeadborkmann
k8isdead
authored and
borkmann
committed
fix: update categories, fix cards
1 parent c01ca8c commit 8bbd1a0

File tree

12 files changed

+206
-70
lines changed

12 files changed

+206
-70
lines changed

‎gatsby-node.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,7 @@ exports.createPages = ({ actions, graphql }) => {
146146
pageTemplate: path.resolve(`src/templates/blog.js`),
147147
paginatePost: "/blog", // old field. not remove
148148
pathPrefix: "/blog", // new field. not remove
149-
pageLength: 20,
149+
pageLength: 10,
150150
});
151151

152152
edges.forEach(({ node }) => {
@@ -183,7 +183,7 @@ exports.createPages = ({ actions, graphql }) => {
183183
pageTemplate: path.resolve(`src/templates/blog.js`),
184184
paginatePost: `/blog/categories/${category}`, // old field. not remove
185185
pathPrefix: `/blog/categories/${category}`, // new field. not remove
186-
pageLength: 20,
186+
pageLength: 10,
187187
});
188188
});
189189

‎src/common/blog/Categories.js

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import cn from "classnames";
2+
import React, { useCallback, useState } from 'react';
3+
import { navigate } from 'gatsby';
4+
5+
import blogFilterToSlug from '../../utils/blog-filter-to-slug';
6+
7+
import AllPostsIcon from './assets/all.inline.svg';
8+
import ReleaseIcon from './assets/release.inline.svg';
9+
import UpdateIcon from './assets/update.inline.svg';
10+
import HowToIcon from './assets/how-to.inline.svg';
11+
import TechnologyIcon from './assets/technology.inline.svg';
12+
import CommunityIcon from './assets/community.inline.svg';
13+
14+
const icons = {
15+
'*': AllPostsIcon,
16+
Release: ReleaseIcon,
17+
Update: UpdateIcon,
18+
'How-To': HowToIcon,
19+
Technology: TechnologyIcon,
20+
Community: CommunityIcon,
21+
}
22+
23+
24+
const Categories = ({ categories }) => {
25+
26+
const [currentCategory, setCurrentCategory] = useState('*');
27+
28+
const handleCategoryClick = useCallback(
29+
(category) => (event) => {
30+
event.preventDefault();
31+
const href = blogFilterToSlug(category);
32+
navigate(href, {
33+
state: { preventScroll: true },
34+
});
35+
setCurrentCategory(category)
36+
},
37+
[]
38+
);
39+
40+
return (
41+
<div className='categories-wrapper'>
42+
<h2 className='categories-heading'>Categories</h2>
43+
<ul className='categories-item-list'>
44+
{categories.map((category) => {
45+
const isActiveElement = currentCategory === category;
46+
const isCategoryAll = category === '*';
47+
const Icon = icons[category];
48+
return (
49+
<li className='categories-item' key={category}>
50+
<button
51+
className={cn('categories-button', isActiveElement && 'active-category')}
52+
onClick={handleCategoryClick(category)}
53+
>
54+
<Icon className={cn('categories-icon', isActiveElement && 'active-category')}/>
55+
<span>{isCategoryAll ? 'All posts' : category}</span>
56+
</button>
57+
</li>
58+
);
59+
})}
60+
</ul>
61+
</div>
62+
);
63+
};
64+
65+
export default Categories;

‎src/common/blog/assets/all.inline.svg

Lines changed: 7 additions & 0 deletions
Loading

‎src/common/blog/assets/community.inline.svg

Lines changed: 6 additions & 0 deletions
Loading

‎src/common/blog/assets/how-to.inline.svg

Lines changed: 6 additions & 0 deletions
Loading

‎src/common/blog/assets/release.inline.svg

Lines changed: 5 additions & 0 deletions
Loading

‎src/common/blog/assets/technology.inline.svg

Lines changed: 4 additions & 0 deletions
Loading

‎src/common/blog/assets/update.inline.svg

Lines changed: 5 additions & 0 deletions
Loading

‎src/posts/2022-08-04-intro-to-ebpf/ogimage.jpg

14.6 KB
Loading

‎src/stylesheets/blog.scss

Lines changed: 86 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ main {margin-bottom: 0}
2222
display: flex;
2323
margin-left: auto;
2424
margin-right: auto;
25+
min-height: 230px;
2526

2627
@media (max-width: 1279px) {
2728
flex-direction: column;
@@ -39,7 +40,7 @@ main {margin-bottom: 0}
3940
.posts-wrapper {
4041
max-width: 968px;
4142
border-left: 1px solid #e6e6e6;
42-
padding: 64px 0 128px 64px;
43+
padding: 64px 0 112px 64px;
4344

4445
@media (max-width: 1279px) {
4546
border: none;
@@ -79,51 +80,108 @@ main {margin-bottom: 0}
7980
list-style: none;
8081
margin-left: 0;
8182
margin-top: 22px;
83+
display: flex;
84+
align-items: center;
8285

8386
&:first-child {
8487
margin-top: 0;
8588
}
8689

90+
&:hover {
91+
.categories-icon {
92+
color: #1a1a1a;
93+
}
94+
.categories-button {
95+
color: #1a1a1a;
96+
}
97+
}
98+
8799
@media (max-width: 1279px) {
88100
margin-top: 0;
89101
margin-left: 0;
90102
}
91103

92-
.categories-link {
93-
text-decoration: none;
94-
transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
104+
.categories-icon {
105+
color: #808080;
106+
transition: color cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
107+
}
108+
109+
.categories-button {
110+
all: unset;
111+
cursor: pointer;
112+
display: flex;
113+
align-items: center;
114+
justify-content: center;
95115
color: #666666;
96-
font-weight: 600;
116+
font-weight: 500;
97117
font-size: 14px;
98118
line-height: 1;
119+
transition: color cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
99120

100-
&:hover {
101-
color: #1a1a1a;
121+
span {
122+
margin-left: 6px;
102123
}
103124
}
125+
126+
.active-category {
127+
color: #1a1a1a;
128+
}
104129
}
105130
}
106131

107132
.posts-heading, .categories-heading {
108-
color: #999999;
133+
color: #808080;
109134
text-transform: uppercase;
110135
font-size: 14px;
111136
line-height: 1.375;
112137
margin: 0 0 24px 0;
138+
font-weight: 500;
139+
letter-spacing: 0.03em;
113140
}
114141

115142
.post-image {
116143
width: auto;
117144
max-width: 320px;
118145
height: 100%;
119-
object-fit: contain;
146+
object-fit: cover;
120147

121148
@media (max-width: 1023px) {
122149
max-width: 400px;
123150
height: auto;
124151
}
152+
153+
@media (max-width: 639px) {
154+
max-width: 100%;
155+
height: auto;
156+
}
157+
}
158+
159+
.links-container {
160+
max-width: 1015px;
161+
margin-left: auto;
162+
margin-right: auto;
163+
margin-top: 80px;
164+
display: flex;
165+
justify-content: space-between;
166+
167+
a {
168+
text-decoration: none;
169+
font-weight: 600;
170+
font-size: 14px;
171+
line-height: 1;
172+
background: linear-gradient(87.89deg, #e69d00 0%, #e6b000 100%);
173+
-webkit-background-clip: text;
174+
background-clip: text;
175+
color: #1a1a1a;
176+
transition: color cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
177+
178+
&:hover {
179+
color: #ffffff00;
180+
}
181+
}
125182
}
126183

184+
127185
.blog-post {
128186
max-width: 1015px;
129187
margin-left: auto;
@@ -139,6 +197,7 @@ main {margin-bottom: 0}
139197
border: 1px solid #e6e6e6;
140198
border-radius: 8px;
141199
display: flex;
200+
overflow: hidden;
142201

143202
@media (max-width: 1023px) {
144203
flex-direction: column;
@@ -149,18 +208,24 @@ main {margin-bottom: 0}
149208
.blog-post-card-content {
150209
display: flex;
151210
flex-direction: column;
211+
justify-content: space-between;
152212
margin-left: 32px;
153213
width: 100%;
214+
min-height: 230px;
215+
align-self: stretch;
154216
padding: 32px 32px 32px 0;
155217

156218
@media (max-width: 1279px) {
157219
max-width: 500px;
220+
158221
}
159222

160223
@media (max-width: 1023px) {
161-
order: 2;
224+
padding: 32px;
225+
margin-left: 0;
162226
margin-top: 16px;
163-
max-width: none;
227+
max-width: 100%;
228+
min-height: 0;
164229
}
165230
}
166231

@@ -237,7 +302,7 @@ main {margin-bottom: 0}
237302
margin-right: 10px;
238303
font-size: 15px;
239304
line-height: 15px;
240-
font-weight: 600;
305+
font-weight: 500;
241306
display: inline-block;
242307
padding: 10px 12px;
243308
border-radius: 18px;
@@ -294,7 +359,7 @@ main {margin-bottom: 0}
294359
line-height: 24px;
295360

296361
.blog-date {
297-
font-weight: 600;
362+
font-weight: 500;
298363
font-size: 15px;
299364
line-height: 1;
300365
color: #999999;
@@ -304,7 +369,7 @@ main {margin-bottom: 0}
304369
.blog-date {
305370
font-size: 15px;
306371
line-height: 1;
307-
font-weight: 600;
372+
font-weight: 500;
308373
color: #999999;
309374
}
310375
}
@@ -324,16 +389,16 @@ main {margin-bottom: 0}
324389
max-width: 540px;
325390
font-size: 26px;
326391
line-height: 1.375;
327-
font-weight: 700;
392+
font-weight: 600;
328393
margin: 0 !important;
329394
background: linear-gradient(87.89deg, #e69d00 0%, #e6b000 100%);
330395
-webkit-background-clip: text;
331396
background-clip: text;
332-
color:rgba(0,0,0,1);
397+
color: #1a1a1a;
333398
transition: color cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
334399

335400
&:hover {
336-
color:rgba(0,0,0,0);
401+
color: #ffffff00;
337402
}
338403

339404
@media (max-width: 1023px) {
@@ -368,7 +433,7 @@ main {margin-bottom: 0}
368433

369434
.blog-link {
370435
text-decoration: none;
371-
font-weight: 600;
436+
font-weight: 500;
372437
background: linear-gradient(87.89deg, #faab00 0%, #ebbc00 100%);
373438
-webkit-background-clip: text;
374439
-webkit-text-fill-color: transparent;
@@ -557,7 +622,7 @@ main {margin-bottom: 0}
557622
margin-bottom: 25px;
558623
font-size: 14px;
559624
line-height: 24px;
560-
font-weight: 700;
625+
font-weight: 600;
561626
color: #8d8d8d;
562627

563628
a,
@@ -574,14 +639,14 @@ main {margin-bottom: 0}
574639
.categories-post-date {
575640
font-size: 12px;
576641
line-height: 24px;
577-
font-weight: 700;
642+
font-weight: 600;
578643
color: #8d8d8d;
579644
}
580645

581646
.categories-post-title {
582647
font-size: 16px;
583648
line-height: 36px;
584-
font-weight: 700;
649+
font-weight: 600;
585650

586651
a {
587652
text-decoration: none;
@@ -594,24 +659,6 @@ main {margin-bottom: 0}
594659
}
595660
}
596661

597-
.prev-next-links {
598-
display: flex;
599-
justify-content: space-between;
600-
//font-family: Montserrat, sans-serif;
601-
font-weight: 700;
602-
font-size: 16px;
603-
line-height: 32px;
604-
605-
a {
606-
color: #468cff;
607-
text-decoration: none;
608-
609-
&:hover {
610-
color: rgb(102, 161, 255);
611-
}
612-
}
613-
}
614-
615662
.window {
616663
border-radius: 8px;
617664
background: #2b2b2b;

0 commit comments

Comments
 (0)