diff --git a/docusaurus/docusaurus.config.js b/docusaurus/docusaurus.config.js index 2621046e6aaf..396ec4bfe143 100644 --- a/docusaurus/docusaurus.config.js +++ b/docusaurus/docusaurus.config.js @@ -8,6 +8,8 @@ const path = require("node:path"); const lightCodeTheme = require("prism-react-renderer/themes/github"); const darkCodeTheme = require("prism-react-renderer/themes/dracula"); +const docsHeaderDecoration = require("./src/remark/docsHeaderDecoration"); + const redirects = yaml.load( fs.readFileSync(path.join(__dirname, "redirects.yml"), "utf-8") ); @@ -36,7 +38,7 @@ const config = { type: "module", id: "unifytag", "data-api-key": "wk_BEtrdAz2_2qgdexg5KRa6YWLWVwDdieFC7CAHkDKz", - } + }, ], plugins: [ @@ -78,6 +80,7 @@ const config = { editUrl: "https://github.com/airbytehq/airbyte/blob/master/docs", path: "../docs", exclude: ["**/*.inapp.md"], + remarkPlugins: [docsHeaderDecoration], }, blog: false, theme: { diff --git a/docusaurus/src/remark/docsHeaderDecoration.js b/docusaurus/src/remark/docsHeaderDecoration.js new file mode 100644 index 000000000000..1530d6473253 --- /dev/null +++ b/docusaurus/src/remark/docsHeaderDecoration.js @@ -0,0 +1,111 @@ +const fetch = require("node-fetch"); +const visit = require("unist-util-visit"); + +const registry_url = + "https://connectors.airbyte.com/files/generated_reports/connector_registry_report.json"; +let registry = []; + +const plugin = () => { + let registryFetcher = fetchCatalog(); + + const transformer = async (ast, vfile) => { + if (!isDocsPage(vfile)) return; + + const pathParts = vfile.path.split("/"); + const connectorName = pathParts.pop().split(".")[0]; + const connectorType = pathParts.pop(); + const dockerRepository = `airbyte/${connectorType.replace( + /s$/, + "" + )}-${connectorName}`; + + await Promise.resolve(registryFetcher); + + const registryEntry = registry.find( + (r) => r.dockerRepository_oss === dockerRepository + ); + + if (!registryEntry) return; + + let originalTitle = ""; + let originalId = ""; + + visit(ast, "heading", (node) => { + if (node.depth === 1 && node.children.length === 1) { + originalTitle = node.children[0].value; + originalId = node.data.hProperties.id; + + node.type = "html"; + node.children = undefined; + node.value = buildConnectorHTMLContent( + registryEntry, + originalTitle, + originalId + ); + } + }); + }; + return transformer; +}; + +const fetchCatalog = async () => { + console.log("Fetching connector registry..."); + const response = await fetch(registry_url); + registry = await response.json(); + console.log(`fetched ${registry.length} connectors form registry`); +}; + +const buildConnectorHTMLContent = ( + registryEntry, + originalTitle, + originalId +) => { + // note - you can't have any leading whitespace here + const htmlContent = `