orionplace-nuxt 0.7.3 → 0.7.4

package/README.md

@@ -509,6 +509,8 @@ through `useHead()`. Profile and logout pages remain excluded from indexing;
 search results retain their `noindex, follow` policy.
 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.
+
 ## Documentation
 
 - [Create a Nuxt frontend](https://orionmarket.place/en/sandbox/new-project/nuxt)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orionplace-nuxt",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "description": "Nuxt 4 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/app/components/orionplace/blog/StorefrontJournal.vue

@@ -618,6 +618,7 @@
           <StorefrontPagination
             :pagination="pagination"
             :pending="Boolean(task.state.pending)"
+            linked
             @change="changePage"
           />
         </div>

package/templates/app/components/orionplace/search/ProductSearchResults.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
   import { computed, ref, watch } from 'vue';
+  import { useRoute } from '#imports';
   import { useOrionplaceStableHeight } from '@/composables/useOrionplaceStableHeight';
   import { useOrionplaceBrowseStore } from '@/stores/orionplaceBrowse';
   import { useOrionplaceSelectionsStore } from '@/stores/orionplaceSelections';
   import { browseLabels } from '@/utils/orionplace/browseLabels';
   import { hasSearchFilters } from '@/utils/orionplace/searchFilters';
+  import { storefrontPageHref } from '@/utils/orionplace/pageSeo';
   import SearchFilters from '@/components/orionplace/search/SearchFilters.vue';
   import ProductGroup from '@/components/orionplace/products/ProductGroup.vue';
   import type { ProductFacetSelection } from '@/interfaces/orionplace/products/IProductSearchFacets';
@@ -95,6 +97,38 @@
     }
   });
   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(
+    () => new URL(route.fullPath, 'http://storefront').search,
+  );
+  const previousHref = computed(() =>
+    !props.pending && props.page > 1
+      ? storefrontPageHref(route.path, search.value, props.page - 1)
+      : undefined,
+  );
+  const nextHref     = computed(() =>
+    !props.pending && !props.failed && props.hasNext
+      ? storefrontPageHref(route.path, search.value, props.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(
@@ -410,22 +444,29 @@
           "
           data-search-pagination
         >
-          <button
-            type="button"
-            :disabled="pending || page === 1"
+          <component
+            :is="previousHref ? 'a' : 'button'"
+            :type="previousHref ? undefined : 'button'"
+            :href="previousHref"
+            :rel="previousHref ? 'prev' : undefined"
+            :disabled="previousHref ? undefined : pending || 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
+              text-orionplace-text 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
             "
-            @click="emit('changePage', page - 1)"
+            @click="
+              previousHref
+                ? followPage($event, page - 1)
+                : emit('changePage', page - 1)
+            "
           >
             ← {{ labels.previous }}
-          </button>
+          </component>
           <span
             class="
               text-xs uppercase tracking-[0.08em] tabular-nums
@@ -435,22 +476,29 @@
             {{ labels.page }} {{ page }}
             <template v-if="pages">{{ labels.of }} {{ pages }}</template>
           </span>
-          <button
-            type="button"
-            :disabled="pending || failed || !hasNext"
+          <component
+            :is="nextHref ? 'a' : 'button'"
+            :type="nextHref ? undefined : 'button'"
+            :href="nextHref"
+            :rel="nextHref ? 'next' : undefined"
+            :disabled="nextHref ? undefined : pending || failed || !hasNext"
             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
+              text-orionplace-text 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
             "
-            @click="emit('changePage', page + 1)"
+            @click="
+              nextHref
+                ? followPage($event, page + 1)
+                : emit('changePage', page + 1)
+            "
           >
             {{ labels.next }} →
-          </button>
+          </component>
         </nav>
       </div>
     </section>

package/templates/app/components/orionplace/shared/StorefrontPagination.README.md

@@ -40,6 +40,11 @@ pages supplied by the full starter.
 between them, for a narrow list such as the support conversations; the buttons
 keep Previous and Next as their accessible names.
 
+`linked` is 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, and a click still changes the page in place.
+The journal and the store list use it.
+
 ## Endpoint coverage
 
 No direct API request; the parent supplies the state.

package/templates/app/components/orionplace/shared/StorefrontPagination.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
   import { computed, ref } from 'vue';
+  import { useRoute } from '#imports';
   import { useOrionplaceSelectionsStore } from '@/stores/orionplaceSelections';
   import { featureLabels } from '@/utils/orionplace/featureLabels';
   import { scrollToPaginatedList } from '@/utils/orionplace/paginationScroll';
+  import { storefrontPageHref } from '@/utils/orionplace/pageSeo';
   import type { IApiPagination } from '@/interfaces/orionplace/accounts/IProfileData';
   import '@/components/orionplace/shared/features.css';
 
@@ -11,17 +13,58 @@
     pending?: boolean;
     scrollTarget?: HTMLElement | string | null;
     compact?: boolean;
+    linked?: boolean;
   }>();
+  // `linked`: the list keeps its page number in the address (`?page=`), so
+  // previous and next are links to those addresses and search engines reach
+  // every page. A click still changes the page in place.
   const emit           = defineEmits<{ change: [page: number] }>();
   const selectionStore = useOrionplaceSelectionsStore();
   const labels         = computed(() => featureLabels(selectionStore.localeCode));
   const page           = computed(() => props.pagination.page ?? 1);
   const nav            = ref<HTMLElement>();
+  const route          = useRoute();
+  const previousPage   = computed(
+    () => props.pagination.previous_page_number || page.value - 1,
+  );
+  const nextPage       = computed(() =>
+    typeof props.pagination.next_page_number === 'number'
+      ? props.pagination.next_page_number
+      : page.value + 1,
+  );
+  const search         = computed(
+    () => new URL(route.fullPath, 'http://storefront').search,
+  );
+  const previousHref   = computed(() =>
+    props.linked && !props.pending && props.pagination.has_previous
+      ? storefrontPageHref(route.path, search.value, previousPage.value)
+      : undefined,
+  );
+  const nextHref       = computed(() =>
+    props.linked && !props.pending && props.pagination.has_next
+      ? storefrontPageHref(route.path, search.value, nextPage.value)
+      : undefined,
+  );
 
   function change(value: number) {
     emit('change', value);
     scrollToPaginatedList(nav.value, props.scrollTarget);
   }
+
+  // A link opened in a new tab or window keeps its default.
+  function follow(event: MouseEvent, value: number) {
+    if (
+      event.button !== 0 ||
+      event.metaKey ||
+      event.ctrlKey ||
+      event.shiftKey ||
+      event.altKey
+    ) {
+      return;
+    }
+    event.preventDefault();
+    change(value);
+  }
 </script>
 
 <template>
@@ -41,13 +84,20 @@
       The compact form fits a narrow list: arrow buttons named for screen
       readers, with the page count between them.
     -->
-    <button
+    <component
+      :is="previousHref ? 'a' : 'button'"
       class="op-feature-button"
-      type="button"
+      :type="previousHref ? undefined : 'button'"
+      :href="previousHref"
+      :rel="previousHref ? 'prev' : undefined"
       :aria-label="compact ? labels.previous : undefined"
       :title="compact ? labels.previous : undefined"
-      :disabled="pending || !pagination.has_previous"
-      @click="change(pagination.previous_page_number || page - 1)"
+      :disabled="previousHref ? undefined : pending || !pagination.has_previous"
+      @click="
+        previousHref
+          ? follow($event, previousPage)
+          : change(previousPage)
+      "
     >
       <svg
         v-if="compact"
@@ -63,24 +113,21 @@
         <path d="m15 5-7 7 7 7" />
       </svg>
       <template v-else>{{ labels.previous }}</template>
-    </button>
+    </component>
     <span class="tabular-nums">
       {{ labels.page }} {{ page }}
       <template v-if="pagination.pages">/ {{ pagination.pages }}</template>
     </span>
-    <button
+    <component
+      :is="nextHref ? 'a' : 'button'"
       class="op-feature-button"
-      type="button"
+      :type="nextHref ? undefined : 'button'"
+      :href="nextHref"
+      :rel="nextHref ? 'next' : undefined"
       :aria-label="compact ? labels.next : undefined"
       :title="compact ? labels.next : undefined"
-      :disabled="pending || !pagination.has_next"
-      @click="
-        change(
-          typeof pagination.next_page_number === 'number'
-            ? pagination.next_page_number
-            : page + 1,
-        )
-      "
+      :disabled="nextHref ? undefined : pending || !pagination.has_next"
+      @click="nextHref ? follow($event, nextPage) : change(nextPage)"
     >
       <svg
         v-if="compact"
@@ -96,6 +143,6 @@
         <path d="m9 5 7 7-7 7" />
       </svg>
       <template v-else>{{ labels.next }}</template>
-    </button>
+    </component>
   </nav>
 </template>

package/templates/app/components/orionplace/stores/StorefrontStores.vue

@@ -339,6 +339,7 @@
     <StorefrontPagination
       :pagination="pagination"
       :pending="busy"
+      :linked="!storeId"
       @change="storeId ? load($event) : open($event)"
     />
   </section>

package/templates/app/composables/useOrionplacePageSeo.ts

@@ -9,6 +9,7 @@ import {
   storefrontOpenGraphLocale,
   storefrontOpenGraphType,
   storefrontPageMetadata,
+  storefrontPagedText,
   storefrontPublicOrigin,
 } from '@/utils/orionplace/pageSeo';
 import type { StorefrontSeoPage } from '@/utils/orionplace/pageSeo';
@@ -59,19 +60,35 @@ export function useOrionplacePageSeo(
     ),
   );
 
+  // 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)),
+    // Nuxt's head types leave out og:type `product` (Open Graph product
+    // pages); the tag renders as given.
+    ogType: () =>
+      storefrontOpenGraphType(toValue(page)) as 'website' | 'article',
     ogLocale: () => storefrontOpenGraphLocale(toValue(locale)),
     articlePublishedTime: () => toValue(values.published),
     articleModifiedTime: () => toValue(values.modified),
@@ -96,7 +113,7 @@ export function useOrionplacePageSeo(
             { key: 'canonical', rel: 'canonical', href: canonical.value },
             ...alternates.value.map((alternate) => ({
               key: `alternate-${alternate.hreflang}`,
-              rel: 'alternate',
+              rel: 'alternate' as const,
               hreflang: alternate.hreflang,
               href: alternate.href,
             })),

package/templates/app/pages/journal/index.vue

@@ -4,9 +4,11 @@
   import { useOrionplaceStore } from '@/stores/orionplace';
   import { useOrionplacePageSeo } from '@/composables/useOrionplacePageSeo';
   import { useOrionplaceServerData } from '@/composables/useOrionplaceServerData';
+  import { useOrionplaceMissingPage } from '@/composables/useOrionplaceMissingPage';
   import {
     blogPageNumber,
     blogPageSize,
+    journalPagePastEnd,
     blogPostsRequest,
     blogViewType,
   } from '@/utils/orionplace/blogLayout';
@@ -49,6 +51,11 @@
   );
 
   useOrionplacePageSeo('journal', () => store.localeCode);
+
+  // A page number past the last page has no articles: it answers 404, so
+  // search engines drop it instead of indexing an empty list.
+  const pastLastPage = journalPagePastEnd(page.value, serverPage.value);
+  useOrionplaceMissingPage(() => pastLastPage, 'Page not found');
 </script>
 
 <template>

package/templates/app/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/app/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 }] : [];
 }