orionplace-react 0.1.0 → 0.2.0

package/templates/components/orionplace/banners/MainBanner.tsx

@@ -0,0 +1,159 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import type { MouseEvent } from 'react';
+import {
+  useOrionplace,
+  useOrionplaceSelections,
+} from '@/providers/OrionplaceProvider';
+import { selectInit } from '@/stores/orionplace';
+import type {
+  IAppLoadCommonBanner,
+  TBannerFormats,
+} from '@/interfaces/orionplace';
+import { useOrionplaceMediaFormat } from '@/hooks/useOrionplaceMediaFormat';
+import { bannerFormatSizes, homeBannerSlides } from '@/lib/orionplace/homeContent';
+import { homeLabels } from '@/lib/orionplace/homeLabels';
+import { safePublicUrl } from '@/lib/orionplace/presentation';
+import { OrionplaceImage } from '@/components/orionplace/shared/OrionplaceImage';
+import styles from './MainBanner.module.css';
+
+export interface MainBannerProps {
+  label?: string;
+  format?: TBannerFormats | 'auto';
+  categoryHref?: (categoryId: number) => string;
+  onSelect?: (banner: IAppLoadCommonBanner) => void;
+}
+
+export function MainBanner({
+  label = '',
+  format = 'auto',
+  categoryHref,
+  onSelect,
+}: MainBannerProps) {
+  const init = useOrionplace(selectInit);
+  const locale = useOrionplaceSelections((state) => state.localeCode);
+  const mediaFormat = useOrionplaceMediaFormat();
+  const copy = homeLabels(locale);
+  const selectedFormat = format === 'auto' ? mediaFormat : format;
+  // The box has the shape of the chosen format's picture.
+  const size = bannerFormatSizes[selectedFormat];
+  const shape = { aspectRatio: `${size.width} / ${size.height}` };
+  const slides = useMemo(
+    () => homeBannerSlides(init, locale, selectedFormat),
+    [init, locale, selectedFormat],
+  );
+  const [index, setIndex] = useState(0);
+  const activeIndex = index < slides.length ? index : 0;
+  const active = slides[activeIndex];
+  const category = active?.banner.category;
+  const linked = category != null;
+  const href = linked && categoryHref
+    ? safePublicUrl(categoryHref(category))
+    : '';
+
+  useEffect(() => {
+    setIndex(0);
+  }, [slides]);
+
+  function move(offset: number) {
+    if (!slides.length) {
+      return;
+    }
+    setIndex((current) => (
+      current + offset + slides.length
+    ) % slides.length);
+  }
+
+  function select(event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) {
+    const modified = event.button > 0 || event.metaKey || event.ctrlKey ||
+      event.shiftKey || event.altKey;
+    if (href && modified) {
+      return;
+    }
+
+    event.preventDefault();
+    if (active && linked) {
+      onSelect?.(active.banner);
+    }
+  }
+
+  if (!active) {
+    return null;
+  }
+
+  const caption = label || copy.banner;
+  const media = (
+    <OrionplaceImage
+      src={active.src}
+      alt={`${caption} · ${activeIndex + 1}`}
+      width={size.width}
+      height={size.height}
+      loading="eager"
+      className={styles.image}
+    />
+  );
+  const banner = href ? (
+    <a
+      href={href}
+      data-banner-id={active.banner.id}
+      style={shape}
+      className={`${styles.banner} ${styles.interactive}`}
+      onClick={select}
+    >
+      {media}
+    </a>
+  ) : linked ? (
+    <button
+      type="button"
+      data-banner-id={active.banner.id}
+      style={shape}
+      className={`${styles.banner} ${styles.interactive}`}
+      onClick={select}
+    >
+      {media}
+    </button>
+  ) : (
+    <div
+      data-banner-id={active.banner.id}
+      style={shape}
+      className={styles.banner}
+    >
+      {media}
+    </div>
+  );
+
+  return (
+    <section
+      className={styles.root}
+      data-main-banner
+      aria-label={caption}
+      aria-roledescription="carousel"
+    >
+      {banner}
+      {slides.length > 1 && (
+        <div className={styles.controls}>
+          <span role="status" aria-live="polite" className={styles.counter}>
+            {activeIndex + 1} / {slides.length}
+          </span>
+          <button
+            type="button"
+            aria-label={copy.previous}
+            className={styles.control}
+            onClick={() => move(-1)}
+          >
+            ←
+          </button>
+          <button
+            type="button"
+            aria-label={copy.next}
+            className={styles.control}
+            onClick={() => move(1)}
+          >
+            →
+          </button>
+        </div>
+      )}
+    </section>
+  );
+}

package/templates/components/orionplace/blog/BlogArticle.README.md

@@ -0,0 +1,143 @@
+# BlogArticle
+
+## English
+
+`BlogArticle` shows one journal article, its subscription access state, attached
+products and discussion. `postId` identifies the article. A route can pass the
+matching `initialPost` from its server request; the first server HTML then
+contains the title, author, date, cover dimensions and readable article text,
+and the browser does not repeat the request. Without that value, `onLoad`
+receives `blog_posts_get` with `filters.id = postId`, page 1 and one requested
+item. A successful empty result calls `onMissing` only until an article has
+been shown. If a previously shown article disappears after the session changes,
+the component shows its unavailable state instead.
+
+Full text appears only while both `is_full` and `has_full_access` are true.
+Otherwise the component uses `post_preview_text` and links to `/tariffs` with
+the selected locale. When `premium_tariff_ids` contains plan IDs, the link also
+passes them in `ids`. The cover uses the earliest `preview_images` item, then
+the first `preview_image_urls` value. It reserves a 3:2 area and disappears if
+the image fails. Article videos accept HTTP or HTTPS addresses and the
+backend's `/ps3/...` paths. In an Android app build those paths (cover, videos,
+images and videos inside the text) load from the storefront address.
+
+During server rendering, editor HTML is converted to escaped text paragraphs.
+After hydration, DOMPurify replaces those paragraphs with sanitized formatting.
+The allowlist retains headings, text formatting, links, lists, quotes, code,
+tables, images and galleries, audio and video controls, collapsible sections,
+alignment and supported text styles. External links open in a new tab with
+`noopener noreferrer`; editor article links use `/journal/<id>`. Scripts,
+frames, forms, event attributes, unsafe URLs and unsupported styles are removed.
+A leading heading that repeats the page title is removed.
+
+For an authenticated, accessible non-public article with a positive reading
+time, trusted interaction with visible article text calls `onReading` with
+`blog_reading_start`. Timely follow-up requests use
+`blog_reading_heartbeat` and the interval returned by the previous response.
+Hiding the page, moving away, losing focus or becoming inactive pauses the
+requests. A 401, 403 or returned field error removes the full text and shows
+the access-changed notice.
+
+`related_products` supplies complete product objects to `ProductGroup`, so
+their standard cards are present during server rendering. The product callbacks
+forward the same payloads as `ProductGroup`; `productActionsDisabled` blocks
+their actions while the host is processing a request. `commentsProps` controls
+the article's `BlogComments` instance. Authentication changes reload the
+article. Loading, refreshable failure, access change and unavailable states are
+separate.
+
+### Props
+
+| Prop                                                                                                                    | Meaning                                                                                                              |
+| ----------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
+| `postId: number`                                                                                                        | ID of the post handled by BlogArticle.                                                                               |
+| `productActionsDisabled?: boolean`                                                                                      | Disables cart, wishlist, subscription and preorder actions.                                                          |
+| `initialPost?: IBlogPost`                                                                                               | Server-provided initial post used for the first render and hydration.                                                |
+| `commentsProps?: Omit<BlogCommentsProps, "postId">`                                                                     | Props forwarded to the comments child component.                                                                     |
+| `onLoad?: (action: BlogArticleLoadAction) => Promise<IBlogPost \| null \| undefined> \| IBlogPost \| null \| undefined` | Called when the component needs its primary data. The callback payload is shown in its type.                         |
+| `onReading?: (action: BlogReadingAction) => Promise<IBlogReadingData> \| IBlogReadingData`                              | Called when the article reading session starts, continues or stops. The callback payload is shown in its type.       |
+| `onBack?: () => void`                                                                                                   | Called when the visitor chooses Back. The callback has no payload.                                                   |
+| `onLoaded?: (post: IBlogPost) => void`                                                                                  | Called when the requested data loads successfully. The callback payload is shown in its type.                        |
+| `onMissing?: () => void`                                                                                                | Called when the requested public record does not exist. The callback has no payload.                                 |
+| `onSelect?: (product: IProduct) => void`                                                                                | Passes the displayed product object when its image or name is selected. The application handles product navigation. |
+| `onSelectSeller?: (seller: IProductSeller) => void`                                                                     | Passes the displayed product’s seller object when the seller is selected. The application opens the seller page. |
+| `onSelectVariant?: (selection: ProductActionSelection & { variant: IProductVariantValue; }) => void`                    | Passes the previously displayed product ID in `product` and chosen primary variant in `variant`. An available variant product replaces the card; the application loads missing product data. |
+| `onRequestSecondaryVariants?: (request: IProductSecondaryVariantRequest) => void`                                       | Passes the product ID in `product`, product group ID in `productGroup` and primary variant in `variant` when its secondary variants need loading. The application loads them and supplies them to the product store. |
+| `onSelectSecondaryVariant?: (selection: ProductActionSelection & { variant: IProductSecondaryVariant; }) => void`       | Passes the previously displayed product ID in `product` and chosen secondary variant in `variant` after replacing the displayed product. The secondary-variant data remains available. |
+| `onToggleFavorite?: (selection: ProductActionSelection & { selected: boolean; }) => void`                               | Passes the product ID in `product` and desired wishlist state in `selected` after the heart is pressed. The application confirms the change with a request and updates product data. |
+| `onAdd?: (selection: ProductActionSelection & { quantity: number; }) => void`                                           | Passes the product ID in `product` and the requested total quantity in `quantity` when adding an item or changing its quantity. The application sends the request and supplies confirmed product data. |
+| `onRemove?: (selection: ProductActionSelection & { cartItem: number; }) => void`                                        | Passes the product ID in `product` and cart item ID in `cartItem` when removing the last unit. The application removes that cart item and supplies confirmed product data. |
+| `onSubscribe?: (selection: ProductActionSelection) => void`                                                             | Passes the product ID in `product` when an availability notification is requested. The application handles any required sign-in, sends the request and updates subscription state. |
+| `onUnsubscribe?: (selection: ProductActionSelection) => void`                                                           | Passes the product ID in `product` when cancelling an availability notification. The application sends the request and supplies the confirmed subscription state. |
+| `onPreorder?: (selection: ProductActionSelection) => void`                                                              | Passes the product ID in `product` when preorder is selected. The application collects the required contact details and submits the request. |
+
+## Русский
+
+`BlogArticle` показывает одну статью журнала, её доступ по подписке,
+прикреплённые товары и обсуждение. `postId` задаёт статью. Маршрут может
+передать подходящий `initialPost`, полученный серверным запросом. Тогда первый
+серверный HTML уже содержит название, автора, дату, размеры обложки и
+читаемый текст, а браузер не повторяет запрос. Без этого значения `onLoad`
+получает `blog_posts_get` с `filters.id = postId`, первой страницей и одним
+запрошенным элементом. Первый успешный пустой результат вызывает `onMissing`.
+Если ранее показанная статья исчезла после смены сессии, компонент оставляет
+на странице состояние недоступной статьи.
+
+Полный текст показывается, только когда `is_full` и `has_full_access` равны
+`true`. В остальных случаях компонент использует `post_preview_text` и даёт
+ссылку на `/tariffs` с выбранной локалью. Если в `premium_tariff_ids` есть
+ID тарифов, ссылка также передаёт их в `ids`. Для обложки используется первое
+по `display_order` изображение из `preview_images`, затем первое значение
+`preview_image_urls`. Область сохраняет пропорции 3:2. После ошибки загрузки
+обложка исчезает. Компонент выводит только видео с адресами HTTP или HTTPS.
+
+При серверном рендеринге HTML редактора превращается в экранированные
+текстовые абзацы. После гидратации DOMPurify заменяет их очищенным
+форматированным HTML. Разрешены заголовки, оформление текста, ссылки, списки,
+цитаты, код, таблицы, изображения и галереи, аудио и видео с управлением,
+раскрываемые разделы, выравнивание и поддерживаемые стили текста. Внешние
+ссылки открываются в новой вкладке с `noopener noreferrer`, а ссылки редактора
+на статьи ведут на `/journal/<id>`. Скрипты, фреймы, формы, обработчики
+событий, небезопасные адреса и неподдерживаемые стили удаляются. Первый
+заголовок, повторяющий название страницы, удаляется.
+
+Для вошедшего покупателя чтение доступной непубличной статьи с положительным
+временем чтения учитывается после реального действия внутри видимого текста.
+Первый вызов `onReading` передаёт `blog_reading_start`, следующие
+своевременные вызовы — `blog_reading_heartbeat` с интервалом из предыдущего
+ответа. Скрытие страницы, уход от текста, потеря фокуса и отсутствие действий
+приостанавливают запросы. Ответ 401, 403 или ошибка поля удаляет полный текст
+и показывает сообщение об изменении доступа.
+
+`related_products` передаёт полные объекты товаров в `ProductGroup`, поэтому
+обычные карточки есть уже в серверном HTML. Обработчики товаров получают те
+же данные, что и в `ProductGroup`; `productActionsDisabled` блокирует
+действия, пока магазин обрабатывает запрос. `commentsProps` управляет
+экземпляром `BlogComments` этой статьи. При смене авторизации статья
+загружается снова. Загрузка, ошибка с повтором, изменение доступа и
+недоступная статья показаны как отдельные состояния.
+
+### Свойства
+
+| Свойство                                                                                                                | Назначение                                                                                                             |
+| ----------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| `postId: number`                                                                                                        | ID статьи, с которым работает BlogArticle.                                                                             |
+| `productActionsDisabled?: boolean`                                                                                      | Блокирует корзину, избранное, подписку и предзаказ.                                                                    |
+| `initialPost?: IBlogPost`                                                                                               | Начальное значение статьи, полученное на сервере для первого рендера и гидратации.                                     |
+| `commentsProps?: Omit<BlogCommentsProps, "postId">`                                                                     | Свойства, передаваемые дочернему компоненту комментариев.                                                              |
+| `onLoad?: (action: BlogArticleLoadAction) => Promise<IBlogPost \| null \| undefined> \| IBlogPost \| null \| undefined` | Вызывается, когда компоненту нужны основные данные. Данные обработчика указаны в его типе.                             |
+| `onReading?: (action: BlogReadingAction) => Promise<IBlogReadingData> \| IBlogReadingData`                              | Вызывается, когда сеанс чтения статьи начинается, продолжается или завершается. Данные обработчика указаны в его типе. |
+| `onBack?: () => void`                                                                                                   | Вызывается, когда покупатель выбирает «Назад». Обработчик не получает данные.                                          |
+| `onLoaded?: (post: IBlogPost) => void`                                                                                  | Вызывается, когда запрошенные данные успешно загружены. Данные обработчика указаны в его типе.                         |
+| `onMissing?: () => void`                                                                                                | Вызывается, когда запрошенная общедоступная запись не существует. Обработчик не получает данные.                       |
+| `onSelect?: (product: IProduct) => void`                                                                                | Передаёт объект отображаемого товара при выборе его изображения или названия. Приложение выполняет переход к товару. |
+| `onSelectSeller?: (seller: IProductSeller) => void`                                                                     | Передаёт объект продавца отображаемого товара при выборе продавца. Приложение открывает его страницу. |
+| `onSelectVariant?: (selection: ProductActionSelection & { variant: IProductVariantValue; }) => void`                    | Передаёт ID ранее отображаемого товара в `product` и выбранный основной вариант в `variant`. Доступный товар выбранного варианта заменяет карточку; отсутствующие данные загружает приложение. |
+| `onRequestSecondaryVariants?: (request: IProductSecondaryVariantRequest) => void`                                       | Передаёт ID товара в `product`, ID группы товаров в `productGroup` и основной вариант в `variant`, когда для него нужно загрузить дополнительные варианты. Приложение загружает и передаёт их в хранилище товаров. |
+| `onSelectSecondaryVariant?: (selection: ProductActionSelection & { variant: IProductSecondaryVariant; }) => void`       | Передаёт ID ранее отображаемого товара в `product` и выбранный дополнительный вариант в `variant` после замены отображаемого товара. Выбор сохраняет данные дополнительных вариантов. |
+| `onToggleFavorite?: (selection: ProductActionSelection & { selected: boolean; }) => void`                               | Передаёт ID товара в `product` и желаемое состояние избранного в `selected` после нажатия сердца. Приложение подтверждает изменение запросом и обновляет данные товара. |
+| `onAdd?: (selection: ProductActionSelection & { quantity: number; }) => void`                                           | Передаёт `product` — ID товара и `quantity` — запрошенное итоговое количество при добавлении или изменении количества. Приложение выполняет запрос и передаёт подтверждённые данные товара. |
+| `onRemove?: (selection: ProductActionSelection & { cartItem: number; }) => void`                                        | Передаёт ID товара в `product` и ID позиции корзины в `cartItem` при удалении последней единицы. Приложение удаляет эту позицию и передаёт подтверждённые данные товара. |
+| `onSubscribe?: (selection: ProductActionSelection) => void`                                                             | Передаёт ID товара в `product` при выборе уведомления о поступлении. Приложение выполняет вход, если он нужен, отправляет запрос и обновляет состояние подписки. |
+| `onUnsubscribe?: (selection: ProductActionSelection) => void`                                                           | Передаёт ID товара в `product` при отмене уведомления о поступлении. Приложение отправляет запрос и передаёт подтверждённое состояние подписки. |
+| `onPreorder?: (selection: ProductActionSelection) => void`                                                              | Передаёт ID товара в `product` при выборе предзаказа. Приложение собирает необходимые контактные данные и отправляет запрос. |

package/templates/components/orionplace/blog/BlogArticle.module.css

@@ -0,0 +1,304 @@
+/* The gap and base text of `op-feature-stack` in the other packages. */
+.feature,
+.article,
+.header,
+.related {
+  display: grid;
+  min-width: 0;
+  gap: 1.25rem;
+}
+
+.feature {
+  color: var(--orionplace-text);
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  container: article / inline-size;
+}
+
+.article,
+.skeleton {
+  width: 100%;
+  max-width: 45rem;
+  margin-inline: auto;
+}
+
+/* The shared storefront button, as op-feature-button in Nuxt and Svelte. */
+.button {
+  composes: button from '../shared/features.module.css';
+  width: fit-content;
+}
+
+.error {
+  composes: notice noticeError from '../account/account.module.css';
+}
+
+.header h1 {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 500;
+  line-height: 1.25;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem;
+  color: var(--orionplace-muted);
+  font-size: 0.75rem;
+  line-height: 1rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.cover {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  height: auto;
+  aspect-ratio: 3 / 2;
+  object-fit: cover;
+  background: var(--orionplace-surface);
+}
+
+.prose {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  line-height: 1.85;
+}
+
+.prose::after {
+  display: table;
+  clear: both;
+  content: '';
+}
+
+.prose :where(p, ul, ol, blockquote, pre, figure) {
+  margin: 1rem 0;
+}
+
+.prose :where(h1, h2, h3, h4, h5, h6, figure, table, pre) {
+  clear: both;
+}
+
+.prose :where(h1, h2, h3, h4, h5, h6) {
+  margin: 2rem 0 1rem;
+  font-weight: 500;
+  line-height: 1.3;
+}
+
+.prose h1 { font-size: 1.875rem; }
+.prose h2 { font-size: 1.5rem; }
+.prose h3 { font-size: 1.25rem; }
+.prose h4 { font-size: 1.125rem; }
+.prose h5 { font-size: 1rem; }
+.prose h6 {
+  font-size: 0.875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.prose :where(strong, b) { font-weight: 500; }
+.prose :where(sub, sup) { font-size: 0.75em; line-height: 0; }
+.prose mark { color: inherit; background: var(--orionplace-attention-surface); }
+
+.prose a {
+  border-bottom: 1px solid currentColor;
+  color: var(--orionplace-text);
+  text-decoration: none;
+}
+
+.prose a:not([href]) { border-bottom: 0; }
+.prose a:focus-visible { color: var(--orionplace-accent); outline: none; }
+@media (hover: hover) {
+  .prose a:hover {
+    color: var(--orionplace-accent);
+    outline: none;
+  }
+}
+.prose :where(ul, ol) { padding-left: 1.5rem; }
+.prose ul { list-style: disc; }
+.prose ol { list-style: decimal; }
+.prose li > :where(ul, ol) { margin: 0.25rem 0; }
+.prose li > p { margin: 0; }
+.prose ul[data-type='taskList'] { padding-left: 0; list-style: none; }
+
+.prose li[data-type='taskItem'] {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+}
+
+.prose li[data-type='taskItem'] > label {
+  display: flex;
+  align-items: center;
+  min-height: 1.85em;
+}
+
+.prose blockquote {
+  padding-left: 1rem;
+  border-left: 2px solid var(--orionplace-border);
+  color: var(--orionplace-muted);
+}
+
+.prose hr {
+  margin: 2rem 0;
+  border: 0;
+  border-top: 1px solid var(--orionplace-border);
+}
+
+.prose code {
+  padding: 0.1em 0.3em;
+  background: var(--orionplace-muted-surface);
+  font-size: 0.875em;
+}
+
+.prose pre {
+  overflow-x: auto;
+  padding: 1rem;
+  border: 1px solid var(--orionplace-border);
+  background: var(--orionplace-muted-surface);
+  line-height: 1.6;
+}
+
+.prose pre code { padding: 0; background: transparent; }
+
+.prose table {
+  display: block;
+  max-width: 100%;
+  overflow-x: auto;
+  margin: 1rem 0;
+  border-collapse: collapse;
+}
+
+.prose :where(th, td) {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--orionplace-border);
+  text-align: left;
+  vertical-align: top;
+}
+
+.prose :where(img, video, audio) { max-width: 100%; }
+.prose img { height: auto; }
+.prose figure { max-width: 100%; }
+.prose figure > img { display: block; margin-inline: auto; }
+.prose figcaption { margin-top: 0.5rem; color: var(--orionplace-muted); }
+
+.prose :where(img, figure)[data-float='left'],
+.prose :where(img, figure)[style*='float: left'] {
+  float: left;
+  max-width: 50%;
+  margin: 0.25rem 1.5rem 1rem 0;
+}
+
+.prose :where(img, figure)[data-float='right'],
+.prose :where(img, figure)[style*='float: right'] {
+  float: right;
+  max-width: 50%;
+  margin: 0.25rem 0 1rem 1.5rem;
+}
+
+.prose details {
+  margin: 1rem 0;
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--orionplace-border);
+}
+
+.prose summary { cursor: pointer; font-weight: 500; }
+
+/* `op-feature-panel op-feature-stack` in the other packages. */
+.access {
+  display: grid;
+  gap: 1.25rem;
+  padding: 1.25rem;
+  border: 1px solid var(--orionplace-border);
+  background: var(--orionplace-surface);
+}
+
+.access h2,
+.related h2 {
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.access p { margin: 0; color: var(--orionplace-muted); line-height: 1.5rem; }
+.video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
+
+.skeleton {
+  display: grid;
+  gap: 0.75rem;
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+.skeleton span { display: block; background: var(--orionplace-border); }
+.skeletonTitle { width: 92%; height: 1.75rem; }
+.skeletonTitleShort { width: 60%; height: 1.75rem; }
+.skeletonMeta { display: flex; gap: 1rem; }
+.skeletonMeta span { width: 7rem; height: 0.75rem; }
+.skeletonCover {
+  width: 100%;
+  aspect-ratio: 3 / 2;
+  border: 1px solid var(--orionplace-border);
+  background: transparent !important;
+}
+.skeletonText { display: grid; gap: 1rem; padding-block: 0.5rem; }
+.skeletonText span { height: 0.75rem; }
+.skeletonText span:nth-child(3) { width: 92%; }
+.skeletonText span:nth-child(5) { width: 80%; }
+.skeletonText span:last-child { width: 66%; }
+.skeletonRelated { width: 10rem; height: 0.75rem; }
+.skeletonCards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
+.skeletonCards span {
+  aspect-ratio: 3 / 4;
+  border: 1px solid var(--orionplace-border);
+  background: transparent;
+}
+
+.screenReaderOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+@container article (min-width: 592px) {
+  .header h1 { font-size: 1.875rem; }
+}
+
+/* A narrow article has no room for text beside a floated image; 592px is
+   the article's width in the /journal page on a 640px screen. */
+@container article (max-width: 591px) {
+  .prose :where(img, figure)[data-float],
+  .prose :where(img, figure)[style*='float:'] {
+    float: none !important;
+    width: auto !important;
+    max-width: 100%;
+    margin: 1rem 0 !important;
+  }
+}
+
+/* The related products' placeholder shows three cards from 660px of article
+   width, as on Nuxt. */
+@container article (max-width: 659px) {
+  .skeletonCards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .skeletonCards span:last-child { display: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skeleton { animation: none; }
+}