@janga/norna 0.7.1 → 0.7.3

package/scripts/test-cli-discovery.mjs

@@ -0,0 +1,124 @@
+import assert from 'node:assert/strict';
+import { spawnSync } from 'node:child_process';
+import { mkdir, mkdtemp, realpath, rm, writeFile } from 'node:fs/promises';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const repoRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const launcherPath = path.join(repoRoot, 'bin', 'norna.mjs');
+const tempRoot = await mkdtemp(path.join(tmpdir(), 'norna cli discovery-'));
+
+const runLauncher = (args, cwd) => spawnSync(process.execPath, [launcherPath, ...args], {
+	cwd,
+	encoding: 'utf8',
+});
+
+const writeJson = (filePath, value) => writeFile(filePath, `${JSON.stringify(value, null, 2)}\n`);
+
+const createFakeNornaInstall = async (projectRoot, version = '1.7.0') => {
+	const packageRoot = path.join(projectRoot, 'node_modules', '@janga', 'norna');
+	const binDir = path.join(packageRoot, 'bin');
+	await mkdir(binDir, { recursive: true });
+	await writeJson(path.join(packageRoot, 'package.json'), {
+		name: '@janga/norna',
+		version,
+		type: 'module',
+		bin: {
+			norna: 'bin/norna.mjs',
+		},
+	});
+	await writeFile(path.join(binDir, 'norna.mjs'), `#!/usr/bin/env node
+const payload = {
+  marker: 'fake-local-norna',
+  version: ${JSON.stringify(version)},
+  argv: process.argv.slice(2),
+  cwd: process.cwd()
+};
+console.log(JSON.stringify(payload));
+if (process.argv.includes('--exit-7')) process.exit(7);
+`);
+};
+
+const createProject = async (directoryName, {
+	declareDependency = true,
+	installNorna = true,
+	version = '1.7.0',
+} = {}) => {
+	const projectRoot = path.join(tempRoot, directoryName);
+	await mkdir(projectRoot, { recursive: true });
+	await writeJson(path.join(projectRoot, 'package.json'), {
+		name: directoryName.toLowerCase().replaceAll(/\s+/g, '-'),
+		private: true,
+		type: 'module',
+		...(declareDependency
+			? { dependencies: { '@janga/norna': version } }
+			: {}),
+	});
+
+	if (installNorna) {
+		await createFakeNornaInstall(projectRoot, version);
+	}
+
+	return projectRoot;
+};
+
+try {
+	const noProjectResult = runLauncher(['--help'], tempRoot);
+	assert.equal(noProjectResult.status, 0, noProjectResult.stderr || noProjectResult.stdout);
+	assert.match(noProjectResult.stdout, /Usage: norna <command>/);
+	assert.doesNotMatch(noProjectResult.stdout, /fake-local-norna/);
+
+	const undeclaredProject = await createProject('undeclared project', {
+		declareDependency: false,
+		installNorna: true,
+	});
+	const undeclaredResult = runLauncher(['--help'], undeclaredProject);
+	assert.equal(undeclaredResult.status, 0, undeclaredResult.stderr || undeclaredResult.stdout);
+	assert.match(undeclaredResult.stdout, /Usage: norna <command>/);
+	assert.doesNotMatch(undeclaredResult.stdout, /fake-local-norna/);
+
+	const localProject = await createProject('local project', { version: '1.7.0' });
+	const localResult = runLauncher(['build', '--flag', 'value with spaces'], localProject);
+	assert.equal(localResult.status, 0, localResult.stderr || localResult.stdout);
+	const localPayload = JSON.parse(localResult.stdout.trim());
+	assert.equal(localPayload.marker, 'fake-local-norna');
+	assert.equal(localPayload.version, '1.7.0');
+	assert.deepEqual(localPayload.argv, ['build', '--flag', 'value with spaces']);
+	assert.equal(await realpath(localPayload.cwd), await realpath(localProject));
+
+	const subdirectory = path.join(localProject, 'site', 'images', 'work');
+	await mkdir(subdirectory, { recursive: true });
+	const subdirectoryResult = runLauncher(['doctor'], subdirectory);
+	assert.equal(subdirectoryResult.status, 0, subdirectoryResult.stderr || subdirectoryResult.stdout);
+	const subdirectoryPayload = JSON.parse(subdirectoryResult.stdout.trim());
+	assert.equal(subdirectoryPayload.marker, 'fake-local-norna');
+	assert.deepEqual(subdirectoryPayload.argv, ['doctor']);
+	assert.equal(await realpath(subdirectoryPayload.cwd), await realpath(subdirectory));
+
+	const spacedProject = await createProject('project with spaces', { version: '1.9.0' });
+	const spacedResult = runLauncher(['engine:version'], spacedProject);
+	assert.equal(spacedResult.status, 0, spacedResult.stderr || spacedResult.stdout);
+	const spacedPayload = JSON.parse(spacedResult.stdout.trim());
+	assert.equal(spacedPayload.version, '1.9.0');
+	assert.equal(await realpath(spacedPayload.cwd), await realpath(spacedProject));
+
+	const exitResult = runLauncher(['build', '--exit-7'], localProject);
+	assert.equal(exitResult.status, 7, exitResult.stderr || exitResult.stdout);
+	const exitPayload = JSON.parse(exitResult.stdout.trim());
+	assert.deepEqual(exitPayload.argv, ['build', '--exit-7']);
+
+	const engineRepoResult = runLauncher(['--help'], repoRoot);
+	assert.equal(engineRepoResult.status, 0, engineRepoResult.stderr || engineRepoResult.stdout);
+	assert.match(engineRepoResult.stdout, /Usage: norna <command>/);
+	assert.doesNotMatch(engineRepoResult.stdout, /fake-local-norna/);
+
+	const engineStarterResult = runLauncher(['--help'], path.join(repoRoot, 'starters', 'basic'));
+	assert.equal(engineStarterResult.status, 0, engineStarterResult.stderr || engineStarterResult.stdout);
+	assert.match(engineStarterResult.stdout, /Usage: norna <command>/);
+	assert.doesNotMatch(engineStarterResult.stdout, /fake-local-norna/);
+
+	console.log('ok - cli launcher discovers local norna installations and avoids self-delegation');
+} finally {
+	await rm(tempRoot, { force: true, recursive: true });
+}

package/scripts/test-content-check.mjs

@@ -43,9 +43,8 @@ const makePngHeader = ({ width, height }) => {
 };
 
 const defaultTheme = `---
-presentation:
-  typography:
-    preset: quiet-gallery
+typography:
+  preset: quiet-gallery
 frame:
   colors: presentation
 ---
@@ -114,7 +113,7 @@ test('content:check groups section issues, global issues, and unreferenced image
 
 		assert.equal(result.status, 1, output);
 		assert.match(output, /^Content check failed\./m);
-		assert.match(output, /Section and Gallery Issues\n\n\[min-konst\]\n  Errors:/);
+		assert.match(output, /Section And Image Issues\n\n\[min-konst\]\n  Errors:/);
 		assert.match(output, /Image "vav\.jpeg" is used here but is located in site\/images\/mitt-hem\/\./);
 		assert.match(output, /Image "missing\.jpeg" does not exist anywhere under site\/images\/\./);
 		assert.match(output, /Image "duplicate\.jpg" is referenced more than once in this section\./);

package/scripts/test-engine-commands.mjs

@@ -1,6 +1,6 @@
 import assert from 'node:assert/strict';
 import { spawnSync } from 'node:child_process';
-import { mkdir, mkdtemp, readFile, rm, writeFile } from 'node:fs/promises';
+import { mkdir, mkdtemp, readFile, realpath, rm, writeFile } from 'node:fs/promises';
 import { tmpdir } from 'node:os';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
@@ -23,6 +23,18 @@ try {
 	assert.match(versionResult.stdout, new RegExp(`Installed norna: ${packageJson.version.replaceAll('.', '\\.')}`));
 	assert.match(versionResult.stdout, /Installed Astro: /);
 
+	const directSiteRoot = path.join(tempRoot, 'current-directory-site');
+	await mkdir(directSiteRoot, { recursive: true });
+	await writeFile(path.join(directSiteRoot, 'config.mjs'), 'export default { site: { url: "https://example.com/" } };\n');
+	await writeFile(path.join(directSiteRoot, 'content.md'), '---\ntitle: Direct Site\nsections: []\n---\n');
+	const directSiteProjectRoot = await realpath(tempRoot);
+	const directSiteDoctorResult = runCli(['doctor'], {
+		cwd: directSiteRoot,
+	});
+	assert.equal(directSiteDoctorResult.status, 0, directSiteDoctorResult.stderr || directSiteDoctorResult.stdout);
+	assert.ok(directSiteDoctorResult.stdout.includes(`Site project root: ${directSiteProjectRoot}`));
+	assert.match(directSiteDoctorResult.stdout, /Site directory: current-directory-site/);
+
 	const initializedSiteRoot = path.join(tempRoot, 'initialized-site');
 	const initResult = runCli(['init', initializedSiteRoot]);
 	assert.equal(initResult.status, 0, initResult.stderr || initResult.stdout);
@@ -35,16 +47,18 @@ try {
 	assert.equal(initializedPackageJson.scripts['engine:update'], undefined);
 	assert.equal(initializedPackageJson.scripts['engine:version'], undefined);
 
-	const presetsResult = runCli(['typography:presets']);
+	const presetsResult = runCli(['typography', 'presets']);
 	assert.equal(presetsResult.status, 0, presetsResult.stderr || presetsResult.stdout);
 	assert.match(presetsResult.stdout, /quiet-gallery:/);
 	assert.match(presetsResult.stdout, /text-forward:/);
 
-	const showResult = runCli(['--site-dir', path.join(initializedSiteRoot, 'site'), 'typography:show']);
+	const showResult = runCli(['--site-dir', path.join(initializedSiteRoot, 'site'), 'typography', 'show']);
 	assert.equal(showResult.status, 0, showResult.stderr || showResult.stdout);
 	assert.match(showResult.stdout, /theme:/);
-	assert.match(showResult.stdout, /page:/);
-	assert.match(showResult.stdout, /preset: quiet-gallery/);
+	assert.match(showResult.stdout, /pages:/);
+	assert.match(showResult.stdout, /\s+\/:/);
+	assert.match(showResult.stdout, /value: quiet-gallery/);
+	assert.match(showResult.stdout, /inherited: true/);
 	assert.match(showResult.stdout, /intro:/);
 
 	const initAgainResult = runCli(['init', initializedSiteRoot]);
@@ -55,7 +69,7 @@ try {
 	const customPureInitResult = runCli(['init', customPureSiteRoot, '--type', 'pure', '--site-dir', 'presentation']);
 	assert.equal(customPureInitResult.status, 0, customPureInitResult.stderr || customPureInitResult.stdout);
 	const customPurePackageJson = JSON.parse(await readFile(path.join(customPureSiteRoot, 'package.json'), 'utf8'));
-	assert.equal(customPurePackageJson.scripts.dev, 'npm run norna:dev');
+	assert.equal(customPurePackageJson.scripts.dev, 'npm run norna:dev --');
 	assert.equal(customPurePackageJson.scripts.build, 'npm run norna:build');
 	assert.equal(customPurePackageJson.scripts['norna:dev'], 'norna --site-dir presentation dev:local');
 	assert.equal(customPurePackageJson.scripts['norna:build'], 'norna --site-dir presentation build');

package/scripts/test-navigation.mjs

@@ -6,6 +6,8 @@ import { promisify } from 'node:util';
 const execFileAsync = promisify(execFile);
 
 const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const cliPath = path.join(root, 'bin', 'norna.mjs');
+const dogGallerySiteDir = path.join(root, 'examples', 'dog-gallery', 'site');
 const url = 'http://localhost:4321/';
 const probeUrls = [url, 'http://127.0.0.1:4321/', 'http://[::1]:4321/'];
 const npmBin = process.platform === 'win32' ? 'npm.cmd' : 'npm';
@@ -53,9 +55,10 @@ const waitForServer = async () => {
 	throw new Error(`Timed out waiting for ${url}`);
 };
 
-const runCapture = async (command, args) => execFileAsync(command, args, {
+const runCapture = async (command, args, options = {}) => execFileAsync(command, args, {
 	cwd: root,
 	maxBuffer: 1024 * 1024 * 10,
+	...options,
 });
 
 const runInherit = (command, args, options = {}) => new Promise((resolve, reject) => {
@@ -80,11 +83,10 @@ const runInherit = (command, args, options = {}) => new Promise((resolve, reject
 });
 
 const ensureServer = async () => {
-	if (await isReachable()) {
-		return false;
-	}
+	await stopServer();
 
-	await runInherit(npmBin, ['run', 'dev:local'], {
+	await runInherit(process.execPath, [cliPath, 'dev:local'], {
+		cwd: dogGallerySiteDir,
 		env: {
 			...process.env,
 			WALDE_NO_OPEN: '1',
@@ -96,7 +98,9 @@ const ensureServer = async () => {
 };
 
 const stopServer = async () => {
-	await runCapture(npmBin, ['run', 'dev:stop']).catch(() => {});
+	await runCapture(process.execPath, [cliPath, 'dev:stop'], {
+		cwd: dogGallerySiteDir,
+	}).catch(() => {});
 };
 
 let startedServer = false;

package/scripts/test-package-check.mjs

@@ -176,9 +176,23 @@ try {
 	packageJson.name = 'norna-package-check-site';
 	packageJson.dependencies['@janga/norna'] = tarballPath;
 	await writeFile(packageJsonPath, `${JSON.stringify(packageJson, null, 2)}\n`);
+	const packageCheckConfigPath = path.join(siteProjectRoot, 'site', 'config.mjs');
+	const packageCheckConfig = await readFile(packageCheckConfigPath, 'utf8');
+	await writeFile(
+		packageCheckConfigPath,
+		packageCheckConfig
+			.replace("url: 'https://example.com/'", "url: 'https://example.com/site/'")
+			.replace("basePath: '/'", "basePath: '/site/'"),
+	);
+	const packageCheckThemePath = path.join(siteProjectRoot, 'site', 'theme.md');
+	const packageCheckTheme = await readFile(packageCheckThemePath, 'utf8');
+	await writeFile(
+		packageCheckThemePath,
+		packageCheckTheme.replace('brand: Example Site', 'brand: Package Check Brand'),
+	);
 	await mkdir(path.join(siteProjectRoot, 'site', 'routes', 'about'), { recursive: true });
 	await writeFile(path.join(siteProjectRoot, 'site', 'routes', 'about', 'route-content.md'), `---
-title: About the gallery
+title: About the site
 description: Route used by package checks.
 navigation:
   label: About
@@ -221,7 +235,7 @@ This route verifies that packaged norna sites can build route pages.
 	);
 	await assertFileIncludes(
 		path.join(siteProjectRoot, 'dist', 'index.html'),
-		'--section-heading-font-size-desktop: clamp(1.65rem, 4.6vw, 5.65rem)',
+		'--section-heading-font-size-desktop: clamp(1.6rem, 1.22rem + 1.45vw, 2.75rem)',
 	);
 	await assertFileIncludes(
 		path.join(siteProjectRoot, 'dist', 'index.html'),
@@ -233,11 +247,15 @@ This route verifies that packaged norna sites can build route pages.
 	);
 	await assertFileIncludes(
 		path.join(siteProjectRoot, 'dist', 'about', 'index.html'),
-		'<link rel="canonical" href="https://example.com/about/">',
+		'<link rel="canonical" href="https://example.com/site/about/">',
 	);
 	await assertFileIncludes(
 		path.join(siteProjectRoot, 'dist', 'about', 'index.html'),
-		'href="/about/" aria-current="page"',
+		'href="/site/about/" aria-current="page"',
+	);
+	await assertFileIncludes(
+		path.join(siteProjectRoot, 'dist', 'index.html'),
+		'<a class="site-brand" href="/site/">Package Check Brand</a>',
 	);
 	await assertFileIncludes(
 		path.join(siteProjectRoot, 'dist', 'index.html'),
@@ -288,7 +306,7 @@ This route verifies that packaged norna sites can build route pages.
 	await assertFileExists(path.join(siteProjectRoot, 'dist', 'favicon.ico'));
 	await assertFileIncludes(
 		path.join(siteProjectRoot, 'dist', 'index.html'),
-		'<link rel="icon" sizes="any" href="/favicon.ico">',
+		'<link rel="icon" sizes="any" href="/site/favicon.ico">',
 	);
 	await assertFileExcludes(
 		path.join(siteProjectRoot, 'dist', 'index.html'),
@@ -298,12 +316,12 @@ This route verifies that packaged norna sites can build route pages.
 	const siteContent = await readFile(siteContentPath, 'utf8');
 	const siteThemePath = path.join(siteProjectRoot, 'site', 'theme.md');
 	const siteTheme = await readFile(siteThemePath, 'utf8');
-	await writeFile(siteThemePath, siteTheme.replace('\n    preset: quiet-gallery', '\n    preset: noisy-gallery'));
+	await writeFile(siteThemePath, siteTheme.replace('\n  preset: quiet-gallery', '\n  preset: noisy-gallery'));
 	await runExpectFailure(
 		npxBin,
 		['norna', 'build'],
 		{ cwd: siteProjectRoot, env: npmEnv },
-		'presentation.typography.preset',
+		'typography.preset',
 	);
 	await writeFile(
 		siteThemePath,
@@ -372,11 +390,9 @@ This route verifies that packaged norna sites can build route pages.
 		{ cwd: siteProjectRoot, env: npmEnv },
 		'sections.0.presentation.typography.preset',
 	);
-	const siteConfigPath = path.join(siteProjectRoot, 'site', 'config.mjs');
-	const siteConfig = await readFile(siteConfigPath, 'utf8');
 	await writeFile(
-		siteConfigPath,
-		siteConfig.replace(
+		siteThemePath,
+		siteTheme.replace(
 			'fontFamily: "Arial, \'Helvetica Neue\', Helvetica, sans-serif"',
 			'fontFamily: "Arial; color: red"',
 		),
@@ -387,6 +403,19 @@ This route verifies that packaged norna sites can build route pages.
 		{ cwd: siteProjectRoot, env: npmEnv },
 		'typography.fontFamily',
 	);
+	await writeFile(siteThemePath, siteTheme);
+	const siteConfigPath = path.join(siteProjectRoot, 'site', 'config.mjs');
+	const siteConfig = await readFile(siteConfigPath, 'utf8');
+	await writeFile(
+		siteConfigPath,
+		siteConfig.replace("basePath: '/site/'", "basePath: 'site'"),
+	);
+	await runExpectFailure(
+		npxBin,
+		['norna', 'config:check'],
+		{ cwd: siteProjectRoot, env: npmEnv },
+		'site.basePath',
+	);
 
 	console.log('Package check passed.');
 } finally {

package/scripts/test-temporary-visibility.mjs

@@ -49,9 +49,8 @@ try {
 };
 `);
 	await writeFile(path.join(siteDir, 'theme.md'), `---
-presentation:
-  typography:
-    preset: quiet-gallery
+typography:
+  preset: quiet-gallery
 frame:
   colors: presentation
 ---

package/src/components/SiteNavigation.astro

@@ -1,6 +1,7 @@
 ---
 import type { CollectionEntry } from 'astro:content';
 import projectConfig from '../../scripts/lib/project-config.mjs';
+import { withBasePath } from '../lib/basePath';
 import type { SitePage } from '../lib/sitePages';
 
 type SiteSection = CollectionEntry<'site'>['data']['sections'][number];
@@ -11,13 +12,14 @@ type FrameColors = {
 };
 
 interface Props {
+	brandLabel: string;
 	currentPage: SitePage;
 	pages: SitePage[];
 	sections: ResolvedSection[];
 	frameColors: FrameColors;
 }
 
-const { currentPage, pages, sections, frameColors } = Astro.props;
+const { brandLabel, currentPage, pages, sections, frameColors } = Astro.props;
 const smoothScrollConfig = projectConfig.navigation.smoothScroll;
 const navigationStyle = [
 	`--site-top-background-color: ${frameColors.backgroundColor}`,
@@ -26,8 +28,8 @@ const navigationStyle = [
 const showSiteNavigation = pages.length > 1;
 const showPageNavigation = sections.length > 1;
 const homePage = pages.find((page) => page.isHome) ?? currentPage;
-const brandLabel = homePage.title;
 const isCurrentPage = (page: SitePage) => page.pathname === currentPage.pathname;
+const pageHref = (page: SitePage) => withBasePath(projectConfig.site.basePath, page.pathname);
 ---
 
 <a class="skip-link" href="#main-content">{projectConfig.locale.labels.skipToContent}</a>
@@ -39,13 +41,13 @@ const isCurrentPage = (page: SitePage) => page.pathname === currentPage.pathname
 >
 	{showSiteNavigation && (
 		<div class="site-nav-row">
-			<a class="site-brand" href={homePage.pathname}>{brandLabel}</a>
+			<a class="site-brand" href={pageHref(homePage)}>{brandLabel}</a>
 
 			<nav class="site-nav" aria-label={projectConfig.locale.labels.siteNavigation}>
 				<ul>
 					{pages.map((page) => (
 						<li>
-							<a href={page.pathname} aria-current={isCurrentPage(page) ? 'page' : undefined}>
+							<a href={pageHref(page)} aria-current={isCurrentPage(page) ? 'page' : undefined}>
 								{page.navigation.label}
 							</a>
 						</li>
@@ -63,7 +65,7 @@ const isCurrentPage = (page: SitePage) => page.pathname === currentPage.pathname
 						<ul>
 							{pages.map((page) => (
 								<li>
-									<a href={page.pathname} aria-current={isCurrentPage(page) ? 'page' : undefined}>
+									<a href={pageHref(page)} aria-current={isCurrentPage(page) ? 'page' : undefined}>
 										{page.navigation.label}
 									</a>
 								</li>

package/src/components/SitePage.astro

@@ -24,11 +24,12 @@ const allEntries = await getCollection('site');
 const sitePages = getSitePages(allEntries);
 const currentPage = getSitePage(entry);
 const navigationPages = getNavigationPages(sitePages);
+const homePage = sitePages.find((page) => page.isHome) ?? currentPage;
 const themeData = theme?.data ?? {};
-const pagePresentation = resolvePagePresentation(themeData.presentation, entry.data.presentation);
+const brandLabel = themeData.navigation?.brand ?? homePage.title;
+const pagePresentation = resolvePagePresentation(themeData, entry.data.presentation);
 const frameColors = resolveFrameColors({
-	themePresentation: themeData.presentation,
-	themeFrame: themeData.frame,
+	theme: themeData,
 	pagePresentation,
 	pageFrame: entry.data.frame,
 });
@@ -50,6 +51,7 @@ if (visibleSections.length === 0) {
 	pathname={currentPage.pathname}
 >
 	<SiteNavigation
+		brandLabel={brandLabel}
 		currentPage={currentPage}
 		pages={navigationPages}
 		sections={visibleSections}

package/src/components/SiteSection.astro

@@ -32,58 +32,61 @@ interface Props {
 
 const { section, pagePresentation, headingLevel, priorityGalleryImage = false } = Astro.props;
 const HeadingTag = headingLevel === 1 ? 'h1' : 'h2';
+// Sections are authored with Markdown ## headings even when the first one renders as HTML h1.
+const sectionHeadingVisualLevel = 'h2';
+type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4';
 const headingSizeValues: Record<TextSize, ResponsiveValue<string>> = {
 	small: {
-		desktop: 'clamp(1.15rem, 2.2vw, 2rem)',
-		mobile: 'clamp(1.15rem, 5vw, 1.8rem)',
+		desktop: 'clamp(1.1rem, 1.02rem + 0.35vw, 1.35rem)',
+		mobile: 'clamp(1.12rem, 1rem + 0.85vw, 1.42rem)',
 	},
 	medium: {
-		desktop: 'clamp(1.4rem, 3.1vw, 3.2rem)',
-		mobile: 'clamp(1.4rem, 3.1vw, 3.2rem)',
+		desktop: 'clamp(1.35rem, 1.1rem + 0.9vw, 2rem)',
+		mobile: 'clamp(1.3rem, 1.05rem + 1.35vw, 1.75rem)',
 	},
 	large: {
-		desktop: 'clamp(1.65rem, 4.6vw, 5.65rem)',
-		mobile: 'clamp(1.9rem, 8vw, 3.2rem)',
+		desktop: 'clamp(1.6rem, 1.22rem + 1.45vw, 2.75rem)',
+		mobile: 'clamp(1.5rem, 1.12rem + 2vw, 2.25rem)',
 	},
 	xlarge: {
-		desktop: 'clamp(2rem, 5.6vw, 7rem)',
-		mobile: 'clamp(2.15rem, 9.4vw, 3.8rem)',
+		desktop: 'clamp(2rem, 1.35rem + 2.4vw, 3.75rem)',
+		mobile: 'clamp(1.8rem, 1.25rem + 3vw, 2.85rem)',
 	},
 };
 const bodySizeValues: Record<TextSize, ResponsiveValue<string>> = {
 	small: {
-		desktop: 'clamp(0.9rem, 0.86rem + 0.16vw, 1rem)',
-		mobile: 'clamp(0.9rem, 0.86rem + 0.16vw, 1rem)',
+		desktop: 'clamp(0.86rem, 0.84rem + 0.08vw, 0.92rem)',
+		mobile: 'clamp(0.86rem, 0.84rem + 0.08vw, 0.92rem)',
 	},
 	medium: {
-		desktop: 'clamp(1rem, 0.96rem + 0.18vw, 1.125rem)',
-		mobile: 'clamp(1rem, 0.96rem + 0.18vw, 1.125rem)',
+		desktop: 'clamp(0.96rem, 0.94rem + 0.08vw, 1rem)',
+		mobile: 'clamp(0.96rem, 0.94rem + 0.08vw, 1rem)',
 	},
 	large: {
-		desktop: 'clamp(1.1rem, 1.04rem + 0.24vw, 1.25rem)',
-		mobile: 'clamp(1.1rem, 1.04rem + 0.24vw, 1.25rem)',
+		desktop: 'clamp(1.05rem, 1rem + 0.16vw, 1.12rem)',
+		mobile: 'clamp(1.05rem, 1rem + 0.16vw, 1.12rem)',
 	},
 	xlarge: {
-		desktop: 'clamp(1.18rem, 1.08rem + 0.36vw, 1.42rem)',
-		mobile: 'clamp(1.18rem, 1.08rem + 0.36vw, 1.42rem)',
+		desktop: 'clamp(1.14rem, 1.06rem + 0.26vw, 1.25rem)',
+		mobile: 'clamp(1.14rem, 1.06rem + 0.26vw, 1.25rem)',
 	},
 };
 const captionSizeValues: Record<TextSize, ResponsiveValue<string>> = {
 	small: {
-		desktop: 'clamp(0.82rem, 0.78rem + 0.12vw, 0.92rem)',
-		mobile: 'clamp(0.82rem, 0.78rem + 0.12vw, 0.92rem)',
+		desktop: 'clamp(0.78rem, 0.76rem + 0.08vw, 0.84rem)',
+		mobile: 'clamp(0.78rem, 0.76rem + 0.08vw, 0.84rem)',
 	},
 	medium: {
-		desktop: 'clamp(0.9rem, 0.86rem + 0.16vw, 1rem)',
-		mobile: 'clamp(0.9rem, 0.86rem + 0.16vw, 1rem)',
+		desktop: 'clamp(0.86rem, 0.84rem + 0.08vw, 0.92rem)',
+		mobile: 'clamp(0.86rem, 0.84rem + 0.08vw, 0.92rem)',
 	},
 	large: {
-		desktop: 'clamp(1rem, 0.94rem + 0.2vw, 1.12rem)',
-		mobile: 'clamp(1rem, 0.94rem + 0.2vw, 1.12rem)',
+		desktop: 'clamp(0.96rem, 0.92rem + 0.12vw, 1rem)',
+		mobile: 'clamp(0.96rem, 0.92rem + 0.12vw, 1rem)',
 	},
 	xlarge: {
-		desktop: 'clamp(1.08rem, 1rem + 0.28vw, 1.25rem)',
-		mobile: 'clamp(1.08rem, 1rem + 0.28vw, 1.25rem)',
+		desktop: 'clamp(1.04rem, 0.98rem + 0.18vw, 1.12rem)',
+		mobile: 'clamp(1.04rem, 0.98rem + 0.18vw, 1.12rem)',
 	},
 };
 const sectionOverride = section.presentation as SectionPresentationOverride | undefined;
@@ -97,10 +100,26 @@ const textColor = sectionOverride?.textColor
 	?? pagePresentation.textColor;
 const resolvedTypography = resolveTypographyOverride(pagePresentation.typography, sectionOverride?.typography);
 const typography = resolvedTypography.values;
-const headingAlign = typography.heading.align as ResponsiveValue<TextAlign>;
+const heading = typography.headings[sectionHeadingVisualLevel] as {
+	align: ResponsiveValue<TextAlign>;
+	size: TextSize;
+	lineHeight: number;
+	spacing: string;
+};
+const markdownHeadingLevels = ['h3', 'h4'] as const;
+const markdownHeadings = Object.fromEntries(markdownHeadingLevels.map((level) => [
+	level,
+	typography.headings[level] as {
+		align: ResponsiveValue<TextAlign>;
+		size: TextSize;
+		lineHeight: number;
+		spacing: string;
+	},
+]));
+const headingAlign = heading.align;
 const bodyAlign = typography.body.align as ResponsiveValue<TextAlign>;
 const captionAlign = typography.caption.align as ResponsiveValue<TextAlign>;
-const headingFontSize = getSizeValue(headingSizeValues, typography.heading.size as TextSize);
+const headingFontSize = getSizeValue(headingSizeValues, heading.size);
 const bodyFontSize = getSizeValue(bodySizeValues, typography.body.size as TextSize);
 const captionFontSize = getSizeValue(captionSizeValues, typography.caption.size as TextSize);
 const justifyByAlign: Record<TextAlign, string> = {
@@ -118,6 +137,19 @@ const getAlignedTextWidth = (
 const headingWidth = getAlignedTextWidth(headingAlign, '760px');
 const bodyWidth = getAlignedTextWidth(bodyAlign, 'var(--text-width)');
 const hasGallery = section.gallery.length > 0;
+const markdownHeadingStyle = (level: 'h3' | 'h4') => {
+	const headingConfig = markdownHeadings[level];
+	const fontSize = getSizeValue(headingSizeValues, headingConfig.size);
+
+	return [
+		`--section-markdown-${level}-align-desktop: ${headingConfig.align.desktop}`,
+		`--section-markdown-${level}-align-mobile: ${headingConfig.align.mobile}`,
+		`--section-markdown-${level}-font-size-desktop: ${fontSize.desktop}`,
+		`--section-markdown-${level}-font-size-mobile: ${fontSize.mobile}`,
+		`--section-markdown-${level}-line-height: ${headingConfig.lineHeight}`,
+		`--section-markdown-${level}-spacing: ${headingConfig.spacing}`,
+	];
+};
 const sectionStyle = [
 	`--section-background-color: ${backgroundColor}`,
 	`--section-text-color: ${textColor}`,
@@ -125,10 +157,12 @@ const sectionStyle = [
 	`--section-heading-align-mobile: ${headingAlign.mobile}`,
 	`--section-heading-font-size-desktop: ${headingFontSize.desktop}`,
 	`--section-heading-font-size-mobile: ${headingFontSize.mobile}`,
-	`--section-heading-line-height: ${typography.heading.lineHeight}`,
-	`--section-heading-spacing: ${typography.heading.spacing}`,
+	`--section-heading-line-height: ${heading.lineHeight}`,
+	`--section-heading-spacing: ${heading.spacing}`,
 	`--section-heading-width-desktop: ${headingWidth.desktop}`,
 	`--section-heading-width-mobile: ${headingWidth.mobile}`,
+	...markdownHeadingStyle('h3'),
+	...markdownHeadingStyle('h4'),
 	`--section-body-align-desktop: ${bodyAlign.desktop}`,
 	`--section-body-align-mobile: ${bodyAlign.mobile}`,
 	`--section-body-font-size-desktop: ${bodyFontSize.desktop}`,
@@ -150,7 +184,7 @@ const sectionStyle = [
 
 <section
 	id={section.id}
-	class:list={['site-section', { 'site-section-primary': headingLevel === 1 }]}
+	class="site-section"
 	data-section-title={section.title}
 	style={sectionStyle}
 >