feat(nx-dev): webinar page

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

@@ -0,0 +1,14 @@
+---
+title: 'Monorepos: the Benefits, Challenges, and Importance of Tooling Support '
+slug: 'monorepos-the-benefits-challenges-and-importance-of-tooling-support'
+authors: ['Juri Strumpflohner']
+tags: [webinar]
+status: Past - Ungated
+youtubeUrl: https://youtu.be/OgVFlub25b0
+---
+
+**Jan 23, 2024**
+
+Presented by Juri Strumpflohner
+
+Learn how monorepos and better tooling can help you overcome challenges in software development like scalability, maintenance, communication, and cost.

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

@@ -0,0 +1,14 @@
+---
+title: "Nx Agents Walkthrough:
+Effortlessly Fast CI Built for Monorepos"
+slug: 'nx-agents-walkthrougheffortlessly-fast-ci-built-for-monorepos'
+authors: ['Rares Matei']
+tags: [webinar]
+status: Past - Gated
+---
+
+**Mar 10, 2024**
+
+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.

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

@@ -0,0 +1,13 @@
+---
+title: 'Making the Argument for Monorepos'
+slug: 'making-the-argument-for-monorepos'
+authors: ['Miroslav Jonaš']
+tags: [webinar]
+status: Past - Gated
+---
+
+**Apr 16, 2024**
+
+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.

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

@@ -0,0 +1,14 @@
+---
+title: "Monorepos and CI can be a Mess - Here's How Nx and Nx Cloud Fixed It"
+slug: 'monorepos-and-ci-can-be-a-mess-heres-how-nx-and-nx-cloud-fixed-it'
+authors: ['Juri Strumpflohner']
+tags: [webinar]
+status: Past - Gated
+---
+
+**Jun 25, 2024**
+
+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.

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

@@ -0,0 +1,16 @@
+---
+title: 'Nx Cloud: Scale Your CI and Team with Ease'
+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
+status: Upcoming
+---
+
+**Jan 21, 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,10 @@ 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),
+        status: frontmatter.status,
         cover_image: frontmatter.cover_image
           ? `/documentation${frontmatter.cover_image}` // Match the prefix used by markdown parser
           : null,

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,5 @@
+import { BlogPostDataEntry } from './blog.model';
+
+export interface WebinarDataEntry extends BlogPostDataEntry {
+  status?: 'Upcoming' | 'Past - Gated' | 'Past - Ungated';
+}

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-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,28 @@
+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 className="hidden lg:col-span-3 lg:col-start-10 lg:block">
+          <img
+            className="aspect[1/1] rounded-lg border-8 border-slate-800/50 object-cover dark:border-white"
+            src="/images/webinar/webinar-hero.avif"
+            alt="A laptop and notebook"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,33 @@
+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',
+  });
+  return (
+    <Link
+      href={`/blog/${webinar.slug}`}
+      key={webinar.slug}
+      className="relative flex items-center gap-6 border-b border-slate-200 py-5 text-sm before:absolute before:inset-x-[-16px] before:inset-y-[-2px] before:z-[-1] before:rounded-xl before:bg-slate-200 before:opacity-0 last:border-0 before:hover:opacity-100 dark:border-slate-800 dark:before:bg-slate-800/50"
+      prefetch={false}
+    >
+      <span className="w-1/2 flex-none text-balance text-slate-500 sm:w-8/12 dark:text-white">
+        {webinar.title}
+      </span>
+      <span className="hidden w-2/12 flex-none sm:inline-block">
+        <time dateTime={webinar.date}>{formattedDate}</time>
+      </span>
+      <span className="hidden flex-1 overflow-hidden sm:inline-block">
+        <BlogAuthors authors={webinar.authors} showAuthorDetails={false} />
+      </span>
+    </Link>
+  );
+}

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

@@ -0,0 +1,43 @@
+import { WebinarDataEntry } from '@nx/nx-dev/data-access-documents/node-only';
+import { BlogEntry } from '@nx/nx-dev/ui-blog';
+import { WebinarListItem } from './webinar-list-item';
+
+export interface WebinarListProps {
+  webinars: WebinarDataEntry[];
+}
+
+export function WebinarList({ webinars }: WebinarListProps): JSX.Element {
+  return webinars.length < 1 ? (
+    <div>
+      <h2 className="mt-32 text-center text-xl font-semibold text-slate-500 sm:text-2xl xl:mb-24 dark:text-white ">
+        No webinars as yet but stay tuned!
+      </h2>
+    </div>
+  ) : (
+    <div className="mx-auto max-w-7xl px-8">
+      {webinars
+        .filter((w) => w.status === 'Upcoming')
+        .map((webinar, index) => {
+          return (
+            <div className="mt-6 w-full max-w-xl">
+              <BlogEntry post={webinar}></BlogEntry>
+            </div>
+          );
+        })}
+      <div className="mb-8 mt-20 border-b-2 border-slate-300 pb-3 text-sm dark:border-slate-700">
+        <h2 className="font-semibold">Past Webinars</h2>
+      </div>
+      <div>
+        {webinars
+          .filter((w) => w.status !== 'Upcoming')
+          .map((post, index) => (
+            <WebinarListItem
+              key={post.slug}
+              webinar={post}
+              episode={index + 1}
+            />
+          ))}
+      </div>
+    </div>
+  );
+}

nx-dev/ui-webinar/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
+}

nx-dev/ui-webinar/tsconfig.lib.json

@@ -0,0 +1,24 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "node",
+
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "exclude": [
+    "jest.config.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}

package.json

@@ -67,6 +67,7 @@
     "@nestjs/testing": "^9.0.0",
     "@ngrx/router-store": "19.0.0",
     "@ngrx/store": "19.0.0",
+    "@notionhq/client": "^2.2.15",
     "@nuxt/kit": "^3.10.0",
     "@nuxt/schema": "^3.10.0",
     "@nx/angular": "20.4.0-beta.2",