itube-specs 0.0.1047 → 0.0.1049

package/components/info/model.vue

@@ -123,7 +123,7 @@
     <div
       v-if="hasMore"
       ref="detailsRef"
-      :class="{'--collapsed': !isExpanded}"
+      :class="{'--collapsed': !isExpanded, '--pending': !isMeasured}"
       class="info-model__details"
     >
       <div
@@ -149,7 +149,7 @@
       v-if="hasMore"
       ref="moreRef"
       :aria-expanded="isExpanded"
-      :class="{'--fit': !hasCut && !isExpanded}"
+      :class="{'--fit': !hasCut && !isExpanded, '--pending': !isMeasured}"
       class="info-model__more"
       type="button"
       @click="isExpanded = !isExpanded"
@@ -257,6 +257,7 @@ const FIT_TOLERANCE = 64;
 const detailsRef = ref<HTMLElement>();
 const moreRef = ref<HTMLElement>();
 const hasCut = ref(true);
+const isMeasured = ref(false);
 
 /** Строка грида под кнопкой (с её отступами): без «Show more» она достаётся деталям. */
 function getMoreRowHeight(box: HTMLElement) {
@@ -267,12 +268,18 @@ function getMoreRowHeight(box: HTMLElement) {
     - box.getBoundingClientRect().bottom;
 }
 
+/** До первого замера детали и кнопка на десктопе прозрачны (`--pending`): иначе после гидрации видно, как они перестраиваются. */
+function measureDetails() {
+  fitDetails();
+  isMeasured.value = true;
+}
+
 /**
  * На десктопе высоту свёрнутых деталей задаёт грид — остаток колонки до низа портрета.
  * Всё, что не влезло целиком, прячем; заголовок без единой видимой строки под ним — тоже.
  * Небольшой хвост в пределах допуска не прячем, а вытягиваем блок под него через `min-height`.
  */
-function measureDetails() {
+function fitDetails() {
   const box = detailsRef.value;
   if (!box) return;
 
@@ -612,6 +619,14 @@ const shareModelCard = computed<IModelCard>(() => ({
   grid-area: details;
   row-gap: 20px;
   margin-top: 20px;
+  transition: var(--transition) opacity;
+}
+
+.info-model__details.--pending,
+.info-model__more.--pending {
+  @include from-br(sm) {
+    opacity: 0;
+  }
 }
 
 .info-model__details.--collapsed {
@@ -664,7 +679,7 @@ const shareModelCard = computed<IModelCard>(() => ({
   margin-bottom: -6px;
   color: $info-model-more-text;
 
-  @include hover(color) {
+  @include hover(color, opacity) {
     color: $info-model-more-text--hover;
   }
 }

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

@@ -1,5 +1,6 @@
 import type { MaybeRefOrGetter, Ref } from 'vue';
 import { convertString } from '../../runtime';
+import type { Language } from '../../runtime';
 import { sortItemsDefault } from '../../lib';
 import { ChannelsApiService } from '../../services/api/channels.service';
 import { VideosApiService } from '../../services/api/videos.service';
@@ -11,6 +12,9 @@ import type { IBreadcrumbItem, IChipsItem, IPopularTags } from '../../types';
  * запрашивает после. Разметку страница держит свою, логику — `useChannelPage()`.
  */
 export async function useChannelPageData() {
+  const lang = useLang() as Language;
+  const redirectLegacySlug = useLegacySlugRedirect('channel', name => ChannelsApiService.getChannelsByName(lang, name).then(Boolean));
+
   const [
     { data: cardInfo, status },
     { data: videosData, status: videosStatus },
@@ -21,6 +25,8 @@ export async function useChannelPageData() {
     useFetchPopularTagsByChannelName(VideosApiService.popularTagsByChannelName),
   ]);
 
+  if (!cardInfo.value) await redirectLegacySlug();
+
   return { cardInfo, status, videosData, videosStatus, channelTagsData };
 }
 

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

@@ -1,5 +1,6 @@
 import type { MaybeRefOrGetter, Ref } from 'vue';
 import { convertString } from '../../runtime';
+import type { Language } from '../../runtime';
 import { sortItemsDefault } from '../../lib';
 import { ModelsApiService } from '../../services/api/models.service';
 import { VideosApiService } from '../../services/api/videos.service';
@@ -10,6 +11,9 @@ import type { IBreadcrumbItem } from '../../types';
  * с запросами одной страницы (похожие модели, теги, каналы). Разметку страница держит свою, логику — `useModelPage()`.
  */
 export async function useModelPageData() {
+  const lang = useLang() as Language;
+  const redirectLegacySlug = useLegacySlugRedirect('slug', name => ModelsApiService.getModelsByName(lang, name).then(Boolean));
+
   const [
     { data, status },
     { data: cardInfo },
@@ -18,6 +22,8 @@ export async function useModelPageData() {
     useFetchModelByName(ModelsApiService.getModelsByName),
   ]);
 
+  if (!cardInfo.value) await redirectLegacySlug();
+
   return { data, status, cardInfo };
 }
 

package/composables/use-legacy-slug-redirect.ts

@@ -0,0 +1,29 @@
+import { legacySlugCandidate } from '../runtime';
+
+/**
+ * Старые адреса с литеральным дефисом в имени (`/tag/anal-sex-free`, `/channels/bi-empire`): слаг редизайна читает
+ * дефис как пробел, и сущность «anal sex free» не находится. Создаётся до запросов страницы (нужен контекст Nuxt),
+ * возвращённая функция зовётся, когда основной запрос ничего не вернул: проверяет имя как в URL и, если сущность
+ * есть, уводит 301 на каноничный слаг (`anal_sex_free`).
+ */
+export function useLegacySlugRedirect(param: string, exists: (name: string) => Promise<boolean>) {
+  const route = useRoute();
+  const router = useRouter();
+  const nuxtApp = useNuxtApp();
+  const { generateLink } = useGenerateLink();
+  const raw = String(route.params[param] || '');
+  const slug = legacySlugCandidate(raw);
+
+  return async () => {
+    if (!slug) return;
+
+    // после await страницы контекста Nuxt нет — и запрос, и редирект запускаем в нём явно
+    const found = await nuxtApp.runWithContext(() => exists(raw)).catch(() => false);
+    if (!found) return;
+
+    // по имени роут резолвится без префикса ниши — его добавляет generateLink
+    const path = router.resolve({ name: String(route.name), params: { ...route.params, [param]: slug } }).path;
+
+    await nuxtApp.runWithContext(() => navigateTo({ path: generateLink(path), query: route.query }, { redirectCode: 301, replace: true }));
+  };
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "itube-specs",
   "type": "module",
-  "version": "0.0.1047",
+  "version": "0.0.1049",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {

package/pages/tag/[tag].vue

@@ -22,6 +22,7 @@
 <script setup lang="ts">
 import type { IBreadcrumbItem } from '../../types';
 import { convertString } from '../../runtime';
+import type { Language } from '../../runtime';
 import { VideosApiService } from '../../services/api/videos.service';
 import { ModelsApiService } from '../../services/api/models.service';
 import { sortItemsDefault } from '../../lib';
@@ -29,6 +30,9 @@ import { sortItemsDefault } from '../../lib';
 const { t } = useI18n();
 
 const pageName = useGetPureRouteName();
+const lang = useLang() as Language;
+const redirectLegacySlug = useLegacySlugRedirect('tag', name => VideosApiService.getListByNicheAndTag({ page: 1, 'per-page': 1 }, {}, name, lang, '-popularity')
+  .then(result => !!result?.items?.length));
 
 const [
   { data, status },
@@ -40,6 +44,8 @@ const [
   useRouteQueryCategories(),
 ]);
 
+if (!data.value?.items?.length) await redirectLegacySlug();
+
 useNoindexThinListing(() => data.value?.items?.length);
 
 const route = useRoute();

package/runtime/index.ts

@@ -12,6 +12,7 @@ export * from './constants/webcams';
 export * from './utils/aside-model-videos';
 export * from './utils/build-srcset';
 export * from './utils/pick-portrait-variant';
+export * from './utils/legacy-slug';
 export * from './utils/model-placeholder';
 export * from './utils/format-date';
 export * from './utils/format-time';

package/runtime/utils/__tests__/legacy-slug.test.ts

@@ -0,0 +1,15 @@
+import { describe, it, expect } from 'vitest';
+import { legacySlugCandidate } from '../legacy-slug';
+
+describe('legacySlugCandidate', () => {
+  it('literal hyphen in the name → underscore slug', () => {
+    expect(legacySlugCandidate('anal-sex-free')).toBe('anal_sex_free');
+    expect(legacySlugCandidate('Bi-Empire')).toBe('bi_empire');
+  });
+
+  it('already canonical → null', () => {
+    expect(legacySlugCandidate('teen')).toBeNull();
+    expect(legacySlugCandidate('anal_sex_free')).toBeNull();
+    expect(legacySlugCandidate('')).toBeNull();
+  });
+});

package/runtime/utils/legacy-slug.ts

@@ -0,0 +1,14 @@
+import { convertString } from './converters/convert-string';
+
+/**
+ * Canonical slug for a legacy address whose name keeps a literal hyphen (`/tag/anal-sex-free`, `/channels/bi-empire`):
+ * the redesign reads `-` as a space, so the entity is looked up as "anal sex free" and missed. Returns the slug the
+ * same name gets from `toSlug` (`anal_sex_free`), or `null` when the address is already canonical.
+ */
+export function legacySlugCandidate(raw: string): string | null {
+  if (!raw.includes('-')) return null;
+
+  const slug = convertString().toSlug(raw);
+
+  return slug === raw ? null : slug;
+}