MWPW-162839: Move title-append to loadArea

libs/utils/utils.js

@@ -358,6 +358,16 @@ export function appendHtmlToCanonicalUrl() {
   canonEl.setAttribute('href', `${canonEl.href}.html`);
 }
 
+export function appendSuffixToTitles() {
+  const appendage = getMetadata('title-append');
+  if (!appendage) return;
+  document.title = `${document.title} ${appendage}`;
+  const ogTitleEl = document.querySelector('meta[property="og:title"]');
+  if (ogTitleEl) ogTitleEl.setAttribute('content', document.title);
+  const twitterTitleEl = document.querySelector('meta[name="twitter:title"]');
+  if (twitterTitleEl) twitterTitleEl.setAttribute('content', document.title);
+}
+
 export function appendHtmlToLink(link) {
   const { useDotHtml } = getConfig();
   if (!useDotHtml) return;
@@ -1278,11 +1288,6 @@ function decorateDocumentExtras() {
 
 async function documentPostSectionLoading(config) {
   decorateFooterPromo();
-
-  const appendage = getMetadata('title-append');
-  if (appendage) {
-    import('../features/title-append/title-append.js').then((module) => module.default(appendage));
-  }
   if (getMetadata('seotech-structured-data') === 'on' || getMetadata('seotech-video-url')) {
     import('../features/seotech/seotech.js').then((module) => module.default(
       { locationUrl: window.location.href, getMetadata, createTag, getConfig },
@@ -1375,6 +1380,7 @@ export async function loadArea(area = document) {
   if (isDoc) {
     await checkForPageMods();
     appendHtmlToCanonicalUrl();
+    appendSuffixToTitles();
   }
   const config = getConfig();
 

test/utils/mocks/head-title-append.html

@@ -1,3 +1,5 @@
-<meta name="title-append" content="NOODLE">
+<meta name="title-append" content="NOODLE" />
+<meta property="og:title" content="Document Title" />
+<meta name="twitter:title" content="Document Title" />
 <title>Document Title</title>
-<link rel="icon" href="data:,">
+<link rel="icon" href="data:," />

test/utils/utils.test.js

@@ -719,18 +719,21 @@ describe('Utils', () => {
     });
   });
 
+  // MARK: title-append
   describe('title-append', async () => {
     beforeEach(async () => {
       document.head.innerHTML = await readFile({ path: './mocks/head-title-append.html' });
     });
     it('should append to title using string from metadata', async () => {
       const expected = 'Document Title NOODLE';
       await utils.loadArea();
-      await waitFor(() => document.title === expected, 2000);
       expect(document.title).to.equal(expected);
+      expect(document.querySelector('meta[property="og:title"]')?.getAttribute('content'), expected);
+      expect(document.querySelector('meta[name="twitter:title"]')?.getAttribute('content'), expected);
     });
   });
 
+  // MARK: seotech
   describe('seotech', async () => {
     beforeEach(async () => {
       window.lana = { log: (msg) => console.error(msg) };