mirror of
https://github.com/zoriya/v10.git
synced 2026-08-05 13:48:14 +00:00
fix(site): prevent images from overflowing on narrow viewports (#1302)
Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -12,9 +12,17 @@ const isRemote = typeof src === 'string' && src.startsWith('http');
|
||||
|
||||
{
|
||||
isRemote ? (
|
||||
<img class={twMerge("my-8", className)} src={src} {...rest} />
|
||||
<img
|
||||
class={twMerge("my-8 h-auto max-w-full", className)}
|
||||
src={src}
|
||||
{...rest}
|
||||
/>
|
||||
) : (
|
||||
// @ts-expect-error tbh I don't know how to tell ts that inferSize is ok
|
||||
<Image class={twMerge("my-8", className)} inferSize src={src} {...rest} />
|
||||
<Image
|
||||
class={twMerge("my-8 h-auto max-w-full", className)}
|
||||
inferSize
|
||||
src={src}
|
||||
{...rest}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
*/
|
||||
export const shared = {
|
||||
a: 'underline intent:no-underline',
|
||||
code: 'border border-manila-75 bg-manila-25 dark:bg-soot dark:border-warm-gray px-1 rounded font-mono text-code normal-case',
|
||||
code: 'border border-manila-75 bg-manila-25 dark:bg-soot dark:border-warm-gray px-1 rounded font-mono text-code normal-case break-words',
|
||||
codeBlock: 'font-mono text-code text-manila-light',
|
||||
pre: 'shiki astro-code',
|
||||
em: 'italic',
|
||||
|
||||
@@ -3,9 +3,10 @@ title: 'Build with AI'
|
||||
description: 'How to give AI tools the context they need to build Video.js players alongside you'
|
||||
---
|
||||
|
||||
import { Image } from 'astro:assets';
|
||||
import ContentWidth from '@/components/frames/ContentWidth.astro';
|
||||
import FrameworkCase from '@/components/docs/FrameworkCase.astro';
|
||||
import CopyMarkdownButton from '@/components/CopyMarkdownButton.tsx';
|
||||
import Img from '@/components/typography/Img.astro';
|
||||
import markdownNegotiation from '@/assets/docs/how-to/build-with-ai/markdown-negotiation.png';
|
||||
|
||||
Video.js publishes all of its documentation in AI-friendly formats. This page covers how to feed that documentation to your tools.
|
||||
@@ -25,7 +26,7 @@ Every doc page is available as markdown, so you can provide your model with focu
|
||||
|
||||
2. **`Accept: text/markdown` header**: AI tools that send this header when fetching a Video.js doc URL will receive markdown instead of HTML.
|
||||
|
||||
<Image src={markdownNegotiation} alt="Fetching a doc URL returns 188.7KB of HTML; fetching the same URL with .md returns 3.4KB of markdown" inferSize class="max-w-md" />
|
||||
<ContentWidth><Img src={markdownNegotiation} alt="Fetching a doc URL returns 188.7KB of HTML; fetching the same URL with .md returns 3.4KB of markdown" class="w-full max-w-md" /></ContentWidth>
|
||||
3. **Add `.md` to any URL**: append `.md` to any doc URL to get its markdown directly. For example, the PlayButton reference is available at [`videojs.org/docs/framework/react/reference/play-button.md`](https://videojs.org/docs/framework/react/reference/play-button.md).
|
||||
</FrameworkCase>
|
||||
|
||||
@@ -36,7 +37,7 @@ Every doc page is available as markdown, so you can provide your model with focu
|
||||
|
||||
2. **`Accept: text/markdown` header**: AI tools that send this header when fetching a Video.js doc URL will receive markdown instead of HTML.
|
||||
|
||||
<Image src={markdownNegotiation} alt="Fetching a doc URL returns 188.7KB of HTML; fetching the same URL with .md returns 3.4KB of markdown" inferSize />
|
||||
<ContentWidth><Img src={markdownNegotiation} alt="Fetching a doc URL returns 188.7KB of HTML; fetching the same URL with .md returns 3.4KB of markdown" class="w-full max-w-md" /></ContentWidth>
|
||||
3. **Add `.md` to any URL**: append `.md` to any doc URL to get its markdown directly. For example, the PlayButton reference is available at [`videojs.org/docs/framework/html/reference/play-button.md`](https://videojs.org/docs/framework/html/reference/play-button.md).
|
||||
</FrameworkCase>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user