itube-specs 0.0.1040 → 0.0.1042

package/SITE_UPDATES.md

@@ -11,6 +11,20 @@
 коммиты до бампа); `npm run patch` сам проставит ей номер версии. Формат пункта: что сделать и где,
 кому именно (всем / сайтам с N), что будет, если не сделать.
 
+## 0.0.1041 — 2026-10-19
+
+- **Сайтам со своим `composables/use-meta.ts` или форком `pages/videos/[slug].vue` ради меты (videosection-redesign):**
+  правила меты videosection.com переехали в слой. `useMeta`: для страницы > 1 сначала ищется ключ `<key>_paged` (с
+  `{p}` — номером), мета из API (`seo`) может идти через шаблоны `api_title` / `api_description` (+ `_paged`) с
+  `{text}` = значение API; нет таких ключей — всё как раньше. `useCategoryPage(pageData, { metaKeys: true })` — мета и
+  h1 категории через `useMeta` по ключам (`{text}` — название, анти-дубль слова ниши), мета категории из API — через
+  `api_*`. `useSearchPage(relatedSearch, { metaSortOptions })` — уровень сортировки в ключах меты поиска.
+  `appConfig.videoPage.metaFromPhrases` — description ролика из фраз перехода / тегов / категорий (склейка ключами
+  `meta.videos-slug.tags_and` / `tags_tail`), `{thirdText}` — название в Title Case. Свой `use-meta.ts` и форк страницы
+  видео удалить (образец — коммит videosection-redesign с этим изменением). Не сделать — копии продолжат работать,
+  но будут отставать от слоя (в форке страницы видео, например, остаётся пустой «Recent searches»). Остальным —
+  ничего, по умолчанию мета как была.
+
 ## 0.0.1040 — 2026-10-19
 
 - **Сайтам со своими `utils/adverts-helper.ts` / `utils/popunder-helper.ts` (videosection-redesign):** не копировать

package/app.config.ts

@@ -0,0 +1,43 @@
+import type { INavExtraItem, INavItemOverride, IQuickFilterScheme, ISecondNavItem } from './types';
+
+export default defineAppConfig({
+  // Дефолты, чтобы слой собирался/тестировался standalone.
+  // Проект deep-merge'ит свои per-site значения поверх.
+  theme: 'dark',
+  quickVideoFilters: [] as IQuickFilterScheme[],
+  logoSize: null as { width: number, height: number } | null,
+  secondNav: [] as ISecondNavItem[],
+  /** Правки пунктов главной навигации слоя по их `title` (подпись, ссылка по нишам). */
+  navOverrides: {} as Record<string, INavItemOverride>,
+  /** Дополнительные пункты главной навигации, каждый — за пунктом слоя `after`. */
+  navExtraItems: [] as INavExtraItem[],
+  /** Есть ли у сайта сгруппированный вид категорий (`/categories` — группы, `/categories/all` — A–Z).
+   *  `false` — `/categories` сам список A–Z: `CategoryNav` без табов Grouped / A-Z, «All» ведёт на `/categories`. */
+  categoriesGrouped: true,
+  /** Блок Live Cams в сетках листингов (при `FeatureWebcamsEnabled`), `null` — нет. `videos` — после какой строки
+   *  карточек и сколько врезок вебкам-тумб (хвост того же списка) в сетке видео листинга (не похожие, не плейлист,
+   *  не когда страница передала врезки сама); `models` — в основной сетке моделей (`priority`, не футер). */
+  gridWebcams: {
+    videos: null as { afterRows: number, inserts: number } | null,
+    models: null as { afterRows: number } | null,
+  },
+  /** Класс кликабельной части карточек в сетках видео и моделей — для сайтовых хуков (триггер попандера). */
+  cardTriggerClass: '',
+  /** Состав страницы видео. */
+  videoPage: {
+    /** Фразы, по которым пришли на ролик, — строкой над заголовком. */
+    refererPhrases: false,
+    /** Пагинация похожих. */
+    relatedPagination: true,
+    /** Карусель моделей под похожими. */
+    relatedModels: true,
+    /** Блок Live Cams после похожих (при `FeatureWebcamsEnabled`); врезки в похожие берут хвост того же списка. */
+    webcamsBlock: false,
+    /** Сколько моделей из хвоста списка уходит во врезки похожих, когда блок Live Cams включён. */
+    webcamInserts: 8,
+    /** Мета ролика как на старых движках: description — до трёх фраз перехода (недостающие — из тегов), без них —
+     *  категории, склейка ключами `meta.videos-slug.tags_and` / `tags_tail`; в title доступен `{thirdText}` — название
+     *  в Title Case. Выключено — description из описания ролика. */
+    metaFromPhrases: false,
+  },
+});

package/assets/scss/layout/_layout.scss

@@ -25,6 +25,7 @@
 
 .main {
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   flex-grow: 1;
 }
 

package/assets/scss/mixins/_page.scss

@@ -18,6 +18,7 @@
   text-transform: uppercase;
   letter-spacing: var(--tracking-wide);
   font-weight: 700;
+  overflow-wrap: break-word;
 
   @include from-br(xm) {
     @include font-lg;

package/components/card/playlist.vue

@@ -319,6 +319,7 @@ $updated-word-width: 240px;
 .card-playlist {
   position: relative;
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   width: 100%;
   container-type: inline-size;
   align-items: start;
@@ -383,8 +384,10 @@ $updated-word-width: 240px;
 .card-playlist__wrapper-header {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   justify-content: space-between;
   column-gap: 24px;
+  row-gap: 4px;
   margin-bottom: 8px;
 }
 

package/components/ui/breadcrumbs.vue

@@ -84,7 +84,15 @@ const resultItems = computed(() => {
   color: $breadcrumbs-text;
 }
 
+.ui-breadcrumbs ol li:last-child {
+  min-width: 0;
+}
+
 .ui-breadcrumbs ol li:last-child .ui-breadcrumbs__item {
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
   color: $breadcrumbs-text--current;
   text-transform: capitalize;
 }

package/composables/page/use-category-page.ts

@@ -1,5 +1,6 @@
 import { CategoriesApiService } from '../../services/api/categories.service';
 import { VideosApiService } from '../../services/api/videos.service';
+import { sortItemsDefault } from '../../lib';
 import type { IBreadcrumbItem, ICardInfo, IChipsItem } from '../../types';
 
 /** Слаги категорий, у которых не показываем связанные поисковые фразы. */
@@ -27,8 +28,15 @@ export async function useCategoryPageData() {
 /**
  * Логика страницы категории поверх `useCategoryPageData()`: мета и 404, хлебные крошки, номер страницы,
  * карточка инфо и чипсы связанных фраз. Синхронная — вызывать в setup после `await useCategoryPageData()`.
+ *
+ * Мета по умолчанию — из API (`metaTitle` / `metaDescription`, без них — название), h1 — `header` или название.
+ * `metaKeys: true` — мета и h1 через `useMeta` по ключам `meta.<page>.<sort>.*` (`{text}` — название, с анти-дублем
+ * слова ниши); мета из API идёт через шаблоны `api_title` / `api_description`, пустая — по ключам.
  */
-export function useCategoryPage(pageData: Awaited<ReturnType<typeof useCategoryPageData>>) {
+export function useCategoryPage(
+  pageData: Awaited<ReturnType<typeof useCategoryPageData>>,
+  options: { metaKeys?: boolean } = {},
+) {
   const { categoryInfo, data, status, relatedData } = pageData;
   const { t } = useI18n();
   const route = useRoute();
@@ -39,7 +47,25 @@ export function useCategoryPage(pageData: Awaited<ReturnType<typeof useCategoryP
   const pageText = computed(() => (pageNumber.value === 1 ? '' : ` ${t('page')} ${pageNumber.value}`));
 
   const title = computed(() => categoryInfo.value?.title || '');
-  const h1 = computed(() => categoryInfo.value?.header || title.value);
+
+  const keysMeta = options.metaKeys
+    ? useMeta({
+        t,
+        pageKey: useGetPureRouteName(),
+        brandName: useAppConfig().brandName,
+        sortOptions: sortItemsDefault,
+        text: title,
+        nicheSafeText: title,
+        seo: () => ({
+          title: categoryInfo.value?.metaTitle || '',
+          description: categoryInfo.value?.metaDescription || '',
+          h1: '',
+          keywords: '',
+        }),
+      })
+    : null;
+
+  const h1 = computed(() => (keysMeta ? keysMeta.h1.value : categoryInfo.value?.header || title.value));
 
   const categoryInfoResult = computed(() => ({
     title: h1.value,
@@ -68,17 +94,21 @@ export function useCategoryPage(pageData: Awaited<ReturnType<typeof useCategoryP
   ]);
 
   watchEffect(() => {
-    const metaTitle = `${categoryInfo.value?.metaTitle || title.value}${pageText.value}`;
-    const metaDescription = `${categoryInfo.value?.metaDescription || ''}${pageText.value}`;
-
-    useHead({
-      title: metaTitle,
-      meta: [
-        { name: 'description', content: metaDescription },
-        { property: 'og:title', content: metaTitle },
-        { property: 'og:description', content: metaDescription },
-      ],
-    });
+    if (keysMeta) {
+      useHead(keysMeta.meta.value);
+    } else {
+      const metaTitle = `${categoryInfo.value?.metaTitle || title.value}${pageText.value}`;
+      const metaDescription = `${categoryInfo.value?.metaDescription || ''}${pageText.value}`;
+
+      useHead({
+        title: metaTitle,
+        meta: [
+          { name: 'description', content: metaDescription },
+          { property: 'og:title', content: metaTitle },
+          { property: 'og:description', content: metaDescription },
+        ],
+      });
+    }
 
     if (status.value === 'success' && (!data.value || !categoryInfo.value)) {
       throw createError({ statusCode: 404, statusMessage: 'Not Found' });

package/composables/page/use-search-page.ts

@@ -1,6 +1,6 @@
 import type { Ref } from 'vue';
 import { convertString } from '../../runtime';
-import type { IBreadcrumbItem, IChipsItem } from '../../types';
+import type { IBreadcrumbItem, IChipsItem, INavLinkItem } from '../../types';
 
 const RECENT_SEARCHES_KEY = 'recentSearches';
 const RECENT_SEARCHES_LIMIT = 10;
@@ -8,9 +8,13 @@ const RECENT_SEARCHES_LIMIT = 10;
 /**
  * Логика страницы поиска, общая для любой разметки выдачи: мета и h1 по фразе, хлебные крошки, чипсы
  * связанных фраз (без самой фразы) и запоминание фразы в недавних поисках. Запросы выдачи у страниц разные —
- * их страница делает сама и передаёт сюда связанные фразы.
+ * их страница делает сама и передаёт сюда связанные фразы. `metaSortOptions` — сортировки выдачи, если у меты
+ * поиска есть варианты по ним (`meta.<page>.<sort>.*`); по умолчанию без уровня сортировки.
  */
-export function useSearchPage(relatedSearch: Ref<string[] | null | undefined>) {
+export function useSearchPage(
+  relatedSearch: Ref<string[] | null | undefined>,
+  options: { metaSortOptions?: INavLinkItem[] } = {},
+) {
   const slug = useSlug();
   const { t } = useI18n();
 
@@ -20,7 +24,7 @@ export function useSearchPage(relatedSearch: Ref<string[] | null | undefined>) {
     t,
     pageKey: useGetPureRouteName(),
     brandName: useAppConfig().brandName,
-    sortOptions: [],
+    sortOptions: options.metaSortOptions || [],
     text: metaTitle,
   });
 

package/composables/use-meta.ts

@@ -51,10 +51,16 @@ type MetaParams = {
 };
 
 /**
-* Генерирует реактивные meta (title, description) и h1 с учётом сортировки, страницы и i18n-ключей.
-* Для не-дефолтной ниши сначала ищется вариант ключа `<key>_<niche>` (meta.index.trending.h1_gay)
-* с теми же подстановками, без него — базовый ключ.
-*/
+ * Генерирует реактивные meta (title, description) и h1 с учётом сортировки, страницы и i18n-ключей.
+ * Для не-дефолтной ниши сначала ищется вариант ключа `<key>_<niche>` (meta.index.trending.h1_gay)
+ * с теми же подстановками, без него — базовый ключ.
+ *
+ * Страницы пагинации могут иметь свои тексты: для страницы > 1 сначала ищется ключ `<key>_paged` с подстановкой
+ * `{p}` (номер), без него — базовый ключ с `{page}`. Ниша решается раньше страницы: `<key>_paged_<niche>` →
+ * `<key>_<niche>`, без нишевого варианта — `<key>_paged` → `<key>`.
+ * Мета от API (`seo`) может идти через шаблон `api_title` / `api_description` (+ `_paged`) с `{text}` = значением
+ * API — сортировка добавляет префикс, страница суффикс. Нет таких ключей — всё как раньше.
+ */
 export function useMeta({ t, pageKey, brandName, sortOptions, sort, text, secondText, thirdText, fourthText, h1Key, seo, nicheSafeText }: MetaParams) {
   const route = useRoute();
   const { te, locale } = useI18n();
@@ -74,11 +80,13 @@ export function useMeta({ t, pageKey, brandName, sortOptions, sort, text, second
     return queryValue && values?.includes(queryValue) ? queryValue : defaultValue;
   });
 
-  const pageSuffix = computed(() => {
-    const pageNumber = route.query?.['page'] ? Number(route.query['page']) : 1;
-    return pageNumber === 1 ? '' : ` ${t('page')} ${pageNumber}`;
+  const pageNumber = computed(() => {
+    const raw = Number(route.query?.['page']);
+    return Number.isFinite(raw) && raw > 1 ? Math.floor(raw) : 1;
   });
 
+  const pageSuffix = computed(() => (pageNumber.value === 1 ? '' : ` ${t('page')} ${pageNumber.value}`));
+
   const isNicheSuppressed = computed(() => {
     const probe = toValue(nicheSafeText);
     if (!probe || niche.value === defaultNiche) return false;
@@ -97,20 +105,48 @@ export function useMeta({ t, pageKey, brandName, sortOptions, sort, text, second
     return te(variantKey) ? variantKey : baseKey;
   }
 
+  function fullKey(key: string) {
+    return `meta.${pageKey}.${sortOptions && sortOptions.length > 0 ? `${sortType.value}.` : ''}${key}`;
+  }
+
+  /**
+   * Ключ с учётом страницы: на странице > 1 — `<key>_paged`, если он переведён. Ниша решается раньше страницы:
+   * у ключа с нишевым вариантом страничный берётся только нишевый (`_paged_<niche>`), иначе страничный
+   * вариант другой ниши подменил бы текст.
+   */
+  function pagedKey(key: string) {
+    const base = fullKey(key);
+    const resolved = resolveKey(base);
+
+    if (pageNumber.value > 1) {
+      const paged = resolved === base ? `${base}_paged` : `${base}_paged_${niche.value}`;
+      if (te(paged)) return paged;
+    }
+
+    return resolved;
+  }
+
+  function params(extra: Record<string, unknown> = {}) {
+    return {
+      text: toValue(text),
+      secondText: toValue(secondText),
+      thirdText: toValue(thirdText),
+      fourText: toValue(fourthText),
+      brandName: `| ${brandName}`, //черточка '|' нужна обязательно
+      page: pageSuffix.value,
+      p: pageNumber.value,
+      ...extra,
+    };
+  }
+
   function getPath(key: string) {
-    const pageText = pageSuffix.value;
-
-    return t(
-      resolveKey(`meta.${pageKey}.${sortOptions && sortOptions.length > 0 ? `${sortType.value}.` : ''}${key}`),
-      {
-        text: toValue(text),
-        secondText: toValue(secondText),
-        thirdText: toValue(thirdText),
-        fourText: toValue(fourthText),
-        brandName: `| ${brandName}`, //черточка '|' нужна обязательно
-        page: pageText,
-      }
-    );
+    return t(pagedKey(key), params());
+  }
+
+  /** Значение API через шаблон `api_<key>` (префикс сортировки, суффикс страницы), если он есть. */
+  function fromApi(key: string, value: string, fallback: () => string) {
+    const templated = pagedKey(`api_${key}`);
+    return te(templated) ? t(templated, params({ text: value })) : fallback();
   }
 
   const apiSeo = computed(() => toValue(seo) || null);
@@ -131,14 +167,16 @@ export function useMeta({ t, pageKey, brandName, sortOptions, sort, text, second
 
   const metaTitle = computed(() => {
     const apiTitle = apiSeo.value?.title;
-    return apiTitle ? withPageSuffix(apiTitle) : getPath('title');
+    return apiTitle ? fromApi('title', apiTitle, () => withPageSuffix(apiTitle)) : getPath('title');
   });
 
   const h1 = computed(() => apiSeo.value?.h1 || getPath(h1Key?.(sortType.value) || 'h1'));
 
   const meta = computed(() => {
     const apiDescription = apiSeo.value?.description;
-    const description = apiDescription ? `${apiDescription}${pageSuffix.value}` : getPath('meta_description');
+    const description = apiDescription
+      ? fromApi('description', apiDescription, () => `${apiDescription}${pageSuffix.value}`)
+      : getPath('meta_description');
     const keywords = apiSeo.value?.keywords;
 
     return {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "itube-specs",
   "type": "module",
-  "version": "0.0.1040",
+  "version": "0.0.1042",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {
@@ -86,6 +86,7 @@
     "scripts/spec.sh",
     "SITE_UPDATES.md",
     "nuxt.config.ts",
+    "app.config.ts",
     "DOCS/"
   ],
   "devDependencies": {

package/pages/videos/[slug].vue

@@ -34,6 +34,7 @@ import { CSS_BREAKPOINTS } from '../../config';
 const featureFlags = useRuntimeConfig().public.featureFlags;
 
 const pageName = useGetPureRouteName();
+const metaFromPhrases = !!useAppConfig().videoPage?.metaFromPhrases;
 
 const fetchRelated = featureFlags.VectorRelatedVideosEnabled
   ? useFetchVectorRelatedVideos(featureFlags.FetchByUrlEnabled ? VideosApiService.getVectorRelatedVideosByUrl : VideosApiService.getVectorRelatedVideosById)
@@ -44,11 +45,15 @@ const [
   { data: relatedVideos, status },
   { data: relatedSearch },
   { data: dataModels },
+  { data: refererPhrases },
 ] = await Promise.all([
   useFetchVideo(featureFlags.FetchByUrlEnabled ? VideosApiService.getVideoByUrl : VideosApiService.getVideoById),
   fetchRelated,
   useFetchRelatedSearch(SearchApiService.getPhrases),
   useFetchTopModels(ModelsApiService.getTop, 24, AsyncData.TopModelsMore, String(pageName)),
+  metaFromPhrases
+    ? useFetchVideoRefererPhrases(featureFlags.FetchByUrlEnabled ? VideosApiService.refererPhrasesByUrl : VideosApiService.refererPhrasesById)
+    : { data: ref<string[] | null>(null) },
 ]);
 
 // Модели ролика для боковой колонки: у каждой своя карточка и её ролики. Запрос
@@ -75,7 +80,24 @@ useSetSeoOverride(() => ({
 }));
 
 const title = computed(() => videoData.value?.title || '');
-const description = computed(() => videoData.value?.description || '');
+
+// Go `title`: заглавная у каждого слова
+const titleCase = (value: string) => value.replace(/(^|\s)(\S)/g, (_, space: string, letter: string) => `${space}${letter.toUpperCase()}`);
+
+// `videoPage.metaFromPhrases`: до трёх фраз перехода (недостающие — из тегов), без них — категории.
+// Описание самого ролика старый движок брал только у отредактированных вручную (`is_edited`), этот признак API не отдаёт.
+const phrasesDescription = computed(() => {
+  const phrases = Array.isArray(refererPhrases.value) ? refererPhrases.value : [];
+  const tags = videoData.value?.tags || [];
+  const categories = (videoData.value?.categories || []).map(item => item.title);
+  const pick = (index: number) => phrases[index] || (phrases.length <= index ? tags[index] : '') || '';
+  const parts = [0, 1, 2].map(index => titleCase(pick(index) || categories[index] || ''));
+  const joined = `${parts[0]}${parts[1] ? `, ${parts[1]}` : ''}${parts[2] ? `${t('meta.videos-slug.tags_and')}${parts[2]}` : ''}`;
+
+  return joined ? `${joined}${t('meta.videos-slug.tags_tail')}` : '';
+});
+
+const description = computed(() => (metaFromPhrases && phrasesDescription.value) || videoData.value?.description || '');
 const pagePureName = useGetPureRouteName();
 const { meta } = useMeta({
   t,
@@ -84,6 +106,7 @@ const { meta } = useMeta({
   sortOptions: [],
   text: title,
   secondText: description,
+  thirdText: metaFromPhrases ? () => titleCase(title.value) : undefined,
 });
 
 const webpThumbs = videoData.value?.thumbUrls?.webp;