Skip to content
This repository was archived by the owner on Apr 26, 2024. It is now read-only.

Commit e7574b8

Browse files
Onur Larusagirk
Onur Laru
authored and
sagirk
committed
Refactoring Site Creation and Additions (#157)
* chore: Authors and section fields added. * fix: Style fix for edit-link. * chore: Author link component added. * refactor: Site creation moved to gatsby-config, nav refactored. * fix: Mistakes in docs revoked. * chore: Remove comments. * fix: Authorlink wont be rendered without author data. * chore: Tests updated, tests for new components added. * chore: Remove /learn path. * fix: Coding style fixes. * chore: Tests updated. * fix: Linter issues fixed
1 parent 2f6a5cc commit e7574b8

81 files changed

Lines changed: 744 additions & 446 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎firebase.json‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,6 @@
22
"hosting": {
33
"target": "nodejs-dev",
44
"public": "public",
5-
"rewrites": [{
6-
"source": "/learn/**",
7-
"destination": "/learn/"
8-
}],
95
"ignore": [
106
"firebase.json",
117
"**/.*",

‎gatsby-config.js‎

Lines changed: 10 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,8 @@
11
if (process.env.ENVIROMENT !== 'production') {
2-
require('dotenv').config()
2+
require('dotenv').config();
33
}
44

5-
// const contentfulConfig = {
6-
// spaceId: process.env.SPACE_ID,
7-
// accessToken: process.env.ACCESS_TOKEN,
8-
// }
9-
10-
const config = require('./src/config')
5+
const config = require('./src/config');
116

127
module.exports = {
138
pathPrefix: process.env.PATH_PREFIX,
@@ -73,10 +68,6 @@ module.exports = {
7368
],
7469
},
7570
},
76-
// {
77-
// resolve: `gatsby-source-contentful`,
78-
// options: contentfulConfig,
79-
// },
8071
{
8172
resolve: `gatsby-plugin-sitemap`,
8273
options: {
@@ -104,30 +95,30 @@ module.exports = {
10495
}
10596
}`,
10697
serialize: ({ site, allSitePage, allMarkdownRemark }) => {
107-
let pages = []
98+
let pages = [];
10899
allSitePage.edges.map(edge => {
109100
pages.push({
110101
url: site.siteMetadata.siteUrlNoSlash + edge.node.path,
111102
changefreq: `daily`,
112103
priority: 0.7,
113-
})
114-
})
104+
});
105+
});
115106
allMarkdownRemark.edges.map(edge => {
116107
pages.push({
117-
url: `${site.siteMetadata.siteUrlNoSlash}/learn/${
108+
url: `${site.siteMetadata.siteUrlNoSlash}/${
118109
edge.node.fields.slug
119110
}`,
120111
changefreq: `daily`,
121112
priority: 0.7,
122-
})
123-
})
113+
});
114+
});
124115

125-
return pages
116+
return pages;
126117
},
127118
},
128119
},
129120
{
130121
resolve: `gatsby-plugin-emotion`,
131122
},
132123
],
133-
}
124+
};

‎gatsby-node.js‎

Lines changed: 148 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,162 @@
11
const createSlug = require('./src/util/createSlug');
2+
const path = require('path');
23

3-
exports.onCreatePage = async ({ page, actions }) => {
4-
const { createPage, deletePage } = actions
4+
exports.createPages = ({ graphql, actions }) => {
5+
const { createPage, createRedirect, createNodeField } = actions;
56

6-
// If this is the learn page, accept all following paths.
7-
console.log(page.path);
8-
if (!!~page.path.indexOf('/learn')) {
9-
deletePage(page);
10-
createPage({
11-
...page,
12-
path: '/'
13-
});
14-
createPage({
15-
...page,
16-
matchPath: "/learn/*",
17-
});
18-
}
19-
}
7+
return new Promise((resolve, reject) => {
8+
const docTemplate = path.resolve('./src/templates/learn.tsx');
9+
10+
resolve(
11+
graphql(
12+
`
13+
{
14+
allMarkdownRemark(
15+
filter: { fields: { slug: { ne: "" } } }
16+
sort: { fields: [fileAbsolutePath], order: ASC }
17+
) {
18+
edges {
19+
node {
20+
id
21+
fileAbsolutePath
22+
html
23+
parent {
24+
... on File {
25+
relativePath
26+
}
27+
}
28+
frontmatter {
29+
title
30+
description
31+
authors
32+
section
33+
}
34+
fields {
35+
slug
36+
}
37+
}
38+
next {
39+
frontmatter {
40+
title
41+
}
42+
fields {
43+
slug
44+
}
45+
}
46+
previous {
47+
frontmatter {
48+
title
49+
}
50+
fields {
51+
slug
52+
}
53+
}
54+
}
55+
}
56+
}
57+
`
58+
).then(result => {
59+
if (result.errors) {
60+
console.log(result.errors);
61+
reject(result.errors);
62+
}
63+
const { edges } = result.data.allMarkdownRemark;
64+
let navigationData = {};
65+
const docPages = [];
66+
edges.forEach(({ node }, index) => {
67+
const {
68+
fields: { slug, authors },
69+
frontmatter: { title, section },
70+
parent: { relativePath },
71+
} = node;
72+
73+
let previousNodeData = undefined;
74+
const previousNode = index === 0 ? undefined : edges[index - 1].node;
75+
if (previousNode) {
76+
previousNodeData = {
77+
slug: previousNode.fields.slug,
78+
title: previousNode.frontmatter.title,
79+
};
80+
}
81+
82+
let nextNodeData = undefined;
83+
const nextNode =
84+
index === edges.length - 1 ? undefined : edges[index + 1].node;
85+
if (nextNode) {
86+
nextNodeData = {
87+
slug: nextNode.fields.slug,
88+
title: nextNode.frontmatter.title,
89+
};
90+
}
91+
92+
let data;
93+
if (!navigationData[section]) {
94+
data = { title, slug, section };
95+
navigationData = { ...navigationData, [section]: [data] };
96+
} else {
97+
data = { title, slug, section };
98+
navigationData = {
99+
...navigationData,
100+
[section]: [...navigationData[section], data],
101+
};
102+
}
103+
docPages.push({
104+
slug,
105+
next: nextNodeData,
106+
previous: previousNodeData,
107+
relativePath,
108+
});
109+
});
110+
111+
docPages.forEach(page => {
112+
createPage({
113+
path: `/${page.slug}`,
114+
component: docTemplate,
115+
context: {
116+
slug: page.slug,
117+
next: page.next,
118+
previous: page.previous,
119+
relativePath: page.relativePath,
120+
navigationData: navigationData,
121+
},
122+
});
123+
if (page.slug === 'introduction-to-nodejs')
124+
createPage({
125+
path: `/`,
126+
component: docTemplate,
127+
context: {
128+
slug: page.slug,
129+
next: page.next,
130+
previous: page.previous,
131+
relativePath: page.relativePath,
132+
navigationData: navigationData,
133+
},
134+
})
135+
});
136+
})
137+
);
138+
});
139+
};
20140

21141
exports.onCreateNode = ({ node, getNode, actions }) => {
22142
if (node.internal.type === 'MarkdownRemark') {
23143
const { createNodeField } = actions;
144+
24145
const slug = createSlug(node.frontmatter.title);
25146
createNodeField({
26147
node,
27148
name: `slug`,
28149
value: slug,
29150
});
151+
152+
let authors = node.frontmatter.authors;
153+
if (authors) {
154+
authors = authors.split(',');
155+
createNodeField({
156+
node,
157+
name: `authors`,
158+
value: authors,
159+
});
160+
}
30161
}
31-
}
162+
};

‎src/components/article.tsx‎

Lines changed: 35 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,44 @@
11
import React from 'react';
2-
import { RemarkPage, PageInfo } from '../types';
2+
import { PaginationInfo } from '../types';
33
import Pagination from './pagination';
44
import EditLink from './edit-link';
5+
import AuthorLink from './author-link';
56

67
type Props = {
7-
page: RemarkPage;
8-
previous?: PageInfo;
9-
next?: PageInfo;
10-
}
8+
title: string;
9+
html: string;
10+
authors: string[];
11+
relativePath: string;
12+
next?: PaginationInfo;
13+
previous?: PaginationInfo;
14+
};
1115

12-
const Article = ({ page, previous, next }: Props) => (
16+
const Article = ({
17+
title,
18+
html,
19+
previous,
20+
next,
21+
relativePath,
22+
authors,
23+
}: Props) => (
1324
<article className="article-reader">
14-
<h1 className="article-reader__headline">{page.frontmatter.title}</h1>
15-
<div dangerouslySetInnerHTML={{ __html: page.html }} />
16-
<EditLink relativePath={page.parent.relativePath} />
17-
<Pagination previous={previous} next={next}/>
25+
<h1 className="article-reader__headline">{title}</h1>
26+
<div dangerouslySetInnerHTML={{ __html: html }} />
27+
<div
28+
style={{
29+
display: 'flex',
30+
flexWrap: 'wrap',
31+
marginTop: '5rem',
32+
alignItems: 'center',
33+
}}>
34+
Contributors:
35+
{authors && authors.map(author => (
36+
author && <AuthorLink username={author} key={author}/>
37+
))}
38+
</div>
39+
<EditLink relativePath={relativePath} />
40+
<Pagination previous={previous} next={next} />
1841
</article>
19-
)
42+
);
2043

21-
export default Article
44+
export default Article;

‎src/components/author-link.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react';
2+
3+
type Props = {
4+
username: string;
5+
key: string;
6+
};
7+
8+
const AuthorLink = ({ username }: Props) => {
9+
if (!username) {
10+
return null;
11+
}
12+
const githubLink = `https://github.com/${username}`;
13+
14+
return (
15+
<a style={{ marginLeft: '0.5rem' }} href={githubLink}>
16+
{username}
17+
</a>
18+
);
19+
};
20+
21+
export default AuthorLink;

‎src/components/edit-link.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react';
22

33
type Props = {
4-
relativePath?: string
5-
}
4+
relativePath?: string;
5+
};
66

77
const EditLink = ({ relativePath }: Props) => {
88
if (!relativePath) {
@@ -12,10 +12,10 @@ const EditLink = ({ relativePath }: Props) => {
1212
const href = `https://github.com/nodejs/nodejs.dev/edit/master/src/documentation/${relativePath}`;
1313

1414
return (
15-
<a href={href} >
15+
<a style={{ display: 'inlineFlex', marginTop: '1rem' }} href={href}>
1616
Edit this page on GitHub
1717
</a>
18-
)
19-
}
18+
);
19+
};
2020

21-
export default EditLink
21+
export default EditLink;

‎src/components/navigation-item.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useRef, useEffect } from 'react';
22
import { Link } from 'gatsby';
33

44
type Props = {
5+
key: string;
56
isDone: boolean;
67
isActive: boolean;
78
slug: string;
@@ -33,7 +34,7 @@ const NavigationItem = ({ isDone, isActive, slug, title, onClick }: Props) => {
3334
}
3435

3536
return (
36-
<Link ref={handleRef} to={`/learn/${slug}`} onClick={onClick} className={className}>
37+
<Link ref={handleRef} to={`/${slug}`} onClick={onClick} className={className}>
3738
{title}
3839
</Link>
3940
);

0 commit comments

Comments
 (0)