docs: fix h1 css leaking into search results (#2643)

yarnpkg · Mar 29, 2021 · 208c0dc · 208c0dc
1 parent 9d7b6be
commit 208c0dc
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 12 deletions.
diff --git a/packages/gatsby/src/components/markdown.js b/packages/gatsby/src/components/markdown.js
@@ -10,26 +10,26 @@ const Container = styled.article`
   line-height: 1.7;
 `;
 
+const TitleContainer = styled.div`
+  border-bottom: 1px solid;
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+
+  flex-wrap: wrap-reverse;
+`;
 const Title = styled.h1`
   box-sizing: border-box;
 
   margin: 0;
 
-  border-bottom: 1px solid;
-
   font-weight: 600;
   font-size: 2rem;
   line-height: 4rem;
 
   + div > blockquote {
     font-style: normal;
   }
-
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-
-  flex-wrap: wrap-reverse;
 `;
 
 const EditLink = styled.a`
@@ -175,10 +175,12 @@ const Content = styled.div`
 
 export const PrerenderedMarkdown = ({title, children, editUrl}) => <>
   <Container>
-    <Title title={title}>
-      {title.match(/^`.*`$/) ? <code>{title.slice(1, -1)}</code> : title}
+    <TitleContainer>
+      <Title>
+        {title.match(/^`.*`$/) ? <code>{title.slice(1, -1)}</code> : title}
+      </Title>
       {editUrl && <EditLink target="_blank" href={editUrl}>Edit this page on GitHub</EditLink>}
-    </Title>
+    </TitleContainer>
     <Content dangerouslySetInnerHTML={{__html: children}} />
   </Container>
 </>;

diff --git a/packages/gatsby/src/components/toc/index.js b/packages/gatsby/src/components/toc/index.js
@@ -189,7 +189,7 @@ export const Toc = ({ headingSelector, getTitle, getDepth, ...rest }) => {
       headingSelector || Array.from({ length: 6 }, (_, i) => `article h` + (i + 1))
     const nodes = Array.from(document.querySelectorAll(selector))
     const titles = nodes.map(node => ({
-      title: getTitle ? getTitle(node) : (node.title || node.innerText || node.textContent),
+      title: getTitle ? getTitle(node) : (node.innerText || node.textContent),
       depth: getDepth ? getDepth(node) : Number(node.nodeName[1]),
     }))
     // Compute the minimum heading depth. Will be subtracted from each heading's