From 30ab12b0f5ad24e92387bf2cabed7fb50de5e81d Mon Sep 17 00:00:00 2001 From: Darius Cepulis Date: Thu, 30 Oct 2025 08:19:26 -0500 Subject: [PATCH] feat(site): add aside component --- site/src/components/Aside.astro | 67 +++++++++++++++++++ site/src/components/NavBar/MobileNav.tsx | 6 +- site/src/components/blog/BlogPostCard.astro | 4 +- site/src/components/typography/H4.astro | 2 +- site/src/components/typography/H5.astro | 2 +- site/src/components/typography/H6.astro | 2 +- site/src/content/docs/how-to/installation.mdx | 5 ++ site/src/content/docs/how-to/write-guides.mdx | 30 +++++++++ site/src/layouts/Markdown.astro | 2 +- site/src/pages/blog/[...page].astro | 2 +- site/src/pages/blog/[...slug].astro | 4 +- site/src/pages/blog/authors/[author].astro | 2 +- site/src/pages/index.astro | 10 +-- site/src/styles/globals.css | 13 ++-- 14 files changed, 129 insertions(+), 22 deletions(-) create mode 100644 site/src/components/Aside.astro diff --git a/site/src/components/Aside.astro b/site/src/components/Aside.astro new file mode 100644 index 00000000..76a41cf1 --- /dev/null +++ b/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 = { + note: Info, + tip: Lightbulb, + caution: TriangleAlert, + danger: OctagonX, +}; + +const defaultTitles: Record = { + note: 'Note', + tip: 'Tip', + caution: 'Caution', + danger: 'Danger', +}; + +const Icon = icons[type]; +const renderTitle = title ?? defaultTitles[type]; +--- + + diff --git a/site/src/components/NavBar/MobileNav.tsx b/site/src/components/NavBar/MobileNav.tsx index 2bc04366..08b9c022 100644 --- a/site/src/components/NavBar/MobileNav.tsx +++ b/site/src/components/NavBar/MobileNav.tsx @@ -56,7 +56,7 @@ export default function MobileNav({ navLinks, currentPath, dark = false, childre {link.label} @@ -66,7 +66,7 @@ export default function MobileNav({ navLinks, currentPath, dark = false, childre ))} GitHub {' '} @@ -74,7 +74,7 @@ export default function MobileNav({ navLinks, currentPath, dark = false, childre Discord {' '} diff --git a/site/src/components/blog/BlogPostCard.astro b/site/src/components/blog/BlogPostCard.astro index e5b1295c..aaa070f7 100644 --- a/site/src/components/blog/BlogPostCard.astro +++ b/site/src/components/blog/BlogPostCard.astro @@ -18,8 +18,8 @@ const { post, authors, asLink } = Astro.props;
-

{post.data.title}

-

{post.data.description}

+

{post.data.title}

+

{post.data.description}

{ authors.length > 0 && ( diff --git a/site/src/components/typography/H4.astro b/site/src/components/typography/H4.astro index 7c40fab5..3bee78e2 100644 --- a/site/src/components/typography/H4.astro +++ b/site/src/components/typography/H4.astro @@ -13,7 +13,7 @@ const { as: Tag = 'h4', maxWidth = true, class: className, ...props } = Astro.pr diff --git a/site/src/components/typography/H6.astro b/site/src/components/typography/H6.astro index 322474e5..9cfc4b92 100644 --- a/site/src/components/typography/H6.astro +++ b/site/src/components/typography/H6.astro @@ -12,7 +12,7 @@ const { as: Tag = 'h6', maxWidth = true, class: className, ...props } = Astro.pr --- diff --git a/site/src/content/docs/how-to/installation.mdx b/site/src/content/docs/how-to/installation.mdx index 9838c7d0..472b26bc 100644 --- a/site/src/content/docs/how-to/installation.mdx +++ b/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'; + + Welcome to Video.js v10! This guide will help you get up and running. In it, you'll make three key choices: diff --git a/site/src/content/docs/how-to/write-guides.mdx b/site/src/content/docs/how-to/write-guides.mdx index d71cb631..72cd08b8 100644 --- a/site/src/content/docs/how-to/write-guides.mdx +++ b/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 CTRL + ALT + Delete to end the session. Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures. +## Asides / Callouts / Admonitions + +Use the `