Updated next, created robots and sitemap

Author: AlexTechNoir

components/article/Comments.js

@@ -3,7 +3,7 @@ import { DiscussionEmbed } from 'disqus-react'
 
 export default function Comments({ params }) {
   return (
-    <Footer>
+    <Footer className="comments">
       <DiscussionEmbed
         shortname='youknowwhatblog'
         config={

components/article/Markdown.js

@@ -1,9 +1,23 @@
 import ReactMarkdown from 'react-markdown'
 import styled from 'styled-components'
+import { useEffect, useState } from 'react'
 
 import ProgressiveImage from './markdown/ProgressiveImage'
 
 export default function Markdown({ data }) {
+  const [ headings, setHeadings ] = useState([])
+
+  useEffect(() => {
+    const hTagsCollection = document.querySelectorAll('h2, h3, h4, h5, h6')
+    const hTagsArr = [].slice.call(hTagsCollection)
+    console.log(hTagsCollection, hTagsArr)
+    setHeadings(hTagsArr)
+  
+    if (hTagsArr.length !== 0) {
+      hTagsArr.map(el => el.setAttribute('id', el.textContent))
+    }
+  },[])
+
   return (
     <>
       <Header>
@@ -26,6 +40,21 @@ export default function Markdown({ data }) {
         />
         <figcaption><em>{data.image[0].caption}</em></figcaption>
       </Figure>
+      {
+        headings.length === 0 ? null :
+        <Nav className="contents">
+          <p>Contents</p>
+          <ul>
+            {
+              headings.map(li => 
+                <li className={li.nodeName} key={li.textContent}>
+                  <a href={`#${li.textContent}`}>{li.textContent}</a>
+                </li>
+              )
+            }
+          </ul>
+        </Nav>
+      }
       <ReactMarkdown
         source={data.content}
         escapeHtml={false}
@@ -60,3 +89,29 @@ const Figure = styled.figure`
     text-align: center;
   }
 `
+
+const Nav = styled.nav`
+  border: 2px solid black;
+  border-radius: 15px;
+  padding: 1em;
+  margin-top: 1em;
+  > p {
+    margin-top: 0;
+  }
+  > ul {
+    list-style-type: none;
+    padding-left: 1em;
+    > .H3 {
+      padding-left: .5em;
+    }
+    > .H4 {
+      padding-left: 1em;
+    }
+    > .H5 {
+      padding-left: 1.5em;
+    }
+    > .H6 {
+      padding-left: 2em;
+    }
+  }
+`

next-sitemap.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+  siteUrl: 'https://next-js-strapi-blog.vercel.app',
+  sitemapSize: 50000,
+  exclude: ['/search'],
+  generateRobotsTxt: true,
+  robotsTxtOptions: {
+    policies: [
+      {
+        userAgent: 'Googlebot-Image',
+        disallow: '/'
+      },
+      {
+        userAgent: '*',
+        disallow: '/search'
+      },
+      {
+        userAgent: '*',
+        allow: '/'
+      }
+    ]
+  }
+}