create-bearminion 1.2.0 → 1.2.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # create-bearminion
 
+## 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/package.json

@@ -1,10 +1,10 @@
 {
   "name": "create-bearminion",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "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

@@ -200,7 +200,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.2.1",
     "class-variance-authority": "^0.7.1",
     "sharp": "^0.35.5",
     "tailwind-merge": "^3.7.0",

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/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