diff --git a/src/components/EtlToolsXvsYPage/Comparison/RelatedComparisonLinks/index.tsx b/src/components/EtlToolsXvsYPage/Comparison/RelatedComparisonLinks/index.tsx
new file mode 100644
index 00000000..145d25da
--- /dev/null
+++ b/src/components/EtlToolsXvsYPage/Comparison/RelatedComparisonLinks/index.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Link } from 'gatsby';
+import { getComparisonSlug, Vendor } from '../../../../../shared';
+import { container } from './styles.module.less';
+
+interface RelatedComparisonLinksProps {
+ vendors: Partial[];
+ excludeVendorIds: string[];
+ baseVendor: Vendor;
+}
+
+const RelatedComparisonLinks = ({
+ vendors,
+ excludeVendorIds,
+ baseVendor,
+}: RelatedComparisonLinksProps) => {
+ return (
+
+ {vendors
+ .filter(
+ (vendor) =>
+ vendor.id && !excludeVendorIds.includes(vendor.id)
+ )
+ .map((vendor) =>
+ vendor.slugKey ? (
+
+ {baseVendor.name} vs {vendor.name}
+
+ ) : null
+ )}
+
+ );
+};
+
+export default RelatedComparisonLinks;
diff --git a/src/components/EtlToolsXvsYPage/Comparison/RelatedComparisonLinks/styles.module.less b/src/components/EtlToolsXvsYPage/Comparison/RelatedComparisonLinks/styles.module.less
new file mode 100644
index 00000000..de0f832a
--- /dev/null
+++ b/src/components/EtlToolsXvsYPage/Comparison/RelatedComparisonLinks/styles.module.less
@@ -0,0 +1,19 @@
+.container {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+ margin-top: 20px;
+ row-gap: 8px;
+ column-gap: 24px;
+
+ a {
+ color: var(--blue);
+ font-weight: 500;
+ width: fit-content;
+
+ &:hover {
+ color: var(--blue);
+ text-underline-offset: 4px;
+ text-decoration: underline;
+ }
+ }
+}
diff --git a/src/components/EtlToolsXvsYPage/Comparison/index.tsx b/src/components/EtlToolsXvsYPage/Comparison/index.tsx
index a84423f7..8bde87ee 100644
--- a/src/components/EtlToolsXvsYPage/Comparison/index.tsx
+++ b/src/components/EtlToolsXvsYPage/Comparison/index.tsx
@@ -18,29 +18,49 @@ import Support from './Support';
import Cost from './Cost';
import VendorAvatar from './VendorAvatar';
import IntroductoryDetails from './IntroductoryDetails';
+import RelatedComparisonLinks from './RelatedComparisonLinks';
interface SectionTwoProps {
xVendor: Vendor;
yVendor: Vendor;
estuaryVendor: Vendor;
+ allVendors: Partial[];
}
-const articleBody = {
+const generateVendorRelatedComparisonsObject = (
+ vendorKey: string,
+ vendorName: string
+) => ({
+ id: `${vendorKey}-related-comparisons`,
+ heading: `Related comparisons to ${vendorName}`,
+});
+
+const articleBody = (
+ xVendorName: string,
+ yVendorName: string,
+ estuaryVendorName: string | null
+) => ({
intro: {
id: 'intro',
heading: 'Introduction',
},
comparisonMatrix: {
id: 'comparison-matrix',
- heading: 'Comparison Matrix',
+ heading: `Comparison Matrix: ${xVendorName} vs ${yVendorName}${estuaryVendorName ? ` vs ${estuaryVendorName}` : ''}`,
},
howToChoose: {
id: 'how-to-choose',
heading: 'How to choose the best option',
},
-};
-
-const { intro, comparisonMatrix, howToChoose } = articleBody;
+ xVendorRelatedComparisons: generateVendorRelatedComparisonsObject(
+ 'x-vendor',
+ xVendorName
+ ),
+ yVendorRelatedComparisons: generateVendorRelatedComparisonsObject(
+ 'y-vendor',
+ yVendorName
+ ),
+});
const tableBodyComponents = [
UseCases,
@@ -53,11 +73,37 @@ const tableBodyComponents = [
Cost,
];
-const Comparison = ({ xVendor, yVendor, estuaryVendor }: SectionTwoProps) => {
+const Comparison = ({
+ xVendor,
+ yVendor,
+ estuaryVendor,
+ allVendors,
+}: SectionTwoProps) => {
const isThreeVendorComparison = useMemo(() => {
return ![xVendor.id, yVendor.id].includes(estuaryVendor.id);
}, [xVendor.id, yVendor.id, estuaryVendor.id]);
+ const excludeVendorIds = useMemo(
+ () => [xVendor.id, yVendor.id],
+ [xVendor.id, yVendor.id]
+ );
+
+ const {
+ intro,
+ comparisonMatrix,
+ howToChoose,
+ xVendorRelatedComparisons,
+ yVendorRelatedComparisons,
+ } = useMemo(
+ () =>
+ articleBody(
+ xVendor.name,
+ yVendor.name,
+ isThreeVendorComparison ? estuaryVendor.name : null
+ ),
+ [xVendor.name, yVendor.name, isThreeVendorComparison, estuaryVendor]
+ );
+
const stickyRef1 = useRef(null);
const stickyRef2 = useRef(null);
const stickyRef3 = useRef(null);
@@ -82,19 +128,37 @@ const Comparison = ({ xVendor, yVendor, estuaryVendor }: SectionTwoProps) => {
],
});
- const vendors = [xVendor, yVendor].map(createVendorItem);
+ const comparedVendors = [xVendor, yVendor].map(createVendorItem);
if (isThreeVendorComparison) {
- vendors.unshift(createVendorItem(estuaryVendor));
+ comparedVendors.unshift(createVendorItem(estuaryVendor));
}
return [
{ id: intro.id, heading: intro.heading },
{ id: comparisonMatrix.id, heading: comparisonMatrix.heading },
- ...vendors,
+ ...comparedVendors,
{ id: howToChoose.id, heading: howToChoose.heading },
+ {
+ id: xVendorRelatedComparisons.id,
+ heading: xVendorRelatedComparisons.heading,
+ },
+ {
+ id: yVendorRelatedComparisons.id,
+ heading: yVendorRelatedComparisons.heading,
+ },
];
- }, [xVendor, yVendor, estuaryVendor, isThreeVendorComparison]);
+ }, [
+ xVendor,
+ yVendor,
+ estuaryVendor,
+ isThreeVendorComparison,
+ intro,
+ comparisonMatrix,
+ howToChoose,
+ xVendorRelatedComparisons,
+ yVendorRelatedComparisons,
+ ]);
useEffect(() => {
const handleScroll = () => {
@@ -256,6 +320,24 @@ const Comparison = ({ xVendor, yVendor, estuaryVendor }: SectionTwoProps) => {
needs, and use this information to a good short-term and
long-term solution for you.
+
+
+
+
+
+
diff --git a/src/templates/etl-tools/index.tsx b/src/templates/etl-tools/index.tsx
index edcd78d1..a74a11a2 100644
--- a/src/templates/etl-tools/index.tsx
+++ b/src/templates/etl-tools/index.tsx
@@ -33,6 +33,11 @@ const EtlTools = ({
xVendor={xVendor}
yVendor={yVendor}
estuaryVendor={estuaryVendor}
+ allVendors={vendors.map((vendor) => ({
+ id: vendor.id,
+ name: vendor.name,
+ slugKey: vendor.slugKey,
+ }))}
/>