create-bearminion 1.2.0 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # create-bearminion
 
+## 1.3.0
+
+### Minor Changes
+
+- 4de8434: Custom JSON-LD and analytics snippets. A page's `seo.jsonLd` holds parsed JSON-LD blocks that replace the generated `WebPage` markup, and `site.analytics` (`head`, `bodyEnd`) holds raw snippets the template emits on the live site only: not in `astro dev`, and not in Vercel or Netlify preview deployments. Nothing needs configuring; `BEARMINION_ANALYTICS=on|off` overrides the choice for hosts that cannot be told apart. The Pages tab shows an SEO card (search result preview and badges) with an Edit SEO button that opens a dialog for every SEO field, including JSON-LD with validation and script-tag unwrapping. The Site tab has an Analytics & scripts group. `parseJsonLdInput`, `formatJsonLd`, `jsonLdWarnings`, `jsonLdSchema` and `siteAnalyticsSchema` are exported. Themes need to render the two new fields (see the theme docs).
+
+### Patch Changes
+
+- 826b0ac: `create-bearminion` speaks in the BearMinion voice: the prompts, progress lines, errors, next steps and `--help` text. The messages say the same things, with fewer words and a grumpier bear.
+- 2032a4a: Template: footer columns stay left-aligned on small screens instead of piling up on the right. They stack in one column on phones, two columns on larger phones, three columns on tablets, and sit beside the brand block from wide layouts up.
+
+## 1.2.1
+
+### Patch Changes
+
+- 755bad0: The Media section's video cover is a responsive image (a WebP `srcset` from 480 to 1920 pixels wide), so a phone no longer downloads the full-size poster, and it loads at once instead of lazily when the section is one of the first two on the page, where it is often the largest thing on screen.
+- 0a2301e: The package pages link to the new website and documentation: the npm homepage is https://bearminion.com, and the READMEs (including the template's) point to https://docs.bearminion.com instead of Markdown files on GitHub.
+
 ## 1.2.0
 
 ### Minor Changes

package/README.md

@@ -58,8 +58,10 @@ The [default BearMinion template](https://github.com/langehelp-software/bearmini
 
 ## Learn more
 
+- [bearminion.com](https://bearminion.com), with a demo of the editor
+- [Getting started](https://docs.bearminion.com/getting-started/): create, edit and put your site online
+- [Documentation](https://docs.bearminion.com)
 - [BearMinion on GitHub](https://github.com/langehelp-software/bearminion)
-- [Documentation](https://github.com/langehelp-software/bearminion/blob/main/docs/README.md)
 
 ## License
 

package/dist/cli.mjs

@@ -943,7 +943,7 @@ function runCommand(pm, script) {
 //#endregion
 //#region src/args.ts
 var UsageError = class extends Error {};
-const HELP = `Create a BearMinion site: an Astro website you edit by clicking on it.
+const HELP = `Scaffold a BearMinion site: Astro, plain JSON content, an editor you click on. No database, no drama.
 
 Usage
   npm create bearminion@latest [directory] -- [options]
@@ -951,11 +951,11 @@ Usage
 Options
   --name <name>     Site name (default: from the directory)
   --url <address>   Public address, such as https://example.com (you can set it later in the editor)
-  --storybook       Include Storybook, a workshop for the theme's components
-  --pm <manager>    Package manager to install with: ${PACKAGE_MANAGERS.join(", ")} (default: the one you ran)
-  --no-install      Do not install dependencies
-  --no-git          Do not create a git repository
-  -y, --yes         Ask nothing; use the defaults for anything not given
+  --storybook       Include Storybook (off by default; it is a lot of extra packages)
+  --pm <manager>    Package manager: ${PACKAGE_MANAGERS.join(", ")} (default: the one you ran)
+  --no-install      Skip installing dependencies
+  --no-git          Skip git init
+  -y, --yes         Ask nothing, use defaults for whatever is missing
   -h, --help        Show this help
   -v, --version     Show the version
 `;
@@ -968,9 +968,9 @@ function parseCliArgs(argv) {
 		throw new UsageError(error instanceof Error ? error.message : String(error));
 	}
 	const { values, positionals } = parsed;
-	if (positionals.length > 1) throw new UsageError(`Expected one directory, got ${positionals.length}: ${positionals.join(" ")}`);
+	if (positionals.length > 1) throw new UsageError(`One directory, please. Got ${positionals.length}: ${positionals.join(" ")}`);
 	const pm = values.pm;
-	if (pm !== void 0 && !isPackageManager(pm)) throw new UsageError(`Unknown package manager "${pm}". Use one of: ${PACKAGE_MANAGERS.join(", ")}.`);
+	if (pm !== void 0 && !isPackageManager(pm)) throw new UsageError(`"${pm}" isn't a package manager I know. Use one of: ${PACKAGE_MANAGERS.join(", ")}.`);
 	return {
 		...positionals[0] !== void 0 ? { directory: positionals[0] } : {},
 		...values.name !== void 0 ? { name: values.name } : {},
@@ -1269,9 +1269,9 @@ async function main() {
 		return 0;
 	}
 	const interactive = !options.yes && Boolean(process.stdin.isTTY && process.stdout.isTTY);
-	intro("BearMinion");
+	intro("🐻 Oh, great. Another website. Let's make this quick.");
 	const directory = options.directory ?? (interactive ? await ask(text({
-		message: "Where should the site go?",
+		message: "Which folder? A new or empty one.",
 		placeholder: `./${DEFAULT_DIRECTORY}`,
 		defaultValue: DEFAULT_DIRECTORY
 	})) : DEFAULT_DIRECTORY);
@@ -1279,11 +1279,11 @@ async function main() {
 	const targetDir = path.resolve(directory);
 	const blocking = await blockingEntries(targetDir);
 	if (blocking.length > 0) {
-		cancel(`${directory} is not empty (${preview(blocking)}). Choose a new or empty folder.`);
+		cancel(`Grrr. ${directory} isn't empty (${preview(blocking)}). Pick another folder, or clean up your mess first.`);
 		return 1;
 	}
 	const siteName = options.name ?? (interactive ? await ask(text({
-		message: "What is the site called?",
+		message: "What are we calling this masterpiece?",
 		placeholder: toSiteName(directory),
 		defaultValue: toSiteName(directory)
 	})) : toSiteName(directory));
@@ -1292,23 +1292,23 @@ async function main() {
 	if (options.url !== void 0) {
 		const normalized = normalizeUrl(options.url);
 		if (!normalized) {
-			cancel(`"${options.url}" is not a web address. Use one such as https://example.com.`);
+			cancel(`"${options.url}" isn't a web address. Try something like https://example.com.`);
 			return 1;
 		}
 		url = normalized;
 	} else if (interactive) {
 		const answer = await ask(text({
-			message: "What is its web address?",
-			placeholder: "https://example.com  (Enter to skip, set it later under Site → URL)",
+			message: "What's its web address?",
+			placeholder: "https://example.com  (Enter to skip. Set it later under Site → URL)",
 			defaultValue: "",
-			validate: (value) => !value || normalizeUrl(value) ? void 0 : "Enter a full address such as https://example.com, or leave it empty."
+			validate: (value) => !value || normalizeUrl(value) ? void 0 : "That's not a web address. Try https://example.com, or leave it empty."
 		}));
 		if (answer === void 0) return cancelled();
 		url = answer ? normalizeUrl(answer) ?? void 0 : void 0;
 	}
 	const pm = options.packageManager ?? detectPackageManager(process.env.npm_config_user_agent);
 	const spin = spinner();
-	spin.start("Copying the template");
+	spin.start("Unpacking the template");
 	await scaffold({
 		templateDir: path.join(packageRoot, "template"),
 		targetDir,
@@ -1317,25 +1317,25 @@ async function main() {
 		...url ? { url } : {},
 		storybook: options.storybook
 	});
-	spin.stop(`Created ${siteName} in ${path.relative(process.cwd(), targetDir) || "."}${options.storybook ? ", with Storybook" : ""}`);
+	spin.stop(`Done. ${siteName} lives in ${path.relative(process.cwd(), targetDir) || "."}${options.storybook ? ", Storybook included" : ""}`);
 	let installed = false;
 	if (options.install) {
-		spin.start(`Installing dependencies with ${pm}`);
+		spin.start(`Fetching the bare minimum with ${pm}`);
 		const result = await install(pm, targetDir);
 		installed = result.ok;
-		if (result.ok) spin.stop("Installed dependencies");
+		if (result.ok) spin.stop("Dependencies installed. Could have been worse.");
 		else {
 			spin.error(`${pm} install failed`);
 			log.message(result.output);
-			log.warn(`Run ${pm} install in the folder to try again.`);
+			log.warn(`Sort out whatever that is, then run ${pm} install in the folder.`);
 		}
 	}
 	if (options.git) {
-		if (insideGitRepository(path.dirname(targetDir))) log.info("Inside an existing git repository, so no new one was created.");
+		if (insideGitRepository(path.dirname(targetDir))) log.info("Already inside a git repository, so I didn't start another one.");
 		else {
 			const git = initGit(targetDir);
-			if (!git.initialized) log.warn(`Could not create a git repository: ${git.reason ?? "git is not available"}`);
-			else if (!git.committed) log.warn("Created a git repository, but the first commit failed. Set your name and email with git config, then commit.");
+			if (!git.initialized) log.warn(`Couldn't create a git repository: ${git.reason ?? "git is not available"}`);
+			else if (!git.committed) log.warn("Repository created, first commit failed. Set your name and email with git config, then commit. Not my department.");
 		}
 	}
 	const steps = [
@@ -1343,8 +1343,8 @@ async function main() {
 		...installed ? [] : [`${pm} install`],
 		runCommand(pm, "dev")
 	];
-	note(`${steps.join("\n")}\n\nOpen the address it prints and press Ctrl+E (Cmd+E on a Mac) to edit.`, "Next steps");
-	outro(url ? `Ready to publish at ${url}.` : "Set your web address under Site → URL before you publish.");
+	note(`${steps.join("\n")}\n\nOpen the address it prints, press Ctrl+E (Cmd+E on a Mac) and click on things.`, "Next steps");
+	outro(url ? `Ready to publish at ${url}. I'm going back to sleep.` : "Set your web address under Site → URL before you publish. I'll be asleep.");
 	return 0;
 }
 /** Awaits a prompt; `undefined` when the person pressed Ctrl+C or Esc. */
@@ -1353,7 +1353,7 @@ async function ask(prompt) {
 	return typeof value === "string" ? value : void 0;
 }
 function cancelled() {
-	cancel("Nothing was created.");
+	cancel("Nothing was created. Back to sleep.");
 	return 1;
 }
 function preview(entries) {

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "create-bearminion",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Create a BearMinion site: an Astro website you edit by clicking on it.",
   "license": "MIT",
   "author": "Jakub Lange",
-  "homepage": "https://github.com/langehelp-software/bearminion#readme",
+  "homepage": "https://bearminion.com",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/langehelp-software/bearminion.git",

package/template/README.md

@@ -184,12 +184,23 @@ The site's own images (`logo.png`, `favicon.png`, `og.png`, `hero.png`) live in
 
 ## SEO and sitemap
 
-`Seo.astro` reads the page `seo` object and the site defaults in `site.json`. The document title is `seo.titleTemplate` with `%s` replaced by the page SEO title. Description falls back to the site description. The canonical URL is `seo.canonical` when set, otherwise the page path joined to `site.url`. Robots is `noindex` or `index`, plus `nofollow` or `follow`. Open Graph, Twitter, and WebPage JSON-LD use the same title, description, and image.
+`Seo.astro` reads the page `seo` object and the site defaults in `site.json`. The document title is `seo.titleTemplate` with `%s` replaced by the page SEO title. Description falls back to the site description. The canonical URL is `seo.canonical` when set, otherwise the page path joined to `site.url`. Robots is `noindex` or `index`, plus `nofollow` or `follow`. Open Graph, Twitter, and WebPage JSON-LD use the same title, description, and image. A page that sets `seo.jsonLd` gets those blocks instead of the generated WebPage block, one script tag per block. `site.analytics.head` and `site.analytics.bodyEnd` are emitted by `Base.astro` in production builds only.
 
 `astro.config.ts` sets `site` from `site.json` and adds `@astrojs/sitemap`. The filter keeps content pages whose `seo.noindex` is false. `content/pages/preview.json` is the sample noindex page: it is built, it emits `noindex`, and it is absent from the sitemap. `src/pages/robots.txt.ts` points crawlers at `sitemap-index.xml`.
 
 The style guide at `/style-guide` renders every typography size and button variant. `/variants` renders every section, header, and footer variant. They live in `src/dev/` and only `npm run dev` serves them (the `devPages` integration in `astro.config.ts`), so they never reach the built site. Delete that integration and the folder if you do not want them.
 
+## Analytics
+
+`site.analytics.head` and `site.analytics.bodyEnd` are raw HTML snippets (the editor's Site → Analytics & scripts). `Base.astro` writes `head` at the end of `<head>` and `bodyEnd` before `</body>`, and only when `analyticsEnabled()` in `src/lib/analytics.ts` says the build is the live site's:
+
+1. `BEARMINION_ANALYTICS=on` or `off` decides, when set. `1`, `true` and `yes` also mean on; `0`, `false` and `no` mean off.
+2. Otherwise a production build is required, so `npm run dev` sends no visits.
+3. Vercel (`VERCEL_ENV`) and Netlify (`NETLIFY`, `CONTEXT`) say which deployment is building, so only their production deployments include the snippets.
+4. On any other host every production build includes them. Cloudflare Pages and similar hosts do not say which build is a preview. Set `BEARMINION_ANALYTICS=off` in the host's preview environment (Cloudflare lets you set variables per environment), or `on` to test a snippet locally with `npm run dev`.
+
+People who only use the editor never set a variable: steps 2 and 3 cover the usual setup. The snippets are not sanitised, so give write access to `content/site.json` only to people you would trust with the site's code.
+
 ## Dev editor
 
 `astro.config.ts` registers `bearminion()`. It is active only while `pnpm dev` is running. The production build does not add editor routes, scripts, or the overlay.
@@ -200,7 +211,7 @@ A variant change, a new, duplicated, moved, or deleted section, and a sidebar va
 
 Header links nest up to three levels (`MAX_NAV_DEPTH`). Desktop navigation uses hover and focus flyouts. The mobile menu uses an accordion. The link picker lists pages, `#anchor` on the current page, `/page#anchor` on other pages, and a custom URL.
 
-The API is `/__bearminion/api` on localhost. Saving `content/*.json` asks the editor to reload. If the draft is still dirty, the editor asks to save, discard, or cancel first. Unsaved drafts are kept in `localStorage` until save or discard. An upload does not reload by itself, so the draft can preview the new file before save. Request and response shapes, with curl examples, are in the [Dev API docs](https://github.com/langehelp-software/bearminion/blob/main/docs/dev-api.md), and every sidebar tab is described in [the editor docs](https://github.com/langehelp-software/bearminion/blob/main/docs/editor.md).
+The API is `/__bearminion/api` on localhost. Saving `content/*.json` asks the editor to reload. If the draft is still dirty, the editor asks to save, discard, or cancel first. Unsaved drafts are kept in `localStorage` until save or discard. An upload does not reload by itself, so the draft can preview the new file before save. Request and response shapes, with curl examples, are in the [Dev API docs](https://docs.bearminion.com/dev-api/), and every sidebar tab is described in [the editor docs](https://docs.bearminion.com/editor/).
 
 ```bash
 pnpm dev

package/template/package.json

@@ -19,7 +19,7 @@
     "@fontsource/jetbrains-mono": "^5.3.0",
     "@tailwindcss/vite": "^4.1.12",
     "astro": "^7.3.8",
-    "bearminion": "^1.2.0",
+    "bearminion": "^1.3.0",
     "class-variance-authority": "^0.7.1",
     "sharp": "^0.35.5",
     "tailwind-merge": "^3.7.0",

package/template/src/components/organisms/Footer.astro

@@ -68,9 +68,9 @@ const wordmark = splitMarkedText(site.name, site.nameMarks)
               </span>
             )}
           </div>
-          <div class="flex flex-wrap justify-end gap-x-8 gap-y-10 @min-[40rem]:ml-auto">
+          <div class="grid w-full grid-cols-1 gap-x-8 gap-y-10 @min-[26rem]:grid-cols-2 @min-[40rem]:grid-cols-3 @min-[56rem]:ml-auto @min-[56rem]:flex @min-[56rem]:w-auto @min-[56rem]:flex-wrap @min-[56rem]:justify-end">
             {columns.map((column, columnIndex) => (
-              <div class="flex w-40 min-w-32 flex-col gap-3.5">
+              <div class="flex min-w-0 flex-col gap-3.5 @min-[56rem]:w-40 @min-[56rem]:min-w-32">
                 <p class="font-mono text-[0.6875rem] tracking-[0.08em] text-muted uppercase" data-field={`footer.columns.${columnIndex}.title`}>
                   {column.title}
                 </p>
@@ -99,9 +99,9 @@ const wordmark = splitMarkedText(site.name, site.nameMarks)
               </Typography>
             )}
           </div>
-          <div class="flex flex-wrap justify-end gap-x-8 gap-y-8 @min-[40rem]:ml-auto">
+          <div class="grid w-full grid-cols-1 gap-x-8 gap-y-8 @min-[26rem]:grid-cols-2 @min-[40rem]:grid-cols-3 @min-[56rem]:ml-auto @min-[56rem]:flex @min-[56rem]:w-auto @min-[56rem]:flex-wrap @min-[56rem]:justify-end">
             {columns.map((column, columnIndex) => (
-              <div class="flex min-w-32 flex-col gap-3.5">
+              <div class="flex min-w-0 flex-col gap-3.5 @min-[56rem]:min-w-32">
                 <p class="font-mono text-[0.6875rem] tracking-[0.08em] text-muted uppercase" data-field={`footer.columns.${columnIndex}.title`}>
                   {column.title}
                 </p>

package/template/src/components/sections/media/Media.astro

@@ -29,6 +29,8 @@ const player = {
   image: props.image,
   label: props.label,
   imageField: field('image.alt'),
+  // The first two sections are usually on screen at load, where a lazy cover would hold back the largest paint.
+  eager: index <= 1,
 }
 ---
 

package/template/src/components/sections/media/MediaPlayer.astro

@@ -1,6 +1,6 @@
 ---
 import type { Image } from 'bearminion'
-import { imageUrl } from '../../../lib/image-url'
+import { imageSrcset, imageUrl } from '../../../lib/image-url'
 import { cn } from '../../../lib/cn'
 import MediaFrame from '../../molecules/MediaFrame.astro'
 import type { MediaProps } from './definition'
@@ -15,10 +15,12 @@ interface Props {
   label?: string
   /** `data-field` path for the image, so a click on the frame opens the image picker. */
   imageField: string
+  /** Near the top of the page: the cover loads at once instead of lazily, since it is likely the largest thing on screen. */
+  eager?: boolean
   class?: string
 }
 
-const { kind, aspect, video, poster, image, label, imageField, class: className } = Astro.props
+const { kind, aspect, video, poster, image, label, imageField, eager = false, class: className } = Astro.props
 const ASPECT = { '16:9': 'aspect-video', '4:3': 'aspect-[4/3]', '21:9': 'aspect-[21/9]', '1:1': 'aspect-square' } as const
 const frame = cn(
   'relative w-full min-h-48 overflow-hidden rounded-[clamp(1rem,2cqi,1.5rem)] bg-surface shadow-[inset_0_0_0_1px_var(--line),0_40px_80px_-48px_oklch(0.2_0.02_255/0.35)]',
@@ -29,6 +31,9 @@ const source = kind === 'video' && video ? parseMediaSource(video) : null
 const hasImage = kind === 'image' && Boolean(image?.src) && image?.src !== 'placeholder' && !image?.hidden
 const empty = kind === 'video' ? !source : !hasImage
 const cover = source ? ((await imageUrl(poster)) ?? (source.kind === 'youtube' ? source.thumbnail : undefined)) : undefined
+const coverSrcset = source ? await imageSrcset(poster) : undefined
+// The frame is at most 68rem wide and the full width of a phone.
+const coverSizes = '(min-width: 72rem) 68rem, 100vw'
 const name = label || 'Video'
 ---
 
@@ -68,7 +73,17 @@ const name = label || 'Video'
         data-label={name}
         data-poster={source.kind === 'file' ? cover : undefined}
       >
-        {cover && <img src={cover} alt="" class="absolute inset-0 size-full object-cover" loading="lazy" decoding="async" />}
+        {cover && (
+          <img
+            src={cover}
+            srcset={coverSrcset}
+            sizes={coverSrcset ? coverSizes : undefined}
+            alt=""
+            class="absolute inset-0 size-full object-cover"
+            loading={eager ? 'eager' : 'lazy'}
+            decoding="async"
+          />
+        )}
         <button
           type="button"
           class="group absolute inset-0 grid cursor-pointer place-items-center bg-[oklch(0.15_0.01_255/0.12)] transition-colors hover:bg-[oklch(0.15_0.01_255/0.22)] focus-visible:outline-2 focus-visible:outline-offset-[-4px] focus-visible:outline-accent"

package/template/src/components/seo/Seo.astro

@@ -60,4 +60,9 @@ const jsonLd = {
 <meta name="twitter:title" content={title} />
 <meta name="twitter:description" content={description} />
 {ogImage && <meta name="twitter:image" content={ogImage} />}
-<script type="application/ld+json" set:html={JSON.stringify(jsonLd).replace(/</g, '\\u003c')} />
+{/* Custom JSON-LD replaces the generated WebPage block. `<` is escaped so a value cannot close the script tag. */}
+{
+  (page.seo.jsonLd ?? [jsonLd]).map((block) => (
+    <script type="application/ld+json" set:html={JSON.stringify(block).replace(/</g, '\\u003c')} />
+  ))
+}

package/template/src/layouts/Base.astro

@@ -4,6 +4,7 @@ import type { Site } from '../components/organisms/site-definition'
 import Footer from '../components/organisms/Footer.astro'
 import Header from '../components/organisms/Header.astro'
 import Seo from '../components/seo/Seo.astro'
+import { analyticsEnabled } from '../lib/analytics'
 import { resolveLocalAsset } from '../lib/assets'
 import '../styles/global.css'
 
@@ -18,6 +19,8 @@ const ICON_TYPES: Record<string, string> = { png: 'image/png', jpg: 'image/jpeg'
 const iconType = icon ? ICON_TYPES[icon.format] : undefined
 const paletteCss = themeCss(site.theme.colors)
 const themeColor = site.theme.mode === 'dark' ? '#1c1e24' : '#f7f8f8'
+// Snippets ship in the live site's build only: not in `astro dev`, not in host previews. See lib/analytics.ts.
+const analytics = analyticsEnabled(process.env, import.meta.env.PROD) ? site.analytics : undefined
 ---
 
 <!doctype html>
@@ -27,6 +30,7 @@ const themeColor = site.theme.mode === 'dark' ? '#1c1e24' : '#f7f8f8'
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <Seo site={site} page={page} pathname={Astro.url.pathname} />
     <meta name="theme-color" content={themeColor} />
+    {analytics?.head && <Fragment set:html={analytics.head} />}
     {/* Always present so the editor can update the palette live. */}
     <style id="bm-theme" is:inline set:html={paletteCss}></style>
     {icon && <link rel="icon" type={iconType} href={icon.src} />}
@@ -43,6 +47,7 @@ const themeColor = site.theme.mode === 'dark' ? '#1c1e24' : '#f7f8f8'
       <slot />
     </main>
     <Footer site={site} />
+    {analytics?.bodyEnd && <Fragment set:html={analytics.bodyEnd} />}
     <script>
       const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches
       const observer =

package/template/src/lib/analytics.ts

@@ -0,0 +1,33 @@
+/** Build-time environment, as `process.env` gives it. */
+export type Env = Record<string, string | undefined>
+
+const ON = new Set(['on', '1', 'true', 'yes'])
+const OFF = new Set(['off', '0', 'false', 'no'])
+
+function readSwitch(value: string | undefined): boolean | undefined {
+  const word = value?.trim().toLowerCase()
+  if (word === undefined) return undefined
+  if (ON.has(word)) return true
+  if (OFF.has(word)) return false
+  return undefined
+}
+
+/**
+ * Whether this build puts `site.analytics` into its pages (`Base.astro` calls it with `process.env` and
+ * `import.meta.env.PROD`). Nobody has to set anything:
+ *
+ * 1. `BEARMINION_ANALYTICS=on|off` decides, when someone sets it (for hosts that cannot be told apart, or a
+ *    local test).
+ * 2. Otherwise only a production build counts, so `astro dev` sends no visits.
+ * 3. Vercel (`VERCEL_ENV`) and Netlify (`NETLIFY`, `CONTEXT`) say which deployment this is, so their preview
+ *    deployments send none either.
+ * 4. Any other host: every production build counts.
+ */
+export function analyticsEnabled(env: Env, production: boolean): boolean {
+  const override = readSwitch(env.BEARMINION_ANALYTICS)
+  if (override !== undefined) return override
+  if (!production) return false
+  if (env.VERCEL_ENV) return env.VERCEL_ENV === 'production'
+  if (env.NETLIFY === 'true') return env.CONTEXT === 'production'
+  return true
+}

package/template/src/lib/image-url.ts

@@ -7,6 +7,23 @@ import { isRemote, resolveLocalAsset } from './assets'
  * optimized to WebP; a file uploaded in this dev session is served by the editor's dev route; a remote URL is used as
  * it is. A missing file in `src/assets` fails the build, like a missing `<Image>`.
  */
+/** Widths for a responsive `srcset`; none wider than the file itself. */
+const SRCSET_WIDTHS = [480, 768, 1080, 1440, 1920]
+
+/**
+ * An image as a WebP `srcset`, for a plain `<img>` that is not an Astro `<Image>`, such as a video's cover. Undefined
+ * when the image is not a file in `src/assets` (a remote URL or a dev upload): then `imageUrl` alone is used.
+ */
+export async function imageSrcset(image: Image | undefined): Promise<string | undefined> {
+  if (!image || image.hidden || !image.src || image.src === 'placeholder' || isRemote(image.src)) return undefined
+  const asset = resolveLocalAsset(image.src.replace(/^\//, ''))
+  if (!asset) return undefined
+  const widths = SRCSET_WIDTHS.filter((width) => width < asset.width)
+  widths.push(Math.min(asset.width, SRCSET_WIDTHS.at(-1) ?? asset.width))
+  const sources = await Promise.all(widths.map(async (width) => `${(await getImage({ src: asset, width, format: 'webp' })).src} ${width}w`))
+  return sources.join(', ')
+}
+
 export async function imageUrl(image: Image | undefined, maxWidth = 1920): Promise<string | undefined> {
   if (!image || image.hidden || !image.src || image.src === 'placeholder') return undefined
   if (isRemote(image.src)) return image.src