[pull] latest from ag-grid:latest

documentation/ag-grid-docs/project.json

@@ -19,7 +19,7 @@
         "!{projectRoot}/vitest.config.ts",
         "{workspaceRoot}/external/ag-website-shared/**",
         "charts",
-        "{projectRoot}/.astro/cache/sitemap/**",
+        "{projectRoot}/.astro/cache/sitemap/sitemap-0.xml",
         { "env": "PUBLIC_PACKAGE_VERSION" }
       ],
       "cache": true,

documentation/ag-grid-docs/src/components/demos/demosData.ts

@@ -13,6 +13,11 @@ export interface DemoTab {
     altDark: string;
 }
 
+// The video tour of the demos. Linked from the header of every demo page and from the markdown
+// twins, so the label and URL live here rather than being repeated per page.
+export const VIDEO_TOUR_URL = 'https://youtu.be/bcMvTUVbMvI';
+export const VIDEO_TOUR_TEXT = 'Video Tour';
+
 export const demoTabs: DemoTab[] = [
     {
         key: 'complete',

documentation/ag-grid-docs/src/components/landing-pages/FrameworkCtaLink.tsx

@@ -0,0 +1,30 @@
+import { Icon } from '@ag-website-shared/components/icon/Icon';
+import { gridUrlWithPrefix } from '@ag-website-shared/utils/gridUrlWithPrefix';
+import { useFramework } from '@utils/hooks/useFramework';
+import type { FunctionComponent, ReactNode } from 'react';
+
+interface Props {
+    /** A './' path, resolved against the visitor's selected framework. */
+    url: string;
+    id?: string;
+    className?: string;
+    /** Append a chevron, which the caller's styles animate on hover. */
+    withChevron?: boolean;
+    children: ReactNode;
+}
+
+/**
+ * A CTA link pointing at a framework-prefixed docs page, for use in the server-rendered parts of a
+ * landing page. Renders against the default framework on the server and follows the visitor's
+ * selection once hydrated, so it stays in step with the framework CTAs further down the page.
+ */
+export const FrameworkCtaLink: FunctionComponent<Props> = ({ url, id, className, withChevron, children }) => {
+    const { framework } = useFramework();
+
+    return (
+        <a id={id} href={gridUrlWithPrefix({ framework, url })} className={className}>
+            {children}
+            {withChevron && <Icon name="chevronRight" />}
+        </a>
+    );
+};

documentation/ag-grid-docs/src/content.config.ts

@@ -530,6 +530,11 @@ const homepage = defineCollection({
             seeDemosUrl: z.string(),
             githubText: z.string(),
             githubUrl: z.string(),
+            freeTrialText: z.string(),
+            // A './' path, resolved against the visitor's selected framework at render.
+            freeTrialUrl: z.string(),
+            buyNowText: z.string(),
+            buyNowUrl: z.string(),
         }),
         sections: z.array(
             z.object({
@@ -545,6 +550,16 @@ const homepage = defineCollection({
                 // per-section behaviour); framework CTAs instead pass the raw './' path through.
                 ctaUrlIsBaseUrl: z.boolean().optional(),
                 ctaId: z.string().optional(),
+                // An extra CTA rendered after the section's main CTA. `isFramework` resolves its
+                // './' url against the visitor's selected framework.
+                secondaryCta: z
+                    .object({
+                        title: z.string(),
+                        url: z.string(),
+                        id: z.string().optional(),
+                        isFramework: z.boolean().optional(),
+                    })
+                    .optional(),
                 isFramework: z.boolean().optional(),
                 showBackgroundGradient: z.boolean().optional(),
                 sectionClass: z.string().optional(),

documentation/ag-grid-docs/src/content/homepage/homepage.json

@@ -6,17 +6,27 @@
         "seeDemosText": "See demos",
         "seeDemosUrl": "./example/",
         "githubText": "View on GitHub",
-        "githubUrl": "https://github.com/ag-grid/ag-grid-demos/tree/main/finance"
+        "githubUrl": "https://github.com/ag-grid/ag-grid-demos/tree/main/finance",
+        "freeTrialText": "Free Trial",
+        "freeTrialUrl": "./community-vs-enterprise/#request-a-30-day-enterprise-bundle-trial-licence",
+        "buyNowText": "Buy Now",
+        "buyNowUrl": "/license-pricing/"
     },
     "sections": [
         {
             "id": "fastest-data-grid",
             "tag": "Unbeatable Speed & Performance",
             "heading": "The Fastest Data Grid In The World",
             "subHeading": "Handle millions of rows, and thousands of updates per second out of the box, without compromising on performance",
-            "ctaTitle": "Get Started For Free",
+            "ctaTitle": "Explore the Docs",
             "ctaUrl": "./getting-started",
             "ctaId": "get-started-for-free",
+            "secondaryCta": {
+                "title": "Try Enterprise Free",
+                "url": "./community-vs-enterprise/#request-a-30-day-enterprise-bundle-trial-licence",
+                "id": "try-enterprise-free-cta",
+                "isFramework": true
+            },
             "isFramework": true,
             "showBackgroundGradient": true
         },
@@ -38,6 +48,12 @@
             "ctaTitle": "Explore Integrated Charts",
             "ctaUrl": "./integrated-charts/",
             "ctaId": "integrated-charting-cta",
+            "secondaryCta": {
+                "title": "Free Trial",
+                "url": "./community-vs-enterprise/#request-a-30-day-enterprise-bundle-trial-licence",
+                "id": "integrated-charting-free-trial-cta",
+                "isFramework": true
+            },
             "isFramework": true,
             "showBackgroundGradient": true
         },

documentation/ag-grid-docs/src/pages-styles/homepage.module.scss

@@ -163,6 +163,9 @@ body {
 .heroLinks {
     position: relative;
     display: flex;
+    // Wraps because the row now carries four CTAs — without it the trial and pricing buttons
+    // push the row past the viewport on narrow screens.
+    flex-wrap: wrap;
     gap: $spacing-size-2;
     align-items: center;
     margin: $spacing-size-4 0 0;

documentation/ag-grid-docs/src/pages/example-finance.astro

@@ -2,6 +2,7 @@
 import styles from '@pages-styles/example.module.scss';
 import DemosLayout from '@components/demos/DemosLayout.astro';
 import DemoTabs from '@components/demos/DemosTabs.astro';
+import { VIDEO_TOUR_TEXT, VIDEO_TOUR_URL } from '@components/demos/demosData';
 import { Icon } from '@ag-website-shared/components/icon/Icon';
 import { Finance } from 'src/components/demos/examples/finance';
 import LogoMark from '@components/logo/LogoMark';
@@ -21,6 +22,10 @@ const content = demoContent('finance');
                     <Icon name="github" svgClasses={styles.githubIcon} />
                     <span>See On GitHub</span>
                 </a>
+                <a class="button-secondary" href={VIDEO_TOUR_URL} target="_blank" rel="noopener noreferrer">
+                    <Icon alt={`Youtube logo`} name="youtube" svgClasses={styles.youtubeIcon} />
+                    <span>{VIDEO_TOUR_TEXT}</span>
+                </a>
                 <a class="button-secondary" href={urlWithBaseUrl('/contact/')}>
                     <span>Contact Us</span>
                 </a>

documentation/ag-grid-docs/src/pages/example-hr.astro

@@ -1,6 +1,7 @@
 ---
 import DemosLayout from '@components/demos/DemosLayout.astro';
 import DemoTabs from '@components/demos/DemosTabs.astro';
+import { VIDEO_TOUR_TEXT, VIDEO_TOUR_URL } from '@components/demos/demosData';
 import styles from '@pages-styles/example.module.scss';
 import { Icon } from '@ag-website-shared/components/icon/Icon';
 import { HR } from '@components/demos/examples/hr';
@@ -21,6 +22,10 @@ const content = demoContent('hr');
                     <Icon name="github" svgClasses={styles.githubIcon} />
                     <span>See On GitHub</span>
                 </a>
+                <a class="button-secondary" href={VIDEO_TOUR_URL} target="_blank" rel="noopener noreferrer">
+                    <Icon alt={`Youtube logo`} name="youtube" svgClasses={styles.youtubeIcon} />
+                    <span>{VIDEO_TOUR_TEXT}</span>
+                </a>
                 <a class="button-secondary" href={urlWithBaseUrl('/contact/')}>
                     <span>Contact Us</span>
                 </a>

documentation/ag-grid-docs/src/pages/example-inventory.astro

@@ -2,6 +2,7 @@
 import styles from '@pages-styles/example.module.scss';
 import DemosLayout from '@components/demos/DemosLayout.astro';
 import DemoTabs from '@components/demos/DemosTabs.astro';
+import { VIDEO_TOUR_TEXT, VIDEO_TOUR_URL } from '@components/demos/demosData';
 import { Icon } from '@ag-website-shared/components/icon/Icon';
 import { Inventory } from '@components/demos/examples/inventory';
 import LogoMark from '@components/logo/LogoMark';
@@ -21,6 +22,10 @@ const content = demoContent('inventory');
                     <Icon name="github" svgClasses={styles.githubIcon} />
                     <span>See On GitHub</span>
                 </a>
+                <a class="button-secondary" href={VIDEO_TOUR_URL} target="_blank" rel="noopener noreferrer">
+                    <Icon alt={`Youtube logo`} name="youtube" svgClasses={styles.youtubeIcon} />
+                    <span>{VIDEO_TOUR_TEXT}</span>
+                </a>
                 <a class="button-secondary" href={urlWithBaseUrl('/contact/')}>
                     <span>Contact Us</span>
                 </a>

documentation/ag-grid-docs/src/pages/example.astro

@@ -4,6 +4,7 @@ import Example from '@components/example-grid/Example';
 import styles from '@pages-styles/example.module.scss';
 import { Icon } from '@ag-website-shared/components/icon/Icon';
 import DemoTabs from '@components/demos/DemosTabs.astro';
+import { VIDEO_TOUR_TEXT, VIDEO_TOUR_URL } from '@components/demos/demosData';
 import LogoMark from '@components/logo/LogoMark';
 import { urlWithBaseUrl } from '@utils/urlWithBaseUrl';
 import { DISABLE_MARKDOWN_DOCS } from '@constants';
@@ -31,14 +32,9 @@ const markdownUrl = DISABLE_MARKDOWN_DOCS ? undefined : urlWithBaseUrl('/example
                     <Icon name="github" svgClasses={styles.githubIcon} />
                     <span>See On GitHub</span>
                 </a>
-                <a
-                    class="button-secondary"
-                    href="https://youtu.be/bcMvTUVbMvI"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                >
+                <a class="button-secondary" href={VIDEO_TOUR_URL} target="_blank" rel="noopener noreferrer">
                     <Icon alt={`Youtube logo`} name="youtube" svgClasses={styles.youtubeIcon} />
-                    <span>See The Video Tour</span>
+                    <span>{VIDEO_TOUR_TEXT}</span>
                 </a>
                 <a class="button-secondary" href={urlWithBaseUrl('/contact/')}>
                     <span>Contact Us</span>

documentation/ag-grid-docs/src/pages/index.astro

@@ -5,6 +5,7 @@ import styles from '@pages-styles/homepage.module.scss';
 import { Quotes } from '@components/quotes/Quotes';
 import { quotesData } from '@components/quotes/quotesData';
 import { LandingPageFWSelector } from '@ag-website-shared/components/landing-pages/LandingPageFWSelector';
+import { FrameworkCtaLink } from '@components/landing-pages/FrameworkCtaLink';
 import { urlWithBaseUrl } from '@utils/urlWithBaseUrl';
 import { Version } from '@ag-website-shared/components/whats-new/components/Version';
 import { Icon } from '@ag-website-shared/components/icon/Icon';
@@ -163,6 +164,22 @@ const markdownUrl = DISABLE_MARKDOWN_DOCS ? undefined : urlWithBaseUrl('/index.m
             </div>
 
             <div class={styles.heroLinks}>
+                <FrameworkCtaLink
+                    client:load
+                    id="hero-free-trial-cta"
+                    url={hero.freeTrialUrl}
+                    className={`button-tertiary ${styles.heroSectioncta1}`}
+                    withChevron
+                >
+                    {hero.freeTrialText}
+                </FrameworkCtaLink>
+
+                <a
+                    id="hero-buy-now-cta"
+                    class:list={['button-tertiary', styles.heroSectioncta1]}
+                    href={urlWithBaseUrl(hero.buyNowUrl)}>{hero.buyNowText} <Icon name="chevronRight" /></a
+                >
+
                 <a
                     id="demos-cta"
                     class:list={[

documentation/ag-grid-docs/src/pages/sitemap.astro

@@ -4,13 +4,14 @@ import parseSitemap from '@ag-website-shared/components/sitemap/utils/sitemaputi
 import { getSitemapXml } from '@ag-website-shared/utils/getSitemapXml';
 import Layout from '../layouts/Layout.astro';
 import { LIVE_SITEMAP_URL, PRODUCTION_GRID_SITE_URL } from '@constants';
-import { SITEMAP_CACHE_DIR } from '@ag-website-shared/constants';
+import { SITEMAP_BUILD_DIR, SITEMAP_CACHE_DIR } from '@ag-website-shared/constants';
 import { STATIC_PAGE_CONTENT } from '@utils/markdown-pages/staticPageContent';
 
 const sitemapUrl = LIVE_SITEMAP_URL || `${PRODUCTION_GRID_SITE_URL}/sitemap-0.xml`;
 const xmlSitemap = await getSitemapXml({
     cacheDir: SITEMAP_CACHE_DIR,
     sitemapUrl,
+    recordDir: SITEMAP_BUILD_DIR,
 });
 const parsedSitemap = parseSitemap(xmlSitemap);
 

documentation/ag-grid-docs/src/pages/sitemap.md.ts

@@ -1,5 +1,5 @@
 import parseSitemap from '@ag-website-shared/components/sitemap/utils/sitemaputils';
-import { SITEMAP_CACHE_DIR } from '@ag-website-shared/constants';
+import { SITEMAP_BUILD_DIR, SITEMAP_CACHE_DIR } from '@ag-website-shared/constants';
 import { getSitemapXml } from '@ag-website-shared/utils/getSitemapXml';
 import { DISABLE_MARKDOWN_DOCS, LIVE_SITEMAP_URL, PRODUCTION_GRID_SITE_URL } from '@constants';
 import { STATIC_PAGE_CONTENT } from '@utils/markdown-pages/staticPageContent';
@@ -13,7 +13,11 @@ export async function GET() {
     }
 
     const sitemapUrl = LIVE_SITEMAP_URL || `${PRODUCTION_GRID_SITE_URL}/sitemap-0.xml`;
-    const xmlSitemap = await getSitemapXml({ cacheDir: SITEMAP_CACHE_DIR, sitemapUrl });
+    const xmlSitemap = await getSitemapXml({
+        cacheDir: SITEMAP_CACHE_DIR,
+        sitemapUrl,
+        recordDir: SITEMAP_BUILD_DIR,
+    });
     const parsedSitemap = parseSitemap(xmlSitemap);
 
     const content = STATIC_PAGE_CONTENT.sitemap;

documentation/ag-grid-docs/src/stores/darkmodeStore.ts

@@ -34,8 +34,9 @@ const updateHtml = (darkmode: boolean | undefined) => {
         iframe.contentWindow?.postMessage(darkModeEvent);
     });
 
-    // Send on event on page for charts that are embeded on the page
-    window.dispatchEvent(new CustomEvent('message', { detail: darkModeEvent }));
+    // No `message` CustomEvent on `window` here. A CustomEvent has no `origin`, so a third-party
+    // `message` listener that expects a real postMessage throws on it: reCAPTCHA's api.js parses
+    // `event.origin` as a URL, which breaks the captcha on any page carrying the contact form.
 };
 
 $darkmode.listen(updateHtml);

documentation/ag-grid-docs/src/utils/markdown-pages/buildDemoMarkdown.ts

@@ -1,4 +1,5 @@
 import { toAbsoluteUrl } from '@ag-website-shared/markdoc/toAbsoluteUrl';
+import { VIDEO_TOUR_TEXT, VIDEO_TOUR_URL } from '@components/demos/demosData';
 import { urlWithBaseUrl } from '@utils/urlWithBaseUrl';
 
 import demosData from '../../content/demos/demos.json';
@@ -32,6 +33,7 @@ export function buildDemoMarkdown({ demo, siteRoot }: { demo: DemoName; siteRoot
         [
             `[See on GitHub](${content.githubUrl})`,
             `[View the demo](${toAbsoluteUrl(urlWithBaseUrl(`/example-${demo}/`), siteRoot)})`,
+            `[${VIDEO_TOUR_TEXT}](${VIDEO_TOUR_URL})`,
             `[Contact us](${toAbsoluteUrl(urlWithBaseUrl('/contact/'), siteRoot)})`,
         ].join(' | '),
     ];

documentation/ag-grid-docs/src/utils/markdown-pages/buildExampleMarkdown.test.ts

@@ -27,7 +27,7 @@ describe('buildExampleMarkdown', () => {
     });
 
     it('includes the video and contact resources', () => {
-        expect(output).toContain('[See the video tour](https://youtu.be/bcMvTUVbMvI)');
+        expect(output).toContain('[Video Tour](https://youtu.be/bcMvTUVbMvI)');
         expect(output).toContain('[Contact Us](https://www.ag-grid.com/contact/)');
     });
 

documentation/ag-grid-docs/src/utils/markdown-pages/buildExampleMarkdown.ts

@@ -1,8 +1,5 @@
 import { toAbsoluteUrl } from '@ag-website-shared/markdoc/toAbsoluteUrl';
-import { demoTabs } from '@components/demos/demosData';
-
-// The video-tour link shown on the /example page header (example.astro).
-const VIDEO_TOUR_URL = 'https://youtu.be/bcMvTUVbMvI';
+import { VIDEO_TOUR_TEXT, VIDEO_TOUR_URL, demoTabs } from '@components/demos/demosData';
 
 /**
  * Build the markdown twin of the /example (demo) page. The page is almost entirely a live
@@ -22,7 +19,7 @@ export function buildExampleMarkdown({ siteRoot }: { siteRoot?: string } = {}):
         .join('\n');
 
     const resources = [
-        `- [See the video tour](${VIDEO_TOUR_URL})`,
+        `- [${VIDEO_TOUR_TEXT}](${VIDEO_TOUR_URL})`,
         `- [Contact Us](${toAbsoluteUrl('/contact/', siteRoot)})`,
     ].join('\n');
 

documentation/ag-grid-docs/src/utils/markdown-pages/buildHomepageMarkdown.test.ts

@@ -26,10 +26,22 @@ describe('buildHomepageMarkdown', () => {
 
     it('resolves CTA links absolutely', () => {
         // Framework CTA (./getting-started) and base-url CTA (/theme-builder/) both absolute.
-        expect(output).toMatch(/\[Get Started For Free\]\(https:\/\/www\.ag-grid\.com\/[^)]*getting-started/);
+        expect(output).toMatch(/\[Explore the Docs\]\(https:\/\/www\.ag-grid\.com\/[^)]*getting-started/);
         expect(output).toContain('[Create a Custom Theme](https://www.ag-grid.com/theme-builder/)');
     });
 
+    it('renders the hero trial and pricing CTAs', () => {
+        expect(output).toMatch(
+            /\[Free Trial\]\(https:\/\/www\.ag-grid\.com\/[^)]*community-vs-enterprise\/#request-a-30-day-enterprise-bundle-trial-licence\)/
+        );
+        expect(output).toContain('[Buy Now](https://www.ag-grid.com/license-pricing/)');
+    });
+
+    it('renders a section secondary CTA after its main CTA', () => {
+        expect(output).toMatch(/\[Explore the Docs\]\([^)]*\) \| \[Try Enterprise Free\]\([^)]*\)/);
+        expect(output).toMatch(/\[Explore Integrated Charts\]\([^)]*\) \| \[Free Trial\]\([^)]*\)/);
+    });
+
     it('renders each section eyebrow headline as a kicker above its heading', () => {
         expect(output).toContain('*Unbeatable Speed & Performance*\n\n## The Fastest Data Grid In The World');
         expect(output).toContain('*JavaScript Data Grid FAQs*\n\n## Frequently Asked Questions');