Skip to content

fixed Project og title added in ssr #3177

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

Merged
merged 8 commits into from
Jul 9, 2024
Merged

fixed Project og title added in ssr #3177

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
c21ad56
fixed Project og title added in ssr
Rishab87 Jun 30, 2024
cc3acdc
Merge branch 'develop' into project-og-title-fix
Rishab87 Jul 4, 2024
7435577
added renderProjectIndex function
Rishab87 Jul 4, 2024
5f89a8d
Merge branch 'develop' into project-og-title-fix
raclim Jul 9, 2024
f2190ba
add renderProjectIndex to user project route
raclim Jul 9, 2024
d5824a8
add separate getProjectForUser to controller
raclim Jul 9, 2024
d7fad4b
fix typo for project name
raclim Jul 9, 2024
c30bf4f
rename variables
raclim Jul 9, 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
17 changes: 17 additions & 0 deletions server/controllers/project.controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,6 +173,23 @@ export async function projectForUserExists(username, projectId) {
return project != null;
}

/**
* @param {string} username
* @param {string} projectId - the database id or the slug or the project
* @return {Promise<object>}
*/
export async function getProjectForUser(username, projectId) {
const user = await User.findByUsername(username);
if (!user) return { exists: false };
const project = await Project.findOne({
user: user._id,
$or: [{ _id: projectId }, { slug: projectId }]
});
return project != null
? { exists: true, userProject: project }
: { exists: false };
}

/**
* Adds URLs referenced in <script> tags to the `files` array of the project
* so that they can be downloaded along with other remote files from S3.
Expand Down
14 changes: 10 additions & 4 deletions server/routes/server.routes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { Router } from 'express';
import sendHtml, { renderIndex } from '../views/index';
import sendHtml, { renderIndex, renderProjectIndex } from '../views/index';
import { userExists } from '../controllers/user.controller';
import {
projectExists,
projectForUserExists
projectForUserExists,
getProjectForUser
} from '../controllers/project.controller';
import { collectionForUserExists } from '../controllers/collection.controller';

Expand Down Expand Up @@ -43,11 +44,16 @@ router.get(
);

router.get('/:username/sketches/:project_id', async (req, res) => {
const exists = await projectForUserExists(
const project = await getProjectForUser(
req.params.username,
req.params.project_id
);
sendHtml(req, res, exists);

if (project.exists) {
res.send(renderProjectIndex(req.params.username, project.userProject.name));
} else {
sendHtml(req, res, project.exists);
}
});

router.get('/:username/sketches', async (req, res) => {
Expand Down
48 changes: 48 additions & 0 deletions server/views/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,54 @@ export function renderIndex() {
`;
}

export function renderProjectIndex(username, projectName) {
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." />
<title>${`${projectName} by ${username} -`}p5.js Web Editor</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};
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.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>
`;
}

/**
* Send a 404 page if `exists` is false.
* @param {import('express').e.Request} req
Expand Down