fix: remove multiple <main> in a single page

maxpou · Sep 11, 2020 · bd7467d · bd7467d
1 parent 342a6bd
commit bd7467d
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 5 deletions.
diff --git a/src/components/Wrapper.js b/src/components/Wrapper.js
@@ -1,9 +1,9 @@
 import styled from 'styled-components'
 import { colors } from '../tokens'
 
-const Wrapper = styled.main.attrs({
-  role: 'main',
-})`
+const Wrapper = styled.main.attrs(props => ({
+  role: !props.as && 'main',
+}))`
   position: relative;
   border-radius: 5px;
   width: 80%;

diff --git a/src/templates/blog-post.js b/src/templates/blog-post.js
@@ -37,7 +37,7 @@ class BlogPostTemplate extends React.Component {
           <Article post={post} />
         </Wrapper>
 
-        <Wrapper>
+        <Wrapper as="aside">
           <Disqus slug={post.frontmatter.slug} title={post.frontmatter.title} />
         </Wrapper>
 

diff --git a/src/templates/page.js b/src/templates/page.js
@@ -32,7 +32,7 @@ export default props => {
       </Wrapper>
 
       {page.frontmatter.disqus && (
-        <Wrapper>
+        <Wrapper as="aside">
           <Disqus slug={page.frontmatter.slug} title={page.frontmatter.title} />
         </Wrapper>
       )}