From 174345399f7a88bb351e800ce6027c9bd11ecbb3 Mon Sep 17 00:00:00 2001
From: Roman Hotsiy <gotsijroman@gmail.com>
Date: Wed, 10 Jan 2018 18:23:14 +0200
Subject: [PATCH] fix: add id attr to headers to work before react is loaded if
 ssr

---
 src/components/ContentItems/ContentItems.tsx       | 5 +++--
 src/components/Operation/Operation.tsx             | 6 +++---
 src/components/SecuritySchemes/SecuritySchemes.tsx | 2 +-
 src/services/MarkdownRenderer.ts                   | 4 ++--
 4 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/ContentItems/ContentItems.tsx b/src/components/ContentItems/ContentItems.tsx
index f71e6b6f7a..80ea50b545 100644
--- a/src/components/ContentItems/ContentItems.tsx
+++ b/src/components/ContentItems/ContentItems.tsx
@@ -59,11 +59,12 @@ export class ContentItem extends React.Component<ContentItemProps> {
 export class TagItem extends React.Component<ContentItemProps> {
   render() {
     const { name, description } = this.props.item;
+    const hash = this.props.item.getHash();
     return (
       <Row>
         <MiddlePanel key="middle">
-          <H1>
-            <ShareLink href={'#' + this.props.item.getHash()} />
+          <H1 id={hash}>
+            <ShareLink href={'#' + hash} />
             {name}
           </H1>
           {description !== undefined && <Markdown source={description} />}
diff --git a/src/components/Operation/Operation.tsx b/src/components/Operation/Operation.tsx
index a1ddafb220..73463b567e 100644
--- a/src/components/Operation/Operation.tsx
+++ b/src/components/Operation/Operation.tsx
@@ -44,12 +44,12 @@ export class Operation extends ComponentWithOptions<OperationProps> {
 
     const { name: summary, description, deprecated } = operation;
     const pathInMiddle = this.options.pathInMiddlePanel;
-
+    const hash = operation.getHash();
     return (
       <OperationRow>
         <MiddlePanel>
-          <H2>
-            <ShareLink href={'#' + operation.getHash()} />
+          <H2 id={hash}>
+            <ShareLink href={'#' + hash} />
             {summary} {deprecated && <Badge type="warning"> Deprecated </Badge>}
           </H2>
           {pathInMiddle && <Endpoint operation={operation} inverted={true} />}
diff --git a/src/components/SecuritySchemes/SecuritySchemes.tsx b/src/components/SecuritySchemes/SecuritySchemes.tsx
index 0282a8c3de..b98e96042e 100644
--- a/src/components/SecuritySchemes/SecuritySchemes.tsx
+++ b/src/components/SecuritySchemes/SecuritySchemes.tsx
@@ -82,7 +82,7 @@ export class SecurityDefs extends React.PureComponent<SecurityDefsProps> {
       <div>
         {this.props.securitySchemes.schemes.map(scheme => (
           <div data-section-id={scheme.sectionId} key={scheme.id}>
-            <H2>
+            <H2 id={scheme.sectionId}>
               <ShareLink href={'#' + scheme.sectionId} />
               {scheme.id}
             </H2>
diff --git a/src/services/MarkdownRenderer.ts b/src/services/MarkdownRenderer.ts
index 4d9bfec34f..16dcfa7f84 100644
--- a/src/services/MarkdownRenderer.ts
+++ b/src/services/MarkdownRenderer.ts
@@ -90,14 +90,14 @@ export class MarkdownRenderer {
         let id = this.currentTopHeading.id;
         return (
           `<a name="${id}"></a>` +
-          `<h${tokens[idx].hLevel} ${SECTION_ATTR}="${id}">` +
+          `<h${tokens[idx].hLevel} ${SECTION_ATTR}="${id}" id="${id}">` +
           `<a class="share-link" href="#${id}"></a>`
         );
       } else if (tokens[idx].hLevel === 2) {
         let { id } = this.saveHeading(content, this.currentTopHeading.items);
         return (
           `<a name="${id}"></a>` +
-          `<h${tokens[idx].hLevel} ${SECTION_ATTR}="${id}">` +
+          `<h${tokens[idx].hLevel} ${SECTION_ATTR}="${id}" id="${id}">` +
           `<a class="share-link" href="#${id}"></a>`
         );
       }