Skip to content

Refactor retrieving 404 Sketch #3195

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jul 19, 2024
Merged

Refactor retrieving 404 Sketch #3195

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6d7f5fe
convert to async/await
raclim Jul 12, 2024
a14c891
Merge branch 'develop' into light-404sketch
raclim Jul 16, 2024
9c82bc1
Merge branch 'develop' into light-404sketch
raclim Jul 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions server/server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')) {
Expand Down
177 changes: 88 additions & 89 deletions server/views/404Page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import User from '../models/user';
import Project from '../models/project';

function insertErrorMessage(htmlFile) {
const insertErrorMessage = (htmlFile) => {
const html = htmlFile.split('</head>');
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] = `
Expand Down Expand Up @@ -65,94 +65,93 @@ function insertErrorMessage(htmlFile) {
${body[1]}
`;
return html.join('</head>');
}

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('</body>');
html[0] = `${html[0]}<script>${file.content}</script>`;
htmlFile = html.join('</body>');
});

cssFiles.forEach((file) => {
// Add css files as style tags
const html = htmlFile.split('</head>');
html[0] = `${html[0]}<style>${file.content}</style>`;
htmlFile = html.join('</head>');
});

linkedFiles.forEach((file) => {
// Add linked files as link tags
const html = htmlFile.split('<head>');
html[1] = `<link href=${file.url}>${html[1]}`;
htmlFile = html.join('<head>');
});

// 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(`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
</body>
</html>`)
);
};

export const get404Sketch = async () => {
const errorMessage = insertErrorMessage(`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
</body>
</html>`);

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('</body>');
html[0] = `${html[0]}<script>${file.content}</script>`;
htmlFile = html.join('</body>');
});

cssFiles.forEach((file) => {
// Add css files as style tags
const html = htmlFile.split('</head>');
html[0] = `${html[0]}<style>${file.content}</style>`;
htmlFile = html.join('</head>');
});

linkedFiles.forEach((file) => {
// Add linked files as link tags
const html = htmlFile.split('<head>');
html[1] = `<link href=${file.url}>${html[1]}`;
htmlFile = html.join('<head>');
});

// 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;
Loading