Add sitemap and 404 page

astro
Kamran Ahmed 2 years ago
parent f4cf194638
commit abbc661858
  1. 29
      astro.config.mjs
  2. 1
      package.json
  3. 34
      pnpm-lock.yaml
  4. 2
      src/components/Footer.astro
  5. 2
      src/components/Icon.astro
  6. 1
      src/icons/construction.svg
  7. 16
      src/lib/sitemap.ts
  8. 27
      src/pages/404.astro

@ -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,
}),
],
});

@ -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",

@ -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'}

@ -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' />

@ -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) {

@ -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>

After

Width:  |  Height:  |  Size: 2.5 KiB

@ -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,
};
}

@ -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>
Loading…
Cancel
Save