Add related guides to backend guides

src/components/Guide/RelatedGuides.tsx

@@ -26,7 +26,7 @@ export function RelatedGuides(props: RelatedGuidesProps) {
   return (
     <div
       className={cn(
-        'relative -mb-5 min-w-[250px] px-5 pt-0 max-lg:hidden lg:pt-10',
+        'relative min-w-[250px] px-5 pt-0 max-lg:hidden lg:pt-10',
       )}
     >
       <h4 className="text-lg font-medium max-lg:hidden">{relatedTitle}</h4>

src/components/Questions/QuestionGuide.astro

@@ -9,6 +9,7 @@ import { TableOfContent } from '../TableOfContent/TableOfContent';
 import { markdownToHtml, replaceVariables } from '../../lib/markdown';
 import { QuestionGroupType } from '../../lib/question-group';
 import { QuestionsList } from './QuestionsList';
+import { RelatedGuides } from '../Guide/RelatedGuides';
 
 interface Props {
   questionGroup: QuestionGroupType;
@@ -65,6 +66,11 @@ const { frontmatter: guideFrontmatter, author } = questionGroup;
   {
     showTableOfContent && (
       <div class='bg-gradient-to-r from-gray-50 py-0 lg:col-start-3 lg:col-end-4 lg:row-start-1'>
+        <RelatedGuides
+          relatedTitle={guideFrontmatter?.relatedTitle}
+          relatedGuides={guideFrontmatter?.relatedGuides || {}}
+          client:load
+        />
         <TableOfContent toc={tableOfContent} client:load />
       </div>
     )

src/components/TableOfContent/TableOfContent.tsx

@@ -1,4 +1,4 @@
-import { useState, type CSSProperties } from 'react';
+import { useState } from 'react';
 import type { HeadingGroupType } from '../../lib/guide';
 import { ChevronDown } from 'lucide-react';
 import { cn } from '../../lib/classname';
@@ -23,7 +23,7 @@ export function TableOfContent(props: TableOfContentProps) {
   return (
     <div
       className={cn(
-        'relative min-w-[250px] px-5 pt-0 max-lg:min-w-full max-lg:max-w-full max-lg:border-none max-lg:px-0 lg:pt-10',
+        'relative min-w-[250px] px-5 pt-0 max-lg:min-w-full max-lg:max-w-full max-lg:border-none max-lg:px-0 lg:pt-5',
         {
           'top-0 lg:!sticky': totalRows <= 20,
         },
@@ -46,7 +46,7 @@ export function TableOfContent(props: TableOfContentProps) {
 
       <ol
         className={cn(
-          'mt-0.5 max-lg:absolute max-lg:top-full max-lg:mt-0 max-lg:w-full space-y-0 max-lg:bg-white max-lg:shadow',
+          'mt-0.5 space-y-0 max-lg:absolute max-lg:top-full max-lg:mt-0 max-lg:w-full max-lg:bg-white max-lg:shadow',
           !isOpen && 'hidden lg:block',
           isOpen && 'block',
         )}
@@ -68,7 +68,7 @@ export function TableOfContent(props: TableOfContentProps) {
             </a>
 
             {heading.children.length > 0 && (
-              <ol className="my-0 ml-4 mt-1 max-lg:ml-0 max-lg:mt-0 max-lg:list-none space-y-0">
+              <ol className="my-0 ml-4 mt-1 space-y-0 max-lg:ml-0 max-lg:mt-0 max-lg:list-none">
                 {heading.children.map((children) => {
                   return (
                     <li key={children.slug}>

src/data/guides/backend-developer-skills.md

@@ -7,6 +7,14 @@ seo:
   title: '8 In-Demand Backend Developer Skills to Master'
   description: 'Learn what the essential backend developer skills are that you should learn and master to advance in your career.'
   ogImageUrl: 'https://assets.roadmap.sh/guest/backend-developer-skills-ece68.jpg'
+relatedTitle: "Other Guides"
+relatedGuides:
+  "The 5 Best Backend Development Languages to Master (2024)": "/backend/languages"
+  "Top 10+ Backend Technologies to Use in 2024: Expert Advice": "/backend/technologies"
+  "Top 7 Backend Frameworks to Use in 2024: Pro Advice": "/backend/frameworks"
+  "50 Popular Backend Developer Interview Questions and Answers": "/questions/backend"
+  "25 Essential Backend Development Tools for 2024": "/backend/developer-tools"
+  "20 Backend Project Ideas to take you from Beginner to Pro": "/backend/project-ideas"
 isNew: false
 type: 'textual'
 date: 2024-02-27

src/data/guides/backend-developer-tools.md

@@ -7,6 +7,14 @@ seo:
   title: '25 Essential Backend Development Tools for @currentYear@'
   description: 'Elevate your coding with backend developer tools that bring efficiency, scalability, and innovation to your projects. Improve your development process today!'
   ogImageUrl: 'https://assets.roadmap.sh/guest/backend-development-tools-ou6el.jpg'
+relatedTitle: "Other Guides"
+relatedGuides:
+  "The 5 Best Backend Development Languages to Master (2024)": "/backend/languages"
+  "Top 10+ Backend Technologies to Use in 2024: Expert Advice": "/backend/technologies"
+  "Top 7 Backend Frameworks to Use in 2024: Pro Advice": "/backend/frameworks"
+  "8 In-Demand Backend Developer Skills to Master": "/backend/developer-skills"
+  "50 Popular Backend Developer Interview Questions and Answers": "/questions/backend"
+  "20 Backend Project Ideas to take you from Beginner to Pro": "/backend/project-ideas"
 isNew: false
 type: 'textual'
 date: 2024-03-19

src/data/guides/backend-frameworks.md

@@ -7,6 +7,14 @@ seo:
   title: 'Top 7 Backend Frameworks to Use in 2024: Pro Advice'
   description: 'Get expert advice on backend frameworks for 2024. Learn about the top 7 frameworks that can elevate your development process.'
   ogImageUrl: 'https://assets.roadmap.sh/guest/top-backend-frameworks-jfpux.jpg'
+relatedTitle: "Other Guides"
+relatedGuides:
+  "The 5 Best Backend Development Languages to Master (2024)": "/backend/languages"
+  "Top 10+ Backend Technologies to Use in 2024: Expert Advice": "/backend/technologies"
+  "8 In-Demand Backend Developer Skills to Master": "/backend/developer-skills"
+  "50 Popular Backend Developer Interview Questions and Answers": "/questions/backend"
+  "25 Essential Backend Development Tools for 2024": "/backend/developer-tools"
+  "20 Backend Project Ideas to take you from Beginner to Pro": "/backend/project-ideas"
 isNew: false
 type: 'textual'
 date: 2024-09-27

src/data/guides/backend-languages.md

@@ -7,6 +7,14 @@ seo:
   title: 'The 5 Best Backend Development Languages to Master (@currentYear@)'
   description: 'Discover the best backend development languages to learn right now for career development, with practical tips from an experienced developer.'
   ogImageUrl: 'https://assets.roadmap.sh/guest/backend-languages-2x930.jpg'
+relatedTitle: "Other Guides"
+relatedGuides:
+  "Top 10+ Backend Technologies to Use in 2024: Expert Advice": "/backend/technologies"
+  "Top 7 Backend Frameworks to Use in 2024: Pro Advice": "/backend/frameworks"
+  "8 In-Demand Backend Developer Skills to Master": "/backend/developer-skills"
+  "50 Popular Backend Developer Interview Questions and Answers": "/questions/backend"
+  "25 Essential Backend Development Tools for 2024": "/backend/developer-tools"
+  "20 Backend Project Ideas to take you from Beginner to Pro": "/backend/project-ideas"
 isNew: false
 type: 'textual'
 date: 2024-01-18

src/data/guides/backend-project-ideas.md

@@ -7,6 +7,14 @@ seo:
   title: '20 Backend Project Ideas to take you from Beginner to Pro'
   description: 'Seeking backend projects to enhance your skills? Explore our top 20 project ideas, from simple apps to complex systems. Start building today!'
   ogImageUrl: 'https://assets.roadmap.sh/guest/backend-project-ideas-zxutw.jpg'
+relatedTitle: "Other Guides"
+relatedGuides:
+  "The 5 Best Backend Development Languages to Master (2024)": "/backend/languages"
+  "Top 10+ Backend Technologies to Use in 2024: Expert Advice": "/backend/technologies"
+  "Top 7 Backend Frameworks to Use in 2024: Pro Advice": "/backend/frameworks"
+  "8 In-Demand Backend Developer Skills to Master": "/backend/developer-skills"
+  "50 Popular Backend Developer Interview Questions and Answers": "/questions/backend"
+  "25 Essential Backend Development Tools for 2024": "/backend/developer-tools"
 isNew: false
 type: 'textual'
 date: 2024-05-09

src/data/guides/backend-technologies.md

@@ -7,6 +7,14 @@ seo:
   title: 'Top 10+ Backend Technologies to Use in @currentYear@: Expert Advice'
   description: 'Looking for the best backend technologies in @currentYear@? Check out our expert list of top tools for developers.'
   ogImageUrl: 'https://assets.roadmap.sh/guest/backend-technologies-pnof4.jpg'
+relatedTitle: "Other Guides"
+relatedGuides:
+  "The 5 Best Backend Development Languages to Master (2024)": "/backend/languages"
+  "Top 7 Backend Frameworks to Use in 2024: Pro Advice": "/backend/frameworks"
+  "8 In-Demand Backend Developer Skills to Master": "/backend/developer-skills"
+  "50 Popular Backend Developer Interview Questions and Answers": "/questions/backend"
+  "25 Essential Backend Development Tools for 2024": "/backend/developer-tools"
+  "20 Backend Project Ideas to take you from Beginner to Pro": "/backend/project-ideas"
 isNew: false
 type: 'textual'
 date: 2024-08-27

src/data/question-groups/backend/backend.md

@@ -16,6 +16,14 @@ seo:
     - 'backend interview questions'
     - 'backend interview'
     - 'backend test'
+relatedTitle: "Other Guides"
+relatedGuides:
+  "The 5 Best Backend Development Languages to Master (2024)": "/backend/languages"
+  "Top 10+ Backend Technologies to Use in 2024: Expert Advice": "/backend/technologies"
+  "Top 7 Backend Frameworks to Use in 2024: Pro Advice": "/backend/frameworks"
+  "8 In-Demand Backend Developer Skills to Master": "/backend/developer-skills"
+  "25 Essential Backend Development Tools for 2024": "/backend/developer-tools"
+  "20 Backend Project Ideas to take you from Beginner to Pro": "/backend/project-ideas"
 sitemap:
   priority: 1
   changefreq: 'monthly'

src/lib/question-group.ts

@@ -17,6 +17,8 @@ interface RawQuestionGroupFrontmatter {
     ogImageUrl?: string;
     keywords: string[];
   };
+  relatedTitle?: string;
+  relatedGuides?: Record<string, string>;
   sitemap: {
     priority: number;
     changefreq: string;