From 83e7dcfb6ac8d2a2fbcdaf7c5737d5e640c36110 Mon Sep 17 00:00:00 2001 From: Lut Nurakhmetov Date: Fri, 13 Oct 2023 20:03:39 +0600 Subject: i18n(ru): added translations for components, css-and-tailwind, environmental-impact, project-structure pages (#888) Co-authored-by: Loot Nurakhmetov Co-authored-by: Chris Swithinbank --- docs/src/content/docs/ru/environmental-impact.md | 149 +++++++++++ docs/src/content/docs/ru/guides/components.mdx | 192 ++++++++++++++ .../content/docs/ru/guides/css-and-tailwind.mdx | 290 +++++++++++++++++++++ docs/src/content/docs/ru/guides/customization.mdx | 4 +- .../content/docs/ru/guides/project-structure.mdx | 49 ++++ 5 files changed, 682 insertions(+), 2 deletions(-) create mode 100644 docs/src/content/docs/ru/environmental-impact.md create mode 100644 docs/src/content/docs/ru/guides/components.mdx create mode 100644 docs/src/content/docs/ru/guides/css-and-tailwind.mdx create mode 100644 docs/src/content/docs/ru/guides/project-structure.mdx 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 | + +Данные собраны 14 мая 2023 года. Чтобы увидеть актуальные цифры, перейдите по ссылке.. + +[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'; + + + + + Компоненты могут содержать **вложенный контент**. + +``` + +Поскольку 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 +--- + +
+

Стандартные стили Starlight не применены.

+
+``` + +## Встроенные компоненты + +Starlight предоставляет встроенные компоненты для частых случаев, нужных в документации. +Эти компоненты доступны из пакета `@astrojs/starlight/components`. + +### Вкладки + +import { Tabs, TabItem } from '@astrojs/starlight/components'; + +Вы можете отобразить интерфейс с вкладками, используя компоненты `` и ``. +Каждый компонент `` должен иметь `label` для отображения пользователям. + +```mdx +import { Tabs, TabItem } from '@astrojs/starlight/components'; + + + Сириус, Вега, Бетельгейзе + Ио, Европа, Ганимед + +``` + +Вышеуказанный код генерирует следующие вкладки на странице: + + + Сириус, Вега, Бетельгейзе + Ио, Европа, Ганимед + + +### Карточки + +import { Card, CardGrid } from '@astrojs/starlight/components'; + +Вы можете отображать контент в блоке, со стилями Starlight, используя компонент ``. +Оберните несколько карточек в компонент ``, чтобы отображать карточки рядом, когда есть достаточно места. + +`` требует `title` и может дополнительно включать атрибут `icon`, установленный как название [одного из встроенных иконок Starlight](#все-иконки). + +```mdx +import { Card, CardGrid } from '@astrojs/starlight/components'; + +Интересный контент, который вы хотите подсветить. + + + + Сириус, Вега, Бетельгейзе + + + Ио, Европа, Ганимед + + +``` + +Вышеуказанный код генерирует следующее на странице: + +Интересный контент, который вы хотите подсветить. + + + + Сириус, Вега, Бетельгейзе + + + Ио, Европа, Ганимед + + + +:::tip +Используйте сетку карточек на вашей домашней странице для отображения ключевых функций вашего проекта. +Добавьте атрибут `stagger`, чтобы сдвинуть вторую колонку карточек по вертикали и добавить визуальный интерес: + +```astro + + + +``` + +::: + +### Ссылочные карточки + +Используйте компонент `` для создания заметных ссылок на разные страницы. + +`` требует атрибута `title` и атрибута [`href`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href). +По желанию вы можете добавить краткое `description` или другие атрибуты ссылки, такие как `target`. + +Группируйте несколько компонентов `` в ``, чтобы отображать карточки рядом, когда есть достаточно места. + +```mdx +import { LinkCard, CardGrid } from '@astrojs/starlight/components'; + + + + + + + +``` + +Вышеуказанный код генерирует следующее на странице: + +import { LinkCard } from '@astrojs/starlight/components'; + + + + + + + + +### Иконки + +import { Icon } from '@astrojs/starlight/components'; +import IconsList from '../../../../components/icons-list.astro'; + +Starlight предоставляет набор общих иконок, которые вы можете отображать в своем контенте, используя компонент ``. + +Каждый `` требует атрибут [`name`](#все-иконки) и по желанию может включать атрибуты `label`, `size` и `color`. + +```mdx +import { Icon } from '@astrojs/starlight/components'; + + +``` + +Вышеуказанный код генерирует следующее на странице: + + + +#### Все иконки + +Список всех доступных иконок показан ниже с их соответствующими именами. Кликните по значку, чтобы скопировать код компонента для него. + + 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`: + + + + +```sh +npm create astro@latest -- --template starlight/tailwind +``` + + + + +```sh +pnpm create astro --template starlight/tailwind +``` + + + + +```sh +yarn create astro --template starlight/tailwind +``` + + + + +### Добавление Tailwind в существующий проект + +Если у вас уже есть сайт на Starlight и вы хотите добавить Tailwind CSS, следуйте этим шагам. + +1. Добавьте интеграцию Tailwind от Astro: + + + + + + ```sh + npx astro add tailwind + ``` + + + + + + ```sh + pnpm astro add tailwind + ``` + + + + + + ```sh + yarn astro add tailwind + ``` + + + + + +2. Установите плагин Tailwind для Starlight: + + + + + + ```sh + npm install @astrojs/starlight-tailwind + ``` + + + + + + ```sh + pnpm install @astrojs/starlight-tailwind + ``` + + + + + + ```sh + yarn add @astrojs/starlight-tailwind + ``` + + + + + +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'; + + + + Добавьте следующий CSS в ваш проект в [пользовательском CSS-файле](#ваши-css-стили), + чтобы применить эту тему к вашему сайту. + + + Приведенный ниже пример [файла конфигурации Tailwind](#стилизация-starlight-с-использованием-tailwind) + включает сгенерированные палитры цветов `accent` и `gray` для использования + в объекте конфигурации `theme.extend.colors`. + + 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'; + + + +- 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 + + -- cgit