itube-specs 0.0.812 → 0.0.815

package/README.md

@@ -1,8 +1,9 @@
 # itube-specs
 
 Общий **Nuxt Layer** для сайтов itube. Держит единую базу: компоненты, composables, сервисы, утилиты,
-runtime-хелперы, типы и lib-данные. Приложения расширяют слой (`extends: ['itube-specs']`) и форкаются
-под разные сайты одной ниши — поэтому слой должен оставаться **самодостаточным и site-agnostic**.
+runtime-хелперы, типы, lib-данные, а также middleware, SSR-плагины и BFF-хендлеры (`server/api`).
+Приложения расширяют слой (`extends: ['itube-specs']`) и форкаются под разные сайты одной ниши —
+поэтому слой должен оставаться **самодостаточным и site-agnostic**.
 
 > Bitbucket: https://bitbucket.org/luckytube/specs/src/master/
 
@@ -76,9 +77,15 @@ runtime/       # runtime-значения и хелперы (barrel index.ts)
   constants/   # доменные `as const` (Niche, PlaylistType, AdSpotType, …)
   utils/       # чистые хелперы, cleaners/, converters/
 types/         # .d.ts типы (barrel index.d.ts — с расширением .d.ts в реэкспортах)
-lib/           # статические scheme/config-данные (barrel index.ts)
+lib/           # статические scheme/config-данные (barrel index.ts): scheme/*, css-breakpoints
+middleware/    # глобальные: auth.global, normalize.global, age.global
+plugins/       # SSR/клиент: country/countries/mobile (SSR), services.client, sentry.client, adv
+server/        # BFF: api/** (тонкие прокси к внешнему API), utils/metrics, plugins/*, tasks
 ```
 
+> `middleware`/`plugins`/`server` обязаны быть в `files` (whitelist) — иначе не попадут в паблиш
+> (см. раздел `files`/`exports`).
+
 ---
 
 ## Импорты
@@ -87,8 +94,9 @@ lib/           # статические scheme/config-данные (barrel index
 через имя пакета. Приложения импортируют как `itube-specs/runtime`, `itube-specs/services/...`,
 `itube-specs/utils/...`, а типы — `itube-specs/types`.
 
-Алиасы `~/…`/`@/…` в файле слоя резолвятся на **приложение**, не на слой — для кода слоя их не используем
-(допустимо только для намеренных app-зависимостей, например рекламный компонент → `~/config`/`~/utils`).
+Алиасы `~/…`/`@/…` в файле слоя резолвятся на **приложение**, не на слой — в коде слоя их не используем.
+Сейчас таких app-зависимостей в слое не осталось: то, что раньше приходило из приложения (фича-флаги,
+ad-конфиг), теперь читается из `runtimeConfig.public` (значения задаёт приложение).
 
 ### `files` / `exports`
 
@@ -105,10 +113,12 @@ lib/           # статические scheme/config-данные (barrel index
 
 ## Что живёт в слое, а что в приложении
 
-- **Слой:** переиспользуемые компоненты, composables, API-сервисы, доменные утилиты, runtime-константы/хелперы,
-  типы, scheme/lib-данные — всё site-agnostic.
-- **Приложение:** фича-флаги и прочий `config/`, `assets/scss` (токены), плагины (`$features`, реклама,
-  sentry), страницы, i18n-локали, BFF-хендлеры `server/` — всё site-specific и завязанное на окружение.
+- **Слой:** компоненты, composables, API-сервисы, доменные утилиты, runtime-константы/хелперы, типы,
+  `lib/` (scheme, css-breakpoints), middleware (`auth`/`normalize`/`age`), SSR-плагины
+  (`country`/`mobile`/`services`/`sentry`/`adv`), BFF-хендлеры `server/api/**` — всё site-agnostic.
+- **Приложение:** только per-site — **значения** config (флаги/реклама/локали) через `runtimeConfig.public`
+  (слой держит пустые контейнеры-заглушки), `assets/scss` (токены), страницы, i18n-локали и остаток
+  `server/`, завязанный на локали (`locale-guard`, `site/languages`, `is-locale-blocked`).
 
 ---
 
@@ -130,5 +140,6 @@ lib/           # статические scheme/config-данные (barrel index
 ## Тесты
 
 Vitest через `@nuxt/test-utils`. В слое — **только тесты без app-специфичного окружения** (чистая логика
-composables/utils/runtime). Компонентные тесты с монтированием SFC и всё, что требует app-инжектов
-(`$features`, SCSS-токены), живёт в **приложении** — в слое нет ни scss-инъекции, ни плагинов приложения.
+composables/utils/runtime). Компонентные тесты с монтированием SFC (нужна SCSS-инъекция токенов, которой в слое
+нет) живут в **приложении**. Значения `runtimeConfig` (`featureFlags`/`adsConfig`) в слое — пустые контейнеры,
+поэтому его код при бутстрапе в CI не падает, но реальные значения приходят только из приложения.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "itube-specs",
   "type": "module",
-  "version": "0.0.812",
+  "version": "0.0.815",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {
@@ -55,6 +55,7 @@
     "middleware/",
     "plugins/",
     "server/",
+    "pages/",
     "nuxt.config.ts"
   ],
   "devDependencies": {

package/pages/2257.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="document__container _container">
+    <div class="document">
+      <section>
+        <h1>{{ h1 }}</h1>
+        <p>
+          For the purposes of 18 U.S. Code § 2257, the operator of the {{ brandName }} website is not a “Producer,”
+          either primary or secondary, of any of the content found on {{ brandName }}. The operator’s activities,
+          with respect to such content, are limited to the transmission, storage, retrieval, hosting and/or formatting of
+          depictions posted by third party users, on areas of the website under the user's control.
+        </p>
+
+        <p>
+          For § 2257 records for any content found on the {{ brandName }} website, please direct your request to the
+          respective uploader, whether a website, a user, a studio or a producer which provided the content (“Uploader”).
+        </p>
+
+        <p>
+          {{ brandName }} abides by the following procedures to ensure compliance:
+        </p>
+
+        <ul>
+          <li>
+            All Uploaders must be over eighteen (18) years of age to upload,
+            share and sell content on {{ brandName }};
+          </li>
+
+          <li>
+            When uploading, Uploader must verify the content; assure
+            he/she/they are 18 years of age; certify that he/she/they keep records of the models in the content and that
+            they are over 18 years of age;
+          </li>
+
+          <li>
+            the uploaded content does not violate {{ brandName }}’s
+            <a href="/terms">Terms of Service
+            </a>
+            , and any of its related policies.
+          </li>
+        </ul>
+
+        <p>
+          For further assistance and/or information in finding the content’s Uploader, please contact {{ brandName }}’s
+          compliance department at
+          <a
+            :href="`mailto:${emails.support}`"
+            class="email"
+          >{{ emails.support }}</a>
+          .
+        </p>
+
+        <p>
+          {{ brandName }} allows content to be reported as inappropriate. Should any content be reported as illegal,
+          unlawful,
+          harassing, harmful, offensive or various other reasons, {{ brandName }} shall remove it without delay.
+        </p>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { t } = useI18n();
+const pagePureName = useGetPureRouteName();
+const { brandName, emails } = useAppConfig();
+const { meta, h1 } = useMeta(t, pagePureName, brandName);
+
+watchEffect(() => {
+  useHead(meta.value);
+});
+</script>

package/pages/categories/[slug].vue

@@ -0,0 +1,246 @@
+<template>
+  <div class="category _page _container">
+    <UiBreadcrumbs
+      :items="breadcrumbs"
+      class="_breadcrumbs-info"
+    />
+
+    <InfoMain
+      v-if="categoryInfoResult && isFirstPage"
+      :key="`info-${categoryInfo?.header}`"
+      :card="categoryInfoResult"
+      type="category"
+      class="category__info"
+    />
+
+    <UiExpandRow
+      v-if="relatedCategories && relatedCategories.length && relatedCategories.length > 0"
+      :items="relatedCategories"
+      :pre-text="`${$t('related_categories')}:`"
+      class="category__related-categories"
+    />
+
+    <LazySectionToolbar
+      class="category__options"
+      hydrate-on-idle
+    />
+
+    <GridVideos
+      v-if="data && data.items && data.items?.length > 0"
+      id="anchor"
+      :items="data.items"
+      priority
+      :class="{'_loading': status === 'pending'}"
+    >
+      <template #grid-end>
+        <LazyAdvNativeBottom
+          v-if="featureFlags.AdsNativeEnabled"
+          hydrate-on-visible
+        />
+      </template>
+      <template #default>
+        <UiExpandRow
+          v-if="isChipsShow && relatedSearch && relatedSearch.length && relatedSearch.length > 0 && statusRelated !== 'pending'"
+          :items="relatedSearch"
+          :pre-text="`${$t('related_searches')}: `"
+          class="category__related-searches"
+        />
+        <div
+          v-else-if="statusRelated === 'pending'"
+          class="category__related-loading _loading"
+        />
+        <LazySectionSwiperCards
+          hydrate-on-visible
+          v-if="modelsByCategory && modelsByCategory.items && modelsByCategory.items.length > 0"
+          :items="modelsRoundCards"
+          :title="$t('category_top_models_title', {name: title})"
+          class="category__models"
+          placeholder-avatar="/img/model-placeholder.webp"
+        />
+      </template>
+    </GridVideos>
+    <div
+      v-else-if="status === 'pending'"
+      class="category__loading _loading"
+    />
+    <UiEmptyState v-else/>
+
+    <UiPagination
+      v-if="data"
+      arrow-icon
+      :key="`pagination-${data.allPages}`"
+      :total="data.allPages"
+      class="category__pagination _pagination"
+    />
+
+    <LazyUiFullDescr
+      v-if="isFirstPage && categoryInfo?.fullDescription"
+      :text="categoryInfo.fullDescription"
+      hydrate-on-visible
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CategoriesApiService } from '../../services/api/categories.service';
+import { VideosApiService } from '../../services/api/videos.service';
+import { ModelsApiService } from '../../services/api/models.service';
+import { convertModelToRoundCard } from '../../runtime';
+import type { ICardInfo } from '../../types';
+import { computed, unref } from 'vue';
+
+const featureFlags = useRuntimeConfig().public.featureFlags;
+
+const { t } = useI18n();
+
+const route = useRoute();
+const disallowedSlugs = ['18', '19'];
+
+const slug = useSlug();
+
+const [
+  { data: categoryInfo },
+  { data, status },
+  { data: relatedData, status: statusRelated },
+  { data: modelsByCategory },
+] = await Promise.all([
+  useFetchCategoriesByName(CategoriesApiService.getCategoriesByName),
+  useFetchVideosByCategories(VideosApiService.getListByNicheAndCategory),
+  useFetchCategoriesRelated(CategoriesApiService.getRelatedCategories),
+  useFetchModelsByCategory(ModelsApiService.getListByCategory, 100),
+]);
+
+const isChipsShow = computed(() => !disallowedSlugs.some((item) => slug.value.includes(item)));
+
+const relatedSearchRaw = computed(() => {
+  if (!isChipsShow.value) return null;
+  return relatedData.value || null;
+});
+
+const modelsRoundCards = computed(() =>
+    modelsByCategory.value?.items.map(convertModelToRoundCard) || []
+);
+
+const categoryInfoResult = computed(() => ({
+  title: categoryInfo.value?.header,
+  description: categoryInfo.value?.description,
+  videosCount: categoryInfo.value?.videosCount,
+  guid: categoryInfo.value?.guid,
+  miniCardTitle: categoryInfo.value?.title,
+} as ICardInfo));
+
+const relatedSearch = computed(() => relatedSearchRaw.value?.items?.map(item => ({
+  title: item.query,
+  value: item.query,
+  prefix: 'search',
+})) || []);
+
+const relatedCategories = computed(() => categoryInfo.value?.related);
+
+const title = computed(() => categoryInfo.value?.title || '');
+const metaTitle = computed(() => categoryInfo.value?.metaTitle || '');
+const brandName = computed(() => useAppConfig().brandName);
+const pageNumber = computed(() => route.query?.[ 'page' ] ? Number(route.query[ 'page' ]) : 1);
+const pageText = computed(() => unref(pageNumber) === 1 ? '' : ` ${t('page')} ${unref(pageNumber)}`);
+
+watchEffect(() => {
+  const categoryTitle = `${metaTitle.value}${pageText.value} | ${brandName.value}`;
+  const categoryDescription = `${categoryInfo.value?.metaDescription || ''}${pageText.value}`;
+
+  useHead({
+    title: categoryTitle,
+    meta: [
+      { name: 'description', content: categoryDescription },
+      { property: 'og:title', content: categoryTitle },
+      { property: 'og:description', content: categoryDescription },
+      { name: 'twitter:title', content: categoryTitle },
+      { name: 'twitter:description', content: categoryDescription },
+    ],
+  });
+
+  if (
+      status.value === 'success' &&
+      (!data.value || !categoryInfo.value)
+  ) {
+    throw createError({ statusCode: 404, statusMessage: 'Not Found' });
+  }
+});
+
+const isFirstPage = computed(() => !route.query[ 'page' ] || route.query[ 'page' ] === '1');
+
+const breadcrumbs = [
+  {
+    name: `${t('navigation.main')}`,
+    to: '/',
+  },
+  {
+    name: `${t('navigation.categories')}`,
+    to: '/categories',
+  },
+  {
+    name: title.value,
+  },
+];
+</script>
+
+<style lang="scss">
+.category__options {
+  margin-bottom: 24px;
+}
+
+.category__options:has(.ui-expand-row) {
+  margin-bottom: 16px;
+}
+
+.category__loading {
+  height: 100%;
+  min-height: 30vh;
+}
+
+.category__models {
+  margin-top: 40px;
+}
+
+.category__info {
+  margin-bottom: 24px;
+}
+
+.category__related-loading {
+  --size: 20px;
+
+  height: 24px;
+
+  @include from-br(sm) {
+    height: 32px;
+  }
+}
+
+.category__models,
+.category__related-searches {
+  grid-column: 1/-1;
+  grid-row: 2;
+  margin-block: 8px;
+}
+
+.category__related-searches + .category__models {
+  grid-row: 3;
+}
+
+.category__top {
+  display: grid;
+  row-gap: 8px;
+  margin-top: auto;
+
+  @include from-br(sm) {
+    row-gap: 16px;
+  }
+}
+
+.category__related-categories {
+  margin-bottom: 24px;
+}
+
+.category__pagination {
+  margin-top: 32px;
+}
+</style>

package/pages/categories/all.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="all _page _container">
+    <UiBreadcrumbs
+      :items="breadcrumbs"
+      class="all__breadcrumbs _breadcrumbs"
+    />
+    <UiSectionTitle
+      :title="h1"
+      :count="totalCount"
+      class="_title"
+      icon="grid"
+    />
+
+    <div class="_nav-filter">
+      <CategoryNav
+        v-if="categoriesGroupByLetterChips"
+        :items="categoriesGroupByLetterChips as IChipsItem[]"
+      />
+      <div
+        v-else
+        class="categories__loading _loading"
+      />
+    </div>
+
+    <LazyCategoryByLetter
+      v-if="categoriesGroupByLetter"
+      :categories="categoriesGroupByLetter as Record<string,ICategoryCard[]>"
+      hydrate-on-visible
+    />
+
+    <LazySectionSeoText
+      :text="t('all_footer_text')"
+      links-link="all_footer_links"
+      hydrate-on-visible
+    />
+
+    <section
+      v-if="dataModels"
+      class="all__popular-models"
+    >
+      <LazySectionModels
+        :data-items="dataModels.items"
+        :title="t('categories_popular_models')"
+        hydrate-on-visible
+      />
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { IBreadcrumbItem, ICategoryCard, IChipsItem } from '../../types';
+import { ModelsApiService } from '../../services/api/models.service';
+import { CategoriesApiService } from '../../services/api/categories.service';
+import { AsyncData } from '../../runtime';
+
+const pageName = useRoute().name;
+
+const { t } = useI18n();
+
+const [
+  { data: dataModels },
+  { data: categoriesGroupByLetterChips },
+  { data: categoriesGroupByLetter },
+] = await Promise.all([
+  useFetchTopModels(ModelsApiService.getTop, 25, AsyncData.TopModels, String(pageName)),
+  useFetchCategoriesGroupByLetter(AsyncData.GroupsCategoriesByLetterChips, CategoriesApiService.getListGroupedByLetterChips),
+  useFetchCategoriesGroupByLetter(AsyncData.GroupsCategoriesByLetter, CategoriesApiService.getListGroupedByLetter),
+]);
+
+const pagePureName = useGetPureRouteName();
+const { meta, h1 } = useMeta(t, pagePureName, useAppConfig().brandName);
+
+watchEffect(() => {
+  useHead(meta.value);
+});
+
+const totalCount = computed(() =>
+  Object.values(categoriesGroupByLetter.value || {}).reduce((sum, arr) => sum + arr.length, 0)
+);
+
+const breadcrumbs = [
+  {
+    name: `${t('navigation.main')}`,
+    to: '/',
+  },
+  {
+    name: `${t('navigation.categories')}`,
+    to: '/categories',
+  },
+  {
+    name: `${t('all_categories')}`,
+  },
+] as IBreadcrumbItem[];
+</script>
+
+<style lang="scss">
+.all__popular-models {
+  margin-top: 32px;
+}
+</style>

package/pages/categories/index.vue

@@ -0,0 +1,180 @@
+<template>
+  <div class="grouped _page _container">
+    <UiBreadcrumbs
+      :items="breadcrumbs"
+      class="_breadcrumbs"
+    />
+
+    <UiSectionTitle
+      :title="h1"
+      :count="totalCount"
+      class="all__title _title"
+      icon="grid"
+    />
+
+    <div class="_nav-filter">
+      <CategoryNav
+        v-if="categoriesGroupByLetter"
+        :items="categoriesGroupByLetter as IChipsItem[]"
+        hide-on-mobile
+      />
+      <div
+        v-else
+        class="categories__loading _loading"
+      />
+    </div>
+
+    <div
+      v-if="groupsCategories && groupsCategories.length > 0"
+      class="grouped__category-wrapper"
+    >
+      <CategoryGroup
+        v-for="(item, index) in groupsCategories"
+        :key="`group-category-${index}`"
+        :items="item?.categories"
+        :title="item.title"
+        :icon="item.icon"
+        class="grouped__category-section"
+      />
+      <UiLink
+        :to="generateLink('/categories/all')"
+        class="grouped__category-all"
+        theme="secondary"
+      >{{ t('show_all') }}
+      </UiLink>
+    </div>
+
+    <SectionSeoText
+      :text="t('grouped_footer_text')"
+      links-link="grouped_footer_links"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { IBreadcrumbItem, IChipsItem } from '../../types';
+import { CategoriesApiService } from '../../services/api/categories.service';
+import { AsyncData } from '../../runtime';
+
+const [
+  { data: categoriesGroupByLetter },
+  { data: groupsCategories },
+] = await Promise.all([
+  useFetchCategoriesGroupByLetter(AsyncData.GroupsCategoriesByLetterChips, CategoriesApiService.getListGroupedByLetterChips),
+  useFetchGroupsCategories(CategoriesApiService.getGroupsCategories),
+]);
+
+const { t } = useI18n();
+
+const { generateLink } = useGenerateLink();
+
+const pagePureName = useGetPureRouteName();
+const { meta, h1 } = useMeta(t, pagePureName, useAppConfig().brandName);
+
+watchEffect(() => {
+  useHead(meta.value);
+});
+
+const totalCount = computed(() =>
+  groupsCategories.value?.reduce((sum, item) => sum + (item.categories?.length || 0), 0) || 0
+);
+
+const breadcrumbs = [
+  {
+    name: `${t('navigation.main')}`,
+    to: '/',
+  },
+  {
+    name: `${t('categories')}`,
+  },
+] as IBreadcrumbItem[];
+</script>
+
+<style lang="scss">
+.grouped__popular {
+  display: grid;
+  row-gap: 8px;
+
+  @include from-br(sm) {
+    row-gap: 16px;
+  }
+}
+
+.grouped__popular-models {
+  display: flex;
+  column-gap: 4px;
+  align-items: center;
+}
+
+.grouped__popular-highlight {
+  @include from-br(sm) {
+    padding-right: 4px;
+    border-right: 1px solid $grouped-highlight-border;
+  }
+}
+
+.grouped__options-separate {
+  display: block;
+  width: 1px;
+  height: 24px;
+  background-color: $grouped-separator;
+
+  @include from-br(sm) {
+    height: 32px;
+  }
+}
+
+.grouped__loading {
+  --size: 24px;
+
+  min-height: 32px;
+}
+
+.grouped__category-icon {
+  color: $grouped-category-icon;
+}
+
+.grouped__category-wrapper {
+  display: grid;
+  row-gap: 16px;
+}
+
+.grouped__category-all {
+  justify-self: center;
+  margin-block: 16px;
+
+  @include from-br(sm) {
+    grid-column: 1/-1;
+  }
+}
+
+.grouped__footer-text {
+  @include font-sm;
+
+  color: $grouped-footer-text;
+  margin-top: 32px;
+}
+
+.grouped__category-section {
+  padding-bottom: 16px;
+  border-bottom: 1px solid $grouped-section-border;
+}
+
+.grouped__category-section:first-child {
+  padding-top: 0;
+}
+
+.grouped__category-section:last-child {
+  border-bottom: none;
+}
+
+.grouped__footer-models {
+  display: grid;
+  row-gap: 8px;
+  padding-top: 8px;
+
+  @include from-br(sm) {
+    row-gap: 16px;
+  }
+}
+</style>