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

chore(site): begin v8 page migration (#177)

Browse Source
This commit is contained in:
Darius Cepulis
2025-11-10 14:31:26 -08:00
committed by GitHub
parent ecd7103211
commit eea94aeb95
119 changed files with 5540 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/content/docs/how-to/write-guides.mdx
+20 -2
View File
@@ -5,7 +5,7 @@ description: 'A guide on writing documentation, and a test bed for all our MDX c
import FrameworkCase from '@/components/docs/FrameworkCase.astro';
import StyleCase from '@/components/docs/StyleCase.astro';
import Minimal from '@/components/frames/Minimal.astro';
import MinimalFrame from '@/components/frames/Minimal.astro';
import ServerCode from '@/components/Code/ServerCode.astro';
import { TabsRoot, TabsList, TabsPanel, Tab } from '@/components/Tabs.tsx';
import DocsLink from '@/components/docs/DocsLink.astro';
@@ -106,7 +106,11 @@ Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sap
### Images
We don't actually support images yet, lol.
```mdx
![alt text](../path/to/local/or/remote/image)
```
![All four Video.js themes](../../../assets/blog/2019-09-13-announcing-the-new-videojs-com/collage.png)
### Blockquotes
@@ -403,6 +407,20 @@ import MinimalFrame from '@/components/frames/Minimal.astro';
</MinimalFrame>
```
#### Using `iframe`s in `<MinimalFrame>`
Imo `<MinimalFrame>` is a great tool for laying out `iframe`s. If you go down this path, note that `<MinimalFrame>` has `position: relative;`, which means that you can (and should) absolutely position your `iframe` within it. For example...
```mdx
<MinimalFrame class="aspect-video">
<iframe class="absolute top-0 left-0 w-full h-full" src="https://jsfiddle.net/ugnkw65y/1/embedded/result,html/light" frameBorder="0" allowFullScreen />
</MinimalFrame>
```
<MinimalFrame class="aspect-video">
<iframe class="absolute top-0 left-0 w-full h-full" src="https://jsfiddle.net/ugnkw65y/1/embedded/result,html/light" frameBorder="0" allowFullScreen />
</MinimalFrame>
### `<TabsRoot>` supports arbitrary content, too
You can place any old content underneath `<TabsPanel>`, and it'll show alongside whatever tabbed content you're showing. This is a pattern we've used so far to display code alongside a rendered example (e.g., <DocsLink slug="reference/play-button">PlayButton</DocsLink>).