mkdocs.yml

# Project information
site_name: 'React UI'
site_description: 'React components for your design system'

# Repository
repo_url: 'https://github.com/react-ui-org/react-ui'
repo_name: 'react-ui'
edit_uri: 'blob/master/src'

docs_dir: 'src'

markdown_extensions:
  - admonition
  - attr_list
  - def_list
  - pymdownx.highlight:
      use_pygments: false
  - pymdownx.inlinehilite
  - pymdownx.superfences
  - pymdownx.emoji:
      emoji_index: !!python/name:material.extensions.emoji.twemoji
      emoji_generator: !!python/name:material.extensions.emoji.to_svg
  - attr_list
  - md_in_html

# Configuration
theme:
  name: material
  language: 'en'
  favicon: 'favicon.ico'
  custom_dir: 'src/docs/_overrides'
  font:
    text: 'Titillium Web'
  palette:
    - media: "(prefers-color-scheme: light)"
      scheme: default
      toggle:
        icon: material/weather-night
        name: Switch to dark mode
    - media: "(prefers-color-scheme: dark)"
      scheme: slate
      toggle:
        icon: material/weather-sunny
        name: Switch to light mode
  features:
    - navigation.sections
    - navigation.footer

# Additional CSS. Mind the order!
extra_css:
  - https://unpkg.com/prismjs@1.29.0/themes/prism-twilight.min.css # Prism JS syntax highlighting
  - docs/_assets/stylesheets/extra.css # mkDocs theme tweaks
  - docs/_assets/generated/docs-custom-properties.development.css # Load React UI CSS custom properties to make them accessible in the document root (outside shadowDOM) so we can preview colors etc.

# Additional JS. Mind the order!
extra_javascript:
  # First load dependencies
  - https://unpkg.com/@babel/standalone@7.20.15/babel.min.js
  - https://unpkg.com/react@17.0.2/umd/react.development.js
  - https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js
  - https://unpkg.com/@floating-ui/core@1.0.0/dist/floating-ui.core.umd.min.js
  - https://unpkg.com/@floating-ui/dom@1.0.0/dist/floating-ui.dom.umd.min.js
  - https://unpkg.com/@floating-ui/react-dom@1.0.0/dist/floating-ui.react-dom.umd.min.js
  - docs/_assets/generated/react-ui.development.js
  - docs/_assets/js/ruiIcon.js
  - docs/_assets/js/ruiSwatch.js

  # Then load and init Docoff
  - https://unpkg.com/@react-ui-org/docoff@0.5.4/public/generated/bundle.js

  # Then load non-Docoff code highlighiting
  - https://unpkg.com/prismjs@1.29.0/components/prism-core.min.js
  - https://unpkg.com/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js

# Must be open to external connections since MkDocs run in a docker container
dev_addr: '0.0.0.0:8000'

nav:
  - Introduction: 'index.md'
  - Basics:
      - Getting Started:
          - Installation: 'docs/getting-started/installation.md'
          - Usage: 'docs/getting-started/usage.md'
          - 'Browsers & Devices': 'docs/getting-started/browsers-and-devices.md'
      - Foundation:
          - 'Design Tokens': 'docs/foundation/design-tokens.md'
          - 'Collections': 'docs/foundation/collections.md'
          - 'Colors': 'docs/foundation/colors.md'
          - 'Typography': 'docs/foundation/typography.md'
          - 'Spacing': 'docs/foundation/spacing.md'
          - 'Borders': 'docs/foundation/borders.md'
          - 'Shadows': 'docs/foundation/shadows.md'
          - 'Breakpoints': 'docs/foundation/breakpoints.md'
          - 'Accessibility': 'docs/foundation/accessibility.md'
          - 'Icons': 'docs/foundation/icons.md'
  - Components:
      - Actions:
          - Button: 'components/Button/README.md'
          - TextLink: 'components/TextLink/README.md'
      - Inputs:
          - CheckBoxField: 'components/CheckboxField/README.md'
          - FileInputField: 'components/FileInputField/README.md'
          - Radio: 'components/Radio/README.md'
          - SelectField: 'components/SelectField/README.md'
          - TextArea: 'components/TextArea/README.md'
          - TextField: 'components/TextField/README.md'
          - Toggle: 'components/Toggle/README.md'
      - Layouts:
          - ButtonGroup: 'components/ButtonGroup/README.md'
          - FormLayout: 'components/FormLayout/README.md'
          - Grid: 'components/Grid/README.md'
          - InputGroup: 'components/InputGroup/README.md'
          - Toolbar: 'components/Toolbar/README.md'
      - Miscellaneous:
          - Alert: 'components/Alert/README.md'
          - Badge: 'components/Badge/README.md'
          - Card: 'components/Card/README.md'
          - Modal: 'components/Modal/README.md'
          - Paper: 'components/Paper/README.md'
          - Popover: 'components/Popover/README.md'
          - ScrollView: 'components/ScrollView/README.md'
          - Table: 'components/Table/README.md'
          - Tabs: 'components/Tabs/README.md'
          - Text: 'components/Text/README.md'
  - Helpers:
      - CSS Helpers:
          - Animation: 'docs/css-helpers/animation.md'
          - Box Alignment: 'docs/css-helpers/box-alignment.md'
          - Colors: 'docs/css-helpers/colors.md'
          - Display: 'docs/css-helpers/display.md'
          - Spacing: 'docs/css-helpers/spacing.md'
          - Typography: 'docs/css-helpers/typography.md'
      - JS Helpers:
          - Classnames: 'docs/js-helpers/classnames.md'
          - Transferring Props: 'docs/js-helpers/transferProps.md'
  - Guides:
      - Customize:
          - Theming:
              - Overview: 'docs/customize/theming/overview.md'
              - Forms: 'docs/customize/theming/forms.md'
          - Global Props: 'docs/customize/global-props.md'
          - Translations: 'docs/customize/translations.md'
      - Contribute:
          - General Guidelines: 'docs/contribute/general-guidelines.md'
          - API Guidelines: 'docs/contribute/api.md'
          - Composition: 'docs/contribute/composition.md'
          - CSS Guidelines: 'docs/contribute/css.md'
          - Releasing: 'docs/contribute/releasing.md'