airbyte-lib: Connector documentation

docusaurus/docusaurus.config.js

@@ -11,6 +11,7 @@ const darkCodeTheme = themes.dracula;
 
 const docsHeaderDecoration = require("./src/remark/docsHeaderDecoration");
 const productInformation = require("./src/remark/productInformation");
+const specDecoration = require("./src/remark/specDecoration");
 
 const redirects = yaml.load(
   fs.readFileSync(path.join(__dirname, "redirects.yml"), "utf-8")
@@ -89,7 +90,7 @@ const config = {
           editUrl: "https://github.com/airbytehq/airbyte/blob/master/docs",
           path: "../docs",
           exclude: ["**/*.inapp.md"],
-          remarkPlugins: [docsHeaderDecoration, productInformation],
+          remarkPlugins: [docsHeaderDecoration, productInformation, specDecoration],
         },
         blog: false,
         theme: {

docusaurus/package.json

@@ -90,6 +90,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@headlessui/react": "^1.7.18",
     "@mdx-js/react": "^3.0.0",
     "async": "2.6.4",
     "autoprefixer": "10.4.16",
@@ -105,6 +106,7 @@
     "docusaurus-plugin-hubspot": "^1.0.0",
     "docusaurus-plugin-segment": "^1.0.3",
     "js-yaml": "^4.1.0",
+    "json-schema-faker": "^0.5.4",
     "node-fetch": "^3.3.2",
     "nth-check": "2.0.1",
     "postcss-convert-values": "6.0.1",
@@ -121,6 +123,7 @@
     "react-dom": "^18.2.0",
     "react-markdown": "^8.0.7",
     "react-router": "5.3.3",
+    "sanitize-html": "^2.11.0",
     "sockjs": "0.3.24",
     "trim": "0.0.3",
     "unist-builder": "^4.0.0",

docusaurus/src/components/AirbyteLibExample.jsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { JSONSchemaFaker } from "json-schema-faker";
+import CodeBlock from '@theme/CodeBlock';
+
+
+export const AirbyteLibExample = ({
+  specJSON,
+  connector
+}) => {
+  const spec = JSON.parse(specJSON);
+  const fakeConfig = JSONSchemaFaker.generate(spec);
+  return <>
+    <p>
+      Install the Python library via:
+    </p>
+    <CodeBlock
+        language="bash">{"pip install airbyte-lib"}</CodeBlock>
+    <p>Then, execute a sync by loading the connector like this:</p>
+    <CodeBlock
+      language="python"
+    >{`import airbyte_lib as ab
+
+config = ${JSON.stringify(fakeConfig, null, 2)}
+
+result = ab.get_connector(
+    "${connector}",
+    config=config,
+).read_all()
+
+for record in result.cache.streams["my_stream:name"]:
+  print(record)`} </CodeBlock>
+    <p>You can find more information in the airbyte_lib quickstart guide.</p>
+  </>;
+};

docusaurus/src/components/HeaderDecoration.jsx

@@ -27,6 +27,7 @@ const CROSS_ICON = (
 export const HeaderDecoration = ({
   isOss: isOssString,
   isCloud: isCloudString,
+  isPypiPublished: isPypiPublishedString,
   dockerImageTag,
   supportLevel,
   iconUrl,
@@ -36,6 +37,7 @@ export const HeaderDecoration = ({
 }) => {
   const isOss = isOssString.toUpperCase() === "TRUE";
   const isCloud = isCloudString.toUpperCase() === "TRUE";
+  const isPypiPublished = isPypiPublishedString.toUpperCase() === "TRUE";
 
   return (
     <>
@@ -49,6 +51,7 @@ export const HeaderDecoration = ({
             <span className={isOss ? styles.available : styles.unavailable}>
               {isOss ? CHECK_ICON : CROSS_ICON} Airbyte OSS
             </span>
+            {isPypiPublished && <a href="#usage-with-airbyte-lib" className={styles.available}>{CHECK_ICON} airbyte_lib</a>}
           </dd>
         </div>
         <div>