Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2025-06-13 20:53:59 +00:00
Code Issues Projects Releases Wiki Activity

Apply suggestions from @manuhabitela

Browse Source
This commit is contained in:
fflorent 2024-10-17 15:39:21 +02:00 committed by Florent F
parent 89fc76a0a9
commit f619a490bb
5 changed files with 15 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/server/lib/sendAppPage.ts
View File

@ -174,7 +174,7 @@ export function makeSendAppPage({ server, staticDir, tag, testLogin, baseDomain
).join('\n'); ).join('\n');
const content = fileContent const content = fileContent
.replace("<!-- INSERT WARNING -->", warning) .replace("<!-- INSERT WARNING -->", warning)
.replace("<!-- INSERT TITLE -->", getPageTitle(config) ?? translate(req, 'Loading...')) .replace("<!-- INSERT TITLE -->", getDocName(config) ?? translate(req, 'Loading...'))
.replace("<!-- INSERT META -->", getPageMetadataHtmlSnippet(req, config, staticBaseUrl)) .replace("<!-- INSERT META -->", getPageMetadataHtmlSnippet(req, config, staticBaseUrl))
.replace("<!-- INSERT TITLE SUFFIX -->", getPageTitleSuffix(server.getGristConfig())) .replace("<!-- INSERT TITLE SUFFIX -->", getPageTitleSuffix(server.getGristConfig()))
.replace("<!-- INSERT BASE -->", `<base href="${staticBaseUrl}">` + tagManagerSnippet) .replace("<!-- INSERT BASE -->", `<base href="${staticBaseUrl}">` + tagManagerSnippet)
@ -264,14 +264,12 @@ function configuredPageTitleSuffix() {
} }
/** /**
* Returns a page title suitable for inserting into an HTML title element. * Returns the doc name.
*
* Currently returns the document name if the page being requested is for a document, or
* a placeholder, "Loading...", that's updated in the client once the page has loaded.
* *
* Note: The string returned is escaped and safe to insert into HTML. * Note: The string returned is escaped and safe to insert into HTML.
*
*/ */
function getPageTitle(config: GristLoadConfig): string|null { function getDocName(config: GristLoadConfig): string|null {
const maybeDoc = getDocFromConfig(config); const maybeDoc = getDocFromConfig(config);
return maybeDoc && handlebars.Utils.escapeExpression(maybeDoc.name); return maybeDoc && handlebars.Utils.escapeExpression(maybeDoc.name);
@ -291,13 +289,13 @@ function getPageMetadataHtmlSnippet(req: express.Request, config: GristLoadConfi
metadataElements.push('<meta property="og:type" content="website">'); metadataElements.push('<meta property="og:type" content="website">');
metadataElements.push('<meta name="twitter:card" name="summary_large_image">'); metadataElements.push('<meta name="twitter:card" name="summary_large_image">');
const description = maybeDoc?.options?.description ?? translate(req, 'gristMetaDescription'); const description = maybeDoc?.options?.description ?? translate(req, 'og-description');
const escapedDescription = handlebars.Utils.escapeExpression(description); const escapedDescription = handlebars.Utils.escapeExpression(description);
metadataElements.push(`<meta name="description" content="${escapedDescription}">`); metadataElements.push(`<meta name="description" content="${escapedDescription}">`);
metadataElements.push(`<meta property="og:description" content="${escapedDescription}">`); metadataElements.push(`<meta property="og:description" content="${escapedDescription}">`);
metadataElements.push(`<meta name="twitter:description" content="${escapedDescription}">`); metadataElements.push(`<meta name="twitter:description" content="${escapedDescription}">`);
const icon = maybeDoc?.options?.icon ?? new URL('icons/grist.png', staticBaseUrl).href; const icon = maybeDoc?.options?.icon ?? new URL('img/opengraph-preview-image.png', staticBaseUrl).href;
const escapedIcon = handlebars.Utils.escapeExpression(icon); const escapedIcon = handlebars.Utils.escapeExpression(icon);
const iconSize = '100'; const iconSize = '100';
metadataElements.push(`<meta name="thumbnail" content="${escapedIcon}">`); metadataElements.push(`<meta name="thumbnail" content="${escapedIcon}">`);
@ -306,7 +304,8 @@ function getPageMetadataHtmlSnippet(req: express.Request, config: GristLoadConfi
metadataElements.push(`<meta property="og:image:height" content="${iconSize}">`); metadataElements.push(`<meta property="og:image:height" content="${iconSize}">`);
metadataElements.push(`<meta name="twitter:image" content="${escapedIcon}">`); metadataElements.push(`<meta name="twitter:image" content="${escapedIcon}">`);
const title = (getPageTitle(config) ?? translate(req, 'Welcome')) + getPageTitleSuffix(config); const maybeDocTitle = getDocName(config);
const title = (maybeDocTitle ? maybeDocTitle + getPageTitleSuffix(config) : translate(req, 'og-title'));
// NB: We don't generate the content of the <title> tag here. // NB: We don't generate the content of the <title> tag here.
metadataElements.push(`<meta property="og:title" content="${title}">`); metadataElements.push(`<meta property="og:title" content="${title}">`);
metadataElements.push(`<meta name="twitter:title" content="${title}">`); metadataElements.push(`<meta name="twitter:title" content="${title}">`);

BIN
static/img/opengraph-preview-image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

4
static/locales/en.server.json
View File

@ -1,8 +1,8 @@
{ {
"sendAppPage": { "sendAppPage": {
"Loading...": "Loading...", "Loading...": "Loading...",
"gristMetaDescription": "Grist is the evolution of spreadsheets.", "og-description": "A modern, open source spreadsheet that goes beyond the grid",
"Welcome": "Welcome" "og-title": "Grist, the evolution of spreadsheet"
}, },
"oidc": { "oidc": {
"emailNotVerifiedError": "Please verify your email with the identity provider, and log in again." "emailNotVerifiedError": "Please verify your email with the identity provider, and log in again."

6
test/nbrowser/HomeIntro.ts
View File

@ -131,16 +131,16 @@ describe('HomeIntro', function() {
} }
async function testMetaTags() { async function testMetaTags() {
const expectedTitle = 'Welcome - Grist'; const expectedTitle = 'Grist, the evolution of spreadsheet';
assert.equal(await driver.find('meta[name="twitter:title"]').getAttribute('content'), expectedTitle); assert.equal(await driver.find('meta[name="twitter:title"]').getAttribute('content'), expectedTitle);
assert.equal(await driver.find('meta[property="og:title"]').getAttribute('content'), expectedTitle); assert.equal(await driver.find('meta[property="og:title"]').getAttribute('content'), expectedTitle);
const expectedDescription = 'Grist is the evolution of spreadsheets.'; const expectedDescription = 'A modern, open source spreadsheet that goes beyond the grid';
assert.equal(await driver.find('meta[name="description"]').getAttribute('content'), expectedDescription); assert.equal(await driver.find('meta[name="description"]').getAttribute('content'), expectedDescription);
assert.equal(await driver.find('meta[name="twitter:description"]').getAttribute('content'), expectedDescription); assert.equal(await driver.find('meta[name="twitter:description"]').getAttribute('content'), expectedDescription);
assert.equal(await driver.find('meta[property="og:description"]').getAttribute('content'), expectedDescription); assert.equal(await driver.find('meta[property="og:description"]').getAttribute('content'), expectedDescription);
const gristIconFileName = 'grist.png'; const gristIconFileName = 'opengraph-preview-image.png';
assert.include(await driver.find('meta[name="thumbnail"]').getAttribute('content'), gristIconFileName); assert.include(await driver.find('meta[name="thumbnail"]').getAttribute('content'), gristIconFileName);
assert.include(await driver.find('meta[name="twitter:image"]').getAttribute('content'), gristIconFileName); assert.include(await driver.find('meta[name="twitter:image"]').getAttribute('content'), gristIconFileName);
assert.include(await driver.find('meta[property="og:image"]').getAttribute('content'), gristIconFileName); assert.include(await driver.find('meta[property="og:image"]').getAttribute('content'), gristIconFileName);

4
test/nbrowser/NewDocument.ntest.js
View File

@ -24,12 +24,12 @@ describe('NewDocument.ntest', function() {
assert.equal(await driver.find('meta[name="twitter:title"]').getAttribute('content'), expectedTitle); assert.equal(await driver.find('meta[name="twitter:title"]').getAttribute('content'), expectedTitle);
assert.equal(await driver.find('meta[property="og:title"]').getAttribute('content'), expectedTitle); assert.equal(await driver.find('meta[property="og:title"]').getAttribute('content'), expectedTitle);
const expectedDescription = 'Grist is the evolution of spreadsheets.'; const expectedDescription = 'A modern, open source spreadsheet that goes beyond the grid';
assert.equal(await driver.find('meta[name="description"]').getAttribute('content'), expectedDescription); assert.equal(await driver.find('meta[name="description"]').getAttribute('content'), expectedDescription);
assert.equal(await driver.find('meta[name="twitter:description"]').getAttribute('content'), expectedDescription); assert.equal(await driver.find('meta[name="twitter:description"]').getAttribute('content'), expectedDescription);
assert.equal(await driver.find('meta[property="og:description"]').getAttribute('content'), expectedDescription); assert.equal(await driver.find('meta[property="og:description"]').getAttribute('content'), expectedDescription);
const gristIconFileName = 'grist.png'; const gristIconFileName = 'opengraph-preview-image.png';
assert.include(await driver.find('meta[name="thumbnail"]').getAttribute('content'), gristIconFileName); assert.include(await driver.find('meta[name="thumbnail"]').getAttribute('content'), gristIconFileName);
assert.include(await driver.find('meta[name="twitter:image"]').getAttribute('content'), gristIconFileName); assert.include(await driver.find('meta[name="twitter:image"]').getAttribute('content'), gristIconFileName);
assert.include(await driver.find('meta[property="og:image"]').getAttribute('content'), gristIconFileName); assert.include(await driver.find('meta[property="og:image"]').getAttribute('content'), gristIconFileName);