-
-
Notifications
You must be signed in to change notification settings - Fork 195
/
gatsby-node.js
199 lines (178 loc) · 5.21 KB
/
gatsby-node.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
const axios = require('axios');
const { createRemoteFileNode } = require(`gatsby-source-filesystem`);
const path = require('path');
exports.onCreateWebpackConfig = ({ actions }) => {
actions.setWebpackConfig({
resolve: {
alias: {
src: path.join(__dirname, 'src'),
'@src': path.join(__dirname, 'src'),
'@common': path.join(__dirname, 'src/components/common'),
'@components': path.join(__dirname, 'src/components'),
'@pages': path.join(__dirname, 'src/pages'),
},
},
});
};
const slugify = require('./src/components/slugify.js');
exports.onCreateNode = ({ node, getNode, actions }) => {
const { createNodeField } = actions;
if (node.internal.type !== 'MarkdownRemark') return;
const fileNode = getNode(node.parent);
const slugFromTitle = slugify(node.frontmatter.title);
// sourceInstanceName defined if its a blog or case-studie
const sourceInstanceName = fileNode.sourceInstanceName;
// extract the name of the file because we need to sort by it's name
// `001-blahblah`
const fileIndex = fileNode.name.substr(2, 1);
// create slug nodes
createNodeField({
node,
name: 'slug',
// value will be {blog||case-studies}/my-title
value: '/' + sourceInstanceName + '/' + slugFromTitle,
});
// adds a posttype field to extinguish between blog and case-study
createNodeField({
node,
name: 'posttype',
// value will be {blog||case-studies}
value: sourceInstanceName,
});
// if sourceInstanceName is case-studies then add the fileIndex field because we need
// this to sort the Projects with their respective file name `001-blahblah`
if (sourceInstanceName == 'case-studies') {
createNodeField({
node,
name: 'fileIndex',
value: fileIndex,
});
}
};
exports.createPages = ({ actions, graphql }) => {
const { createPage } = actions;
const caseStudyTemplate = path.resolve('src/templates/case-study.js');
const blogPostTemplate = path.resolve('src/templates/blog-post.js');
const tagTemplate = path.resolve('src/templates/tags.js');
return graphql(`
{
allMarkdownRemark {
edges {
node {
frontmatter {
tags
}
fields {
slug
posttype
}
}
}
}
}
`).then(res => {
if (res.errors) return Promise.reject(res.errors);
const edges = res.data.allMarkdownRemark.edges;
edges.forEach(({ node }) => {
// if the posttype is case-studies then createPage with caseStudyTemplate
// we get fileds.posttype because we created this node with onCreateNode
if (node.fields.posttype === 'case-studies') {
createPage({
path: node.fields.slug,
component: caseStudyTemplate,
context: {
slug: node.fields.slug,
},
});
} else {
const tagSet = new Set();
// for each tags on the frontmatter add them to the set
node.frontmatter.tags.forEach(tag => tagSet.add(tag));
const tagList = Array.from(tagSet);
// for each tags create a page with the specific `tag slug` (/blog/tags/:name)
// pass the tag through the PageContext
tagList.forEach(tag => {
createPage({
path: `/blog/tags/${slugify(tag)}/`,
component: tagTemplate,
context: {
tag,
},
});
});
// create each individual blog post with `blogPostTemplate`
createPage({
path: node.fields.slug,
component: blogPostTemplate,
context: {
slug: node.fields.slug,
},
});
}
});
});
};
exports.sourceNodes = ({
actions,
createNodeId,
createContentDigest,
store,
cache,
}) => {
const { createNode } = actions;
const CC_PROJECTS_URI = 'https://anuraghazra.github.io/CanvasFun/data.json';
const createCreativeCodingNode = (project, i) => {
const node = {
id: createNodeId(`${i}`),
parent: null,
children: [],
internal: {
type: `CreativeCoding`,
content: JSON.stringify(project),
contentDigest: createContentDigest(project),
},
...project,
};
// create `allCreativeCoding` Node
createNode(node);
};
// GET IMAGE THUMBNAILS
const createRemoteImage = async (project, i) => {
try {
// it will download the remote files
await createRemoteFileNode({
id: `${i}`,
url: project.img, // the image url
store,
cache,
createNode,
createNodeId,
});
} catch (error) {
throw new Error('error creating remote img node - ' + error);
}
};
// promise based sourcing
return axios
.get(CC_PROJECTS_URI)
.then(res => {
res.data.forEach((project, i) => {
createCreativeCodingNode(project, i);
createRemoteImage(project, i);
});
})
.catch(err => {
// just create a dummy node to pass the build if faild to fetch data
createCreativeCodingNode(
{
id: '0',
demo: '',
img: '',
title: 'Error while loading Data',
src: '',
},
0
);
throw new Error(err);
});
};