itube-specs 0.0.863 → 0.0.865

package/components/card/channel.vue

@@ -61,7 +61,7 @@
 <script setup lang="ts">
 import { convertString, formatDate } from '../../runtime';
 import type { IChannelCard } from '../../types';
-import { CSS_BREAKPOINTS } from '../../lib/css-breakpoints';
+import { CSS_BREAKPOINTS } from '../../config/css-breakpoints';
 
 const props = defineProps<{
   card: IChannelCard

package/components/card/playlist.vue

@@ -176,7 +176,7 @@
 import { formatDate, ThumbSize } from '../../runtime';
 import type { IPlaylistCard, IProfileData, IThumbUrls } from '../../types';
 import { AuthorizationApiService } from '../../services/api/authorization.service';
-import { CSS_BREAKPOINTS } from '../../lib/css-breakpoints';
+import { CSS_BREAKPOINTS } from '../../config/css-breakpoints';
 
 const props = defineProps<{
   card: IPlaylistCard

package/components/card/video/index.vue

@@ -137,7 +137,7 @@
 <script setup lang="ts">
 import type { IVideoCard } from '../../../types';
 import { convertString, getDuration } from '../../../runtime';
-import { CSS_BREAKPOINTS } from '../../../lib/css-breakpoints';
+import { CSS_BREAKPOINTS } from '../../../config/css-breakpoints';
 
 const featureFlags = useRuntimeConfig().public.featureFlags;
 

package/components/filter/selects.vue

@@ -111,7 +111,7 @@
 import type { IModelFilter } from '../../types';
 import { onClickOutside } from '@vueuse/core';
 import { convertString, checkDeviceWidth } from '../../runtime';
-import { CSS_BREAKPOINTS } from '../../lib/css-breakpoints';
+import { CSS_BREAKPOINTS } from '../../config/css-breakpoints';
 
 const props = defineProps<{
   filters: IModelFilter[]

package/components/layout/burger.vue

@@ -78,7 +78,8 @@
 
 <script setup lang="ts">
 import { AuthSteps, onBackdropClick, checkDeviceWidth } from '../../runtime';
-import type { CssBreakpoints, IProfileData  } from '../../types';
+import type { IProfileData } from '../../types';
+import { CSS_BREAKPOINTS } from '../../config/css-breakpoints';
 import { AuthorizationApiService } from '../../services/api/authorization.service';
 
 import { getNavigationItems } from '../../lib';
@@ -110,7 +111,7 @@ const { isAuthorized } = useUser(AuthorizationApiService);
 
 const burgerRef = ref();
 
-const breakpoints = useAppConfig().cssBreakpoints as Record<CssBreakpoints, number>;
+const breakpoints = CSS_BREAKPOINTS;
 const { isMobile } = checkDeviceWidth(breakpoints);
 
 const { scrollLock, scrollUnlock } = useGlobalScrollLock();

package/components/ui/dropdown.vue

@@ -62,7 +62,7 @@
 <script setup lang="ts">
 // На компоненте обязательно вызывать пропсы слота и вешать слот пропс (className) на непосредственных детей
 import { checkDeviceWidth } from '../../runtime';
-import type { CssBreakpoints } from '../../types';
+import { CSS_BREAKPOINTS } from '../../config/css-breakpoints';
 import { onClickOutside } from '@vueuse/core';
 
 const dropdownRef = ref();
@@ -89,7 +89,7 @@ onClickOutside(dropdownRef, () => {
 
 const { scrollLock, scrollUnlock } = useGlobalScrollLock();
 
-const breakpoints = useAppConfig().cssBreakpoints as Record<CssBreakpoints, number>;
+const breakpoints = CSS_BREAKPOINTS;
 const { isTablet } = checkDeviceWidth(breakpoints);
 
 function checkPosition() {

package/components/ui/tooltip.vue

@@ -29,7 +29,7 @@
 <script setup lang="ts">
 import { checkDeviceWidth } from '../../runtime';
 import { onClickOutside } from '@vueuse/core';
-import type { CssBreakpoints } from '../../types';
+import { CSS_BREAKPOINTS } from '../../config/css-breakpoints';
 
 defineProps<{
   right?: boolean
@@ -38,7 +38,7 @@ defineProps<{
 const tooltipRef = ref<HTMLElement>();
 const isOpen = ref(false);
 
-const breakpoints = useAppConfig().cssBreakpoints as Record<CssBreakpoints, number>;
+const breakpoints = CSS_BREAKPOINTS;
 const { isMobile } = checkDeviceWidth(breakpoints);
 
 onClickOutside(tooltipRef, () => {

package/composables/use-generate-link.ts

@@ -1,4 +1,5 @@
-import type { Language, Niche } from '~/runtime';
+import type { Language, Niche } from '../runtime';
+import { NicheHelper } from '../utils/niche-helper';
 
 /** Возвращает generateLink — генерирует путь с учётом текущей ниши и локали. */
 export const useGenerateLink = () => {
@@ -14,7 +15,9 @@ export const useGenerateLink = () => {
   const generateLink = (path: string, localeArg?: Language): string => {
     const cleanPath = path.startsWith('/') ? path : `/${path}`;
 
-    const defaultNiche = useAppConfig().defaultNiche;
+    // Ниша сайта — из окружения (тем же значением уходит в заголовок X-Niche),
+    // список ниш — из per-site конфига проекта.
+    const defaultNiche = NicheHelper.getSiteDefaultNiche();
     const projectNiches = useAppConfig().niches as Niche[];
     const isOneNiche = projectNiches.length === 1;
 

package/config/css-breakpoints.ts

@@ -0,0 +1,22 @@
+/** Имя брейкпоинта. Совпадает с ключами `$brkpnts` в assets/scss/mixins/_breakpoints.scss. */
+export type CssBreakpointName = 'xs' | 'xm' | 'sm' | 'md' | 'ml' | 'lg' | 'xl';
+
+/**
+ * JS-зеркало брейкпоинтов из SCSS.
+ *
+ * Источник истины — `$brkpnts` в assets/scss/mixins/_breakpoints.scss: по нему работают
+ * миксины вёрстки. JS прочитать SCSS не может, поэтому здесь зеркало — оно нужно там, где
+ * ширину надо знать в скрипте: `sizes` у картинок, брейкпоинты свайпера, checkDeviceWidth.
+ *
+ * Значения обязаны совпадать с SCSS — это проверяет `check:breakpoints`. Разойдутся —
+ * атрибут `sizes` начнёт врать браузеру про точку переключения раскладки.
+ */
+export const CSS_BREAKPOINTS: Record<CssBreakpointName, number> = {
+  xs: 475,
+  xm: 650,
+  sm: 960,
+  md: 1350,
+  ml: 1500,
+  lg: 1792,
+  xl: 2560,
+};

package/config/index.ts

@@ -0,0 +1,2 @@
+export * from './themes';
+export * from './css-breakpoints';

package/config/themes.ts

@@ -0,0 +1,29 @@
+/** Имя темы = имя папки в assets/scss/themes/. */
+export type ThemeName = 'light' | 'dark';
+
+export interface ThemeMeta {
+  /** Подсказка браузеру для нативных контролов и скроллбаров. */
+  colorScheme: 'light' | 'dark';
+  /** Цвет хрома браузера. Обязан совпадать с `$body-bg` этой темы. */
+  themeColor: string;
+}
+
+/**
+ * JS-сторона тем: то, что нужно знать о теме вне Sass.
+ *
+ * Цвета живут в SCSS (assets/scss/themes/<name>/_theme.scss), но `theme-color` и
+ * `color-scheme` нужны в `nuxt.config` на этапе сборки, куда SCSS не дотягивается.
+ * Поэтому здесь минимальное дублирование — только хром браузера.
+ *
+ * Список должен совпадать с папками в assets/scss/themes/ — это проверяет `check:themes`.
+ */
+export const themes: Record<ThemeName, ThemeMeta> = {
+  light: {
+    colorScheme: 'light',
+    themeColor: '#1e2a3a', // = $body-bg темы light ($color-slate-800)
+  },
+  dark: {
+    colorScheme: 'dark',
+    themeColor: '#0d0d0d', // = $body-bg темы dark ($color-black)
+  },
+};

package/lib/index.ts

@@ -15,4 +15,3 @@ export * from './scheme/categories-navigation';
 export * from './scheme/navigation-items';
 export * from './scheme/profile-navigation-items';
 export * from './scheme/additional-links-items';
-export * from './css-breakpoints';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "itube-specs",
   "type": "module",
-  "version": "0.0.863",
+  "version": "0.0.865",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {
@@ -13,6 +13,7 @@
     "lint:css:fix": "stylelint \"**/*.{scss,vue}\" --fix --allow-empty-input",
     "check:themes": "node scripts/check-themes.mjs",
     "check:styles": "node scripts/check-styles.mjs",
+    "check:breakpoints": "node scripts/check-breakpoints.mjs",
     "test": "NODE_OPTIONS='--no-warnings' vitest",
     "prepare": "husky"
   },
@@ -41,6 +42,10 @@
       "import": "./lib/index.ts",
       "default": "./lib/index.ts"
     },
+    "./config": {
+      "import": "./config/index.ts",
+      "default": "./config/index.ts"
+    },
     "./services/*": "./services/*.ts",
     "./composables/*": "./composables/*.ts",
     "./utils/*": "./utils/*.ts",
@@ -53,6 +58,7 @@
     "services/",
     "utils/",
     "types/",
+    "config/",
     "lib/",
     "middleware/",
     "plugins/",

package/pages/videos/[slug].vue

@@ -28,7 +28,7 @@ import { SearchApiService } from '../../services/api/search.service';
 import { VideosApiService } from '../../services/api/videos.service';
 import { ModelsApiService } from '../../services/api/models.service';
 import { AsyncData, ThumbSize } from '../../runtime';
-import { CSS_BREAKPOINTS } from '../../lib';
+import { CSS_BREAKPOINTS } from '../../config';
 
 const featureFlags = useRuntimeConfig().public.featureFlags;
 

package/runtime/utils/check-device-width.ts

@@ -1,7 +1,7 @@
 import { useBreakpoints } from '@vueuse/core';
-import type { CssBreakpoints } from '../../types';
+import type { CssBreakpointName } from '../../config/css-breakpoints';
 
-function breakpoints(breakpoints: Record<CssBreakpoints, number>) {
+function breakpoints(breakpoints: Record<CssBreakpointName, number>) {
   return useBreakpoints(
     {
       xs: breakpoints.xs,
@@ -17,7 +17,7 @@ function breakpoints(breakpoints: Record<CssBreakpoints, number>) {
 * Возвращает реактивные флаги isMobile и isTablet на основе переданных breakpoints.
 * @param projectBreakpoints - набор брейкпоинтов проекта (xs, sm, md, lg, xl) в пикселях
 */
-export const checkDeviceWidth = (projectBreakpoints: Record<CssBreakpoints, number>) => {
+export const checkDeviceWidth = (projectBreakpoints: Record<CssBreakpointName, number>) => {
   const isMobile = breakpoints(projectBreakpoints).smaller('sm');
   const isTablet = breakpoints(projectBreakpoints).smaller('md');
 

package/types/index.d.ts

@@ -57,7 +57,6 @@ export * from './search-top-models.d.ts';
 export * from './select-item.d.ts';
 export * from './model-group.d.ts';
 export * from './change-email-form.d.ts';
-export * from './css-breakpoints.d.ts';
 export * from './button-sizes.d.ts';
 export * from './button-themes.d.ts';
 export * from './report-request.d.ts';

package/lib/css-breakpoints.ts

@@ -1,15 +0,0 @@
-export type CssBreakpointName = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-
-/**
- * Брейкпоинты на проекте,
- * должны совпадать с тем что в CSS assets/scss/_breakpoints.scss
- *
- * Используется для свайпера, для установки брейкпоинтов у него.
- */
-export const CSS_BREAKPOINTS: Record<CssBreakpointName, number> = {
-  xs: 475,
-  sm: 960,
-  md: 1350,
-  lg: 1600,
-  xl: 2560,
-};

package/types/css-breakpoints.d.ts

@@ -1 +0,0 @@
-export type CssBreakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';