Skip to content

Commit dc54e34

Browse files
raclimraclim
authored
Merge pull request #3195 from processing/light-404sketch
Refactor retrieving 404 Sketch
2 parents ca58abd + 9c82bc1 commit dc54e34

File tree

2 files changed

+96
-91
lines changed

2 files changed

+96
-91
lines changed

‎server/server.js

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -189,10 +189,16 @@ app.use('/api', (error, req, res, next) => {
189189
});
190190

191191
// Handle missing routes.
192-
app.get('*', (req, res) => {
192+
app.get('*', async (req, res) => {
193193
res.status(404);
194194
if (req.accepts('html')) {
195-
get404Sketch((html) => res.send(html));
195+
try {
196+
const html = await get404Sketch();
197+
res.send(html);
198+
} catch (err) {
199+
console.error('Error generating 404 sketch:', err);
200+
res.send('Error generating 404 page.');
201+
}
196202
return;
197203
}
198204
if (req.accepts('json')) {

‎server/views/404Page.js

Lines changed: 88 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import User from '../models/user';
22
import Project from '../models/project';
33

4-
function insertErrorMessage(htmlFile) {
4+
const insertErrorMessage = (htmlFile) => {
55
const html = htmlFile.split('</head>');
66
const metaDescription = 'A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.'; // eslint-disable-line
77
html[0] = `
@@ -65,94 +65,93 @@ function insertErrorMessage(htmlFile) {
6565
${body[1]}
6666
`;
6767
return html.join('</head>');
68-
}
69-
70-
export function get404Sketch(callback) {
71-
User.findOne({ username: 'p5' }, (userErr, user) => {
72-
// Find p5 user
73-
if (userErr) {
74-
throw userErr;
75-
} else if (user) {
76-
Project.find({ user: user._id }, (projErr, projects) => {
77-
// Find example projects
78-
// Choose a random sketch
79-
const randomIndex = Math.floor(Math.random() * projects.length);
80-
const sketch = projects[randomIndex];
81-
let instanceMode = false;
82-
83-
// Get sketch files
84-
let htmlFile = sketch.files.filter((file) =>
85-
file.name.match(/.*\.html$/i)
86-
)[0].content;
87-
const jsFiles = sketch.files.filter((file) =>
88-
file.name.match(/.*\.js$/i)
89-
);
90-
const cssFiles = sketch.files.filter((file) =>
91-
file.name.match(/.*\.css$/i)
92-
);
93-
const linkedFiles = sketch.files.filter((file) => file.url);
94-
95-
instanceMode = jsFiles
96-
.find((file) => file.name === 'sketch.js')
97-
.content.includes('Instance Mode');
98-
99-
jsFiles.forEach((file) => {
100-
// Add js files as script tags
101-
const html = htmlFile.split('</body>');
102-
html[0] = `${html[0]}<script>${file.content}</script>`;
103-
htmlFile = html.join('</body>');
104-
});
105-
106-
cssFiles.forEach((file) => {
107-
// Add css files as style tags
108-
const html = htmlFile.split('</head>');
109-
html[0] = `${html[0]}<style>${file.content}</style>`;
110-
htmlFile = html.join('</head>');
111-
});
112-
113-
linkedFiles.forEach((file) => {
114-
// Add linked files as link tags
115-
const html = htmlFile.split('<head>');
116-
html[1] = `<link href=${file.url}>${html[1]}`;
117-
htmlFile = html.join('<head>');
118-
});
119-
120-
// Add 404 html and position canvas
121-
htmlFile = insertErrorMessage(htmlFile);
122-
123-
// Fix links to assets
124-
htmlFile = htmlFile.replace(
125-
/'assets/g,
126-
"'https://rawgit.com/processing/p5.js-website/main/dist/assets/examples/assets/"
127-
);
128-
htmlFile = htmlFile.replace(
129-
/"assets/g,
130-
'"https://rawgit.com/processing/p5.js-website/main/dist/assets/examples/assets/'
131-
);
132-
133-
// Change canvas size
134-
htmlFile = htmlFile.replace(
135-
/createCanvas\(\d+, ?\d+/g,
136-
instanceMode
137-
? 'createCanvas(p.windowWidth, p.windowHeight'
138-
: 'createCanvas(windowWidth, windowHeight'
139-
);
140-
141-
callback(htmlFile);
142-
});
143-
} else {
144-
callback(
145-
insertErrorMessage(`<!DOCTYPE html>
146-
<html lang="en">
147-
<head>
148-
<meta charset="utf-8" />
149-
</head>
150-
<body>
151-
</body>
152-
</html>`)
153-
);
68+
};
69+
70+
export const get404Sketch = async () => {
71+
const errorMessage = insertErrorMessage(`<!DOCTYPE html>
72+
<html lang="en">
73+
<head>
74+
<meta charset="utf-8" />
75+
</head>
76+
<body>
77+
</body>
78+
</html>`);
79+
80+
try {
81+
const p5User = await User.findOne({ username: 'p5' }).exec();
82+
83+
if (!p5User) {
84+
return errorMessage;
85+
}
86+
87+
const projects = await Project.find({ user: p5User._id }).exec();
88+
89+
if (!projects.length) {
90+
return errorMessage;
15491
}
155-
});
156-
}
92+
93+
const randomIndex = Math.floor(Math.random() * projects.length);
94+
const sketch = projects[randomIndex];
95+
96+
// Get sketch files
97+
let htmlFile = sketch.files.find((file) => file.name.match(/.*\.html$/i))
98+
.content;
99+
const jsFiles = sketch.files.filter((file) => file.name.match(/.*\.js$/i));
100+
const cssFiles = sketch.files.filter((file) =>
101+
file.name.match(/.*\.css$/i)
102+
);
103+
const linkedFiles = sketch.files.filter((file) => file.url);
104+
105+
const instanceMode = jsFiles
106+
.find((file) => file.name === 'sketch.js')
107+
.content.includes('Instance Mode');
108+
109+
jsFiles.forEach((file) => {
110+
// Add js files as script tags
111+
const html = htmlFile.split('</body>');
112+
html[0] = `${html[0]}<script>${file.content}</script>`;
113+
htmlFile = html.join('</body>');
114+
});
115+
116+
cssFiles.forEach((file) => {
117+
// Add css files as style tags
118+
const html = htmlFile.split('</head>');
119+
html[0] = `${html[0]}<style>${file.content}</style>`;
120+
htmlFile = html.join('</head>');
121+
});
122+
123+
linkedFiles.forEach((file) => {
124+
// Add linked files as link tags
125+
const html = htmlFile.split('<head>');
126+
html[1] = `<link href=${file.url}>${html[1]}`;
127+
htmlFile = html.join('<head>');
128+
});
129+
130+
// Add 404 html and position canvas
131+
htmlFile = insertErrorMessage(htmlFile);
132+
133+
// Fix links to assets
134+
htmlFile = htmlFile.replace(
135+
/'assets/g,
136+
"'https://rawgit.com/processing/p5.js-website/main/dist/assets/examples/assets/"
137+
);
138+
htmlFile = htmlFile.replace(
139+
/"assets/g,
140+
'"https://rawgit.com/processing/p5.js-website/main/dist/assets/examples/assets/'
141+
);
142+
143+
// Change canvas size
144+
htmlFile = htmlFile.replace(
145+
/createCanvas\(\d+, ?\d+/g,
146+
instanceMode
147+
? 'createCanvas(p.windowWidth, p.windowHeight'
148+
: 'createCanvas(windowWidth, windowHeight'
149+
);
150+
return htmlFile;
151+
} catch (err) {
152+
console.error('Error retrieving 404 sketch:', err);
153+
throw err;
154+
}
155+
};
157156

158157
export default get404Sketch;

0 commit comments

Comments
 (0)