feat(docs): Add dynamic meta tags for connector documentation (#48458)

airbytehq · Nov 19, 2024 · 8b9a801 · 8b9a801
1 parent c6d49bd
commit 8b9a801
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 1 deletion.
diff --git a/docs/using-airbyte/getting-started/readme.md b/docs/using-airbyte/getting-started/readme.md
@@ -32,7 +32,7 @@ looking to scale efficiently. For more details, talk to our Sales team. " ctaTex
 
 <Grid columns="1">
 
-<CardWithIcon title="pyAirbyte" description="Quickly sync data using Python in your local notebook." ctaText="OSS Quickstart" ctaLink="pyairbyte/getting-started" icon="fa-download" />
+<CardWithIcon title="pyAirbyte" description="Quickly sync data using Python in your local notebook." ctaText="OSS Quickstart" ctaLink="../pyairbyte/getting-started" icon="fa-download" />
 
 
 </Grid>

diff --git a/docusaurus/docusaurus.config.js b/docusaurus/docusaurus.config.js
@@ -14,6 +14,7 @@ const enterpriseDocsHeaderInformation = require("./src/remark/enterpriseDocsHead
 const productInformation = require("./src/remark/productInformation");
 const connectorList = require("./src/remark/connectorList");
 const specDecoration = require("./src/remark/specDecoration");
+const docMetaTags = require("./src/remark/docMetaTags");
 
 const redirects = yaml.load(
   fs.readFileSync(path.join(__dirname, "redirects.yml"), "utf-8")
@@ -113,6 +114,7 @@ const config = {
             docsHeaderDecoration,
             enterpriseDocsHeaderInformation,
             productInformation,
+            docMetaTags,
           ],
         },
         blog: false,

diff --git a/docusaurus/src/components/DocMetaTags.jsx b/docusaurus/src/components/DocMetaTags.jsx
@@ -0,0 +1,11 @@
+import Head from "@docusaurus/Head";
+
+export const DocMetaTags = (props) => {
+  const { title, description } = props;
+  return (
+    <Head>
+      <title>{title}</title>
+      <meta name="description" content={description} />
+    </Head>
+  );
+};
diff --git a/docusaurus/src/remark/docMetaTags.js b/docusaurus/src/remark/docMetaTags.js
@@ -0,0 +1,40 @@
+const { default: React } = require("react");
+const { getFromPaths, toAttributes } = require("../helpers/objects");
+const { isDocsPage, getRegistryEntry } = require("./utils");
+const visit = require("unist-util-visit").visit;
+
+const generateMetaTags = (connectorName) => {
+  return {
+    title: `${connectorName} Connector | Airbyte Documentation`,
+    description: `Connect ${connectorName} to our ETL/ELT platform for streamlined data integration, automated syncing, and powerful data insights.`,
+  };
+};
+const plugin = () => {
+  const transformer = async (ast, vfile) => {
+    const docsPageInfo = isDocsPage(vfile);
+    if (!docsPageInfo.isDocsPage) return;
+
+    const registryEntry = await getRegistryEntry(vfile);
+
+    if (!registryEntry) return;
+
+    visit(ast, "heading", (node) => {
+      const name = getFromPaths(registryEntry, "name_[oss|cloud]");
+      console.log("name", name);
+      const { title, description } = generateMetaTags(name);
+
+      const attributes = toAttributes({
+        title,
+        description,
+      });
+
+      node.children = [];
+      node.type = "mdxJsxFlowElement";
+      node.name = "DocMetaTags";
+      node.attributes = attributes;
+    });
+  };
+  return transformer;
+};
+
+module.exports = plugin;
diff --git a/docusaurus/src/theme/MDXComponents/index.js b/docusaurus/src/theme/MDXComponents/index.js
@@ -10,6 +10,7 @@ import { SpecSchema } from "@site/src/components/SpecSchema";
 import MDXComponents from "@theme-original/MDXComponents";
 import { CardWithIcon } from "../../components/Card/Card";
 import { Details } from "../../components/Details";
+import { DocMetaTags } from "../../components/DocMetaTags";
 import { EntityRelationshipDiagram } from "../../components/EntityRelationshipDiagram";
 import { Grid } from "../../components/Grid/Grid";
 import { YoutubeEmbed } from "../../components/YoutubeEmbed";
@@ -30,4 +31,5 @@ export default {
   CardWithIcon,
   Grid,
   YoutubeEmbed,
+  DocMetaTags,
 };