lw8: add LWAnnouncement to docs

apps/docs/next.config.mjs

@@ -57,6 +57,7 @@ const nextConfig = {
       'weweb-changelog.ghost.io',
       'img.youtube.com',
       'archbee-image-uploads.s3.amazonaws.com',
+      'obuldanrptloktxcffvn.supabase.co',
     ],
   },
   experimental: {

apps/docs/pages/index.mdx

@@ -9,6 +9,8 @@ import {
   IconPlay,
   TextLink,
 } from 'ui'
+import { LWAnnouncement } from 'ui'
+
 import HomeMenuIconPicker from '~/components/Navigation/NavigationMenu/HomeMenuIconPicker'
 
 export const meta = {
@@ -20,6 +22,9 @@ export const meta = {
 
 <div className="flex flex-col">
 
+  <div className="mt-8 sm:mt-0 md:mt-4 xl:mt-16">
+    <LWAnnouncement />
+  </div>
   <div>
     <div className="max-w-xl">
       ## Products

apps/www/components/Hero/Hero.tsx

@@ -3,29 +3,20 @@ import { useRouter } from 'next/router'
 import Telemetry, { TelemetryEvent } from '~/lib/telemetry'
 import { useTelemetryProps } from 'common/hooks/useTelemetryProps'
 import gaEvents from '~/lib/gaEvents'
-import { Button, IconArrowRight, IconBookOpen } from 'ui'
+import { Button, IconBookOpen } from 'ui'
 import SectionContainer from '~/components/Layouts/SectionContainer'
 import HeroFrameworks from './HeroFrameworks'
 import styles from './hero.module.css'
 import Image from 'next/image'
-import { useEffect, useState } from 'react'
-import DayHighlightWidget from '../LaunchWeek/8/Releases/DayHighlightWidget'
+import LWAnnouncement from '../LaunchWeek/8/Releases/LWAnnouncement'
 
 const Hero = () => {
   const router = useRouter()
-  const [showAnnouncement, setShowAnnouncement] = useState(true)
   const telemetryProps = useTelemetryProps()
   const sendTelemetryEvent = async (event: TelemetryEvent) => {
     await Telemetry.sendEvent(event, telemetryProps, router)
   }
 
-  // useEffect(() => {
-  //   if (typeof window !== undefined) {
-  //     const lw8AnnouncementKey = window.localStorage.getItem('announcement_SupabaseLaunchWeek8')
-  //     setShowAnnouncement(!!lw8AnnouncementKey)
-  //   }
-  // }, [showAnnouncement])
-
   return (
     <div className="relative -mt-[65px]">
       <SectionContainer className="py-12 md:py-16 lg:py-20 overflow-hidden">
@@ -39,23 +30,9 @@ const Hero = () => {
                 ].join(' ')}
               >
                 <div className="flex flex-col items-center">
-                  {showAnnouncement && (
-                    // <Link href="/launch-week">
-                    //   <a className="group w-auto rounded-full p-1 mb-6 mt-8 md:mb-10 bg-gradient-to-b from-[#1b1f2124] to-[#02040550] hover:from-[#ffffff15] hover:to-[#ffffff05] transition-all backdrop-blur-lg border flex items-center justify-between gap-2 md:gap-4 text-scale-1100 hover:text-scale-1200 text-sm">
-                    //     <div className="text-scale-200 rounded-full bg-brand px-3 py-1 flex items-center justify-center">
-                    //       Get your ticket
-                    //     </div>
-                    //     <span>Launch Week 8 - August 7-11</span>
-                    //     <IconArrowRight
-                    //       size={16}
-                    //       className="transform mr-2 transition-transform translate-x-0 sm:-translate-x-1 group-hover:translate-x-0"
-                    //     />
-                    //   </a>
-                    // </Link>
-                    <div className="z-40 w-full flex justify-center mb-8 lg:mb-12">
-                      <DayHighlightWidget title="Launch Week 8: Day 1" />
-                    </div>
-                  )}
+                  <div className="z-40 w-full flex justify-center mb-8 lg:mb-12">
+                    <LWAnnouncement />
+                  </div>
                   <h1 className="text-scale-1200 text-4xl sm:text-5xl sm:leading-none lg:text-7xl">
                     <span className="block text-[#F4FFFA00] bg-clip-text bg-gradient-to-b from-scale-1200 to-scale-1200 dark:to-scale-1100">
                       Build in a weekend

apps/www/components/LaunchWeek/8/Releases/LWAnnouncement.tsx

@@ -4,7 +4,7 @@ import Link from 'next/link'
 import Image from 'next/image'
 import days from './lw8_data'
 
-const DayHighlightWidget = ({ title }: { title?: string }) => {
+const LWAnnouncement = ({ title }: { title?: string }) => {
   const [_pre, d1, _d2, _d3, _d4, _d5] = days
 
   return (
@@ -34,9 +34,9 @@ const DayHighlightWidget = ({ title }: { title?: string }) => {
                       />
                     </svg>
                   </div>
-                  <span className="text-white">{title ?? 'Launch Week 8: Day 1'}</span>
+                  <span className="text-foreground">{title ?? 'Launch Week 8: Day 1'}</span>
                 </div>
-                <span className="">{d1.steps[0].title}</span>
+                <span className="text-foreground-light">{d1.steps[0].title}</span>
               </div>
             </div>
             <div className="relative flex !aspect-video h-[80px] md:h-[80px] gap-2 z-10 rounded overflow-hidden">
@@ -54,4 +54,4 @@ const DayHighlightWidget = ({ title }: { title?: string }) => {
   )
 }
 
-export default DayHighlightWidget
+export default LWAnnouncement

apps/www/components/LaunchWeek/8/Releases/components/index.tsx

@@ -1,4 +1,4 @@
-import { Badge, ExpandableVideo, IconPlay } from 'ui'
+import { ExpandableVideo } from 'ui'
 
 import Link from 'next/link'
 import CountdownComponent from '../../Countdown'

apps/www/pages/launch-week/index.tsx

@@ -14,7 +14,7 @@ import SectionContainer from '~/components/Layouts/SectionContainer'
 import { LaunchWeekLogoHeader } from '~/components/LaunchWeek/8/LaunchWeekLogoHeader'
 import { Meetup } from '~/components/LaunchWeek/8/LW8Meetups'
 import LW8CalloutsSection from '~/components/LaunchWeek/8/LW8CalloutsSection'
-import DayHighlightWidget from '~/components/LaunchWeek/8/Releases/DayHighlightWidget'
+import DayHighlightWidget from '~/components/LaunchWeek/8/Releases/LWAnnouncement'
 
 import { useTheme } from 'common/Providers'
 

packages/ui/src/layout/banners/Announcement.tsx

@@ -28,10 +28,11 @@ const Announcement = ({
   const [hidden, setHidden] = useState(true)
 
   const router = useRouter()
+  const isHomePage = router.pathname === '/'
   const isLaunchWeekSection = router.pathname.includes('launch-week')
 
   // override to hide announcement
-  if (!show || !announcement.show) return null
+  if (!show || !announcement.show || isHomePage) return null
 
   // construct the key for the announcement, based on the title text
   const announcementKey = 'announcement_' + announcement.text.replace(/ /g, '')

packages/ui/src/layout/banners/LW8CountdownBanner/VideoPreview.tsx

@@ -11,10 +11,11 @@ const VideoPreview = () => (
       </svg>
     </div>
     <Image
-      src="/images/launchweek/8/lw8-yt-thumb.jpg"
+      src="https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/lw8/assets/lw8-yt-thumb.jpg?t=2023-08-04T16%3A04%3A08.632Z"
       alt="Video thumbnail"
       layout="fill"
       objectFit="cover"
+      // className="absolute inset-0 object-cover"
     />
   </div>
 )

packages/ui/src/layout/banners/LWAnnouncement.tsx

@@ -0,0 +1,87 @@
+import Link from 'next/link'
+import Image from 'next/image'
+import { LW_SITE_URL } from './data/constants'
+
+const SmallCard = ({
+  className,
+  innerClassName,
+  children,
+}: {
+  className?: string
+  innerClassName?: string
+  children: any
+}) => (
+  <div
+    className={[
+      'group relative p-[1px] bg-gradient-to-b from-scale-100/90 to-scale-100/60 rounded-xl overflow-hidden shadow-lg',
+      className,
+    ].join(' ')}
+  >
+    <div
+      className={[
+        'bg-scale-100 text-sm text-foreground-light p-2 flex flex-row justify-between items-center backdrop-blur-md h-full',
+        innerClassName,
+      ].join(' ')}
+    >
+      {children}
+    </div>
+  </div>
+)
+
+const LWAnnouncement = ({
+  title,
+  className,
+  innerClassName,
+}: {
+  title?: string
+  className?: string
+  innerClassName?: string
+}) => {
+  return (
+    <div className="w-full opacity-0 !animate-[fadeIn_0.5s_cubic-bezier(0.25,0.25,0,1)_0.5s_both]">
+      <SmallCard
+        className="border hover:border-scale-800 transition-colors"
+        innerClassName={['!bg-opacity-70', innerClassName].join(' ')}
+      >
+        <Link href={`${LW_SITE_URL}#today`}>
+          <a className="flex flex-row justify-between items-center w-full h-full gap-2 text-left no-underline">
+            <div className="relative flex-shrink flex items-center p-2 w-2/3 md:w-auto">
+              <div className="flex flex-col gap-1 sm:pl-2">
+                <div className="flex items-center gap-2">
+                  <div className={['flex min-w-[20px] opacity-50', 'opacity-pulse'].join(' ')}>
+                    <svg
+                      width="21"
+                      height="21"
+                      viewBox="0 0 21 21"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        d="M5.55025 3.97258C5.94078 4.36311 5.94078 4.99627 5.55025 5.38679C2.81658 8.12046 2.81658 12.5526 5.55025 15.2863C5.94078 15.6768 5.94078 16.31 5.55025 16.7005C5.15973 17.091 4.52656 17.091 4.13604 16.7005C0.62132 13.1858 0.62132 7.4873 4.13604 3.97258C4.52656 3.58206 5.15973 3.58206 5.55025 3.97258ZM15.4498 3.97281C15.8403 3.58229 16.4735 3.58229 16.864 3.97281C20.3787 7.48753 20.3787 13.186 16.864 16.7007C16.4735 17.0913 15.8403 17.0913 15.4498 16.7007C15.0592 16.3102 15.0592 15.677 15.4498 15.2865C18.1834 12.5529 18.1834 8.1207 15.4498 5.38703C15.0592 4.9965 15.0592 4.36334 15.4498 3.97281ZM8.37869 6.80101C8.76921 7.19153 8.76921 7.8247 8.37869 8.21522C7.20711 9.38679 7.20711 11.2863 8.37869 12.4579C8.76921 12.8484 8.76921 13.4816 8.37868 13.8721C7.98816 14.2626 7.355 14.2626 6.96447 13.8721C5.01185 11.9195 5.01185 8.75363 6.96447 6.80101C7.355 6.41048 7.98816 6.41048 8.37869 6.80101ZM12.6213 6.80124C13.0119 6.41072 13.645 6.41072 14.0355 6.80124C15.9882 8.75386 15.9882 11.9197 14.0355 13.8723C13.645 14.2628 13.0119 14.2628 12.6213 13.8723C12.2308 13.4818 12.2308 12.8486 12.6213 12.4581C13.7929 11.2865 13.7929 9.38703 12.6213 8.21545C12.2308 7.82493 12.2308 7.19176 12.6213 6.80124ZM10.5 9.33677C11.0523 9.33677 11.5 9.78449 11.5 10.3368V10.3468C11.5 10.8991 11.0523 11.3468 10.5 11.3468C9.94772 11.3468 9.5 10.8991 9.5 10.3468V10.3368C9.5 9.78449 9.94772 9.33677 10.5 9.33677Z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </div>
+                  <span className="text-foreground">Launch Week 8: Day 1</span>
+                </div>
+                <span className="text-foreground-light">Huggingface now supported in Supabase</span>
+              </div>
+            </div>
+            <div className="relative flex !aspect-video h-[80px] md:h-[80px] gap-2 z-10 rounded overflow-hidden">
+              <Image
+                src="https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/lw8/assets/lw8-yt-thumb.jpg?t=2023-08-04T16%3A04%3A08.632Z"
+                alt="Youtube video thumbnail"
+                layout="fill"
+                objectFit="cover"
+              />
+            </div>
+          </a>
+        </Link>
+      </SmallCard>
+    </div>
+  )
+}
+
+export default LWAnnouncement

packages/ui/src/layout/banners/data/constants.ts

@@ -0,0 +1,6 @@
+export const LW_SITE_URL =
+  process.env.NEXT_PUBLIC_VERCEL_ENV === 'production'
+    ? 'https://supabase.com/launch-week'
+    : process.env.NEXT_PUBLIC_VERCEL_URL
+    ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}/launch-week`
+    : 'http://localhost:3000/launch-week'

packages/ui/src/layout/banners/index.tsx

@@ -1,2 +1,3 @@
 export { default as Announcement } from './Announcement'
+export { default as LWAnnouncement } from './LWAnnouncement'
 export { default as LW8CountdownBanner } from './LW8CountdownBanner/LW8CountdownBanner'