feat(site): add changelog section (#1793)

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

site/src/components/Footer.astro

@@ -14,6 +14,7 @@ type NavLink = {
 };
 const navLinks: NavLink[] = [
   { href: '/blog', label: 'Blog' },
+  { href: '/changelog', label: 'Changelog' },
   { href: '/privacy', label: 'Privacy' },
   { href: 'https://legacy.videojs.org', label: 'V8', external: true },
 ];
@@ -58,13 +59,35 @@ const { class: className } = Astro.props;
             </a>
           ))
         }
+        {/* Wide viewports: icons wrap in the same flow as the text links */}
+        <span class="hidden md:flex">
+          <a
+            href={DISCORD_INVITE_URL}
+            class="flex items-center rounded-xs px-2 py-2 font-display font-bold uppercase md:px-5 intent:bg-manila-dark dark:intent:bg-warm-gray"
+            aria-label="Discord"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Discord width="1.5em" height="1.5em" />
+          </a>
+          <a
+            href={GITHUB_REPO_URL}
+            class="flex items-center rounded-xs px-2 py-2 font-display font-bold uppercase md:px-5 intent:bg-manila-dark dark:intent:bg-warm-gray"
+            aria-label="GitHub"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <GitHub width="1.5em" height="1.5em" />
+          </a>
+        </span>
       </div>
       <div
         class="flex flex-1 justify-start gap-4 pt-5 pb-8 md:justify-center md:gap-0 md:py-0 md:pb-0"
       >
+        {/* Narrow viewports: icons keep their own row below the link block */}
         <a
           href={DISCORD_INVITE_URL}
-          class="flex items-center rounded-xs px-2 py-2 font-display font-bold uppercase md:px-5 intent:bg-manila-dark dark:intent:bg-warm-gray"
+          class="flex items-center rounded-xs px-2 py-2 font-display font-bold uppercase md:hidden intent:bg-manila-dark dark:intent:bg-warm-gray"
           aria-label="Discord"
           target="_blank"
           rel="noopener noreferrer"
@@ -73,7 +96,7 @@ const { class: className } = Astro.props;
         </a>
         <a
           href={GITHUB_REPO_URL}
-          class="flex items-center rounded-xs px-2 py-2 font-display font-bold uppercase md:px-5 intent:bg-manila-dark dark:intent:bg-warm-gray"
+          class="flex items-center rounded-xs px-2 py-2 font-display font-bold uppercase md:hidden intent:bg-manila-dark dark:intent:bg-warm-gray"
           aria-label="GitHub"
           target="_blank"
           rel="noopener noreferrer"

site/src/components/FooterDocs.astro

@@ -14,6 +14,7 @@ type NavLink = {
 };
 const navLinks: NavLink[] = [
   { href: '/blog', label: 'Blog' },
+  { href: '/changelog', label: 'Changelog' },
   { href: '/privacy', label: 'Privacy' },
   { href: 'https://legacy.videojs.org', label: 'V8', external: true },
 ];
@@ -58,13 +59,35 @@ const { class: className } = Astro.props;
             </a>
           ))
         }
+        {/* Wide containers: icons wrap in the same flow as the text links */}
+        <span class="hidden @4xl:flex">
+          <a
+            href={DISCORD_INVITE_URL}
+            class="flex items-center rounded-xs px-2 py-2 font-display font-bold uppercase @4xl:px-5 intent:bg-manila-dark dark:intent:bg-warm-gray"
+            aria-label="Discord"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Discord width="1.5em" height="1.5em" />
+          </a>
+          <a
+            href={GITHUB_REPO_URL}
+            class="flex items-center rounded-xs px-2 py-2 font-display font-bold uppercase @4xl:px-5 intent:bg-manila-dark dark:intent:bg-warm-gray"
+            aria-label="GitHub"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <GitHub width="1.5em" height="1.5em" />
+          </a>
+        </span>
       </div>
       <div
         class="flex flex-1 justify-start gap-4 pt-5 pb-8 @4xl:justify-center @4xl:gap-0 @4xl:py-0 @4xl:pb-0"
       >
+        {/* Narrow containers: icons keep their own row below the link block */}
         <a
           href={DISCORD_INVITE_URL}
-          class="flex items-center rounded-xs px-2 py-2 font-display font-bold uppercase @4xl:px-5 intent:bg-manila-dark dark:intent:bg-warm-gray"
+          class="flex items-center rounded-xs px-2 py-2 font-display font-bold uppercase @4xl:hidden intent:bg-manila-dark dark:intent:bg-warm-gray"
           aria-label="Discord"
           target="_blank"
           rel="noopener noreferrer"
@@ -73,7 +96,7 @@ const { class: className } = Astro.props;
         </a>
         <a
           href={GITHUB_REPO_URL}
-          class="flex items-center rounded-xs px-2 py-2 font-display font-bold uppercase @4xl:px-5 intent:bg-manila-dark dark:intent:bg-warm-gray"
+          class="flex items-center rounded-xs px-2 py-2 font-display font-bold uppercase @4xl:hidden intent:bg-manila-dark dark:intent:bg-warm-gray"
           aria-label="GitHub"
           target="_blank"
           rel="noopener noreferrer"

site/src/components/blog/BlogPagination.astro

@@ -5,13 +5,14 @@ import { ChevronDown } from 'lucide-react';
 
 interface Props {
   page: Page;
+  label?: string;
 }
 
-const { page } = Astro.props;
+const { page, label = 'Blog pagination' } = Astro.props;
 ---
 
 <nav
-  aria-label="Blog pagination"
+  aria-label={label}
   class="mx-auto mt-10 flex w-full max-w-3xl items-center justify-end gap-4"
 >
   <span>

site/src/components/changelog/ChangelogEntryCard.astro

@@ -0,0 +1,27 @@
+---
+import type { CollectionEntry } from 'astro:content';
+import FormattedDate from '@/components/FormattedDate.astro';
+
+interface Props {
+  entry: CollectionEntry<'changelog'>;
+}
+
+const { entry } = Astro.props;
+---
+
+<article>
+  <a href={`/changelog/${entry.id}`} class="group grid max-w-3xl">
+    <FormattedDate
+      date={entry.data.date}
+      class="mb-1 font-display text-h4 font-bold text-orange"
+    />
+    <div class="mb-3">
+      <h2
+        class="mb-3 font-display text-h25 leading-tight uppercase underline group-intent:decoration-gold"
+      >
+        v{entry.data.version}
+      </h2>
+      {entry.data.description && <p>{entry.data.description}</p>}
+    </div>
+  </a>
+</article>

site/src/components/docs/SidebarItem.astro

@@ -1,11 +1,12 @@
 ---
 import GithubSlugger from 'github-slugger';
+import { ArrowUpRight } from 'lucide-react';
 import DropdownIcon from '@/assets/icons/dropdown-arrow.svg?react';
-import type { Guide, Section, SupportedFramework } from '@/types/docs';
-import { isSection } from '@/types/docs';
+import type { SidebarItem as SidebarItemType, SupportedFramework } from '@/types/docs';
+import { isLink, isSection } from '@/types/docs';
 
 type Props = {
-  item: Guide | Section;
+  item: SidebarItemType;
   framework: SupportedFramework;
   docTitles: Map<string, string>;
   depth?: number;
@@ -16,9 +17,11 @@ const currentPath = Astro.url.pathname;
 const slugger = new GithubSlugger();
 
 // Helper to check if this item or any of its children contains the active path
-function containsActivePath(item: Guide | Section): boolean {
+function containsActivePath(item: SidebarItemType): boolean {
   if (isSection(item)) {
     return item.contents.some((child) => containsActivePath(child));
+  } else if (isLink(item)) {
+    return false;
   } else {
     const itemPath = `/docs/framework/${framework}/${item.slug}`;
     return itemPath === currentPath;
@@ -86,6 +89,21 @@ function getGroupRotate(depth: number) {
         ))}
       </div>
     </details>
+  ) : isLink(item) ? (
+    <a
+      class:list={[
+        "flex items-center gap-1.5 py-2 text-p3 text-faded-black dark:text-manila-light",
+        "cursor-pointer",
+        depth === 0 && "font-bold",
+        depth > 0 && "border-l border-manila-75 pl-4 dark:border-warm-gray",
+      ]}
+      style={`margin-left: calc(var(--spacing) * ${(depth - 1) * 4})`}
+      href={item.href}
+    >
+      {item.devOnly ? "[Dev only] " : ""}
+      {item.sidebarLabel}
+      <ArrowUpRight size="1em" aria-hidden="true" />
+    </a>
   ) : (
     <a
       aria-current={isActive ? "page" : undefined}