scavold 0.2.1 → 0.4.0

package/composables/useGrid.js

@@ -0,0 +1,40 @@
+import { computed } from "vue";
+import { GRID_COLUMNS } from "../lib/containers.js";
+import { containerProps } from "./useContainer.js";
+
+export { GRID_COLUMNS };
+
+/**
+ * Props definition for grid container components. Spread into `defineProps`
+ * alongside any component-specific props.
+ */
+export const gridProps = {
+	...containerProps,
+
+	/** Most columns side by side: "2", "3" or "4". */
+	dataColumns: { type: String, default: null },
+};
+
+/**
+ * Composable for grid container components.
+ *
+ * Parses the props emitted by the markdown-it container renderer for a
+ * `:::grid` block and exposes derived values ready for binding:
+ *
+ *   - `columns` — most columns side by side, one of GRID_COLUMNS
+ *
+ * Custom grid components should call this composable so they share identical
+ * attribute resolution without duplicating the logic.
+ *
+ * @param {object} props  reactive props from defineProps
+ * @returns {{ columns }}
+ */
+export function useGrid( props ) {
+	const columns = computed( () => {
+		const count = Number( props.dataColumns );
+
+		return GRID_COLUMNS.includes( count ) ? count : GRID_COLUMNS[0];
+	} );
+
+	return { columns };
+}

package/composables/useImageSizes.js

@@ -0,0 +1,42 @@
+import { computed, inject, provide, unref } from "vue";
+
+/**
+ * How large an image is drawn is a matter of the layout around it, not of the image
+ * and not of its author. A layout component that knows the width it gives its content
+ * provides a `sizes` value here, and every image inside that takes the site's default
+ * only takes this one instead. Images given a `sizes` of their own — a per-image
+ * override, or by a component like the cover — keep theirs.
+ *
+ * Resolved while rendering, so it is in the markup the server sends: no layout shift,
+ * and the browser's preload scanner sees it.
+ */
+const IMAGE_SIZES = Symbol( "scavold:image-sizes" );
+
+/**
+ * App-level map of column count → `sizes` of images in a grid of that many columns,
+ * given by the theme through `enhanceApp( context, { gridImageSizes } )`.
+ */
+export const GRID_IMAGE_SIZES = Symbol( "scavold:grid-image-sizes" );
+
+/**
+ * Provides a `sizes` value for the images inside the calling component. An empty
+ * value leaves them with what the layout around provides, or the site's default.
+ *
+ * @param {string|import("vue").Ref<string>} sizes CSS sizes descriptor
+ */
+export function provideImageSizes( sizes ) {
+	const outer = inject( IMAGE_SIZES, null );
+
+	provide( IMAGE_SIZES, computed( () => unref( sizes ) || outer?.value || "" ) );
+}
+
+/**
+ * Reads the `sizes` value the layout around provides.
+ *
+ * @returns {import("vue").ComputedRef<string>} empty when no layout provides one
+ */
+export function useImageSizes() {
+	const provided = inject( IMAGE_SIZES, null );
+
+	return computed( () => provided?.value || "" );
+}

package/icons/float-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 64 32 32"><rect x="2" y="66" width="12" height="12" rx="3" fill="currentColor"/><rect x="18" y="66" width="12" height="4" rx="2" fill="currentColor"/><rect x="18" y="74" width="12" height="4" rx="2" fill="currentColor"/><rect x="2" y="82" width="28" height="4" rx="2" fill="currentColor"/><rect x="2" y="90" width="28" height="4" rx="2" fill="currentColor"/></svg>

package/icons/float-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="64 64 32 32"><rect x="82" y="66" width="12" height="12" rx="3" fill="currentColor"/><rect x="66" y="66" width="12" height="4" rx="2" fill="currentColor"/><rect x="66" y="74" width="12" height="4" rx="2" fill="currentColor"/><rect x="66" y="82" width="28" height="4" rx="2" fill="currentColor"/><rect x="66" y="90" width="28" height="4" rx="2" fill="currentColor"/></svg>

package/icons/split-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 128 32 32"><rect x="2" y="130" width="12" height="12" rx="3" fill="currentColor"/><rect x="18" y="130" width="12" height="4" rx="2" fill="currentColor"/><rect x="18" y="138" width="12" height="4" rx="2" fill="currentColor"/><rect x="18" y="146" width="12" height="4" rx="2" fill="currentColor"/><rect x="18" y="154" width="12" height="4" rx="2" fill="currentColor"/></svg>

package/icons/split-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="64 128 32 32"><rect x="82" y="130" width="12" height="12" rx="3" fill="currentColor"/><rect x="66" y="130" width="12" height="4" rx="2" fill="currentColor"/><rect x="66" y="138" width="12" height="4" rx="2" fill="currentColor"/><rect x="66" y="146" width="12" height="4" rx="2" fill="currentColor"/><rect x="66" y="154" width="12" height="4" rx="2" fill="currentColor"/></svg>

package/icons/stacked.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect x="2" y="2" width="28" height="12" rx="3" fill="currentColor"/><rect x="2" y="18" width="28" height="4" rx="2" fill="currentColor"/><rect x="2" y="26" width="28" height="4" rx="2" fill="currentColor"/></svg>

package/l10n/de.json

@@ -13,5 +13,11 @@
 	"cover": {
 		"play": "Video abspielen",
 		"pause": "Video anhalten"
+	},
+	"details": {
+		"summary": "Details"
+	},
+	"card": {
+		"more": "Weiterlesen"
 	}
 }

package/l10n/en.json

@@ -13,5 +13,11 @@
 	"cover": {
 		"play": "Play video",
 		"pause": "Pause video"
+	},
+	"details": {
+		"summary": "Details"
+	},
+	"card": {
+		"more": "Read more"
 	}
 }

package/lib/config.js

@@ -7,9 +7,10 @@ import {
 import { extractFrontmatterMediaSrcs } from "./excerpt.js";
 import { DEFAULT_FEED_LIMIT, collectFeedPages, renderRss } from "./feed.js";
 import { useMedia } from "./media.js";
+import { parseImageTitle, registerFigures } from "./figures.js";
 import { patchRenderer } from "./markdown.js";
 import { extractContainerMediaSrcs, leadingContainerOf, mediaPropsOf, registerContainers, resolveContainerMap } from "./containers.js";
-import { buildSectionManifest, writeSectionManifest } from "./sectionManifest.js";
+import { buildSectionManifest, embedIcons, readIcons, writeSectionManifest } from "./sectionManifest.js";
 import { isExternalUrl, servableRedirectTarget } from "./redirectTarget.js";
 import { assertUniquePageKeys } from "./pageKeys.js";
 import { undeclaredMenus } from "./menus.js";
@@ -123,25 +124,6 @@ function createExternalRedirectMapPlugin( pagesDir ) {
 	};
 }
 
-// ─────────────────────────────────────────────────────────────────────────────
-
-/**
- * Extracts an optional sizes override from a markdown image title string.
- * Recognises the pattern: sizes=VALUE or sizes="VALUE"
- *
- * @param {string|null} title
- * @returns {string|undefined}
- */
-function parseSizesFromTitle( title ) {
-	if ( !title ) {
-		return undefined;
-	}
-
-	const match = title.match( /(?:^|\s)sizes=(?:"([^"]+)"|(\S+))/ );
-
-	return match?.[1] ?? match?.[2] ?? undefined;
-}
-
 /**
  * Resolves the three content folders from the VitePress config and the declarations
  * of `.cratly.config.yaml`. An explicit value in the VitePress config always wins,
@@ -487,7 +469,8 @@ export async function augmentConfig( rawConfig, options = {} ) {
 
 	// Emit the section-type manifest (.cratly/sections.json) so the cratly
 	// editor can render typed controls per section kind. Built from Scavold's
-	// built-in sections merged with the site's container declarations. Written
+	// built-in sections merged with the site's container declarations, and the
+	// icons they refer to from .cratly/icons/. Written
 	// at build start and once when the dev server starts listening.
 	/**
 	 *
@@ -495,6 +478,7 @@ export async function augmentConfig( rawConfig, options = {} ) {
 	async function emitSectionManifest() {
 		try {
 			const manifest = buildSectionManifest( declaredContainers, { adapterVersion: SCAVOLD_VERSION } );
+			embedIcons( manifest, await readIcons( process.cwd() ) );
 			await writeSectionManifest( process.cwd(), manifest );
 		} catch ( error ) {
 			console.warn( "[scavold] could not write .cratly/sections.json —", error.message );
@@ -713,9 +697,13 @@ export async function augmentConfig( rawConfig, options = {} ) {
 			config( md ) {
 				// see https://github.com/markdown-it/markdown-it/blob/master/lib/renderer.mjs
 
+				// Splits image titles into the sizes override and the caption, turning an
+				// image standing alone with a caption into a <figure>; see figures.js.
+				registerFigures( md );
+
 				patchRenderer( md, "image", ( defaultHandler, tokens, idx, mdOptions, ...args ) => {
 					const token = tokens[idx];
-					const sizesOverride = parseSizesFromTitle( token.attrGet( "title" ) );
+					const sizesOverride = token.meta?.sizes ?? parseImageTitle( token.attrGet( "title" ) ).sizes;
 					const data = media.collectImage( token.attrGet( "src" ), sizesOverride );
 
 					if ( data ) {
@@ -724,6 +712,11 @@ export async function augmentConfig( rawConfig, options = {} ) {
 						token.attrSet( "srcset", data.srcset );
 						token.attrSet( "webp-srcset", data.webpSrcset );
 						token.attrSet( "sizes", data.sizes );
+
+						// Only the site's default: a layout around the image may know better.
+						if ( !sizesOverride ) {
+							token.attrSet( "sizes-fallback", "" );
+						}
 						mdOptions = { ...mdOptions, xhtmlOut: true };
 					}
 

package/lib/containers.js

@@ -15,6 +15,9 @@ export const SECTIONING_ELEMENTS = new Set( [
 	"section",
 ] );
 
+/** Column counts a `:::grid` offers; the first is the default. */
+export const GRID_COLUMNS = [ 2, 3, 4 ];
+
 /**
  * Builds the default container-name → component-name map from the set of
  * built-in sectioning element names plus other built-in containers.
@@ -29,7 +32,10 @@ function defaultContainerMap() {
 	}
 
 	map.video = "ScavoldVideo";
+	map.card = "ScavoldCard";
 	map.cover = "ScavoldCover";
+	map.details = "ScavoldDetails";
+	map.grid = "ScavoldGrid";
 	map.pagelist = "ScavoldPageList";
 
 	return map;

package/lib/figures.js

@@ -0,0 +1,99 @@
+/**
+ * The title of a Markdown image, `![alt](/photo.jpg "…")`, carries two things: an
+ * optional `sizes=` override, which is for the build only, and the image's caption,
+ * which is everything else. Neither reaches the page as a `title` attribute — the
+ * override would show up as a tooltip, and a caption is shown as such where it can be.
+ */
+const SIZES = /(?:^|\s)sizes=(?:"([^"]+)"|(\S+))/;
+
+/**
+ * Splits an image title into its `sizes=` override and its caption.
+ *
+ * @param {string|null|undefined} title title of a Markdown image
+ * @returns {{sizes: string|undefined, caption: string}}
+ */
+export function parseImageTitle( title ) {
+	const text = String( title ?? "" );
+	const match = text.match( SIZES );
+
+	return {
+		sizes: match ? match[1] ?? match[2] : undefined,
+		caption: ( match ? text.replace( match[0], " " ) : text ).replace( /\s+/g, " " ).trim(),
+	};
+}
+
+/**
+ * Tells whether the children of an inline token are one image and nothing else but
+ * blank text, i.e. whether the paragraph holding them is an image standing alone.
+ *
+ * @param {Array<object>} children
+ * @returns {object|null} the image token, or null
+ */
+function soleImage( children = [] ) {
+	const significant = children.filter( child =>
+		!( child.type === "softbreak" || ( child.type === "text" && child.content.trim() === "" ) ) );
+
+	return significant.length === 1 && significant[0].type === "image" ? significant[0] : null;
+}
+
+/**
+ * Registers a core rule turning the image titles of a page into what they mean: the
+ * `sizes=` override goes to `meta.sizes` of the image token for the renderer, and the
+ * caption of an image standing alone in its paragraph turns that paragraph into a
+ * `<figure>` with a `<figcaption>`. An image amid text cannot have a figure around it;
+ * its caption stays its title, shown as a tooltip.
+ *
+ * @param {import("markdown-it")} md markdown-it instance
+ */
+export function registerFigures( md ) {
+	md.core.ruler.after( "inline", "scavold_figures", state => {
+		const { tokens } = state;
+
+		for ( let i = 0; i < tokens.length; i++ ) {
+			const inline = tokens[i];
+
+			if ( inline.type !== "inline" ) {
+				continue;
+			}
+
+			for ( const child of inline.children ?? [] ) {
+				if ( child.type === "image" ) {
+					const { sizes, caption } = parseImageTitle( child.attrGet( "title" ) );
+
+					child.meta = { ...child.meta, sizes, caption };
+
+					if ( caption ) {
+						child.attrSet( "title", caption );
+					} else {
+						child.attrs = ( child.attrs ?? [] ).filter( ( [name] ) => name !== "title" );
+					}
+				}
+			}
+
+			const open = tokens[i - 1];
+			const close = tokens[i + 1];
+			const image = soleImage( inline.children );
+
+			// A paragraph of a tight list item is not rendered as an element, so it
+			// cannot become a figure either.
+			if ( open?.type !== "paragraph_open" || close?.type !== "paragraph_close" || open.hidden ||
+				!image?.meta.caption ) {
+				continue;
+			}
+
+			// The caption is shown below the image, so it is no tooltip as well.
+			image.attrs = image.attrs.filter( ( [name] ) => name !== "title" );
+
+			open.tag = close.tag = "figure";
+			open.attrJoin( "class", "scavold-figure" );
+
+			const captionOpen = new state.Token( "figcaption_open", "figcaption", 1 );
+			captionOpen.attrSet( "class", "scavold-figure__caption" );
+
+			const text = new state.Token( "text", "", 0 );
+			text.content = image.meta.caption;
+
+			inline.children.push( captionOpen, text, new state.Token( "figcaption_close", "figcaption", -1 ) );
+		}
+	} );
+}

package/lib/icons.js

@@ -0,0 +1,197 @@
+/**
+ * Turns an icon sheet — one SVG document holding every icon as a group named by its
+ * id, each in a 32x32 cell at a multiple of 64 — into one SVG per icon, in the form the
+ * cratly editor shows unchanged. design/icons.svg is such a sheet, edited in Affinity;
+ * scripts/build-icons.js writes what this returns to icons/.
+ *
+ * The editor rebuilds every icon from a fixed subset of SVG and drops the rest (see
+ * "Icon markup is untrusted" on https://cratly.io/reference/section-types#icons). An
+ * icon relying on anything else would look broken there without a word, so this
+ * refuses it instead. Affinity writes paint into `style` attributes and inherits some
+ * of it from the root element; both are turned into plain attributes, and black into
+ * `currentColor`, so an icon takes the colour of the control showing it.
+ */
+
+/** Edge of an icon's cell. */
+export const ICON_SIZE = 32;
+
+/** Distance between the cells of the sheet. */
+export const ICON_GRID = 64;
+
+/** Elements the editor keeps, besides the root and groups. */
+const SHAPES = new Set( [ "path", "circle", "ellipse", "line", "polyline", "polygon", "rect" ] );
+
+/** Attributes the editor keeps on a shape. */
+const GEOMETRY = new Set( [
+	"d", "points", "x", "y", "x1", "y1", "x2", "y2", "cx", "cy", "r", "rx", "ry", "width", "height", "transform",
+] );
+const PAINT = new Set( [
+	"fill", "fill-rule", "fill-opacity", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin",
+	"stroke-miterlimit", "stroke-dasharray", "stroke-dashoffset", "stroke-opacity", "opacity", "clip-rule",
+] );
+
+/** Spellings of black, the colour an icon is drawn in. */
+const BLACK = /^(?:#000(?:000)?|black|rgb\(\s*0\s*,\s*0\s*,\s*0\s*\))$/i;
+
+/**
+ * Reads the attributes of one tag, its `style` declarations included.
+ *
+ * @param {string} tag opening tag, e.g. `<rect x="1" style="fill:none"/>`
+ * @returns {Map<string,string>}
+ */
+function attributesOf( tag ) {
+	const attributes = new Map();
+
+	for ( const [ , name, value ] of tag.matchAll( /([\w:-]+)="([^"]*)"/g ) ) {
+		if ( name === "style" ) {
+			for ( const declaration of value.split( ";" ) ) {
+				const [ property, ...rest ] = declaration.split( ":" );
+
+				if ( property.trim() && rest.length ) {
+					attributes.set( property.trim(), rest.join( ":" ).trim() );
+				}
+			}
+		} else {
+			attributes.set( name, value );
+		}
+	}
+
+	return attributes;
+}
+
+/**
+ * Normalises the paint of an icon: black becomes `currentColor`, lengths lose their
+ * unit. Any other colour is refused, since an icon has one colour, the control's.
+ *
+ * @param {string} name icon name, for the error message
+ * @param {string} property
+ * @param {string} value
+ * @returns {string}
+ */
+function paintValue( name, property, value ) {
+	if ( property === "fill" || property === "stroke" ) {
+		if ( value === "none" || value === "currentColor" ) {
+			return value;
+		}
+
+		if ( BLACK.test( value ) ) {
+			return "currentColor";
+		}
+
+		throw new Error( `icon '${name}' is painted ${value}; draw it in black, it takes the colour of the control` );
+	}
+
+	return value.replace( /^(-?[\d.]+)px$/, "$1" );
+}
+
+/**
+ * Finds where a shape starts, to tell which cell of the sheet it is in.
+ *
+ * @param {string} element
+ * @param {Map<string,string>} attributes
+ * @returns {[number, number]|null}
+ */
+function originOf( element, attributes ) {
+	const number = key => Number.parseFloat( attributes.get( key ) );
+
+	switch ( element ) {
+		case "rect" :
+			return [ number( "x" ) || 0, number( "y" ) || 0 ];
+		case "circle" :
+		case "ellipse" :
+			return [ number( "cx" ), number( "cy" ) ];
+		case "line" :
+			return [ number( "x1" ), number( "y1" ) ];
+		case "polyline" :
+		case "polygon" : {
+			const [ x, y ] = ( attributes.get( "points" ) ?? "" ).trim().split( /[\s,]+/ ).map( Number.parseFloat );
+			return [ x, y ];
+		}
+		case "path" : {
+			const match = /^\s*M\s*(-?[\d.]+)[\s,]*(-?[\d.]+)/.exec( attributes.get( "d" ) ?? "" );
+			return match ? [ Number.parseFloat( match[1] ), Number.parseFloat( match[2] ) ] : null;
+		}
+		default :
+			return null;
+	}
+}
+
+/**
+ * Splits an icon sheet into one SVG document per icon.
+ *
+ * @param {string} sheet SVG source of the sheet
+ * @returns {Map<string,string>} icon name → SVG markup, in the order of the sheet
+ */
+export function splitIconSheet( sheet ) {
+	const source = String( sheet ).replace( /<!--[\s\S]*?-->/g, "" );
+	const root = /<svg\b[^>]*>/.exec( source );
+
+	if ( !root ) {
+		throw new Error( "the icon sheet has no <svg> element" );
+	}
+
+	// What the root paints with, inherited by every shape that says nothing else.
+	const inherited = new Map( [...attributesOf( root[0] )].filter( ( [property] ) => PAINT.has( property ) ) );
+	const icons = new Map();
+
+	for ( const [ , name, body ] of source.matchAll( /<g\b[^>]*\sid="([^"]+)"[^>]*>([\s\S]*?)<\/g>/g ) ) {
+		if ( !/^[a-z0-9][a-z0-9-]*$/.test( name ) ) {
+			throw new Error( `icon '${name}' needs a name of lower-case letters, digits and dashes` );
+		}
+
+		if ( /<g\b/.test( body ) ) {
+			throw new Error( `icon '${name}' nests groups; keep its shapes in one group` );
+		}
+
+		const shapes = [];
+		let origin = null;
+
+		for ( const [ tag, element ] of body.matchAll( /<([\w:-]+)\b[^>]*?\/?>/g ) ) {
+			if ( tag.startsWith( "</" ) ) {
+				continue;
+			}
+
+			if ( !SHAPES.has( element ) ) {
+				throw new Error( `icon '${name}' uses <${element}>, which the editor drops` );
+			}
+
+			const attributes = attributesOf( tag );
+			const kept = [];
+
+			for ( const [ property, value ] of attributes ) {
+				if ( GEOMETRY.has( property ) ) {
+					kept.push( [ property, value ] );
+				} else if ( PAINT.has( property ) ) {
+					kept.push( [ property, paintValue( name, property, value ) ] );
+				} else if ( property !== "id" && !property.includes( ":" ) ) {
+					throw new Error( `icon '${name}' sets ${property} on <${element}>, which the editor drops` );
+				}
+			}
+
+			const [ x, y ] = originOf( element, attributes ) ?? [];
+
+			if ( Number.isFinite( x ) && Number.isFinite( y ) ) {
+				origin = origin ? [ Math.min( origin[0], x ), Math.min( origin[1], y ) ] : [ x, y ];
+			}
+
+			shapes.push( `<${element} ${kept.map( ( [ k, v ] ) => `${k}="${v}"` ).join( " " )}/>` );
+		}
+
+		if ( !shapes.length || !origin ) {
+			throw new Error( `icon '${name}' draws nothing` );
+		}
+
+		const cell = origin.map( value => Math.floor( value / ICON_GRID ) * ICON_GRID );
+		const rootPaint = [...inherited].map( ( [ k, v ] ) => ` ${k}="${paintValue( name, k, v )}"` ).join( "" );
+
+		icons.set( name,
+			`<svg xmlns="http://www.w3.org/2000/svg" viewBox="${cell[0]} ${cell[1]} ${ICON_SIZE} ${ICON_SIZE}"${rootPaint}>` +
+			shapes.join( "" ) + "</svg>\n" );
+	}
+
+	if ( !icons.size ) {
+		throw new Error( "the icon sheet holds no group with an id" );
+	}
+
+	return icons;
+}

package/lib/index.d.ts

@@ -1,9 +1,19 @@
 import type { App } from "vue";
 import type { Router } from "vitepress";
 
+export interface EnhanceAppOptions {
+	/**
+	 * `sizes` of the images in a grid, by its column count — e.g.
+	 * `{ 3: "(min-width: 72rem) 22rem, (min-width: 48rem) 50vw, 100vw" }`. The theme
+	 * knows how wide a cell is at which screen width; a column count left out keeps
+	 * the site's `image_sizes` for its images.
+	 */
+	gridImageSizes?: Partial<Record<2 | 3 | 4, string>>;
+}
+
 /**
  * Theme entry point: registers Scavold's i18n catalogue, makes every Scavold
  * component globally available, and installs the runtime redirect handling.
  * Call it from the site theme's own `enhanceApp()`.
  */
-export function enhanceApp( context: { app: App; router: Router } ): Promise<void>;
+export function enhanceApp( context: { app: App; router: Router }, options?: EnhanceAppOptions ): Promise<void>;

package/lib/index.js

@@ -1,14 +1,23 @@
 import { registerScavoldI18n } from "../composables/useI18n.js";
+import { GRID_IMAGE_SIZES } from "../composables/useImageSizes.js";
+// Layout variants of the sectioning wrappers, `layout=` on their container line.
+import "../styles/layouts.css";
 // Populated at build time by the scavold:external-redirect-map Vite plugin.
 // Maps site-relative paths ("/de/links") to their external redirect targets.
 import externalRedirectMap from "virtual:scavold/external-redirect-map";
 
 /**
+ * Theme entry point; see index.d.ts.
  *
+ * @param {{app: import("vue").App, router: import("vitepress").Router}} context
+ * @param {object} [options]
+ * @param {Object<number,string>} [options.gridImageSizes] column count → sizes of images in a grid
  */
-export async function enhanceApp( { app, router } ) {
+export async function enhanceApp( { app, router }, { gridImageSizes = {} } = {} ) {
 	registerScavoldI18n();
 
+	app.provide( GRID_IMAGE_SIZES, { ...gridImageSizes } );
+
 	const items = Object.entries( import.meta.glob( "../components/*.vue" ) );
 
 	await Promise.all( items.map( ( [ path, importer ] ) => {