Skip to content

Commit 2f9368c

Browse files
joaoGabriel55joaoGabriel55
authored
Add author image to blog posts (#6581)
* feat: implement github avatar into blog cards * chore: add author avatar into layouts/Post.tsx * feat: add authors to next.json.mjs * refactor: mapAuthorToCardAuthors * test: update util/__tests__/blogUtils.test.mjs * chore: update mapAuthorToCardAuthors regex + tests * chore: update authors.json * chore: update Ryan Dahl author data --------- Co-authored-by: João Gabriel Quaresma de Almeida <joaoGabriel55>
1 parent b027cf5 commit 2f9368c

File tree

8 files changed

+329
-9
lines changed

8 files changed

+329
-9
lines changed

‎authors.json

+247
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,247 @@
1+
{
2+
"Timothy J Fontaine": {
3+
"id": "tjfontaine",
4+
"name": "Timothy J Fontaine",
5+
"website": "https://github.com/tjfontaine"
6+
},
7+
"Node.js Advisory Board": {
8+
"id": "advisory-board",
9+
"name": "Node.js Advisory Board"
10+
},
11+
"Shelley Vohr": {
12+
"id": "codebytere",
13+
"name": "Shelley Vohr",
14+
"website": "https://github.com/codebytere"
15+
},
16+
"The Node.js Project": {
17+
"id": "nodejs",
18+
"name": "The Node.js Project",
19+
"website": "https://github.com/nodejs"
20+
},
21+
"Tierney Cyren": {
22+
"id": "bnb",
23+
"name": "Tierney Cyren",
24+
"website": "https://github.com/bnb"
25+
},
26+
"Joe Sepi": {
27+
"id": "joesepi",
28+
"name": "Joe Sepi",
29+
"website": "https://github.com/joesepi"
30+
},
31+
"Richard Lau": {
32+
"id": "richardlau",
33+
"name": "Richard Lau",
34+
"website": "https://github.com/richardlau"
35+
},
36+
"Scott Hammond": {
37+
"id": "scott-hammond",
38+
"name": "Scott Hammond"
39+
},
40+
"Mike Dolan": {
41+
"id": "mike-dolan",
42+
"name": "Mike Dolan"
43+
},
44+
"Mikeal Rogers": {
45+
"id": "mikeal",
46+
"name": "Mikeal Rogers",
47+
"website": "https://github.com/mikeal"
48+
},
49+
"Rod Vagg": {
50+
"id": "rvagg",
51+
"name": "Rod Vagg",
52+
"website": "https://github.com/rvagg"
53+
},
54+
"Michaël Zasso": {
55+
"id": "targos",
56+
"name": "Michaël Zasso",
57+
"website": "https://github.com/targos"
58+
},
59+
"Tracy Hinds": {
60+
"id": "tracy-hinds",
61+
"name": "Tracy Hinds"
62+
},
63+
"Michael Dawson": {
64+
"id": "mhdawson",
65+
"name": "Michael Dawson",
66+
"website": "https://github.com/mhdawson"
67+
},
68+
"Myles Borins": {
69+
"id": "mylesborins",
70+
"name": "Myles Borins",
71+
"website": "https://github.com/mylesborins"
72+
},
73+
"Isaac Schlueter": {
74+
"id": "isaacs",
75+
"name": "Isaac Schlueter",
76+
"website": "https://github.com/isaacs"
77+
},
78+
"Dave Pacheco": {
79+
"id": "dave-pacheco",
80+
"name": "Dave Pacheco"
81+
},
82+
"Domenic Denicola": {
83+
"id": "domenic",
84+
"name": "Domenic Denicola",
85+
"website": "https://github.com/domenic"
86+
},
87+
"Charlie Robbins": {
88+
"id": "indexzero",
89+
"name": "Charlie Robbins",
90+
"website": "https://github.com/indexzero"
91+
},
92+
"Ryan Dahl": {
93+
"id": "ry",
94+
"name": "Ryan Dahl",
95+
"website": "https://github.com/ry"
96+
},
97+
"ryandahl": {
98+
"id": "ry",
99+
"name": "Ryan Dahl",
100+
"website": "https://github.com/ry"
101+
},
102+
"Ben Noordhuis": {
103+
"id": "bennoordhuis",
104+
"name": "Ben Noordhuis",
105+
"website": "https://github.com/bnoordhuis"
106+
},
107+
"Bert Belder": {
108+
"id": "piscisaureus",
109+
"name": "Bert Belder",
110+
"website": "https://github.com/piscisaureus"
111+
},
112+
"Jeremiah Senkpiel": {
113+
"id": "Fishrock123",
114+
"name": "Jeremiah Senkpiel",
115+
"website": "https://github.com/Fishrock123"
116+
},
117+
"Colin Ihrig": {
118+
"id": "cjihrig",
119+
"name": "Colin Ihrig",
120+
"website": "https://github.com/cjihrig"
121+
},
122+
"Evan Lucas": {
123+
"id": "evanlucas",
124+
"name": "Evan Lucas",
125+
"website": "https://github.com/evanlucas"
126+
},
127+
"James M Snell": {
128+
"id": "jasnell",
129+
"name": "James M Snell",
130+
"website": "https://github.com/jasnell"
131+
},
132+
"Italo Casas": {
133+
"id": "italoacasas",
134+
"name": "Italo Casas",
135+
"website": "https://github.com/italoacasas"
136+
},
137+
"Anna Henningsen": {
138+
"id": "addaleax",
139+
"name": "Anna Henningsen",
140+
"website": "https://github.com/addaleax"
141+
},
142+
"Gibson Fahnestock": {
143+
"id": "gibfahn",
144+
"name": "Gibson Fahnestock",
145+
"website": "https://github.com/gibfahn"
146+
},
147+
"Ruben Bridgewater": {
148+
"id": "BridgeAR",
149+
"name": "Ruben Bridgewater",
150+
"website": "https://github.com/BridgeAR"
151+
},
152+
"Bethany Nicolle Griggs": {
153+
"id": "BethGriggs",
154+
"name": "Bethany Nicolle Griggs",
155+
"website": "https://github.com/BethGriggs"
156+
},
157+
"Ruy Adorno": {
158+
"id": "ruyadorno",
159+
"name": "Ruy Adorno",
160+
"website": "https://github.com/ruyadorno"
161+
},
162+
"Danielle Adams": {
163+
"id": "danielleadams",
164+
"name": "Danielle Adams",
165+
"website": "https://github.com/danielleadams"
166+
},
167+
"Bryan English": {
168+
"id": "bengl",
169+
"name": "Bryan English",
170+
"website": "https://github.com/bengl"
171+
},
172+
"Stewart X Addison": {
173+
"id": "sxa",
174+
"name": "Stewart X Addison",
175+
"website": "https://github.com/sxa"
176+
},
177+
"Emily Rose": {
178+
"id": "emilyrose",
179+
"name": "Emily Rose",
180+
"website": "https://github.com/emilyrose"
181+
},
182+
"Julián Duque": {
183+
"id": "julianduque",
184+
"name": "Julián Duque",
185+
"website": "https://github.com/julianduque"
186+
},
187+
"Giovanny Gongora": {
188+
"id": "Gioyik",
189+
"name": "Giovanny Gongora",
190+
"website": "https://github.com/Gioyik"
191+
},
192+
"Yosuke Furukawa": {
193+
"id": "yosuke-furukawa",
194+
"name": "Yosuke Furukawa",
195+
"website": "https://github.com/yosuke-furukawa"
196+
},
197+
"Steven Sinatra": {
198+
"id": "diagramatics",
199+
"name": "Steven Sinatra",
200+
"website": "https://github.com/diagramatics"
201+
},
202+
"Minwoo Jung": {
203+
"id": "minwoo-jung",
204+
"name": "Minwoo Jung",
205+
"website": "https://github.com/minwoo-jung"
206+
},
207+
"Rafael Gonzaga": {
208+
"id": "RafaelGSS",
209+
"name": "Rafael Gonzaga",
210+
"website": "https://github.com/RafaelGSS"
211+
},
212+
"Juan José Arboleda": {
213+
"id": "juanarbol",
214+
"name": "Juan José Arboleda",
215+
"website": "https://github.com/juanarbol"
216+
},
217+
"Juan José": {
218+
"id": "juanarbol",
219+
"name": "Juan José Arboleda",
220+
"website": "https://github.com/juanarbol"
221+
},
222+
"Brian Muenzenmeyer": {
223+
"id": "bmuenzenmeyer",
224+
"name": "Brian Muenzenmeyer",
225+
"website": "https://github.com/bmuenzenmeyer"
226+
},
227+
"Marco Ippolito": {
228+
"id": "marco-ippolito",
229+
"name": "Marco Ippolito",
230+
"website": "https://github.com/marco-ippolito"
231+
},
232+
"Ulises Gascón": {
233+
"id": "UlisesGascon",
234+
"name": "Ulises Gascón",
235+
"website": "https://github.com/UlisesGascon"
236+
},
237+
"Claudio Wunder": {
238+
"id": "ovflowd",
239+
"name": "Claudio Wunder",
240+
"website": "https://github.com/ovflowd"
241+
},
242+
"Matt Cowley": {
243+
"id": "MattIPv4",
244+
"name": "Matt Cowley",
245+
"website": "https://github.com/MattIPv4"
246+
}
247+
}

‎layouts/Post.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ const PostLayout: FC<PropsWithChildren> = ({ children }) => {
1919
const { frontmatter } = useClientContext();
2020

2121
const authors = mapAuthorToCardAuthors(frontmatter.author);
22+
2223
const type = mapBlogCategoryToPreviewType(frontmatter.category);
2324

2425
return (

‎next-data/generators/blogData.mjs

+2-1
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ const getFrontMatter = (filename, source) => {
2727
const {
2828
title = 'Untitled',
2929
author = 'The Node.js Project',
30+
username,
3031
date = new Date(),
3132
category = 'uncategorized',
3233
} = graymatter(source).data;
@@ -47,7 +48,7 @@ const getFrontMatter = (filename, source) => {
4748
// this is the url used for the blog post it based on the category and filename
4849
const slug = `/blog/${category}/${basename(filename, extname(filename))}`;
4950

50-
return { title, author, date: new Date(date), categories, slug };
51+
return { title, author, username, date: new Date(date), categories, slug };
5152
};
5253

5354
/**

‎next.json.mjs

+4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
'use strict';
22

3+
import _authors from './authors.json' assert { type: 'json' };
34
import _siteNavigation from './navigation.json' assert { type: 'json' };
45
import _siteRedirects from './redirects.json' assert { type: 'json' };
56
import _siteConfig from './site.json' assert { type: 'json' };
67

8+
/** @type {Record<string, import('./types').Author>} */
9+
export const authors = _authors;
10+
711
/** @type {import('./types').SiteNavigation} */
812
export const siteNavigation = _siteNavigation;
913

‎types/blog.ts

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ export type BlogPreviewType = 'announcements' | 'release' | 'vulnerability';
33
export interface BlogPost {
44
title: string;
55
author: string;
6+
username: string;
67
date: Date;
78
categories: Array<string>;
89
slug: string;

‎types/config.ts

+6
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,9 @@ export interface SiteConfig {
2626
websiteBanners: Record<string, WebsiteBanner>;
2727
websiteBadges: Record<string, WebsiteBadge>;
2828
}
29+
30+
export interface Author {
31+
id: string;
32+
name: string;
33+
website: string;
34+
}

‎util/__tests__/blogUtils.test.mjs

+57-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { mapAuthorToCardAuthors } from '@/util/blogUtils';
1+
import { mapAuthorToCardAuthors } from '../blogUtils';
22

33
describe('mapAuthorToCardAuthors', () => {
4-
it('should map authors to card authors with default avatar source', () => {
4+
it('maps authors to card authors with default avatar source', () => {
55
const author = 'John Doe';
66

77
const result = mapAuthorToCardAuthors(author);
@@ -14,7 +14,7 @@ describe('mapAuthorToCardAuthors', () => {
1414
]);
1515
});
1616

17-
it('should handle multiple authors separated by various delimiters', () => {
17+
it('handles multiple authors separated by various delimiters', () => {
1818
const author = 'Alice, Bob, Charlie, David';
1919

2020
const result = mapAuthorToCardAuthors(author);
@@ -25,4 +25,58 @@ describe('mapAuthorToCardAuthors', () => {
2525
{ fullName: 'David', src: 'https://ui-avatars.com/api/?name=David' },
2626
]);
2727
});
28+
29+
describe('when has more than one author', () => {
30+
it.each([
31+
['Timothy J Fontaine, John Doe'],
32+
['Timothy J Fontaine and John Doe'],
33+
['Timothy J Fontaine;John Doe'],
34+
['Timothy J Fontaine & John Doe'],
35+
['Timothy J Fontaine by John Doe'],
36+
['Timothy J Fontaine prepared by John Doe'],
37+
])('returns the correct card authors', author => {
38+
const result = mapAuthorToCardAuthors(author);
39+
40+
expect(result).toStrictEqual([
41+
{
42+
fullName: 'Timothy J Fontaine',
43+
src: 'https://avatars.githubusercontent.com/tjfontaine',
44+
},
45+
{
46+
fullName: 'John Doe',
47+
src: 'https://ui-avatars.com/api/?name=John Doe',
48+
},
49+
]);
50+
});
51+
});
52+
53+
describe('when the author name does not have GitHub username', () => {
54+
it('returns the correct card authors', () => {
55+
const result = mapAuthorToCardAuthors('John Doe, Jane Doe');
56+
57+
expect(result).toStrictEqual([
58+
{
59+
fullName: 'John Doe',
60+
src: 'https://ui-avatars.com/api/?name=John Doe',
61+
},
62+
{
63+
fullName: 'Jane Doe',
64+
src: 'https://ui-avatars.com/api/?name=Jane Doe',
65+
},
66+
]);
67+
});
68+
});
69+
70+
describe('when the author name has GitHub username', () => {
71+
it('returns the correct card authors', () => {
72+
const result = mapAuthorToCardAuthors('Timothy J Fontaine');
73+
74+
expect(result).toStrictEqual([
75+
{
76+
fullName: 'Timothy J Fontaine',
77+
src: 'https://avatars.githubusercontent.com/tjfontaine',
78+
},
79+
]);
80+
});
81+
});
2882
});

0 commit comments

Comments
 (0)