scavold 0.2.0-rc.7 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "scavold",
-	"version": "0.2.0-rc.7",
+	"version": "0.2.0",
 	"type": "module",
 	"description": "VitePress theme framework — a scaffold for building custom VitePress themes with Vue at the core",
 	"keywords": [
@@ -23,7 +23,7 @@
 	"homepage": "https://scavold.io",
 	"bugs": "https://gitlab.com/cratly/scavold/-/issues",
 	"engines": {
-		"node": ">=20"
+		"node": ">=20.9.0"
 	},
 	"types": "./index.d.ts",
 	"exports": {
@@ -53,7 +53,9 @@
 		"COMPONENTS.md",
 		"FRONTMATTER.md",
 		"README.md",
-		"!**/*.test.js"
+		"SECURITY.md",
+		"!**/*.test.js",
+		"!scripts/supply-chain.js"
 	],
 	"scripts": {
 		"check-csp": "node scripts/check-csp.js",
@@ -65,7 +67,9 @@
 		"test:fixture": "bun scripts/check-fixture.js",
 		"test:unit:dev": "bun test --watch",
 		"lint": "eslint .",
-		"lint:fix": "eslint . --fix"
+		"lint:fix": "eslint . --fix",
+		"sbom": "node scripts/supply-chain.js sbom",
+		"audit:runtime": "node scripts/supply-chain.js audit"
 	},
 	"peerDependencies": {
 		"vitepress": ">=1.0.0",
@@ -74,7 +78,7 @@
 	"dependencies": {
 		"@cepharum/vue3-i18n": "^2.0.0",
 		"markdown-it-container": "^4.0.0",
-		"sharp": "^0.34.5",
+		"sharp": "^0.35.5",
 		"yaml": "^2.8.3"
 	},
 	"devDependencies": {

package/scripts/check-fixture.js

@@ -74,6 +74,22 @@ async function writeMedia() {
 	// its variants exist only if the front matter pass reached the media pipeline.
 	await sharp( gradient( 1200, 800 ) ).jpeg( { quality: 70 } ).toFile( join( media, "teaser.jpg" ) );
 
+	// Photos the way a phone camera writes them: pixels as the sensor saw them, plus an
+	// EXIF tag saying how to turn them. Red marks the edge that has to end up on top.
+	const halves = ( w, h, red ) => Buffer.from(
+		`<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}">` +
+		`<rect width="${w}" height="${h}" fill="#0000ff"/>` +
+		`<rect ${red === "bottom" ? `y="${h / 2}"` : ""} width="${red === "left" ? w / 2 : w}" ` +
+		`height="${red === "left" ? h : h / 2}" fill="#ff0000"/></svg>`
+	);
+
+	// Stored upside down, to be turned by 180°.
+	await sharp( halves( 1200, 800, "bottom" ) ).jpeg( { quality: 70 } ).withMetadata( { orientation: 3 } )
+		.toFile( join( media, "upside-down.jpg" ) );
+	// Stored lying on its side, 1600 × 1200, to be turned by 90° into a 1200px wide portrait.
+	await sharp( halves( 1600, 1200, "left" ) ).jpeg( { quality: 70 } ).withMetadata( { orientation: 6 } )
+		.toFile( join( media, "portrait.jpg" ) );
+
 	writeFileSync( join( media, "doc.pdf" ), "%PDF-1.4\n% fixture placeholder\n" );
 	writeFileSync( join( media, "clip.mp4" ), "fixture placeholder\n" );
 	// An extension VitePress does not know, so its link rules take the file for a page.
@@ -138,7 +154,7 @@ expect( manifest.adapter?.version === version, "reports this package's version a
 expect( manifest.sections?.video?.props?.src?.type === "media-file", "declares video.src as a media file" );
 expect( manifest.sections?.pagelist?.props?.sort?.values?.join() === "order,date,date-asc,title",
 	"declares the page list's ordering options" );
-expect( manifest.sections?.video?.props?.overlay?.type === "boolean", "declares video.overlay as a boolean" );
+expect( manifest.sections?.video?.props?.overlay === undefined, "offers no background mode for a video; that is a cover's" );
 expect( manifest.sections?.teaser?.props?.background?.type === "media-file",
 	"carries the site's own container with its typed props" );
 expect( manifest.sections?.teaser?.props?.variant?.values?.join() === "plain,boxed",
@@ -184,11 +200,59 @@ expect( published.some( f => /^narrow--800w-[0-9a-f]+\.jpg$/.test( f ) ),
 	"caps the widest variant at the source width" );
 expect( !published.some( f => /^narrow--(960|1280|1920)w-/.test( f ) ),
 	"does not upscale a narrow source" );
+
+const wideSrcset = ( media.match( /srcset="([^"]*wide--[^"]*\.jpg[^"]*)"/ ) ?? [ "", "" ] )[1];
+const wideWidths = wideSrcset.split( "," ).map( entry => entry.trim().split( " " )[1] );
+
+expect( wideWidths.join( " " ) === "320w 640w 960w 1280w 1920w",
+	"names each width once in the srcset of a source wider than the ladder",
+	`found ${wideWidths.join( " " ) || "nothing"}` );
 expect( media.includes( 'sizes="(min-width: 40rem) 32rem, 100vw"' ),
 	"applies the sizes value from the site configuration" );
 expect( media.includes( 'sizes="100vw"' ), "lets a single image override sizes through its title" );
 expect( media.includes( 'src="https://example.com/absent.png"' ), "leaves a remote image untouched" );
 
+/**
+ * Tells which edge of a published variant is red, the colour marking the top.
+ *
+ * @param {string} file name of the variant in the published media folder
+ * @returns {Promise<{width: number, height: number, top: string}>}
+ */
+async function orientationOf( file ) {
+	const { data, info } = await sharp( join( MEDIA_OUT, file ) ).raw().toBuffer( { resolveWithObject: true } );
+	const red = offset => data[offset] > data[offset + 2];
+	const middle = x => ( Math.floor( info.height / 2 ) * info.width + x ) * info.channels;
+	const top = red( Math.floor( info.width / 2 ) * info.channels ) ? "top"
+		: red( ( ( info.height - 1 ) * info.width + Math.floor( info.width / 2 ) ) * info.channels ) ? "bottom"
+			: red( middle( 0 ) ) ? "left" : red( middle( info.width - 1 ) ) ? "right" : "none";
+
+	return { width: info.width, height: info.height, top };
+}
+
+// Browsers honour the EXIF tag only on the file they are given. The variants carry
+// no metadata, so the turn has to be in their pixels already.
+const turned = await Promise.all( published
+	.filter( f => /^(upside-down|portrait)--/.test( f ) )
+	.map( async f => ( { f, ...await orientationOf( f ) } ) ) );
+
+for ( const name of [ "upside-down", "portrait" ] ) {
+	const found = turned.filter( v => v.f.startsWith( `${name}--` ) );
+	const wrong = found.filter( v => v.top !== "top" );
+
+	expect( found.length > 0 && wrong.length === 0, `turns the variants of ${name}.jpg the way its EXIF tag says`,
+		wrong.map( v => `${v.f} has red on the ${v.top}` ).join( ", " ) );
+}
+
+const portraits = turned.filter( v => v.f.startsWith( "portrait--" ) );
+const named = v => Number( v.f.match( /--(\d+)w-/ )[1] );
+const misshapen = portraits.filter( v => v.width !== named( v ) || v.height <= v.width );
+
+expect( portraits.some( v => named( v ) === 1200 ) && !portraits.some( v => named( v ) > 1200 ),
+	"measures a turned photo by the width it is shown at, not the width it is stored at",
+	`found ${[ ...new Set( portraits.map( named ) ) ].sort( ( a, b ) => a - b ).join( ", " )}` );
+expect( portraits.length > 0 && misshapen.length === 0, "writes a turned photo's variants upright, at the width they are named for",
+	misshapen.map( v => `${v.f} is ${v.width} × ${v.height}` ).join( ", " ) );
+
 // ── published media that is not an image ─────────────────────────────────────
 
 console.log( "\nmedia that is not an image" );
@@ -207,18 +271,67 @@ expect( built( "index.html" ).includes( 'href="/containers.html"' ), "leaves a l
 console.log( "\nvideo" );
 
 const videos = tags( media, "video" );
-const overlays = media.match( /<div class="scavold-video scavold-video--overlay"/g ) ?? [];
 
 expect( videos.every( t => /src="\/media\/clip\.mp4"/.test( t ) ), "rewrites the video source to its published URL" );
 expect( videos.some( t => /poster="\/media\/wide--\d+w-[0-9a-f]+\.jpg"/.test( t ) ),
 	"resolves a poster to a single generated variant rather than a srcset" );
-expect( overlays.length === 2, "renders background mode for both spellings of its arguments",
-	`found ${overlays.length} overlay blocks, expected 2` );
-
-const backgrounds = videos.filter( t => !t.includes( "controls" ) );
 
-expect( backgrounds.length === 2 && backgrounds.every( t => /autoplay/.test( t ) && /loop/.test( t ) && /muted/.test( t ) ),
-	"gives both spellings the same autoplay, loop and muted attributes" );
+// Autoplay implies muted, which is how it shows in the markup: the playing itself is
+// started by script, once reduced motion has been ruled out.
+const looping = videos.filter( t => /\bloop\b/.test( t ) );
+
+expect( looping.length === 2 && looping.every( t => /\bmuted\b/.test( t ) ),
+	"gives both spellings of autoplay and loop the same attributes",
+	`found ${looping.length} looping video(s), expected 2` );
+expect( videos.every( t => !/\bautoplay\b/.test( t ) ), "leaves starting an autoplay video to the script" );
+expect( videos.every( t => /\bcontrols\b/.test( t ) ), "gives every video its playback controls" );
+
+// ── cover ────────────────────────────────────────────────────────────────────
+
+console.log( "\ncover" );
+
+expect( manifest.sections?.cover?.props?.src?.type === "media-file", "declares cover.src as a media file" );
+
+const cover = built( "cover.html" );
+const covers = cover.split( /<div class="scavold-cover[ "]/ ).slice( 1 );
+const [ coverImage = "", coverVideo = "" ] = covers;
+
+expect( covers.length === 2, "renders both covers of the page", `found ${covers.length}` );
+expect( /<div class="scavold-cover[ "][^>]*\sdata-leading[\s=>]/.test( cover ) && cover.match( /\sdata-leading[\s=>]/g )?.length === 1,
+	"marks the cover opening the page, and only that one" );
+expect( cover.includes( '<main data-leading-container="cover">' ),
+	"tells the layout before the content renders that the page opens with a cover" );
+expect( !/<main[^>]*data-leading-container/.test( built( "media.html" ) ),
+	"tells it nothing on a page that opens with anything else" );
+// The variants, not just the widest one: a cover is the largest image of a page and
+// must not cost a phone the full 1920px file.
+expect( /<source type="image\/webp" srcset="[^"]*wide--320w-[0-9a-f]+\.webp 320w[^"]*wide--1920w-[0-9a-f]+\.webp 1920w"/.test( coverImage ),
+	"renders a cover image from all its variants" );
+// A 16:9 source cropped to an upright window is drawn wider than the window.
+expect( coverImage.includes( 'sizes="(min-aspect-ratio: 2400/1350) 100vw, 177.78vh"' ),
+	"tells the browser how wide a cropped cover image is drawn" );
+expect( /<img[^>]*loading="eager"/.test( coverImage ) && /<img[^>]*fetchpriority="high"/.test( coverImage ),
+	"loads a cover image at once rather than lazily" );
+expect( /<img[^>]*alt="A wide blue field"/.test( coverImage ), "uses the label as the image's alternative text" );
+expect( coverImage.includes( "--scavold-cover-focus:center top" ) || coverImage.includes( "--scavold-cover-focus: center top" ),
+	"passes the focal point on to the stylesheet" );
+expect( /class="scavold-cover__overlay"[^>]*>\s*(?:<!--\[-->)?\s*<h1[^>]*>Over the cover image/.test( coverImage ),
+	"lays the section's content on top of the image" );
+
+const coverVideoTag = tags( coverVideo, "video" )[0] ?? "";
+
+expect( coverVideo.startsWith( "scavold-cover--video" ), "tells a video cover by its file type" );
+// A mark for the theme to style, nothing more.
+expect( /^scavold-cover--light"/.test( coverImage ), "marks the tone asked for the content on top" );
+expect( !/scavold-cover--(light|dark)/.test( coverVideo ), "marks no tone where none is asked for" );
+expect( !cover.includes( "data-poster-srcset" ), "keeps the variants of a still image out of the markup" );
+expect( /src="\/media\/clip\.mp4"/.test( coverVideoTag ) && /poster="\/media\/wide--\d+w-[0-9a-f]+\.jpg"/.test( coverVideoTag ),
+	"resolves a cover video and its still image to their published URLs" );
+// Started by script once reduced motion has been ruled out, never by the markup.
+expect( /muted/.test( coverVideoTag ) && /loop/.test( coverVideoTag ) && !/autoplay/.test( coverVideoTag ),
+	"renders a cover video muted and looping, without autoplay in the markup" );
+expect( /<button type="button" class="scavold-cover__toggle" aria-label="[^"]+"/.test( coverVideo ),
+	"offers a labelled button to pause a cover video" );
 
 // ── page list ────────────────────────────────────────────────────────────────
 
@@ -239,6 +352,36 @@ expect( menu.includes( '<a href="/containers.html">' ),
 expect( crumbs.includes( '<a href="/blog/index.html"' ) && crumbs.includes( 'aria-current="page"' ),
 	"marks the page the breadcrumb ends on" );
 
+console.log( "\nnamed menus" );
+
+const footer = ( blogPage.match( /<nav aria-label="Footer"[\s\S]*?<\/nav>/ ) ?? [""] )[0];
+const footerTree = ( blogPage.match( /<nav aria-label="Footer tree"[\s\S]*?<\/nav>/ ) ?? [""] )[0];
+
+/**
+ * @param {string} nav one rendered menu
+ * @param {string} label link text of one entry
+ * @returns {number} how often the menu links that entry
+ */
+function linked( nav, label ) {
+	return nav.split( `>${label}</a>` ).length - 1;
+}
+
+expect( linked( footer, "Imprint" ) === 1 && linked( footer, "Contact" ) === 1,
+	"lists in a named menu the pages choosing it" );
+expect( linked( menu, "Imprint" ) === 0 && linked( menu, "About" ) === 0,
+	"leaves a page choosing only a named menu out of the page tree's menus" );
+expect( linked( menu, "Contact" ) === 1,
+	"keeps a page in the page tree's menus when it chooses them along with a named one" );
+expect( linked( footer, "Team" ) === 1 && footer.split( "<ul" ).length === 2,
+	"keeps a menu without sub-pages flat, listing a page chosen along with its parent beside it" );
+expect( linked( footerTree, "Team" ) === 1 &&
+	/>About<\/a><ul>(?:<!--\[-->)?<li[^>]*><a [^>]*>Team<\/a>/.test( footerTree ),
+"lists a page chosen along with its parent below that parent where the menu shows sub-pages, not twice" );
+expect( linked( footer, "Secret" ) === 0 && linked( menu, "Secret" ) === 0,
+	"lets hiding from menus rule over choosing one" );
+expect( /chooses menu 'sidebar', which \.cratly\.config\.yaml does not declare/.test( log ),
+	"warns about a menu name the site does not declare" );
+
 const sitemap = built( "sitemap.xml" );
 
 expect( sitemap.includes( "<loc>https://fixture.example.com/index.html</loc>" ) &&