SDK page layout (#153)

Added code that supports the sdk page layout.

Author: eightants

components/Docs/DocLayout/DocLayout.tsx

@@ -0,0 +1,40 @@
+import Markdown from 'markdown-to-jsx';
+import { createElement } from 'react';
+import styles from '../Docs.module.scss';
+import { DocsMarkdownRenderer } from '../DocsTypographyRenderer/DocsTypographyRenderer';
+
+const CLASSNAME_MAP: { [k: string]: string } = {
+  section: styles.sdkDocSection,
+  left: styles.sdkLeftColumn,
+  right: styles.sdkRightColumn,
+  parameter: styles.methodParameter,
+  innerParameterContainer: styles.innerParameterContainer,
+  innerParameterHeading: styles.innerParameterHeading,
+};
+
+export const DocSection = ({ content }: { content: string }) => {
+  return (
+    <Markdown
+      options={{
+        createElement(type, props, children) {
+          return createElement(
+            type,
+            { ...props, className: CLASSNAME_MAP[props.className] },
+            children
+          );
+        },
+        overrides: {
+          h1: DocsMarkdownRenderer('h5'),
+          h2: DocsMarkdownRenderer('h5'),
+          h3: DocsMarkdownRenderer('h5'),
+          h4: DocsMarkdownRenderer('h5'),
+          h5: DocsMarkdownRenderer('h5'),
+          code: DocsMarkdownRenderer('code'),
+          a: DocsMarkdownRenderer('a'),
+        },
+      }}
+    >
+      {content}
+    </Markdown>
+  );
+};

components/Docs/Docs.module.scss

@@ -183,6 +183,36 @@
   }
 }
 
+.sdkRender {
+  h4,
+  h5,
+  h6 {
+    scroll-margin-top: var(--size-large);
+    margin: var(--size-xSmall) 0 !important;
+
+    &:hover {
+      text-decoration: underline;
+      text-decoration-color: var(--color-copy-on-light);
+      text-decoration-thickness: 1px;
+      text-underline-offset: var(--size-xSmall);
+      cursor: pointer;
+    }
+  }
+
+  p {
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 26px !important;
+    margin: var(--size-medium) 0 !important;
+    color: var(--copy-on-dark);
+  }
+
+  img {
+    width: 100%;
+    border-radius: var(--border-radius);
+  }
+}
+
 .inlineCodeBlock {
   border-radius: var(--space-unit);
   background-color: var(--color-pseudo-black);
@@ -331,6 +361,10 @@ h5:hover .headingCopyIcon {
   border-left: 1px var(--color-divider-on-dark) solid;
 }
 
+.sdkCenterSection {
+  max-width: none;
+}
+
 .rightSection {
   display: flex;
   flex: 0 0 320px;
@@ -537,6 +571,94 @@ h5:hover .headingCopyIcon {
   }
 }
 
+.sdkDocSection {
+  display: flex;
+  margin-bottom: 60px;
+  gap: var(--size-xxLarge);
+
+  .sdkLeftColumn {
+    flex: 1 0 50%;
+  }
+
+  .sdkRightColumn {
+    padding-top: var(--size-4xLarge);
+    position: sticky;
+    align-self: flex-start;
+    top: 0;
+    flex: 0 0 50%;
+  }
+
+  h6 {
+    margin: var(--size-small) 0 !important;
+  }
+
+  p {
+    margin: var(--size-small) 0 var(--size-large) !important;
+  }
+}
+
+.methodParameter {
+  padding: var(--size-medium) 0;
+  border-top: 1px solid var(--color-divider-on-dark);
+
+  h5 {
+    display: flex;
+    font-family: 'Fira Code' !important;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 26px;
+    align-items: center;
+    gap: var(--size-xSmall);
+    margin: var(--size-xSmall) 0 !important;
+
+    &:hover {
+      text-decoration: none;
+    }
+
+    code {
+      color: var(--color-copy-on-dark);
+      font-weight: 400;
+      font-size: 14.5px;
+      line-height: 24px;
+      background-color: rgba(29, 10, 38, 1);
+      border: 1px solid var(--color-divider-on-dark);
+    }
+  }
+
+  p {
+    color: var(--color-copy-on-light);
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px !important;
+    margin: var(--size-xSmall) 0 !important;
+  }
+}
+
+.innerParameterContainer {
+  margin-top: var(--size-medium);
+  border: 1px solid var(--color-divider-on-dark);
+  border-radius: var(--size-xxSmall);
+  display: flex;
+  flex-direction: column;
+
+  .innerParameterHeading {
+    background: #30294e;
+    padding: var(--size-xxSmall) var(--size-small);
+    font-size: 12px;
+    line-height: 22px;
+    color: var(--color-copy-on-dark);
+  }
+
+  .methodParameter {
+    padding: var(--size-xSmall) var(--size-small);
+  }
+
+  p {
+    font-size: 12px;
+  }
+}
+
 @supports (-webkit-hyphens: none) {
   .contentRender {
     h4,
@@ -556,7 +678,8 @@ h5:hover .headingCopyIcon {
     width: 100%;
   }
 
-  .contentRender {
+  .contentRender,
+  .sdkRender {
     h5 {
       margin: 0 !important;
     }

components/Docs/Docs.module.scss.d.ts

@@ -17,9 +17,12 @@ export const headingSection: string;
 export const highlightedText: string;
 export const icon: string;
 export const inlineCodeBlock: string;
+export const innerParameterContainer: string;
+export const innerParameterHeading: string;
 export const leftInner: string;
 export const leftSection: string;
 export const mainWrapper: string;
+export const methodParameter: string;
 export const pageContentList: string;
 export const pageContentTable: string;
 export const pageContentTitle: string;
@@ -28,6 +31,11 @@ export const pageNavigateRow: string;
 export const pageTitle: string;
 export const resultTitle: string;
 export const rightSection: string;
+export const sdkCenterSection: string;
+export const sdkDocSection: string;
+export const sdkLeftColumn: string;
+export const sdkRender: string;
+export const sdkRightColumn: string;
 export const searchContainer: string;
 export const searchDiv: string;
 export const searchResultCard: string;