Merge Getting Started Guide content

Author: billsedison

src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/MarkdownDoc.module.scss

@@ -9,6 +9,7 @@
     color: inherit;
 
     counter-reset: devCenterHeading2;
+    counter-reset: devCenterHeading3;
 
     *:not(pre) code {
         @include font-roboto-mono;
@@ -58,12 +59,30 @@
 
     margin: 80px 0 $space-xxl;
     counter-increment: devCenterHeading2;
+    counter-reset: devCenterHeading3;
 
     &::before {
         content: counter(devCenterHeading2) ". ";
         font: inherit;
         color: inherit;
     }
+}
+
+.heading3 {
+    @include font-barlow;
+    @include font-weight-semibold;
+    font-size: 22px;
+    line-height: 26px;
+    color: inherit;
+    text-transform: uppercase;
+    margin: 10px 0 $space-xxl;
+    counter-increment: devCenterHeading3;
+
+    &::before {
+        content: counter(devCenterHeading2) "." counter(devCenterHeading3) ". ";
+        font: inherit;
+        color: inherit;
+    }
 
     &:first-child {
         margin-top: $space-xxl;

src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/TableOfContents.module.scss

@@ -18,7 +18,7 @@
     color: inherit;
     text-transform: uppercase;
 
-    padding: 0 0 0 $space-xxxxl;
+    padding: 0 0 0 $space-xxxl;
     margin: 0 0 $space-xxl;
 }
 
@@ -49,5 +49,12 @@
     color: $black-60;
 
     display: block;
-    padding: $space-sm 0 $space-sm $space-xxxxl;
 }
+
+.navListItem-link-padding-level2 {
+    padding: $space-sm 0 $space-sm $space-xxxl;
+}
+
+.navListItem-link-padding-level3 {
+    padding: $space-sm 0 $space-sm $space-xxxxl;
+}

src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/TableOfContents.tsx

@@ -14,7 +14,7 @@ export const TableOfContents: React.FC<TableOfContentsProps> = (props) => {
     ] = React.useState(-1)
     const { toc }: { toc: TOC } = props
     const items: TOC = React.useMemo(() => {
-        return toc.filter((item) => item.level === 2)
+        return toc.filter((item) => (item.level === 2 || item.level === 3))
     }, [toc])
 
     const findActiveIndex: () => void = React.useCallback(() => {
@@ -49,7 +49,7 @@ export const TableOfContents: React.FC<TableOfContentsProps> = (props) => {
                         >
                             <a
                                 href={`#${item.headingId}`}
-                                className={`${styles['navListItem-link']}`}
+                                className={`${styles['navListItem-link']} ${styles[`navListItem-link-padding-level${item.level}`]}`}
                             >
                                 {item.title}
                             </a>

src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/markdownRenderer/renderer.tsx

@@ -14,7 +14,7 @@ export type MarkdownString = string
 export type MarkdownResult = React.ReactNode
 export type TOC = Array<{ headingId: string; level: number; title: string }>
 
-enum MarkdownHeaderTag {
+export enum MarkdownHeaderTag {
     h1 = 'h1',
     h2 = 'h2',
     h3 = 'h3',
@@ -28,7 +28,7 @@ enum MarkdownParagraphTag {
 }
 export interface MarkdownRenderOptions {
     baseUrl?: string
-    groupBy?: MarkdownHeaderTag.h2
+    groupBy?: MarkdownHeaderTag
     highlightCode?: (code: string, lang: string) => string
     sanitize?: boolean
     toc?: TOC
@@ -75,8 +75,8 @@ export class Renderer implements MarkdownRenderer {
         }
 
         const tokens: marked.TokensList = marked.lexer(markdown)
-        const nodes: Array<React.ReactNode> = tokens.map((token) =>
-            this.parseToken(token, options)
+        const nodes: Array<React.ReactNode> = tokens.map((token, index) =>
+            this.parseToken(token, index, options)
         )
         const children: ReturnType<typeof this.groupBy> = this.groupBy(
             nodes,
@@ -173,6 +173,7 @@ export class Renderer implements MarkdownRenderer {
     // tslint:disable-next-line: cyclomatic-complexity
     private parseToken(
         token: marked.Token,
+        index: number,
         options?: MarkdownRenderOptions
     ): React.ReactNode {
         const isLinkBlock: (t: marked.Token) => boolean = (t: marked.Token) => {
@@ -238,17 +239,19 @@ export class Renderer implements MarkdownRenderer {
             )
             return htmlString.replace(tagRegExp, '$1')
         }
-        const extractId: (htmlString: string, tagname: string) => string = (
+        const extractId: (htmlString: string, tagname: string, leadingIndex: number) => string = (
             htmlString: string,
-            tagname: string
+            tagname: string,
+            leadingIndex: number
         ) => {
             htmlString = htmlString.trim()
             const tagRegExp: RegExp = new RegExp(
                 `<${tagname}\\b[^>]*id="(.*?)"[^>]*>((.|\\n)*?)</${tagname}>$`,
                 'g'
             )
             const matches: RegExpExecArray | null = tagRegExp.exec(htmlString)
-            return matches ? matches[1] : ''
+            const id: string = matches ? matches[1] : ''
+            return `${leadingIndex}-${id}`
         }
         const extractTag: (htmlString: string) => string = (
             htmlString: string
@@ -286,7 +289,7 @@ export class Renderer implements MarkdownRenderer {
             const h: string = marked.parser([token], parserOptions)
             const level: number = token.depth
             const title: string = removeLineBreak(stripTag(h, `h${level}`))
-            const headingId: string = extractId(h, `h${level}`).trim()
+            const headingId: string = extractId(h, `h${level}`, index).trim()
 
             options.toc.push({
                 headingId,
@@ -353,7 +356,7 @@ export class Renderer implements MarkdownRenderer {
                 let id: string | undefined
                 if (isHeaderTag) {
                     token = token as marked.Tokens.Heading
-                    id = extractId(html, `h${token.depth}`).trim()
+                    id = extractId(html, `h${token.depth}`, index).trim()
                 }
                 return React.createElement(tag, {
                     className: getClassname(token),

src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/markdownRenderer/util.ts

@@ -1,7 +1,7 @@
 import DOMPurify from 'dompurify'
 import hljs from 'highlight.js'
 
-import { MarkdownRenderOptions, MarkdownString, Renderer, TOC } from './renderer'
+import { MarkdownHeaderTag, MarkdownRenderOptions, MarkdownString, Renderer, TOC } from './renderer'
 
 export function renderMarkdown(
     markdown: MarkdownString,
@@ -10,7 +10,7 @@ export function renderMarkdown(
     const renderer: Renderer = Renderer.getInstance()
     const defaultOptions: MarkdownRenderOptions = {
         baseUrl: '/',
-        groupBy: 'h2',
+        groupBy: MarkdownHeaderTag.h3,
         highlightCode(code: string, lang: string): string {
             const language: string = hljs.getLanguage(lang) ? lang : ''
             return language ? hljs.highlight(code, { language }).value : code