added sitemap

Author: vmcodes

CHANGELOG.md

@@ -87,6 +87,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Search functionality for blog posts
 - Styled components to Title component
 - Links to blog tags to show all posts with the same tag
+- Added XML Sitemap using getServerSideProps
 
 ### Fixed
 

components/buttons/ButtonLink.js

@@ -13,7 +13,11 @@ export default function ButtonLink({
   return (
     <a
       href={link}
-      className={customClassName?`${btnStyles.btn} ${btnStyles[customClassName]}`:btnStyles.btn}
+      className={
+        customClassName
+          ? `${btnStyles.btn} ${btnStyles[customClassName]}`
+          : btnStyles.btn
+      }
       style={styles}
       target={openNewTab ? '_blank' : undefined}
       rel='noopener noreferrer'

pages/sitemap.xml.js

@@ -0,0 +1,62 @@
+const EXTERNAL_DATA_URL = 'https://dev.to/api/articles?username=wdp';
+
+function generateSiteMap(posts) {
+  return `<?xml version="1.0" encoding="UTF-8"?>
+   <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+    <url>
+      <loc>https://www.webdevpath.co</loc>
+      <lastmod>2023-05-04</lastmod>
+    </url>
+    <url>
+      <loc>https://www.webdevpath.co/about</loc>
+      <lastmod>2023-05-04</lastmod>
+    </url>
+    <url>
+      <loc>https://www.webdevpath.co/blog</loc>
+      <lastmod>2023-05-04</lastmod>
+    </url>
+    <url>
+      <loc>https://www.webdevpath.co/contact</loc>
+      <lastmod>2023-05-04</lastmod>
+    </url>       
+    <url>
+      <loc>https://www.webdevpath.co/contact</loc>
+      <lastmod>2023-05-04</lastmod>
+    </url>   
+     ${posts
+       .map(({ tag_list }) => {
+         return tag_list.map(tag => {
+           return `
+            <url>
+                <loc>${`https://www.webdevpath.co/blog/category/${tag}`}</loc>
+            </url> `;
+         });
+       })
+       .join('')} 
+   </urlset>
+ `;
+}
+
+function SiteMap() {
+  // getServerSideProps will do the heavy lifting
+}
+
+export async function getServerSideProps({ res }) {
+  // We make an API call to gather the URLs for our site
+  const request = await fetch(EXTERNAL_DATA_URL);
+  const posts = await request.json();
+
+  // We generate the XML sitemap with the posts data
+  const sitemap = generateSiteMap(posts);
+
+  res.setHeader('Content-Type', 'text/xml');
+  // we send the XML to the browser
+  res.write(sitemap);
+  res.end();
+
+  return {
+    props: {},
+  };
+}
+
+export default SiteMap;

public/robots.txt

@@ -1,2 +1,3 @@
 User-agent: *
-Disallow: /404
+Disallow: /
+Sitemap: https://www.webdevpath.co/sitemap.xml