r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

Serve up an empty 404 page if no examples user (#766)

Browse source 
* 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:
Francis Li 2019-01-25 11:12:40 -08:00 committed by Cassie Tarakajian
parent 601ef4d012
commit 31abeb9455
3 changed files with 81 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
client/components/Nav.jsx
View file

@ -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}>

95
server/views/404Page.js
View file

@ -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;

3
server/views/index.js
View file

@ -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>