zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(site): add aside component

Browse Source
This commit is contained in:
Darius Cepulis
2025-10-30 08:19:26 -05:00
parent 088caf5212
commit 30ab12b0f5
14 changed files with 129 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/content/docs/how-to/installation.mdx
+5
View File
@@ -6,6 +6,11 @@ description: Get started with Video.js v10 by choosing your framework, styles, s
import FrameworkCase from '@/components/docs/FrameworkCase.astro';
import ServerCode from '@/components/Code/ServerCode.astro';
import DocsLink from '@/components/docs/DocsLink.astro';
import Aside from '@/components/Aside.astro';
<Aside type="caution" title="Technical Preview">
Video.js v10 is currently in technical preview. The API and docs are actively evolving. See the <DocsLink slug="concepts/v10-roadmap">roadmap</DocsLink> for more details on what's coming.
</Aside>
Welcome to Video.js v10! This guide will help you get up and running. In it, you'll make three key choices:
site/src/content/docs/how-to/write-guides.mdx
+30
View File
@@ -9,6 +9,7 @@ import Minimal from '@/components/frames/Minimal.astro';
import ServerCode from '@/components/Code/ServerCode.astro';
import { TabsRoot, TabsPanel } from '@/components/Tabs.tsx';
import DocsLink from '@/components/docs/DocsLink.astro';
import Aside from '@/components/Aside.astro';
## What kind of guide are you writing?
I haven't written this section yet, but when I do, it'll rehash [Diátaxis](https://diataxis.fr/).
@@ -248,6 +249,35 @@ Press <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>Delete</kbd> to end the session.
Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.
## Asides / Callouts / Admonitions
Use the `<Aside>` component to highlight important information. It supports four types: `note`, `tip`, `caution`, and `danger`.
```mdx
{/* or type="tip" or "caution" or "danger" */}
<Aside type="note" title="Custom Title">
Your content. You can use **markdown** in here, too.
</Aside>
```
Which will give you...
<Aside type="note" title="Custom Title">
Your content. You can use **markdown** in here, too.
</Aside>
<Aside type="tip">
Your content. You can use **markdown** in here, too.
</Aside>
<Aside type="caution">
Your content. You can use **markdown** in here, too.
</Aside>
<Aside type="danger">
Your content. You can use **markdown** in here, too.
</Aside>
## Code and Code Frames
### Default frame