Skip to content

theme-preview.mdx

Latest commit

 

History

History
357 lines (250 loc) · 8.42 KB

theme-preview.mdx

File metadata and controls

357 lines (250 loc) · 8.42 KB
Raw
title Theme preview page
description This is a page used to preview a lot of theme elements in one place.
displayed_sidebar toolhiveSidebar
pagination_next toolhive/guides-cli/install
pagination_prev toolhive/index

This is a page used to preview a lot of theme elements in one place when working on styles.

Community knowledge base for Docusaurus design tips

Breadcrumbs above aren't very interesting since this is a top-level page that doesn't participate in a sidebar, navigate to a different page to see them.

Another element that can't be easily reproduced here is the DocCardList component, but you can see it in action on the ToolHive CLI guides index page.

Level 2 heading

By default level 2-3 headings generate the TOC on the top right (reference).

Level 3 heading

Some text within a section. Here is a link.

And here is some inline code to show how it looks, even some inline code with a link.

Level 4 heading

This level won't appear in the TOC by default.

Code blocks

Docusaurus reference docs

console.log('We love marmots.');

function MarmotsAreGreat(agree) {
  if (agree) {
    // highlight-next-line
    return 'I agree, and this line is highlighted!';
  }

  return 'I am wrong.';
}
---
# Sample profile for validating repositories
version: v1
type: profile
name: acme-github-profile
display_name: Sample Profile
alert: 'off'
remediate: 'off'
repository:
  - type: allowed_selected_actions
    def:
      github_owned_allowed: true
      verified_allowed: true
      patterns_allowed: []
{
  "key": "String",
  "Number": 1,
  "array": [1, 2, 3],
  "nested": {
    "literals": true
  }
}

Admonitions

These are MDX callouts (reference).

To customize the title, use square brackets after the type, e.g. :::tip[My title].

To keep Prettier from invalidating the admonition syntax, add empty lines around the start and end of the admonition block (see here).

They can be customized in src/css/custom.css like so (reference):

/* Customize the "Tip" admonition */
.alert--success {
  --ifm-alert-background-color: #59cfa8;
  --ifm-alert-background-color-highlight: #00bbbe26;
  --ifm-alert-foreground-color: #002a3e;
  --ifm-alert-border-color: #002a3e;
}

/* Use a different border color in dark mode */
[data-theme='dark'] .alert--success {
  --ifm-alert-border-color: #008385;
}

:::note

This is a note admonition. Its CSS class is theme-admonition-note.

Here's a link inside the admonition.

:::

:::tip

This is a tip admonition. Its CSS class is theme-admonition-tip.

Here's a link inside the admonition.

:::

:::info[Hello]

This is an info admonition. Its CSS class is theme-admonition-info and it has a custom title.

Here's a link inside the admonition.

:::

:::warning

This is a warning admonition. Its CSS class is theme-admonition-warning.

Here's a link inside the admonition.

:::

:::danger

This is a danger admonition. Its CSS class is theme-admonition-danger.

Here's a link inside the admonition.

:::

:::::info[Parent]

Admonitions can be nested; example here so we can see how the colors look together.

::::danger[Child]

Child content

:::tip[Inception]

This is getting silly

:::

::::

:::::

Enterprise constructs

Components for presenting Stacklok Enterprise content inline with OSS docs.

Enterprise admonition

Custom :::enterprise admonition for callout content within OSS pages. Uses the Stacklok symbol as the icon and a teal color palette distinct from the other admonition types. Supports custom titles via :::enterprise[My title].

:::enterprise

Stacklok Enterprise includes turnkey integrations for common identity providers. Instead of manually configuring OIDC, use the built-in Okta or Entra ID integration to map IdP groups directly to ToolHive roles and policy sets.

Learn more about Stacklok Enterprise.

:::

Enterprise badge

Inline <EnterpriseBadge /> component for labeling individual features or capabilities within a page. Works next to headings, in lists, or inline with text.

Session pinning

Sessions can be pinned to a specific node for the duration of a connection.

  • Automatic failover - connections are automatically rerouted when a node becomes unavailable.
  • Manual failover - connections can be manually rerouted by an administrator.

Sidebar badge

Enterprise-only pages can be marked with an ENT badge in the sidebar by adding className: 'enterprise-only' to the sidebar item in sidebars.ts. The badge includes a tooltip on hover. See "Stacklok Enterprise" in the sidebar for an example.

Tables

A standard Markdown table:

Column 1 Column 2 Column 3
This hello A link in a table
That hi value
The other thing how are you 🙈
Another row so you can see the zebra effect

(Docusaurus theme enables header row and zebra rows by default)

Tabs

MDX Tabs component, default theme (reference)

This is an apple 🍎 
```python title="Code block inside a tab"
print('We love marmots.')

def marmots_are_great(agree):
    if agree:
        # highlight-next-line
        return 'I agree, and this line is highlighted!'

    return 'I am wrong.'
    ```
This is an orange 🍊 This is a banana 🍌

Details panel

Click to expand

This is a details panel, which can be used to show additional information without cluttering the page.

It can contain any Markdown or MDX content, including inline code, code blocks, images, even other details panels. Here's a link inside the details panel.

console.log('This is inside a details panel.');

Images

An MDX ThemedImage, which switches based on light/dark theme (reference)

import useBaseUrl from '@docusaurus/useBaseUrl'; import ThemedImage from '@theme/ThemedImage';

<ThemedImage alt='Docusaurus themed image' width='300px' sources={{ light: useBaseUrl('/img/logos/stacklok-default-black.svg'), dark: useBaseUrl('/img/logos/stacklok-default-white.svg'), }} />

An image using the "screenshot" CSS class to add a border and shadow/glow to make them stand out from the background:

<ThemedImage alt='VS Code MCP settings' sources={{ light: useBaseUrl('/img/toolhive/quickstart/vscode-mcp-start-light.webp'), dark: useBaseUrl('/img/toolhive/quickstart/vscode-mcp-start-dark.webp'), }} title='VS Code MCP settings' width='450' className='screenshot' />

Diagrams

A mermaid flowchart (reference)

flowchart LR
  node1["Node"] -- Label --> node2
  node2["Node"] -- Label --> node3
  subgraph container["**Subgraph**"]
    direction LR
    subgraph container1["Nested subgraph"]
        node3["Node"]
    end
  end
Loading

A mermaid sequence diagram

sequenceDiagram
  Alice->>+John: Hello John, how are you?
  note right of John: Note
  John-->>-Alice: Great!
  Alice-)John: See you later!
Loading

Other standard elements

Here's some bold and italic text.

Unordered list:

  • One
  • Two
  • Three

Ordered list:

  1. One
  2. Two
  3. Three

Horizontal line:

Pagination