docs(misc): trunk livestream (#27603)

docs/blog/2024-08-29-nx-live-with-trunk.md

@@ -0,0 +1,10 @@
+---
+title: How to Fast-Track Your PRs with Trunk.io | Nx Live
+slug: nx-live-trunk-io
+authors: ['Zack DeRose']
+tags: [livestream]
+cover_image: /blog/images/2024-08-29/nx-live-trunk.png
+youtubeUrl: https://youtube.com/live/E8Gh-Vkxok0
+---
+
+In this episode of Nx Live, Zack sits down with David from [Trunk.io](https://trunk.io) to explore hands-on examples of how to fast-track your PRs using Nx and Trunk Merge Queues. They also discuss the latest [first-class support for Nx](https://docs.trunk.io/merge-queue/parallel-queues/nx) recently added to Trunk, demonstrating how these tools can streamline your development workflow.

nx-dev/data-access-documents/src/lib/blog.api.ts

@@ -68,6 +68,7 @@ export class BlogApi {
         ogImageType: type,
         filePath,
         slug,
+        youtubeUrl: frontmatter.youtubeUrl,
         podcastYoutubeId: frontmatter.podcastYoutubeId,
         podcastSpotifyId: frontmatter.podcastSpotifyId,
         podcastIHeartUrl: frontmatter.podcastIHeartUrl,

nx-dev/data-access-documents/src/lib/blog.model.ts

@@ -11,6 +11,7 @@ export type BlogPostDataEntry = {
   pinned?: boolean;
   filePath: string;
   slug: string;
+  youtubeUrl?: string;
   podcastYoutubeId?: string;
   podcastSpotifyId?: string;
   podcastAmazonUrl?: string;

nx-dev/ui-blog/src/lib/blog-container.tsx

@@ -13,6 +13,7 @@ import {
   AcademicCapIcon,
   ChatBubbleOvalLeftEllipsisIcon,
   ListBulletIcon,
+  VideoCameraIcon,
 } from '@heroicons/react/24/outline';
 
 export interface BlogContainerProps {
@@ -63,6 +64,12 @@ let ALL_TOPICS = [
     value: 'tutorial',
     heading: 'Tutorials',
   },
+  {
+    label: 'Livestreams',
+    icon: VideoCameraIcon,
+    value: 'livestream',
+    heading: 'Livestreams',
+  },
 ];
 
 // first five blog posts contain potentially pinned plus the last published ones. They

nx-dev/ui-blog/src/lib/blog-details.tsx

@@ -5,6 +5,7 @@ import { BlogAuthors } from './authors';
 import { ChevronLeftIcon } from '@heroicons/react/24/outline';
 import { renderMarkdown } from '@nx/nx-dev/ui-markdoc';
 import { EpisodePlayer } from './episode-player';
+import { YouTube } from '@nx/nx-dev/ui-common';
 
 export interface BlogDetailsProps {
   post: BlogPostDataEntry;
@@ -76,6 +77,14 @@ export function BlogDetails({ post }: BlogDetailsProps) {
               iHeartUrl={post.podcastIHeartUrl}
             />
           </div>
+        ) : post.youtubeUrl ? (
+          <div className="mx-auto mb-16 w-full max-w-screen-md">
+            <YouTube
+              src={post.youtubeUrl}
+              title={post.title}
+              caption={post.description}
+            />
+          </div>
         ) : (
           post.cover_image && (
             <div className="mx-auto mb-16 aspect-[1.7] w-full max-w-screen-md">

nx-dev/ui-common/src/lib/youtube.component.tsx

@@ -37,6 +37,11 @@ export function computeEmbedURL(youtubeURL: string) {
     return 'https://www.youtube.com/embed/' + match[1];
   }
 
+  match = youtubeURL.match(/youtube\.com\/live\/([a-zA-Z0-9_-]+)/);
+  if (match && match[1]) {
+    return 'https://www.youtube.com/embed/' + match[1];
+  }
+
   // Check for 'https://youtu.be/' format
   match = youtubeURL.match(/youtu\.be\/([a-zA-Z0-9_-]+)/);
   if (match && match[1]) {
@@ -50,7 +55,7 @@ export function YouTube(props: {
   title: string;
   caption: string;
   src: string;
-  width: string;
+  width?: string;
 }): JSX.Element {
   return (
     <div className="text-center">