Skip to content

Commit cb8ac32

Browse files
authored
Merge pull request #3177 from Rishab87/project-og-title-fix
fixed Project og title added in ssr
2 parents ea5e859 + c30bf4f commit cb8ac32

File tree

3 files changed

+75
-4
lines changed

3 files changed

+75
-4
lines changed

server/controllers/project.controller.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -173,6 +173,23 @@ export async function projectForUserExists(username, projectId) {
173173
return project != null;
174174
}
175175

176+
/**
177+
* @param {string} username
178+
* @param {string} projectId - the database id or the slug or the project
179+
* @return {Promise<object>}
180+
*/
181+
export async function getProjectForUser(username, projectId) {
182+
const user = await User.findByUsername(username);
183+
if (!user) return { exists: false };
184+
const project = await Project.findOne({
185+
user: user._id,
186+
$or: [{ _id: projectId }, { slug: projectId }]
187+
});
188+
return project != null
189+
? { exists: true, userProject: project }
190+
: { exists: false };
191+
}
192+
176193
/**
177194
* Adds URLs referenced in <script> tags to the `files` array of the project
178195
* so that they can be downloaded along with other remote files from S3.

server/routes/server.routes.js

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import { Router } from 'express';
2-
import sendHtml, { renderIndex } from '../views/index';
2+
import sendHtml, { renderIndex, renderProjectIndex } from '../views/index';
33
import { userExists } from '../controllers/user.controller';
44
import {
55
projectExists,
6-
projectForUserExists
6+
projectForUserExists,
7+
getProjectForUser
78
} from '../controllers/project.controller';
89
import { collectionForUserExists } from '../controllers/collection.controller';
910

@@ -43,11 +44,16 @@ router.get(
4344
);
4445

4546
router.get('/:username/sketches/:project_id', async (req, res) => {
46-
const exists = await projectForUserExists(
47+
const project = await getProjectForUser(
4748
req.params.username,
4849
req.params.project_id
4950
);
50-
sendHtml(req, res, exists);
51+
52+
if (project.exists) {
53+
res.send(renderProjectIndex(req.params.username, project.userProject.name));
54+
} else {
55+
sendHtml(req, res, project.exists);
56+
}
5157
});
5258

5359
router.get('/:username/sketches', async (req, res) => {

server/views/index.js

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,54 @@ export function renderIndex() {
4848
`;
4949
}
5050

51+
export function renderProjectIndex(username, projectName) {
52+
const assetsManifest = process.env.webpackAssets && JSON.parse(process.env.webpackAssets);
53+
return `
54+
<!DOCTYPE html>
55+
<html lang="en">
56+
<head>
57+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
58+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
59+
<meta name="keywords" content="p5.js, p5.js web editor, web editor, processing, code editor" />
60+
<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." />
61+
<title>${`${projectName} by ${username} -`}p5.js Web Editor</title>
62+
${process.env.NODE_ENV === 'production' ? `<link rel='stylesheet' href='${assetsManifest['/app.css']}' />` : ''}
63+
<link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
64+
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
65+
<link rel='shortcut icon' href='/favicon.ico' type='image/x-icon' / >
66+
<script>
67+
if (!window.process) {
68+
window.process = {};
69+
}
70+
if (!window.process.env) {
71+
window.process.env = {};
72+
}
73+
window.process.env.API_URL = '${process.env.API_URL}';
74+
window.process.env.NODE_ENV = '${process.env.NODE_ENV}';
75+
window.process.env.S3_BUCKET = '${process.env.S3_BUCKET}';
76+
window.process.env.S3_BUCKET_URL_BASE = ${process.env.S3_BUCKET_URL_BASE ? `'${process.env.S3_BUCKET_URL_BASE}'` : undefined};
77+
window.process.env.AWS_REGION = '${process.env.AWS_REGION}';
78+
window.process.env.FORCE_TO_HTTPS = ${process.env.FORCE_TO_HTTPS === 'false' ? false : undefined};
79+
window.process.env.CLIENT = true;
80+
window.process.env.LOGIN_ENABLED = ${process.env.LOGIN_ENABLED === 'false' ? false : true};
81+
window.process.env.EXAMPLES_ENABLED = ${process.env.EXAMPLES_ENABLED === 'false' ? false : true};
82+
window.process.env.UI_ACCESS_TOKEN_ENABLED = ${process.env.UI_ACCESS_TOKEN_ENABLED === 'false' ? false : true};
83+
window.process.env.UI_COLLECTIONS_ENABLED = ${process.env.UI_COLLECTIONS_ENABLED === 'false' ? false : true};
84+
window.process.env.UPLOAD_LIMIT = ${process.env.UPLOAD_LIMIT ? `${process.env.UPLOAD_LIMIT}` : undefined};
85+
window.process.env.TRANSLATIONS_ENABLED = ${process.env.TRANSLATIONS_ENABLED === 'true' ? true : false};
86+
window.process.env.PREVIEW_URL = '${process.env.PREVIEW_URL}';
87+
window.process.env.GA_MEASUREMENT_ID='${process.env.GA_MEASUREMENT_ID}';
88+
</script>
89+
</head>
90+
<body>
91+
<div id="root" class="root-app">
92+
</div>
93+
<script src='${process.env.NODE_ENV === 'production' ? `${assetsManifest['/app.js']}` : '/app.js'}'></script>
94+
</body>
95+
</html>
96+
`;
97+
}
98+
5199
/**
52100
* Send a 404 page if `exists` is false.
53101
* @param {import('express').e.Request} req

0 commit comments

Comments
 (0)