Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
f9dfd92
chore(docusaurus-theme): remove eui-docgen dependency
weronikaolejniczak Jun 20, 2025
2c072c3
feat(docusaurus-theme): make VersionSwitcher reusable
weronikaolejniczak Jun 20, 2025
55ff66c
refactor(website): pass props to the updated VersionSwitcher
weronikaolejniczak Jun 20, 2025
4bd1e3b
fix(website): remove incorrect @elastic/eui imports from severity pat…
weronikaolejniczak Aug 1, 2025
12673ac
fix(website): fix links in the data grid container constraints
weronikaolejniczak Aug 1, 2025
e831d40
feat(docusaurus-theme): make PropsTable reusable
weronikaolejniczak Aug 4, 2025
8f300c6
refactor(website): extend the theme PropsTable
weronikaolejniczak Aug 4, 2025
53fcd0c
fix(website): update broken links
weronikaolejniczak Aug 4, 2025
0afb027
chore(docusaurus-theme): add license header
weronikaolejniczak Aug 4, 2025
ff9ed67
chore(docusaurus-theme): add license and update package.json
weronikaolejniczak Aug 4, 2025
117efeb
chore(docusaurus-theme): add license header to version switcher
weronikaolejniczak Aug 5, 2025
e14c909
Merge branch 'main' into chore/prepare-docusaurus-theme
weronikaolejniczak Sep 8, 2025
9b4e1eb
fix(website): render VersionSwitcher on mobile
weronikaolejniczak Sep 8, 2025
6ffa129
feat(docusaurus-theme): make Footer use config
weronikaolejniczak Sep 8, 2025
07e72ad
feat(website): update footer config
weronikaolejniczak Sep 8, 2025
2b87c99
chore(docusaurus-preset): add LICENSE.txt file
weronikaolejniczak Sep 9, 2025
6ebbb3a
chore: update READMEs
weronikaolejniczak Sep 9, 2025
a5c382d
fix(docusaurus-theme): make navbar item not shrink
weronikaolejniczak Sep 9, 2025
d780bf7
fix(docusaurus-theme): make theme font-size 14px like high contrast s…
weronikaolejniczak Sep 9, 2025
ed0709f
fix(docusaurus-theme): improve theme switcher trigger hover
weronikaolejniczak Sep 9, 2025
dab6dd6
fix(docusaurus-theme): use EUI token for color mode toggle hover
weronikaolejniczak Sep 9, 2025
9c3986e
fix(docusaurus-theme): make color mode persist
weronikaolejniczak Sep 12, 2025
23f332c
fix(docusaurus-theme): render copyright as html
weronikaolejniczak Sep 12, 2025
f2c99c3
chore(docusaurus-theme): update README with right-side nav links
weronikaolejniczak Sep 12, 2025
4eeac19
fix(docusaurus-theme): remove redundant color mode logic
weronikaolejniczak Sep 15, 2025
90e183f
fix(docusaurus-preset): add workspace theme dependency
weronikaolejniczak Sep 15, 2025
67c3fa1
Merge branch 'main' into chore/prepare-docusaurus-theme
weronikaolejniczak Oct 14, 2025
4473215
Merge branch 'main' into chore/prepare-docusaurus-theme
weronikaolejniczak Oct 15, 2025
091b45a
fix(website): fix broken links
weronikaolejniczak Oct 15, 2025
0ed33c8
fix(docusaurus-theme): use EuiLink styles in the footer
weronikaolejniczak Oct 15, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions packages/docusaurus-preset/LICENSE.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
Source code in this repository is covered by (i) a dual license under the Server
Side Public License, v 1 and the Elastic License 2.0 or (ii) an Apache License
2.0 compatible license or (iii) solely under the Elastic License 2.0, in each
case, as noted in the applicable header. The default throughout the repository
is a dual license under the Server Side Public License, v 1 and the Elastic
License 2.0, unless the header specifies another license.
214 changes: 214 additions & 0 deletions packages/docusaurus-preset/README.md
Original file line number Diff line number Diff line change
@@ -1,2 +1,216 @@
# `@elastic/eui-docusaurus-preset`

EUI custom [Docusaurus](https://docusaurus.io/) preset made for the EUI [documentation website](https://eui.elastic.co).

## Overview

The preset comes with themes and plugins configured.

### Themes

| Theme | Description |
|---------------------------------|----------------------------------------------------|
| `@docusaurus/theme-classic` | Base Docusaurus theme (required for compatibility) |
| `@elastic/eui-docusaurus-theme` | EUI custom theme for Docusaurus |

### Plugins

| Plugin | Description. | Enabled by default? |
|----------------------------------------|---------------------------------------------------------------------|---------------------------|
| `ignore-styles-plugin` | Prevents Infima and some inherited styles from polluting global CSS | Yes |
| `@docusaurus/plugin-content-docs` | Documentation pages support | Yes (configurable) |
| `@docusaurus/plugin-content-pages` | Static pages support | Yes (configurable) |
| `@docusaurus/plugin-svgr` | SVG import support | Yes (configurable) |
| `@docusaurus/plugin-content-blog` | Blog support | Yes (configurable) |
| `@docusaurus/plugin-sitemap` | Sitemap generation (for SEO) | Only in production builds |
| `@docusaurus/plugin-google-analytics` | Google Analytics integration | If configured |
| `@docusaurus/plugin-google-tag-manager`| Google Tag Manager integration | If configured |
| `@docusaurus/plugin-google-gtag` | Google Global Site Tag integration | If configured |

## Usage

The EUI preset uses the [preset constructor](https://docusaurus.io/docs/using-plugins#creating-presets) to define the theme (`@elastic/eui-docusaurus-theme`) and plugins.

To use it in your Docusaurus project, install the package:

```shell
# npm
npm install @elastic/eui-docusaurus-preset

# pnpm
pnpm add @elastic/eui-docusaurus-preset

# Yarn
yarn add @elastic/eui-docusaurus-preset
```

and in your `docusaurus.config.ts` file, add:

```ts
const config: Config = {
// ...
presets: [
[
require.resolve("@elastic/eui-docusaurus-preset"),
{
docs: {
sidebarPath: "./sidebars.ts",
},
} satisfies Preset.Options,
],
],
// ...
}
```

### Theme only

Docusaurus uses Infima, its default CSS framework, to style the classic theme (`@docusaurus/theme-classic`). The EUI Docusaurus theme is based on the classic theme, but Infima's global styles often override or conflict with EUI's design system, leading to inconsistent appearance. The `ignore-styles-plugin` disables Infima's styles, ensuring the EUI theme displays correctly. For this reason, we highly recommend using the preset rather than the standalone theme.

If you prefer to use only the theme, refer to [Theme only](../docusaurus-theme/README.md#theme-only) section in `@elastic/eui-docusaurus-theme`.

## Local development

### Prerequisites

This package requires:

- Node.js (check current version in [.nvmrc](../../.nvmrc)),
- [corepack](https://nodejs.org/api/corepack.html).

### Installing dependencies

Please run `yarn` to install dependencies:

```shell
yarn
```

### Building the package

```shell
yarn build
```

### Building in watch mode

Run the following command to build this package whenever a file is edited:

```shell
yarn start
```

:::warning
Please note that this package is configured to do incremental builds and sometimes `tsc` may not update the `lib` directory with your latest changes if you rename or delete files.

If that's the case please run `yarn build`.
:::

### Test with EUI documentation website

Run the following command from the root of the mono-repository to run the website:

```shell
yarn workspace @elastic/eui-website start
```

You can pair it with the watch mode when modifying the Docusaurus theme.

### Test locally with your own Docusaurus project

You should have a Docusaurus project running. If you want to test EUI theme with a fresh project, you should create a [Docusaurus scaffolded project website](https://docusaurus.io/docs/installation).

Run the following command to create a Docusaurus project:

```shell
npx create-docusaurus@latest my-website classic --typescript
```

Install `yalc` globally if you haven't already:

```shell
npm install -g yalc
```

In the root of the mono-repository, run the following commands to build and publish the preset locally:

```shell
yarn workspace @elastic/eui-docusaurus-preset build

# Publish the preset locally
cd packages/docusaurus-preset
yalc publish
```

In your project, install EUI dependencies:

```shell
# npm
npm install @elastic/eui @elastic/charts @emotion/react @emotion/css moment

# pnpm
pnpm add @elastic/eui @elastic/charts @emotion/react @emotion/css moment

# Yarn
yarn add @elastic/eui @elastic/charts @emotion/react @emotion/css moment
```

and add the locally published packages:

```shell
yalc add @elastic/eui-docusaurus-preset

# npm
npm install

# pnpm
pnpm install

# Yarn
yarn
```

Configure Docusaurus to use the locally built preset as outlined in the [Usage section](#usage).

#### Making changes

When you make changes to the preset, rebuild and republish the packages:

```shell
# From the mono-repository root
yarn workspace @elastic/eui-docusaurus-preset build

cd packages/docusaurus-preset
yalc publish --push
```

The `--push` flag automatically updates all projects using these packages.

Restart your Docusaurus development server:

```shell
# npm
npm run start

# pnpm
pnpm start

# Yarn
yarn start
```

When you're done testing, remove the locally published packages from your project:

```shell
# In your project
yalc remove @elastic/eui-docusaurus-preset

# npm
npm install

# pnpm
pnpm install

# Yarn
yarn
```
5 changes: 5 additions & 0 deletions packages/docusaurus-preset/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
{
"name": "@elastic/eui-docusaurus-preset",
"version": "1.0.0",
"description": "EUI preset for Docusaurus",
"license": "SEE LICENSE IN LICENSE.txt",
"main": "lib/index.js",
"types": "lib/index.d.ts",
"scripts": {
Expand All @@ -12,6 +14,9 @@
"url": "https://github.com/elastic/eui.git",
"directory": "packages/docusaurus-preset"
},
"dependencies": {
"@elastic/eui-docusaurus-theme": "workspace:^"
},
"devDependencies": {
"@docusaurus/types": "^3.7.0",
"typescript": "~5.5.4"
Expand Down
6 changes: 6 additions & 0 deletions packages/docusaurus-theme/LICENSE.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
Source code in this repository is covered by (i) a dual license under the Server
Side Public License, v 1 and the Elastic License 2.0 or (ii) an Apache License
2.0 compatible license or (iii) solely under the Elastic License 2.0, in each
case, as noted in the applicable header. The default throughout the repository
is a dual license under the Server Side Public License, v 1 and the Elastic
License 2.0, unless the header specifies another license.
29 changes: 29 additions & 0 deletions packages/docusaurus-theme/NOTICE.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
@elastic/eui-docusaurus-theme
Copyright 2024-2025 Elasticsearch B.V.

---

This product bundles code based on @docusaurus/theme-classic which is
available under a "MIT" license.

MIT License

Copyright (c) Facebook, Inc. and its affiliates.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
Loading