daytonaio / docs

Official Documentation for Daytona
https://daytona.io/docs
Apache License 2.0
10 stars 11 forks source link

Asides (Admonitions) restyle #36

Closed mikimih closed 4 months ago

mikimih commented 4 months ago

Restyle Starlight Admonitions Based on Design

This PR adds a new Aside component to match the design for admonitions.

How to Use in MDX Files

There are two ways to create admonitions:

  1. Using a pair of triple colons:
    
    :::note
    Starlight is a documentation website toolkit built with [Astro](https://astro.build/).
    :::

:::tip[Did you know?] Astro helps you build faster websites with Islands Architecture. :::

:::caution Think twice before using Starlight if you're unsure. :::


2. Using the Custom Aside Component:
```mdx
import Aside from "@components/Aside.astro";

<Aside type='tip' title="Did you know?">
  Astro helps you build faster websites with [Islands Architecture](https://docs.astro.build/en/concepts/islands/).
</Aside>

Notes

We recommend using the second option with the Aside component, as it uses the icons from our design.

Screenshot 2024-05-31 at 11 07 48
mikimih commented 4 months ago

As I explained in my initial PR comment:

The default Starlight Aside component cannot be overridden, which results in the default Starlight icon on "tip" admonitions with triple colons (:::) syntax.

To address this, I created a custom Aside component to use the correct icons per our design. This custom component should be used in MDX files for accurate "tip" annotations.

I've now pushed updates to the MDX files, replacing the triple colon syntax with a custom Aside component.

osslate commented 4 months ago

Thanks @mikimih! Just to note that there are admonitions left to change to <Aside>, but I opened issue #37 to track this earlier. I'll send a PR to change them docs-wide.