feat: lw13 tiger d5 (supabase#30963)

* d5

* feat: database.build v2 blog post

* light mode images

* change hero to database.build v2

* add back Redesign section to blog post

* fix(blog): special characters

* feat(blog): add youtube video

* feat(blog): update post title

* wide blog images

* sets up the wrap up post

* fix attribute

* feat(blog): mention wasm pg_dump

* edits

* images

* Adds OG and thumb

* grammar

* blog assets

* mobile fix

* add video to launch week page

* prettify

* is

* hackathon link

---------

Co-authored-by: Francesco Sansalvadore <[email protected]>
Co-authored-by: Greg Richardson <[email protected]>
Co-authored-by: Copple <[email protected]>
Co-authored-by: Julien Goux <[email protected]>
Co-authored-by: Jonathan Summers-Muir <[email protected]>

Author: 6 people

apps/www/_blog/2024-09-30-lw12-hackathon-winners.mdx

@@ -1,5 +1,5 @@
 ---
-title: 'Supabase Launch Week 12 Hackathon'
+title: 'Supabase Launch Week 12 Hackathon Winners'
 description: Announcing the winners of the Supabase Launch Week 12 Hackathon.
 author: tyler_shukert
 image: lw12/hackathon-winners/thumbnail.png

apps/www/_blog/2024-12-06-database-build-v2.mdx

@@ -0,0 +1,90 @@
+---
+title: 'Top 10 Launches of Launch Week 13'
+description: Highlights from Launch Week 13
+author: paul_copplestone
+image: launch-week-13/wrap-up/og-top-10.png
+thumb: launch-week-13/wrap-up/thumb-top-10.png
+launchweek: '13'
+categories:
+  - launch-week
+tags:
+  - launch-week
+date: '2024-12-06'
+toc_depth: 3
+---
+
+Here are the top 10 launches from the past week. _You won't believe #7._
+
+## #1: Supabase Cron
+
+Supabase Cron is a new Postgres module for creating and managing recurring tasks. It is deeply integrated with the rest of the Supabase toolset.
+
+[Read more →](/blog/supabase-cron)
+
+## #2: Supabase AI Assistant v2
+
+We overhauled the AI Assistant in the Dashboard and gave it a bunch more “abilities”: from writing Postgres Functions to creating entire databases.
+
+[Read more →](/blog/supabase-ai-assistant-v2)
+
+## #3: Edge Functions: Background Tasks, Ephemeral Storage, and WebSockets
+
+A feature tri-fecta: Edge Functions now support Websockets for things like OpenAI's Realtime API, ephemeral storage for things like zip files, and Background Tasks that continue to run after you've sent a response to your users.
+
+[Read more →](/blog/edge-functions-background-tasks-websockets)
+
+## #4: CLI v2: Config as Code
+
+We realeased v2 of the CLI, adding support for Configuration as Code. You can now use the CLI in your GitHub actions to keep all of your project configuration in sync.
+
+## #5: High Performance Disks
+
+With advanced disks you can store up to 60 TB of data with 100x improved durability, and provision up to 5x more IOPS than the default disks we offer.
+
+[Read more →](/blog/high-performance-disks)
+
+## #6: Restore to a new Project
+
+You can now launch new projects from the backups of any of your existing projects. This is particularly helpful if you want to do some data engineering without impacting your production database.
+
+[Read more →](/blog/restore-to-a-new-project)
+
+## #7: Bring your own LLM: database.build
+
+"postgres.new" is now ["database.build"](https://database.build) and you can still run everything in your own browser. We've added 3 major features: Bring-your-own-LLM, Live Share, and they ability to deploy your [pglite](https://pglite.dev/) to Supabase.
+
+[Read more →](/blog/database-build-v2)
+
+## #8: Oriole Beta7 - high performance Postgres
+
+We're building a new storage engine for Postgres that's much faster than the current storage engine. We've released some benchmarks and made it available on the Platform.
+
+[Read more →](https://www.orioledb.com/blog/orioledb-beta7-benchmarks)
+
+## #9: Supabase Queues
+
+A Postgres-native, durable Message Queue with guaranteed delivery, improving the scalability and resiliency of your applications.
+
+[Read more →](/blog/supabase-queues)
+
+## #10: Mega Launch Week
+
+This Launch Week is special because we didn't do it alone. This time, more than 20 other devtools joined us to launch their products and features throughout the week. Some things are just more fun when you do them together.
+
+[Read more →](https://launchweek.dev/lw/MEGA)
+
+## Launch Week continues
+
+Next week we have a couple of activities for you to get involved with:
+
+### Hack the Base: Capture the Flag
+
+Want to test hacking skills? We're running a Capture the Flag event called [Hack the Base](https://ctf.supabase.com/). It's a free event that anyone can participate in.
+
+[Read more →](/events/launch-week-13-hackathon)
+
+### Launch Week 13: Hackathon
+
+We're running a virtual hackathon starting **now** where you can win prizes for building the best projects using Supabase. We'll be announcing the winners on December 15th.
+
+[Read more →](/events/launch-week-13-hackathon)

apps/www/_blog/2024-12-06-launch-week-13-top-10.mdx

@@ -8,7 +8,7 @@ import { useKey } from 'react-use'
 import type { BlogView } from '~/pages/blog'
 import type PostTypes from '~/types/post'
 
-import { AlignJustify, ChevronDown, Grid, Search, X } from 'lucide-react'
+import { AlignJustify, ChevronDown, Grid, Search, X as CloseIcon } from 'lucide-react'
 import {
   Button,
   DropdownMenu,
@@ -259,7 +259,7 @@ function BlogFilters({ allPosts, setPosts, view, setView }: Props) {
                     }}
                     className="text-foreground-light hover:text-foreground hover:bg-selection"
                   >
-                    <X size="14" />
+                    <CloseIcon size="14" />
                   </Button>
                 )
               }
@@ -271,9 +271,13 @@ function BlogFilters({ allPosts, setPosts, view, setView }: Props) {
         type="default"
         title={isList ? 'Grid View' : 'List View'}
         onClick={handleViewSelection}
-        className="h-full p-1.5"
+        className="h-full p-2 text-foreground-light"
       >
-        {isList ? <Grid /> : <AlignJustify />}
+        {isList ? (
+          <Grid className="w-4 h-4 stroke-1.5" />
+        ) : (
+          <AlignJustify className="w-4 h-4 stroke-1.5" />
+        )}
       </Button>
     </div>
   )

apps/www/components/Blog/BlogFilters.tsx

@@ -25,9 +25,9 @@ const Hero = () => {
                 <div className="flex flex-col items-center">
                   <div className="z-40 w-full flex justify-center -mt-4 lg:-mt-12 mb-8">
                     <AnnouncementBadge
-                      url="/launch-week#day-4"
-                      badge="LW13: Day 4"
-                      announcement="Supabase Queues"
+                      url="/launch-week#day-5"
+                      badge="LW13: Day 5"
+                      announcement="database.build v2"
                     />
                   </div>
                   <h1 className="text-foreground text-4xl sm:text-5xl sm:leading-none lg:text-7xl">

apps/www/components/Hero/Hero.tsx

@@ -67,8 +67,8 @@ const days: (isDark?: boolean) => WeekDayProps[] = (isDark = true) => [
     hasCountdown: false,
     date: '2 December',
     published_at: '2024-12-02T08:00:00.000-07:00',
-    title: 'Supabase AI Assistant V2',
-    description: 'Supabase AI Assistant V2',
+    title: 'Supabase AI Assistant v2',
+    description: 'Supabase AI Assistant v2',
     links: [
       {
         type: 'video',
@@ -184,7 +184,7 @@ const days: (isDark?: boolean) => WeekDayProps[] = (isDark = true) => [
     d: 4,
     dd: 'Thu',
     shipped: true,
-    isToday: true,
+    isToday: false,
     hasCountdown: false,
     blog: '/blog/supabase-queues',
     date: '5 December',
@@ -224,25 +224,43 @@ const days: (isDark?: boolean) => WeekDayProps[] = (isDark = true) => [
     id: 'day-5',
     d: 5,
     dd: 'Fri',
-    shipped: false,
-    isToday: false,
-    hasCountdown: true,
-    blog: '',
+    shipped: true,
+    isToday: true,
+    hasCountdown: false,
+    blog: '/blog/database-build-v2',
     date: '6 December',
     published_at: '2024-12-06T08:00:00.000-07:00',
-    title: '',
-    description: null,
+    title: 'database.build v2: Bring-Your-Own-LLM',
+    description: (
+      <>
+        database.build v2: <br className="hidden sm:block" />
+        Bring-Your-Own-LLM
+      </>
+    ),
     links: [
-      // {
-      //   type: 'video',
-      //   href: '',
-      // },
+      {
+        type: 'video',
+        href: 'IQ8xqmht-gk',
+      },
       {
         type: 'xSpace',
         href: 'https://twitter.com/i/spaces/1zqKVYOEODYxB',
       },
     ],
-    steps: [],
+    steps: [
+      {
+        title: '',
+        bg_layers: [
+          {
+            img: '/images/launchweek/13/releases/d5/d5-database-build-v2-dark.png',
+            mobileImg: '/images/launchweek/13/releases/d5/d5-database-build-v2-mobile-dark.png',
+            imgLight: '/images/launchweek/13/releases/d5/d5-database-build-v2-light.png',
+            mobileImgLight:
+              '/images/launchweek/13/releases/d5/d5-database-build-v2-mobile-light.png',
+          },
+        ],
+      },
+    ],
   },
 ]
 

apps/www/components/LaunchWeek/13/Releases/data/lw13_data.tsx

@@ -112,12 +112,8 @@ export default function mdxComponents(type?: 'blog' | 'lp' | undefined) {
     Img: ({ zoomable = true, className, ...props }: ImageProps & { wide?: boolean }) => (
       <Image
         fill
-        className={cn(
-          'm-0 object-cover',
-          type === 'blog' ? 'rounded-md border' : '',
-          props.wide && 'wide',
-          className
-        )}
+        containerClassName={cn(props.wide && 'wide')}
+        className={cn('m-0 object-cover', type === 'blog' ? 'rounded-md border' : '', className)}
         zoomable={zoomable}
         {...props}
       />

apps/www/lib/mdx/mdxComponents.tsx

@@ -238,7 +238,7 @@ function BlogPostPage(props: InferGetStaticPropsType<typeof getStaticProps>) {
           ],
         }}
       />
-      <DefaultLayout>
+      <DefaultLayout className="overflow-x-hidden">
         <div
           className="
             container mx-auto px-4 py-4 md:py-8 xl:py-10 sm:px-16
@@ -310,7 +310,7 @@ function BlogPostPage(props: InferGetStaticPropsType<typeof getStaticProps>) {
               </div>
               <div className="grid grid-cols-12 lg:gap-16 xl:gap-8">
                 {/* Content */}
-                <div className="col-span-12 lg:col-span-7 xl:col-span-7 overflow-x-hidden">
+                <div className="col-span-12 lg:col-span-7 xl:col-span-7">
                   <article>
                     <div className={['prose prose-docs'].join(' ')}>
                       {props.blog.youtubeHero ? (