orionplace-react 0.6.0 → 0.6.2

package/templates/lib/orionplace/pageMetadata.ts

@@ -13,6 +13,8 @@ import type { ICategoryLocale } from '@/interfaces/orionplace/category/ICategory
 import type { IPromoDefinition } from '@/interfaces/orionplace/cart/ICartData';
 import { promoName } from '@/lib/orionplace/promoPresentation';
 import {
+  storefrontAbsoluteUrl,
+  storefrontCanonicalUrl,
   storefrontPageMetadata,
   type StorefrontSeoPage,
 } from '@/lib/orionplace/pageSeo';
@@ -111,6 +113,8 @@ export function storefrontMetadata(
   locale: string,
   url: URL,
   records: StorefrontPageRecords = {},
+  // The public origin (the proxy's host on the server, the page's own in the browser).
+  origin = url.origin,
 ) {
   const segments               = url.pathname.split('/').filter(Boolean);
   let page                     = records.pageKind ?? storefrontSeoPage(url.pathname);
@@ -125,7 +129,13 @@ export function storefrontMetadata(
   let image: string | undefined;
   const tags: MetaTags         = [];
   let robots: string | undefined;
-  if (privatePages.has(page) || page === 'notFound' || page === 'error') {
+  // A private product link (`key`) stays out of search results, loaded or not.
+  if (
+    privatePages.has(page) ||
+    page === 'notFound' ||
+    page === 'error' ||
+    (page === 'product' && url.searchParams.get('key'))
+  ) {
     robots = 'noindex, nofollow';
   } else if (page === 'browse') {
     robots = 'noindex, follow';
@@ -177,9 +187,6 @@ export function storefrontMetadata(
       field('meta_description') || field('short_description'),
     ).slice(0, 160);
     image              = product.images?.full?.[0] ?? product.images?.small?.[0];
-    if (url.searchParams.get('key')) {
-      robots = 'noindex, nofollow';
-    }
   } else if (page === 'publication' && records.post) {
     values.title       = getAvailableNestedValueFromObject(
       records.post.locale,
@@ -210,12 +217,24 @@ export function storefrontMetadata(
     values.title       = promoName(records.promo, locale);
   }
   const content                = storefrontPageMetadata(page, locale, values);
+  // Link previews load only complete image addresses; the canonical address
+  // is the sitemap's one for this page.
+  image                        = storefrontAbsoluteUrl(image, origin);
+  const canonical              = storefrontCanonicalUrl(
+    origin,
+    url.pathname,
+    url.search,
+    locale,
+    robots,
+  );
   const metadata: Metadata     = {
     ...content,
     ...(robots ? { robots } : {}),
+    ...(canonical ? { alternates: { canonical } } : {}),
     openGraph: {
       title: content.title,
       description: content.description,
+      ...(canonical ? { url: canonical } : {}),
       ...(image ? { images: [image] } : {}),
     },
   };
@@ -230,6 +249,7 @@ export function storefrontMetadata(
     'og:title': content.title,
     'og:description': content.description,
     'og:image': image,
+    'og:url': canonical,
   })) {
     headTags.set(name, {
       ...(name.startsWith('og:') ? { property: name } : { name }),

package/templates/lib/orionplace/pageSeo.ts

@@ -282,3 +282,71 @@ export function storefrontPageMetadata(
     keywords: plainText(values.keywords ?? '') || `${title}, ${copy[2]}`,
   };
 }
+
+/*
+ * Addresses for search engines and link previews. The public origin is the
+ * storefront host the visitor used (the proxy's Host or X-Forwarded-Host),
+ * over HTTPS; a local host keeps HTTP for development.
+ */
+export function storefrontPublicOrigin(host: string | null | undefined): string {
+  const name  = (host ?? '').split(',')[0]!.trim().toLowerCase();
+  if (!/^(?:[a-z0-9-]+(?:\.[a-z0-9-]+)*|\[[0-9a-f:]+\])(?::\d{1,5})?$/.test(name)) {
+    return '';
+  }
+  const local = /^(?:localhost|127(?:\.\d{1,3}){3}|\[::1\])(?::\d+)?$/.test(name);
+  return `${local ? 'http' : 'https'}://${name}`;
+}
+
+/**
+ * A complete address for a link preview image: a storefront path such as
+ * `/ps3/blog/posts/images/5` gets the public origin; without an origin it is
+ * left out, since a relative og:image is not loaded by link previews.
+ */
+export function storefrontAbsoluteUrl(
+  value: string | null | undefined,
+  origin: string,
+): string | undefined {
+  if (!value) {
+    return undefined;
+  }
+  try {
+    const url = origin ? new URL(value, `${origin}/`) : new URL(value);
+    return /^https?:$/.test(url.protocol) ? url.toString() : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+// The pages the sitemap lists (runtime/marketplace.mjs), plus plan pages.
+const indexedPage = /^\/(?:|catalog|journal|tariffs|manufacturers|sellers|stores|contact|privacy|(?:category|product|journal)\/\d+|tariffs\/[^/]+\/\d+)$/;
+
+/**
+ * The canonical address of a page: the sitemap's address for it, the page in
+ * the language it shows (`?locale=`). Pages that are not listed, pages with
+ * other query parameters (filters, page numbers, private keys) and noindex
+ * pages get none.
+ */
+export function storefrontCanonicalUrl(
+  origin: string,
+  pathname: string,
+  search: string,
+  locale: string,
+  robots?: string,
+): string | undefined {
+  const path  = pathname.replace(/\/+$/, '') || '/';
+  const query = new URLSearchParams(search);
+  query.delete('locale');
+  if (
+    !origin ||
+    /noindex/i.test(robots ?? '') ||
+    !indexedPage.test(path) ||
+    [...query.keys()].length
+  ) {
+    return undefined;
+  }
+  const url   = new URL(path, `${origin}/`);
+  if (locale) {
+    url.searchParams.set('locale', locale);
+  }
+  return url.toString();
+}

package/templates/lib/orionplace/productListLocation.ts

@@ -0,0 +1,130 @@
+import type { ProductFacetSelection } from '@/interfaces/orionplace/products/IProductSearchFacets';
+
+// Where a product list is: its result page and the chosen filters. Category,
+// search, seller and featured lists keep it in the URL as `?page&filters`, so
+// a reload and the browser's Back button from a product return to the same
+// list. `filters` is the filter selection as JSON; the address is visitor
+// input, so only plain filter values within the limits below are read.
+export interface ProductListLocation {
+  page: number;
+  filters: ProductFacetSelection;
+}
+
+type QueryValue = string | null | undefined | readonly (string | null)[];
+
+const locationKeys    = ['page', 'filters'];
+const maxPage         = 10000;
+const maxFiltersText  = 4000;
+const maxFilterKeys   = 40;
+const maxFilterIds    = 200;
+const maxFilterString = 100;
+const filterKey       = /^[a-z][a-z0-9_]{0,63}$/;
+
+function first(value: QueryValue) {
+  return Array.isArray(value) ? value[0] : (value as string | null | undefined);
+}
+
+function filterValue(value: unknown): ProductFacetSelection[string] {
+  if (Array.isArray(value)) {
+    const ids = value.filter(
+      (id): id is number => Number.isSafeInteger(id) && id >= 0,
+    );
+
+    return ids.length === value.length && ids.length && ids.length <= maxFilterIds
+      ? ids
+      : undefined;
+  }
+  if (typeof value === 'string') {
+    return value && value.length <= maxFilterString ? value : undefined;
+  }
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value : undefined;
+  }
+
+  // `false` chooses nothing, as an empty list or text.
+  return value === true ? true : undefined;
+}
+
+export function productListFiltersFromText(
+  text: string | null | undefined,
+): ProductFacetSelection {
+  if (!text || text.length > maxFiltersText) {
+    return {};
+  }
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(text);
+  } catch {
+    return {};
+  }
+  if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+    return {};
+  }
+  const result: ProductFacetSelection = {};
+  for (const [key, value] of Object.entries(parsed).slice(0, maxFilterKeys)) {
+    const checked = filterKey.test(key) ? filterValue(value) : undefined;
+    if (checked !== undefined) {
+      result[key] = checked;
+    }
+  }
+
+  return result;
+}
+
+// The filters as URL text, or undefined when nothing is chosen.
+// Keys are sorted, so the same choice always gives the same text.
+export function productListFiltersText(filters: ProductFacetSelection) {
+  const chosen = productListFiltersFromText(JSON.stringify(filters));
+  const keys   = Object.keys(chosen).sort();
+
+  return keys.length
+    ? JSON.stringify(Object.fromEntries(keys.map((key) => [key, chosen[key]])))
+    : undefined;
+}
+
+export function productListLocationFromQuery(
+  query: Record<string, QueryValue>,
+): ProductListLocation {
+  const page = Number(first(query.page));
+
+  return {
+    page: Number.isSafeInteger(page) && page > 0 && page <= maxPage ? page : 1,
+    filters: productListFiltersFromText(first(query.filters)),
+  };
+}
+
+// Compares the URL form, so the same choice in another key order is equal.
+export function sameProductListLocation(
+  left: ProductListLocation,
+  right: ProductListLocation,
+) {
+  return (
+    left.page === right.page &&
+    productListFiltersText(left.filters) === productListFiltersText(right.filters)
+  );
+}
+
+// The query of `next`: other parameters such as `locale` or `q` stay, and the
+// first page without filters adds nothing.
+export function productListLocationQuery(
+  query: Record<string, QueryValue>,
+  next: ProductListLocation,
+) {
+  const result: Record<string, string> = {};
+
+  for (const [key, value] of Object.entries(query)) {
+    const text = first(value);
+    if (typeof text === 'string' && !locationKeys.includes(key)) {
+      result[key] = text;
+    }
+  }
+  if (next.page > 1) {
+    result.page = String(next.page);
+  }
+  const filters = productListFiltersText(next.filters);
+  if (filters) {
+    result.filters = filters;
+  }
+
+  return result;
+}

package/templates/lib/orionplace/productSearch.ts

@@ -7,6 +7,7 @@ import type {
   IProductSearchResponse,
 } from '@/interfaces/orionplace/products/IProductSearchApi';
 import type { OrionplaceApi } from '@/lib/orionplace/api';
+import { initialSearchFacets } from '@/lib/orionplace/searchFilters';
 
 export type ProductSearchPage = NonNullable<
   IProductSearchResponse['page_data']
@@ -230,3 +231,50 @@ export async function loadProductSearch(
     signal,
   );
 }
+
+/**
+ * A result page with `fullFacets`: the filter choices of the unfiltered
+ * first page, when the page was a later one or loaded with filters.
+ */
+export type ProductListPage = ProductSearchPage & {
+  fullFacets?: IProductSearchFacets | null;
+};
+
+/**
+ * A list opened from its URL (Back, a reload) on a later page or with
+ * filters gets only the filtered choices, or none after the first page.
+ * With `withFullFacets` this also asks for the unfiltered first page, so the
+ * filter panel keeps every seller, price and option to choose from. The
+ * extra request is only for the panel: when it fails the panel shows the
+ * choices of the result.
+ */
+export async function loadProductListPage(
+  api: OrionplaceApi,
+  scope: ProductSearchScope,
+  filters: ProductFacetSelection = {},
+  page = 1,
+  signal?: AbortSignal,
+  withFullFacets = true,
+): Promise<ProductListPage> {
+  // Both requests run together.
+  const [data, full] = await Promise.all([
+    loadProductSearch(api, scope, filters, page, signal),
+    withFullFacets && (page > 1 || Object.keys(filters).length > 0)
+      ? loadProductSearch(api, scope, {}, 1, signal).catch(() => undefined)
+      : undefined,
+  ]);
+
+  return full ? { ...data, fullFacets: productSearchFacetData(full) } : data;
+}
+
+/** The filter choices of a list page: the full ones first, as kept by the store. */
+export function productListFacetData(
+  page: ProductListPage | undefined,
+  previous: IProductSearchFacets | null = null,
+) {
+  return [page?.fullFacets ?? null, productSearchFacetData(page)].reduce(
+    (current, incoming) =>
+      incoming ? initialSearchFacets(current, incoming) : current,
+    previous,
+  );
+}

package/templates/lib/orionplace/serverMetadata.ts

@@ -1,4 +1,6 @@
 import { cache } from 'react';
+import { headers } from 'next/headers';
+import { storefrontPublicOrigin } from '@/lib/orionplace/pageSeo';
 import { getOrionplaceAppLoad } from '@/lib/orionplace/appLoadServer';
 import {
   getOrionplaceServerLocale,
@@ -73,11 +75,16 @@ export const getStorefrontMetadataContext = cache(async () => {
   } catch {
     // The page retains its request error and offers Retry.
   }
+  const incoming                                 = await headers();
   return storefrontMetadata(
     result?.response.page_data.init ?? null,
     locale,
     url,
     { product, post, tariff, promo, pageKind },
+    // The address the visitor used: the proxy's host.
+    storefrontPublicOrigin(
+      incoming.get('x-forwarded-host') ?? incoming.get('host'),
+    ),
   );
 });
 

package/templates/proxy.ts

@@ -1,4 +1,5 @@
 import { NextResponse, type NextRequest } from 'next/server';
+import { marketplaceNoindexPath } from '@orionplace-runtime/marketplace.mjs';
 import {
   APP_LOAD_HANDOFF_HEADER,
   startAppLoad,
@@ -47,6 +48,10 @@ export async function proxy(request: NextRequest) {
     ...(unavailable ? { status: 503 } : {}),
   });
   response.headers.set('Cache-Control', 'private, no-store');
+  // Pages under ORIONPLACE_NOINDEX_PATHS stay out of search engines.
+  if (marketplaceNoindexPath(request.nextUrl.pathname)) {
+    response.headers.set('X-Robots-Tag', 'noindex, follow');
+  }
   return response;
 }