Смена брендинга

Все настройки бренда сосредоточены в трёх файлах. Менять что-либо в компонентах не нужно.

Логотип и название

Файл: src/lib/config/branding.ts

export const brandingConfig = {
  logoLight: '/light_logo.png',  // путь в /static/
  logoDark:  '/dark_logo.png',   // путь в /static/
  name: 'Название проекта'
};

export const brandingConfig = {
  logoLight: '/light_logo.png',  // путь в /static/
  logoDark:  '/dark_logo.png',   // путь в /static/
  name: 'Название проекта'
};

Положите свои логотипы в папку static/. Компонент Logo.svelte автоматически переключается между logoLight и logoDark в зависимости от активной темы.

Рекомендуемые форматы: PNG с прозрачным фоном или SVG.

SEO и метаданные

Файл: src/lib/config/site.ts

export const siteConfig = {
  name: 'Название',
  shortName: 'Краткое',
  url: 'https://example.com',
  description: 'Описание для поисковиков и соцсетей',
  author: 'Имя автора',
  keywords: ['ключевое', 'слово'],
  ogImage: '/og-image.jpg',   // 1200×630 px — изображение для соцсетей
  links: {
    github: 'https://github.com/...',
  },
};

export const siteConfig = {
  name: 'Название',
  shortName: 'Краткое',
  url: 'https://example.com',
  description: 'Описание для поисковиков и соцсетей',
  author: 'Имя автора',
  keywords: ['ключевое', 'слово'],
  ogImage: '/og-image.jpg',   // 1200×630 px — изображение для соцсетей
  links: {
    github: 'https://github.com/...',
  },
};

Поле ogImage — это путь к изображению в static/. Оптимальный размер: 1200×630 px.

Цветовая схема

Файл: src/routes/layout.css

Светлая тема — :root { }, тёмная — .dark { }.

:root {
  --background: oklch(1 0 0);          /* фон страницы */
  --background-inset: oklch(0.97 ...); /* сайдбар, карточки */
  --foreground: oklch(0.18 ...);       /* основной текст */
  --foreground-muted: oklch(0.54 ...); /* приглушённый текст */
  --accent: #f43f5e;                   /* акцентный цвет */
  --border: oklch(0 ... / 0.08);       /* цвет границ */
}

.dark {
  --background: #090909;
  --background-inset: #0d0d0d;
  --accent: #f43f5e;
  /* остальные переменные аналогично */
}

:root {
  --background: oklch(1 0 0);          /* фон страницы */
  --background-inset: oklch(0.97 ...); /* сайдбар, карточки */
  --foreground: oklch(0.18 ...);       /* основной текст */
  --foreground-muted: oklch(0.54 ...); /* приглушённый текст */
  --accent: #f43f5e;                   /* акцентный цвет */
  --border: oklch(0 ... / 0.08);       /* цвет границ */
}

.dark {
  --background: #090909;
  --background-inset: #0d0d0d;
  --accent: #f43f5e;
  /* остальные переменные аналогично */
}

Поддерживаются любые форматы CSS-цветов: oklch, hsl, #hex, rgb.

Форматы страниц

Шаблон поддерживает два типа страниц.

.svx — Markdown + Svelte

Основной формат для документации. Поддерживает frontmatter, стандартный Markdown и вставку Svelte-компонентов.

---
title: Заголовок страницы
description: Описание для SEO
---

# Заголовок

Обычный **Markdown** с поддержкой `кода`.

---
title: Заголовок страницы
description: Описание для SEO
---

# Заголовок

Обычный **Markdown** с поддержкой `кода`.

.svelte — кастомная страница

Используйте для страниц с нестандартной структурой: лендинги, интерактивные демо, сложные лейауты. Компонент рендерится напрямую.

Система именования файлов

Навигация строится автоматически из имён директорий и файлов.

Формат: [Тип]Отображаемое название{url-slug}.

Страница без категории — создайте [A]Название{slug}.svx прямо в директории раздела, без [C]-папки.

Web App Manifest

Файл: static/site.webmanifest

Обновите name, short_name, theme_color и background_color. Иконки добавляются в массив icons в формате:

{
  "src": "/icon-192.png",
  "sizes": "192x192",
  "type": "image/png"
}

{
  "src": "/icon-192.png",
  "sizes": "192x192",
  "type": "image/png"
}