Translation Metadata addition to GLaaS

[janaki-r-bhagwath]

• HTML annotation for maxlength and keywords based on block-schema
  (its-storage-size, its-loc-note, its-loc-note-type)
• Per-language keywords metadata (langMetadata) sent to GLaaS
• Single <p> tag unwrapping for cleaner HTML structure

[aem-code-sync]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

• Re-run PSI checks
• Re-sync branch

Commits

• 50ea75b ✅ (latest)
• cc2b5f0 ✅
• 91c5bdc ✅
• 20372ea ✅
• b27c950 ✅

[chrischrischris]

No idea how rigid schemaData is, but is there any need to possibly support field_name too?

[janaki-r-bhagwath]

It is dev/super-author file. So, I don't think we need to support field_name. Originally I had fieldName in the sheet, but Chris M. felt it was too code-like :)

[chrischrischris]

A few optimizations to reduce querySelector usage. Might be overkill if the docs are small

[chrischrischris]

nit: All caps usually used for constants

[chrischrischris]

Can be optimized a bit

Suggested change

	function unwrapSoleParagraphs(doc) {
	doc.querySelectorAll('div[class]').forEach((block) => {
	const rows = block.querySelectorAll(':scope > div');
	rows.forEach((row) => {
	const columns = row.querySelectorAll(':scope > div');
	columns.forEach((div) => {
	if (div.children.length === 1 && div.children[0].tagName === 'P') {
	const pTag = div.children[0];
	div.replaceChildren(...pTag.childNodes);
	}
	});
	});
	});
	}
	function unwrapSoleParagraphs(doc) {
	doc.querySelectorAll('div[class] > div > div').forEach((div) => {
	if (div.children.length === 1 && div.children[0].tagName === 'P') {
	const pTag = div.children[0];
	div.replaceChildren(...pTag.childNodes);
	}
	});
	}

[chrischrischris]

can be optimized a bit

Suggested change

	Object.values(parsedSchema).forEach((block) => {
	const { selector, fields } = block;
	const blockElements = doc.querySelectorAll(selector);
	blockElements.forEach((blockElement, blockIndex) => {
	const blockId = Object.keys(parsedSchema).find(
	(id) => parsedSchema[id].selector === selector,
	);
	const rows = blockElement.querySelectorAll(':scope > div');
	rows.forEach((row) => {
	const labelDiv = row.querySelector(':scope > div:nth-child(1)');
	const contentDiv = row.querySelector(':scope > div:nth-child(2)');
	if (!labelDiv || !contentDiv) return;
	const field = fields.find((f) => isExactMatch(labelDiv, f.fieldName));
	if (!field) return;
	const { fieldName, fieldKey, charCount, keywordsInjection } = field;
	if (charCount) {
	contentDiv.setAttribute('its-storage-size', charCount);
	}
	const keywordsValue = String(keywordsInjection);
	const locNoteValue = `block-name=${blockId}_${blockIndex + 1}_${fieldKey}|fieldName=${fieldName}|apply-keywords=${keywordsValue}`;
	contentDiv.setAttribute('its-loc-note', locNoteValue);
	contentDiv.setAttribute('its-loc-note-type', 'description');
	});
	});
	});
	Object.entries(parsedSchema).forEach(([blockId, block]) => {
	const { selector, fields } = block;
	const blockElements = doc.querySelectorAll(selector);
	blockElements.forEach((blockElement, blockIndex) => {
	const rows = blockElement.querySelectorAll(':scope > div');
	rows.forEach((row) => {
	const labelDiv = row.children[0];
	const contentDiv = row.children[1];
	if (!labelDiv || !contentDiv || labelDiv.tagName !== 'DIV' || contentDiv.tagName !== 'DIV') {
	return;
	}
	const field = fields.find((f) => isExactMatch(labelDiv, f.fieldName));
	if (!field) return;
	const { fieldName, fieldKey, charCount, keywordsInjection } = field;
	if (charCount) {
	contentDiv.setAttribute('its-storage-size', charCount);
	}
	const keywordsValue = String(keywordsInjection);
	const locNoteValue = `block-name=${blockId}_${blockIndex + 1}_${fieldKey}|fieldName=${fieldName}|apply-keywords=${keywordsValue}`;
	contentDiv.setAttribute('its-loc-note', locNoteValue);
	contentDiv.setAttribute('its-loc-note-type', 'description');
	});
	});
	});

[chrischrischris]

nit: use Object.entries to get both vals at once

Suggested change

	Object.keys(keywordsData).forEach((key) => {
	if (key.startsWith(':')) return;
	const blockData = keywordsData[key];
	if (!blockData.data) return;
	Object.entries(keywordsData).forEach(([key, blockData]) => {
	if (key.startsWith(':') || !blockData?.data) continue;

[chrischrischris]

For the languageNameToCode and fieldNameToKey calls, if they're being called a lot for the same values you could memoize the lookups. Not sure how large keywordsData/blockData can get to

[chrischrischris]

nit early return

Suggested change

	if (hasKeywords) {
	const keywordsData = await fetchKeywordsFile(org, site, url.suppliedPath);
	if (keywordsData) {
	const langMetadata = buildLanguageMetadata(keywordsData, langs);
	if (langMetadata && Object.keys(langMetadata).length > 0) {
	url.translationMetadata = langMetadata;
	}
	}
	}
	if (!hasKeywords) return;
	const keywordsData = await fetchKeywordsFile(org, site, url.suppliedPath);
	if (!keywordsData) return;
	const langMetadata = buildLanguageMetadata(keywordsData, langs);
	if (langMetadata && Object.keys(langMetadata).length > 0) {
	url.translationMetadata = langMetadata;
	}