feat(nx-dev): webinar page (#29913)

Adds a webinar page and a script to pull the webinar content from Notion

docs/blog/2024-01-24-monorepos-the-benefits-challenges-and-importance-of-tooling-support.md

@@ -0,0 +1,16 @@
+---
+title: 'Monorepos: the Benefits, Challenges, and Importance of Tooling Support '
+description: 'Learn how monorepos and better tooling can help you overcome challenges in software development like scalability, maintenance, communication, and cost.'
+slug: 'monorepos-the-benefits-challenges-and-importance-of-tooling-support'
+authors: ['Juri Strumpflohner']
+tags: [webinar]
+cover_image: /blog/images/2024-01-24/january-webinar-card.png
+status: Past - Gated
+registrationUrl: https://go.nx.dev/january-webinar
+---
+
+Presented by Juri Strumpflohner
+
+Learn how monorepos and better tooling can help you overcome challenges in software development like scalability, maintenance, communication, and cost.
+
+{% call-to-action title="Download the recording" url="https://go.nx.dev/january-webinar" description="Sign up to gain access" /%}

docs/blog/2024-03-11-nx-agents-walkthrougheffortlessly-fast-ci-built-for-monorepos.md

@@ -0,0 +1,17 @@
+---
+title: "Nx Agents Walkthrough:
+Effortlessly Fast CI Built for Monorepos"
+description: "Learn how you can streamline your existing CI config to its absolute simplest form, reducing CI times from 30 minutes to ~5 minutes with Nx Agents. "
+slug: 'nx-agents-walkthrougheffortlessly-fast-ci-built-for-monorepos'
+authors: ['Rares Matei']
+tags: [webinar]
+cover_image: /blog/images/2024-03-11/march-webinar.png
+status: Past - Gated
+registrationUrl: https://go.nx.dev/march-webinar
+---
+
+Presented by Rares Matei
+
+Learn how you can streamline your existing CI config to its absolute simplest form, reducing CI times from 30 minutes to ~5 minutes with Nx Agents.
+
+{% call-to-action title="Download the recording" url="https://go.nx.dev/march-webinar" description="Sign up to gain access" /%}

docs/blog/2024-04-17-making-the-argument-for-monorepos.md

@@ -0,0 +1,16 @@
+---
+title: 'Making the Argument for Monorepos'
+description: 'Trying to convince your colleagues to use a monorepo? Already using a monorepo and need to justify that decision? Check out this webinar  to learn 7 essential reasons for using monorepos and bust a few myths and misconceptions along the way.'
+slug: 'making-the-argument-for-monorepos'
+authors: ['Miroslav Jonaš']
+tags: [webinar]
+cover_image: /blog/images/2024-04-17/april-webinar.png
+status: Past - Gated
+registrationUrl: https://go.nx.dev/april-webinar
+---
+
+Presented by Miroslav Jonaš
+
+Trying to convince your colleagues to use a monorepo? Already using a monorepo and need to justify that decision? Check out this webinar to learn 7 essential reasons for using monorepos and bust a few myths and misconceptions along the way.
+
+{% call-to-action title="Download the recording" url="https://go.nx.dev/april-webinar" description="Sign up to gain access" /%}

docs/blog/2024-06-26-monorepos-and-ci-can-be-a-mess-heres-how-nx-and-nx-cloud-fixed-it.md

@@ -0,0 +1,18 @@
+---
+title: "Monorepos and CI can be a Mess - Here's How Nx and Nx Cloud Fixed It"
+description: "Continuous Integration (CI) in monorepos can be notoriously slow and unreliable, quickly become a bottleneck for scaling monorepos.
+Learn how Nx and Nx Cloud's new task-based approach ensures fast, resilient, and efficient CI for your monorepo projects."
+slug: 'monorepos-and-ci-can-be-a-mess-heres-how-nx-and-nx-cloud-fixed-it'
+authors: ['Juri Strumpflohner']
+tags: [webinar]
+cover_image: /blog/images/2024-06-26/June-Webinar-card.png
+status: Past - Gated
+registrationUrl: https://go.nx.dev/june-webinar
+---
+
+Presented by Juri Strumpflohner
+
+Continuous Integration (CI) in monorepos can be notoriously slow and unreliable, quickly become a bottleneck for scaling monorepos.
+Learn how Nx and Nx Cloud's new task-based approach ensures fast, resilient, and efficient CI for your monorepo projects.
+
+{% call-to-action title="Download the recording" url="https://go.nx.dev/june-webinar" description="Sign up to gain access" /%}

docs/blog/2025-01-22-nx-cloud-scale-your-ci-and-team-with-ease.md

@@ -0,0 +1,19 @@
+---
+title: 'Nx Cloud: Scale Your CI and Team with Ease'
+description: 'Learn how you can attain fast, reliable CI and better coordination across your technical organization with Nx Cloud, and see our new multi-workspace features for organizational scaling in action.'
+slug: 'nx-cloud-scale-your-ci-and-team-with-ease'
+authors: ['Nicole Oliver', 'Rares Matei', 'James Henry']
+tags: [webinar]
+cover_image: /blog/images/2025-01-22/Jan-webinar-image.png
+time: 1-2pm ET/6-7pm UTC
+status: Upcoming
+registrationUrl: https://go.nx.dev/jan2025-webinar
+---
+
+**Jan 22, 2025 - 1-2pm ET/6-7pm UTC**
+
+Presented by Nicole Oliver, Rares Matei, and James Henry
+
+Learn how you can attain fast, reliable CI and better coordination across your technical organization with Nx Cloud, and see our new multi-workspace features for organizational scaling in action.
+
+{% call-to-action title="Register today!" url="https://go.nx.dev/jan2025-webinar" description="Save your spot" /%}

docs/blog/authors.json

@@ -141,5 +141,23 @@
     "image": "/blog/images/Nicolas Beaussart.jpeg",
     "twitter": "beaussan",
     "github": "beaussan"
+  },
+  {
+    "name": "Nicole Oliver",
+    "image": "/blog/images/Nicole Oliver.jpeg",
+    "twitter": "nixcodes",
+    "github": "nixallover"
+  },
+  {
+    "name": "Rares Matei",
+    "image": "/blog/images/Rares Matei.jpeg",
+    "twitter": "__rares",
+    "github": "rarmatei"
+  },
+  {
+    "name": "James Henry",
+    "image": "/blog/images/James Henry.jpeg",
+    "twitter": "MrJamesHenry",
+    "github": "JamesHenry"
   }
 ]

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

@@ -55,9 +55,11 @@ export class BlogApi {
         title: frontmatter.title ?? null,
         description: frontmatter.description ?? null,
         authors: authors.filter((author) =>
-          frontmatter.authors.includes(author.name)
+          frontmatter.authors?.includes(author.name)
         ),
         date: this.calculateDate(file, frontmatter),
+        time: frontmatter.time,
+        status: frontmatter.status,
         cover_image: frontmatter.cover_image
           ? `/documentation${frontmatter.cover_image}` // Match the prefix used by markdown parser
           : null,
@@ -69,6 +71,7 @@ export class BlogApi {
         filePath,
         slug,
         youtubeUrl: frontmatter.youtubeUrl,
+        registrationUrl: frontmatter.registrationUrl,
         podcastYoutubeId: frontmatter.podcastYoutubeId,
         podcastSpotifyId: frontmatter.podcastSpotifyId,
         podcastIHeartUrl: frontmatter.podcastIHeartUrl,

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

@@ -0,0 +1,16 @@
+import { BlogApi } from './blog.api';
+import { WebinarDataEntry } from './webinar.model';
+
+export class WebinarApi {
+  _blogApi: BlogApi;
+
+  constructor(options: { blogApi: BlogApi }) {
+    this._blogApi = options.blogApi;
+  }
+
+  async getWebinarBlogs(): Promise<WebinarDataEntry[]> {
+    return await this._blogApi.getBlogs((post) =>
+      post.tags.map((t) => t.toLowerCase()).includes('webinar')
+    );
+  }
+}

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

@@ -0,0 +1,7 @@
+import { BlogPostDataEntry } from './blog.model';
+
+export interface WebinarDataEntry extends BlogPostDataEntry {
+  status?: 'Upcoming' | 'Past - Gated' | 'Past - Ungated';
+  time?: string;
+  registrationUrl?: string;
+}

nx-dev/data-access-documents/src/node.index.ts

@@ -6,3 +6,5 @@ export * from './lib/blog.model';
 export * from './lib/tags.api';
 export * from './lib/podcast.model';
 export * from './lib/podcast.api';
+export * from './lib/webinar.model';
+export * from './lib/webinar.api';

nx-dev/nx-dev/app/webinar/page.tsx

@@ -0,0 +1,39 @@
+import { Metadata } from 'next';
+import { webinarApi } from '../../lib/webinar.api';
+import { DefaultLayout } from '@nx/nx-dev/ui-common';
+import { Hero, WebinarList } from '@nx/nx-dev/ui-webinar';
+
+export const metadata: Metadata = {
+  title: 'Nx Webinar - Updates from the Nx & Nx Cloud team',
+  description: 'Latest webinars from the Nx & Nx Cloud core team',
+  openGraph: {
+    url: 'https://nx.dev/webinar',
+    title: 'Nx Webinar - Updates from the Nx & Nx Cloud team',
+    description:
+      'Stay updated with the latest webinars from the Nx & Nx Cloud team.',
+    images: [
+      {
+        url: 'https://nx.dev/socials/nx-media.png',
+        width: 800,
+        height: 421,
+        alt: 'Nx: Smart Monorepos · Fast CI',
+        type: 'image/jpeg',
+      },
+    ],
+    siteName: 'Nx',
+    type: 'website',
+  },
+};
+
+async function getWebinars() {
+  return await webinarApi.getWebinarBlogs();
+}
+export default async function Page() {
+  const webinars = await getWebinars();
+  return (
+    <DefaultLayout>
+      <Hero />
+      <WebinarList webinars={webinars} />
+    </DefaultLayout>
+  );
+}

nx-dev/nx-dev/lib/webinar.api.ts

@@ -0,0 +1,4 @@
+import { blogApi } from './blog.api';
+import { WebinarApi } from '@nx/nx-dev/data-access-documents/node-only';
+
+export const webinarApi = new WebinarApi({ blogApi });

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

@@ -5,9 +5,10 @@ import Image from 'next/image';
 
 export interface BlogEntryProps {
   post: BlogPostDataEntry;
+  overrideLink?: string;
 }
 
-export function BlogEntry({ post }: BlogEntryProps) {
+export function BlogEntry({ post, overrideLink }: BlogEntryProps) {
   return (
     <div className="relative flex h-full transform-gpu flex-col overflow-hidden rounded-2xl border border-slate-200 shadow transition-all duration-300 ease-in-out hover:scale-[1.02] hover:shadow-lg dark:border-slate-800">
       {post.cover_image && (
@@ -25,7 +26,7 @@ export function BlogEntry({ post }: BlogEntryProps) {
       <div className="flex flex-col gap-1 p-4">
         <BlogAuthors authors={post.authors} />
         <Link
-          href={`/blog/${post.slug}`}
+          href={overrideLink ? overrideLink : `/blog/${post.slug}`}
           title={post.title}
           className="text-balance text-lg font-semibold text-slate-900 dark:text-white"
           prefetch={false}

nx-dev/ui-common/src/lib/headers/menu-items.ts

@@ -203,7 +203,7 @@ export const learnItems: MenuItem[] = [
   {
     name: 'Webinars',
     description: null,
-    href: 'https://go.nx.dev/jan2025-webinar',
+    href: '/webinar',
     icon: ComputerDesktopIcon,
     isNew: false,
     isHighlight: false,

nx-dev/ui-markdoc/src/index.ts

@@ -58,6 +58,7 @@ import { Quote } from './lib/tags/quote.component';
 import { quote } from './lib/tags/quote.schema';
 import { metrics } from './lib/tags/metrics.schema';
 import { Metrics } from './lib/tags/metrics.component';
+export { CallToAction };
 
 export const getMarkdocCustomConfig = (
   documentFilePath: string,

nx-dev/ui-webinar/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

nx-dev/ui-webinar/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

nx-dev/ui-webinar/README.md

@@ -0,0 +1,7 @@
+# ui-webinar
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test ui-webinar` to execute the unit tests via [Jest](https://jestjs.io).

nx-dev/ui-webinar/project.json

@@ -0,0 +1,9 @@
+{
+  "name": "ui-webinar",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "nx-dev/ui-webinar/src",
+  "projectType": "library",
+  "tags": [],
+  "// targets": "to see all targets run: nx show project ui-webinar --web",
+  "targets": {}
+}

nx-dev/ui-webinar/src/index.ts

@@ -0,0 +1,2 @@
+export * from './lib/hero';
+export * from './lib/webinar-list';

nx-dev/ui-webinar/src/lib/hero.tsx

@@ -0,0 +1,21 @@
+import { SectionHeading } from '@nx/nx-dev/ui-common';
+
+export function Hero(): JSX.Element {
+  return (
+    <div className="mx-auto max-w-7xl">
+      <div className="grid grid-cols-4 gap-x-4 px-8 lg:grid-cols-12 lg:gap-x-6">
+        <div className="col-span-full md:col-span-4 lg:col-span-6">
+          <SectionHeading as="h1" variant="title">
+            Nx Webinars
+          </SectionHeading>
+          <div className="flex flex-col gap-6">
+            <SectionHeading as="p" variant="subtitle" className="mt-8">
+              In-depth explanations and interactive Q&A sessions with Nx team
+              members
+            </SectionHeading>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

nx-dev/ui-webinar/src/lib/webinar-list-item.tsx

@@ -0,0 +1,55 @@
+import { BlogAuthors } from '@nx/nx-dev/ui-blog';
+import Link from 'next/link';
+import type { WebinarDataEntry } from '@nx/nx-dev/data-access-documents/node-only';
+
+export interface WebinarListItemProps {
+  webinar: WebinarDataEntry;
+  episode: number;
+}
+export function WebinarListItem({ webinar, episode }: WebinarListItemProps) {
+  const formattedDate = new Date(webinar.date).toLocaleDateString('en-US', {
+    month: 'short',
+    day: '2-digit',
+    year: 'numeric',
+  });
+  const authorsList = (
+    webinar.authors.length > 1
+      ? webinar.authors.map((a, i) =>
+          i === webinar.authors.length - 1 ? 'and ' + a.name : a.name
+        )
+      : webinar.authors.map((a) => a.name)
+  ).join(', ');
+  const link =
+    (webinar.status === 'Past - Ungated'
+      ? webinar.youtubeUrl
+      : webinar.registrationUrl) || '';
+  return (
+    <div
+      key={webinar.slug}
+      className="border-b border-slate-200 py-5 text-sm last:border-0 dark:border-slate-800 dark:before:bg-slate-800/50"
+    >
+      <Link href={link} prefetch={false}>
+        <h3 className="text-balance text-lg text-slate-500 sm:w-8/12 dark:text-white">
+          {webinar.title}
+        </h3>
+      </Link>
+      <span className="my-4 block">
+        <time dateTime={webinar.date}>{formattedDate}</time>
+      </span>
+      <span className="my-4 block">
+        <span className="inline-block">
+          <BlogAuthors authors={webinar.authors} showAuthorDetails={false} />
+        </span>
+        <span className="mx-2 inline-block">{authorsList}</span>
+      </span>
+      <p className="my-2">{webinar.description}</p>
+      <Link href={link} prefetch={false}>
+        <span className="my-4 text-balance text-slate-500 sm:w-8/12 dark:text-white">
+          {webinar.status === 'Past - Gated'
+            ? 'Sign up to view the recording'
+            : 'Watch the recording'}
+        </span>
+      </Link>
+    </div>
+  );
+}