feat(website): social links in footer

website/src/components/Footer.astro

@@ -1,13 +1,19 @@
 ---
-import { GITHUB_REPO_URL } from '@/consts';
+import { DISCORD_INVITE_URL, GITHUB_REPO_URL } from '@/consts';
 import { ArrowUpRight } from 'lucide-react';
+import GitHub from './icons/GitHub';
+import Discord from './icons/Discord';
 
-const navLinks = [
+type NavLink = {
+  href: string;
+  label: string;
+  external?: boolean;
+};
+const navLinks: NavLink[] = [
   { href: '/', label: 'Home' },
   { href: '/docs', label: 'Docs' },
   { href: '/blog', label: 'Blog' },
   { href: '/privacy', label: 'Privacy' },
-  { href: GITHUB_REPO_URL, label: 'GitHub', external: true },
 ];
 
 type Props = {
@@ -17,14 +23,36 @@ const { class: className } = Astro.props;
 ---
 
 <footer class:list={['border-t border-light-40 py-6 px-3 grid gap-3', className]}>
-  <nav class="text-center sm:text-left">
-    {
-      navLinks.map((link) => (
-        <a href={link.href} class="intent:underline px-3 py-2 inline-flex gap-1 items-center">
-          {link.label} {link.external ? <ArrowUpRight size="1em" /> : null}
-        </a>
-      ))
-    }
+  <nav class="flex flex-col sm:flex-row">
+    <div class="flex justify-center sm:justify-start">
+      {
+        navLinks.map((link) => (
+          <a href={link.href} class="intent:underline px-3 py-2 inline-flex gap-1 items-center">
+            {link.label} {link.external ? <ArrowUpRight size="1em" /> : null}
+          </a>
+        ))
+      }
+    </div>
+    <div class="flex justify-center sm:justify-start">
+      <a
+        href={GITHUB_REPO_URL}
+        class="group px-3 py-2 inline-flex items-center"
+        aria-label="GitHub"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <GitHub size="1em" className="text-dark-80 intent:text-dark-100" />
+      </a>
+      <a
+        href={DISCORD_INVITE_URL}
+        class="group px-3 py-2 inline-flex items-center"
+        aria-label="Discord"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <Discord size="1em" className="text-dark-80 intent:text-dark-100" />
+      </a>
+    </div>
   </nav>
 
   <p class="text-sm text-center sm:text-left text-dark-40 px-3">
@@ -34,7 +62,9 @@ const { class: className } = Astro.props;
     <br />
     Sponsored by <a
       href="https://www.mux.com?utm_source=videojs&utm_campaign=vjs10"
-      class="underline intent:decoration-wavy">Mux</a
+      class="underline intent:decoration-wavy"
     >
+      Mux
+    </a>
   </p>
 </footer>

website/src/components/NavBar/MobileNav.tsx

@@ -22,7 +22,7 @@ export default function MobileNav({ navLinks, currentPath, dark = false, childre
     <Dialog.Root modal>
       {/* Trigger button - hamburger menu */}
       <Dialog.Trigger
-        className={clsx('lg:hidden flex items-center justify-center p-3 h-full aspect-square', dark ? 'bg-light-80 text-dark-100 intent:bg-light-40' : 'bg-dark-100 text-light-80 intent:bg-dark-80')}
+        className={clsx('sm:hidden flex items-center justify-center p-3 h-full aspect-square', dark ? 'bg-light-80 text-dark-100 intent:bg-light-40' : 'bg-dark-100 text-light-80 intent:bg-dark-80')}
         aria-label="Open navigation menu"
       >
         <Menu size={24} />

website/src/components/NavBar/NavBar.astro

@@ -37,7 +37,7 @@ const { class: className, dark = false } = Astro.props;
   <a href="/" class="flex items-center px-3 text-h5">Video.js</a>
 
   <!-- Desktop nav links -->
-  <div class="hidden lg:flex -mb-px pr-3">
+  <div class="hidden sm:flex -mb-px pr-3">
     {
       navLinks.map((link) => (
         <a

website/src/layouts/Base.astro

@@ -76,7 +76,7 @@ const fullTitle = Array.isArray(title)
       'bg-light-80 text-dark-100',
       'font-sans antialiased text-pretty text-base',
       'min-w-80',
-      '[--nav-h:calc(var(--spacing)*13)] lg:[--nav-h:calc(var(--spacing)*14)]',
+      '[--nav-h:calc(var(--spacing)*13)] sm:[--nav-h:calc(var(--spacing)*14)]',
       'selection:bg-yellow selection:text-dark-100',
     ]}
   >