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

142 lines
4.7 KiB
JavaScript
Raw Normal View History

Fixed #158 and #100 (#198) * Changed unsaved changes asterisk to an svg circle. #158 * Fixed #100 Unmatched routes are handled by react-router on the client side and a single wildcard route on server.routes.js renders the index html. When the /:username/sketches route is matched and the username is not valid, the user will be redirected to the index route and a toast will explain what happened. When the username is 'p5' (default when logged out) it will show all sketches. Maybe this should be changed to just public or 'local' sketches? * Moved unsaved changes SVG to a separate file. * User not found is now a 404 error. * Added server rendered 404 page. * Removed console.log * 404 Page now renders a random p5 sketch. TODO: make 404 sketches. * Added 404 header 404 page now fetches a random example sketch * Moved circle closer to file name * Render 404 page in SketchList route if !user
2017-01-06 18:08:03 +00:00
import User from '../models/user';
import Project from '../models/project';
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
2019-01-25 19:12:40 +00:00
function 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] = `
${html[0]}
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="p5.js, p5.js web editor, web editor, processing, code editor" />
<meta name="description" content="${metaDescription}" />
<title>404 Page Not Found - p5.js Web Editor</title>
<style>
.header {
position: fixed;
height: 200px;
width: 100%;
z-index: 1;
background: white;
color: #ed225d;
font-family: Montserrat, sans-serif;
text-align: center;
display: table;
}
.message-container {
display: table-cell;
vertical-align: middle;
}
.message {
color: #6b6b6b;
margin: 10px;
}
.home-link {
color: #b5b5b5;
text-decoration: none;
}
canvas {
position: fixed;
width: 100% !important;
height: 100% !important;
}
</style>
<link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link
rel='shortcut icon'
href='https://raw.githubusercontent.com/processing/p5.js-website-OLD/master/favicon.ico'
type='image/x-icon'
>
`;
const body = html[1].split('<body>');
html[1] = `
${body[0]}
<body>
<div class="header">
<div class="message-container">
<h1>404 Page Not Found</h1>
<h6 class="message">The page you are trying to reach does not exist.</h6>
<h6 class="message">
Please check the URL or return to the <a href="/" class="home-link">home page</a>.
</h6>
</div>
</div>
${body[1]}
`;
return html.join('</head>');
}
Fixed #158 and #100 (#198) * Changed unsaved changes asterisk to an svg circle. #158 * Fixed #100 Unmatched routes are handled by react-router on the client side and a single wildcard route on server.routes.js renders the index html. When the /:username/sketches route is matched and the username is not valid, the user will be redirected to the index route and a toast will explain what happened. When the username is 'p5' (default when logged out) it will show all sketches. Maybe this should be changed to just public or 'local' sketches? * Moved unsaved changes SVG to a separate file. * User not found is now a 404 error. * Added server rendered 404 page. * Removed console.log * 404 Page now renders a random p5 sketch. TODO: make 404 sketches. * Added 404 header 404 page now fetches a random example sketch * Moved circle closer to file name * Render 404 page in SketchList route if !user
2017-01-06 18:08:03 +00:00
export function get404Sketch(callback) {
User.findOne({ username: 'p5' }, (userErr, user) => { // Find p5 user
if (userErr) {
throw userErr;
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
2019-01-25 19:12:40 +00:00
} else if (user) {
Fixed #158 and #100 (#198) * Changed unsaved changes asterisk to an svg circle. #158 * Fixed #100 Unmatched routes are handled by react-router on the client side and a single wildcard route on server.routes.js renders the index html. When the /:username/sketches route is matched and the username is not valid, the user will be redirected to the index route and a toast will explain what happened. When the username is 'p5' (default when logged out) it will show all sketches. Maybe this should be changed to just public or 'local' sketches? * Moved unsaved changes SVG to a separate file. * User not found is now a 404 error. * Added server rendered 404 page. * Removed console.log * 404 Page now renders a random p5 sketch. TODO: make 404 sketches. * Added 404 header 404 page now fetches a random example sketch * Moved circle closer to file name * Render 404 page in SketchList route if !user
2017-01-06 18:08:03 +00:00
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');
update eslint to latest version, fix lots of linting errors (#308) * update eslint and dependencies, fix linting errors that can be fixed with --fix * fix lots of linting errors * update eslintrc, fix some linting errors * fix all server side linting errors, untested * fix errors that fixing linting errors had caused * fix client side eslint errors * fix client side linting errors * fix refs lint errors * fix more linting errors * update eslint and dependencies, fix linting errors that can be fixed with --fix * fix lots of linting errors * update eslintrc, fix some linting errors * fix all server side linting errors, untested * fix errors that fixing linting errors had caused * fix client side eslint errors * fix client side linting errors * fix refs lint errors * fix more linting errors * fix some accessibility linting errors * fix a lot of linting errors * fix a billion more linting errors * hopefully fix all linting errors, still need to test * fix bugs that fixing linting had caused
2017-02-22 19:29:35 +00:00
jsFiles.forEach((file) => { // Add js files as script tags
Fixed #158 and #100 (#198) * Changed unsaved changes asterisk to an svg circle. #158 * Fixed #100 Unmatched routes are handled by react-router on the client side and a single wildcard route on server.routes.js renders the index html. When the /:username/sketches route is matched and the username is not valid, the user will be redirected to the index route and a toast will explain what happened. When the username is 'p5' (default when logged out) it will show all sketches. Maybe this should be changed to just public or 'local' sketches? * Moved unsaved changes SVG to a separate file. * User not found is now a 404 error. * Added server rendered 404 page. * Removed console.log * 404 Page now renders a random p5 sketch. TODO: make 404 sketches. * Added 404 header 404 page now fetches a random example sketch * Moved circle closer to file name * Render 404 page in SketchList route if !user
2017-01-06 18:08:03 +00:00
const html = htmlFile.split('</body>');
html[0] = `${html[0]}<script>${file.content}</script>`;
htmlFile = html.join('</body>');
});
update eslint to latest version, fix lots of linting errors (#308) * update eslint and dependencies, fix linting errors that can be fixed with --fix * fix lots of linting errors * update eslintrc, fix some linting errors * fix all server side linting errors, untested * fix errors that fixing linting errors had caused * fix client side eslint errors * fix client side linting errors * fix refs lint errors * fix more linting errors * update eslint and dependencies, fix linting errors that can be fixed with --fix * fix lots of linting errors * update eslintrc, fix some linting errors * fix all server side linting errors, untested * fix errors that fixing linting errors had caused * fix client side eslint errors * fix client side linting errors * fix refs lint errors * fix more linting errors * fix some accessibility linting errors * fix a lot of linting errors * fix a billion more linting errors * hopefully fix all linting errors, still need to test * fix bugs that fixing linting had caused
2017-02-22 19:29:35 +00:00
cssFiles.forEach((file) => { // Add css files as style tags
Fixed #158 and #100 (#198) * Changed unsaved changes asterisk to an svg circle. #158 * Fixed #100 Unmatched routes are handled by react-router on the client side and a single wildcard route on server.routes.js renders the index html. When the /:username/sketches route is matched and the username is not valid, the user will be redirected to the index route and a toast will explain what happened. When the username is 'p5' (default when logged out) it will show all sketches. Maybe this should be changed to just public or 'local' sketches? * Moved unsaved changes SVG to a separate file. * User not found is now a 404 error. * Added server rendered 404 page. * Removed console.log * 404 Page now renders a random p5 sketch. TODO: make 404 sketches. * Added 404 header 404 page now fetches a random example sketch * Moved circle closer to file name * Render 404 page in SketchList route if !user
2017-01-06 18:08:03 +00:00
const html = htmlFile.split('</head>');
html[0] = `${html[0]}<style>${file.content}</style>`;
htmlFile = html.join('</head>');
});
update eslint to latest version, fix lots of linting errors (#308) * update eslint and dependencies, fix linting errors that can be fixed with --fix * fix lots of linting errors * update eslintrc, fix some linting errors * fix all server side linting errors, untested * fix errors that fixing linting errors had caused * fix client side eslint errors * fix client side linting errors * fix refs lint errors * fix more linting errors * update eslint and dependencies, fix linting errors that can be fixed with --fix * fix lots of linting errors * update eslintrc, fix some linting errors * fix all server side linting errors, untested * fix errors that fixing linting errors had caused * fix client side eslint errors * fix client side linting errors * fix refs lint errors * fix more linting errors * fix some accessibility linting errors * fix a lot of linting errors * fix a billion more linting errors * hopefully fix all linting errors, still need to test * fix bugs that fixing linting had caused
2017-02-22 19:29:35 +00:00
linkedFiles.forEach((file) => { // Add linked files as link tags
Fixed #158 and #100 (#198) * Changed unsaved changes asterisk to an svg circle. #158 * Fixed #100 Unmatched routes are handled by react-router on the client side and a single wildcard route on server.routes.js renders the index html. When the /:username/sketches route is matched and the username is not valid, the user will be redirected to the index route and a toast will explain what happened. When the username is 'p5' (default when logged out) it will show all sketches. Maybe this should be changed to just public or 'local' sketches? * Moved unsaved changes SVG to a separate file. * User not found is now a 404 error. * Added server rendered 404 page. * Removed console.log * 404 Page now renders a random p5 sketch. TODO: make 404 sketches. * Added 404 header 404 page now fetches a random example sketch * Moved circle closer to file name * Render 404 page in SketchList route if !user
2017-01-06 18:08:03 +00:00
const html = htmlFile.split('<head>');
html[1] = `<link href=${file.url}>${html[1]}`;
htmlFile = html.join('<head>');
});
// Add 404 html and position canvas
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
2019-01-25 19:12:40 +00:00
htmlFile = insertErrorMessage(htmlFile);
Fixed #158 and #100 (#198) * Changed unsaved changes asterisk to an svg circle. #158 * Fixed #100 Unmatched routes are handled by react-router on the client side and a single wildcard route on server.routes.js renders the index html. When the /:username/sketches route is matched and the username is not valid, the user will be redirected to the index route and a toast will explain what happened. When the username is 'p5' (default when logged out) it will show all sketches. Maybe this should be changed to just public or 'local' sketches? * Moved unsaved changes SVG to a separate file. * User not found is now a 404 error. * Added server rendered 404 page. * Removed console.log * 404 Page now renders a random p5 sketch. TODO: make 404 sketches. * Added 404 header 404 page now fetches a random example sketch * Moved circle closer to file name * Render 404 page in SketchList route if !user
2017-01-06 18:08:03 +00:00
// Fix links to assets
update eslint and fix linting errors
2018-05-05 00:22:39 +00:00
htmlFile = htmlFile.replace(
/'assets/g,
"'https://rawgit.com/processing/p5.js-website/master/dist/assets/examples/assets/"
);
htmlFile = htmlFile.replace(
/"assets/g,
'"https://rawgit.com/processing/p5.js-website/master/dist/assets/examples/assets/'
);
Fixed #158 and #100 (#198) * Changed unsaved changes asterisk to an svg circle. #158 * Fixed #100 Unmatched routes are handled by react-router on the client side and a single wildcard route on server.routes.js renders the index html. When the /:username/sketches route is matched and the username is not valid, the user will be redirected to the index route and a toast will explain what happened. When the username is 'p5' (default when logged out) it will show all sketches. Maybe this should be changed to just public or 'local' sketches? * Moved unsaved changes SVG to a separate file. * User not found is now a 404 error. * Added server rendered 404 page. * Removed console.log * 404 Page now renders a random p5 sketch. TODO: make 404 sketches. * Added 404 header 404 page now fetches a random example sketch * Moved circle closer to file name * Render 404 page in SketchList route if !user
2017-01-06 18:08:03 +00:00
// Change canvas size
htmlFile = htmlFile.replace(/createCanvas\(\d+, ?\d+/g, instanceMode ?
'createCanvas(p.windowWidth, p.windowHeight'
update eslint and fix linting errors
2018-05-05 00:22:39 +00:00
:
Fixed #158 and #100 (#198) * Changed unsaved changes asterisk to an svg circle. #158 * Fixed #100 Unmatched routes are handled by react-router on the client side and a single wildcard route on server.routes.js renders the index html. When the /:username/sketches route is matched and the username is not valid, the user will be redirected to the index route and a toast will explain what happened. When the username is 'p5' (default when logged out) it will show all sketches. Maybe this should be changed to just public or 'local' sketches? * Moved unsaved changes SVG to a separate file. * User not found is now a 404 error. * Added server rendered 404 page. * Removed console.log * 404 Page now renders a random p5 sketch. TODO: make 404 sketches. * Added 404 header 404 page now fetches a random example sketch * Moved circle closer to file name * Render 404 page in SketchList route if !user
2017-01-06 18:08:03 +00:00
'createCanvas(windowWidth, windowHeight');
callback(htmlFile);
});
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
2019-01-25 19:12:40 +00:00
} else {
callback(insertErrorMessage(`<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
</body>
</html>`));
Fixed #158 and #100 (#198) * Changed unsaved changes asterisk to an svg circle. #158 * Fixed #100 Unmatched routes are handled by react-router on the client side and a single wildcard route on server.routes.js renders the index html. When the /:username/sketches route is matched and the username is not valid, the user will be redirected to the index route and a toast will explain what happened. When the username is 'p5' (default when logged out) it will show all sketches. Maybe this should be changed to just public or 'local' sketches? * Moved unsaved changes SVG to a separate file. * User not found is now a 404 error. * Added server rendered 404 page. * Removed console.log * 404 Page now renders a random p5 sketch. TODO: make 404 sketches. * Added 404 header 404 page now fetches a random example sketch * Moved circle closer to file name * Render 404 page in SketchList route if !user
2017-01-06 18:08:03 +00:00
}
});
}
update eslint to latest version, fix lots of linting errors (#308) * update eslint and dependencies, fix linting errors that can be fixed with --fix * fix lots of linting errors * update eslintrc, fix some linting errors * fix all server side linting errors, untested * fix errors that fixing linting errors had caused * fix client side eslint errors * fix client side linting errors * fix refs lint errors * fix more linting errors * update eslint and dependencies, fix linting errors that can be fixed with --fix * fix lots of linting errors * update eslintrc, fix some linting errors * fix all server side linting errors, untested * fix errors that fixing linting errors had caused * fix client side eslint errors * fix client side linting errors * fix refs lint errors * fix more linting errors * fix some accessibility linting errors * fix a lot of linting errors * fix a billion more linting errors * hopefully fix all linting errors, still need to test * fix bugs that fixing linting had caused
2017-02-22 19:29:35 +00:00
export default get404Sketch;
Reference in a new issue Copy permalink