fix: add id attr to headers to work before react is loaded if ssr

Redocly · Jan 10, 2018 · 1743453 · 1743453
1 parent 7eb477b
commit 1743453
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>`
  );
  }