@janga/norna 0.7.22 → 0.7.24

package/scripts/lib/presentation.mjs

@@ -12,7 +12,7 @@ import { presentationPaletteNames } from './presentation-palette-metadata.mjs';
 import { resolveThemeConfig } from './theme-presets.mjs';
 
 export { presentationPaletteNames };
-export const colorModeNames = ['system', 'light', 'dark'];
+export const appearanceNames = ['system', 'light', 'dark'];
 const sectionBackgroundPatterns = Object.freeze({
 	uniform: ['base'],
 	alternating: ['base', 'soft'],
@@ -44,7 +44,6 @@ const createPaletteMode = ({ appearance, page, surfaces, frame, css }) => {
 
 const presentationPalettes = Object.freeze({
 	'near-monochrome': Object.freeze({
-		defaultMode: 'dark',
 		modes: Object.freeze({
 			light: createPaletteMode({
 				appearance: 'light',
@@ -61,7 +60,6 @@ const presentationPalettes = Object.freeze({
 					soft: '#d8d8d3',
 					accent: '#4b4b46',
 					border: 'rgb(23 23 23 / 16%)',
-					navBackground: 'rgb(247 247 245 / 92%)',
 					navSeparator: 'rgb(23 23 23 / 24%)',
 				},
 			}),
@@ -80,14 +78,12 @@ const presentationPalettes = Object.freeze({
 					soft: '#302f2c',
 					accent: '#d8d2c8',
 					border: 'rgb(255 255 255 / 14%)',
-					navBackground: 'rgb(0 0 0 / 90%)',
 					navSeparator: 'rgb(255 255 255 / 28%)',
 				},
 			}),
 		}),
 	}),
 	'arctic-blue': Object.freeze({
-		defaultMode: 'light',
 		modes: Object.freeze({
 			light: createPaletteMode({
 				appearance: 'light',
@@ -104,7 +100,6 @@ const presentationPalettes = Object.freeze({
 					soft: '#d5dfe7',
 					accent: '#2a5877',
 					border: 'rgb(32 41 50 / 16%)',
-					navBackground: 'rgb(243 246 248 / 92%)',
 					navSeparator: 'rgb(32 41 50 / 24%)',
 				},
 			}),
@@ -123,14 +118,12 @@ const presentationPalettes = Object.freeze({
 					soft: '#354655',
 					accent: '#9bc5de',
 					border: 'rgb(237 243 247 / 16%)',
-					navBackground: 'rgb(23 32 42 / 92%)',
 					navSeparator: 'rgb(237 243 247 / 28%)',
 				},
 			}),
 		}),
 	}),
 	'mineral-teal': Object.freeze({
-		defaultMode: 'light',
 		modes: Object.freeze({
 			light: createPaletteMode({
 				appearance: 'light',
@@ -147,7 +140,6 @@ const presentationPalettes = Object.freeze({
 					soft: '#cfdfd9',
 					accent: '#155f5a',
 					border: 'rgb(32 54 49 / 17%)',
-					navBackground: 'rgb(238 244 241 / 92%)',
 					navSeparator: 'rgb(32 54 49 / 24%)',
 				},
 			}),
@@ -166,14 +158,12 @@ const presentationPalettes = Object.freeze({
 					soft: '#2c554f',
 					accent: '#8bd5ca',
 					border: 'rgb(237 245 241 / 16%)',
-					navBackground: 'rgb(16 45 44 / 92%)',
 					navSeparator: 'rgb(237 245 241 / 28%)',
 				},
 			}),
 		}),
 	}),
 	'soft-lavender': Object.freeze({
-		defaultMode: 'light',
 		modes: Object.freeze({
 			light: createPaletteMode({
 				appearance: 'light',
@@ -190,7 +180,6 @@ const presentationPalettes = Object.freeze({
 					soft: '#ded5e7',
 					accent: '#604678',
 					border: 'rgb(46 39 54 / 16%)',
-					navBackground: 'rgb(247 243 250 / 92%)',
 					navSeparator: 'rgb(46 39 54 / 24%)',
 				},
 			}),
@@ -209,14 +198,12 @@ const presentationPalettes = Object.freeze({
 					soft: '#4b3d57',
 					accent: '#d4b7e3',
 					border: 'rgb(244 237 248 / 16%)',
-					navBackground: 'rgb(37 31 46 / 92%)',
 					navSeparator: 'rgb(244 237 248 / 28%)',
 				},
 			}),
 		}),
 	}),
 	'warm-paper': Object.freeze({
-		defaultMode: 'light',
 		modes: Object.freeze({
 			light: createPaletteMode({
 				appearance: 'light',
@@ -233,7 +220,6 @@ const presentationPalettes = Object.freeze({
 					soft: '#d8d0c4',
 					accent: '#5f513c',
 					border: 'rgb(39 37 34 / 18%)',
-					navBackground: 'rgb(248 245 238 / 92%)',
 					navSeparator: 'rgb(39 37 34 / 24%)',
 				},
 			}),
@@ -252,14 +238,12 @@ const presentationPalettes = Object.freeze({
 					soft: '#3b342b',
 					accent: '#d5bea0',
 					border: 'rgb(243 237 226 / 16%)',
-					navBackground: 'rgb(27 25 22 / 92%)',
 					navSeparator: 'rgb(243 237 226 / 26%)',
 				},
 			}),
 		}),
 	}),
 	'retro-earth': Object.freeze({
-		defaultMode: 'light',
 		modes: Object.freeze({
 			light: createPaletteMode({
 				appearance: 'light',
@@ -276,7 +260,6 @@ const presentationPalettes = Object.freeze({
 					soft: '#deca9c',
 					accent: '#5e4514',
 					border: 'rgb(52 41 28 / 18%)',
-					navBackground: 'rgb(247 239 217 / 92%)',
 					navSeparator: 'rgb(52 41 28 / 25%)',
 				},
 			}),
@@ -295,14 +278,12 @@ const presentationPalettes = Object.freeze({
 					soft: '#54422a',
 					accent: '#e5c36c',
 					border: 'rgb(245 232 201 / 16%)',
-					navBackground: 'rgb(40 33 23 / 92%)',
 					navSeparator: 'rgb(245 232 201 / 28%)',
 				},
 			}),
 		}),
 	}),
 	'clay-rose': Object.freeze({
-		defaultMode: 'light',
 		modes: Object.freeze({
 			light: createPaletteMode({
 				appearance: 'light',
@@ -319,7 +300,6 @@ const presentationPalettes = Object.freeze({
 					soft: '#e2cfca',
 					accent: '#71313d',
 					border: 'rgb(60 41 41 / 17%)',
-					navBackground: 'rgb(247 239 237 / 92%)',
 					navSeparator: 'rgb(60 41 41 / 25%)',
 				},
 			}),
@@ -338,14 +318,12 @@ const presentationPalettes = Object.freeze({
 					soft: '#58404a',
 					accent: '#e6a7b0',
 					border: 'rgb(247 235 235 / 16%)',
-					navBackground: 'rgb(45 30 34 / 92%)',
 					navSeparator: 'rgb(247 235 235 / 28%)',
 				},
 			}),
 		}),
 	}),
 	'forest-moss': Object.freeze({
-		defaultMode: 'light',
 		modes: Object.freeze({
 			light: createPaletteMode({
 				appearance: 'light',
@@ -362,7 +340,6 @@ const presentationPalettes = Object.freeze({
 					soft: '#d5ddc5',
 					accent: '#324e25',
 					border: 'rgb(38 50 37 / 17%)',
-					navBackground: 'rgb(241 243 232 / 92%)',
 					navSeparator: 'rgb(38 50 37 / 24%)',
 				},
 			}),
@@ -381,14 +358,12 @@ const presentationPalettes = Object.freeze({
 					soft: '#394c37',
 					accent: '#add493',
 					border: 'rgb(238 242 230 / 16%)',
-					navBackground: 'rgb(23 34 24 / 92%)',
 					navSeparator: 'rgb(238 242 230 / 28%)',
 				},
 			}),
 		}),
 	}),
 	'vivid-night': Object.freeze({
-		defaultMode: 'dark',
 		modes: Object.freeze({
 			light: createPaletteMode({
 				appearance: 'light',
@@ -405,7 +380,6 @@ const presentationPalettes = Object.freeze({
 					soft: '#d5daec',
 					accent: '#3b568f',
 					border: 'rgb(37 36 58 / 16%)',
-					navBackground: 'rgb(242 244 251 / 92%)',
 					navSeparator: 'rgb(37 36 58 / 24%)',
 				},
 			}),
@@ -424,7 +398,6 @@ const presentationPalettes = Object.freeze({
 					soft: '#403a58',
 					accent: '#9fe4e8',
 					border: 'rgb(244 241 255 / 16%)',
-					navBackground: 'rgb(29 27 45 / 92%)',
 					navSeparator: 'rgb(244 241 255 / 28%)',
 				},
 			}),
@@ -493,11 +466,11 @@ export const resolveThemePresentation = (theme, sourceLabel = 'theme.yaml') => {
 	const normalizedTheme = resolveThemeConfig(theme, sourceLabel);
 	const paletteName = normalizedTheme.palette ?? 'near-monochrome';
 	const palette = getPresentationPalette(paletteName);
-	const colorMode = normalizedTheme.colorMode ?? {};
+	const appearance = normalizedTheme.appearance ?? {};
 	const readerControls = normalizedTheme.readerControls ?? {};
-	const defaultColorMode = colorMode.default ?? palette.defaultMode;
-	if (!colorModeNames.includes(defaultColorMode)) {
-		throw new Error(`colorMode.default must be one of ${colorModeNames.join(', ')} in ${sourceLabel}.`);
+	const defaultAppearance = appearance.default ?? 'system';
+	if (!appearanceNames.includes(defaultAppearance)) {
+		throw new Error(`appearance.default must be one of ${appearanceNames.join(', ')} in ${sourceLabel}.`);
 	}
 	const typography = resolveTypographyConfig(normalizedTheme.typography ?? defaultTypography, sourceLabel);
 	const textWidth = normalizedTheme.layout?.textWidth;
@@ -508,19 +481,19 @@ export const resolveThemePresentation = (theme, sourceLabel = 'theme.yaml') => {
 
 	return {
 		paletteName,
-		palette: palette.modes[defaultColorMode === 'dark' ? 'dark' : 'light'],
+		palette: palette.modes[defaultAppearance === 'dark' ? 'dark' : 'light'],
 		paletteModes: palette.modes,
-		colorMode: {
-			default: defaultColorMode,
+		appearance: {
+			default: defaultAppearance,
 		},
 		readerPreferences: {
 			controls: {
-				appearance: readerControls.colorMode === true,
+				appearance: readerControls.appearance === true,
 				readingWidth: true,
 				focusReading: readerControls.focusReading === true,
 			},
 			defaults: {
-				appearance: defaultColorMode,
+				appearance: defaultAppearance,
 				readingWidth: textWidth === 'narrow' ? 'narrow' : textWidth === 'wide' ? 'wide' : 'standard',
 				focusReading: 'off',
 			},

package/scripts/lib/project-config.mjs

@@ -2,12 +2,18 @@ import { readFile } from 'node:fs/promises';
 import {
 	validateConfigYamlStructure,
 } from './site-content.mjs';
+import {
+	defaultImageMaxAvailableHeightPercent,
+	defaultImagePresentation,
+	imagePresentationNames,
+} from './image-presentation.mjs';
 import { navigationModeNames } from './navigation-model.mjs';
 import {
 	siteConfigLabel,
 	siteConfigPath,
 	siteThemeLabel,
 } from './site-paths.mjs';
+import { normalizeEditLinkBaseUrl } from './edit-source-link.mjs';
 import { readThemeConfig } from './theme-config.mjs';
 import { resolveThemeConfig } from './theme-presets.mjs';
 import { parseYamlConfig } from './yaml-config.mjs';
@@ -194,12 +200,24 @@ const readSiteUrl = (config) => {
 const localeLabels = Object.freeze({
 	en: Object.freeze({
 		breadcrumb: 'Breadcrumb',
-		colorMode: 'Color mode',
-		colorModeDark: 'Dark',
-		colorModeLight: 'Light',
-		colorModeSystem: 'System',
+		appearance: 'Appearance',
+		appearanceDark: 'Dark',
+		appearanceLight: 'Light',
+		appearanceSystem: 'System',
+		codeCopied: 'Copied',
+		codeCopyFailed: 'Could not copy code',
+		copyCode: 'Copy code',
+		calloutCaution: 'Caution',
+		calloutDanger: 'Danger',
+		calloutImportant: 'Important',
+		calloutNote: 'Note',
+		calloutTip: 'Tip',
+		calloutWarning: 'Warning',
+		editSource: 'Edit this page',
 		displaySettings: 'Display',
 		focusReading: 'Focus reading',
+		footnoteBackReference: 'Back to reference {reference}',
+		footnotes: 'Footnotes',
 		readingWidth: 'Reading width',
 		readingWidthNarrow: 'Narrow',
 		readingWidthStandard: 'Standard',
@@ -209,24 +227,60 @@ const localeLabels = Object.freeze({
 		built: 'Built',
 		images: 'Images',
 		imageCarousel: 'image carousel',
+		navigationCollapsedAll: 'All navigation items collapsed.',
+		navigationCollapseAll: 'Collapse all',
+		navigationControls: 'Navigation tree controls',
 		navigationChildren: 'Child pages',
+		navigationExpandedAll: 'All navigation items expanded.',
+		navigationExpandAll: 'Expand all',
+		navigationFilter: 'Filter pages and groups',
+		navigationFilterEmpty: 'No matching pages or groups. The current page remains available.',
+		navigationFilterMatches: 'Matching navigation items: {count}',
+		navigationLocatedCurrent: 'Current page located.',
+		navigationLocateCurrent: 'Locate current page',
 		navigationMenu: 'Menu',
 		nextImage: 'Next image',
+		nextPage: 'Next page',
 		note: 'Note',
+		notFound: 'Page not found',
+		notFoundText: 'The requested page does not exist or may have moved.',
+		pageMoved: 'Page moved',
+		pageMovedText: 'This address now identifies',
 		pageNavigation: 'Page contents',
+		pageSequence: 'Page sequence',
+		pageSections: 'Sections',
 		previousImage: 'Previous image',
+		previousPage: 'Previous page',
+		returnHome: 'Go to the homepage',
+		search: 'Search',
+		searchDescription: 'Search the published content on this site.',
+		searchLoading: 'Loading search…',
+		searchNoScript: 'Search requires JavaScript. Use the page navigation when JavaScript is unavailable.',
+		searchUnavailable: 'Search is unavailable. During local work, run norna build:local to create or refresh the search index.',
 		siteBanners: 'Site notices',
 		siteNavigation: 'Pages',
 		skipToContent: 'Skip to content',
 	}),
 	sv: Object.freeze({
 		breadcrumb: 'Brödsmulor',
-		colorMode: 'Färgläge',
-		colorModeDark: 'Mörkt',
-		colorModeLight: 'Ljust',
-		colorModeSystem: 'System',
+		appearance: 'Utseende',
+		appearanceDark: 'Mörkt',
+		appearanceLight: 'Ljust',
+		appearanceSystem: 'System',
+		codeCopied: 'Kopierat',
+		codeCopyFailed: 'Kunde inte kopiera koden',
+		copyCode: 'Kopiera kod',
+		calloutCaution: 'Var försiktig',
+		calloutDanger: 'Fara',
+		calloutImportant: 'Viktigt',
+		calloutNote: 'Notera',
+		calloutTip: 'Tips',
+		calloutWarning: 'Varning',
+		editSource: 'Redigera den här sidan',
 		displaySettings: 'Visning',
 		focusReading: 'Fokuserad läsning',
+		footnoteBackReference: 'Tillbaka till referens {reference}',
+		footnotes: 'Fotnoter',
 		readingWidth: 'Textbredd',
 		readingWidthNarrow: 'Smal',
 		readingWidthStandard: 'Standard',
@@ -236,12 +290,36 @@ const localeLabels = Object.freeze({
 		built: 'Byggd',
 		images: 'Bilder',
 		imageCarousel: 'bildkarusell',
+		navigationCollapsedAll: 'Alla navigationsposter har fällts ihop.',
+		navigationCollapseAll: 'Fäll ihop alla',
+		navigationControls: 'Kontroller för navigationsträdet',
 		navigationChildren: 'Undersidor',
+		navigationExpandedAll: 'Alla navigationsposter har fällts ut.',
+		navigationExpandAll: 'Fäll ut alla',
+		navigationFilter: 'Filtrera sidor och grupper',
+		navigationFilterEmpty: 'Inga sidor eller grupper matchar. Den aktuella sidan är fortfarande tillgänglig.',
+		navigationFilterMatches: 'Matchande navigationsposter: {count}',
+		navigationLocatedCurrent: 'Den aktuella sidan har hittats.',
+		navigationLocateCurrent: 'Hitta aktuell sida',
 		navigationMenu: 'Meny',
 		nextImage: 'Nästa bild',
+		nextPage: 'Nästa sida',
 		note: 'Not',
+		notFound: 'Sidan hittades inte',
+		notFoundText: 'Den begärda sidan finns inte eller kan ha flyttats.',
+		pageMoved: 'Sidan har flyttats',
+		pageMovedText: 'Den här adressen identifierar nu',
 		pageNavigation: 'Sidinnehåll',
+		pageSequence: 'Sidföljd',
+		pageSections: 'Avsnitt',
 		previousImage: 'Föregående bild',
+		previousPage: 'Föregående sida',
+		returnHome: 'Gå till startsidan',
+		search: 'Sök',
+		searchDescription: 'Sök i det publicerade innehållet på webbplatsen.',
+		searchLoading: 'Laddar sökning…',
+		searchNoScript: 'Sökning kräver JavaScript. Använd sidnavigeringen när JavaScript inte är tillgängligt.',
+		searchUnavailable: 'Sökningen är inte tillgänglig. Kör norna build:local under lokalt arbete för att skapa eller uppdatera sökindexet.',
 		siteBanners: 'Meddelanden',
 		siteNavigation: 'Sidor',
 		skipToContent: 'Hoppa till innehållet',
@@ -365,6 +443,21 @@ export const resolveThemeVisualConfig = (theme, sourceLabel = siteThemeLabel) =>
 	const resolvedContentSpacing = readEnum(rawLayoutConfig, 'contentSpacing', 'layout', contentSpacingNames, 'normal', sourceLabel);
 	const resolvedLayoutSpacingDefaults = contentSpacingProfiles[resolvedContentSpacing];
 	const corners = readEnum(rawThemeConfig, 'corners', 'theme', ['square', 'rounded'], 'rounded', sourceLabel);
+	const imagePresentation = readEnum(
+		rawImagesConfig,
+		'presentation',
+		'images',
+		imagePresentationNames,
+		defaultImagePresentation,
+		sourceLabel,
+	);
+	if (imagePresentation === 'prose-aligned' && rawImagesConfig.maxAvailableHeightPercent !== undefined) {
+		throw new Error([
+			`images.maxAvailableHeightPercent cannot be used with images.presentation "prose-aligned" in ${sourceLabel}.`,
+			'Prose-aligned images follow available horizontal space instead of a viewport-height limit.',
+			'Remove images.maxAvailableHeightPercent or set images.presentation to "centered-fit".',
+		].join('\n'));
+	}
 
 	return Object.freeze({
 		layout: Object.freeze({
@@ -392,10 +485,18 @@ export const resolveThemeVisualConfig = (theme, sourceLabel = siteThemeLabel) =>
 			}),
 		}),
 		images: Object.freeze({
-			maxAvailableHeightPercent: readResponsivePercent(rawImagesConfig, 'maxAvailableHeightPercent', 'images', Object.freeze({
-				desktop: 74,
-				mobile: 68,
-			}), sourceLabel),
+			presentation: imagePresentation,
+			...(imagePresentation === 'centered-fit'
+				? {
+					maxAvailableHeightPercent: readResponsivePercent(
+						rawImagesConfig,
+						'maxAvailableHeightPercent',
+						'images',
+						defaultImageMaxAvailableHeightPercent,
+						sourceLabel,
+					),
+				}
+				: {}),
 			maxAvailableWidthPercent: readResponsivePercent(rawImagesConfig, 'maxAvailableWidthPercent', 'images', Object.freeze({
 				desktop: 100,
 				mobile: 100,
@@ -416,6 +517,13 @@ export const resolveThemeVisualConfig = (theme, sourceLabel = siteThemeLabel) =>
 
 export const resolveNavigationConfig = (config, sourceLabel = siteConfigLabel) => {
 	const rawNavigation = assertObject(config.navigation ?? {}, 'navigation', sourceLabel);
+	if (Object.hasOwn(rawNavigation, 'sectionTracking')) {
+		throw new Error([
+			`navigation.sectionTracking is no longer supported in ${sourceLabel}.`,
+			'Section tracking is automatic on pages with a contents rail.',
+			'Remove navigation.sectionTracking.',
+		].join('\n'));
+	}
 
 	return Object.freeze({
 		mode: readEnum(
@@ -426,22 +534,41 @@ export const resolveNavigationConfig = (config, sourceLabel = siteConfigLabel) =
 			'automatic',
 			sourceLabel,
 		),
-		sectionTracking: readBoolean(
-			rawNavigation,
-			'sectionTracking',
-			'navigation',
-			false,
-			sourceLabel,
-		),
 	});
 };
 
+export const resolveEditLinkConfig = (config, sourceLabel = siteConfigLabel) => {
+	if (config.editLink === undefined) return null;
+
+	const rawEditLink = assertObject(config.editLink, 'editLink', sourceLabel);
+	if (!Object.hasOwn(rawEditLink, 'baseUrl')) {
+		throw new Error(`editLink.baseUrl is required when editLink is configured in ${sourceLabel}.`);
+	}
+	const unknownKeys = Object.keys(rawEditLink).filter((key) => key !== 'baseUrl');
+	if (unknownKeys.length > 0) {
+		throw new Error(`editLink.${unknownKeys[0]} is not a valid setting in ${sourceLabel}.`);
+	}
+
+	try {
+		return Object.freeze({
+			baseUrl: normalizeEditLinkBaseUrl(rawEditLink.baseUrl, 'editLink.baseUrl'),
+		});
+	} catch (error) {
+		const message = error instanceof Error ? error.message : String(error);
+		throw new Error(`${message.replace(/\.$/, '')} in ${sourceLabel}.`);
+	}
+};
+
 export const projectConfig = Object.freeze({
 	site: Object.freeze({
 		basePath: siteUrl.pathname,
 		url: siteUrl.href,
 	}),
 	...resolveThemeVisualConfig(rawTheme, siteThemeLabel),
+	editLink: resolveEditLinkConfig(rawConfig, siteConfigLabel),
+	search: Object.freeze({
+		enabled: readBoolean(rawConfig, 'search', 'config YAML', false),
+	}),
 	navigation: Object.freeze({
 		...resolveNavigationConfig(rawConfig, siteConfigLabel),
 		scrollBehavior: readEnum(

package/scripts/lib/public-asset-conventions.mjs

@@ -18,10 +18,22 @@ export const browserIconAssetFilenames = Object.freeze(
 	browserIconAssetDefinitions.map(({ filename }) => filename),
 );
 
+export const socialImageAssetDefinitions = Object.freeze([
+	Object.freeze({ filename: 'social-image.png', type: 'image/png' }),
+	Object.freeze({ filename: 'social-image.jpg', type: 'image/jpeg' }),
+	Object.freeze({ filename: 'social-image.jpeg', type: 'image/jpeg' }),
+]);
+
+export const socialImageAssetFilenames = Object.freeze(
+	socialImageAssetDefinitions.map(({ filename }) => filename),
+);
+
 const logoExtensions = new Set(['.svg', '.png', '.jpg', '.jpeg']);
 const faviconExtensions = new Set(['.svg', '.png', '.ico']);
+const socialImageExtensions = new Set(['.png', '.jpg', '.jpeg']);
 const exactLogoNames = new Set(logoAssetFilenames);
 const exactBrowserIconNames = new Set(browserIconAssetFilenames);
+const exactSocialImageNames = new Set(socialImageAssetFilenames);
 
 export const isLogoAssetFilename = (filename) => exactLogoNames.has(filename);
 
@@ -60,6 +72,13 @@ const getSuspiciousAsset = (filename) => {
 		};
 	}
 
+	if (exactSocialImageNames.has(lowerFilename) && filename !== lowerFilename) {
+		return {
+			code: 'public-asset-case',
+			message: `Norna does not recognize "${filename}" as the social sharing image on case-sensitive file systems. Rename it to "${lowerFilename}".`,
+		};
+	}
+
 	if (parsed.name === 'logo' && !logoExtensions.has(parsed.ext)) {
 		return {
 			code: 'unsupported-logo-file',
@@ -74,6 +93,13 @@ const getSuspiciousAsset = (filename) => {
 		};
 	}
 
+	if (parsed.name === 'social-image' && !socialImageExtensions.has(parsed.ext)) {
+		return {
+			code: 'unsupported-social-image-file',
+			message: `Norna does not recognize "${filename}" as the social sharing image. Use exactly one of ${socialImageAssetFilenames.join(', ')}.`,
+		};
+	}
+
 	if (/^favicon[-_.]/.test(lowerFilename) && !exactBrowserIconNames.has(lowerFilename)) {
 		return {
 			code: 'unrecognized-favicon-file',
@@ -95,6 +121,13 @@ const getSuspiciousAsset = (filename) => {
 		};
 	}
 
+	if (socialImageExtensions.has(parsed.ext) && editDistance(parsed.name, 'social-image') <= 2) {
+		return {
+			code: 'possible-social-image-typo',
+			message: `"${filename}" looks like a misspelled social sharing image filename. Norna recognizes ${socialImageAssetFilenames.join(', ')}.`,
+		};
+	}
+
 	return null;
 };
 
@@ -102,11 +135,12 @@ export const inspectPublicAssetFilenames = (filenames) => {
 	const files = [...filenames].sort((left, right) => left.localeCompare(right, 'en'));
 	const logos = files.filter(isLogoAssetFilename);
 	const browserIcons = files.filter((filename) => exactBrowserIconNames.has(filename));
+	const socialImages = files.filter((filename) => exactSocialImageNames.has(filename));
 	const suspicious = files.flatMap((filename) => {
-		if (isLogoAssetFilename(filename) || exactBrowserIconNames.has(filename)) return [];
+		if (isLogoAssetFilename(filename) || exactBrowserIconNames.has(filename) || exactSocialImageNames.has(filename)) return [];
 		const issue = getSuspiciousAsset(filename);
 		return issue ? [{ filename, ...issue }] : [];
 	});
 
-	return { browserIcons, files, logos, suspicious };
+	return { browserIcons, files, logos, socialImages, suspicious };
 };