feat(site): add aside component

site/src/components/Aside.astro

@@ -0,0 +1,67 @@
+---
+import clsx from 'clsx';
+import { Info, Lightbulb, TriangleAlert, OctagonX } from 'lucide-react';
+import { twMerge } from 'tailwind-merge';
+
+type AsideType = 'note' | 'tip' | 'caution' | 'danger';
+
+type Props = {
+  type: AsideType;
+  title?: string;
+  class?: string;
+};
+
+const { type, title, class: className } = Astro.props;
+
+const icons: Record<AsideType, typeof Info> = {
+  note: Info,
+  tip: Lightbulb,
+  caution: TriangleAlert,
+  danger: OctagonX,
+};
+
+const defaultTitles: Record<AsideType, string> = {
+  note: 'Note',
+  tip: 'Tip',
+  caution: 'Caution',
+  danger: 'Danger',
+};
+
+const Icon = icons[type];
+const renderTitle = title ?? defaultTitles[type];
+---
+
+<aside
+  class={twMerge(
+    clsx(
+      'w-full max-w-3xl mx-auto my-6 border-l-2 pl-3',
+      type === 'note' && 'border-blue',
+      type === 'tip' && 'border-purple',
+      type === 'caution' && 'border-yellow',
+      type === 'danger' && 'border-red',
+    ),
+    className,
+  )}
+>
+  <div class="flex gap-3">
+    <div class="flex-shrink-0 mt-[3px]">
+      <Icon
+        size={18}
+        className={clsx(
+          clsx(
+            type === 'note' && 'text-blue',
+            type === 'tip' && ' text-purple',
+            type === 'caution' && 'text-yellow',
+            type === 'danger' && 'text-red',
+          ),
+        )}
+      />
+    </div>
+    <div class="flex-1 min-w-0">
+      <p class="text-md font-semibold mb-2 text-black dark:text-white">{renderTitle}</p>
+      <div class="prose prose-sm max-w-none text-black dark:text-white [&>*:first-child]:mt-0 [&>*:last-child]:mb-0">
+        <slot />
+      </div>
+    </div>
+  </div>
+</aside>

site/src/components/NavBar/MobileNav.tsx

@@ -56,7 +56,7 @@ export default function MobileNav({ navLinks, currentPath, dark = false, childre
               <a
                 key={link.href}
                 href={link.href}
-                className={clsx('text-md px-6 py-3', link.matchPath && currentPath.startsWith(link.matchPath) ? 'underline' : 'intent:underline')}
+                className={clsx('text-lg px-6 py-3', link.matchPath && currentPath.startsWith(link.matchPath) ? 'underline' : 'intent:underline')}
                 aria-current={link.matchPath && currentPath.startsWith(link.matchPath) ? 'page' : undefined}
               >
                 {link.label}
@@ -66,7 +66,7 @@ export default function MobileNav({ navLinks, currentPath, dark = false, childre
             ))}
             <a
               href={GITHUB_REPO_URL}
-              className="text-md px-6 py-3 inline-flex items-center gap-1 intent:underline"
+              className="text-lg px-6 py-3 inline-flex items-center gap-1 intent:underline"
             >
               GitHub
               {' '}
@@ -74,7 +74,7 @@ export default function MobileNav({ navLinks, currentPath, dark = false, childre
             </a>
             <a
               href={DISCORD_INVITE_URL}
-              className="text-md px-6 py-3 inline-flex items-center gap-1 intent:underline"
+              className="text-lg px-6 py-3 inline-flex items-center gap-1 intent:underline"
             >
               Discord
               {' '}

site/src/components/blog/BlogPostCard.astro

@@ -18,8 +18,8 @@ const { post, authors, asLink } = Astro.props;
       <FormattedDate date={post.data.pubDate} />
     </time>
     <div class="mb-3">
-      <h2 class="text-md font-medium md:text-h4 group-intent:underline mb-1">{post.data.title}</h2>
-      <p class="font-medium md:text-md text-dark-40 dark:text-light-40">{post.data.description}</p>
+      <h2 class="text-lg font-medium md:text-h4 group-intent:underline mb-1">{post.data.title}</h2>
+      <p class="font-medium md:text-lg text-dark-40 dark:text-light-40">{post.data.description}</p>
     </div>
     {
       authors.length > 0 && (

site/src/components/typography/H4.astro

@@ -13,7 +13,7 @@ const { as: Tag = 'h4', maxWidth = true, class: className, ...props } = Astro.pr
 
 <Tag
   class={twMerge(
-    clsx('text-md font-medium @lg:text-h5 @3xl:text-h4 mb-6 mt-12', maxWidth && 'max-w-3xl mx-auto'),
+    clsx('text-lg font-medium @lg:text-h5 @3xl:text-h4 mb-6 mt-12', maxWidth && 'max-w-3xl mx-auto'),
     className,
   )}
   {...props}

site/src/components/typography/H5.astro

@@ -12,7 +12,7 @@ const { as: Tag = 'h5', maxWidth = true, class: className, ...props } = Astro.pr
 ---
 
 <Tag
-  class={twMerge(clsx('font-medium @lg:text-md @3xl:text-h5 mb-6 mt-9', maxWidth && 'max-w-3xl mx-auto'), className)}
+  class={twMerge(clsx('font-medium @lg:text-lg @3xl:text-h5 mb-6 mt-9', maxWidth && 'max-w-3xl mx-auto'), className)}
   {...props}
 >
   <slot />

site/src/components/typography/H6.astro

@@ -12,7 +12,7 @@ const { as: Tag = 'h6', maxWidth = true, class: className, ...props } = Astro.pr
 ---
 
 <Tag
-  class={twMerge(clsx('text-base font-medium @3xl:text-md my-6', maxWidth && 'max-w-3xl mx-auto'), className)}
+  class={twMerge(clsx('text-base font-medium @3xl:text-lg my-6', maxWidth && 'max-w-3xl mx-auto'), className)}
   {...props}
 >
   <slot />

site/src/content/docs/how-to/installation.mdx

@@ -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

@@ -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

site/src/layouts/Markdown.astro

@@ -19,7 +19,7 @@ const { title, subtitle, description } = Astro.props;
     <article class="@container">
       <header class="border-b border-light-40 max-w-3xl mx-auto pb-10 mb-10">
         <h1 class="text-h4 md:text-h2 mb-2">{title}</h1>
-        <div class="font-medium md:text-md text-dark-40">{description}</div>
+        <div class="font-medium md:text-lg text-dark-40">{description}</div>
       </header>
       <slot />
     </article>

site/src/pages/blog/[...page].astro

@@ -48,7 +48,7 @@ const jsonLdSchema = createBlogCollectionSchema({
   <JsonLd slot="head" schema={jsonLdSchema} />
   <header class="mb-10 md:mb-20 w-full max-w-3xl mx-auto">
     <h1 class="text-h4 md:text-h2 mb-2">Video.js Blog</h1>
-    <p class="text-md font-medium md:text-h5 text-dark-40 dark:text-light-40">
+    <p class="text-lg font-medium md:text-h5 text-dark-40 dark:text-light-40">
       {page.data.length === 0 ? 'Coming soon' : 'Articles, announcements, news, updates, and more'}
     </p>
   </header>

site/src/pages/blog/[...slug].astro

@@ -42,14 +42,14 @@ const jsonLdSchema = createBlogPostingSchema({
     <header class="border-b border-light-40 dark:border-dark-80 max-w-3xl mx-auto pb-10 mb-10">
       <time
         datetime={post.data.pubDate.toISOString()}
-        class="font-medium md:text-md text-dark-40 dark:text-light-40 flex gap-4 mb-1"
+        class="font-medium md:text-lg text-dark-40 dark:text-light-40 flex gap-4 mb-1"
       >
         <FormattedDate date={post.data.pubDate} />
         <span>&bull;</span>
         <span>{remarkPluginFrontmatter.minutesRead}</span>
       </time>
       <h1 class="text-h4 md:text-h2 mb-2">{post.data.title}</h1>
-      <div class="font-medium md:text-md text-dark-40 dark:text-light-40">
+      <div class="font-medium md:text-lg text-dark-40 dark:text-light-40">
         By {
           new Intl.ListFormat('en', { style: 'long', type: 'conjunction' })
             .formatToParts(authors.map((author) => author.data.name))

site/src/pages/blog/authors/[author].astro

@@ -61,7 +61,7 @@ const jsonLdSchema = createProfilePageSchema({
       )
     }
     <h1 class="text-h2 mb-1">{author.data.name}</h1>
-    {author.data.bio && <p class="text-md text-dark-80 dark:text-light-80 mb-4">{author.data.bio}</p>}
+    {author.data.bio && <p class="text-lg text-dark-80 dark:text-light-80 mb-4">{author.data.bio}</p>}
     {
       author.data.socialLinks && (
         <AuthorSocialLinks client:idle socialLinks={author.data.socialLinks} className="flex gap-2" />

site/src/pages/index.astro

@@ -24,7 +24,7 @@ const poster = `${VJS8_DEMO_VIDEO.poster}?time=0`;
         style={{ '--lg-grid-cols': 'auto auto' }}
       >
         <h1 class="text-h4 md:text-h1 text-balance lg:text-pretty">The Open Source Player for the Web</h1>
-        <p class="md:text-md text-balance max-w-100">
+        <p class="md:text-lg text-balance max-w-100">
           For over 15 years, Video.js has been the world’s web video player. Now rebuilt in v10 for modern development
           and performance.
         </p>
@@ -64,7 +64,7 @@ const poster = `${VJS8_DEMO_VIDEO.poster}?time=0`;
         <section class="flex gap-3 rounded-xl border border-light-40 dark:border-dark-80 p-6">
           <CircleCheck size={20} className="flex-shrink-0 relative top-1" />
           <div>
-            <h3 class="font-semibold text-md">Preview</h3>
+            <h3 class="font-semibold text-lg">Preview</h3>
             <p class="font-medium mb-3">October 28, 2025</p>
             <p class="max-w-3xl">Vibe check. First public look, with limited features. Not production ready.</p>
           </div>
@@ -74,7 +74,7 @@ const poster = `${VJS8_DEMO_VIDEO.poster}?time=0`;
             <Clock size={20} className="flex-shrink-0 relative top-1" />
           </div>
           <div>
-            <h3 class="font-semibold text-md">Beta</h3>
+            <h3 class="font-semibold text-lg">Beta</h3>
             <p class="font-medium mb-3">February 2026</p>
             <p class="max-w-3xl">Core controls. Adaptive streaming with existing engines. Try it out!</p>
           </div>
@@ -84,7 +84,7 @@ const poster = `${VJS8_DEMO_VIDEO.poster}?time=0`;
             <Clock size={20} className="flex-shrink-0 relative top-1" />
           </div>
           <div>
-            <h3 class="font-semibold text-md">Release</h3>
+            <h3 class="font-semibold text-lg">Release</h3>
             <p class="font-medium mb-3">Mid-2026</p>
             <p class="max-w-3xl">Stable, with all the basics: Media Chrome, Vidstack, Plyr feature parity.</p>
           </div>
@@ -94,7 +94,7 @@ const poster = `${VJS8_DEMO_VIDEO.poster}?time=0`;
             <Clock size={20} className="flex-shrink-0 relative top-1" />
           </div>
           <div>
-            <h3 class="font-semibold text-md">Beyond</h3>
+            <h3 class="font-semibold text-lg">Beyond</h3>
             <p class="font-medium mb-3">Late-2026</p>
             <p class="max-w-3xl">Collab with the community, migrate major v8 plugins, develop streaming engines</p>
           </div>

site/src/styles/globals.css

@@ -71,6 +71,7 @@
   --color-orange: #f26222;
   --color-red: #ea3837;
   --color-purple: #a83b71;
+  --color-blue: #3870b7;
 
   /* Typography */
   --tracking-*: initial;
@@ -108,15 +109,19 @@
   --text-h5--letter-spacing: -0.02em;
   --text-h5--font-weight: var(--font-weight-medium);
 
-  --text-md: 1.25rem;
-  --text-md--line-height: calc(28 / 20);
+  --text-lg: 1.25rem; /* 20px */
+  --text-lg--line-height: calc(28 / 20);
+  --text-lg--letter-spacing: -0.02em;
+  --text-lg--font-weight: var(--font-weight-normal);
+  --text-md: 1.125rem; /* 18px */
+  --text-md--line-height: calc(26 / 18);
   --text-md--letter-spacing: -0.02em;
   --text-md--font-weight: var(--font-weight-normal);
-  --text-base: 1rem;
+  --text-base: 1rem; /* 16px */
   --text-base--line-height: calc(24 / 16);
   --text-base--letter-spacing: -0.02em;
   --text-base--font-weight: var(--font-weight-normal);
-  --text-sm: 0.875rem;
+  --text-sm: 0.875rem; /* 14px */
   --text-sm--line-height: calc(20 / 14);
   --text-sm--letter-spacing: -0.02em;
   --text-sm--font-weight: var(--font-weight-normal);