orionplace-svelte 0.7.3 → 0.7.4

package/README.md

@@ -521,6 +521,8 @@ and selected language, including client navigation. Public events and banner
 images come from Application Load.
 Pages with a canonical address also link the same page in the other storefront languages (`hreflang`) and set `og:type` and `og:locale`; a journal article adds its publication date (`article:published_time`) and schema.org `BlogPosting` data. The store icon (`logos.ico`) is the page's `<link rel="icon">`. An unknown `?locale` opens the default language.
 
+List pages (journal, categories, stores) link their previous and next pages as real links (`?page=2`). Each later page has its own canonical address and a title with its page number; a journal page past the last one answers 404.
+
 ## Application Load starter
 
 The root layout load awaits `POST /api/appload` before your pages

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orionplace-svelte",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "description": "SvelteKit 2 storefront for your Orionplace marketplace: setup CLI, server API gateway, typed store and ready-made catalog, cart, checkout and account components in English and Russian, plus an Android app build.",
   "type": "module",
   "license": "MIT",

package/templates/src/lib/components/orionplace/blog/StorefrontJournal.svelte

@@ -669,6 +669,7 @@
         <StorefrontPagination
           pagination={pagination.value}
           pending={Boolean(task.state.pending)}
+          linked
           onChange={changePage}
         />
       </div>

package/templates/src/lib/components/orionplace/search/ProductSearchResults.svelte

@@ -6,6 +6,8 @@
   import { useOrionplaceSelectionsStore } from '@/lib/stores/orionplaceSelections.svelte';
   import { browseLabels } from '@/lib/utils/orionplace/browseLabels';
   import { hasSearchFilters } from '@/lib/utils/orionplace/searchFilters';
+  import { storefrontPageHref } from '@/lib/utils/orionplace/pageSeo';
+  import { currentSearch, useRoute } from '@/lib/orionplace/navigation.svelte';
   import SearchFilters from '@/lib/components/orionplace/search/SearchFilters.svelte';
   import ProductGroup from '@/lib/components/orionplace/products/ProductGroup.svelte';
   import type { ProductFacetSelection } from '@/lib/interfaces/orionplace/products/IProductSearchFacets';
@@ -195,6 +197,36 @@
     },
   );
   const labels               = computed(() => browseLabels(selectionStore.localeCode));
+  // Every list of this component keeps its page in the address (`?page=`),
+  // so previous and next are links search engines follow; a click changes
+  // the page in place.
+  const route                = useRoute();
+  const search               = computed(() => currentSearch());
+  const previousHref         = computed(() =>
+    !inputs.pending && inputs.page > 1
+      ? storefrontPageHref(route.path, search.value, inputs.page - 1)
+      : undefined,
+  );
+  const nextHref             = computed(() =>
+    !inputs.pending && !inputs.failed && inputs.hasNext
+      ? storefrontPageHref(route.path, search.value, inputs.page + 1)
+      : undefined,
+  );
+
+  // A link opened in a new tab or window keeps its default.
+  function followPage(event: MouseEvent, value: number) {
+    if (
+      event.button !== 0 ||
+      event.metaKey ||
+      event.ctrlKey ||
+      event.shiftKey ||
+      event.altKey
+    ) {
+      return;
+    }
+    event.preventDefault();
+    emit('changePage', value);
+  }
   const filtersOpen          = ref(false);
   const hasFilters           = computed(() =>
     hasSearchFilters(
@@ -571,17 +603,26 @@
               `,
             ]}
           >
-            <button
-              type="button"
-              disabled={inputs.pending || inputs.page === 1}
-              onclick={() => {
-                emit('changePage', inputs.page - 1);
+            <svelte:element
+              this={previousHref.value ? 'a' : 'button'}
+              type={previousHref.value ? undefined : 'button'}
+              href={previousHref.value}
+              rel={previousHref.value ? 'prev' : undefined}
+              disabled={previousHref.value
+                ? undefined
+                : inputs.pending || inputs.page === 1}
+              onclick={(event: MouseEvent) => {
+                if (previousHref.value) {
+                  followPage(event, inputs.page - 1);
+                } else {
+                  emit('changePage', inputs.page - 1);
+                }
               }}
               class={[
                 `
                   inline-flex h-11 items-center justify-center px-5 [font-family:inherit]
                   text-xs font-medium uppercase tracking-[0.08em] text-orionplace-text
-                  border border-solid border-orionplace-border bg-transparent
+                  no-underline border border-solid border-orionplace-border bg-transparent
                   cursor-pointer outline-none hover:border-orionplace-text
                   focus-visible:border-orionplace-text disabled:cursor-not-allowed
                   disabled:opacity-40
@@ -589,7 +630,7 @@
               ]}
             >
               ← {labels.value.previous}
-            </button>
+            </svelte:element>
             <span
               class={[
                 'text-xs uppercase tracking-[0.08em] tabular-nums text-orionplace-muted',
@@ -601,17 +642,26 @@
                 {labels.value.of} {inputs.pages}
               {/if}
             </span>
-            <button
-              type="button"
-              disabled={inputs.pending || inputs.failed || !inputs.hasNext}
-              onclick={() => {
-                emit('changePage', inputs.page + 1);
+            <svelte:element
+              this={nextHref.value ? 'a' : 'button'}
+              type={nextHref.value ? undefined : 'button'}
+              href={nextHref.value}
+              rel={nextHref.value ? 'next' : undefined}
+              disabled={nextHref.value
+                ? undefined
+                : inputs.pending || inputs.failed || !inputs.hasNext}
+              onclick={(event: MouseEvent) => {
+                if (nextHref.value) {
+                  followPage(event, inputs.page + 1);
+                } else {
+                  emit('changePage', inputs.page + 1);
+                }
               }}
               class={[
                 `
                   inline-flex h-11 items-center justify-center px-5 [font-family:inherit]
                   text-xs font-medium uppercase tracking-[0.08em] text-orionplace-text
-                  border border-solid border-orionplace-border bg-transparent
+                  no-underline border border-solid border-orionplace-border bg-transparent
                   cursor-pointer outline-none hover:border-orionplace-text
                   focus-visible:border-orionplace-text disabled:cursor-not-allowed
                   disabled:opacity-40
@@ -619,7 +669,7 @@
               ]}
             >
               {labels.value.next} →
-            </button>
+            </svelte:element>
           </nav>
         {/if}
       </div>

package/templates/src/lib/components/orionplace/shared/StorefrontPagination.README.md

@@ -8,6 +8,10 @@ the list start while accounting for a fixed header and reduced-motion preference
 focus moves to the list's first heading. Both controls are disabled while the request
 runs.
 
+With `linked`, for lists that keep their page number in the address (`?page=2`),
+previous and next are links to those addresses, so search engines reach every page of
+the list; a click still changes the page in place.
+
 Source: `src/lib/components/orionplace/shared/StorefrontPagination.svelte`.
 
 ## Inputs
@@ -18,6 +22,7 @@ Source: `src/lib/components/orionplace/shared/StorefrontPagination.svelte`.
 | `pending` | `boolean` | Optional |
 | `scrollTarget` | `HTMLElement \| string \| null` | Optional |
 | `compact` | `boolean` | Optional |
+| `linked` | `boolean` | Optional |
 
 ## Callbacks
 

package/templates/src/lib/components/orionplace/shared/StorefrontPagination.svelte

@@ -3,6 +3,8 @@
   import { useOrionplaceSelectionsStore } from '@/lib/stores/orionplaceSelections.svelte';
   import { featureLabels } from '@/lib/utils/orionplace/featureLabels';
   import { scrollToPaginatedList } from '@/lib/utils/orionplace/paginationScroll';
+  import { storefrontPageHref } from '@/lib/utils/orionplace/pageSeo';
+  import { currentSearch, useRoute } from '@/lib/orionplace/navigation.svelte';
   import type { IApiPagination } from '@/lib/interfaces/orionplace/accounts/IProfileData';
   import '@/lib/components/orionplace/shared/features.css';
 
@@ -11,6 +13,12 @@
     pending?: boolean;
     scrollTarget?: HTMLElement | string | null;
     compact?: boolean;
+    /**
+     * The list keeps its page number in the address (`?page=`): previous and
+     * next are links to those addresses, so search engines reach every page.
+     * A click still changes the page in place.
+     */
+    linked?: boolean;
     onChange?: (...args: [page: number]) => unknown;
     [attribute: string]: any;
   };
@@ -19,6 +27,7 @@
     pending: input_pending,
     scrollTarget: input_scrollTarget,
     compact: input_compact,
+    linked: input_linked,
     onChange: callback_onChange,
     ...attributes
   }: Props             = $props();
@@ -35,6 +44,9 @@
     get compact() {
       return input_compact;
     },
+    get linked() {
+      return input_linked;
+    },
   };
   const emit           = (event: string, ...args: any[]) => {
     const handlers: Record<string, ((...args: any[]) => unknown) | undefined> =
@@ -48,11 +60,46 @@
   const labels         = computed(() => featureLabels(selectionStore.localeCode));
   const page           = computed(() => inputs.pagination.page ?? 1);
   const nav            = ref<HTMLElement>();
+  const route          = useRoute();
+  const previousPage   = computed(
+    () => inputs.pagination.previous_page_number || page.value - 1,
+  );
+  const nextPage       = computed(() =>
+    typeof inputs.pagination.next_page_number === 'number'
+      ? inputs.pagination.next_page_number
+      : page.value + 1,
+  );
+  const search         = computed(() => currentSearch());
+  const previousHref   = computed(() =>
+    inputs.linked && !inputs.pending && inputs.pagination.has_previous
+      ? storefrontPageHref(route.path, search.value, previousPage.value)
+      : undefined,
+  );
+  const nextHref       = computed(() =>
+    inputs.linked && !inputs.pending && inputs.pagination.has_next
+      ? storefrontPageHref(route.path, search.value, nextPage.value)
+      : undefined,
+  );
 
   function change(value: number) {
     emit('change', value);
     scrollToPaginatedList(nav.value, inputs.scrollTarget);
   }
+
+  // A link opened in a new tab or window keeps its default.
+  function follow(event: MouseEvent, value: number, act: (value: number) => void) {
+    if (
+      event.button !== 0 ||
+      event.metaKey ||
+      event.ctrlKey ||
+      event.shiftKey ||
+      event.altKey
+    ) {
+      return;
+    }
+    event.preventDefault();
+    act(value);
+  }
 </script>
 
 {#if inputs.pagination.has_other_pages || inputs.pagination.has_next || inputs.pagination.has_previous}
@@ -67,13 +114,22 @@
       attributes.class,
     ]}
   >
-    <button
-      type="button"
+    <svelte:element
+      this={previousHref.value ? 'a' : 'button'}
+      type={previousHref.value ? undefined : 'button'}
+      href={previousHref.value}
+      rel={previousHref.value ? 'prev' : undefined}
       aria-label={inputs.compact ? labels.value.previous : undefined}
       title={inputs.compact ? labels.value.previous : undefined}
-      disabled={inputs.pending || !inputs.pagination.has_previous}
-      onclick={() => {
-        change(inputs.pagination.previous_page_number || page.value - 1);
+      disabled={previousHref.value
+        ? undefined
+        : inputs.pending || !inputs.pagination.has_previous}
+      onclick={(event: MouseEvent) => {
+        if (previousHref.value) {
+          follow(event, previousPage.value, change);
+        } else {
+          change(previousPage.value);
+        }
       }}
       class={['op-feature-button']}
     >
@@ -93,7 +149,7 @@
       {:else}
         {labels.value.previous}
       {/if}
-    </button>
+    </svelte:element>
     <span class={['tabular-nums']}>
       {labels.value.page}
       {page.value}
@@ -101,17 +157,22 @@
         / {inputs.pagination.pages}
       {/if}
     </span>
-    <button
-      type="button"
+    <svelte:element
+      this={nextHref.value ? 'a' : 'button'}
+      type={nextHref.value ? undefined : 'button'}
+      href={nextHref.value}
+      rel={nextHref.value ? 'next' : undefined}
       aria-label={inputs.compact ? labels.value.next : undefined}
       title={inputs.compact ? labels.value.next : undefined}
-      disabled={inputs.pending || !inputs.pagination.has_next}
-      onclick={() => {
-        change(
-          typeof inputs.pagination.next_page_number === 'number'
-            ? inputs.pagination.next_page_number
-            : page.value + 1,
-        );
+      disabled={nextHref.value
+        ? undefined
+        : inputs.pending || !inputs.pagination.has_next}
+      onclick={(event: MouseEvent) => {
+        if (nextHref.value) {
+          follow(event, nextPage.value, change);
+        } else {
+          change(nextPage.value);
+        }
       }}
       class={['op-feature-button']}
     >
@@ -131,6 +192,6 @@
       {:else}
         {labels.value.next}
       {/if}
-    </button>
+    </svelte:element>
   </nav>
 {/if}

package/templates/src/lib/components/orionplace/stores/StorefrontStores.svelte

@@ -397,6 +397,7 @@
   <StorefrontPagination
     pagination={pagination.value}
     pending={busy.value}
+    linked={!inputs.storeId}
     onChange={(page: number) => (inputs.storeId ? load(page) : open(page))}
   />
 </section>

package/templates/src/lib/composables/useOrionplacePageSeo.svelte.ts

@@ -2,7 +2,7 @@ import { page as currentPage } from '$app/state';
 import { browser } from '$app/environment';
 import { computed, toValue } from '@/lib/orionplace/reactivity.svelte';
 import type { MaybeRefOrGetter } from '@/lib/orionplace/reactivity.svelte';
-import { useHead, useSeoMeta } from '@/lib/orionplace/navigation.svelte';
+import { currentSearch, useHead, useSeoMeta } from '@/lib/orionplace/navigation.svelte';
 import { useOrionplaceStore } from '@/lib/stores/orionplace.svelte';
 import {
   storefrontAbsoluteUrl,
@@ -11,6 +11,7 @@ import {
   storefrontOpenGraphLocale,
   storefrontOpenGraphType,
   storefrontPageMetadata,
+  storefrontPagedText,
   storefrontPublicOrigin,
 } from '@/lib/utils/orionplace/pageSeo';
 import type { StorefrontSeoPage } from '@/lib/utils/orionplace/pageSeo';
@@ -52,22 +53,35 @@ export function useOrionplacePageSeo(
     storefrontCanonicalUrl(
       origin,
       currentPage.url.pathname,
-      currentPage.url.search,
+      currentSearch(),
       toValue(locale),
       toValue(values.robots),
     ),
   );
 
+  // A later list page (`?page=2`) names its page number.
+  const paged     = computed(() => ({
+    title:
+      storefrontPagedText(metadata.value.title, canonical.value, toValue(locale)) ??
+      metadata.value.title,
+    description:
+      storefrontPagedText(
+        metadata.value.description,
+        canonical.value,
+        toValue(locale),
+      ) ?? metadata.value.description,
+  }));
+
   // Link previews use the same title and description as the page; the
   // image is the record's first picture when the page has one, as a
   // complete address.
   const seo       = {
-    title: () => metadata.value.title,
-    description: () => metadata.value.description,
+    title: () => paged.value.title,
+    description: () => paged.value.description,
     keywords: () => metadata.value.keywords,
     robots: () => toValue(values.robots),
-    ogTitle: () => metadata.value.title,
-    ogDescription: () => metadata.value.description,
+    ogTitle: () => paged.value.title,
+    ogDescription: () => paged.value.description,
     ogImage: () => storefrontAbsoluteUrl(toValue(values.image), origin),
     ogUrl: () => canonical.value,
     ogType: () => storefrontOpenGraphType(toValue(page)),

package/templates/src/lib/composables/useOrionplaceProductSearch.svelte.ts

@@ -9,7 +9,7 @@ import type { MaybeRefOrGetter } from '@/lib/orionplace/reactivity.svelte';
 import { browser } from '$app/environment';
 import { replaceState } from '$app/navigation';
 import { page as currentPage } from '$app/state';
-import { routeHref } from '@/lib/orionplace/navigation.svelte';
+import { noteShallowAddress, routeHref } from '@/lib/orionplace/navigation.svelte';
 import { useOrionplaceStore } from '@/lib/stores/orionplace.svelte';
 import { useOrionplaceApi } from '@/lib/composables/useOrionplaceApi.svelte';
 import { useOrionplaceProgress } from '@/lib/composables/useOrionplaceProgress.svelte';
@@ -260,6 +260,7 @@ export function useOrionplaceProductSearch(
       }),
       currentPage.state,
     );
+    noteShallowAddress();
   }
 
   function cancel() {

package/templates/src/lib/orionplace/navigation.svelte.ts

@@ -6,6 +6,25 @@ import { getContext, setContext, untrack } from 'svelte';
 import { computed, ref } from '@/lib/orionplace/reactivity.svelte';
 import type { Ref } from '@/lib/orionplace/reactivity.svelte';
 
+// A shallow replaceState (a product list's page and filters) leaves
+// `page.url` as it was, so the address bar is read again after each one.
+const shallowAddress = $state({ version: 0 });
+
+/** Call after a shallow replaceState that changed the address. */
+export function noteShallowAddress() {
+  shallowAddress.version += 1;
+}
+
+/**
+ * The query string of the address shown (`?locale=en&page=2`), also after a
+ * shallow replaceState; reactive in components and computed values.
+ */
+export function currentSearch(): string {
+  const fromPage = page.url.search;
+  void shallowAddress.version;
+  return browser ? window.location.search : fromPage;
+}
+
 export function routeHref(target: unknown): string {
   if (typeof target === 'string') {
     return target;

package/templates/src/lib/orionplace/pageLoad.ts

@@ -10,8 +10,10 @@ import {
   blogPageSize,
   blogViewType,
   blogPostsRequest,
+  journalPagePastEnd,
   requestBlogPost,
 } from '@/lib/utils/orionplace/blogLayout';
+import type { IBlogJournalPage } from '@/lib/utils/orionplace/blogLayout';
 import type { OrionplaceApi } from '@/lib/utils/orionplace/api';
 import type { OrionplaceSnapshot } from '@/lib/orionplace/appLoadData';
 
@@ -66,6 +68,7 @@ export async function loadStorefrontPageData(
   }
   const api                           = createApi(store);
   const data: Record<string, unknown> = {};
+  let journalPastEnd                  = false;
   const numberId                      = (value: string | null | undefined) =>
     /^[1-9]\d*$/.test(value ?? '') ? Number(value) : undefined;
   const id                            = numberId(event.params.id);
@@ -129,7 +132,7 @@ export async function loadStorefrontPageData(
         const pageSize                                 = blogPageSize(
           blogViewType(store.init?.visual_settings?.blog_view_type),
         );
-        data[`orionplace:journal:${page}:${pageSize}`] = {
+        const journalPage: IBlogJournalPage            = {
           page,
           pageSize,
           data: await api.request(
@@ -137,6 +140,10 @@ export async function loadStorefrontPageData(
             blogPostsRequest({}, page, pageSize),
           ),
         };
+        data[`orionplace:journal:${page}:${pageSize}`] = journalPage;
+        // A page number past the last page has no articles: 404, so search
+        // engines drop it instead of indexing an empty list.
+        journalPastEnd                                 = journalPagePastEnd(page, journalPage);
       } else if (path.startsWith('/journal/') && id) {
         const post                            = await requestBlogPost(api, id);
         data[`orionplace:journal-post:${id}`] = { post: post ?? null };
@@ -158,6 +165,7 @@ export async function loadStorefrontPageData(
       ? data[`orionplace:tariff:${id}`]
       : undefined;
   if (
+    journalPastEnd ||
     (record as { found?: boolean } | undefined)?.found === false ||
     (data[`orionplace:journal-post:${id}`] as { post?: unknown } | undefined)
       ?.post === null

package/templates/src/lib/utils/orionplace/blogLayout.ts

@@ -93,3 +93,16 @@ export function blogCoverInitial(title: string) {
 export function blogCoverPattern(postId: number) {
   return Math.abs(postId) % 3;
 }
+
+/**
+ * Whether a journal page number lies past the last page: the server render
+ * loaded that page (no filters) and it has no articles. Page 1 of an empty
+ * journal is a page of its own.
+ */
+export function journalPagePastEnd(
+  page: number,
+  loaded: IBlogJournalPage | null | undefined,
+): boolean {
+  const posts = loaded?.data?.posts?.data;
+  return page > 1 && loaded?.page === page && Array.isArray(posts) && !posts.length;
+}

package/templates/src/lib/utils/orionplace/pageSeo.ts

@@ -460,11 +460,15 @@ export function storefrontAbsoluteUrl(
 // 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+)$/;
 
+// Listed pages that are lists with page numbers (`?page=2`).
+const pagedList   = /^\/(?:journal|stores|category\/\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.
+ * the language it shows (`?locale=`). A later page of a list is a page of its
+ * own (`?locale=en&page=2`, Google's pagination guide), linked from the
+ * list's page links. Pages that are not listed, pages with other query
+ * parameters (filters, private keys) and noindex pages get none.
  */
 export function storefrontCanonicalUrl(
   origin: string,
@@ -473,9 +477,13 @@ export function storefrontCanonicalUrl(
   locale: string,
   robots?: string,
 ): string | undefined {
-  const path  = pathname.replace(/\/+$/, '') || '/';
-  const query = new URLSearchParams(search);
+  const path       = pathname.replace(/\/+$/, '') || '/';
+  const query      = new URLSearchParams(search);
+  const pageNumber = query.get('page');
   query.delete('locale');
+  if (pageNumber !== null && pagedList.test(path) && /^[1-9]\d{0,5}$/.test(pageNumber)) {
+    query.delete('page');
+  }
   if (
     !origin ||
     /noindex/i.test(robots ?? '') ||
@@ -484,13 +492,56 @@ export function storefrontCanonicalUrl(
   ) {
     return undefined;
   }
-  const url   = new URL(path, `${origin}/`);
+  const url        = new URL(path, `${origin}/`);
   if (locale) {
     url.searchParams.set('locale', locale);
   }
+  if (pageNumber && Number(pageNumber) > 1 && pagedList.test(path)) {
+    url.searchParams.set('page', pageNumber);
+  }
   return url.toString();
 }
 
+/**
+ * A later page of a list repeats the list's title and description; the page
+ * number keeps them distinct (search engines report repeated titles as
+ * duplicates). The number comes from the canonical address, so only the
+ * indexed list pages get it.
+ */
+export function storefrontPagedText(
+  text: string | undefined,
+  canonical: string | undefined,
+  locale: string,
+): string | undefined {
+  const page = canonical ? Number(new URL(canonical).searchParams.get('page')) : 0;
+  if (!text || !(page > 1)) {
+    return text;
+  }
+  const words: Record<string, string> = { ru: 'страница', es: 'página' };
+  const word                          = words[storefrontCopyLanguage(locale)] ?? 'page';
+  return `${text} · ${word} ${page}`;
+}
+
+/**
+ * The address of another page of the list on screen: the current address
+ * with `page=` set (left out for page 1), every other parameter kept. Page
+ * links are real links, so search engines reach every page of a list.
+ */
+export function storefrontPageHref(
+  pathname: string,
+  search: string,
+  page: number,
+): string {
+  const query = new URLSearchParams(search);
+  if (page > 1) {
+    query.set('page', String(page));
+  } else {
+    query.delete('page');
+  }
+  const text  = query.toString();
+  return `${pathname}${text ? `?${text}` : ''}`;
+}
+
 /** og:type of a page: a product and a journal article have their own kinds. */
 export function storefrontOpenGraphType(
   page: StorefrontSeoPage,
@@ -605,7 +656,7 @@ export function storefrontArticleData(input: {
  */
 export function storefrontIconLinks(
   icon: string | null | undefined,
-): { key: string; rel: string; href: string }[] {
+): { key: string; rel: 'icon'; href: string }[] {
   const href = storefrontAbsoluteUrl(icon, '');
   return href ? [{ key: 'icon', rel: 'icon', href }] : [];
 }