Skip to content

Commit abd7bf5

Browse files
author
Ahmad Awais ⚡️
authored
feat: Edit links with SVG Icons & Consistent styles for Pagination/Contributors (nodejs#220)
* feat: Edit link with SVG Icon * style: Improved Consistent CSS
1 parent 31c3b63 commit abd7bf5

6 files changed

Lines changed: 247 additions & 27 deletions

File tree

‎src/components/authors-list.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,19 @@ import Author from './author';
55
const list = css`
66
display: flex;
77
flex-wrap: wrap;
8-
margin: 5rem 0;
8+
margin: 5rem 0 2.5rem;
99
align-items: center;
1010
color: var(--gray7);
1111
text-transform: uppercase;
1212
padding-left: 0;
1313
1414
h5 {
15-
margin: 0.5rem;
15+
display: flex;
16+
flex-wrap: wrap;
17+
width: 100%;
18+
margin: 0.5rem 0.5rem 0.5rem 0;
1619
font-weight: normal;
20+
font-size: 1.4rem;
1721
}
1822
`;
1923

‎src/components/edit-link.tsx‎

Lines changed: 44 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,35 @@
1+
import { css } from '@emotion/core';
12
import React from 'react';
23

4+
const edit = css`
5+
display: flex;
6+
flex-wrap: wrap;
7+
`;
8+
9+
const link = css`
10+
color: var(--gray7) !important;
11+
text-transform: uppercase;
12+
text-decoration: none !important;
13+
font-size: 1.4rem;
14+
font-weight: normal;
15+
font-family: var(--sans-serif);
16+
vertical-align: middle;
17+
18+
span {
19+
vertical-align: middle;
20+
font-weight: normal;
21+
}
22+
23+
&:hover {
24+
color: var(--brand-light) !important;
25+
}
26+
`;
27+
28+
const icon = css`
29+
margin-left: 0.5rem;
30+
vertical-align: middle;
31+
`;
32+
333
type Props = {
434
relativePath?: string;
535
};
@@ -12,9 +42,20 @@ const EditLink = ({ relativePath }: Props) => {
1242
const href = `https://github.com/nodejs/nodejs.dev/edit/master/src/documentation/${relativePath}`;
1343

1444
return (
15-
<a style={{ display: 'inlineFlex', marginTop: '1rem' }} href={href}>
16-
Edit this page on GitHub
17-
</a>
45+
<div css={edit}>
46+
<a css={link} href={href}>
47+
<span>Edit this page on GitHub</span>{' '}
48+
<svg
49+
css={icon}
50+
fill="currentColor"
51+
height="1em"
52+
width="1em"
53+
viewBox="0 0 40 40"
54+
>
55+
<path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z" />
56+
</svg>
57+
</a>
58+
</div>
1859
);
1960
};
2061

‎src/components/pagination.tsx‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,22 @@
1+
import { css, SerializedStyles } from '@emotion/core';
12
import { Link } from 'gatsby';
23
import React from 'react';
3-
import { css, SerializedStyles } from '@emotion/core';
44
import { PaginationInfo } from '../types';
55

6+
const link: SerializedStyles = css`
7+
color: var(--gray7) !important;
8+
text-transform: uppercase;
9+
text-decoration: none !important;
10+
font-size: 1.4rem;
11+
font-weight: normal;
12+
font-family: var(--sans-serif);
13+
vertical-align: middle;
14+
15+
&:hover {
16+
color: var(--brand-light) !important;
17+
}
18+
`;
19+
620
type Props = {
721
previous?: PaginationInfo;
822
next?: PaginationInfo;
@@ -13,21 +27,21 @@ const ulStyles: SerializedStyles = css`
1327
flex-wrap: wrap;
1428
justify-content: space-between;
1529
list-style: none;
16-
padding: 30px;
30+
padding: 5rem 0;
1731
`;
1832

1933
const Pagination = ({ previous, next }: Props) => (
2034
<ul css={ulStyles}>
2135
<li>
2236
{previous && previous.title && (
23-
<Link to={`/${previous.slug}`} rel="prev">
37+
<Link css={link} to={`/${previous.slug}`} rel="prev">
2438
← &nbsp; Prev
2539
</Link>
2640
)}
2741
</li>
2842
<li>
2943
{next && next.title && (
30-
<Link to={`/${next.slug}`} rel="next">
44+
<Link css={link} to={`/${next.slug}`} rel="next">
3145
Next &nbsp; →
3246
</Link>
3347
)}

‎test/components/__snapshots__/authors-list.test.tsx.snap‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,24 @@ exports[`AuthorsList component renders correctly 1`] = `
55
css={
66
Object {
77
"map": undefined,
8-
"name": "1bnswin",
8+
"name": "irphdi",
99
"next": undefined,
1010
"styles": "
1111
display: flex;
1212
flex-wrap: wrap;
13-
margin: 5rem 0;
13+
margin: 5rem 0 2.5rem;
1414
align-items: center;
1515
color: var(--gray7);
1616
text-transform: uppercase;
1717
padding-left: 0;
1818
1919
h5 {
20-
margin: 0.5rem;
20+
display: flex;
21+
flex-wrap: wrap;
22+
width: 100%;
23+
margin: 0.5rem 0.5rem 0.5rem 0;
2124
font-weight: normal;
25+
font-size: 1.4rem;
2226
}
2327
",
2428
}

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

Lines changed: 64 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,72 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`EditLink component renders correctly 1`] = `
4-
<a
5-
href="https://github.com/nodejs/nodejs.dev/edit/master/src/documentation/0002-node-history/index.md"
6-
style={
4+
<div
5+
css={
76
Object {
8-
"display": "inlineFlex",
9-
"marginTop": "1rem",
7+
"map": undefined,
8+
"name": "rtde4j",
9+
"next": undefined,
10+
"styles": "
11+
display: flex;
12+
flex-wrap: wrap;
13+
",
1014
}
1115
}
1216
>
13-
Edit this page on GitHub
14-
</a>
17+
<a
18+
css={
19+
Object {
20+
"map": undefined,
21+
"name": "1dmmrc2",
22+
"next": undefined,
23+
"styles": "
24+
color: var(--gray7) !important;
25+
text-transform: uppercase;
26+
text-decoration: none !important;
27+
font-size: 1.4rem;
28+
font-weight: normal;
29+
font-family: var(--sans-serif);
30+
vertical-align: middle;
31+
32+
span {
33+
vertical-align: middle;
34+
font-weight: normal;
35+
}
36+
37+
&:hover {
38+
color: var(--brand-light) !important;
39+
}
40+
",
41+
}
42+
}
43+
href="https://github.com/nodejs/nodejs.dev/edit/master/src/documentation/0002-node-history/index.md"
44+
>
45+
<span>
46+
Edit this page on GitHub
47+
</span>
48+
49+
<svg
50+
css={
51+
Object {
52+
"map": undefined,
53+
"name": "y6j8ah",
54+
"next": undefined,
55+
"styles": "
56+
margin-left: 0.5rem;
57+
vertical-align: middle;
58+
",
59+
}
60+
}
61+
fill="currentColor"
62+
height="1em"
63+
viewBox="0 0 40 40"
64+
width="1em"
65+
>
66+
<path
67+
d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"
68+
/>
69+
</svg>
70+
</a>
71+
</div>
1572
`;

0 commit comments

Comments
 (0)