function insert()

in dotcom-rendering/src/components/Liveness.importable.tsx [31:78]


function insert(
	html: string,
	enhanceTweetsSwitch: boolean,
	topOfBlog: Element,
) {
	// Create
	// ------
	const template = document.createElement('template');
	template.innerHTML =
		html + `<!-- inserted at ${new Date().toDateString()} -->`;
	const fragment = template.content;

	// Remove duplicates
	// -----------------
	for (const article of fragment.querySelectorAll('article')) {
		if (document.getElementById(article.id)) article.remove();
	}

	// Hydrate
	// -------
	const islands = fragment.querySelectorAll<HTMLElement>('gu-island');
	void Promise.all(
		[...islands].map((island) => initHydration(island, getEmotionCache())),
	);

	// Insert
	// ------
	// Shouldn't we sanitise this html?
	// We're being sent this string by our own backend, not reader input, so we
	// trust that the tags and attributes it contains are safe and intentional
	const blogBody = document.querySelector<HTMLElement>('#liveblog-body');
	if (!blogBody) return;
	// nextSibling? See: https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore#example_2
	blogBody.insertBefore(fragment, topOfBlog.nextSibling);

	// Enhance
	// -----------
	if (enhanceTweetsSwitch) {
		const pendingBlocks =
			blogBody.querySelectorAll<HTMLElement>('.pending.block');
		// https://developer.twitter.com/en/docs/twitter-for-websites/javascript-api/guides/scripting-loading-and-initialization
		if (typeof twttr !== 'undefined') {
			twttr.ready((twitter) => {
				twitter.widgets.load(Array.from(pendingBlocks));
			});
		}
	}
}