Skip to content

Project og title added in ssr #2181

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

Closed
wants to merge 8 commits into from
Closed

Project og title added in ssr #2181

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1930f19
modified the controller
dewanshDT Mar 23, 2023
bd3ab35
added renderProjectIndex
dewanshDT Mar 23, 2023
7a4ef3d
edited the routes
dewanshDT Mar 23, 2023
d37f569
Merge branch 'develop' into project-og-title
raclim Jul 12, 2023
15836df
Merge branch 'develop' into project-og-title
dewanshDT Aug 19, 2023
5cbac30
Merge branch 'develop' into project-og-title
SableRaf Sep 27, 2023
6732753
Merge branch 'develop' into project-og-title
raclim Nov 8, 2023
783a9a0
Merge branch 'develop' into project-og-title
raclim Jan 11, 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
11 changes: 7 additions & 4 deletions server/controllers/project.controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,8 @@ export function updateProject(req, res) {

export function getProject(req, res) {
const { project_id: projectId, username } = req.params;
User.findByUsername(username, (err, user) => { // eslint-disable-line
// eslint-disable-next-line consistent-return
User.findByUsername(username, (err, user) => {
if (!user) {
return res
.status(404)
Expand All @@ -96,7 +97,8 @@ export function getProject(req, res) {
$or: [{ _id: projectId }, { slug: projectId }]
})
.populate('user', 'username')
.exec((err, project) => { // eslint-disable-line
// eslint-disable-next-line no-shadow
.exec((err, project) => {
if (err) {
console.log(err);
return res
Expand Down Expand Up @@ -126,7 +128,8 @@ export function getProjectAsset(req, res) {
const projectId = req.params.project_id;
Project.findOne({ $or: [{ _id: projectId }, { slug: projectId }] })
.populate('user', 'username')
.exec(async (err, project) => { // eslint-disable-line
// eslint-disable-next-line consistent-return
.exec(async (err, project) => {
if (err) {
return res
.status(404)
Expand Down Expand Up @@ -188,7 +191,7 @@ export function projectForUserExists(username, projectId, callback) {
callback(false);
return;
}
callback(true);
callback(true, project.name);
}
);
});
Expand Down
11 changes: 8 additions & 3 deletions server/routes/server.routes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Router } from 'express';
import { renderIndex } from '../views/index';
import { renderIndex, renderProjectIndex } from '../views/index';
import { get404Sketch } from '../views/404Page';
import { userExists } from '../controllers/user.controller';
import {
Expand Down Expand Up @@ -40,8 +40,13 @@ router.get('/:username/sketches/:project_id/add-to-collection', (req, res) => {
});

router.get('/:username/sketches/:project_id', (req, res) => {
projectForUserExists(req.params.username, req.params.project_id, (exists) =>
exists ? res.send(renderIndex()) : get404Sketch((html) => res.send(html))
projectForUserExists(
req.params.username,
req.params.project_id,
(exists, projectName) =>
exists
? res.send(renderProjectIndex(projectName, req.params.username))
: get404Sketch((html) => res.send(html))
);
});

Expand Down
106 changes: 101 additions & 5 deletions server/views/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
export function renderIndex() {
const assetsManifest = process.env.webpackAssets && JSON.parse(process.env.webpackAssets);
const assetsManifest =
process.env.webpackAssets && JSON.parse(process.env.webpackAssets);
return `
<!DOCTYPE html>
<html lang="en">
Expand All @@ -9,7 +10,11 @@ export function renderIndex() {
<meta name="keywords" content="p5.js, p5.js web editor, web editor, processing, code editor" />
<meta name="description" content="A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners." />
<title>p5.js Web Editor</title>
${process.env.NODE_ENV === 'production' ? `<link rel='stylesheet' href='${assetsManifest['/app.css']}' />` : ''}
${
process.env.NODE_ENV === 'production'
? `<link rel='stylesheet' href='${assetsManifest['/app.css']}' />`
: ''
}
<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='/favicon.ico' type='image/x-icon' / >
Expand All @@ -23,9 +28,96 @@ export function renderIndex() {
window.process.env.API_URL = '${process.env.API_URL}';
window.process.env.NODE_ENV = '${process.env.NODE_ENV}';
window.process.env.S3_BUCKET = '${process.env.S3_BUCKET}';
window.process.env.S3_BUCKET_URL_BASE = ${process.env.S3_BUCKET_URL_BASE ? `'${process.env.S3_BUCKET_URL_BASE}'` : undefined};
window.process.env.S3_BUCKET_URL_BASE = ${
process.env.S3_BUCKET_URL_BASE
? `'${process.env.S3_BUCKET_URL_BASE}'`
: undefined
};
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.LOGIN_ENABLED = ${
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the file was not formatted before for some reason

process.env.LOGIN_ENABLED === 'false' ? false : true
};
window.process.env.EXAMPLES_ENABLED = ${
process.env.EXAMPLES_ENABLED === 'false' ? false : true
};
window.process.env.UI_ACCESS_TOKEN_ENABLED = ${
process.env.UI_ACCESS_TOKEN_ENABLED === 'false' ? false : true
};
window.process.env.UI_COLLECTIONS_ENABLED = ${
process.env.UI_COLLECTIONS_ENABLED === 'false' ? false : true
};
window.process.env.UPLOAD_LIMIT = ${
process.env.UPLOAD_LIMIT ? `${process.env.UPLOAD_LIMIT}` : undefined
};
window.process.env.MOBILE_ENABLED = ${
process.env.MOBILE_ENABLED
? `${process.env.MOBILE_ENABLED}`
: undefined
};
window.process.env.TRANSLATIONS_ENABLED = ${
process.env.TRANSLATIONS_ENABLED === 'true' ? true : false
};
window.process.env.PREVIEW_URL = '${process.env.PREVIEW_URL}';
window.process.env.GA_MEASUREMENT_ID='${process.env.GA_MEASUREMENT_ID}';
</script>
</head>
<body>
<div id="root" class="root-app">
</div>
<script src='${
process.env.NODE_ENV === 'production'
? `${assetsManifest['/app.js']}`
: '/app.js'
}'></script>
</body>
</html>
`;
}

export function renderProjectIndex(projectName, username) {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

added this function for rendering the user's Project index file

const assetsManifest =
process.env.webpackAssets && JSON.parse(process.env.webpackAssets);
return `
<!DOCTYPE html>
<html lang="en">
<head>
<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="A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners." />
<meta property="og:title" content="${`${projectName} by ${username} -`} p5.js Web Editor" />
<title>${`${projectName} by ${username} -`} p5.js Web Editor</title>
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

modified title and also added og:title

${
process.env.NODE_ENV === 'production'
? `<link rel='stylesheet' href='${assetsManifest['/app.css']}' />`
: ''
}
<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='favicon.ico' type='image/x-icon' / >
<script>
if (!window.process) {
window.process = {};
}
if (!window.process.env) {
window.process.env = {};
}
window.process.env.API_URL = '${process.env.API_URL}';
window.process.env.NODE_ENV = '${process.env.NODE_ENV}';
window.process.env.S3_BUCKET = '${process.env.S3_BUCKET}';
window.process.env.S3_BUCKET_URL_BASE = ${
process.env.S3_BUCKET_URL_BASE
? `'${process.env.S3_BUCKET_URL_BASE}'`
: undefined
};
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.CLIENT = 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};
Expand All @@ -40,7 +132,11 @@ export function renderIndex() {
<body>
<div id="root" class="root-app">
</div>
<script src='${process.env.NODE_ENV === 'production' ? `${assetsManifest['/app.js']}` : '/app.js'}'></script>
<script src='${
process.env.NODE_ENV === 'production'
? `${assetsManifest['/app.js']}`
: '/app.js'
}'></script>
</body>
</html>
`;
Expand Down