tiger d5 follow (supabase#30975)

* hackathon link

* fix wide blog imgs mobile

* mobile sticky nav

* escape # in toc

Author: fsansalvadore

apps/www/components/LaunchWeek/13/Releases/LWStickyNav.tsx

@@ -1,14 +1,23 @@
-import React, { FC, useEffect, useRef } from 'react'
+import React, { FC, useEffect, useRef, useState } from 'react'
 import Link from 'next/link'
 import { WeekDayProps, mainDays } from './data'
-import { cn } from 'ui'
+import {
+  Button,
+  cn,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from 'ui'
 import { isBrowser } from 'common'
 
 import SectionContainer from '~/components/Layouts/SectionContainer'
-import { ArrowUpRight } from 'lucide-react'
+import { ArrowUpRight, ChevronDown } from 'lucide-react'
+import { startCase } from 'lodash'
 
 const LWXStickyNav: FC = () => {
   const days = mainDays()
+  const [activeNavItem, setActiveNavItem] = useState('Mon')
 
   const OFFSET = 66
   const anchors = useRef<NodeListOf<HTMLHeadingElement> | null>(null)
@@ -22,6 +31,14 @@ const LWXStickyNav: FC = () => {
 
       if (offsetFromTop - OFFSET < 0) {
         newActiveAnchor = anchor.id
+
+        // Set the active nav item based on the anchor ID
+        const matchingDay = days.find((day) => day.id === newActiveAnchor)
+        if (matchingDay) {
+          setActiveNavItem(matchingDay.dd)
+        } else if (newActiveAnchor === 'build-stage') {
+          setActiveNavItem('Build Stage')
+        }
       }
     })
 
@@ -56,13 +73,50 @@ const LWXStickyNav: FC = () => {
       <nav className="sticky z-30 top-0 bg-default/30 dark:bg-default/90 backdrop-blur-md w-full border-b dark:border-muted h-[60px] flex items-center">
         <SectionContainer className="!max-w-none !py-0 lg:!container flex items-center justify-between font-mono gap-4 md:gap-8 text-sm">
           <div className="w-full flex items-center gap-4 md:gap-8">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  type="outline"
+                  iconRight={<ChevronDown />}
+                  className="md:hidden w-[200px] min-w-[150px] flex justify-between items-center py-2 pointer-events-auto"
+                >
+                  <span className="flex gap-1 items-center">
+                    {activeNavItem}
+                    {activeNavItem === 'Fri' && (
+                      <span
+                        title="Live"
+                        className="w-1 h-1 ml-1 animate-pulse rounded-full bg-brand mb-2 block"
+                      />
+                    )}
+                  </span>
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent side="bottom" align="start" className="pointer-events-auto">
+                {days.map((day) => (
+                  <DropdownMenuItem key={day.id} asChild>
+                    <Link href={`#${day.id}`} className="flex items-center gap-2">
+                      {day.dd}
+                      {day.isToday && (
+                        <span
+                          title="Live"
+                          className="w-1 h-1 animate-pulse rounded-full bg-brand block"
+                        />
+                      )}
+                    </Link>
+                  </DropdownMenuItem>
+                ))}
+                <DropdownMenuItem asChild>
+                  <Link href="#build-stage">Build Stage</Link>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
             <ul className="w-full lw-sticky-nav flex items-center gap-2 md:gap-4 text-foreground-lighter">
               {days.map((day: WeekDayProps) => (
                 <li key={day.id}>
                   <Link
                     href={`#${day.id}`}
                     className={cn(
-                      'p-1 transition-colors text-foreground-muted hover:text-foreground flex items-center pointer-events-auto',
+                      'hidden p-1 transition-colors text-foreground-muted hover:text-foreground md:flex items-center pointer-events-auto',
                       (day.isToday || day.shipped) && 'text-foreground-light'
                     )}
                   >
@@ -79,12 +133,24 @@ const LWXStickyNav: FC = () => {
               <li>
                 <Link
                   href="#build-stage"
-                  className="p-1 transition-colors hover:text-foreground pointer-events-auto lw-sticky-nav"
+                  className="hidden md:block p-1 transition-colors hover:text-foreground pointer-events-auto lw-sticky-nav"
                 >
                   Build <span className="hidden sm:inline">Stage</span>
                 </Link>
               </li>
               <div className="flex items-center justify-end gap-2 md:gap-4 flex-1">
+                <li>
+                  <Link
+                    href="/events/launch-week-13-hackathon"
+                    target="_blank"
+                    className="p-1 transition-colors hover:text-foreground pointer-events-auto flex gap-1"
+                  >
+                    Hackathon{' '}
+                    <span>
+                      <ArrowUpRight className="w-4 h-5 text-foreground-muted" />
+                    </span>
+                  </Link>
+                </li>
                 <li>
                   <Link
                     href="/events?category=meetup"

apps/www/pages/blog/[slug].tsx

@@ -107,6 +107,9 @@ export const getStaticProps: GetStaticProps<BlogPostPageProps, Params> = async (
   const nextPost = allPosts[currentIndex + 1]
   const prevPost = allPosts[currentIndex - 1]
 
+  const tocResult = toc(content, { maxdepth: data.toc_depth ? data.toc_depth : 2 })
+  const processedContent = tocResult.content.replace(/%23/g, '')
+
   return {
     props: {
       prevPost: currentIndex === 0 ? null : prevPost ? prevPost : null,
@@ -117,7 +120,10 @@ export const getStaticProps: GetStaticProps<BlogPostPageProps, Params> = async (
         source: content,
         ...data,
         content: mdxSource,
-        toc: toc(content, { maxdepth: data.toc_depth ? data.toc_depth : 2 }),
+        toc: {
+          ...tocResult,
+          content: processedContent,
+        },
       },
     },
   }

apps/www/styles/index.css

@@ -269,7 +269,7 @@ table {
 }
 .next-image--dynamic-fill.wide,
 video.wide {
-  @apply my-0 max-w-none -mx-8 w-[calc(100%_+_4rem)];
+  @apply sm:my-0 sm:max-w-none sm:-mx-8 sm:w-[calc(100%_+_4rem)];
 }
 @media (min-width: 560px) {
   .next-image--dynamic-fill.wide,

packages/ui-patterns/ExpandableVideo/index.tsx

@@ -108,7 +108,7 @@ export function ExpandableVideo({
             >
               <p className="text-xs">Close</p>
             </button>
-            <div className="video-container !rounded overflow-hidden">
+            <div className="video-container !rounded-lg !border-none !overflow-hidden">
               <iframe
                 src={`https://www.youtube-nocookie.com/embed/${videoId}`}
                 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"