feat(integration): add image variants section and standardize code snippets

web/visual/check.ts

@@ -32,6 +32,24 @@ const VISUAL_REFERENCE =
 const officeBoard = 'RenewCMS Screens Back-office.dc.html'
 
 const extraSources: Record<string, Source[]> = {
+	integration: [
+		{
+			board: officeBoard,
+			group: 'Integration: images',
+			states: [
+				'I1 · Many variants',
+				'I2 · One variant',
+				'I3 · No variants, admin',
+				'I4 · No variants, not an admin',
+				'I5 · Variant removed',
+				'I6 · Loading',
+				'I7 · Error loading',
+				'I8 · Snippet copied',
+				'I9 · URL builder copied',
+			],
+			alias: {},
+		},
+	],
 	articles: [
 		{
 			board: officeBoard,
@@ -390,12 +408,22 @@ function groupSectionRows(markdown: string, group: string) {
 	return [...section.matchAll(/^\| \d+ \| ([^|]+?) \|/gm)].map((match) => match[1]!.trim())
 }
 
+const referenceGroups: Record<string, string> = {
+	'integration-api-keys': 'API keys',
+}
+
+function referenceWithoutGroup(name: string, markdown: string) {
+	const group = referenceGroups[name]
+	const board = /Visual reference:\*{0,2}\s*`(?:source\/)?([^`]+)`/.exec(markdown)
+	return group && board ? [board[0], board[1]!, `"${group}"`] : null
+}
+
 async function readScreen(name: string): Promise<Screen> {
 	if (name === 'image-variants') {
 		return variantsScreen()
 	}
 	const markdown = await readFile(join(designRoot, 'screens', `${name}.md`), 'utf8')
-	const reference = VISUAL_REFERENCE.exec(markdown)
+	const reference = VISUAL_REFERENCE.exec(markdown) ?? referenceWithoutGroup(name, markdown)
 	if (!reference) {
 		throw new Error(`docs/design/screens/${name}.md has no visual reference line`)
 	}