i18n(ru): added translations for components, css-and-tailwind, environmental-impact, project-structure pages (#888)

Co-authored-by: Loot Nurakhmetov <nurakhmetov.l@rahmetapp.kz>
Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>

5 files changed, 682 insertions, 2 deletions

diff --git a/docs/src/content/docs/ru/environmental-impact.md b/docs/src/content/docs/ru/environmental-impact.md
new file mode 100644
index 00000000..72be8b6f
--- /dev/null
+++ b/docs/src/content/docs/ru/environmental-impact.md
@@ -0,0 +1,149 @@
+---
+title: Экологичная документация
+description: Узнайте, как Starlight может помочь создавать экологически сайты с документацией и снижать ваш углеродный след.
+---
+
+Оценки влияния интернет-индустрии на климат варьируются от [2%][sf] до [4% глобальных выбросов углерода][bbc],
+что близко к выбросам авиационной индустрии.
+Расчет экологического воздействия веб-сайта включает в себя множество сложных факторов,
+но в данном руководстве перечислены несколько советов по снижению экологического следа вашего сайта с документацией.
+
+Хорошая новость в том, что выбор Starlight - отличное начало.
+Согласно Website Carbon Calculator, этот сайт [чище, чем 99% протестированных веб-страниц][sl-carbon],
+производя 0,01 г CO₂ за каждое посещение страницы.
+
+## Вес страницы
+
+Чем больше данных передает веб-страница, тем больше энергетических ресурсов она требует.
+В апреле 2023 года, медианная веб-страница требовала от пользователя скачать более 2 000 КБ данных, согласно [данным из HTTP Archive][http].
+
+Starlight создает страницы легкими, настолько, насколько это возможно
+Например, при первом посещении пользователь загрузит менее 50 КБ сжатых данных, что составляет всего 2,5% от медианного значения HTTP архива.
+При хорошей стратегии кэширования последующие навигации могут загружать всего 10 КБ.
+
+### Изображения
+
+Хоть Starlight и предлагает легкие страницы по-умолчанию, изображения, которые вы добавляете на страницы документации, могут быстро увеличивать вес вашей страницы.
+Starlight использует [оптимизировацию ресурсов][assets] Astro для оптимизации локальных изображений в ваших файлах Markdown и MDX.
+
+### UI компоненты
+
+Компоненты, на UI фреймворках, как React или Vue, могут легко добавлять большие объемы JavaScript на страницу.
+Поскольку Starlight основан на Astro, эти компоненты, по умолчанию **не загружают клиентский JavaScript** благодаря [Astro Островам][islands].
+
+### Кеширование
+
+Кэширование управляет тем, как долго браузер хранит и повторно использует данные, которые он уже загрузил.
+Хорошая стратегия кэширования гарантирует, что пользователь получает новое содержание как можно быстрее,
+когда оно меняется, но также избегает бесполезной повторной загрузки одного и того же содержания снова и снова, когда оно не изменилось.
+
+Самым распространенным способом настройки кэширования является использование [HTTP-заголовка `Cache-Control`][cache].
+При использовании Starlight вы можете установить длительное время кэширования для всего, что находится в каталоге `/_astro/`.
+Этот каталог содержит CSS, JavaScript и другие ресурсы, которые можно безопасно кэшировать навсегда, что позволяет снизить избыточные загрузки:
+
+```
+Cache-Control: public, max-age=604800, immutable
+```
+
+Как настроить кэширование зависит от вашего веб-хоста. Например, Vercel автоматически применяет эту стратегию кэширования без необходимости настройки,
+в то же время вы можете установить [заголовки для Netlify][ntl-headers], добавив файл `public/_headers` в ваш проект:
+
+```
+/_astro/*
+  Cache-Control: public
+  Cache-Control: max-age=604800
+  Cache-Control: immutable
+```
+
+[cache]: https://csswizardry.com/2019/03/cache-control-for-civilians/
+[ntl-headers]: https://docs.netlify.com/routing/headers/
+
+## Потребление энергии
+
+То, как реализована веб-страница может влиять на потребление энергии при ее запуске на устройстве пользователя. 
+За счет минимального использования JavaScript, Starlight снижает объем вычислительных ресурсов, необходимых телефону,
+планшету или компьютеру пользователя для загрузки и отображения страниц.
+
+Будьте внимательны при добавлении функций, таких как скрипты отслеживания аналитики или контент, зависящий от JavaScript,
+например, встроенные видео, так как они могут увеличить энергопотребление страницы. 
+Если вам необходима аналитика, рассмотрите выбор легковесного варианта, 
+такого как [Cabin][cabin], [Fathom][fathom] или [Plausible][plausible]. 
+Встроенные видео, такие как YouTube и Vimeo, можно улучшить, ожидая [взаимодействие пользователя для загрузки видео][lazy-video].
+Пакеты, такие как [`astro-embed`][embed], могут помочь с часто используемыми сервисами.
+
+:::tip[Знаете ли вы?]
+Разбор и компиляция JavaScript являются одной из самых ресурсоемких задач, которые браузерам приходится выполнять.
+По сравнению с отображением изображения JPEG того же размера, [обработка JavaScript может занять более чем в 30 раз больше времени][cost-of-js].
+:::
+
+[cabin]: https://withcabin.com/
+[fathom]: https://usefathom.com/
+[plausible]: https://plausible.io/
+[lazy-video]: https://web.dev/iframe-lazy-loading/
+[embed]: https://www.npmjs.com/package/astro-embed
+[cost-of-js]: https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e
+
+## Хостинг
+
+Место, где размещена веб-страница, может иметь большое влияние на то, насколько экологичен ваш сайт с документацией.
+Дата-центры и серверные фермы могут оказывать значительное экологическое воздействие, включая высокий энергопотребление и интенсивное использование воды.
+
+Выбор хостинга, использующего возобновляемую энергию, снизит выбросы углерода для вашего сайта. 
+[Справочник Green Web][gwb] - один из инструментов, который может помочь вам найти хостинговые компании, работающие с экологически чистой энергией.
+
+[gwb]: https://www.thegreenwebfoundation.org/directory/
+
+## Сравнения
+
+Хотите сравнивить другие фреймворки для документации?
+Эти тесты с использованием [Website Carbon Calculator][wcc] сравнивают аналогичные страницы, созданные с помощью разных инструментов.
+
+| Фреймворк                   | CO₂ на каждое посещение стр. |
+| --------------------------- |------------------------------|
+| [Starlight][sl-carbon]      | 0.01g                        |
+| [VitePress][vp-carbon]      | 0.05g                        |
+| [Docus][dc-carbon]          | 0.05g                        |
+| [Sphinx][sx-carbon]         | 0.07g                        |
+| [MkDocs][mk-carbon]         | 0.10g                        |
+| [Nextra][nx-carbon]         | 0.11g                        |
+| [docsify][dy-carbon]        | 0.11g                        |
+| [Docusaurus][ds-carbon]     | 0.24g                        |
+| [Read the Docs][rtd-carbon] | 0.24g                        |
+| [GitBook][gb-carbon]        | 0.71g                        |
+
+<small>Данные собраны 14 мая 2023 года. Чтобы увидеть актуальные цифры, перейдите по ссылке..</small>
+
+[sl-carbon]: https://www.websitecarbon.com/website/starlight-astro-build-getting-started/
+[vp-carbon]: https://www.websitecarbon.com/website/vitepress-dev-guide-what-is-vitepress/
+[dc-carbon]: https://www.websitecarbon.com/website/docus-dev-introduction-getting-started/
+[sx-carbon]: https://www.websitecarbon.com/website/sphinx-doc-org-en-master-usage-quickstart-html/
+[mk-carbon]: https://www.websitecarbon.com/website/mkdocs-org-getting-started/
+[nx-carbon]: https://www.websitecarbon.com/website/nextra-site-docs-docs-theme-start/
+[dy-carbon]: https://www.websitecarbon.com/website/docsify-js-org/
+[ds-carbon]: https://www.websitecarbon.com/website/docusaurus-io-docs/
+[rtd-carbon]: https://www.websitecarbon.com/website/docs-readthedocs-io-en-stable-index-html/
+[gb-carbon]: https://www.websitecarbon.com/website/docs-gitbook-com/
+
+## Дополнительные ресурсы
+
+### Инструменты
+
+- [Website Carbon Calculator][wcc]
+- [GreenFrame](https://greenframe.io/)
+- [Ecograder](https://ecograder.com/)
+- [WebPageTest Carbon Control](https://www.webpagetest.org/carbon-control/)
+- [Ecoping](https://ecoping.earth/)
+
+### Статьи и выступления
+
+- ["Построение более экологичного веба"](https://youtu.be/EfPoOt7T5lg), выступление Мишель Баркер
+- ["Стратегии экологически устойчивый веб-разработки в организации"](https://www.smashingmagazine.com/2022/10/sustainable-web-development-strategies-organization/), статья Мишель Баркер
+- ["Экологически устойчивый веб для каждого"](https://2021.stateofthebrowser.com/speakers/tom-greenwood/), выступление Тома Гринвуда
+- ["Как веб-контент может влиять на энергопотребление"](https://webkit.org/blog/8970/how-web-content-can-affect-power-usage/), статья Бенджамина Пулена и Саймона Фрейзера.
+
+[sf]: https://www.sciencefocus.com/science/what-is-the-carbon-footprint-of-the-internet/
+[bbc]: https://www.bbc.com/future/article/20200305-why-your-internet-habits-are-not-as-clean-as-you-think
+[http]: https://httparchive.org/reports/state-of-the-web
+[assets]: https://docs.astro.build/ru/guides/assets/
+[islands]: https://docs.astro.build/ru/concepts/islands/
+[wcc]: https://www.websitecarbon.com/
diff --git a/docs/src/content/docs/ru/guides/components.mdx b/docs/src/content/docs/ru/guides/components.mdx
new file mode 100644
index 00000000..bfb768d6
--- /dev/null
+++ b/docs/src/content/docs/ru/guides/components.mdx
@@ -0,0 +1,192 @@
+---
+title: Компоненты
+description: Использование компонентов в MDX со Starlight.
+---
+
+Компоненты позволяют вам легко повторно использовать фрагменты UI или стилизации.
+Примерами могут служить ссылочные карточки или встроенные видео YouTube.
+Starlight поддерживает использование компонентов в файлах [MDX](https://mdxjs.com/) и предоставляет некоторые общие компоненты для вашего использования.
+
+[Узнайте больше о создании компонентов в документации Astro](https://docs.astro.build/ru/core-concepts/astro-components/).
+
+## Использование компонент
+
+Вы можете использовать компонент, импортировав его в ваш файл MDX, а затем отобразив его как тег JSX.
+Они выглядят как HTML-теги, но начинаются с заглавной буквы, соответствующей имени в вашем операторе `import`:
+
+```mdx
+---
+# src/content/docs/index.mdx
+title: Добро пожаловать на мою документацию
+---
+
+import SomeComponent from '../../components/SomeComponent.astro';
+import AnotherComponent from '../../components/AnotherComponent.astro';
+
+<SomeComponent prop="something" />
+
+<AnotherComponent>
+	Компоненты могут содержать **вложенный контент**.
+</AnotherComponent>
+```
+
+Поскольку Starlight работает на базе Astro, вы можете использовать компоненты,
+созданные на любом [поддерживаемом UI-фреймворке (React, Preact, Svelte, Vue, Solid, Lit и Alpine)](https://docs.astro.build/en/core-concepts/framework-components/)
+в ваших файлах MDX.
+Узнайте больше о [использовании компонентов в MDX](https://docs.astro.build/ru/guides/markdown-content/#using-components-in-mdx) в документации Astro.
+
+### Совместимость со стилями Starlight
+
+Starlight применяет стандартные стили к вашему содержимому в формате Markdown, например, добавляет отступ между элементами.
+Если эти стили конфликтуют с внешним видом вашего компонента, установите класс `not-content` для вашего компонента, чтобы отключить их.
+
+```astro
+---
+// src/components/Example.astro
+---
+
+<div class="not-content">
+	<p>Стандартные стили Starlight не применены.</p>
+</div>
+```
+
+## Встроенные компоненты
+
+Starlight предоставляет встроенные компоненты для частых случаев, нужных в документации.
+Эти компоненты доступны из пакета `@astrojs/starlight/components`.
+
+### Вкладки
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+
+Вы можете отобразить интерфейс с вкладками, используя компоненты `<Tabs>` и `<TabItem>`.
+Каждый компонент `<TabItem>` должен иметь `label` для отображения пользователям.
+
+```mdx
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+
+<Tabs>
+	<TabItem label="Звезды">Сириус, Вега, Бетельгейзе</TabItem>
+	<TabItem label="Луны">Ио, Европа, Ганимед</TabItem>
+</Tabs>
+```
+
+Вышеуказанный код генерирует следующие вкладки на странице:
+
+<Tabs>
+	<TabItem label="Звезды">Сириус, Вега, Бетельгейзе</TabItem>
+	<TabItem label="Луны">Ио, Европа, Ганимед</TabItem>
+</Tabs>
+
+### Карточки
+
+import { Card, CardGrid } from '@astrojs/starlight/components';
+
+Вы можете отображать контент в блоке, со стилями Starlight, используя компонент `<Card>`.
+Оберните несколько карточек в компонент `<CardGrid>`, чтобы отображать карточки рядом, когда есть достаточно места.
+
+`<Card>` требует `title` и может дополнительно включать атрибут `icon`, установленный как название [одного из встроенных иконок Starlight](#все-иконки).
+
+```mdx
+import { Card, CardGrid } from '@astrojs/starlight/components';
+
+<Card title="Зацени">Интересный контент, который вы хотите подсветить.</Card>
+
+<CardGrid>
+	<Card title="Звезды" icon="star">
+		Сириус, Вега, Бетельгейзе
+	</Card>
+	<Card title="Луны" icon="moon">
+		Ио, Европа, Ганимед
+	</Card>
+</CardGrid>
+```
+
+Вышеуказанный код генерирует следующее на странице:
+
+<Card title="Зацени">Интересный контент, который вы хотите подсветить.</Card>
+
+<CardGrid>
+	<Card title="Звезды" icon="star">
+        Сириус, Вега, Бетельгейзе
+	</Card>
+	<Card title="Луны" icon="moon">
+        Ио, Европа, Ганимед
+	</Card>
+</CardGrid>
+
+:::tip
+Используйте сетку карточек на вашей домашней странице для отображения ключевых функций вашего проекта.
+Добавьте атрибут `stagger`, чтобы сдвинуть вторую колонку карточек по вертикали и добавить визуальный интерес:
+
+```astro
+<CardGrid stagger>
+	<!-- cards -->
+</CardGrid>
+```
+
+:::
+
+### Ссылочные карточки
+
+Используйте компонент `<LinkCard>` для создания заметных ссылок на разные страницы.
+
+`<LinkCard>` требует атрибута `title` и атрибута [`href`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).
+По желанию вы можете добавить краткое `description` или другие атрибуты ссылки, такие как `target`.
+
+Группируйте несколько компонентов `<LinkCard>` в `<CardGrid>`, чтобы отображать карточки рядом, когда есть достаточно места.
+
+```mdx
+import { LinkCard, CardGrid } from '@astrojs/starlight/components';
+
+<LinkCard
+	title="Кастомизация Starlight"
+	description="Узнайте, как сделать ваш сайт на Starlight уникальным с вашим логотипом, шрифтами, дизайном главной страницы и многим другим"
+	href="/ru/guides/customization/"
+/>
+
+<CardGrid>
+	<LinkCard title="Создание контента в Markdown" href="/ru/guides/authoring-content/" />
+	<LinkCard title="Компоненты" href="/ru/guides/components/" />
+</CardGrid>
+```
+
+Вышеуказанный код генерирует следующее на странице:
+
+import { LinkCard } from '@astrojs/starlight/components';
+
+<LinkCard
+	title="Кастомизация Starlight"
+	description="Узнайте, как сделать ваш сайт на Starlight уникальным с вашим логотипом, шрифтами, дизайном главной страницы и многим другим"
+	href="/ru/guides/customization/"
+/>
+
+<CardGrid>
+	<LinkCard title="Создание контента в Markdown" href="/ru/guides/authoring-content/" />
+	<LinkCard title="Компоненты" href="/ru/guides/components/" />
+</CardGrid>
+
+### Иконки
+
+import { Icon } from '@astrojs/starlight/components';
+import IconsList from '../../../../components/icons-list.astro';
+
+Starlight предоставляет набор общих иконок, которые вы можете отображать в своем контенте, используя компонент `<Icon>`.
+
+Каждый `<Icon>` требует атрибут [`name`](#все-иконки) и по желанию может включать атрибуты `label`, `size` и `color`.
+
+```mdx
+import { Icon } from '@astrojs/starlight/components';
+
+<Icon name="star" color="goldenrod" size="2rem" />
+```
+
+Вышеуказанный код генерирует следующее на странице:
+
+<Icon name="star" color="goldenrod" size="2rem" />
+
+#### Все иконки
+
+Список всех доступных иконок показан ниже с их соответствующими именами. Кликните по значку, чтобы скопировать код компонента для него.
+
+<IconsList />
diff --git a/docs/src/content/docs/ru/guides/css-and-tailwind.mdx b/docs/src/content/docs/ru/guides/css-and-tailwind.mdx
new file mode 100644
index 00000000..3abd7424
--- /dev/null
+++ b/docs/src/content/docs/ru/guides/css-and-tailwind.mdx
@@ -0,0 +1,290 @@
+---
+title: CSS & стилизация
+description: Узнайте, как стилизовать ваш сайт Starlight с помощью CSS-файлов или интегрировать с Tailwind CSS.
+---
+
+Вы можете стилизовать ваш сайт Starlight с помощью CSS-файлов или использовать плагин Starlight Tailwind.
+
+## Ваши CSS стили
+
+Настройте стили, для вашего сайта Starlight, указав дополнительные CSS-файлы для изменения или расширения стандартных стилей Starlight.
+
+1. Добавьте CSS-файл в ваш каталог `src/`.
+   Например, вы можете установить большую ширину колонки по умолчанию и бóльший размер текста для заголовков страниц:
+
+   ```css
+   /* src/styles/custom.css */
+   :root {
+   	--sl-content-width: 50rem;
+   	--sl-text-5xl: 3.5rem;
+   }
+   ```
+
+2. Добавьте путь к вашему CSS-файлу в массив `customCss` Starlight в `astro.config.mjs`:
+
+   ```js
+   // astro.config.mjs
+   import { defineConfig } from 'astro/config';
+   import starlight from '@astrojs/starlight';
+
+   export default defineConfig({
+   	integrations: [
+   		starlight({
+   			title: 'Docs With Custom CSS',
+   			customCss: [
+   				// Относительный путь к вашему CSS файлу
+   				'./src/styles/custom.css',
+   			],
+   		}),
+   	],
+   });
+   ```
+
+Вы можете увидеть все кастомные свойства CSS, используемые Starlight, которые вы можете установить для настройки вашего сайта,
+в [файле `props.css` на GitHub](https://github.com/withastro/starlight/blob/main/packages/starlight/style/props.css).
+
+## Tailwind CSS
+
+Поддержка Tailwind CSS в проектах Astro предоставляется [интеграцией Astro Tailwind](https://docs.astro.build/ru/guides/integrations-guide/tailwind/).
+Starlight предоставляет дополнительный плагин Tailwind для совместимости со стилями Starlight.
+
+Плагин Tailwind для Starlight применяет следующую конфигурацию:
+
+- Настраивает `dark:` варианты Tailwind для работы с темным режимом Starlight.
+- Использует [цвета и шрифты темы Tailwind](#стилизация-starlight-с-использованием-tailwind) в пользовательском интерфейсе Starlight.
+- Отключает стили сброса [Preflight](https://tailwindcss.com/docs/preflight) Tailwind, восстанавливая выборочно существенные части Preflight, необходимых для утилитных border классов Tailwind.
+
+### Создание нового проекта с Tailwind
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+
+Создайте новый проект Starlight с предварительно настроенным Tailwind CSS, используя `create astro`:
+
+<Tabs>
+<TabItem label="npm">
+
+```sh
+npm create astro@latest -- --template starlight/tailwind
+```
+
+</TabItem>
+<TabItem label="pnpm">
+
+```sh
+pnpm create astro --template starlight/tailwind
+```
+
+</TabItem>
+<TabItem label="Yarn">
+
+```sh
+yarn create astro --template starlight/tailwind
+```
+
+</TabItem>
+</Tabs>
+
+### Добавление Tailwind в существующий проект
+
+Если у вас уже есть сайт на Starlight и вы хотите добавить Tailwind CSS, следуйте этим шагам.
+
+1.  Добавьте интеграцию Tailwind от Astro:
+
+    <Tabs>
+
+    <TabItem label="npm">
+
+    ```sh
+    npx astro add tailwind
+    ```
+
+    </TabItem>
+
+    <TabItem label="pnpm">
+
+    ```sh
+    pnpm astro add tailwind
+    ```
+
+    </TabItem>
+
+    <TabItem label="Yarn">
+
+    ```sh
+    yarn astro add tailwind
+    ```
+
+    </TabItem>
+
+    </Tabs>
+
+2.  Установите плагин Tailwind для Starlight:
+
+    <Tabs>
+
+    <TabItem label="npm">
+
+    ```sh
+    npm install @astrojs/starlight-tailwind
+    ```
+
+    </TabItem>
+
+    <TabItem label="pnpm">
+
+    ```sh
+    pnpm install @astrojs/starlight-tailwind
+    ```
+
+    </TabItem>
+
+    <TabItem label="Yarn">
+
+    ```sh
+    yarn add @astrojs/starlight-tailwind
+    ```
+
+    </TabItem>
+
+    </Tabs>
+
+3.  Создайте CSS-файл для базовых стилей Tailwind, например, в `src/tailwind.css`:
+
+    ```css
+    /* src/tailwind.css */
+    @tailwind base;
+    @tailwind components;
+    @tailwind utilities;
+    ```
+
+4.  Обновите ваш конфигурационный файл Astro, чтобы использовать ваши базовые стили Tailwind и отключить базовые стили по умолчанию:
+
+    ```js {11-12,16-17}
+    // astro.config.mjs
+    import { defineConfig } from 'astro/config';
+    import starlight from '@astrojs/starlight';
+    import tailwind from '@astrojs/tailwind';
+
+    export default defineConfig({
+    	integrations: [
+    		starlight({
+    			title: 'Docs with Tailwind',
+    			customCss: [
+    				// Путь к базовым стилям Tailwind:
+    				'./src/tailwind.css',
+    			],
+    		}),
+    		tailwind({
+    			// Отключите базовые стили:
+    			applyBaseStyles: false,
+    		}),
+    	],
+    });
+    ```
+
+5.  Добавьте плагин Starlight Tailwind в `tailwind.config.cjs`:
+
+    ```js ins={2,7}
+    // tailwind.config.cjs
+    const starlightPlugin = require('@astrojs/starlight-tailwind');
+
+    /** @type {import('tailwindcss').Config} */
+    module.exports = {
+    	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+    	plugins: [starlightPlugin()],
+    };
+    ```
+
+### Стилизация Starlight с использованием Tailwind
+
+Starlight будет использовать значения из вашей [конфигурации темы Tailwind](https://tailwindcss.com/docs/theme) в его UI.
+
+Если установлены, следующие параметры переопределят стили Starlight по умолчанию:
+
+- `colors.accent` — используется для ссылок и выделения текущего элемента;
+- `colors.gray` — используется для цветов фона и границ;
+- `fontFamily.sans` — используется для текста UI и контента;
+- `fontFamily.mono` — используется для примеров кода.
+
+```js {12,14,18,20}
+// tailwind.config.cjs
+const starlightPlugin = require('@astrojs/starlight-tailwind');
+const colors = require('tailwindcss/colors');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+	theme: {
+		extend: {
+			colors: {
+				// Ваш предпочтительный акцентный цвет. Индиго наиболее близок к стандартным настройкам Starlight.
+				accent: colors.indigo,
+				// Ваш предпочтительный оттенок серого. Цинк наиболее близок к стандартным настройкам Starlight.
+				gray: colors.zinc,
+			},
+			fontFamily: {
+				// Ваш предпочтительный шрифт для текста. По умолчанию Starlight использует системные шрифты.
+				sans: ['"Atkinson Hyperlegible"'],
+				// Ваш предпочтительный шрифт для кода. По умолчанию Starlight использует системные моноширинные шрифты.
+				mono: ['"IBM Plex Mono"'],
+			},
+		},
+	},
+	plugins: [starlightPlugin()],
+};
+```
+
+## Темизация
+
+Цветовая тема Starlight может быть настроена путем переопределения её стандартных кастомных свойств.
+Эти переменные используются по всему UI, причём различные оттенки серого используются для текста и цветов фона,
+а акцентный цвет используется для ссылок и выделения текущих элементов в навигации.
+
+### Редактор цветовой темы
+
+Используйте ползунки ниже, чтобы изменить палитры акцентного и серого цветов Starlight.
+Темные и светлые области предпросмотра будут показывать результирующие цвета, и вся страница также обновится, чтобы показать ваши изменения.
+
+Когда вы довольны внесенными изменениями, скопируйте CSS или код Tailwind ниже и используйте его в вашем проекте.
+
+import ThemeDesigner from '../../../../components/theme-designer.astro';
+
+<ThemeDesigner
+	labels={{
+		presets: {
+			label: 'Заготовки',
+			ocean: 'Океан',
+			forest: 'Лес',
+			oxide: 'Оксид',
+			nebula: 'Туман',
+			default: 'По-умолчанию',
+			random: 'Случайно',
+		},
+		editor: {
+			accentColor: 'Акцентный цвет',
+			grayColor: 'Серый',
+			hue: 'Оттенок',
+			chroma: 'Интенсивность ',
+			pickColor: 'Выбор цвета',
+		},
+		preview: {
+			darkMode: 'Темный режим',
+			lightMode: 'Светлый режим',
+			bodyText:
+				'Текст тела отображается в оттенке серого с высоким контрастом по отношению к фону.',
+			linkText: 'Ссылки выделены цветом.',
+			dimText: 'Некоторый текст, например оглавление, имеет меньший контраст.',
+			inlineCode: 'Встроенный код имеет выделенный фон.',
+		},
+	}}
+>
+	<Fragment slot="css-docs">
+        Добавьте следующий CSS в ваш проект в [пользовательском CSS-файле](#ваши-css-стили),
+        чтобы применить эту тему к вашему сайту.
+	</Fragment>
+	<Fragment slot="tailwind-docs">
+        Приведенный ниже пример [файла конфигурации Tailwind](#стилизация-starlight-с-использованием-tailwind)
+        включает сгенерированные палитры цветов `accent` и `gray` для использования
+        в объекте конфигурации `theme.extend.colors`.
+	</Fragment>
+</ThemeDesigner>
diff --git a/docs/src/content/docs/ru/guides/customization.mdx b/docs/src/content/docs/ru/guides/customization.mdx
index 8a97dd28..33c2cc65 100644
--- a/docs/src/content/docs/ru/guides/customization.mdx
+++ b/docs/src/content/docs/ru/guides/customization.mdx
@@ -206,7 +206,7 @@ import starlight from '@astrojs/starlight';
 export default defineConfig({
 	integrations: [
 		starlight({
-			title: 'Документация с ссылками на социальные сети',
+			title: 'Документация со ссылками на социальные сети',
 			social: {
 				discord: 'https://astro.build/chat',
 				github: 'https://github.com/withastro/starlight',
@@ -244,7 +244,7 @@ import starlight from '@astrojs/starlight';
 export default defineConfig({
 	integrations: [
 		starlight({
-			title: 'Документация с ссылками для редактирования',
+			title: 'Документация со ссылками для редактирования',
 			editLink: {
 				baseUrl: 'https://github.com/withastro/starlight/edit/main/docs/',
 			},
diff --git a/docs/src/content/docs/ru/guides/project-structure.mdx b/docs/src/content/docs/ru/guides/project-structure.mdx
new file mode 100644
index 00000000..dfa3122c
--- /dev/null
+++ b/docs/src/content/docs/ru/guides/project-structure.mdx
@@ -0,0 +1,49 @@
+---
+title: Структура проекта
+description: Узнайте, как организовать файлы в вашем проекте Starlight.
+---
+
+Это руководство покажет вам, как организован проект Starlight и какую роль выполняют различные файлы в вашем проекте.
+
+Проекты Starlight, как правило, следуют той же структуре файлов и каталогов, что и другие проекты Astro.
+Подробнее смотрите в [документации по структуре проекта Astro](https://docs.astro.build/ru/core-concepts/project-structure/).
+
+## Файлы и папки
+
+- `astro.config.mjs` — Файл конфигурации Astro; включает интеграцию и конфигурацию Starlight.
+- `src/content/config.ts` — Файл конфигурации коллекций контента; добавляет метаданные (frontmatter) от Starlight в ваш проект.
+- `src/content/docs/` — Файлы контента. Starlight преобразует каждый файл `.md`, `.mdx` или `.mdoc` в этом каталоге в страницу на вашем сайте.
+- `src/content/i18n/` (по необходимости) — Данные перевода для поддержки [интернационализации](/ru/guides/i18n/).
+- `src/` — Другой исходный код и файлы (компоненты, стили, изображения и т. д.) для вашего проекта.
+- `public/` — Статические активы (шрифты, значки, PDF и т. д.), которые не будут обработаны Astro.
+
+## Пример проекта
+
+Директория проекта Starlight может выглядеть так:
+
+import FileTree from '../../../../components/file-tree.astro';
+
+<FileTree>
+
+- public/
+  - favicon.svg
+- src/
+  - assets/
+    - logo.svg
+    - screenshot.jpg
+  - components/
+    - CustomButton.astro
+    - InteractiveWidget.jsx
+  - content/
+    - docs/
+      - guides/
+        - 01-getting-started.md
+        - 02-advanced.md
+      - index.mdx
+    - config.ts
+  - env.d.ts
+- astro.config.mjs
+- package.json
+- tsconfig.json
+
+</FileTree>