itube-specs 0.0.872 → 0.0.873

package/components/auth/register.vue

@@ -72,15 +72,15 @@
 
       <p class="auth-register__agreement">{{ t('auth.agree_begin') }}
         <NuxtLink
+          :to="generateLink('/terms')"
           class="auth-register__agreement-link"
-          to="/terms"
           target="_blank"
         >{{ t('auth.agree_terms') }}
         </NuxtLink>
         {{ t('auth.agree_and') }}
         <NuxtLink
+          :to="generateLink('/policy')"
           class="auth-register__agreement-link"
-          to="/policy"
           target="_blank"
         >{{ t('auth.agree_policy') }}
         </NuxtLink>
@@ -101,6 +101,7 @@ defineProps<{
 }>();
 
 const { t } = useI18n();
+const { generateLink } = useGenerateLink();
 
 const usernameRef = ref();
 const passwordRef = ref();

package/components/card/category.vue

@@ -2,7 +2,7 @@
 <template>
   <NuxtLink
     :title="card.title"
-    :to="localePath(`/categories/${convertString().toSlug(slug)}`)"
+    :to="generateLink(`/categories/${convertString().toSlug(slug)}`)"
     class="card-category"
   >
     <div class="card-category__inner">
@@ -66,7 +66,7 @@ function onImageError() {
   imageError.value = true;
 }
 
-const localePath = useLocalePath();
+const { generateLink } = useGenerateLink();
 
 const slug = computed(() => {
   return props.card.name;

package/components/category/list.vue

@@ -5,7 +5,7 @@
       :key="`category-all-${category.guid}`"
       :data-count="category.videosCount"
       :class="{'--top': category.isTop}"
-      :to="localePath(`/categories/${slug(category.name)}`)"
+      :to="generateLink(`/categories/${slug(category.name)}`)"
       class="category-list__link"
     >
       {{ category.title }}
@@ -21,7 +21,7 @@
     </NuxtLink>
     <NuxtLink
       v-if="allCategories"
-      :to="localePath('/categories')"
+      :to="generateLink('/categories')"
       class="category-list__link --all"
     >
       {{ t('all_categories') }}
@@ -42,7 +42,7 @@ function slug(name: string) {
   return convertString().toSlug(name);
 }
 
-const localePath = useLocalePath();
+const { generateLink } = useGenerateLink();
 const { t } = useI18n();
 </script>
 

package/components/layout/logo.vue

@@ -1,7 +1,7 @@
 <template>
   <NuxtLink
     :class="{'layout-logo--glow': glow}"
-    :to="localePath('/')"
+    :to="generateLink('/')"
     class="layout-logo"
     @click="onLogoClick"
   >
@@ -23,7 +23,7 @@ const emit = defineEmits<{
   (eventName: 'click'): void
 }>();
 
-const localePath = useLocalePath();
+const { generateLink } = useGenerateLink();
 
 function onLogoClick() {
   emit('click');

package/components/player/sponsored.vue

@@ -20,16 +20,18 @@
       </span>
       <span class="player-sponsored__description">{{ $t('click_to_watch') }}</span>
       <NuxtLink
-        :to="localePath(card.site)"
+        :to="card.site"
         class="player-sponsored__site"
         target="_blank"
+        external
       >{{ card.site }}</NuxtLink>
     </span>
     <UiLink
-      :to="localePath(card.site)"
+      :to="card.site"
       class="player-sponsored__button _from-sm"
       theme="primary"
       target="_blank"
+      external
     >{{ $t('get_full_video')}}</UiLink>
   </div>
 </template>
@@ -42,8 +44,6 @@ defineProps<{
     site: string
   }
 }>();
-
-const localePath = useLocalePath();
 </script>
 
 <style lang="scss">

package/components/search/item.vue

@@ -41,10 +41,10 @@ const props = defineProps<{
 }>();
 
 const title = computed(() => props.item?.title?.replace(/<[^>]*>/g, ''));
-const localePath = useLocalePath();
+const { generateLink } = useGenerateLink();
 
 const slug = computed(() => convertString().toSlug(title.value));
-const link = computed(() => localePath(`/${props.prefix}/${slug.value}`));
+const link = computed(() => generateLink(`/${props.prefix}/${slug.value}`));
 
 const isModel = computed(() => props.prefix === 'models');
 const safeTitle = computed(() =>

package/components/search/main.vue

@@ -88,12 +88,12 @@ watch(isResultShow, (value) => {
   }
 });
 
-const localePath = useLocalePath();
+const { generateLink } = useGenerateLink();
 
 function goToSearch() {
   if (searchValue.value && searchValue.value.length) {
     router.push({
-      path: localePath(`/search/${searchValue.value}`)
+      path: generateLink(`/search/${searchValue.value}`)
     });
   }
 }

package/components/section/swiper-cards.vue

@@ -25,7 +25,7 @@
           #append
         >
           <NuxtLink
-            :to="allLink"
+            :to="generateLink(allLink ?? '/')"
             class="section-swiper-cards__all"
           >{{ allLinkText }}
           </NuxtLink>
@@ -48,6 +48,7 @@ defineProps<{
 }>();
 
 const { t } = useI18n();
+const { generateLink } = useGenerateLink();
 </script>
 
 <style lang="scss">

package/package.json

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

package/pages/2257.vue

@@ -33,8 +33,8 @@
 
           <li>
             the uploaded content does not violate {{ brandName }}’s
-            <a href="/terms">Terms of Service
-            </a>
+            <NuxtLink :to="generateLink('/terms')">Terms of Service
+            </NuxtLink>
             , and any of its related policies.
           </li>
         </ul>
@@ -61,6 +61,7 @@
 
 <script setup lang="ts">
 const { t } = useI18n();
+const { generateLink } = useGenerateLink();
 const pagePureName = useGetPureRouteName();
 const { brandName, emails } = useAppConfig();
 const { meta, h1 } = useMeta(t, pagePureName, brandName);

package/pages/dmca.vue

@@ -62,12 +62,12 @@
 
         <p>
           Please submit all information at
-          <a
+          <NuxtLink
+            :to="generateLink('/contacts?subject=dmca')"
             class="doc-page__email"
-            href="/contacts?subject=dmca"
             rel="noopener"
           >{{ brandName }}/contacts?subject=dmca
-          </a>
+          </NuxtLink>
           , or send to:
           <a
             :href="`mailto:${emails.dmca}`"
@@ -119,6 +119,7 @@
 
 <script setup lang="ts">
 const { t } = useI18n();
+const { generateLink } = useGenerateLink();
 const pagePureName = useGetPureRouteName();
 const { brandName, emails } = useAppConfig();
 const { meta, h1 } = useMeta(t, pagePureName, brandName);

package/pages/favorites.vue

@@ -7,24 +7,25 @@ import { PlaylistsApiService } from '../services/api/playlists.service';
 import type { Language } from '../runtime';
 
 const { locale } = useI18n();
+const { generateLink } = useGenerateLink();
 const cookie = useCookie('jwtoken');
 
 if (!cookie.value) {
-  await navigateTo('/playlists', { replace: true });
+  await navigateTo(generateLink('/playlists'), { replace: true });
 } else {
   try {
     const res = await PlaylistsApiService.getUserPlaylists(locale.value as Language);
     const fav = res?.items?.find(item => item.name === 'favorites');
 
     if (fav?.id && fav?.firstVideoId) {
-      await navigateTo(`/playlists/${fav.id}/${fav.firstVideoId}`, { replace: true });
+      await navigateTo(generateLink(`/playlists/${fav.id}/${fav.firstVideoId}`), { replace: true });
     } else if (fav?.id) {
-      await navigateTo(`/playlists/${fav.id}`, { replace: true });
+      await navigateTo(generateLink(`/playlists/${fav.id}`), { replace: true });
     } else {
-      await navigateTo('/playlists', { replace: true });
+      await navigateTo(generateLink('/playlists'), { replace: true });
     }
   } catch {
-    await navigateTo('/playlists', { replace: true });
+    await navigateTo(generateLink('/playlists'), { replace: true });
   }
 }
 </script>

package/server/plugins/dedupe-inlined-css.ts

@@ -5,9 +5,11 @@
 // на слитые (shared) чанки без `src` — например из-за experimentalMinChunkSize —
 // остаётся render-blocking <link>, дублируя уже заинлайненные стили.
 //
-// Хук убирает такие <link rel="stylesheet"> из <head>, но ТОЛЬКО если контент
-// файла целиком присутствует в инлайне. Частично заинлайненные (s-popup) и
-// не заинлайненные (default — лейаут) линки делаются неблокирующими — никакого FOUC.
+// Хук решает судьбу каждого такого <link> (см. decideCssLinkAction):
+// заинлайнен целиком — линк убирается; заинлайнен частично — недостающие блоки
+// доинлайниваются, а линк убирается (иначе браузер тянет файл и дублирует уже
+// заинлайненные правила); не заинлайнен вовсе или хвост крупный — линк остаётся,
+// но неблокирующим. Никакого FOUC.
 //
 // Чистая логика разбора/решения вынесена в server/utils/css-dedupe.ts (покрыта тестами),
 // здесь — только IO (чтение .css через localFetch) и обход <head>.
@@ -16,32 +18,28 @@ import {
   BUILD_ASSETS_DIR,
   STYLESHEET_LINK_RE,
   HREF_RE,
-  splitCssRules,
   collectInlinedCss,
-  isCssFullyInlined,
+  decideCssLinkAction,
   makeStylesheetAsync,
 } from '../utils/css-dedupe';
 
-// href -> нормализованные правила файла (null = прочитать не удалось)
-const cssRulesCache = new Map<string, string[] | null>();
+// href -> содержимое .css-файла (null = прочитать не удалось)
+const cssTextCache = new Map<string, string | null>();
 
-/** Читает .css по href через localFetch и кэширует его правила (null при ошибке). */
-const loadCssRules = async (nitroApp: any, href: string): Promise<string[] | null> => {
-  if (cssRulesCache.has(href)) return cssRulesCache.get(href) ?? null;
+/** Читает .css по href через localFetch и кэширует его содержимое (null при ошибке). */
+const loadCssText = async (nitroApp: any, href: string): Promise<string | null> => {
+  if (cssTextCache.has(href)) return cssTextCache.get(href) ?? null;
 
-  let rules: string[] | null = null;
+  let text: string | null = null;
   try {
     const res = await nitroApp.localFetch(href, {});
-    if (res?.ok) {
-      const text = await res.text();
-      if (text) rules = splitCssRules(text);
-    }
+    if (res?.ok) text = (await res.text()) || null;
   } catch {
-    rules = null;
+    text = null;
   }
 
-  cssRulesCache.set(href, rules);
-  return rules;
+  cssTextCache.set(href, text);
+  return text;
 };
 
 export default defineNitroPlugin((nitroApp) => {
@@ -66,12 +64,13 @@ export default defineNitroPlugin((nitroApp) => {
         const href = tag.match(HREF_RE)?.[1];
         if (!href || !href.startsWith(BUILD_ASSETS_DIR)) continue;
 
-        const rules = await loadCssRules(nitroApp, href);
-        if (!rules || !rules.length) continue;
+        const css = await loadCssText(nitroApp, href);
+        if (!css) continue;
 
-        next = isCssFullyInlined(rules, inlinedNormalized)
-          ? next.replace(tag, '')
-          : next.replace(tag, makeStylesheetAsync(tag));
+        const action = decideCssLinkAction(css, inlinedNormalized);
+        if (action.kind === 'drop') next = next.replace(tag, '');
+        else if (action.kind === 'inline-tail') next = next.replace(tag, `<style>${action.css}</style>`);
+        else next = next.replace(tag, makeStylesheetAsync(tag));
       }
       head[i] = next;
     }

package/server/utils/__tests__/css-dedupe.test.ts

@@ -1,10 +1,12 @@
 import { describe, it, expect } from 'vitest';
 import {
   normalizeCss,
-  splitCssRules,
+  splitCssBlocks,
+  findMissingCssBlocks,
   collectInlinedCss,
-  isCssFullyInlined,
+  decideCssLinkAction,
   makeStylesheetAsync,
+  MAX_TAIL_INLINE_BYTES,
 } from '../css-dedupe';
 
 describe('normalizeCss', () => {
@@ -13,17 +15,35 @@ describe('normalizeCss', () => {
   });
 });
 
-describe('splitCssRules', () => {
-  it('разбивает на нормализованные правила по }', () => {
-    expect(splitCssRules('.a{color:red}\n.b{x:1}')).toEqual(['.a{color:red}', '.b{x:1}']);
+describe('splitCssBlocks', () => {
+  it('разбивает на top-level блоки в исходном виде', () => {
+    expect(splitCssBlocks('.a{color:red}\n.b{x:1}')).toEqual(['.a{color:red}', '.b{x:1}']);
   });
 
-  it('отбрасывает пустые фрагменты', () => {
-    expect(splitCssRules('.a{color:red}\n\n')).toEqual(['.a{color:red}']);
+  it('@media остаётся одним блоком', () => {
+    expect(splitCssBlocks('.a{x:1}@media(min-width:960px){.b{y:2}.c{z:3}}')).toEqual([
+      '.a{x:1}',
+      '@media(min-width:960px){.b{y:2}.c{z:3}}',
+    ]);
+  });
+
+  it('statement-ы через ; на верхнем уровне — отдельные блоки', () => {
+    expect(splitCssBlocks('@charset "UTF-8";.a{x:1}')).toEqual(['@charset "UTF-8";', '.a{x:1}']);
   });
 
   it('пустой CSS → []', () => {
-    expect(splitCssRules('')).toEqual([]);
+    expect(splitCssBlocks('')).toEqual([]);
+  });
+});
+
+describe('findMissingCssBlocks', () => {
+  it('возвращает только отсутствующие блоки, в исходном порядке', () => {
+    const inlined = '.a{x:1} .c{z:3}';
+    expect(findMissingCssBlocks(['.a{x:1}', '.b{y:2}', '.c{z:3}'], inlined)).toEqual(['.b{y:2}']);
+  });
+
+  it('сравнивает по нормализованному виду', () => {
+    expect(findMissingCssBlocks(['.a {\n  x: 1;\n}'], '.a { x: 1; }')).toEqual([]);
   });
 });
 
@@ -40,19 +60,31 @@ describe('collectInlinedCss', () => {
   });
 });
 
-describe('isCssFullyInlined', () => {
-  const inlined = '.a{color:red} .b{x:1} .c{y:2}';
+describe('decideCssLinkAction', () => {
+  const inlined = '.a{color:red} .b{x:1}';
+
+  it('файл заинлайнен целиком → drop', () => {
+    expect(decideCssLinkAction('.a{color:red}.b{x:1}', inlined)).toEqual({ kind: 'drop' });
+  });
+
+  it('заинлайнен частично → inline-tail только с недостающими блоками', () => {
+    expect(decideCssLinkAction('.a{color:red}.z{q:9}', inlined)).toEqual({
+      kind: 'inline-tail',
+      css: '.z{q:9}',
+    });
+  });
 
-  it('true, когда все правила есть в инлайне', () => {
-    expect(isCssFullyInlined(['.a{color:red}', '.b{x:1}'], inlined)).toBe(true);
+  it('не заинлайнен вовсе → async (грузим файлом, он кэшируется)', () => {
+    expect(decideCssLinkAction('.z{q:9}.y{q:8}', inlined)).toEqual({ kind: 'async' });
   });
 
-  it('false, когда хотя бы одно правило отсутствует', () => {
-    expect(isCssFullyInlined(['.a{color:red}', '.z{q:9}'], inlined)).toBe(false);
+  it('крупный хвост → async, а не распухший HTML', () => {
+    const big = `.z{content:"${'x'.repeat(MAX_TAIL_INLINE_BYTES)}"}`;
+    expect(decideCssLinkAction(`.a{color:red}${big}`, inlined)).toEqual({ kind: 'async' });
   });
 
-  it('false на пустом списке правил', () => {
-    expect(isCssFullyInlined([], inlined)).toBe(false);
+  it('пустой файл → async', () => {
+    expect(decideCssLinkAction('', inlined)).toEqual({ kind: 'async' });
   });
 });
 

package/server/utils/css-dedupe.ts

@@ -17,20 +17,46 @@ const STYLE_TAG_RE = /<style\b[^>]*>([\s\S]*?)<\/style>/gi;
 export const normalizeCss = (css: string): string => css.replace(/\s+/g, ' ').trim();
 
 /**
- * Разбивает CSS на отдельные нормализованные правила (по `}`). Нужно, потому что
- * слитый чанк содержит CSS нескольких компонентов, и в инлайне эти правила раскиданы
- * по разным `<style>`-блокам — целиком файл как подстрока не находится, а по-правилам — да.
+ * Разбивает CSS на top-level блоки в ИСХОДНОМ виде (учитывая вложенность `@media`/`@supports`
+ * и statement-ы вида `@charset "UTF-8";`). Нужно, потому что слитый чанк содержит CSS
+ * нескольких компонентов, и в инлайне эти правила раскиданы по разным `<style>`-блокам —
+ * целиком файл как подстрока не находится, а по-блочно — да. В отличие от разбиения по `}`,
+ * блоки остаются валидным CSS, поэтому недостающие можно доинлайнить как есть.
  * @param css - CSS файла
  */
-export const splitCssRules = (css: string): string[] => {
-  const rules: string[] = [];
-  for (const frag of css.split('}')) {
-    const rule = normalizeCss(frag + '}');
-    if (rule && rule !== '}') rules.push(rule);
+export const splitCssBlocks = (css: string): string[] => {
+  const blocks: string[] = [];
+  let depth = 0;
+  let buf = '';
+
+  for (const ch of css) {
+    buf += ch;
+    if (ch === '{') depth++;
+    else if (ch === '}') {
+      depth--;
+      if (depth <= 0) {
+        depth = 0;
+        if (buf.trim()) blocks.push(buf.trim());
+        buf = '';
+      }
+    } else if (ch === ';' && depth === 0) {
+      if (buf.trim()) blocks.push(buf.trim());
+      buf = '';
+    }
   }
-  return rules;
+
+  if (buf.trim()) blocks.push(buf.trim());
+  return blocks;
 };
 
+/**
+ * Блоки файла, которых нет в инлайне — в исходном виде и исходном порядке.
+ * @param blocks - блоки файла (см. splitCssBlocks)
+ * @param inlinedNormalized - нормализованный инлайн (см. collectInlinedCss)
+ */
+export const findMissingCssBlocks = (blocks: string[], inlinedNormalized: string): string[] =>
+  blocks.filter((block) => !inlinedNormalized.includes(normalizeCss(block)));
+
 /**
  * Собирает содержимое всех `<style>` из частей `<head>` и возвращает нормализованным.
  * @param headParts - массив строк-частей `<head>` (html.head у Nitro)
@@ -46,13 +72,42 @@ export const collectInlinedCss = (headParts: string[]): string => {
   return normalizeCss(inlined);
 };
 
+/** Сколько недостающего CSS готовы доинлайнить в HTML вместо async-линка. */
+export const MAX_TAIL_INLINE_BYTES = 4096;
+
 /**
- * Все ли правила файла уже присутствуют в инлайне (тогда render-blocking `<link>` не нужен).
- * @param rules - нормализованные правила файла (см. splitCssRules)
+ * Что сделать с `<link rel=stylesheet>`:
+ * - `drop` — файл заинлайнен целиком, линк не нужен;
+ * - `inline-tail` — заинлайнен частично: доинлайниваем недостающие блоки и линк убираем
+ *   (иначе браузер тянет файл и дублирует уже заинлайненные правила);
+ * - `async` — инлайна нет вовсе или хвост слишком большой: грузим файлом, но неблокирующе.
+ */
+export type CssLinkAction =
+  | { kind: 'drop' }
+  | { kind: 'inline-tail'; css: string }
+  | { kind: 'async' };
+
+/**
+ * Решает судьбу линка по содержимому файла и инлайну страницы.
+ * @param css - содержимое .css-файла
  * @param inlinedNormalized - нормализованный инлайн (см. collectInlinedCss)
  */
-export const isCssFullyInlined = (rules: string[], inlinedNormalized: string): boolean =>
-  rules.length > 0 && rules.every((rule) => inlinedNormalized.includes(rule));
+export const decideCssLinkAction = (css: string, inlinedNormalized: string): CssLinkAction => {
+  const blocks = splitCssBlocks(css);
+  if (!blocks.length) return { kind: 'async' };
+
+  const missing = findMissingCssBlocks(blocks, inlinedNormalized);
+  if (!missing.length) return { kind: 'drop' };
+
+  // Ничего из файла не заинлайнено (лейаут, popup-и) — дублирования нет, оставляем файлом:
+  // он кэшируется браузером, в отличие от инлайна в HTML.
+  if (missing.length === blocks.length) return { kind: 'async' };
+
+  const tail = missing.join('');
+  if (tail.length > MAX_TAIL_INLINE_BYTES) return { kind: 'async' };
+
+  return { kind: 'inline-tail', css: tail };
+};
 
 /**
  * Делает `<link rel=stylesheet>` неблокирующим: `media="print"` снимает render-block,