jprdonnelly/airbyte
1
0
Fork 0
mirror of synced 2025-12-19 18:14:56 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(docs): Add Navattic component for embedding Navattic demos (#69118)

Browse Source 
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]
2025-10-31 22:51:43 -07:00
committed by GitHub
parent 198a1811e9
commit 4c03019e7e
11 changed files with 320 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/platform/access-management/rbac.md
View File

@@ -40,8 +40,6 @@ In a workspace role, Airbyte scopes permissions to that specific workspace. You
## Setting roles
<Arcade id="pYZ3aHWlV4kJatJG2dJN" title="Organization Permissions" paddingBottom="calc(61.37931034482759% + 41px)" />
1. In the navigation bar, click **Workspace settings** or **Organization settings** > **Members**.
2. In the table, under **Workspace role**, click the current role and then select a new role.

2
docs/platform/cloud/managing-airbyte-cloud/review-connection-status.md
View File

@@ -22,7 +22,7 @@ To access the connection dashboard:
Here's an example of how you can put this dashboard to work.
<Arcade id="u3EEEqQoPRA4aoAAFFLO" title="Connection page dashboard" paddingBottom="calc(60% + 41px)" />
<Navattic id="cmhfdqt0c000204jne5j4hmbd" />
## Review one connection's status

12
docs/platform/connector-development/connector-builder-ui/tutorial.mdx
View File

@@ -47,7 +47,7 @@ You need access to Airbyte, if you don't already have it. Do one of the followin
### Create a Connector Builder project
<Arcade id="pHZZYzww0smsCHN9wuuS" title="Use the Connection Dashboard to diagnose unhealthy syncs" paddingBottom="calc(50% + 0px)" />
<Navattic id="cmhfio6ec000004l80ac69w3k" />
When developing a connector using the Connector Builder UI, Airbyte saves the current state of your work as a connector builder project. These projects are saved as part of your Airbyte workspace and are separate from your sources, destinations, and connections.
@@ -63,9 +63,9 @@ When developing a connector using the Connector Builder UI, Airbyte saves the cu
Your connector builder project is now set up.
### Setting up Global Configuration and Inputs
### Set up global configuration and inputs
<Arcade id="YkuAGpCNlYucNB2Lp4NG" title="Use the Connection Dashboard to diagnose unhealthy syncs" paddingBottom="calc(50% + 0px)" />
<Navattic id="cmhfjhphb000304jl6baicl3x" />
On the **Global Configuration** page, you set up general settings applying to all streams: which streams to test when running a [check](/platform/understanding-airbyte/airbyte-protocol#check) operation, concurrency levels, and API budgets for manage rate limiting. For now, you don't have any global configurations to make.
@@ -89,9 +89,9 @@ On the **Inputs** page, you manage inputs that users of your connector have to f
5. Enter your API key for testing purposes. This API Key is not part of the connector itself. Instead, users of your connector will enter their own API key as part of the source configuration.
### Setting up and testing a stream
### Set up and test a stream
<Arcade id="phfYAWDplEnaU1eEV7p9" title="Use the Connection Dashboard to diagnose unhealthy syncs" paddingBottom="calc(50% + 0px)" />
<Navattic id="cmhfk2pl9002i04l20e5t1zzd" />
Set up a new stream and tell your connector how to retrieve records from this source.
@@ -148,7 +148,7 @@ In this step, you'll enhance your connector to accept more user inputs and retur
### Make the base currency configurable
<Arcade id="XLt48Lyju0wJhZZaa6wU" title="Use the Connection Dashboard to diagnose unhealthy syncs" paddingBottom="calc(50% + 0px)" />
<Navattic id="cmhfkxu4n007304jo95p08xyh" />
The Exchange Rates API allows you to configure a different base currency using a query parameter. Make that a user input so anyone using this connector can input their preferred currency, the same as their API key.

4
docs/platform/managing-airbyte/connector-updates.md
View File

@@ -26,8 +26,6 @@ A connector reaching version 1.0 is considered mature and comes with semver guar
Each connector's changelog details its update history. You can find it in the [connector catalog](/integrations/) at the end of each individual connector's entry.
<Arcade id="vMZISMWeitH8X7kT1ArF" title="Review a Connector Changelog" paddingBottom="calc(61.37931034482759% + 41px)" />
## How Airbyte Handles Connector Updates
### Cloud plans
@@ -49,8 +47,6 @@ Airbyte recommends using the latest version of Airbyte when updating connections
2. While there is an option available to upgrade all connections at once, we recommend that you accept the update for each individual connection using the affected connector. This allows you to review and potentially adjust the connection settings before applying the update.
<Arcade id="WfelDcLx6EivqngiTlFR" title="Settings > Connector Upgrade Prompts" paddingBottom="calc(61.37931034482759% + 41px)" />
When new major versions are released, we recommended you update promptly to avoid potential compatibility issues.
## Actions to Take in Response to Connector Updates

2
docs/platform/move-data/add-connection.md
View File

@@ -22,6 +22,8 @@ The unique needs of a destination account for why setting up some connections is
## Create an ELT connection
<Navattic id="cmhfholey000504ic07qla001" />
Follow these steps to create a connection to a database, warehouse, lake, or similar type of destination.
1. Click **Connections** in the navigation.

2
docs/platform/using-airbyte/getting-started/add-a-destination.md
View File

@@ -23,7 +23,7 @@ Add a new destination connector to Airbyte.
5. Click **Set up destination**. Airbyte tests the destination to ensure it can make a connection. Once the test completes, Airbyte takes you to that connector's Connections page, which is empty at this point.
<Arcade id="qeqpYHmsne7855bFou5Z" title="Set up a new source" paddingBottom="calc(50%)" />
<Navattic id="cmhfhih81000204la4795erqd" />
## Modify a destination connector

2
docs/platform/using-airbyte/getting-started/add-a-source.md
View File

@@ -20,7 +20,7 @@ Add a new source connector to Airbyte.
5. Click **Set up source**. Airbyte tests the source to ensure it can make a connection. Once the test completes, Airbyte takes you to the New Connection page, where you can set up a new destination connector, or choose one you previously created.
<Arcade id="MOZ8NhasIpvf6M9Xkpna" title="Set up a new source" paddingBottom="calc(50%)" />
<Navattic id="cmhfh6qf4000004kz0e7sa8a5" />
## Modify a source connector

40
docusaurus/src/components/Navattic.jsx Normal file
View 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>
);
};

217
docusaurus/src/pages/index.js
View File

@@ -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}>

55
docusaurus/src/pages/index.module.css
View File

@@ -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 */

2
docusaurus/src/theme/MDXComponents/index.js
View File

@@ -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,