Improve documentation sidesheet (#9724)

* Improve styles for table, links, code blocks. Remove html comments

* Fix img url

* Edit build.gradle

* Fix type

* Fix url images

airbyte-webapp/build.gradle

@@ -59,6 +59,15 @@ task copyDocs(type: Copy) {
     duplicatesStrategy DuplicatesStrategy.INCLUDE
 }
 
+// Copy images that are used in .md integration documentation docs
+task copyAssets(type: Copy) {
+    dependsOn copyDocker
+
+    from "${project.rootProject.projectDir}/docs/.gitbook"
+    into "build/docker/bin/docs/.gitbook"
+    duplicatesStrategy DuplicatesStrategy.INCLUDE
+}
+
 task copyNginx(type: Copy) {
     dependsOn copyDocker
 
@@ -69,11 +78,13 @@ task copyNginx(type: Copy) {
 copyBuild.dependsOn npm_run_build
 copyNginx.dependsOn npm_run_build
 copyDocs.dependsOn npm_run_build
+copyAssets.dependsOn npm_run_build
 assemble.dependsOn copyDocs
 copyDocker.dependsOn(npm_run_build)
 
 Task dockerBuildTask = getDockerBuildTask("webapp",  "$project.projectDir")
 dockerBuildTask.dependsOn(copyBuild)
 dockerBuildTask.dependsOn(copyNginx)
 dockerBuildTask.dependsOn(copyDocs)
-assemble.dependsOn(dockerBuildTask)
+dockerBuildTask.dependsOn(copyAssets)
+assemble.dependsOn(dockerBuildTask)

airbyte-webapp/package.json

@@ -46,6 +46,7 @@
     "react-use-intercom": "^1.4.0",
     "react-widgets": "^4.6.1",
     "recharts": "^2.1.3",
+    "rehype-urls": "^1.1.1",
     "remark-gfm": "^3.0.0",
     "rest-hooks": "^5.0.20",
     "sanitize-html": "^2.3.3",

airbyte-webapp/src/components/Markdown/Markdown.tsx

@@ -2,44 +2,100 @@ import React from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import styled from "styled-components";
+import type { PluggableList } from "react-markdown/lib/react-markdown";
 
 type Props = {
   content?: string;
   className?: string;
+  rehypePlugins?: PluggableList;
 };
 
-const Markdown: React.FC<Props> = ({ content, className }) => {
+const Markdown: React.FC<Props> = ({ content, className, rehypePlugins }) => {
   return (
     <ReactMarkdown
       linkTarget="_blank"
       className={className}
+      skipHtml
       remarkPlugins={[remarkGfm]}
+      rehypePlugins={rehypePlugins}
       children={content || ""}
     />
   );
 };
 
 const StyledMarkdown = styled(Markdown)`
   * {
-    color: rgba(59, 69, 78, 1);
-    line-height: 20px;
+    color: ${({ theme }) => theme.textColor};
+    line-height: 24px;
+    font-size: 16px;
     font-weight: 400;
   }
 
   h1 {
     font-size: 48px;
     line-height: 56px;
+    font-weight: bold;
+  }
+
+  h2 {
+    font-size: 24px;
+    line-height: 36px;
+    font-weight: bold;
+  }
+
+  h3 {
+    font-weight: bold;
   }
 
   a {
-    color: rgb(26, 25, 117);
+    color: ${({ theme }) => theme.primaryColor};
     text-decoration: none;
     line-height: 24px;
 
     &:hover {
       text-decoration: underline;
     }
   }
+
+  table {
+    border-collapse: collapse;
+  }
+
+  th,
+  td {
+    border: 1px solid ${({ theme }) => theme.borderTableColor};
+    margin: 0;
+    padding: 8px 16px;
+  }
+
+  th {
+    background: ${({ theme }) => theme.lightTableColor};
+  }
+
+  blockquote {
+    border-left: 4px solid ${({ theme }) => theme.borderTableColor};
+    padding-left: 16px;
+    margin-left: 25px;
+  }
+
+  strong {
+    font-weight: bold;
+  }
+
+  code {
+    background: ${({ theme }) => theme.lightTableColor};
+
+    &.language-sql,
+    &.language-text {
+      display: block;
+      padding: 15px;
+      overflow: auto;
+    }
+  }
+
+  img {
+    max-width: 100%;
+  }
 `;
 
 export default StyledMarkdown;

airbyte-webapp/src/components/SideView/styled.ts

@@ -20,7 +20,7 @@ export const Actions = styled.div`
 export const Body = styled.div`
   display: flex;
   flex-direction: column;
-  padding: 70px 25px 0;
+  padding: 70px 35px 20px;
 `;
 
 export const Close = styled.div`

airbyte-webapp/src/theme.ts

@@ -38,6 +38,8 @@ export const theme = {
   whiteColor: "#FFFFFF",
   beigeColor: "#FEF9F4",
   darkBeigeColor: "#FFEBD7",
+  borderTableColor: "#D3DCE4",
+  lightTableColor: "#F5F7F9",
   darkGreyColor: "#8B8BA0",
   redColor: "#FF6A4D",
   lightRedColor: "#FF8870",

airbyte-webapp/src/types/rehype-urls.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react-scripts" />
+declare module "rehype-urls";

airbyte-webapp/src/views/Connector/ServiceForm/components/Controls/Instruction.tsx

@@ -2,12 +2,15 @@ import React from "react";
 import { FormattedMessage } from "react-intl";
 import styled from "styled-components";
 import { useToggle } from "react-use";
+import urls from "rehype-urls";
+import type { PluggableList } from "react-markdown/lib/react-markdown";
 
 import useDocumentation from "hooks/services/useDocumentation";
 import { LoadingPage } from "components";
 import { SideView } from "components/SideView";
 import { Markdown } from "components/Markdown";
 import { DestinationDefinition, SourceDefinition } from "core/domain/connector";
+import { useConfig } from "config";
 
 type IProps = {
   selectedService: SourceDefinition | DestinationDefinition;
@@ -47,8 +50,18 @@ const Instruction: React.FC<IProps> = ({
   documentationUrl,
 }) => {
   const [isSideViewOpen, setIsSideViewOpen] = useToggle(false);
+  const config = useConfig();
   const { data: docs, isLoading } = useDocumentation(documentationUrl);
 
+  const removeBaseUrl = (url: { path: string }) => {
+    if (url.path.startsWith("../../")) {
+      return url.path.replace("../../", `${config.integrationUrl}/`);
+    }
+    return url.path;
+  };
+
+  const urlReplacerPlugin: PluggableList = [[urls, removeBaseUrl]];
+
   return (
     <>
       {isSideViewOpen && (
@@ -70,7 +83,7 @@ const Instruction: React.FC<IProps> = ({
           {isLoading ? (
             <LoadingPage />
           ) : docs ? (
-            <Markdown content={docs} />
+            <Markdown content={docs} rehypePlugins={urlReplacerPlugin} />
           ) : (
             <FormattedMessage id="docs.notFoundError" />
           )}