Skip to content

Commit 7038cd7

Browse files
author
Ahmad Awais ⚡️
authored
feat: AuthorsList Component with Github Profile Photos (nodejs#215)
Built a new `AuthorsList` component and refactored the old `AuthorsLink` component into `Author` component. Now the contributors list at the bottom of an article has GitHub profile images with brand color borders. 🎉 FIXES: #209 ## Demo: This is what it looks like with a couple of contributors. ![demo](https://on.ahmda.ws/3e2d46/c)
1 parent f09a2e8 commit 7038cd7

8 files changed

Lines changed: 134 additions & 62 deletions

File tree

‎src/components/article.tsx‎

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { PaginationInfo } from '../types';
3-
import AuthorLink from './author-link';
3+
import AuthorsList from './authors-list';
44
import EditLink from './edit-link';
55
import Pagination from './pagination';
66
import TOC from './toc';
@@ -28,20 +28,7 @@ const Article = ({
2828
<h1 className="article-reader__headline">{title}</h1>
2929
<TOC heading="TABLE OF CONTENTS" tableOfContents={tableOfContents} />
3030
<div dangerouslySetInnerHTML={{ __html: html }} />
31-
<div
32-
style={{
33-
display: 'flex',
34-
flexWrap: 'wrap',
35-
marginTop: '5rem',
36-
alignItems: 'center',
37-
}}
38-
>
39-
Contributors:
40-
{authors &&
41-
authors.map(
42-
author => author && <AuthorLink username={author} key={author} />
43-
)}
44-
</div>
31+
<AuthorsList authors={authors} />
4532
<EditLink relativePath={relativePath} />
4633
<Pagination previous={previous} next={next} />
4734
</article>

‎src/components/author-link.tsx‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎src/components/author.tsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { css } from '@emotion/core';
2+
import React from 'react';
3+
4+
const link = css`
5+
margin-left: 0.5rem;
6+
`;
7+
8+
const img = css`
9+
height: 30px;
10+
width: 30px;
11+
margin-top: 5px;
12+
border-radius: 100%;
13+
border: 1px solid var(--brand-light);
14+
`;
15+
16+
type Props = {
17+
username: string;
18+
size: string;
19+
};
20+
21+
const Author = ({ username, size = '64' }: Props) => {
22+
if (!username) {
23+
return null;
24+
}
25+
26+
username = username.trim();
27+
const githubLink = `https://github.com/${username}`;
28+
const githubImgLink = `https://github.com/${username}.png?size=${size}`;
29+
30+
return (
31+
<a
32+
css={link}
33+
href={githubLink}
34+
title={username}
35+
key={username}
36+
target="_blank"
37+
rel="noopener noreferrer"
38+
>
39+
<img
40+
css={img}
41+
className="author-img"
42+
src={githubImgLink}
43+
alt={username}
44+
/>
45+
</a>
46+
);
47+
};
48+
49+
export default Author;

‎src/components/authors-list.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { css } from '@emotion/core';
2+
import React from 'react';
3+
import Author from './author';
4+
5+
const list = css`
6+
display: flex;
7+
flex-wrap: wrap;
8+
margin: 5rem 0;
9+
align-items: center;
10+
color: var(--gray7);
11+
text-transform: uppercase;
12+
13+
span {
14+
margin: 0.5rem;
15+
}
16+
`;
17+
18+
type Props = {
19+
authors: string[];
20+
};
21+
22+
const AuthorsList = ({ authors }: Props) => {
23+
if (!authors) {
24+
return null;
25+
}
26+
27+
return (
28+
<div css={list}>
29+
<span>Contributors</span>
30+
{authors &&
31+
authors.map(
32+
author =>
33+
author && <Author username={author} key={author} size="60" />
34+
)}
35+
</div>
36+
);
37+
};
38+
39+
export default AuthorsList;

‎src/documentation/0001-node-introduction/index.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
---
22
title: Introduction to Node.js
33
description: "Getting started guide to Node.js, the server-side JavaScript runtime environment. Node.js is built on top of the Google Chrome V8 JavaScript engine, and it's mainly used to create web servers - but it's not limited to just that."
4-
authors: flaviocopes
4+
authors: flaviocopes, potch, MylesBorins, RomainLanz, virkt25, Trott, onel0p3z, ollelauribostrom, MarkPieszak, fhemberger, LaRuaNa, FrozenPandaz, mcollina, amiller-gh, ahmadawais
55
section: Quick Start
66
---
77

88
Node.js is an open-source and cross-platform JavaScript runtime environment. It is a popular tool for almost any kind of project!
99

10-
Node.js runs the V8 JavaScript engine, the core of Google Chrome, outside of the browser. Node.js is able to leverage the work of the engineers that made (and continue to make) the Chrome JavaScript runtime blazing fast, and this allows Node.js to benefit from the substantial performance improvements and the Just-In-Time compilation that V8 performs. Thanks to this, JavaScript code running in Node.js can become very performant.
10+
Node.js runs the V8 JavaScript engine, the core of Google Chrome, outside of the browser. Node.js can leverage the work of the engineers that made (and continue to make) the Chrome JavaScript runtime blazing fast, and this allows Node.js to benefit from the substantial performance improvements and the Just-In-Time compilation that V8 performs. Thanks to this, JavaScript code running in Node.js can become very performant.
1111

1212
A Node.js app is run in a single process, without creating a new thread for every request. Node.js provides a set of asynchronous I/O primitives in its standard library that prevent JavaScript code from blocking and generally, libraries in Node.js are written using non-blocking paradigms, making blocking behavior the exception rather than the norm.
1313

‎test/components/__snapshots__/article.test.tsx.snap‎

Lines changed: 7 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -19,24 +19,14 @@ exports[`Article component renders correctly 1`] = `
1919
}
2020
}
2121
/>
22-
<div
23-
style={
24-
Object {
25-
"alignItems": "center",
26-
"display": "flex",
27-
"flexWrap": "wrap",
28-
"marginTop": "5rem",
29-
}
22+
<AuthorsList
23+
authors={
24+
Array [
25+
"test-user1",
26+
"test-user2",
27+
]
3028
}
31-
>
32-
Contributors:
33-
<AuthorLink
34-
username="test-user1"
35-
/>
36-
<AuthorLink
37-
username="test-user2"
38-
/>
39-
</div>
29+
/>
4030
<EditLink
4131
relativePath="test-path"
4232
/>

‎test/components/__snapshots__/author-link.test.tsx.snap‎

Lines changed: 30 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,39 @@
22

33
exports[`AuthorLink component renders correctly 1`] = `
44
<a
5-
href="https://github.com/test-author"
6-
style={
5+
css={
76
Object {
8-
"marginLeft": "0.5rem",
7+
"map": undefined,
8+
"name": "tubh1u",
9+
"next": undefined,
10+
"styles": "
11+
margin-left: 0.5rem;
12+
",
913
}
1014
}
15+
href="https://github.com/test-author"
16+
rel="noopener noreferrer"
17+
target="_blank"
18+
title="test-author"
1119
>
12-
test-author
20+
<img
21+
alt="test-author"
22+
className="author-img"
23+
css={
24+
Object {
25+
"map": undefined,
26+
"name": "nm77gf",
27+
"next": undefined,
28+
"styles": "
29+
height: 30px;
30+
width: 30px;
31+
margin-top: 5px;
32+
border-radius: 100%;
33+
border: 1px solid var(--brand-light);
34+
",
35+
}
36+
}
37+
src="https://github.com/test-author.png?size=60"
38+
/>
1339
</a>
1440
`;

‎test/components/author-link.test.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
import React from 'react';
22
import renderer from 'react-test-renderer';
3-
import AuthorLink from '../../src/components/author-link';
3+
import Author from '../../src/components/author';
44

55
describe('AuthorLink component', () => {
66
it('renders correctly', () => {
77
const username = 'test-author';
88
const tree = renderer
9-
.create(<AuthorLink key={username} username={username} />)
9+
.create(<Author username={username} size="60" />)
1010
.toJSON();
1111
expect(tree).toMatchSnapshot();
1212
});
1313
it('does not render without a username', () => {
14-
const tree = renderer.create(<AuthorLink key={null} username={null} />);
14+
const tree = renderer.create(
15+
<Author key={null} username={null} size={null} />
16+
);
1517
expect(tree.getInstance()).toBeNull();
1618
});
1719
});

0 commit comments

Comments
 (0)