Generate connector docs

src/components/ConnectorList/ConnectorAccordion/index.tsx

@@ -1,43 +1,48 @@
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import MuiAccordion, { AccordionProps } from '@mui/material/Accordion';
-import MuiAccordionSummary, { AccordionSummaryProps } from "@mui/material/AccordionSummary";
-import MuiAccordionDetails from "@mui/material/AccordionDetails";
-import ArrowForwardIosSharpIcon from "@mui/icons-material/ArrowForwardIosSharp";
+import MuiAccordionSummary, { AccordionSummaryProps } from '@mui/material/AccordionSummary';
+import MuiAccordionDetails from '@mui/material/AccordionDetails';
+import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
 import StarIcon from '@mui/icons-material/Star';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import IconButton from '@mui/material/IconButton';
 import Chip from '@mui/material/Chip';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import Tooltip from '@mui/material/Tooltip';
-import ReleaseAccordion, {Release} from "@site/src/components/ConnectorList/ReleaseAccordion";
+import ReleaseAccordion, { Release } from '@site/src/components/ConnectorList/ReleaseAccordion';
+import { Paper } from '@mui/material';
 
 export class Connector {
   nameWithOwner: string;
   description: string;
+  conduitIODocsPage: string;
   url: string;
   created_at: string;
   stargazerCount: number;
   forkCount: number;
-  releases: Release[];
+  latestRelease: Release;
 }
 
 export interface ConnectorAccordionProps extends AccordionProps {
   connector: Connector;
 }
 
-const ConnectorAccordion = styled((props: ConnectorAccordionProps) => (
-  <MuiAccordion disableGutters elevation={0}  {...props}>
+export const ConnectorAccordion = styled((props: ConnectorAccordionProps) => (
+  <MuiAccordion disableGutters elevation={0} {...props}>
     <ConnectorAccordionSummary connector={props.connector} />
     <MuiAccordionDetails>
-      {
-        props.connector.releases.length > 0
-          ? props.connector.releases.map((release: Release, index: number) => (
-            <ReleaseAccordion key={release.tag_name} release={release} defaultExpanded={index==0}  children=''/>
-          ))
-          : <Typography>No releases.</Typography>
-      }
+      {props.connector.latestRelease ? (
+        <ReleaseAccordion
+          key={props.connector.latestRelease.tag_name}
+          release={props.connector.latestRelease}
+          defaultExpanded={true}
+          children=""
+        />
+      ) : (
+        <Typography>No releases.</Typography>
+      )}
     </MuiAccordionDetails>
   </MuiAccordion>
 ))(({ theme }) => ({
@@ -50,34 +55,85 @@ const ConnectorAccordion = styled((props: ConnectorAccordionProps) => (
   },
 }));
 
+export const NonExpandableAccordion = styled((props: ConnectorAccordionProps) => {
+  const handleClick = () => {
+    window.location.href = props.connector.conduitIODocsPage;
+  };
+
+  return (
+    <Paper elevation={0} onClick={handleClick} {...props}>
+      <Stack className='width-100pct' direction="row" spacing={2} alignItems="center" justifyContent="space-between">
+        <Stack flexGrow={1}>
+          <Typography variant="body1">{props.connector.nameWithOwner}</Typography>
+          <Typography variant="body2" className="color-6b7280">
+            {props.connector.description}
+          </Typography>
+        </Stack>
+        <Stack direction="row" spacing={1} alignItems="center">
+          {props.connector.nameWithOwner.toLowerCase().startsWith('conduitio/') ||
+          props.connector.nameWithOwner.toLowerCase().startsWith('conduitio-labs/') ? (
+            <Tooltip title="Created by the Conduit team">
+              <img src="/img/conduit/conduit-ring.png" width="18" alt="Conduit team logo" />
+            </Tooltip>
+          ) : null}
+          <IconButton size="small" href={props.connector.url} target="_blank" onClick={stopPropagation}>
+            <GitHubIcon fontSize="inherit" />
+          </IconButton>
+          <Chip icon={<StarIcon />} label={props.connector.stargazerCount} size="small" />
+        </Stack>
+      </Stack>
+    </Paper>
+  );
+})(({ theme }) => ({
+  cursor: 'pointer',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: theme.spacing(2),
+  border: `1px solid ${theme.palette.divider}`,
+  boxShadow: 'none',
+  '&:not(:last-child)': {
+    borderBottom: 0,
+  },
+  '&::before': {
+    display: 'none',
+  },
+}));
+
 export interface ConnectorAccordionSummaryProps extends AccordionSummaryProps {
   connector: Connector;
 }
 
-export const ConnectorAccordionSummary = styled((props: ConnectorAccordionSummaryProps) => (
-  <MuiAccordionSummary
-    expandIcon={<ArrowForwardIosSharpIcon />}
-    {...props}
-  >
-    <Stack className='width-100pct' direction='row' spacing={2} >
-      <Stack className='width-100pct' >
-        <Typography variant='body1'>{props.connector.nameWithOwner}</Typography>
-        <Typography variant='body2' className='color-6b7280' >{props.connector.description}</Typography>
+export const ConnectorAccordionSummary = styled((props: ConnectorAccordionSummaryProps) => {
+  const content = (
+    <Stack className='width-100pct' direction="row" spacing={2} alignItems="center" justifyContent="space-between">
+      <Stack flexGrow={1}>
+        <Typography variant="body1">{props.connector.nameWithOwner}</Typography>
+        <Typography variant="body2" className="color-6b7280">
+          {props.connector.description}
+        </Typography>
       </Stack>
-      <Stack className='align-items-center' direction='row' justifyContent='flex-end' spacing={1} >
-        {
-          props.connector.nameWithOwner.toLowerCase().startsWith('conduitio/') || props.connector.nameWithOwner.toLowerCase().startsWith('conduitio-labs/')
-            ? <Tooltip title="Created by the Conduit team"><img src='/img/conduit/conduit-ring.png' width='18'/></Tooltip>
-            : null
-        }
-        <IconButton size='small' href={props.connector.url} target='_blank' onClick={stopPropagation}>
-          <GitHubIcon fontSize='inherit' />
+      <Stack direction="row" spacing={1} alignItems="center">
+        {props.connector.nameWithOwner.toLowerCase().startsWith('conduitio/') ||
+        props.connector.nameWithOwner.toLowerCase().startsWith('conduitio-labs/') ? (
+          <Tooltip title="Created by the Conduit team">
+            <img src="/img/conduit/conduit-ring.png" width="18" alt="Conduit team logo" />
+          </Tooltip>
+        ) : null}
+        <IconButton size="small" href={props.connector.url} target="_blank" onClick={stopPropagation}>
+          <GitHubIcon fontSize="inherit" />
         </IconButton>
-        <Chip icon={<StarIcon />} label={props.connector.stargazerCount} size='small' />
+        <Chip icon={<StarIcon />} label={props.connector.stargazerCount} size="small" />
       </Stack>
     </Stack>
-  </MuiAccordionSummary>
-))(({ theme }) => ({
+  );
+
+  return (
+    <MuiAccordionSummary expandIcon={<ArrowForwardIosSharpIcon />} {...props}>
+      {content}
+    </MuiAccordionSummary>
+  );
+})(({ theme }) => ({
   flexDirection: 'row-reverse',
   '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
     transform: 'rotate(90deg)',
@@ -95,12 +151,10 @@ export const ConnectorAccordionSummary = styled((props: ConnectorAccordionSummar
     alignItems: 'center',
   },
   '& .color-6b7280': {
-    color:'#6B7280',
-  }
+    color: '#6B7280',
+  },
 }));
 
 function stopPropagation(e) {
   e.stopPropagation();
 }
-
-export default ConnectorAccordion;

src/components/ConnectorList/ReleaseAccordion/index.tsx

@@ -51,46 +51,17 @@ function humanFileSize(size) {
 }
 
 const ReleaseAccordion = styled((props: IAccordionProps) => (
-  <MuiAccordion disableGutters {...props}>
-    <MuiAccordionSummary>
-      <Stack direction='row' spacing={1}>
-        <Chip label={props.release.tag_name} size='small' className='header-content' />
-        <Typography variant="body2" className='header-content'>{Intl.DateTimeFormat('en-US', {dateStyle: 'medium'}).format(new Date(props.release.published_at))}</Typography>
-        <IconButton size='small' href={props.release.html_url} target='_blank' onClick={stopPropagation}>
-          <OpenInNewIcon fontSize='inherit' />
-        </IconButton>
-      </Stack>
-    </MuiAccordionSummary>
-    <MuiAccordionDetails>
-      <TableContainer>
-        <Table size="small">
-          <TableHead>
-            <TableRow>
-              <TableCell>File</TableCell>
-              <TableCell>OS</TableCell>
-              <TableCell>Arch</TableCell>
-              <TableCell>Size</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {props.release.assets.map(asset => (
-              <TableRow key={asset.name} >
-                <TableCell>
-                  <a href={asset.browser_download_url}>{asset.name}</a>
-                </TableCell>
-                <TableCell>{asset.os}</TableCell>
-                <TableCell>{asset.arch}</TableCell>
-                <TableCell>{humanFileSize(asset.size)}</TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
-      <Typography variant='body2' component='span'>
-        <Markdown>{props.release.body}</Markdown>
-      </Typography>
-    </MuiAccordionDetails>
-  </MuiAccordion>
+    <MuiAccordion disableGutters {...props}>
+      <MuiAccordionSummary>
+        <Stack direction='row' spacing={1}>
+          <Chip label={props.release.tag_name} size='small' className='header-content' />
+          <Typography variant="body2" className='header-content'>{Intl.DateTimeFormat('en-US', {dateStyle: 'medium'}).format(new Date(props.release.published_at))}</Typography>
+          <IconButton size='small' href={props.release.html_url} target='_blank' onClick={stopPropagation}>
+            <OpenInNewIcon fontSize='inherit' />
+          </IconButton>
+        </Stack>
+      </MuiAccordionSummary>
+    </MuiAccordion>
 ))(({ theme }) => ({
   border: `1px solid ${theme.palette.divider}`,
   '&:not(:last-child)': {

src/components/ConnectorList/index.tsx

@@ -1,4 +1,4 @@
-import ConnectorAccordion, {Connector} from '@site/src/components/ConnectorList/ConnectorAccordion';
+import {ConnectorAccordion, NonExpandableAccordion, Connector} from '@site/src/components/ConnectorList/ConnectorAccordion';
 import TextField from '@mui/material/TextField';
 import InputAdornment from '@mui/material/InputAdornment';
 import SearchIcon from '@mui/icons-material/Search';
@@ -24,8 +24,7 @@ class Filter {
   }
 
   matches(connector: Connector): boolean {
-    if (!this.showWithoutRelease &&
-      (!connector.releases || connector.releases.length == 0)) {
+    if (!this.showWithoutRelease && !connector.latestRelease) {
       return false;
     }
     if (!this.showCommunity &&
@@ -159,9 +158,7 @@ class ConnectorList extends React.Component<{connectors: Connector[]}, Connector
             ),
           }}
         />
-        {connectors.map(conn => (
-          <ConnectorAccordion key={conn.url} connector={conn} />
-        ))}
+        {connectors.map(conn => conn.conduitIODocsPage ? <NonExpandableAccordion key={conn.url} connector={conn} /> : <ConnectorAccordion key={conn.url} connector={conn} />)}
       </>
     );
   }

src/connectorgen/Makefile

@@ -1,3 +1,3 @@
 .PHONY: generate
 generate:
-	go run main.go ../../static/connectors.json
+	go run main.go ../../static/connectors.json "../../docs/1-using/4-connectors/7-list"

src/connectorgen/connector-docs-mdx.tmpl

@@ -0,0 +1,123 @@
+---
+IMPORTANT: This file was generated using src/connectorgen/main.go. DO NOT EDIT.
+
+title: "{{ .Specification.Name }}"
+description: "{{ .Specification.Summary }}"
+---
+
+import ReactDiffViewer from 'react-diff-viewer';
+import Chip from '@mui/material/Chip';
+import Box from "@mui/system/Box";
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import GitHubIcon from '@mui/icons-material/GitHub';
+import IconButton from '@mui/material/IconButton';
+import Stack from '@mui/material/Stack';
+import Link from '@mui/material/Link';
+import StarIcon from '@mui/icons-material/Star';
+import Tooltip from '@mui/material/Tooltip';
+
+# {{ .Specification.Name }}
+
+<Stack
+  className='align-items-center'
+  direction='row'
+  justifyContent='flex-start'
+  spacing={2}
+>
+    {/* Wrap each item in a container with consistent height */}
+    <Box sx={{printf "{{" }} display: 'flex', alignItems: 'center', height: 48 {{printf "}}" }}>
+      {/* Conduit logo */}
+      {{if or (lower .NameWithOwner | hasPrefix "conduitio/") (lower .NameWithOwner | hasPrefix "conduitio-labs/")}}
+      <Tooltip title="Created by the Conduit team">
+        <img src='/img/conduit/conduit-ring.png' width='18' alt="Conduit team logo" />
+      </Tooltip>
+      {{ end }}
+    </Box>
+
+    <Box sx={{printf "{{" }} display: 'flex', alignItems: 'center', height: 48 {{printf "}}" }}>
+      <IconButton
+        size='large'
+        href="{{ .URL }}"
+        target='_blank'
+        sx={{printf "{{" }} padding: '12px' {{printf "}}" }}
+      >
+        <GitHubIcon fontSize='inherit' />
+      </IconButton>
+    </Box>
+
+    <Box sx={{printf "{{" }} display: 'flex', alignItems: 'center', height: 48 {{printf "}}" }}>
+      <Chip
+        icon={<StarIcon />}
+        label="{{ .Stargazers }}"
+        size='large'
+        sx={{printf "{{" }} height: 32 {{printf "}}" }} 
+      />
+    </Box>
+</Stack>
+
+## Author
+
+{{ .Specification.Author }}
+
+## Latest release
+
+{{- if .LatestRelease }}
+    {{- range $i, $asset := .LatestRelease.Assets }}
+- [{{ $asset.Name }}]({{ $asset.BrowserDownload }})
+    {{- end }}
+{{- end }}
+
+## Description
+
+{{ .Specification.Description }}
+
+## Source Parameters
+
+{{- if gt (len .Specification.Source.Parameters) 0 }}
+```yaml
+version: 2.2
+pipelines:
+  - id: example
+    status: running
+    connectors:
+      - id: example-source
+        type: source
+        plugin: "{{ .Specification.Name }}"
+        name: example-source
+        {{ if gt (len .Specification.Source.Parameters) 0 -}}
+        settings:
+          {{- range $name, $param := .Specification.Source.Parameters }}
+          {{ formatParameterDescriptionYAML $param.Description }}
+          # Type: {{ $param.Type }}
+          {{ $param.Name }}: {{ formatParameterValueYAML $param.Default }}
+          {{- end }}
+        {{- end }}
+```
+{{- else }}
+Reading data with {{ .Specification.Name }} is not supported.
+{{- end }}
+
+## Destination Parameters
+
+{{- if gt (len .Specification.Destination.Parameters) 0 }}
+```yaml
+version: 2.2
+pipelines:
+  - id: example
+    status: running
+    connectors:
+      - id: example-destination
+        type: destination
+        plugin: "{{ .Specification.Name }}"
+        name: example-destination
+        settings:
+          {{- range $name, $param := .Specification.Destination.Parameters }}
+          {{ formatParameterDescriptionYAML $param.Description }}
+          # Type: {{ $param.Type }}
+          {{ $param.Name }}: {{ formatParameterValueYAML $param.Default }}
+          {{- end }}
+```
+{{- else }}
+Writing data with {{ .Specification.Name }} is not supported.
+{{- end }}