feat: добавить хаб документаций

- добавлен React/Vite-лендинг с карточками документаций
- добавлена генерация корневого llms.txt из конфига документов
- добавлена сборка SLM Design через VitePress
- добавлены Dockerfile, Caddyfile и Gitea CI/CD
- настроены контекстные Link headers для llms.txt

src/App.css

@@ -0,0 +1,465 @@
+.page {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 64px;
+  min-height: 100vh;
+  padding: 48px 32px;
+  background:
+    radial-gradient(circle at 50% 18%, var(--hero-glow), transparent 34%),
+    linear-gradient(var(--grid-line) 1px, transparent 1px),
+    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
+    var(--page-bg);
+  background-size: auto, 32px 32px, 32px 32px, auto;
+  background-position: center, center, center, center;
+  color: var(--text-primary);
+}
+
+.hero {
+  text-align: center;
+}
+
+.title {
+  margin: 0 0 16px;
+  color: var(--accent-cool);
+  font-size: 56px;
+  font-weight: 750;
+  letter-spacing: -0.035em;
+  line-height: 1;
+}
+
+.lead {
+  max-width: 760px;
+  margin: 0 auto;
+  color: var(--text-secondary);
+  font-size: 18px;
+  line-height: 1.55;
+}
+
+.controls {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 28px;
+}
+
+.repoLink {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 36px;
+  padding: 0 14px;
+  border: 1px solid var(--border-soft);
+  border-radius: 999px;
+  color: var(--text-secondary);
+  background: var(--surface-soft);
+  box-shadow: 0 1px 2px var(--shadow-subtle);
+  font-size: 13px;
+  font-weight: 700;
+  text-decoration: none;
+  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
+}
+
+.repoLink:hover {
+  border-color: color-mix(in srgb, var(--accent-cool) 46%, var(--border-soft));
+  color: var(--text-primary);
+  background: color-mix(in srgb, var(--surface-soft) 92%, var(--accent-cool));
+}
+
+.repoLink:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 3px;
+}
+
+.themeToggle {
+  display: inline-flex;
+  align-items: stretch;
+  gap: 2px;
+  height: 36px;
+  padding: 4px;
+  border: 1px solid var(--border-soft);
+  border-radius: 999px;
+  background: var(--surface-soft);
+  box-shadow: 0 1px 2px var(--shadow-subtle);
+}
+
+.themeToggleOption {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  color: var(--text-muted);
+  background: transparent;
+  font: inherit;
+  cursor: pointer;
+  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
+}
+
+.themeToggleOption:hover {
+  color: var(--text-primary);
+}
+
+.themeToggleOption:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 3px;
+}
+
+.themeToggleOption[data-active='true'] {
+  color: var(--text-primary);
+  background: var(--page-bg);
+  box-shadow: 0 1px 2px var(--shadow-subtle);
+}
+
+.themeToggleIcon {
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+}
+
+.themeToggleIcon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.docsPanel {
+  display: grid;
+  gap: 14px;
+  width: 100%;
+  max-width: 920px;
+  margin: 0 auto;
+}
+
+.docsPanelHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 0 4px 2px;
+  color: var(--text-muted);
+  font-size: 12px;
+  font-weight: 650;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.docItem {
+  --doc-accent: var(--accent-cool);
+
+  position: relative;
+  display: grid;
+  gap: 18px;
+  padding: 24px;
+  overflow: hidden;
+  border: 1px solid var(--border-soft);
+  border-radius: 20px;
+  color: inherit;
+  background: color-mix(in srgb, var(--surface-soft) 98%, var(--doc-accent));
+  box-shadow: 0 18px 54px rgb(0 0 0 / 9%);
+  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
+}
+
+.docItem[data-accent='blue'] {
+  --doc-accent: #62a5ff;
+}
+
+.docItem[data-accent='cyan'] {
+  --doc-accent: #57d6ff;
+}
+
+.docItem[data-accent='pink'] {
+  --doc-accent: #ff72c6;
+}
+
+.docItem:hover {
+  border-color: color-mix(in srgb, var(--doc-accent) 58%, var(--border-soft));
+  background: color-mix(in srgb, var(--surface-soft) 94%, var(--doc-accent));
+  box-shadow:
+    0 18px 54px rgb(0 0 0 / 10%),
+    0 0 0 1px color-mix(in srgb, var(--doc-accent) 18%, transparent),
+    0 0 36px color-mix(in srgb, var(--doc-accent) 14%, transparent);
+}
+
+.docCardLink {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  border-radius: inherit;
+}
+
+.docCardLink:focus-visible {
+  outline: 2px solid var(--doc-accent);
+  outline-offset: -3px;
+}
+
+.docMain {
+  position: relative;
+  z-index: 0;
+  display: grid;
+  grid-template-columns: 64px minmax(0, 1fr);
+  gap: 18px;
+  align-items: center;
+}
+
+.docMark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 64px;
+  height: 64px;
+  color: var(--doc-accent);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 13px;
+  font-weight: 760;
+  letter-spacing: -0.03em;
+}
+
+.docIcon {
+  width: 64px;
+  height: 64px;
+}
+
+.docIconSlm {
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.35;
+}
+
+.docIconSlm circle {
+  fill: currentColor;
+  stroke: none;
+}
+
+.docIconNext path:first-child {
+  fill: currentColor;
+}
+
+.docIconNext path:last-child {
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-width: 1.8;
+}
+
+.docIconReact {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.25;
+}
+
+.docIconReact circle {
+  fill: currentColor;
+  stroke: none;
+}
+
+.docIconFigma {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.3;
+}
+
+.docIconFigma circle {
+  fill: color-mix(in srgb, currentColor 18%, transparent);
+}
+
+.docMeta {
+  margin-bottom: 5px;
+  color: var(--doc-accent);
+  font-size: 11px;
+  font-weight: 760;
+  letter-spacing: 0.09em;
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+.docItem h2 {
+  margin: 0;
+  color: var(--text-primary);
+  font-size: 21px;
+  font-weight: 760;
+  letter-spacing: -0.03em;
+  line-height: 1.15;
+}
+
+.docItem p {
+  max-width: 560px;
+  margin: 8px 0 0;
+  color: var(--text-secondary);
+  font-size: 14px;
+  line-height: 1.55;
+}
+
+.docActions {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 10px;
+  padding-top: 16px;
+  border-top: 1px solid var(--border-soft);
+  pointer-events: none;
+}
+
+.docStatus,
+.docLink {
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+  pointer-events: auto;
+}
+
+.docStatus {
+  gap: 8px;
+  padding: 6px 10px;
+  border: 1px solid color-mix(in srgb, var(--doc-accent) 34%, var(--border-soft));
+  border-radius: 10px;
+  color: var(--doc-accent);
+  background: color-mix(in srgb, var(--surface-soft) 90%, var(--doc-accent));
+  font-size: 12px;
+  font-weight: 700;
+  transition: border-color 150ms ease, background 150ms ease;
+}
+
+.docStatusLink {
+  padding: 7px 12px;
+  border-color: color-mix(in srgb, var(--accent-cool) 58%, var(--border-soft));
+  border-radius: 10px;
+  color: var(--accent-cool);
+  background: color-mix(in srgb, var(--surface-soft) 88%, var(--accent-cool));
+  font-size: 13px;
+}
+
+.docStatusLink:hover {
+  border-color: var(--accent-cool);
+  background: color-mix(in srgb, var(--surface-soft) 80%, var(--accent-cool));
+}
+
+.docItem[data-state='planned'] .docStatus {
+  color: var(--text-muted);
+}
+
+.docLinks {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.docLink {
+  padding: 6px 10px;
+  border: 1px solid var(--border-soft);
+  border-radius: 8px;
+  color: var(--text-primary);
+  background: var(--page-bg);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  font-weight: 500;
+  transition: border-color 150ms ease, color 150ms ease;
+}
+
+.docLink:hover {
+  border-color: var(--doc-accent);
+  color: var(--doc-accent);
+}
+
+.footer {
+  margin: 0;
+  color: var(--text-muted);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  text-align: center;
+}
+
+@media (max-width: 768px) {
+  .page {
+    justify-content: flex-start;
+    gap: 40px;
+    padding: 48px 20px 56px;
+  }
+
+  .title {
+    font-size: 38px;
+  }
+
+  .lead {
+    font-size: 16px;
+  }
+
+  .docItem {
+    gap: 16px;
+  }
+
+  .docActions {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}
+
+@media (max-width: 480px) {
+  .page {
+    gap: 36px;
+    padding: 44px 16px 48px;
+  }
+
+  .title {
+    font-size: 32px;
+  }
+
+  .lead {
+    font-size: 15px;
+    line-height: 1.5;
+  }
+
+  .docItem {
+    padding-right: 16px;
+    padding-left: 16px;
+  }
+
+  .docsPanelHeader {
+    padding-right: 4px;
+    padding-left: 4px;
+  }
+
+  .docMain {
+    grid-template-columns: 42px minmax(0, 1fr);
+    gap: 12px;
+  }
+
+  .docMark {
+    width: 42px;
+    height: 42px;
+    font-size: 12px;
+  }
+
+  .docIcon {
+    width: 30px;
+    height: 30px;
+  }
+
+  .docItem h2 {
+    font-size: 19px;
+  }
+
+  .docStatus,
+  .docLinks,
+  .docLink {
+    width: 100%;
+  }
+
+  .docStatus,
+  .docLink {
+    justify-content: center;
+  }
+
+  .docLink {
+    flex: 1;
+  }
+}

src/App.tsx

@@ -0,0 +1,290 @@
+import { useEffect, useLayoutEffect, useState } from 'react'
+
+import { docs } from './config/docs.config'
+import './App.css'
+
+type ThemeMode = 'system' | 'dark' | 'light'
+type ResolvedTheme = Exclude<ThemeMode, 'system'>
+
+const DARK_THEME_QUERY = '(prefers-color-scheme: dark)'
+const THEME_STORAGE_KEY = 'all-docs-theme'
+const repositoryUrl = 'https://gromlab.ru/gromov/docs'
+
+const themeOptions: ReadonlyArray<{
+  value: Exclude<ThemeMode, 'system'>
+  ariaLabel: string
+  title: string
+}> = [
+  {
+    value: 'light',
+    ariaLabel: 'Включить светлую тему',
+    title: 'Светлая',
+  },
+  {
+    value: 'dark',
+    ariaLabel: 'Включить тёмную тему',
+    title: 'Тёмная',
+  },
+]
+
+const themeIconByMode = {
+  light: (
+    <svg aria-hidden="true" viewBox="0 0 24 24" fill="none">
+      <circle cx="12" cy="12" r="4" stroke="currentColor" strokeWidth="2" />
+      <path
+        d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth="2"
+      />
+    </svg>
+  ),
+  dark: (
+    <svg aria-hidden="true" viewBox="0 0 24 24" fill="none">
+      <path
+        d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      />
+    </svg>
+  ),
+}
+
+const canUseDom = () => typeof window !== 'undefined' && typeof document !== 'undefined'
+
+const isThemeMode = (value: string | null): value is ThemeMode => {
+  return value === 'system' || value === 'dark' || value === 'light'
+}
+
+const getSystemTheme = (): ResolvedTheme => {
+  if (!canUseDom()) return 'light'
+
+  return window.matchMedia(DARK_THEME_QUERY).matches ? 'dark' : 'light'
+}
+
+const resolveTheme = (theme: ThemeMode): ResolvedTheme => {
+  return theme === 'system' ? getSystemTheme() : theme
+}
+
+const getStoredTheme = (): ThemeMode => {
+  if (!canUseDom()) return 'dark'
+
+  const storedTheme = window.localStorage.getItem(THEME_STORAGE_KEY)
+
+  return isThemeMode(storedTheme) ? storedTheme : 'dark'
+}
+
+const applyTheme = (theme: ThemeMode) => {
+  if (!canUseDom()) return
+
+  const resolvedTheme = resolveTheme(theme)
+
+  document.documentElement.dataset.theme = theme
+  document.documentElement.style.colorScheme = resolvedTheme
+
+  if (theme === 'system') {
+    window.localStorage.removeItem(THEME_STORAGE_KEY)
+    return
+  }
+
+  window.localStorage.setItem(THEME_STORAGE_KEY, theme)
+}
+
+function useTheme() {
+  const [theme, setTheme] = useState<ThemeMode>(getStoredTheme)
+  const [resolvedTheme, setResolvedTheme] = useState<ResolvedTheme>(() => resolveTheme(getStoredTheme()))
+
+  useLayoutEffect(() => {
+    applyTheme(theme)
+    setResolvedTheme(resolveTheme(theme))
+  }, [theme])
+
+  useEffect(() => {
+    if (!canUseDom()) return undefined
+
+    const mediaQuery = window.matchMedia(DARK_THEME_QUERY)
+    const handleSystemThemeChange = () => {
+      if (theme !== 'system') return
+
+      const nextResolvedTheme = resolveTheme(theme)
+
+      document.documentElement.style.colorScheme = nextResolvedTheme
+      setResolvedTheme(nextResolvedTheme)
+    }
+
+    mediaQuery.addEventListener('change', handleSystemThemeChange)
+
+    return () => mediaQuery.removeEventListener('change', handleSystemThemeChange)
+  }, [theme])
+
+  return { theme, resolvedTheme, setTheme }
+}
+
+function ThemeToggle() {
+  const { theme, resolvedTheme, setTheme } = useTheme()
+  const toggleTheme = (value: Exclude<ThemeMode, 'system'>) => {
+    setTheme(theme === value ? 'system' : value)
+  }
+
+  return (
+    <div className="themeToggle" role="group" aria-label="Тема" data-resolved-theme={resolvedTheme}>
+      {themeOptions.map((option) => (
+        <button
+          className="themeToggleOption"
+          type="button"
+          aria-pressed={theme === option.value}
+          aria-label={option.ariaLabel}
+          title={option.title}
+          data-active={theme === option.value}
+          key={option.value}
+          onClick={() => toggleTheme(option.value)}
+        >
+          <span className="themeToggleIcon">{themeIconByMode[option.value]}</span>
+        </button>
+      ))}
+    </div>
+  )
+}
+
+function GithubIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z" />
+    </svg>
+  )
+}
+
+function DocIcon({ mark }: { mark: string }) {
+  if (mark === 'SLM') {
+    return (
+      <svg aria-hidden="true" viewBox="0 0 24 24" className="docIcon docIconSlm">
+        <path d="M5 8.2 12 4.5l7 3.7-7 3.7-7-3.7Z" />
+        <path d="M5 12 12 15.7 19 12" />
+        <path d="M5 15.8 12 19.5l7-3.7" />
+        <circle cx="12" cy="8.2" r="1" />
+        <circle cx="8.8" cy="13.8" r=".75" />
+        <circle cx="15.2" cy="13.8" r=".75" />
+      </svg>
+    )
+  }
+
+  if (mark === 'NX') {
+    return (
+      <svg aria-hidden="true" viewBox="0 0 24 24" className="docIcon docIconNext">
+        <path d="M7 6.5h2.35l5.42 8.28V6.5H17v11h-2.35L9.23 9.22v8.28H7v-11Z" />
+        <path d="M15.1 15.22 19 20" />
+      </svg>
+    )
+  }
+
+  if (mark === 'RE') {
+    return (
+      <svg aria-hidden="true" viewBox="0 0 24 24" className="docIcon docIconReact">
+        <circle cx="12" cy="12" r="1.8" />
+        <ellipse cx="12" cy="12" rx="8.6" ry="3.3" />
+        <ellipse cx="12" cy="12" rx="8.6" ry="3.3" transform="rotate(60 12 12)" />
+        <ellipse cx="12" cy="12" rx="8.6" ry="3.3" transform="rotate(120 12 12)" />
+      </svg>
+    )
+  }
+
+  if (mark === 'FG') {
+    return (
+      <svg aria-hidden="true" viewBox="0 0 24 24" className="docIcon docIconFigma">
+        <circle cx="9" cy="5" r="3" />
+        <circle cx="15" cy="5" r="3" />
+        <circle cx="9" cy="12" r="3" />
+        <circle cx="15" cy="12" r="3" />
+        <circle cx="9" cy="19" r="3" />
+      </svg>
+    )
+  }
+
+  return <span>{mark}</span>
+}
+
+function App() {
+  return (
+    <main className="page">
+      <section className="hero" aria-labelledby="page-title">
+        <h1 className="title" id="page-title">Документация</h1>
+        <p className="lead">
+          Единое пространство для идей, черновиков и первых версий документаций,
+          которые ещё формируются и постепенно становятся самостоятельными материалами.
+        </p>
+        <div className="controls">
+          <a className="repoLink" href={repositoryUrl} target="_blank" rel="noopener noreferrer">
+            <GithubIcon />
+            <span>Репозиторий</span>
+          </a>
+          <ThemeToggle />
+        </div>
+      </section>
+
+      <section className="docsPanel" aria-label="Быстрые переходы">
+        <div className="docsPanelHeader">
+          <span>Документация</span>
+          <span>{docs.length} направления</span>
+        </div>
+
+        {docs.map((doc) => {
+          const isAvailable = Boolean(doc.href)
+
+          return (
+            <article
+              className="docItem"
+              data-accent={doc.accent}
+              data-state={isAvailable ? 'available' : 'planned'}
+              key={doc.href ?? doc.title}
+            >
+              {isAvailable && (
+                <a className="docCardLink" href={doc.href} aria-label={`Открыть ${doc.title}`} />
+              )}
+
+              <div className="docMain">
+                <span className="docMark" aria-hidden="true">
+                  <DocIcon mark={doc.mark} />
+                </span>
+                <div>
+                  <div className="docMeta">
+                    {doc.label}
+                  </div>
+                  <h2>{doc.title}</h2>
+                  <p>{doc.description}</p>
+                </div>
+              </div>
+
+              <div className="docActions">
+                {isAvailable ? (
+                  <a className="docStatus docStatusLink" href={doc.href}>
+                    Открыть -&gt;
+                  </a>
+                ) : (
+                  <span className="docStatus" aria-disabled="true">
+                    {doc.status}
+                  </span>
+                )}
+
+                {doc.links.length > 0 && (
+                  <div className="docLinks" aria-label="LLM-артефакты">
+                    {doc.links.map((link) => (
+                      <a className="docLink" href={link.href} key={link.href}>
+                        {link.label}
+                      </a>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </article>
+          )
+        })}
+      </section>
+
+      <footer className="footer">Рабочее пространство документаций</footer>
+    </main>
+  )
+}
+
+export default App

src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

src/config/docs.config.ts

@@ -0,0 +1,67 @@
+export type DocLink = {
+  label: string
+  href: string
+}
+
+export type DocCard = {
+  title: string
+  label: string
+  mark: string
+  description: string
+  href?: string
+  status: string
+  accent: string
+  links: DocLink[]
+}
+
+export const docs: DocCard[] = [
+  {
+    title: 'SLM Design',
+    label: 'Архитектура',
+    mark: 'SLM',
+    description: 'Архитектура frontend-приложений, где слои задают направление зависимостей, модули становятся границами ответственности, а явный DI через фабрики удерживает домены изолированными и предсказуемыми.',
+    href: '/slm-design/',
+    status: 'Доступно',
+    accent: 'violet',
+    links: [
+      { label: 'llms.txt', href: '/slm-design/llms.txt' },
+      { label: 'llms-full.txt', href: '/slm-design/llms-full.txt' },
+    ],
+  },
+  {
+    title: 'NextJS Style Guide',
+    label: 'Стиль проекта',
+    mark: 'NX',
+    description: 'Правила организации Next.js-приложений, роутинга, серверных границ и проектных соглашений.',
+    status: 'Скоро',
+    accent: 'blue',
+    links: [
+      { label: 'llms.txt', href: '/nextjs-style-guide/llms.txt' },
+      { label: 'llms-full.txt', href: '/nextjs-style-guide/llms-full.txt' },
+    ],
+  },
+  {
+    title: 'React Style Guide',
+    label: 'Стиль кода',
+    mark: 'RE',
+    description: 'Практики написания React-компонентов, хуков, состояния и клиентского UI-кода.',
+    status: 'Скоро',
+    accent: 'cyan',
+    links: [
+      { label: 'llms.txt', href: '/react-style-guide/llms.txt' },
+      { label: 'llms-full.txt', href: '/react-style-guide/llms-full.txt' },
+    ],
+  },
+  {
+    title: 'Figma Adaptive Standards',
+    label: 'Макеты',
+    mark: 'FG',
+    description: 'Стандарты и требования к подготовке адаптивных макетов в Figma: брейкпоинты, ресайз в диапазоне, Auto Layout/Constraints, компоненты, сетка, типографика, состояния UI, A11y и передача в разработку.',
+    status: 'Скоро',
+    accent: 'pink',
+    links: [
+      { label: 'llms.txt', href: '/figma-adaptive-standards/llms.txt' },
+      { label: 'llms-full.txt', href: '/figma-adaptive-standards/llms-full.txt' },
+    ],
+  },
+]

src/index.css

@@ -0,0 +1,83 @@
+:root {
+  color-scheme: light;
+  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --page-bg: #eef1f7;
+  --surface-soft: #f9fbff;
+  --text-primary: #101522;
+  --text-secondary: #424b60;
+  --text-muted: #7d879b;
+  --border-soft: #cfd6e5;
+  --accent-cool: #5866dc;
+  --grid-line: rgb(196 204 222 / 0.48);
+  --hero-glow: rgb(88 102 220 / 0.12);
+  --focus-ring: rgba(102, 119, 255, 0.56);
+  --shadow-subtle: rgba(25, 31, 54, 0.1);
+
+  font-family: var(--sans);
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+:root[data-theme='dark'] {
+  color-scheme: dark;
+  --page-bg: #1b1c21;
+  --surface-soft: #202229;
+  --text-primary: #f1f3f8;
+  --text-secondary: #a9afbf;
+  --text-muted: #747c90;
+  --border-soft: #343741;
+  --accent-cool: #8492ff;
+  --grid-line: rgb(72 76 92 / 0.34);
+  --hero-glow: rgb(132 146 255 / 0.18);
+  --focus-ring: rgba(132, 146, 255, 0.66);
+  --shadow-subtle: rgba(0, 0, 0, 0.24);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) {
+    color-scheme: dark;
+    --page-bg: #1b1c21;
+    --surface-soft: #202229;
+    --text-primary: #f1f3f8;
+    --text-secondary: #a9afbf;
+    --text-muted: #747c90;
+    --border-soft: #343741;
+    --accent-cool: #8492ff;
+    --grid-line: rgb(72 76 92 / 0.34);
+    --hero-glow: rgb(132 146 255 / 0.18);
+    --focus-ring: rgba(132, 146, 255, 0.66);
+    --shadow-subtle: rgba(0, 0, 0, 0.24);
+  }
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  min-width: 320px;
+  background: var(--page-bg);
+}
+
+body {
+  min-width: 320px;
+  min-height: 100svh;
+  margin: 0;
+  background: var(--page-bg);
+  color: var(--text-primary);
+}
+
+button,
+a {
+  font: inherit;
+}
+
+p {
+  margin: 0;
+}
+
+#root {
+  min-height: 100svh;
+}

src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)