feat(docs): Add Navattic component for embedding Navattic demos (#69118)
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: ian.alton@airbyte.io <ian.alton@airbyte.io>
This commit is contained in:
devin-ai-integration[bot]
committed by
GitHub
GitHub
parent
198a1811e9
commit
4c03019e7e
40
docusaurus/src/components/Navattic.jsx
Normal file
40
docusaurus/src/components/Navattic.jsx
Normal file
@@ -0,0 +1,40 @@
|
||||
export const Navattic = (props) => {
|
||||
const { id, title, paddingBottom, aspectRatio = "16 / 9", height } = props;
|
||||
|
||||
const containerStyle = {
|
||||
position: "relative",
|
||||
marginBottom: "1em",
|
||||
width: "100%",
|
||||
};
|
||||
|
||||
if (height) {
|
||||
containerStyle.height = height;
|
||||
} else if (paddingBottom) {
|
||||
containerStyle.paddingBottom = paddingBottom;
|
||||
containerStyle.height = 0;
|
||||
} else {
|
||||
containerStyle.aspectRatio = aspectRatio;
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={containerStyle}>
|
||||
<iframe
|
||||
src={`https://capture.navattic.com/${id}`}
|
||||
title={title}
|
||||
loading="lazy"
|
||||
allowFullScreen
|
||||
allow="fullscreen"
|
||||
data-navattic-demo-id={id}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
border: "none",
|
||||
colorScheme: "light",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -2,6 +2,7 @@ import React from 'react';
|
||||
import Layout from '@theme/Layout';
|
||||
import styles from './index.module.css';
|
||||
import { Arcade } from '../components/Arcade';
|
||||
import { Navattic } from '../components/Navattic';
|
||||
|
||||
export default function Home() {
|
||||
const PlatformIcon = () => (
|
||||
@@ -129,9 +130,9 @@ export default function Home() {
|
||||
<div className={styles.homePage}>
|
||||
{/* Section 1: Hero with purple background */}
|
||||
<section className={styles.heroSection}>
|
||||
<h1 className={styles.heroTitle}>Airbyte documentation</h1>
|
||||
<div className={styles.heroContainer}>
|
||||
<div className={styles.heroLeft}>
|
||||
<h1 className={styles.heroTitle}>Airbyte documentation</h1>
|
||||
<p className={styles.heroDescription}>
|
||||
Airbyte is an open source data integration and activation platform.
|
||||
It helps you consolidate data from hundreds of sources into your data
|
||||
@@ -141,11 +142,207 @@ export default function Home() {
|
||||
</p>
|
||||
</div>
|
||||
<div className={styles.heroRight}>
|
||||
<Arcade
|
||||
id="8UUaeQOILatZ38Rjh8cs"
|
||||
title="Airbyte Demo: Get Started Creating Connections"
|
||||
paddingBottom="calc(61.416666666666664% + 41px)"
|
||||
/>
|
||||
<div className={styles.popularConnectors}>
|
||||
<h3 className={styles.popularTitle}>Popular sources</h3>
|
||||
<div className={styles.connectorButtons}>
|
||||
<a
|
||||
href="/integrations/sources/postgres"
|
||||
className={styles.connectorButton}
|
||||
aria-label="Postgres"
|
||||
title="Postgres"
|
||||
>
|
||||
<img
|
||||
src="https://connectors.airbyte.com/files/metadata/airbyte/source-postgres/latest/icon.svg"
|
||||
alt="Postgres"
|
||||
className={styles.connectorIcon}
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="/integrations/sources/facebook-marketing"
|
||||
className={styles.connectorButton}
|
||||
aria-label="Facebook Marketing"
|
||||
title="Facebook Marketing"
|
||||
>
|
||||
<img
|
||||
src="https://connectors.airbyte.com/files/metadata/airbyte/source-facebook-marketing/latest/icon.svg"
|
||||
alt="Facebook Marketing"
|
||||
className={styles.connectorIcon}
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="/integrations/sources/salesforce"
|
||||
className={styles.connectorButton}
|
||||
aria-label="Salesforce"
|
||||
title="Salesforce"
|
||||
>
|
||||
<img
|
||||
src="https://connectors.airbyte.com/files/metadata/airbyte/source-salesforce/latest/icon.svg"
|
||||
alt="Salesforce"
|
||||
className={styles.connectorIcon}
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="/integrations/sources/mysql"
|
||||
className={styles.connectorButton}
|
||||
aria-label="MySQL"
|
||||
title="MySQL"
|
||||
>
|
||||
<img
|
||||
src="https://connectors.airbyte.com/files/metadata/airbyte/source-mysql/latest/icon.svg"
|
||||
alt="MySQL"
|
||||
className={styles.connectorIcon}
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="/integrations/sources/google-sheets"
|
||||
className={styles.connectorButton}
|
||||
aria-label="Google Sheets"
|
||||
title="Google Sheets"
|
||||
>
|
||||
<img
|
||||
src="https://connectors.airbyte.com/files/metadata/airbyte/source-google-sheets/latest/icon.svg"
|
||||
alt="Google Sheets"
|
||||
className={styles.connectorIcon}
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="/integrations/sources/linkedin-ads"
|
||||
className={styles.connectorButton}
|
||||
aria-label="LinkedIn Ads"
|
||||
title="LinkedIn Ads"
|
||||
>
|
||||
<img
|
||||
src="https://connectors.airbyte.com/files/metadata/airbyte/source-linkedin-ads/latest/icon.svg"
|
||||
alt="LinkedIn Ads"
|
||||
className={styles.connectorIcon}
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="/integrations/sources/mssql"
|
||||
className={styles.connectorButton}
|
||||
aria-label="MSSQL"
|
||||
title="MSSQL"
|
||||
>
|
||||
<img
|
||||
src="https://connectors.airbyte.com/files/metadata/airbyte/source-mssql/latest/icon.svg"
|
||||
alt="MSSQL"
|
||||
className={styles.connectorIcon}
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="/integrations/sources/s3"
|
||||
className={styles.connectorButton}
|
||||
aria-label="S3"
|
||||
title="S3"
|
||||
>
|
||||
<img
|
||||
src="https://connectors.airbyte.com/files/metadata/airbyte/source-s3/latest/icon.svg"
|
||||
alt="S3"
|
||||
className={styles.connectorIcon}
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h3 className={styles.popularTitle}>Popular destinations</h3>
|
||||
<div className={styles.connectorButtons}>
|
||||
<a
|
||||
href="/integrations/destinations/s3"
|
||||
className={styles.connectorButton}
|
||||
aria-label="S3"
|
||||
title="S3"
|
||||
>
|
||||
<img
|
||||
src="https://connectors.airbyte.com/files/metadata/airbyte/destination-s3/latest/icon.svg"
|
||||
alt="S3"
|
||||
className={styles.connectorIcon}
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="/integrations/destinations/postgres"
|
||||
className={styles.connectorButton}
|
||||
aria-label="Postgres"
|
||||
title="Postgres"
|
||||
>
|
||||
<img
|
||||
src="https://connectors.airbyte.com/files/metadata/airbyte/destination-postgres/latest/icon.svg"
|
||||
alt="Postgres"
|
||||
className={styles.connectorIcon}
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="/integrations/destinations/snowflake"
|
||||
className={styles.connectorButton}
|
||||
aria-label="Snowflake"
|
||||
title="Snowflake"
|
||||
>
|
||||
<img
|
||||
src="https://connectors.airbyte.com/files/metadata/airbyte/destination-snowflake/latest/icon.svg"
|
||||
alt="Snowflake"
|
||||
className={styles.connectorIcon}
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="/integrations/destinations/bigquery"
|
||||
className={styles.connectorButton}
|
||||
aria-label="BigQuery"
|
||||
title="BigQuery"
|
||||
>
|
||||
<img
|
||||
src="https://connectors.airbyte.com/files/metadata/airbyte/destination-bigquery/latest/icon.svg"
|
||||
alt="BigQuery"
|
||||
className={styles.connectorIcon}
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="/integrations/destinations/databricks"
|
||||
className={styles.connectorButton}
|
||||
aria-label="Databricks"
|
||||
title="Databricks"
|
||||
>
|
||||
<img
|
||||
src="https://connectors.airbyte.com/files/metadata/airbyte/destination-databricks/latest/icon.svg"
|
||||
alt="Databricks"
|
||||
className={styles.connectorIcon}
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="/integrations/destinations/s3-data-lake"
|
||||
className={styles.connectorButton}
|
||||
aria-label="S3 Data Lake"
|
||||
title="S3 Data Lake"
|
||||
>
|
||||
<img
|
||||
src="https://connectors.airbyte.com/files/metadata/airbyte/destination-s3-data-lake/latest/icon.svg"
|
||||
alt="S3 Data Lake"
|
||||
className={styles.connectorIcon}
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="/integrations/destinations/clickhouse"
|
||||
className={styles.connectorButton}
|
||||
aria-label="ClickHouse"
|
||||
title="ClickHouse"
|
||||
>
|
||||
<img
|
||||
src="https://connectors.airbyte.com/files/metadata/airbyte/destination-clickhouse/latest/icon.svg"
|
||||
alt="ClickHouse"
|
||||
className={styles.connectorIcon}
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="/integrations/destinations/mssql"
|
||||
className={styles.connectorButton}
|
||||
aria-label="MSSQL"
|
||||
title="MSSQL"
|
||||
>
|
||||
<img
|
||||
src="https://connectors.airbyte.com/files/metadata/airbyte/destination-mssql/latest/icon.svg"
|
||||
alt="MSSQL"
|
||||
className={styles.connectorIcon}
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -172,6 +369,16 @@ export default function Home() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 3: Interactive Demo */}
|
||||
<section className={styles.navSection}>
|
||||
<div className={styles.badgesContainer}>
|
||||
<Navattic
|
||||
id="cmhfnvz6w000004jrbwla348h"
|
||||
title="Airbyte Interactive Product Tour"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* GitHub Badges */}
|
||||
<section className={styles.badgesSection}>
|
||||
<div className={styles.badgesContainer}>
|
||||
|
||||
@@ -34,7 +34,12 @@
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1.5rem;
|
||||
margin-top:3rem;
|
||||
color: white;
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
.heroDescription {
|
||||
@@ -46,7 +51,55 @@
|
||||
}
|
||||
|
||||
.heroRight {
|
||||
/* Arcade component will render here */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.popularConnectors {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.popularTitle {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.connectorButtons {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 2rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.connectorButton {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
padding: 0.5rem;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--ifm-color-primary-lightest);
|
||||
background: var(--color-grey-40);
|
||||
transition: all 0.2s ease-out;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.connectorButton:hover {
|
||||
background: var(--color-grey-40);
|
||||
border-color: var(--ifm-color-primary);
|
||||
box-shadow: 0 4px 12px rgba(97, 94, 255, 0.15);
|
||||
transform: translateY(-2px);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.connectorIcon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* Section 2: Navigation Links */
|
||||
|
||||
@@ -4,6 +4,7 @@ import { Arcade } from "@site/src/components/Arcade";
|
||||
import { FieldAnchor } from "@site/src/components/FieldAnchor";
|
||||
import { HeaderDecoration } from "@site/src/components/HeaderDecoration";
|
||||
import { HideInUI } from "@site/src/components/HideInUI";
|
||||
import { Navattic } from "@site/src/components/Navattic";
|
||||
import { ProductInformation } from "@site/src/components/ProductInformation";
|
||||
import { PyAirbyteExample } from "@site/src/components/PyAirbyteExample";
|
||||
import { SpecSchema } from "@site/src/components/SpecSchema";
|
||||
@@ -24,6 +25,7 @@ export default {
|
||||
FieldAnchor,
|
||||
HideInUI,
|
||||
HeaderDecoration,
|
||||
Navattic,
|
||||
SpecSchema,
|
||||
PyAirbyteExample,
|
||||
ProductInformation,
|
||||
|
||||
Reference in New Issue
Block a user