diff --git a/server/server.js b/server/server.js index 0495ebbc2f..64affcf509 100644 --- a/server/server.js +++ b/server/server.js @@ -189,10 +189,16 @@ app.use('/api', (error, req, res, next) => { }); // Handle missing routes. -app.get('*', (req, res) => { +app.get('*', async (req, res) => { res.status(404); if (req.accepts('html')) { - get404Sketch((html) => res.send(html)); + try { + const html = await get404Sketch(); + res.send(html); + } catch (err) { + console.error('Error generating 404 sketch:', err); + res.send('Error generating 404 page.'); + } return; } if (req.accepts('json')) { diff --git a/server/views/404Page.js b/server/views/404Page.js index 7f74372535..7c864f4009 100644 --- a/server/views/404Page.js +++ b/server/views/404Page.js @@ -1,7 +1,7 @@ import User from '../models/user'; import Project from '../models/project'; -function insertErrorMessage(htmlFile) { +const insertErrorMessage = (htmlFile) => { const html = htmlFile.split(''); 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 html[0] = ` @@ -65,94 +65,93 @@ function insertErrorMessage(htmlFile) { ${body[1]} `; return html.join(''); -} - -export function get404Sketch(callback) { - User.findOne({ username: 'p5' }, (userErr, user) => { - // Find p5 user - if (userErr) { - throw userErr; - } else if (user) { - Project.find({ user: user._id }, (projErr, projects) => { - // Find example projects - // Choose a random sketch - const randomIndex = Math.floor(Math.random() * projects.length); - const sketch = projects[randomIndex]; - let instanceMode = false; - - // Get sketch files - let htmlFile = sketch.files.filter((file) => - file.name.match(/.*\.html$/i) - )[0].content; - const jsFiles = sketch.files.filter((file) => - file.name.match(/.*\.js$/i) - ); - const cssFiles = sketch.files.filter((file) => - file.name.match(/.*\.css$/i) - ); - const linkedFiles = sketch.files.filter((file) => file.url); - - instanceMode = jsFiles - .find((file) => file.name === 'sketch.js') - .content.includes('Instance Mode'); - - jsFiles.forEach((file) => { - // Add js files as script tags - const html = htmlFile.split(''); - html[0] = `${html[0]}`; - htmlFile = html.join(''); - }); - - cssFiles.forEach((file) => { - // Add css files as style tags - const html = htmlFile.split(''); - html[0] = `${html[0]}`; - htmlFile = html.join(''); - }); - - linkedFiles.forEach((file) => { - // Add linked files as link tags - const html = htmlFile.split(''); - html[1] = `${html[1]}`; - htmlFile = html.join(''); - }); - - // Add 404 html and position canvas - htmlFile = insertErrorMessage(htmlFile); - - // Fix links to assets - htmlFile = htmlFile.replace( - /'assets/g, - "'https://rawgit.com/processing/p5.js-website/main/dist/assets/examples/assets/" - ); - htmlFile = htmlFile.replace( - /"assets/g, - '"https://rawgit.com/processing/p5.js-website/main/dist/assets/examples/assets/' - ); - - // Change canvas size - htmlFile = htmlFile.replace( - /createCanvas\(\d+, ?\d+/g, - instanceMode - ? 'createCanvas(p.windowWidth, p.windowHeight' - : 'createCanvas(windowWidth, windowHeight' - ); - - callback(htmlFile); - }); - } else { - callback( - insertErrorMessage(` - - - - - - - `) - ); +}; + +export const get404Sketch = async () => { + const errorMessage = insertErrorMessage(` + + + + + + + `); + + try { + const p5User = await User.findOne({ username: 'p5' }).exec(); + + if (!p5User) { + return errorMessage; + } + + const projects = await Project.find({ user: p5User._id }).exec(); + + if (!projects.length) { + return errorMessage; } - }); -} + + const randomIndex = Math.floor(Math.random() * projects.length); + const sketch = projects[randomIndex]; + + // Get sketch files + let htmlFile = sketch.files.find((file) => file.name.match(/.*\.html$/i)) + .content; + const jsFiles = sketch.files.filter((file) => file.name.match(/.*\.js$/i)); + const cssFiles = sketch.files.filter((file) => + file.name.match(/.*\.css$/i) + ); + const linkedFiles = sketch.files.filter((file) => file.url); + + const instanceMode = jsFiles + .find((file) => file.name === 'sketch.js') + .content.includes('Instance Mode'); + + jsFiles.forEach((file) => { + // Add js files as script tags + const html = htmlFile.split(''); + html[0] = `${html[0]}`; + htmlFile = html.join(''); + }); + + cssFiles.forEach((file) => { + // Add css files as style tags + const html = htmlFile.split(''); + html[0] = `${html[0]}`; + htmlFile = html.join(''); + }); + + linkedFiles.forEach((file) => { + // Add linked files as link tags + const html = htmlFile.split(''); + html[1] = `${html[1]}`; + htmlFile = html.join(''); + }); + + // Add 404 html and position canvas + htmlFile = insertErrorMessage(htmlFile); + + // Fix links to assets + htmlFile = htmlFile.replace( + /'assets/g, + "'https://rawgit.com/processing/p5.js-website/main/dist/assets/examples/assets/" + ); + htmlFile = htmlFile.replace( + /"assets/g, + '"https://rawgit.com/processing/p5.js-website/main/dist/assets/examples/assets/' + ); + + // Change canvas size + htmlFile = htmlFile.replace( + /createCanvas\(\d+, ?\d+/g, + instanceMode + ? 'createCanvas(p.windowWidth, p.windowHeight' + : 'createCanvas(windowWidth, windowHeight' + ); + return htmlFile; + } catch (err) { + console.error('Error retrieving 404 sketch:', err); + throw err; + } +}; export default get404Sketch;