Конфигурация (Параметрлерді реттеу)

AstroGlass src/config/ қалтасындағы файлдар және стандартты CSS custom properties (таңдамалы қасиеттері) арқылы конфигурацияланады (реттеледі).

Конфигурация Файлдары

src/
- config/
  - themes.ts — Тақырып (theme) анықтамалары (атауы, түстері, бөлімдері, премиум жалаушасы)
  - locales.ts — Қолдау көрсетілетін тілдер және локализация метадеректері
  - navigation.ts — Сайттың негізгі навигация (бағыттау) құрылымы
  - docs.ts — Құжаттаманың бүйірлік тақтасы (sidebar) және нұсқасын реттеу

Tailwind CSS v4 көмегімен стильдеу (Styling)

Бұл жоба @tailwindcss/vite плагині арқылы Tailwind CSS v4 нұсқасын пайдаланады. Мұнда tailwind.config.mjs файлы жоқ — барлық конфигурация CSS арқылы жасалады.

Түстер мен тақырып айнымалылары (variables) src/styles/global.css және src/styles/_themes.css ішінде CSS custom properties ретінде анықталады:

:root {
  --p: 260 80% 60%;   /* Негізгі - Primary (HSL) */
  --s: 310 80% 60%;   /* Қосымша - Secondary */
  --a: 190 90% 60%;   /* Акцент - Accent */
  --b1: 220 20% 10%;  /* Базалық фон - Base background */
  --bc: 220 20% 90%;  /* Базалық контент (мәтін) - Base content */
}

💡

Түстерді Өзгерту

Сайттың түс схемасын (color scheme) өзгерту үшін, src/styles/global.css ішіндегі HSL мәндерін жаңартыңыз. Тақырыпқа тән қайта анықтаулар (overrides) [data-theme="..."] селекторларын пайдаланып src/styles/_themes.css ішінде орналасады.

Тақырып Конфигурациясы

Әрбір тақырып src/config/themes.ts ішінде тіркелген. Бұл барлық тақырып метадеректерін бір орталыққа жинайды:

export const themes: ThemeDefinition[] = [
  {
    id: 'liquid',
    name: 'Liquid',
    color: 'from-blue-500 to-cyan-400',
    icon: '💧',
    sections: ['Header', 'Hero', 'About', 'Features', 'Portfolio', 'Pricing', 'Testimonial', 'FAQ', 'CTA', 'Contact', 'Footer'],
    enabled: true,
    premium: false,
    description: 'Тегіс анимациялары бар сұйық (fluid), органикалық дизайн',
  },
  // ... тағы 5 тақырып (Glass, Neo, Luxury, Minimal, Aurora)
];

Локализация (Locale) Конфигурациясы

Тілдер src/config/locales.ts ішінде басқарылады. Жаңа тілді қосу үшін, жазба (entry) қосып, enabled: true деп орнатыңыз:

export const localesConfig: LocaleConfig[] = [
  { code: 'en', name: 'English', nativeName: 'English', flag: '🇬🇧', direction: 'ltr', enabled: true },
  { code: 'ru', name: 'Russian', nativeName: 'Русский', flag: '🇷🇺', direction: 'ltr', enabled: true },
];