chore(site): upgrade to Astro 7 and consolidate on Vite 8 (#1721)

Co-authored-by: Claude <noreply@anthropic.com>

site/src/components/FooterDocs.astro

@@ -93,7 +93,9 @@ const { class: className } = Astro.props;
         href="/"
         class="underline intent:decoration-gold">video player.</a
       >
-      <br class="@5xl:hidden" />Video hosting and streaming <a
+      <span class="hidden @5xl:inline">{" "}</span>
+      <br class="@5xl:hidden" />
+      Video hosting and streaming <a
         href={MUX_URL}
         class="underline intent:decoration-gold"
         >sponsored by Mux.

site/src/components/home/GetStartedBanner.astro

@@ -22,7 +22,9 @@ import GetStartedLink from '../NavBar/GetStartedLink';
         "relative z-10 my-2.5 px-2.5 font-display text-h15 uppercase lg:m-0 lg:pr-14 lg:pl-9 xl:text-h1",
       )}
     >
-      Get<br class="md:hidden" />
+      Get
+      <br class="md:hidden" />
+      <span class="hidden md:inline">{" "}</span>
       <span
         class="text-stroke-manila-light duration-200 group-has-[a:hover]:text-stroke-faded-black lg:duration-300 dark:text-stroke-faded-black dark:group-has-[a:hover]:text-stroke-manila-light"
         style={{ transitionProperty: "-webkit-text-stroke" }}>Started</span

site/src/components/typography/Em.astro

@@ -11,6 +11,4 @@ type Props<Tag extends HTMLTag = 'em'> = Polymorphic<{ as: Tag }> & {
 const { as: Tag = 'em', class: className, ...props } = Astro.props;
 ---
 
-<Tag class={twMerge(shared.em, className)} {...props}>
-  <slot />
-</Tag>
+<Tag class={twMerge(shared.em, className)} {...props}><slot /></Tag>

site/src/components/typography/MarkdownCode.astro

@@ -18,12 +18,10 @@ const isCodeBlock = codeBlock === 'true';
 
 {
   isCodeBlock ? (
-    <Tag class={twMerge(shared.codeBlock, className)} {...props}>
-      <slot />
-    </Tag>
+    // prettier-ignore
+    <Tag class={twMerge(shared.codeBlock, className)} {...props}><slot /></Tag>
   ) : (
-    <Tag class={twMerge(shared.code, className)} {...props}>
-      <slot />
-    </Tag>
+    // prettier-ignore
+    <Tag class={twMerge(shared.code, className)} {...props}><slot /></Tag>
   )
 }

site/src/components/typography/Pre.astro

@@ -20,9 +20,8 @@ const value = 'code';
 
 {
   hasFrame ? (
-    <Tag class={className} {...props}>
-      <slot />
-    </Tag>
+    // prettier-ignore
+    <Tag class={className} {...props}><slot /></Tag>
   ) : (
     <TabsRoot client:idle>
       <TabsList client:idle label={`${label} code`}>
@@ -31,9 +30,8 @@ const value = 'code';
         </Tab>
       </TabsList>
       <TabsPanel client:idle value={value} initial>
-        <Tag class={className} {...props}>
-          <slot />
-        </Tag>
+        {/* prettier-ignore */}
+        <Tag class={className} {...props}><slot /></Tag>
       </TabsPanel>
     </TabsRoot>
   )

site/src/components/typography/Strong.astro

@@ -11,6 +11,4 @@ type Props<Tag extends HTMLTag = 'strong'> = Polymorphic<{ as: Tag }> & {
 const { as: Tag = 'strong', class: className, ...props } = Astro.props;
 ---
 
-<Tag class={twMerge(shared.strong, className)} {...props}>
-  <slot />
-</Tag>
+<Tag class={twMerge(shared.strong, className)} {...props}><slot /></Tag>