[docs] Fix hydration error

mui · Dec 23, 2019 · 4b5baed · 4b5baed
1 parent b3ec703
commit 4b5baed
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js
@@ -177,6 +177,11 @@ function MarkdownDocs(props) {
           <Ad />
         </Portal>
       )}
+      <svg style={{ display: 'none' }} xmlns="http://www.w3.org/2000/svg">
+        <symbol id="anchor-link-icon" viewBox="0 0 16 16">
+          <path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z" />
+        </symbol>
+      </svg>
       <AppContent disableAd={disableAd} disableToc={disableToc}>
         {!disableEdit ? (
           <div className={classes.header}>

diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
@@ -27,16 +27,15 @@ renderer.heading = (text, level) => {
   }
 
   // eslint-disable-next-line no-underscore-dangle
-  const escapedText = textToHash(text, global.__MARKED_UNIQUE__);
+  const hash = textToHash(text, global.__MARKED_UNIQUE__);
 
   return [
     `<h${level}>`,
-    `<a class="anchor-link" id="${escapedText}"></a>${text}`,
-    typeof window !== 'undefined'
-      ? `<a class="anchor-link-style" aria-label="anchor" href="#${escapedText}">` +
-        `<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg>` +
-        `</a>`
-      : null,
+    `<a class="anchor-link" id="${hash}"></a>`,
+    text,
+    `<a class="anchor-link-style" aria-hidden="true" href="#${hash}">`,
+    '<svg><use xlink:href="#anchor-link-icon" /></svg>',
+    '</a>',
     `</h${level}>`,
   ].join('');
 };