Skip to content

Fix: ember-page-title errors when head format template contains <title> #3933

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

Open
FadhlanR wants to merge 2 commits into
base: main
Choose a base branch
from
+86 −75
Open

Fix: ember-page-title errors when head format template contains <title> #3933

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
429efc7
Fix: ember-page-title errors when head format template contains <title>
FadhlanR Feb 2, 2026
0ca659d
revert unnecessary change
FadhlanR Feb 2, 2026
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
3 changes: 1 addition & 2 deletions packages/base/default-templates/head.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,7 @@ export default class DefaultHeadTemplate extends GlimmerComponent<{

<template>
{{! template-lint-disable no-forbidden-elements }}
{{! TODO: restore in CS-9807 }}
{{!-- <title data-test-card-head-title>{{this.title}}</title> --}}
<title data-test-card-head-title>{{this.title}}</title>
<meta property='og:title' content={{this.title}} />
<meta name='twitter:title' content={{this.title}} />

Expand Down
96 changes: 45 additions & 51 deletions packages/host/app/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,54 +1,48 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Boxel</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

{{content-for "head"}}

<link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css" />
<link
integrity=""
rel="stylesheet"
href="{{rootURL}}assets/@cardstack/host.css"
/>
<link
href="{{rootURL}}boxel-favicon.png"
rel="shortcut icon"
type="image/x-icon"
/>
<link href="{{rootURL}}boxel-webclip.png" rel="apple-touch-icon" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&family=IBM+Plex+Serif:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap"
rel="stylesheet"
/>

{{content-for "head-footer"}}

<meta data-boxel-head-start />
<meta data-boxel-head-end />

</head>
<body>
<script type="x/boundary" id="boxel-isolated-start"></script>
<script type="x/boundary" id="boxel-isolated-end"></script>

<!-- in case embercli's hooks insn't run,

<head>
<meta charset="utf-8" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

{{content-for "head"}}

<link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css" />
<link integrity="" rel="stylesheet" href="{{rootURL}}assets/@cardstack/host.css" />
<link href="{{rootURL}}boxel-favicon.png" rel="shortcut icon" type="image/x-icon" />
<link href="{{rootURL}}boxel-webclip.png" rel="apple-touch-icon" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&family=IBM+Plex+Serif:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap"
rel="stylesheet" />

{{content-for "head-footer"}}

<meta data-boxel-head-start />
<title>Boxel</title>
<meta data-boxel-head-end />

</head>

<body>
<script type="x/boundary" id="boxel-isolated-start"></script>
<script type="x/boundary" id="boxel-isolated-end"></script>

<!-- in case embercli's hooks insn't run,
we embed the following div manually -->
<div id="ember-basic-dropdown-wormhole"></div>
{{content-for "body"}}

<script type="module">
import * as ContentTag from '{{rootURL}}assets/content-tag/standalone.js';
globalThis.ContentTagGlobal = ContentTag;
</script>
<script src="{{rootURL}}assets/vendor.js"></script>
<script src="{{rootURL}}assets/@cardstack/host.js"></script>

{{content-for "body-footer"}}
</body>
</html>
<div id="ember-basic-dropdown-wormhole"></div>
{{content-for "body"}}

<script type="module">
import * as ContentTag from '{{rootURL}}assets/content-tag/standalone.js';
globalThis.ContentTagGlobal = ContentTag;
</script>
<script src="{{rootURL}}assets/vendor.js"></script>
<script src="{{rootURL}}assets/@cardstack/host.js"></script>

{{content-for "body-footer"}}
</body>

</html>
26 changes: 20 additions & 6 deletions packages/host/app/services/host-mode-service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,18 @@ import Service, { service } from '@ember/service';
import window from 'ember-window-mock';

import config from '@cardstack/host/config/environment';

const DEFAULT_HEAD_HTML = '<title>Boxel</title>';

function headContainsTitle(html: string): boolean {
return /<title[\s>]/.test(html);
}

function ensureSingleTitle(headHTML: string): string {
return headContainsTitle(headHTML)
? headHTML
: `${DEFAULT_HEAD_HTML}\n${headHTML}`;
}
import type HostModeStateService from '@cardstack/host/services/host-mode-state-service';
import type OperatorModeStateService from '@cardstack/host/services/operator-mode-state-service';
import type RealmService from '@cardstack/host/services/realm';
Expand Down Expand Up @@ -192,7 +204,9 @@ export default class HostModeService extends Service {
return;
}

this.replaceHeadTemplate(headHTML);
this.replaceHeadTemplate(
headHTML !== null ? ensureSingleTitle(headHTML) : null,
);
}

private async fetchPrerenderedHead(
Expand Down Expand Up @@ -270,11 +284,11 @@ export default class HostModeService extends Service {
node = next;
}

if (!headHTML || headHTML.trim().length === 0) {
return;
}

let fragment = document.createRange().createContextualFragment(headHTML);
let contentToInsert =
!headHTML || headHTML.trim().length === 0 ? DEFAULT_HEAD_HTML : headHTML;
let fragment = document
.createRange()
.createContextualFragment(contentToInsert);
parent.insertBefore(fragment, end);
}

Expand Down
3 changes: 1 addition & 2 deletions packages/host/tests/acceptance/prerender-html-test.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -578,8 +578,7 @@ module('Acceptance | prerender | html', function (hooks) {
test('prerender head html', async function (assert) {
let url = `${testRealmURL}Cat/paper.json`;
await visit(renderPath(url, '/html/head/0'));
// TODO: restore in CS-9807
// assert.dom(`title`).containsText('Paper', 'head format is rendered');
assert.dom(`title`).containsText('Paper', 'head format is rendered');
assert.dom('meta[property="og:title"]').hasAttribute('content', 'Paper');
});

Expand Down
9 changes: 8 additions & 1 deletion packages/realm-server/server.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -380,7 +380,7 @@ export class RealmServer {
let headFragments: string[] = [];

if (headHTML != null) {
headFragments.push(headHTML);
headFragments.push(this.ensureSingleTitle(headHTML));
}

if (scopedCSS != null) {
Comment on lines 382 to 386
Copy link

@chatgpt-codex-connector chatgpt-codex-connector bot Feb 2, 2026

Choose a reason for hiding this comment

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

P2 Badge Preserve default title when only scoped CSS is injected

Because the default <title> was moved into the data-boxel-head-* region, calling injectHeadHTML will remove it. In this block you only add a title when headHTML != null, so when a card has no head template but does have scoped CSS, the injected head becomes just the <style> block and the page ends up with zero <title>. This is likely for cards that define scoped CSS but no head format. Consider adding the default title whenever you inject head content without a title, or explicitly include it when headHTML is null but scopedCSS is present.

Useful? React with 👍 / 👎.

Expand Down Expand Up @@ -615,6 +615,13 @@ export class RealmServer {
) as Expression;
}

private ensureSingleTitle(headHTML: string): string {
if (/<title[\s>]/.test(headHTML)) {
return headHTML;
}
return `<title>Boxel</title>\n${headHTML}`;
}

private truncateLogLines(value: string, maxLines = 3): string {
let lines = value.split(/\r?\n/);
if (lines.length <= maxLines) {
Expand Down
11 changes: 5 additions & 6 deletions packages/realm-server/tests/indexing-test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -529,13 +529,12 @@ module(basename(__filename), function () {
'pre-rendered embedded format html is correct',
);

let cleanedHead = cleanWhiteSpace(entry.headHtml!);
assert.ok(entry.headHtml, 'pre-rendered head format html is present');

// TODO: restore in CS-9807
// assert.ok(
// cleanedHead.includes('<title data-test-card-head-title>'),
// `head html includes cardTitle: ${cleanedHead}`,
// );
assert.ok(
cleanedHead.includes('<title data-test-card-head-title>'),
`head html includes cardTitle: ${cleanedHead}`,
);

assert.strictEqual(
trimCardContainer(
Expand Down
13 changes: 6 additions & 7 deletions packages/realm-server/tests/prerendering-test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1576,13 +1576,12 @@ module(basename(__filename), function () {
assert.ok(result.headHTML, 'headHTML should be present');
let cleanedHead = cleanWhiteSpace(result.headHTML!);

// TODO: restore in CS-9807
// assert.ok(
// cleanedHead.includes(
// '<title data-test-card-head-title>Untitled Cat</title>',
// ),
// `failed to find title in head html:${cleanedHead}`,
// );
assert.ok(
cleanedHead.includes(
'<title data-test-card-head-title>Untitled Cat</title>',
),
`failed to find title in head html:${cleanedHead}`,
);
assert.ok(
cleanedHead.includes('property="og:title" content="Untitled Cat"'),
`failed to find og:title in head html:${cleanedHead}`,
Expand Down