migration

apps/cms/src/blocks/Quote/Component.tsx

@@ -0,0 +1,19 @@
+import type { QuoteBlock as QuoteBlockProps } from 'src/payload-types'
+
+import { cn } from '@/utilities/ui'
+import React from 'react'
+
+type Props = {
+  className?: string
+} & QuoteBlockProps
+
+export const QuoteBlock: React.FC<Props> = ({ className, img, caption, text }) => {
+  return (
+    `<Quote img={${img}} caption={${caption ?? ""}} className={${className}}>
+
+{${text}}
+
+</Quote>
+`
+  )
+} 

apps/cms/src/blocks/Quote/config.ts

@@ -0,0 +1,27 @@
+import type { Block } from 'payload'
+
+export const Quote: Block = {
+  slug: 'quote',
+  fields: [
+    {
+      name: 'img',
+      type: 'upload',
+      relationTo: 'media',
+      label: 'Avatar',
+      required: false,
+    },
+    {
+      name: 'caption',
+      type: 'text',
+      label: 'Caption',
+      required: false,
+    },
+    {
+      name: 'text',
+      type: 'textarea',
+      label: 'Quote Text',
+      required: true,
+    },
+  ],
+  interfaceName: 'QuoteBlock',
+} 

apps/cms/src/blocks/YouTube/Component.tsx

@@ -0,0 +1,22 @@
+import type { YouTubeBlock as YouTubeBlockProps } from 'src/payload-types'
+
+import { cn } from '@/utilities/ui'
+import React from 'react'
+
+type Props = {
+  className?: string
+} & YouTubeBlockProps
+
+export const YouTubeBlock: React.FC<Props> = ({ className, youtubeId }) => {
+  return (
+    <div className={cn('video-container', className)}>
+      <iframe
+        className="w-full"
+        src={`https://www.youtube-nocookie.com/embed/${youtubeId}`}
+        title="YouTube video"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; fullscreen; gyroscope; picture-in-picture; web-share"
+        allowFullScreen
+      />
+    </div>
+  )
+} 

apps/cms/src/blocks/YouTube/config.ts

@@ -0,0 +1,17 @@
+import type { Block } from 'payload'
+
+export const YouTube: Block = {
+  slug: 'youtube',
+  fields: [
+    {
+      name: 'youtubeId',
+      type: 'text',
+      label: 'YouTube Video ID',
+      required: true,
+      admin: {
+        description: 'Enter the YouTube video ID (e.g., "dQw4w9WgXcQ" from https://www.youtube.com/watch?v=dQw4w9WgXcQ)',
+      },
+    },
+  ],
+  interfaceName: 'YouTubeBlock',
+} 

apps/cms/src/collections/Customers/index.ts

@@ -14,6 +14,8 @@ import { authenticatedOrPublished } from '../../access/authenticatedOrPublished'
 import { Banner } from '../../blocks/Banner/config'
 import { Code } from '../../blocks/Code/config'
 import { MediaBlock } from '../../blocks/MediaBlock/config'
+import { Quote } from '../../blocks/Quote/config'
+import { YouTube } from '../../blocks/YouTube/config'
 import { revalidateDelete, revalidateCustomer } from './hooks/revalidateCustomer'
 
 import {
@@ -117,7 +119,7 @@ export const Customers: CollectionConfig = {
                   return [
                     ...rootFeatures,
                     HeadingFeature({ enabledHeadingSizes: ['h1', 'h2', 'h3', 'h4'] }),
-                    BlocksFeature({ blocks: [Banner, Code, MediaBlock] }),
+                    BlocksFeature({ blocks: [Banner, Code, MediaBlock, Quote, YouTube] }),
                     FixedToolbarFeature(),
                     InlineToolbarFeature(),
                     HorizontalRuleFeature(),

apps/cms/src/collections/Events/index.ts

@@ -14,6 +14,8 @@ import { authenticatedOrPublished } from '../../access/authenticatedOrPublished'
 import { Banner } from '../../blocks/Banner/config'
 import { Code } from '../../blocks/Code/config'
 import { MediaBlock } from '../../blocks/MediaBlock/config'
+import { Quote } from '../../blocks/Quote/config'
+import { YouTube } from '../../blocks/YouTube/config'
 import { generatePreviewPath } from '../../utilities/generatePreviewPath'
 // import { populateAuthors } from './hooks/populateAuthors'
 import { revalidateDelete, revalidateEvent } from './hooks/revalidateEvent'
@@ -101,7 +103,7 @@ export const Events: CollectionConfig = {
                   return [
                     ...rootFeatures,
                     HeadingFeature({ enabledHeadingSizes: ['h1', 'h2', 'h3', 'h4'] }),
-                    BlocksFeature({ blocks: [Banner, Code, MediaBlock] }),
+                    BlocksFeature({ blocks: [Banner, Code, MediaBlock, Quote, YouTube] }),
                     FixedToolbarFeature(),
                     InlineToolbarFeature(),
                     HorizontalRuleFeature(),

apps/cms/src/collections/Posts/index.ts

@@ -14,6 +14,8 @@ import { authenticatedOrPublished } from '../../access/authenticatedOrPublished'
 import { Banner } from '../../blocks/Banner/config'
 import { Code } from '../../blocks/Code/config'
 import { MediaBlock } from '../../blocks/MediaBlock/config'
+import { Quote } from '../../blocks/Quote/config'
+import { YouTube } from '../../blocks/YouTube/config'
 import { generatePreviewPath } from '../../utilities/generatePreviewPath'
 import { populateAuthors } from './hooks/populateAuthors'
 import { revalidateDelete, revalidatePost } from './hooks/revalidatePost'
@@ -126,7 +128,7 @@ export const Posts: CollectionConfig = {
                   return [
                     ...rootFeatures,
                     HeadingFeature({ enabledHeadingSizes: ['h1', 'h2', 'h3', 'h4'] }),
-                    BlocksFeature({ blocks: [Banner, Code, MediaBlock] }),
+                    BlocksFeature({ blocks: [Banner, Code, MediaBlock, Quote, YouTube] }),
                     FixedToolbarFeature(),
                     InlineToolbarFeature(),
                     HorizontalRuleFeature(),

apps/cms/src/components/RichText/index.tsx

@@ -17,14 +17,18 @@ import type {
   BannerBlock as BannerBlockProps,
   CallToActionBlock as CTABlockProps,
   MediaBlock as MediaBlockProps,
+  QuoteBlock as QuoteBlockProps,
+  YouTubeBlock as YouTubeBlockProps,
 } from '@/payload-types'
 import { BannerBlock } from '@/blocks/Banner/Component'
 import { CallToActionBlock } from '@/blocks/CallToAction/Component'
+import { QuoteBlock } from '@/blocks/Quote/Component'
+import { YouTubeBlock } from '@/blocks/YouTube/Component'
 import { cn } from '@/utilities/ui'
 
 type NodeTypes =
   | DefaultNodeTypes
-  | SerializedBlockNode<CTABlockProps | MediaBlockProps | BannerBlockProps | CodeBlockProps>
+  | SerializedBlockNode<CTABlockProps | MediaBlockProps | BannerBlockProps | CodeBlockProps | QuoteBlockProps | YouTubeBlockProps>
 
 const internalDocToHref = ({ linkNode }: { linkNode: SerializedLinkNode }) => {
   const { value, relationTo } = linkNode.fields.doc!
@@ -52,6 +56,8 @@ const jsxConverters: JSXConvertersFunction<NodeTypes> = ({ defaultConverters })
     ),
     code: ({ node }) => <CodeBlock className="col-start-2" {...node.fields} />,
     cta: ({ node }) => <CallToActionBlock {...node.fields} />,
+    quote: ({ node }) => <QuoteBlock className="col-start-2" {...node.fields} />,
+    youtube: ({ node }) => <YouTubeBlock className="col-start-2" {...node.fields} />,
   },
 })
 

apps/cms/src/migrations/index.ts

@@ -0,0 +1,9 @@
+import * as migration_20250526_130524 from './20250526_130524';
+
+export const migrations = [
+  {
+    up: migration_20250526_130524.up,
+    down: migration_20250526_130524.down,
+    name: '20250526_130524'
+  },
+];

apps/cms/src/payload-types.ts

@@ -1896,6 +1896,31 @@ export interface CodeBlock {
   blockName?: string | null;
   blockType: 'code';
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "QuoteBlock".
+ */
+export interface QuoteBlock {
+  img?: (number | null) | Media;
+  caption?: string | null;
+  text: string;
+  id?: string | null;
+  blockName?: string | null;
+  blockType: 'quote';
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "YouTubeBlock".
+ */
+export interface YouTubeBlock {
+  /**
+   * Enter the YouTube video ID (e.g., "dQw4w9WgXcQ" from https://www.youtube.com/watch?v=dQw4w9WgXcQ)
+   */
+  youtubeId: string;
+  id?: string | null;
+  blockName?: string | null;
+  blockType: 'youtube';
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "auth".

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

@@ -1,4 +1,5 @@
 import matter from 'gray-matter'
+import { useState, useMemo } from 'react'
 import type { GetStaticProps, InferGetStaticPropsType } from 'next'
 import { MDXRemote } from 'next-mdx-remote'
 import { NextSeo } from 'next-seo'
@@ -6,21 +7,17 @@ import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { ReactMarkdown } from 'react-markdown/lib/react-markdown'
-import { Badge } from 'ui'
 import dayjs from 'dayjs'
-import { remark } from 'remark'
-import html from 'remark-html'
-import { useState, useMemo } from 'react'
+import { ChevronLeft } from 'lucide-react'
 import { useLivePreview } from '@payloadcms/live-preview-react'
+import { Badge } from 'ui'
 
 import authors from 'lib/authors.json'
-import { useDraftMode } from '~/hooks/useDraftMode'
-import { generateReadingTime, isNotNullOrUndefined } from '~/lib/helpers'
+import { isNotNullOrUndefined } from '~/lib/helpers'
 import mdxComponents from '~/lib/mdx/mdxComponents'
 import { mdxSerialize } from '~/lib/mdx/mdxSerialize'
 import { getAllPostSlugs, getPostdata, getSortedPosts } from '~/lib/posts'
 import { getAllCMSPostSlugs, getCMSPostBySlug, getAllCMSPosts } from '~/lib/cms-posts'
-import { CMS_API_URL } from '~/lib/constants'
 
 import ShareArticleActions from '~/components/Blog/ShareArticleActions'
 import CTABanner from '~/components/CTABanner'
@@ -31,7 +28,6 @@ import LW14Summary from '~/components/LaunchWeek/14/Releases/LWSummary'
 import BlogLinks from '~/components/LaunchWeek/7/BlogLinks'
 import LWXSummary from '~/components/LaunchWeek/X/LWXSummary'
 import DefaultLayout from '~/components/Layouts/Default'
-import { ChevronLeft } from 'lucide-react'
 import { LivePreview } from '~/components/Blog/LivePreview'
 import { DraftModeBanner } from '~/components/Blog/DraftModeBanner'
 
@@ -253,12 +249,14 @@ export const getStaticProps: GetStaticProps<BlogPostPageProps, Params> = async (
     if (draftMode) {
       console.log('[getStaticProps] In draft mode but no draft found, trying published version...')
       const publishedPost = await getCMSPostBySlug(slug, false)
+      console.log('[getStaticProps] Published post:', publishedPost)
       if (!publishedPost) {
         console.log('[getStaticProps] No published version found either, returning 404')
         return { notFound: true }
       }
       console.log('[getStaticProps] Found published version, using that for draft mode')
       const mdxSource = await mdxSerialize(publishedPost.content || '')
+      console.log('[getStaticProps] MDX source:', mdxSource)
       return {
         props: {
           prevPost: null,