Add SEO configuration for all the pages

src/layouts/BaseLayout.astro

@@ -11,19 +11,14 @@ import { siteConfig } from '../lib/config';
 export interface Props {
   title: string;
   description?: string;
+  keywords?: string[];
   sponsor?: SponsorType;
-  seo: {
-    title: string;
-    description: string;
-    keywords: string[];
-  };
 }
 
 const {
   title = siteConfig.title,
   description = siteConfig.description,
   keywords = siteConfig.keywords,
-  seo,
   sponsor,
 } = Astro.props;
 ---
@@ -36,39 +31,63 @@ const {
     <title>{title}</title>
     <meta name='description' content={description} />
     <meta name='author' content='Kamran Ahmed' />
-    <meta name="keywords" content={ keywords.join(', ')} />
-    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=3.0, minimum-scale=1.0">
-    <meta http-equiv="Content-Language" content="en" />
+    <meta name='keywords' content={keywords.join(', ')} />
+    <meta
+      name='viewport'
+      content='width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=3.0, minimum-scale=1.0'
+    />
+    <meta http-equiv='Content-Language' content='en' />
 
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:creator" content="@kamranahmedse" />
+    <meta name='twitter:card' content='summary_large_image' />
+    <meta name='twitter:creator' content='@kamranahmedse' />
 
-    <meta property="og:image:width" content="1200" />
-    <meta property="og:image:height" content="630" />
-    <meta property="og:image" content="https://roadmap.sh/og-img.png" />
-    <meta property="og:image:alt" content="roadmap.sh" />
-    <meta property="og:site_name" content="roadmap.sh" />
-    <meta property="og:title" content={title } />
-    <meta property="og:description" content={description} />
-    <meta property="og:type" content="website" />
-    <meta property="og:url" content="https://roadmap.sh" />
+    <meta property='og:image:width' content='1200' />
+    <meta property='og:image:height' content='630' />
+    <meta property='og:image' content='https://roadmap.sh/og-img.png' />
+    <meta property='og:image:alt' content='roadmap.sh' />
+    <meta property='og:site_name' content='roadmap.sh' />
+    <meta property='og:title' content={title} />
+    <meta property='og:description' content={description} />
+    <meta property='og:type' content='website' />
+    <meta property='og:url' content='https://roadmap.sh' />
 
-    <meta name="mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-    <meta name="apple-mobile-web-app-title" content="roadmap.sh" />
-    <meta name="application-name" content="roadmap.sh" />
-    
-    <link rel="apple-touch-icon" sizes="180x180" href="/manifest/apple-touch-icon.png" />
-    <meta name="msapplication-TileColor" content="#101010" />
-    <meta name="theme-color" content="#848a9a" />
+    <meta name='mobile-web-app-capable' content='yes' />
+    <meta name='apple-mobile-web-app-capable' content='yes' />
+    <meta
+      name='apple-mobile-web-app-status-bar-style'
+      content='black-translucent'
+    />
+    <meta name='apple-mobile-web-app-title' content='roadmap.sh' />
+    <meta name='application-name' content='roadmap.sh' />
 
-    <link rel="manifest" href="/manifest/manifest.json" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/manifest/icon32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="/manifest/icon16.png" />
-    <link rel="shortcut icon" href="/manifest/favicon.ico" type="image/x-icon" />
+    <link
+      rel='apple-touch-icon'
+      sizes='180x180'
+      href='/manifest/apple-touch-icon.png'
+    />
+    <meta name='msapplication-TileColor' content='#101010' />
+    <meta name='theme-color' content='#848a9a' />
 
-    <link rel="icon" href="/manifest/favicon.ico" type="image/x-icon" />
+    <link rel='manifest' href='/manifest/manifest.json' />
+    <link
+      rel='icon'
+      type='image/png'
+      sizes='32x32'
+      href='/manifest/icon32.png'
+    />
+    <link
+      rel='icon'
+      type='image/png'
+      sizes='16x16'
+      href='/manifest/icon16.png'
+    />
+    <link
+      rel='shortcut icon'
+      href='/manifest/favicon.ico'
+      type='image/x-icon'
+    />
+
+    <link rel='icon' href='/manifest/favicon.ico' type='image/x-icon' />
 
     <slot name='after-header' />
   </head>

src/layouts/MarkdownLayout.astro

@@ -1,8 +1,11 @@
 ---
 import BaseLayout from './BaseLayout.astro';
+
+const { frontmatter = {} } = Astro.props;
+const { title, description } = frontmatter;
 ---
 
-<BaseLayout title='Some'>
+<BaseLayout title={title} description={description}>
   <div class='container prose py-12'>
     <slot />
   </div>

src/lib/topic.ts

@@ -66,7 +66,7 @@ export type BreadcrumbItem = {
 
 export interface TopicFileType {
   url: string;
-  text: string;
+  heading: string;
   file: MarkdownFileType;
   roadmap: RoadmapFrontmatter;
   roadmapId: string;
@@ -102,7 +102,7 @@ export async function getTopicFiles(): Promise<Record<string, TopicFileType>> {
 
     mapping[topicUrl] = {
       url: topicUrl,
-      text: firstHeading?.text,
+      heading: firstHeading?.text,
       file: fileContent,
       roadmap: currentRoadmap.frontmatter,
       roadmapId: roadmapId,

src/pages/[...topicId].astro

@@ -15,10 +15,10 @@ export async function getStaticPaths() {
 }
 
 const { topicId } = Astro.params;
-const { file, breadcrumbs, roadmapId, roadmap } = Astro.props as TopicFileType;
+const { file, breadcrumbs, roadmapId, roadmap, heading } = Astro.props as TopicFileType;
 ---
 
-<BaseLayout title="What is this">
+<BaseLayout title={`${heading} - roadmap.sh`} description={`Free resources to learn ${heading} in ${roadmap.featuredTitle}. Everything you need to know about ${heading} and how it realtes to ${roadmap.featuredTitle}.`}>
   <RoadmapBanner roadmapId={roadmapId} roadmap={roadmap} />
   <div class="bg-gray-50">
     <Breadcrumbs breadcrumbs={breadcrumbs} roadmapId={roadmapId} />

src/pages/[roadmapId]/index.astro

@@ -22,7 +22,12 @@ const roadmapFile = await import(`../../roadmaps/${roadmapId}/${roadmapId}.md`);
 const roadmapData = roadmapFile.frontmatter as RoadmapFrontmatter;
 ---
 
-<BaseLayout title='' sponsor={roadmapData.sponsor}>
+<BaseLayout
+  title={roadmapData?.seo?.title}
+  description={roadmapData.seo.description}
+  keywords={roadmapData.seo.keywords}
+  sponsor={roadmapData.sponsor}
+>
   <RoadmapHeader
     description={roadmapData.description}
     title={roadmapData.title}

src/pages/[roadmapId]/topics.astro

@@ -22,10 +22,10 @@ const roadmapFile = await import(`../../roadmaps/${roadmapId}/${roadmapId}.md`);
 const roadmapData = roadmapFile.frontmatter as RoadmapFrontmatter;
 ---
 
-<BaseLayout title="Topics">
+<BaseLayout title={`${roadmapData.title} Topics`} description={roadmapData.seo.description} keywords={roadmapData.seo.keywords}>
   <RoadmapHeader
     description={roadmapData.description}
-    title={roadmapData.title}
+    title={`${roadmapData.featuredTitle} Topics`}
     roadmapPermalink={`/${roadmapId}`}
     hasSearch={true}
     hasTopics={false}
@@ -45,7 +45,7 @@ const roadmapData = roadmapFile.frontmatter as RoadmapFrontmatter;
 
           return (
             <a
-              data-topic={topic.text.toLowerCase()}
+              data-topic={topic.heading.toLowerCase()}
               class:list={[
                 'cursor-pointer text-sm sm:text-md border-gray-200 border py-1.5 px-2 sm:py-2 sm:px-2.5 rounded-md block mb-0.5 sm:mb-1',
                 {
@@ -56,7 +56,7 @@ const roadmapData = roadmapFile.frontmatter as RoadmapFrontmatter;
               ]}
               href={topic.url}
             >
-              {topic.text}
+              {topic.heading}
             </a>
           );
         })

src/pages/guides/[guideId].astro

@@ -19,13 +19,16 @@ export async function getStaticPaths() {
 
 const { guideId } = Astro.params;
 const { guide } = Astro.props;
+const { frontmatter: guideData } = guide;
 ---
 
-<BaseLayout title='Simple Guide'>
+<BaseLayout title={guideData.seo.title} description={guideData.seo.description}>
   <GuideHeader guide={guide} />
 
   <div class='bg-gray-50 py-5 sm:py-10'>
-    <div class='container prose prose-code:bg-transparent prose-h2:text-3xl prose-h2:mt-4 prose-h2:mb-2 prose-h3:mt-2 prose-img:mt-1'>
+    <div
+      class='container prose prose-code:bg-transparent prose-h2:text-3xl prose-h2:mt-4 prose-h2:mb-2 prose-h3:mt-2 prose-img:mt-1'
+    >
       <guide.Content />
     </div>
   </div>

src/pages/guides/index.astro

@@ -7,7 +7,7 @@ import { getAllGuides } from '../../lib/guide';
 const guides = await getAllGuides();
 ---
 
-<BaseLayout title='Guides'>
+<BaseLayout title='Guides - roadmap.sh' description={'Detailed guides on Software Engineering Topics'}>
   <SimplePageHeader
     title='Guides'
     description='Succinct graphical explanations to engineering topics.'

src/pages/index.astro

@@ -13,7 +13,7 @@ const guides = await getAllGuides();
 const videos = await getAllVideos();
 ---
 
-<BaseLayout title='Developer Roadmaps'>
+<BaseLayout title='Developer Roadmaps' description={"Community driven roadmaps, articles and guides for developers to grow in their career."}>
   <div class='bg-gradient-to-b from-slate-900 to-black'>
     <div class='border-b border-b-slate-900'>
       <div

src/pages/privacy.md

@@ -1,5 +1,6 @@
 ---
 layout: ../layouts/MarkdownLayout.astro
+title: Privacy Policy - roadmap.sh
 ---
 
 # Privacy Policy

src/pages/roadmaps.astro

@@ -8,7 +8,7 @@ const roleRoadmaps = await getRoadmapsByTag('role-roadmap');
 const skillRoadmaps = await getRoadmapsByTag('skill-roadmap');
 ---
 
-<BaseLayout title="Roadmap">
+<BaseLayout title="Developer Roadmaps" description={"Step by step guides and paths to learn different tools or technologies"}>
   <SimplePageHeader
     title="Developer Roadmaps"
     description="Step by step guides and paths to learn different tools or technologies"

src/pages/signup.astro

@@ -3,7 +3,10 @@ import Captcha from '../components/Captcha/Captcha.astro';
 import BaseLayout from '../layouts/BaseLayout.astro';
 ---
 
-<BaseLayout title='Signup'>
+<BaseLayout
+  title='Signup - roadmap.sh'
+  description='Register yourself to receive occasional emails about new roadmaps, updates, guides and videos'
+>
   <div class='container'>
     <div
       class='py-12 sm:py-0 sm:min-h-[550px] sm:max-w-[400px] mx-auto flex items-start sm:items-center flex-col justify-start sm:justify-center'

src/pages/terms.md

@@ -1,5 +1,6 @@
 ---
 layout: ../layouts/MarkdownLayout.astro
+title: Terms and Conditions - roadmap.sh
 ---
 
 # Terms of Service

src/pages/videos/[videoId].astro

@@ -21,11 +21,16 @@ const { videoId } = Astro.params;
 const { video } = Astro.props;
 ---
 
-<BaseLayout title='Simple Video'>
+<BaseLayout
+  title={video.frontmatter.title}
+  description={video.frontmatter.description}
+>
   <VideoHeader video={video} />
 
   <div class='bg-gray-50 py-5 sm:py-10'>
-    <div class='container prose prose-code:bg-transparent prose-h2:text-3xl prose-h2:mt-4 prose-h2:mb-2 prose-h3:mt-2 prose-img:mt-1'>
+    <div
+      class='container prose prose-code:bg-transparent prose-h2:text-3xl prose-h2:mt-4 prose-h2:mb-2 prose-h3:mt-2 prose-img:mt-1'
+    >
       <video.Content />
     </div>
   </div>

src/pages/videos/index.astro

@@ -7,7 +7,10 @@ import { getAllVideos } from '../../lib/video';
 const videos = await getAllVideos();
 ---
 
-<BaseLayout title='Videos'>
+<BaseLayout
+  title='Illustrated Videos - roadmap.sh'
+  description={'Graphical video demonstrations on software engineering topics.'}
+>
   <SimplePageHeader
     title='Videos'
     description='Graphical video demonstrations on software engineering topics.'