Add sitemap and 404 page

astro.config.mjs

@@ -1,19 +1,34 @@
 import { defineConfig } from 'astro/config';
+import { shouldIndexPage } from './src/lib/sitemap';
 
 // https://astro.build/config
-import tailwind from "@astrojs/tailwind";
+import tailwind from '@astrojs/tailwind';
 import rehypeExternalLinks from 'rehype-external-links';
 
+// https://astro.build/config
+import sitemap from '@astrojs/sitemap';
+
 // https://astro.build/config
 export default defineConfig({
+  site: 'https://roadmap.sh',
   markdown: {
     rehypePlugins: [
-      [rehypeExternalLinks, { target: '_blank'}]
+      [
-    ]
+        rehypeExternalLinks,
+        {
+          target: '_blank',
         },
-  integrations: [tailwind({
+      ],
+    ],
+  },
+  integrations: [
+    tailwind({
       config: {
-      applyBaseStyles: false
+        applyBaseStyles: false,
-    }
+      },
-  })]
+    }),
+    sitemap({
+      filter: shouldIndexPage,
+    }),
+  ],
 });

package.json

@@ -13,6 +13,7 @@
     "sync-content": "sh ./bin/sync-content.sh"
   },
   "dependencies": {
+    "@astrojs/sitemap": "^1.0.0",
     "@astrojs/tailwind": "^2.1.3",
     "astro": "^1.8.0",
     "node-html-parser": "^6.1.4",

pnpm-lock.yaml

@@ -1,6 +1,7 @@
 lockfileVersion: 5.4
 
 specifiers:
+  '@astrojs/sitemap': ^1.0.0
   '@astrojs/tailwind': ^2.1.3
   '@tailwindcss/typography': ^0.5.8
   astro: ^1.8.0
@@ -13,6 +14,7 @@ specifiers:
   tailwindcss: ^3.2.4
 
 dependencies:
+  '@astrojs/sitemap': 1.0.0
   '@astrojs/tailwind': 2.1.3_tailwindcss@3.2.4
   astro: 1.8.0
   node-html-parser: 6.1.4
@@ -113,6 +115,13 @@ packages:
       prismjs: 1.29.0
     dev: false
 
+  /@astrojs/sitemap/1.0.0:
+    resolution: {integrity: sha512-42GxuF5FP7RaKXZrwGLBLOX3hPv+Wl7ExJC43O0J5e34ojJkLeKf7QfwN1UwrJlqH0Ywi0Fm4/xGe482G09+wg==}
+    dependencies:
+      sitemap: 7.1.1
+      zod: 3.20.2
+    dev: false
+
   /@astrojs/tailwind/2.1.3_tailwindcss@3.2.4:
     resolution: {integrity: sha512-W7UUUBJ3itDGcvJPvk+M/eNKFlLBYGODIzPsJ3zuehNzcJDhv/Ues+TzrpSvd0FaKfmV9Zlq3ZtToy96xxJU6Q==}
     peerDependencies:
@@ -601,6 +610,10 @@ packages:
       '@types/unist': 2.0.6
     dev: false
 
+  /@types/node/17.0.45:
+    resolution: {integrity: sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==}
+    dev: false
+
   /@types/parse5/6.0.3:
     resolution: {integrity: sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==}
     dev: false
@@ -609,6 +622,12 @@ packages:
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
     dev: false
 
+  /@types/sax/1.2.4:
+    resolution: {integrity: sha512-pSAff4IAxJjfAXUG6tFkO7dsSbTmf8CtUpfhhZ5VhkRpC4628tJhh3+V6H1E+/Gs9piSzYKT5yzHO5M4GG9jkw==}
+    dependencies:
+      '@types/node': 17.0.45
+    dev: false
+
   /@types/unist/2.0.6:
     resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==}
     dev: false
@@ -3084,6 +3103,10 @@ packages:
     dependencies:
       suf-log: 2.5.3
 
+  /sax/1.2.4:
+    resolution: {integrity: sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==}
+    dev: false
+
   /section-matter/1.0.0:
     resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==}
     engines: {node: '>=4'}
@@ -3151,6 +3174,17 @@ packages:
     resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
     dev: false
 
+  /sitemap/7.1.1:
+    resolution: {integrity: sha512-mK3aFtjz4VdJN0igpIJrinf3EO8U8mxOPsTBzSsy06UtjZQJ3YY3o3Xa7zSc5nMqcMrRwlChHZ18Kxg0caiPBg==}
+    engines: {node: '>=12.0.0', npm: '>=5.6.0'}
+    hasBin: true
+    dependencies:
+      '@types/node': 17.0.45
+      '@types/sax': 1.2.4
+      arg: 5.0.2
+      sax: 1.2.4
+    dev: false
+
   /slash/4.0.0:
     resolution: {integrity: sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==}
     engines: {node: '>=12'}

src/components/Footer.astro

@@ -34,7 +34,7 @@ import Icon from './Icon.astro';
       <div class='max-w-[365px]'>
         <p class='flex items-center text-md'>
           <a
-            class='font-medium text-lg inline-flex items-center hover:text-gray-100 text-white transition-colors hover:text-gray-400'
+            class='font-medium text-lg inline-flex items-center text-white transition-colors hover:text-gray-400'
             href='/'
           >
             <Icon icon='logo' />

src/components/Icon.astro

@@ -1,8 +1,10 @@
 ---
 import { parse } from 'node-html-parser';
+import type { Attributes } from 'node-html-parser/dist/nodes/html';
 
 export interface Props {
   icon: string;
+  class?: string;
 }
 
 async function getSVG(name: string) {

src/icons/construction.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 68 68" width="150px" height="150px"><path fill="#febb50" d="M66,34.0049744C66,51.6779785,51.6779785,66,34.0049744,66C16.321991,66,2,51.6779785,2,34.0049744 C2,16.3320007,16.321991,2,34.0049744,2C51.6779785,2,66,16.3320007,66,34.0049744"/><path d="M28.7714844,28.2364807c0,0.5110168-0.0460205,0.9980164-0.1390076,1.4840088 c-0.6960144,4.0710144-4.256012,7.1669922-8.5240173,7.1669922c-1.4729919,0-2.8529968-0.3709717-4.0699768-1.019989 c-2.7250061-1.4499817-4.5810242-4.3259888-4.5810242-7.631012c0-4.7889709,3.8740234-8.6629944,8.651001-8.6629944 C24.8864746,19.5734863,28.7714844,23.4475098,28.7714844,28.2364807"/><path fill="#fff" d="M25.9624023,25.6797791c0,1.4150085-1.1480103,2.5510254-2.5630188,2.5510254 c-1.4029846,0-2.5509949-1.1360168-2.5509949-2.5510254c0-1.414978,1.1480103-2.5509949,2.5509949-2.5509949 C24.8143921,23.1287842,25.9624023,24.264801,25.9624023,25.6797791"/><path fill="#fff" d="M16.5204773,29.3911743c0,0.9860229-0.8000183,1.7770081-1.7850037,1.7770081 c-0.9779968,0-1.7770081-0.7909851-1.7770081-1.7770081c0-0.9849854,0.7990112-1.7769775,1.7770081-1.7769775 C15.720459,27.6141968,16.5204773,28.406189,16.5204773,29.3911743"/><path d="M33.7592773,40.2129822c-5.9670105,0-10.8210144,4.8580017-10.8210144,10.8310242 c0,0.7630005,0.618988,1.3819885,1.3829956,1.3819885c0.7630005,0,1.382019-0.618988,1.382019-1.3819885 c0-4.447998,3.6139832-8.0660095,8.0559998-8.0660095c4.446991,0,8.065979,3.6180115,8.065979,8.0660095 c0,0.7630005,0.6190186,1.3819885,1.382019,1.3819885c0.7639771,0,1.3829956-0.618988,1.3829956-1.3819885 C44.590271,45.0709839,39.7312622,40.2129822,33.7592773,40.2129822"/><path d="M56.5419922,28.2364807c0,0.5110168-0.0460205,0.9980164-0.1390076,1.4840088 c-0.6960144,4.0710144-4.256012,7.1669922-8.5240173,7.1669922c-1.4719849,0-2.8529968-0.3709717-4.0699768-1.019989 c-2.7250061-1.4499817-4.5810242-4.3259888-4.5810242-7.631012c0-4.7889709,3.8740234-8.6629944,8.651001-8.6629944 C52.6569824,19.5734863,56.5419922,23.4475098,56.5419922,28.2364807"/><path fill="#fff" d="M53.7328796,25.6797791c0,1.4150085-1.1480103,2.5510254-2.5630188,2.5510254 c-1.4029846,0-2.5509949-1.1360168-2.5509949-2.5510254c0-1.414978,1.1480103-2.5509949,2.5509949-2.5509949 C52.5848694,23.1287842,53.7328796,24.264801,53.7328796,25.6797791"/><path fill="#fff" d="M44.2909851,29.3911743c0,0.9860229-0.8000183,1.7770081-1.7850037,1.7770081 c-0.9779968,0-1.7770081-0.7909851-1.7770081-1.7770081c0-0.9849854,0.7990112-1.7769775,1.7770081-1.7769775 C43.4909668,27.6141968,44.2909851,28.406189,44.2909851,29.3911743"/></svg>

src/lib/sitemap.ts

@@ -0,0 +1,16 @@
+import type { SitemapItem } from '@astrojs/sitemap';
+
+export function shouldIndexPage(page: string): boolean {
+  return ![
+    'https://roadmap.sh/404/',
+    'https://roadmap.sh/terms/',
+    'https://roadmap.sh/privacy/',
+  ].includes(page);
+}
+
+export function serialize(item: SitemapItem): SitemapItem {
+  console.log(item);
+  return {
+    ...item,
+  };
+}

src/pages/404.astro

@@ -0,0 +1,27 @@
+---
+import Icon from '../components/Icon.astro';
+import BaseLayout from '../layouts/BaseLayout.astro';
+---
+
+<BaseLayout title='Page not found'>
+  <div class='bg-gray-100'>
+    <div
+      class='py-10 md:py-32 container flex flex-col md:flex-row items-center justify-center gap-7 '
+    >
+      <Icon icon='construction' class='hidden md:block' />
+      <div class='text-left md:text-left'>
+        <h1
+          class='font-extrabold text-transparent leading-tight text-2xl md:text-5xl bg-clip-text bg-gradient-to-t from-black to-gray-600'
+        >
+          Page not found!
+        </h1>
+        <p class='text-md md:text-xl mt-1.5 mb-2'>
+          Sorry, we couldn't find the page you are looking for.
+        </p>
+        <p>
+          <a class="underline text-blue-700" href='/'>Homepage</a> &middot; <a href='/roadmaps' class="underline text-blue-700">Roadmaps</a> &middot; <a href='/videos' class="underline text-blue-700">Videos</a>
+        </p>
+      </div>
+    </div>
+  </div>
+</BaseLayout>