Merge remote-tracking branch 'origin/master' into travjenkins/bug/imp…

…rove-gatsby-image-perf

.eslintignore

@@ -1,3 +1,5 @@
 node_modules
 dist
 public
+plugins
+patches

.prettierignore

@@ -2,4 +2,5 @@
 package.json
 package-lock.json
 public
-plugins
+plugins
+patches

gatsby-config.ts

@@ -154,7 +154,6 @@ const cfg: GatsbyConfig = {
         'gatsby-transformer-inline-svg',
         'gatsby-plugin-image',
         // `gatsby-plugin-svgr-svgo`,
-        'gatsby-plugin-less',
         {
             resolve: 'gatsby-transformer-rehype',
             options: {

src/components/Product/Advantages/index.tsx → src/components/Advantages/index.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { OutboundLinkFilled } from '../../OutboundLink';
+import { OutboundLinkFilled } from '../OutboundLink';
 import Advantage from './Advantage';
 import {
     AdvantagesList,
@@ -14,11 +14,11 @@ import {
 
 type AdvantagesProps = {
     icon: ReactNode;
-    image: ReactNode;
+    image?: ReactNode;
     title: ReactNode;
     subtitle?: string;
-    advantages: {
-        id: number;
+    advantages?: {
+        id?: number;
         title: ReactNode;
     }[];
     link?: {
@@ -47,15 +47,17 @@ const Advantages = ({
                 {subtitle ? (
                     <Subtitle $isDarkTheme={isDarkTheme}>{subtitle}</Subtitle>
                 ) : null}
-                <AdvantagesList>
-                    {advantages.map((advantage) => (
-                        <Advantage
-                            key={`product-page-advantage-${advantage.id}`}
-                            title={advantage.title}
-                            isDarkTheme={isDarkTheme}
-                        />
-                    ))}
-                </AdvantagesList>
+                {advantages ? (
+                    <AdvantagesList>
+                        {advantages.map((advantage, index) => (
+                            <Advantage
+                                key={`estuary-flow-advantage-${advantage.id ?? index}`}
+                                title={advantage.title}
+                                isDarkTheme={isDarkTheme}
+                            />
+                        ))}
+                    </AdvantagesList>
+                ) : null}
                 {link ? (
                     <ButtonWrapper>
                         <OutboundLinkFilled href={link.href} target="_blank">
@@ -64,7 +66,7 @@ const Advantages = ({
                     </ButtonWrapper>
                 ) : null}
             </LeftColumn>
-            <RightColumn>{image}</RightColumn>
+            {image ? <RightColumn>{image}</RightColumn> : null}
         </Container>
     );
 };

src/components/Product/Advantages/styles.ts → src/components/Advantages/styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { globalMaxWidth } from '../../../globalStyles';
+import { globalMaxWidth } from '../../globalStyles';
 
 type Theme = {
     $isDarkTheme: boolean;

src/components/BlogPostToc.tsx

@@ -3,6 +3,7 @@ import { Typography } from '@mui/material';
 import Accordion from '@mui/material/Accordion';
 import AccordionDetails from '@mui/material/AccordionDetails';
 import AccordionSummary from '@mui/material/AccordionSummary';
+import clsx from 'clsx';
 import { Link } from 'gatsby';
 import * as React from 'react';
 
@@ -14,30 +15,30 @@ type TocItem = {
 
 type RenderTocItemProps = {
     item: TocItem;
+    selectKey: string;
+    selectedItem: string | null;
     depth: number;
     handleItemClick: (id: string) => void;
-    isSelected: boolean;
 };
 
 const RenderTocItem = ({
     item,
     depth,
     handleItemClick,
-    isSelected,
+    selectKey,
+    selectedItem,
 }: RenderTocItemProps) => {
-    if (depth > 1) {
-        return null;
-    }
+    const isSelected = selectKey === selectedItem;
 
     const handleLinkClick = (
         event: React.MouseEvent<HTMLAnchorElement, globalThis.MouseEvent>
     ) => {
         if (!isSelected) {
-            handleItemClick(item.id);
+            handleItemClick(selectKey);
         } else {
             event.preventDefault();
             const yOffset = -120;
-            const element = document.getElementById(item.id);
+            const element = document.getElementById(selectKey);
             if (element) {
                 const y =
                     element.getBoundingClientRect().top +
@@ -48,21 +49,58 @@ const RenderTocItem = ({
         }
     };
 
+    const renderedItems = React.useMemo(
+        () =>
+            item.items && item.items.length > 0 ? (
+                <ol role="list" style={{ padding: 0 }}>
+                    {item.items.map((nestedItem) => (
+                        <RenderTocItem
+                            key={nestedItem.id}
+                            selectKey={nestedItem.id}
+                            item={nestedItem}
+                            depth={depth + 1}
+                            handleItemClick={handleItemClick}
+                            selectedItem={selectedItem}
+                        />
+                    ))}
+                </ol>
+            ) : null,
+        [depth, handleItemClick, item.items, selectedItem]
+    );
+
+    if (depth > 1) {
+        return null;
+    }
+
     return (
-        <li
-            style={{
-                fontWeight: isSelected ? 'bold' : 'normal',
-                color: isSelected ? '#47506d' : '#989daf',
-            }}
-        >
-            <div className="before-item" />
-            <Link to={`#${item.id}`} onClick={handleLinkClick}>
+        <li className={clsx('tocItem', isSelected && 'isItemSelected')}>
+            <span className="before-item" />
+            <Link to={`#${selectKey}`} onClick={handleLinkClick}>
                 {item.heading}
             </Link>
+            {renderedItems}
         </li>
     );
 };
 
+const observeItems = (
+    items: TocItem[],
+    observer: IntersectionObserver,
+    depth: number = 0
+) => {
+    items.forEach((item) => {
+        if (depth <= 1) {
+            const element = document.getElementById(item.id);
+            if (element) {
+                observer.observe(element);
+            }
+        }
+        if (item.items) {
+            observeItems(item.items, observer, depth + 1);
+        }
+    });
+};
+
 export const RenderToc = ({ items }: { items: TocItem[] }) => {
     const [selectedItem, setSelectedItem] = React.useState<string | null>(null);
     const intersectionObserver = React.useRef<IntersectionObserver | null>(
@@ -73,7 +111,7 @@ export const RenderToc = ({ items }: { items: TocItem[] }) => {
     React.useEffect(() => {
         intersectionObserver.current = new IntersectionObserver(
             (entries) => {
-                let lastVisibleId;
+                let lastVisibleId: string | undefined;
                 entries.forEach((entry) => {
                     if (
                         entry.isIntersecting &&
@@ -89,12 +127,7 @@ export const RenderToc = ({ items }: { items: TocItem[] }) => {
             { threshold: 0.5 }
         );
 
-        items.forEach((item) => {
-            const element = document.getElementById(item.id);
-            if (element) {
-                intersectionObserver.current?.observe(element);
-            }
-        });
+        observeItems(items, intersectionObserver.current);
 
         return () => {
             if (intersectionObserver.current) {
@@ -122,9 +155,24 @@ export const RenderToc = ({ items }: { items: TocItem[] }) => {
         }, 10);
     };
 
+    const renderedItems = React.useMemo(
+        () =>
+            items.map((item) => (
+                <RenderTocItem
+                    key={item.id}
+                    selectKey={item.id}
+                    item={item}
+                    depth={0}
+                    handleItemClick={handleItemClick}
+                    selectedItem={selectedItem}
+                />
+            )),
+        [items, selectedItem]
+    );
+
     return (
         <div className="table-of-contents">
-            <Accordion elevation={0} className="accordion">
+            <Accordion elevation={0} className="accordion" defaultExpanded>
                 <AccordionSummary
                     className="accordion-side-padding"
                     expandIcon={
@@ -134,21 +182,11 @@ export const RenderToc = ({ items }: { items: TocItem[] }) => {
                     }
                 >
                     <Typography className="accordion-title">
-                        In this article
+                        Table of Contents
                     </Typography>
                 </AccordionSummary>
                 <AccordionDetails className="accordion-side-padding">
-                    <ul>
-                        {items.map((item) => (
-                            <RenderTocItem
-                                key={item.id}
-                                item={item}
-                                depth={0}
-                                handleItemClick={handleItemClick}
-                                isSelected={item.id === selectedItem}
-                            />
-                        ))}
-                    </ul>
+                    <ul role="list">{renderedItems}</ul>
                 </AccordionDetails>
             </Accordion>
         </div>