Serve up an empty 404 page if no examples user (#766)
* Rebase/squash * Fix 404 page showing when refreshing Examples list * Fix linter error * Revert special-case handling of the p5 user for examples * Add additional env var for enabling/disabling examples
This commit is contained in:
parent
601ef4d012
commit
31abeb9455
3 changed files with 81 additions and 64 deletions
|
@ -219,6 +219,7 @@ class Nav extends React.PureComponent {
|
||||||
Open
|
Open
|
||||||
</Link>
|
</Link>
|
||||||
</li> }
|
</li> }
|
||||||
|
{ __process.env.EXAMPLES_ENABLED &&
|
||||||
<li className="nav__dropdown-item">
|
<li className="nav__dropdown-item">
|
||||||
<Link
|
<Link
|
||||||
to="/p5/sketches"
|
to="/p5/sketches"
|
||||||
|
@ -228,7 +229,7 @@ class Nav extends React.PureComponent {
|
||||||
>
|
>
|
||||||
Examples
|
Examples
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li> }
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li className={navDropdownState.edit}>
|
<li className={navDropdownState.edit}>
|
||||||
|
|
|
@ -1,44 +1,7 @@
|
||||||
import User from '../models/user';
|
import User from '../models/user';
|
||||||
import Project from '../models/project';
|
import Project from '../models/project';
|
||||||
|
|
||||||
export function get404Sketch(callback) {
|
function insertErrorMessage(htmlFile) {
|
||||||
User.findOne({ username: 'p5' }, (userErr, user) => { // Find p5 user
|
|
||||||
if (userErr) {
|
|
||||||
throw userErr;
|
|
||||||
} else {
|
|
||||||
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
|
|
||||||
const html = htmlFile.split('</head>');
|
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
|
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] = `
|
html[0] = `
|
||||||
|
@ -86,7 +49,10 @@ export function get404Sketch(callback) {
|
||||||
type='image/x-icon'
|
type='image/x-icon'
|
||||||
>
|
>
|
||||||
`;
|
`;
|
||||||
|
const body = html[1].split('<body>');
|
||||||
html[1] = `
|
html[1] = `
|
||||||
|
${body[0]}
|
||||||
|
<body>
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="message-container">
|
<div class="message-container">
|
||||||
<h1>404 Page Not Found</h1>
|
<h1>404 Page Not Found</h1>
|
||||||
|
@ -96,9 +62,50 @@ export function get404Sketch(callback) {
|
||||||
</h6>
|
</h6>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
${html[1]}
|
${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>');
|
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
|
// Fix links to assets
|
||||||
htmlFile = htmlFile.replace(
|
htmlFile = htmlFile.replace(
|
||||||
|
@ -118,9 +125,17 @@ export function get404Sketch(callback) {
|
||||||
|
|
||||||
callback(htmlFile);
|
callback(htmlFile);
|
||||||
});
|
});
|
||||||
|
} else {
|
||||||
|
callback(insertErrorMessage(`<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
</body>
|
||||||
|
</html>`));
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
export default get404Sketch;
|
export default get404Sketch;
|
||||||
|
|
||||||
|
|
|
@ -28,7 +28,8 @@ export function renderIndex() {
|
||||||
window.process.env.AWS_REGION = '${process.env.AWS_REGION}';
|
window.process.env.AWS_REGION = '${process.env.AWS_REGION}';
|
||||||
window.process.env.FORCE_TO_HTTPS = ${process.env.FORCE_TO_HTTPS === 'false' ? false : undefined};
|
window.process.env.FORCE_TO_HTTPS = ${process.env.FORCE_TO_HTTPS === 'false' ? false : undefined};
|
||||||
window.process.env.CLIENT = true;
|
window.process.env.CLIENT = true;
|
||||||
window.process.env.LOGIN_ENABLED = ${process.env.LOGIN_ENABLED === 'false' ? false : true}
|
window.process.env.LOGIN_ENABLED = ${process.env.LOGIN_ENABLED === 'false' ? false : true};
|
||||||
|
window.process.env.EXAMPLES_ENABLED = ${process.env.EXAMPLES_ENABLED === 'false' ? false : true};
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
Loading…
Reference in a new issue