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

Commit 76da9f7

Browse files
authored
refactor(gatsby): optimized queries, types and imports (#2748)
1 parent 157e657 commit 76da9f7

59 files changed

Lines changed: 802 additions & 3386 deletions

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: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,16 @@
100100
"source": "/docs/*",
101101
"destination": "/api/",
102102
"type": "301"
103+
},
104+
{
105+
"source": "/api/",
106+
"destination": "/api/v18/documentation/",
107+
"type": "301"
108+
},
109+
{
110+
"source": "/api/v18/",
111+
"destination": "/api/v18/documentation/",
112+
"type": "301"
103113
}
104114
]
105115
}

gatsby-config.js

Lines changed: 27 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,26 @@ require('dotenv').config();
55
const config = require('./src/config.json');
66
const { localesAsString, defaultLanguage } = require('./locales');
77

8-
const gatsbyConfig = {
9-
flags: {
10-
FAST_DEV: true,
11-
PARALLEL_SOURCING: true,
8+
const markdownSources = [
9+
'about',
10+
'api',
11+
'community',
12+
'download',
13+
'homepage',
14+
'learn',
15+
'blog',
16+
];
17+
18+
const gatsbyFsMarkdownSources = markdownSources.map(name => ({
19+
resolve: 'gatsby-source-filesystem',
20+
options: {
21+
name,
22+
path: path.resolve(__dirname, `./content/${name}`),
1223
},
24+
}));
25+
26+
const gatsbyConfig = {
27+
flags: { FAST_DEV: true },
1328
pathPrefix: process.env.PATH_PREFIX,
1429
siteMetadata: {
1530
title: config.title,
@@ -24,10 +39,15 @@ const gatsbyConfig = {
2439
'Mdx.frontmatter.category': `CategoriesYaml.name`,
2540
},
2641
plugins: [
42+
'gatsby-plugin-typescript',
2743
'gatsby-plugin-catch-links',
2844
'@skagami/gatsby-plugin-dark-mode',
2945
'gatsby-transformer-yaml',
30-
'gatsby-plugin-sharp',
46+
'gatsby-plugin-sitemap',
47+
// This generates the redirects for the I18N redirects
48+
// It also creates meta redirects for any usage of `createRedirect`
49+
'gatsby-plugin-meta-redirect',
50+
...gatsbyFsMarkdownSources,
3151
{
3252
resolve: 'gatsby-plugin-canonical-urls',
3353
options: {
@@ -45,76 +65,20 @@ const gatsbyConfig = {
4565
},
4666
},
4767
},
48-
{
49-
resolve: 'gatsby-source-filesystem',
50-
options: {
51-
name: 'learn',
52-
path: path.resolve(__dirname, './content/learn'),
53-
},
54-
},
55-
{
56-
resolve: 'gatsby-source-filesystem',
57-
options: {
58-
name: 'sites',
59-
path: path.resolve(__dirname, './src/pages'),
60-
},
61-
},
62-
{
63-
resolve: 'gatsby-source-filesystem',
64-
options: {
65-
name: 'homepage',
66-
path: path.resolve(__dirname, './content/homepage'),
67-
},
68-
},
69-
{
70-
resolve: 'gatsby-source-filesystem',
71-
options: {
72-
name: 'community',
73-
path: path.resolve(__dirname, './content/community'),
74-
},
75-
},
76-
{
77-
resolve: 'gatsby-source-filesystem',
78-
options: {
79-
name: 'blog',
80-
path: path.resolve(__dirname, './content/blog'),
81-
},
82-
},
8368
{
8469
resolve: 'gatsby-source-filesystem',
8570
options: {
8671
name: 'data',
8772
path: path.resolve(__dirname, './src/data'),
8873
},
8974
},
90-
{
91-
resolve: 'gatsby-source-filesystem',
92-
options: {
93-
name: 'about',
94-
path: path.resolve(__dirname, './content/about'),
95-
},
96-
},
97-
{
98-
resolve: 'gatsby-source-filesystem',
99-
options: {
100-
name: 'download',
101-
path: path.resolve(__dirname, './content/download'),
102-
},
103-
},
104-
{
105-
resolve: 'gatsby-source-filesystem',
106-
options: {
107-
name: 'api',
108-
path: path.resolve(__dirname, './content/api'),
109-
},
110-
},
111-
'gatsby-plugin-typescript',
11275
{
11376
resolve: 'gatsby-plugin-mdx',
11477
options: {
11578
extensions: ['.mdx', '.md'],
79+
// Disables Babel Loader for MDX which fastens the build time
80+
lessBabel: true,
11681
gatsbyRemarkPlugins: [
117-
{ resolve: 'gatsby-remark-copy-linked-files' },
11882
{
11983
resolve: 'gatsby-remark-autolink-headers',
12084
options: {
@@ -125,13 +89,6 @@ const gatsbyConfig = {
12589
removeAccents: true,
12690
},
12791
},
128-
{
129-
resolve: 'gatsby-remark-images',
130-
options: {
131-
maxWidth: 590,
132-
backgroundColor: 'transparent',
133-
},
134-
},
13592
],
13693
},
13794
},
@@ -226,9 +183,6 @@ const gatsbyConfig = {
226183
cache_busting_mode: 'none',
227184
},
228185
},
229-
'gatsby-plugin-sitemap',
230-
'gatsby-plugin-meta-redirect',
231-
'gatsby-plugin-minify-html',
232186
],
233187
};
234188

gatsby-node.js

Lines changed: 66 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,13 @@ const createSlug = require('./util-node/createSlug');
88
const getNodeReleasesData = require('./util-node/getNodeReleasesData');
99
const getBannersData = require('./util-node/getBannersData');
1010
const getNvmData = require('./util-node/getNvmData');
11-
const createPagesQuery = require('./util-node/createPagesQuery');
11+
const createBlogQuery = require('./util-node/createBlogQuery');
1212
const createLearnQuery = require('./util-node/createLearnQuery');
1313
const createApiQuery = require('./util-node/createApiQuery');
14-
const createMarkdownPages = require('./util-node/createMarkdownPages');
14+
const createBlogPages = require('./util-node/createBlogPages');
15+
const createLearnPages = require('./util-node/createLearnPages');
1516
const createApiPages = require('./util-node/createApiPages');
17+
const generateRedirects = require('./util-node/generateRedirects');
1618
const redirects = require('./redirects');
1719
const nodeLocales = require('./locales');
1820
const { learnPath, apiPath, blogPath } = require('./pathPrefixes');
@@ -69,79 +71,101 @@ exports.createSchemaCustomization = ({ actions }) => {
6971
createTypes(typeDefs);
7072
};
7173

72-
exports.createPages = async ({ graphql, actions, reporter }) => {
74+
exports.createPages = async ({ graphql, actions }) => {
7375
const { createPage, createRedirect } = actions;
7476

7577
const pageRedirects = { ...redirects };
7678

77-
const apiTemplate = path.resolve(__dirname, './src/templates/api.tsx');
78-
const learnTemplate = path.resolve(__dirname, './src/templates/learn.tsx');
79-
const blogTemplate = path.resolve(__dirname, './src/templates/blog.tsx');
80-
const blogCategoryTemplate = path.resolve(
81-
__dirname,
82-
'./src/templates/blog-category.tsx'
83-
);
79+
const templates = path.resolve(__dirname, './src/templates/');
80+
81+
const apiTemplate = `${templates}/api.tsx`;
82+
const learnTemplate = `${templates}/learn.tsx`;
83+
const postTemplate = `${templates}/post.tsx`;
84+
const blogTemplate = `${templates}/blog.tsx`;
8485

85-
const [learnResult, pagesResult, apiResult] = await Promise.all([
86+
const [learnResult, blogResult, apiResult] = await Promise.all([
8687
graphql(createLearnQuery),
87-
graphql(createPagesQuery),
88+
graphql(createBlogQuery),
8889
graphql(createApiQuery),
8990
]);
9091

91-
if (pagesResult.errors || learnResult.errors || apiResult.errors) {
92-
reporter.panicOnBuild('Error while running GraphQL queries.');
93-
return;
94-
}
95-
9692
const {
97-
pages: { edges: pageEdges },
93+
pages: { edges: blogEdges },
9894
categories: { edges: categoryEdges },
99-
} = pagesResult.data;
95+
} = blogResult.data;
10096

10197
const {
10298
allMdx: { edges: learnEdges },
10399
} = learnResult.data;
104100

105101
const {
106102
pages: { edges: apiEdges },
107-
nodeReleases: { nodeReleasesVersion },
103+
nodeReleases: { nodeReleasesData, apiAvailableVersions },
108104
} = apiResult.data;
109105

110-
const {
111-
markdownPages,
112-
learnPages,
113-
firstLearnPage,
114-
navigationData: learNavigationData,
115-
} = createMarkdownPages(pageEdges, learnEdges, learnYamlNavigationData);
106+
const { blogPages } = createBlogPages(blogEdges);
107+
108+
const { learnPages, navigationData: learnNavigationData } = createLearnPages(
109+
learnEdges,
110+
learnYamlNavigationData
111+
);
116112

117113
const {
118114
apiPages,
119115
latestVersion,
120116
navigationData: apiNavigationData,
121117
defaultNavigationRedirects: apiRedirects,
122-
} = createApiPages(apiEdges, apiTypesNavigationData, nodeReleasesVersion);
118+
} = createApiPages(apiEdges, apiTypesNavigationData, nodeReleasesData);
119+
120+
createPage({
121+
path: learnPath,
122+
component: learnTemplate,
123+
context: { ...learnPages[0], navigationData: learnNavigationData },
124+
});
123125

124-
if (firstLearnPage) {
126+
createPage({
127+
path: blogPath,
128+
component: blogTemplate,
129+
context: { categories: categoryEdges, posts: blogEdges },
130+
});
131+
132+
learnPages.forEach(page => {
125133
createPage({
126-
path: learnPath,
134+
path: page.slug,
127135
component: learnTemplate,
128-
context: { ...firstLearnPage, navigationData: learNavigationData },
136+
context: { ...page, navigationData: learnNavigationData },
129137
});
130-
}
138+
});
131139

132-
learnPages.forEach(page => {
140+
blogPages.forEach(page => {
133141
createPage({
134142
path: page.slug,
135-
component: learnTemplate,
136-
context: { ...page, navigationData: learNavigationData },
143+
component: postTemplate,
144+
context: { ...page, recent: blogEdges.slice(0, 9) },
137145
});
138146
});
139147

140148
categoryEdges.forEach(({ node }) => {
149+
const posts = blogEdges.filter(
150+
({ node: item }) => item.fields.categoryName === node.name
151+
);
152+
141153
createPage({
142154
path: `${blogPath}${node.name}/`,
143-
component: blogCategoryTemplate,
144-
context: { categoryName: node.name },
155+
component: blogTemplate,
156+
context: { categories: categoryEdges, category: node, posts },
157+
});
158+
});
159+
160+
apiPages.forEach(page => {
161+
createPage({
162+
path: page.slug,
163+
component: apiTemplate,
164+
context: {
165+
...page,
166+
navigationData: apiNavigationData[page.version],
167+
nodeReleases: { nodeReleasesData, apiAvailableVersions },
168+
},
145169
});
146170
});
147171

@@ -150,6 +174,11 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
150174
pageRedirects[apiPath] = `${latestApiPath}documentation/`;
151175
pageRedirects[latestApiPath] = `${latestApiPath}documentation/`;
152176

177+
// Updates `firebase.json` with new redirects
178+
// This is used for our static hosting redirects (npm run build)
179+
// When using `npm run serve` or `npm run start` this will not be needed
180+
generateRedirects(pageRedirects);
181+
153182
apiRedirects.forEach(({ from, to }) => {
154183
pageRedirects[`${apiPath}${from}`] = `${apiPath}${to}`;
155184

@@ -158,33 +187,13 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
158187
pageRedirects[`${apiPath}${from.slice(0, -1)}.html`] = `${apiPath}${to}`;
159188
});
160189

161-
apiPages.forEach(page => {
162-
createPage({
163-
path: page.slug,
164-
component: apiTemplate,
165-
context: { ...page, navigationData: apiNavigationData[page.version] },
166-
});
167-
});
168-
169-
markdownPages
170-
.filter(page => page.realPath.match(blogPath))
171-
.forEach(page => {
172-
// Blog Pages don't necessary need to be within the `blog` category
173-
// But actually inside /content/blog/ section of the repository
174-
createPage({
175-
path: page.slug,
176-
component: blogTemplate,
177-
context: page,
178-
});
179-
});
180-
181190
// Create Redirects for Pages
182191
Object.keys(pageRedirects).forEach(from => {
183192
const metadata = {
184193
fromPath: from,
185194
toPath: pageRedirects[from],
186195
isPermanent: true,
187-
redirectInBrowser: true,
196+
redirectInBrowser: process.env.NODE_ENV === 'development',
188197
statusCode: 200,
189198
};
190199

0 commit comments

Comments
 (0)