Add category levels to pages

src/layouts/BaseLayout.astro

@@ -21,6 +21,8 @@ export interface Props {
   initialLoadingMessage?: string;
   permalink?: string;
   jsonLd?: Record<string, unknown>[];
+  categoryLevel0?: string;
+  categoryLevel1?: string;
 }
 
 const {
@@ -34,6 +36,8 @@ const {
   jsonLd = [],
   redirectUrl = '',
   initialLoadingMessage = '',
+  categoryLevel0 = '',
+  categoryLevel1 = '',
 } = Astro.props;
 
 // Remove trailing slashes to consider the page as canonical
@@ -156,6 +160,10 @@ const gaPageIdentifier = Astro.url.pathname
       client:load
     />
 
+
+    { categoryLevel0 && <span id="category-level-0" class="hidden">{categoryLevel0}</span>}
+    { categoryLevel1 && <span id="category-level-1" class="hidden">{categoryLevel1}</span>}
+
     <slot name='after-footer' />
 
     <Analytics />

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

@@ -31,6 +31,8 @@ const { file, breadcrumbs, roadmapId, roadmap, heading } = Astro.props as Roadma
   description={`Free resources to learn ${heading} in ${roadmap.briefTitle}. Everything you need to know about ${heading} and how it relates to ${roadmap.briefTitle}.`}
   noIndex={true}
   permalink={`/${roadmapId}/${topicId}`}
+  categoryLevel0={roadmap.briefTitle}
+  categoryLevel1={heading}
 >
   <RoadmapBanner roadmapId={roadmapId} roadmap={roadmap} />
   <div class='bg-gray-50'>

src/pages/[roadmapId]/index.astro

@@ -61,11 +61,13 @@ const contentContributionLink = `https://github.com/kamranahmedse/developer-road
 <BaseLayout
   permalink={`/${roadmapId}`}
   title={roadmapData?.seo?.title}
-  briefTitle={roadmapData?.briefTitle}
+  briefTitle={roadmapData.briefTitle}
   description={roadmapData.seo.description}
   keywords={roadmapData.seo.keywords}
   noIndex={roadmapData.isUpcoming}
   jsonLd={jsonLdSchema}
+  categoryLevel0={'Roadmaps'}
+  categoryLevel1={roadmapData.briefTitle}
 >
   <!-- Preload the font being used in the renderer -->
   <link

src/pages/best-practices/[bestPracticeId]/[...topicId].astro

@@ -29,6 +29,8 @@ const { file, bestPracticeId, bestPractice, heading } = Astro.props as BestPract
   description={`Free resources to learn ${heading} in ${bestPractice.briefTitle}. Everything you need to know about ${heading} and how it realtes to ${bestPractice.briefTitle}.`}
   noIndex={true}
   permalink={`/best-practices/${bestPracticeId}/${topicId}`}
+  categoryLevel0={bestPractice.briefTitle}
+  categoryLevel1={heading}
 >
   <div class='bg-gray-50'>
     <div class='container py-16 prose prose-p:mt-0 prose-h1:mb-4 prose-h2:mb-3 prose-h2:mt-0'>

src/pages/best-practices/[bestPracticeId]/index.astro

@@ -58,6 +58,8 @@ const contentContributionLink = `https://github.com/kamranahmedse/developer-road
   keywords={bestPracticeData.seo.keywords}
   noIndex={bestPracticeData.isUpcoming}
   jsonLd={jsonLdSchema}
+  categoryLevel0={"Best Practices"}
+  categoryLevel1={bestPracticeData.briefTitle}
 >
   <!-- Preload the font being used in the renderer -->
   <link

src/pages/guides/[guideId].astro

@@ -27,6 +27,8 @@ const { frontmatter: guideData } = guide;
   description={guideData.seo.description}
   permalink={`/guides/${guideId}`}
   canonicalUrl={guideData.canonicalUrl}
+  categoryLevel0={"Guides"}
+  categoryLevel1={guideData.title}
 >
   <GuideHeader guide={guide} />
 

src/pages/videos/[videoId].astro

@@ -24,6 +24,8 @@ const { video } = Astro.props;
   title={video.frontmatter.title}
   description={video.frontmatter.description}
   permalink={`/videos/${videoId}`}
+  categoryLevel0={"Videos"}
+  categoryLevel1={video.frontmatter.title}
 >
   <VideoHeader video={video} />