Refactor related guides functionality (#7800)

src/components/Guide/GuideContent.astro

@@ -2,7 +2,6 @@
 import { getGuideTableOfContent, type GuideFileType } from '../../lib/guide';
 import MarkdownFile from '../MarkdownFile.astro';
 import { TableOfContent } from '../TableOfContent/TableOfContent';
-import { replaceVariables } from '../../lib/markdown';
 import { RelatedGuides } from './RelatedGuides';
 
 interface Props {
@@ -16,8 +15,7 @@ const tableOfContent = getGuideTableOfContent(allHeadings);
 
 const showTableOfContent = tableOfContent.length > 0;
 const showRelatedGuides =
-  guide?.frontmatter?.relatedGuides &&
+  guide?.relatedGuides && Object.keys(guide?.relatedGuides).length > 0;
-  Object.keys(guide?.frontmatter?.relatedGuides).length > 0;
 const { frontmatter: guideFrontmatter, author } = guide;
 ---
 
@@ -27,7 +25,7 @@ const { frontmatter: guideFrontmatter, author } = guide;
       <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 || {}}
+          relatedGuides={guide?.relatedGuides || {}}
           client:load
         />
         <TableOfContent toc={tableOfContent} client:load />
@@ -45,7 +43,7 @@ const { frontmatter: guideFrontmatter, author } = guide;
   >
     <MarkdownFile>
       <h1 class='mb-3 text-balance text-4xl font-bold'>
-        {replaceVariables(guideFrontmatter.title)}
+        {guideFrontmatter.title}
       </h1>
       <p class='my-0 flex items-center justify-start text-sm text-gray-400'>
         <a

src/components/GuideHeader.astro

@@ -1,53 +0,0 @@
----
-import type { GuideFileType } from '../lib/guide';
-import { replaceVariables } from '../lib/markdown';
-
-export interface Props {
-  guide: GuideFileType;
-}
-
-const { guide } = Astro.props;
-const { frontmatter, author } = guide;
-
-return undefined;
----
-
-<div class='border-b bg-white py-5 sm:py-12'>
-  <div class='container text-left sm:text-center'>
-    <p
-      class='hidden items-center justify-start text-gray-400 sm:flex sm:justify-center'
-    >
-      {
-        author?.frontmatter && (
-          <>
-            <a
-              href={`/authors/${author.id}`}
-              class='inline-flex items-center font-medium hover:text-gray-600 hover:underline'
-            >
-              <img
-                alt={author.frontmatter.name}
-                src={author.frontmatter.imageUrl}
-                class='mr-2 inline h-5 w-5 rounded-full'
-              />
-              {author.frontmatter.name}
-            </a>
-            <span class='mx-1.5'>&middot;</span>
-          </>
-        )
-      }
-      <span class='capitalize'>{frontmatter.type} Guide</span>
-      <span class='mx-1.5'>&middot;</span>
-      <a
-        class='text-blue-400 hover:text-blue-500 hover:underline'
-        href={`https://github.com/kamranahmedse/developer-roadmap/tree/master/src/data/guides/${guide.id}.md`}
-        target='_blank'>Improve this Guide</a
-      >
-    </p>
-    <h1 class='my-0 text-balance text-2xl font-bold sm:my-3.5 sm:text-5xl'>
-      {replaceVariables(frontmatter.title)}
-    </h1>
-    <p class='hidden text-xl text-gray-400 sm:block'>
-      {replaceVariables(frontmatter.description)}
-    </p>
-  </div>
-</div>

src/components/GuideListItem.astro

@@ -1,7 +1,6 @@
 ---
 import type { GuideFileType, GuideFrontmatter } from '../lib/guide';
-import { replaceVariables } from '../lib/markdown';
+import { type QuestionGroupType } from '../lib/question-group';
-import { QuestionGroupType } from '../lib/question-group';
 
 export interface Props {
   guide: GuideFileType | QuestionGroupType;
@@ -38,7 +37,7 @@ if (isQuestionGroupType(guide)) {
   <span
     class='text-sm transition-transform group-hover:translate-x-2 md:text-base'
   >
-    {replaceVariables(frontmatter.title)}
+    {frontmatter.title}
 
     {
       frontmatter.isNew && (
@@ -46,7 +45,7 @@ if (isQuestionGroupType(guide)) {
           New
           <span class='hidden sm:inline'>
             &middot;
-            {new Date(frontmatter.date).toLocaleString('default', {
+            {new Date(frontmatter.date || '').toLocaleString('default', {
               month: 'long',
             })}
           </span>

src/components/Questions/QuestionGuide.astro

@@ -1,15 +1,11 @@
 ---
-import {
+import { getGuideTableOfContent, type HeadingGroupType } from '../../lib/guide';
-  getGuideTableOfContent,
+import { markdownToHtml } from '../../lib/markdown';
-  type GuideFileType,
+import { type QuestionGroupType } from '../../lib/question-group';
-  HeadingGroupType,
+import { RelatedGuides } from '../Guide/RelatedGuides';
-} from '../../lib/guide';
 import MarkdownFile from '../MarkdownFile.astro';
 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;
@@ -22,14 +18,12 @@ const tableOfContent: HeadingGroupType[] = [
   ...getGuideTableOfContent(allHeadings),
   {
     depth: 2,
-    title: 'Test with Flashcards',
     children: [],
     slug: 'test-with-flashcards',
     text: 'Test yourself with Flashcards',
   },
   {
     depth: 2,
-    title: 'Questions List',
     children: [
       {
         depth: 2,
@@ -68,7 +62,7 @@ const { frontmatter: guideFrontmatter, author } = questionGroup;
       <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 || {}}
+          relatedGuides={questionGroup?.relatedGuides || {}}
           client:load
         />
         <TableOfContent toc={tableOfContent} client:load />
@@ -86,7 +80,7 @@ const { frontmatter: guideFrontmatter, author } = questionGroup;
   >
     <MarkdownFile>
       <h1 class='mb-3 text-balance text-4xl font-bold'>
-        {replaceVariables(guideFrontmatter.title)}
+        {guideFrontmatter.title}
       </h1>
       {
         author && (
@@ -142,8 +136,8 @@ const { frontmatter: guideFrontmatter, author } = questionGroup;
             </h3>
             {questionGroup.questions
               .filter((q) => {
-                return q.topics
+                return q?.topics
-                  .map((t) => t.toLowerCase())
+                  ?.map((t) => t.toLowerCase())
                   .includes(questionLevel);
               })
               .map((q) => (

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

@@ -8,14 +8,7 @@ seo:
   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:
+relatedGuidesId: backend
-  "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"
-  "Backend Developer Job Description [2024 Template]": "/backend/job-description"
 isNew: false
 type: 'textual'
 date: 2024-02-27

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

@@ -8,14 +8,7 @@ seo:
   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:
+relatedGuidesId: backend
-  "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"
-  "Backend Developer Job Description [2024 Template]": "/backend/job-description"
 isNew: false
 type: 'textual'
 date: 2024-03-19

src/data/guides/backend-frameworks.md

@@ -8,14 +8,7 @@ seo:
   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:
+relatedGuidesId: backend
-  "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"
-  "Backend Developer Job Description [2024 Template]": "/backend/job-description"
 isNew: false
 type: 'textual'
 date: 2024-09-27

src/data/guides/backend-job-description.md

@@ -1,21 +1,14 @@
 ---
-title: "Backend Developer Job Description [2024 Template]"
+title: "Backend Developer Job Description [@currentYear@ Template]"
 description: 'Learn how to write the perfect backend developer job description and get my best tips on how to recruit backend dev talent effectively.'
 authorId: ekene
 excludedBySlug: '/backend/job-description'
 seo:
-  title: "Backend Developer Job Description [2024 Template]"
+  title: "Backend Developer Job Description [@currentYear@ Template]"
   description: ''
   ogImageUrl: 'https://assets.roadmap.sh/guest/backend-job-description-nn3ja.png'
 relatedTitle: "Other Guides"
-relatedGuides:
+relatedGuidesId: backend
-  "The 5 Best Backend Development Languages to Master (2024)": "/backend/languages"
-  "Top 7 Backend Frameworks to Use in 2024: Pro Advice": "/backend/frameworks"
-  "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: true
 type: 'textual'
 date: 2024-11-12

src/data/guides/backend-languages.md

@@ -8,14 +8,7 @@ seo:
   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:
+relatedGuidesId: backend
-  "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"
-  "Backend Developer Job Description [2024 Template]": "/backend/job-description"
 isNew: false
 type: 'textual'
 date: 2024-01-18

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

@@ -8,14 +8,7 @@ seo:
   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:
+relatedGuidesId: backend
-  "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"
-  "Backend Developer Job Description [2024 Template]": "/backend/job-description"
 isNew: false
 type: 'textual'
 date: 2024-05-09

src/data/guides/backend-technologies.md

@@ -8,14 +8,7 @@ seo:
   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:
+relatedGuidesId: backend
-  "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"
-  "Backend Developer Job Description [2024 Template]": "/backend/job-description"
 isNew: false
 type: 'textual'
 date: 2024-08-27

src/data/guides/devops-automation-tools.md

@@ -8,15 +8,7 @@ seo:
   description: 'Explore the best DevOps automation tools designed to optimize CI/CD, reduce manual tasks, and drive efficiency in your development cycle.'
   ogImageUrl: 'https://assets.roadmap.sh/guest/best-devops-automation-tools-aoyls.jpg'
 relatedGuidesTitle: 'Other Guides'
-relatedGuides:
+relatedGuidesId: devops
-  'How to become a DevOps Engineer in 2024': '/devops/how-to-become-devops-engineer'
-  'Is DevOps engineering a good career path in 2024?': '/devops/career-path'
-  '10+ In-Demand DevOps Engineer Skills to Master': '/devops/skills'
-  'DevOps engineer vs Full stack developer: Which is best?': '/devops/vs-full-stack'
-  '11 DevOps Principles and Practices to Master: Pro Advice': '/devops/principles'
-  'What Are the 7 Key Phases of the DevOps Lifecycle?': '/devops/lifecycle'
-  'Why Does DevOps Recommend Shift-Left Testing Principles?': '/devops/shift-left-testing'
-  'What is DevOps Automation? 8 Best Practices & Advice': '/devops/automation'
 isNew: true
 type: 'textual'
 date: 2024-11-26

src/data/guides/devops-automation.md

@@ -8,14 +8,7 @@ seo:
   description: 'Streamline your DevOps pipeline! Explore what DevOps automation is and the 8 best practices for seamless delivery.'
   ogImageUrl: 'https://assets.roadmap.sh/guest/what-is-devops-automation-03k11.jpg'
 relatedGuidesTitle: 'Other Guides'
-relatedGuides:
+relatedGuidesId: devops
-  'How to become a DevOps Engineer in 2024': '/devops/how-to-become-devops-engineer'
-  'Is DevOps engineering a good career path in 2024?': '/devops/career-path'
-  '10+ In-Demand DevOps Engineer Skills to Master': '/devops/skills'
-  'DevOps engineer vs Full stack developer: Which is best?': '/devops/vs-full-stack'
-  '11 DevOps Principles and Practices to Master: Pro Advice': '/devops/principles'
-  'What Are the 7 Key Phases of the DevOps Lifecycle?': '/devops/lifecycle'
-  'Why Does DevOps Recommend Shift-Left Testing Principles?': '/devops/shift-left-testing'
 isNew: true
 type: 'textual'
 date: 2024-11-05

src/data/guides/devops-best-practices.md

@@ -8,14 +8,7 @@ seo:
   description: 'Learn DevOps best practices for building efficient workflows, from code integration to monitoring, and avoid common DevOps anti-patterns.'
   ogImageUrl: 'https://assets.roadmap.sh/guest/devops-best-practices-4yhmb.jpg'
 relatedTitle: "Other Guides"
-relatedGuides:
+relatedGuidesId: devops
-  'How to become a DevOps Engineer in 2024': '/devops/how-to-become-devops-engineer'
-  'Is DevOps engineering a good career path in 2024?': '/devops/career-path'
-  '10+ In-Demand DevOps Engineer Skills to Master': '/devops/skills'
-  'DevOps engineer vs Full stack developer: Which is best?': '/devops/vs-full-stack'
-  '11 DevOps Principles and Practices to Master: Pro Advice': '/devops/principles'
-  'What Are the 7 Key Phases of the DevOps Lifecycle?': '/devops/lifecycle'
-  'Why Does DevOps Recommend Shift-Left Testing Principles?': '/devops/shift-left-testing'
 isNew: true
 type: 'textual'
 date: 2024-11-26

src/data/guides/devops-career-path.md

@@ -8,14 +8,7 @@ seo:
   description: 'Learn why a DevOps career path is a smart choice in 2024. Get insights into demand, growth, and earning potential in DevOps.'
   ogImageUrl: 'https://assets.roadmap.sh/guest/devops-engineer-career-path-2h4r7.jpg'
 relatedGuidesTitle: 'Other Guides'
-relatedGuides:
+relatedGuidesId: devops
-  'How to become a DevOps Engineer in 2024': '/devops/how-to-become-devops-engineer'
-  '10+ In-Demand DevOps Engineer Skills to Master': '/devops/skills'
-  'DevOps engineer vs Full stack developer: Which is best?': '/devops/vs-full-stack'
-  '11 DevOps Principles and Practices to Master: Pro Advice': '/devops/principles'
-  'What Are the 7 Key Phases of the DevOps Lifecycle?': '/devops/lifecycle'
-  'Why Does DevOps Recommend Shift-Left Testing Principles?': '/devops/shift-left-testing'
-  'What is DevOps Automation? 8 Best Practices & Advice': '/devops/automation'
 isNew: false
 type: 'textual'
 date: 2024-08-20

src/data/guides/devops-lifecycle.md

@@ -8,14 +8,7 @@ seo:
   description: 'Master the DevOps lifecycle by exploring its 7 phases, designed to enhance collaboration, streamline processes, and deliver software with agility.'
   ogImageUrl: 'https://assets.roadmap.sh/guest/key-phases-of-devops-lifecycle-788fa.jpg'
 relatedGuidesTitle: 'Other Guides'
-relatedGuides:
+relatedGuidesId: devops
-   'How to become a DevOps Engineer in 2024': '/devops/how-to-become-devops-engineer'
-   'Is DevOps engineering a good career path in 2024?': '/devops/career-path'
-   '10+ In-Demand DevOps Engineer Skills to Master': '/devops/skills'
-   'DevOps engineer vs Full stack developer: Which is best?': '/devops/vs-full-stack'
-   '11 DevOps Principles and Practices to Master: Pro Advice': '/devops/principles'
-   'Why Does DevOps Recommend Shift-Left Testing Principles?': '/devops/shift-left-testing'
-   'What is DevOps Automation? 8 Best Practices & Advice': '/devops/automation'
 isNew: false
 type: 'textual'
 date: 2024-11-01

src/data/guides/devops-principles.md

@@ -8,14 +8,7 @@ seo:
   description: 'Elevate your game by understanding this set of key DevOps principles and practices. Gain pro insights for a more efficient, collaborative workflow!'
   ogImageUrl: 'https://assets.roadmap.sh/guest/devops-engineer-skills-tlace.jpg'
 relatedGuidesTitle: 'Other Guides'
-relatedGuides:
+relatedGuidesId: devops
-  'How to become a DevOps Engineer in 2024': '/devops/how-to-become-devops-engineer'
-  'Is DevOps engineering a good career path in 2024?': '/devops/career-path'
-  '10+ In-Demand DevOps Engineer Skills to Master': '/devops/skills'
-  'DevOps engineer vs Full stack developer: Which is best?': '/devops/vs-full-stack'
-  'What Are the 7 Key Phases of the DevOps Lifecycle?': '/devops/lifecycle'
-  'Why Does DevOps Recommend Shift-Left Testing Principles?': '/devops/shift-left-testing'
-  'What is DevOps Automation? 8 Best Practices & Advice': '/devops/automation'
 isNew: false
 type: 'textual'
 date: 2024-09-24

src/data/guides/devops-shift-left-testing.md

@@ -8,14 +8,7 @@ seo:
   description: 'Understand why DevOps emphasizes shift-left testing to boost early bug detection, reduce costs, and improve release cycles.'
   ogImageUrl: 'https://assets.roadmap.sh/guest/devops-shift-left-testing-16zah.jpg'
 relatedGuidesTitle: 'Other Guides'
-relatedGuides:
+relatedGuidesId: devops
-  'How to become a DevOps Engineer in 2024': '/devops/how-to-become-devops-engineer'
-  'Is DevOps engineering a good career path in 2024?': '/devops/career-path'
-  '10+ In-Demand DevOps Engineer Skills to Master': '/devops/skills'
-  'DevOps engineer vs Full stack developer: Which is best?': '/devops/vs-full-stack'
-  '11 DevOps Principles and Practices to Master: Pro Advice': '/devops/principles'
-  'What Are the 7 Key Phases of the DevOps Lifecycle?': '/devops/lifecycle'
-  'What is DevOps Automation? 8 Best Practices & Advice': '/devops/automation'
 isNew: true
 type: 'textual'
 date: 2024-11-04

src/data/guides/devops-skills.md

@@ -8,14 +8,7 @@ seo:
   description: 'Find out exactly what it takes to be a successful DevOps engineer with my recommendations for essential DevOps skills'
   ogImageUrl: 'https://assets.roadmap.sh/guest/devops-engineer-skills-tlace.jpg'
 relatedGuidesTitle: 'Other Guides'
-relatedGuides:
+relatedGuidesId: devops
-  'How to become a DevOps Engineer in 2024': '/devops/how-to-become-devops-engineer'
-  'Is DevOps engineering a good career path in 2024?': '/devops/career-path'
-  'DevOps engineer vs Full stack developer: Which is best?': '/devops/vs-full-stack'
-  '11 DevOps Principles and Practices to Master: Pro Advice': '/devops/principles'
-  'What Are the 7 Key Phases of the DevOps Lifecycle?': '/devops/lifecycle'
-  'Why Does DevOps Recommend Shift-Left Testing Principles?': '/devops/shift-left-testing'
-  'What is DevOps Automation? 8 Best Practices & Advice': '/devops/automation'
 isNew: false
 type: 'textual'
 date: 2024-09-12

src/data/guides/devops-vs-full-stack.md

@@ -8,14 +8,7 @@ seo:
   description: 'DevOps engineer vs Full stack developer: Compare the roles, required skills, and future prospects to make an informed career choice.'
   ogImageUrl: 'https://assets.roadmap.sh/guest/devops-engineer-vs-full-stack-developer-jccsq.jpg'
 relatedGuidesTitle: 'Other Guides'
-relatedGuides:
+relatedGuidesId: devops
-  'How to become a DevOps Engineer in 2024': '/devops/how-to-become-devops-engineer'
-  'Is DevOps engineering a good career path in 2024?': '/devops/career-path'
-  '10+ In-Demand DevOps Engineer Skills to Master': '/devops/skills'
-  '11 DevOps Principles and Practices to Master: Pro Advice': '/devops/principles'
-  'What Are the 7 Key Phases of the DevOps Lifecycle?': '/devops/lifecycle'
-  'Why Does DevOps Recommend Shift-Left Testing Principles?': '/devops/shift-left-testing'
-  'What is DevOps Automation? 8 Best Practices & Advice': '/devops/automation'
 isNew: false
 type: 'textual'
 date: 2024-10-17

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

@@ -8,14 +8,7 @@ seo:
   description: 'Master these 12 in-demand front end developer skills and become a standout candidate in the web development field.'
   ogImageUrl: 'https://assets.roadmap.sh/guest/frontend-developer-skills-zdpyd.jpg'
 relatedTitle: "Other Guides"
-relatedGuides:
+relatedGuidesId: frontend
-  "How to Become a Front-End Developer in 7 Steps": "/frontend/how-to-become-frontend-developer"
-  "What Front End Programming Languages Should You Learn?": "/frontend/languages"
-  "Top 7 Frontend Frameworks to Use in 2024: Pro Advice": "/frontend/frameworks"
-  "Top 30 Popular Front End Developer Interview Questions": "/questions/frontend"
-  "Top 10 Web Developer Portfolio Templates - A Pro’s Pick": "/frontend/web-developer-portfolio"
-  "Frontend vs. Backend in AI Development": "/frontend/vs-backend-ai"
-  "Frontend Developer Job Description [2024 Template]": "/frontend/job-description"
 isNew: false
 type: 'textual'
 date: 2024-07-04

src/data/guides/frontend-frameworks.md

@@ -8,14 +8,7 @@ seo:
   description: 'Get expert advice on frontend frameworks for 2024. Elevate your web development process with these top picks.'
   ogImageUrl: 'https://assets.roadmap.sh/guest/top-frontend-frameworks-wmqwc.jpg'
 relatedTitle: "Other Guides"
-relatedGuides:
+relatedGuidesId: frontend
-  "How to Become a Front-End Developer in 7 Steps": "/frontend/how-to-become-frontend-developer"
-  "What Front End Programming Languages Should You Learn?": "/frontend/languages"
-  "12 In-Demand Front End Developer Skills to Master": "/frontend/developer-skills"
-  "Top 30 Popular Front End Developer Interview Questions": "/questions/frontend"
-  "Top 10 Web Developer Portfolio Templates - A Pro’s Pick": "/frontend/web-developer-portfolio"
-  "Frontend vs. Backend in AI Development": "/frontend/vs-backend-ai"
-  "Frontend Developer Job Description [2024 Template]": "/frontend/job-description"
 isNew: false
 type: 'textual'
 date: 2024-09-26

src/data/guides/frontend-job-description.md

@@ -1,21 +1,14 @@
 ---
-title: "Frontend Developer Job Description [2024 Template]"
+title: "Frontend Developer Job Description [@currentYear@ Template]"
 description: 'Learn how to write the perfect frontend developer job description and get my best tips on how to recruit frontend dev talent effectively.'
 authorId: william
 excludedBySlug: '/frontend/job-description'
 seo:
-  title: "Frontend Developer Job Description [2024 Template]"
+  title: "Frontend Developer Job Description [@currentYear@ Template]"
   description: 'Learn how to write the perfect frontend developer job description and get my best tips on how to recruit frontend dev talent effectively.'
   ogImageUrl: 'https://assets.roadmap.sh/guest/frontend-developer-job-description-5fwzy.jpg'
 relatedTitle: "Other Guides"
-relatedGuides:
+relatedGuidesId: frontend
-  "How to Become a Front-End Developer in 7 Steps": "/frontend/how-to-become-frontend-developer"
-  "What Front End Programming Languages Should You Learn?": "/frontend/languages"
-  "Top 7 Frontend Frameworks to Use in 2024: Pro Advice": "/frontend/frameworks"
-  "12 In-Demand Front End Developer Skills to Master": "/frontend/developer-skills"
-  "Top 30 Popular Front End Developer Interview Questions": "/questions/frontend"
-  "Top 10 Web Developer Portfolio Templates - A Pro’s Pick": "/frontend/web-developer-portfolio"
-  "Frontend vs. Backend in AI Development": "/frontend/vs-backend-ai"
 isNew: true
 type: 'textual'
 date: 2024-11-04

src/data/guides/frontend-languages.md

@@ -8,14 +8,7 @@ seo:
   description: 'Get ahead in web development. Discover the essential frontend languages every pro developer uses!'
   ogImageUrl: 'https://assets.roadmap.sh/guest/best-front-end-languages-gzngm.png'
 relatedTitle: "Other Guides"
-relatedGuides:
+relatedGuidesId: frontend
-  "How to Become a Front-End Developer in 7 Steps": "/frontend/how-to-become-frontend-developer"
-  "Top 7 Frontend Frameworks to Use in 2024: Pro Advice": "/frontend/frameworks"
-  "12 In-Demand Front End Developer Skills to Master": "/frontend/developer-skills"
-  "Top 30 Popular Front End Developer Interview Questions": "/questions/frontend"
-  "Top 10 Web Developer Portfolio Templates - A Pro’s Pick": "/frontend/web-developer-portfolio"
-  "Frontend vs. Backend in AI Development": "/frontend/vs-backend-ai"
-  "Frontend Developer Job Description [2024 Template]": "/frontend/job-description"
 isNew: false
 type: 'textual'
 date: 2024-05-02

src/data/guides/frontend-vs-backend-ai.md

@@ -8,14 +8,7 @@ seo:
   description: 'Learn the key differences between frontend and backend in AI development, from roles to tools, and how they impact project success.'
   ogImageUrl: 'https://assets.roadmap.sh/guest/frontend-vs-backend-in-ai-43wtm.jpg'
 relatedTitle: "Other Guides"
-relatedGuides:
+relatedGuidesId: frontend
-  "How to Become a Front-End Developer in 7 Steps": "/frontend/how-to-become-frontend-developer"
-  "What Front End Programming Languages Should You Learn?": "/frontend/languages"
-  "Top 7 Frontend Frameworks to Use in 2024: Pro Advice": "/frontend/frameworks"
-  "12 In-Demand Front End Developer Skills to Master": "/frontend/developer-skills"
-  "Top 30 Popular Front End Developer Interview Questions": "/questions/frontend"
-  "Top 10 Web Developer Portfolio Templates - A Pro’s Pick": "/frontend/web-developer-portfolio"
-  "Frontend Developer Job Description [2024 Template]": "/frontend/job-description"
 isNew: false
 type: 'textual'
 date: 2024-10-17

src/data/guides/frontend-web-developer-portfolio.md

@@ -8,14 +8,7 @@ seo:
   description: 'Build an impressive online presence with these 10 handpicked web developer portfolio templates.'
   ogImageUrl: 'https://assets.roadmap.sh/guest/roammap-18-xvyn0.jpg'
 relatedTitle: "Other Guides"
-relatedGuides:
+relatedGuidesId: frontend
-  "How to Become a Front-End Developer in 7 Steps": "/frontend/how-to-become-frontend-developer"
-  "What Front End Programming Languages Should You Learn?": "/frontend/languages"
-  "Top 7 Frontend Frameworks to Use in 2024: Pro Advice": "/frontend/frameworks"
-  "12 In-Demand Front End Developer Skills to Master": "/frontend/developer-skills"
-  "Top 30 Popular Front End Developer Interview Questions": "/questions/frontend"
-  "Frontend vs. Backend in AI Development": "/frontend/vs-backend-ai"
-  "Frontend Developer Job Description [2024 Template]": "/frontend/job-description"
 isNew: false
 type: 'textual'
 date: 2024-10-18

src/data/guides/full-stack-job-description.md

@@ -1,10 +1,10 @@
 ---
-title: 'Full Stack Developer Job Description [2024 Template]'
+title: 'Full Stack Developer Job Description [@currentYear@ Template]'
 description: 'Looking to hire a Fullstack Engineer? Get the complete job description, skills, and responsibilities right here!'
 authorId: william
 excludedBySlug: '/full-stack/job-description'
 seo:
-  title: 'Full Stack Developer Job Description [2024 Template]'
+  title: 'Full Stack Developer Job Description [@currentYear@ Template]'
   description: 'Looking to hire a Fullstack Engineer? Get the complete job description, skills, and responsibilities right here!'
   ogImageUrl: 'https://assets.roadmap.sh/guest/fullstack-job-h15x6.jpg'
 isNew: false

src/data/guides/how-to-become-devops-engineer.md

@@ -8,14 +8,7 @@ seo:
   description: 'Want to become a DevOps engineer? Our @currentYear@ guide covers skills, certifications, and expert career advice. Start your journey today!'
   ogImageUrl: 'https://assets.roadmap.sh/guest/become-devops-engineer-4x2p7.jpg'
 relatedGuidesTitle: 'Other Guides'
-relatedGuides:
+relatedGuidesId: devops
-  'Is DevOps engineering a good career path in 2024?': '/devops/career-path'
-  '10+ In-Demand DevOps Engineer Skills to Master': '/devops/skills'
-  'DevOps engineer vs Full stack developer: Which is best?': '/devops/vs-full-stack'
-  '11 DevOps Principles and Practices to Master: Pro Advice': '/devops/principles'
-  'What Are the 7 Key Phases of the DevOps Lifecycle?': '/devops/lifecycle'
-  'Why Does DevOps Recommend Shift-Left Testing Principles?': '/devops/shift-left-testing'
-  'What is DevOps Automation? 8 Best Practices & Advice': '/devops/automation'
 isNew: false
 type: 'textual'
 date: 2024-06-11

src/data/guides/how-to-become-frontend-developer.md

@@ -8,14 +8,7 @@ seo:
   description: 'Learn how to become a front-end developer in 7 clear steps. Start your coding journey with practical tips and resources today!'
   ogImageUrl: 'https://assets.roadmap.sh/guest/how-to-become-frontend-developer-i23nx.jpg'
 relatedTitle: "Other Guides"
-relatedGuides:
+relatedGuidesId: frontend
-  "What Front End Programming Languages Should You Learn?": "/frontend/languages"
-  "Top 7 Frontend Frameworks to Use in 2024: Pro Advice": "/frontend/frameworks"
-  "12 In-Demand Front End Developer Skills to Master": "/frontend/developer-skills"
-  "Top 30 Popular Front End Developer Interview Questions": "/questions/frontend"
-  "Top 10 Web Developer Portfolio Templates - A Pro’s Pick": "/frontend/web-developer-portfolio"
-  "Frontend vs. Backend in AI Development": "/frontend/vs-backend-ai"
-  "Frontend Developer Job Description [2024 Template]": "/frontend/job-description"
 isNew: false
 type: 'textual'
 date: 2024-08-15

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

@@ -17,14 +17,7 @@ seo:
     - 'backend interview'
     - 'backend test'
 relatedTitle: "Other Guides"
-relatedGuides:
+relatedGuidesId: "backend"
-  "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"
-  "Backend Developer Job Description [2024 Template]": "/backend/job-description"
 sitemap:
   priority: 1
   changefreq: 'monthly'

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

@@ -8,14 +8,7 @@ authorId: 'fernando'
 isNew: false
 date: 2024-05-24
 relatedTitle: "Other Guides"
-relatedGuides:
+relatedGuidesId: 'frontend'
-  "How to Become a Front-End Developer in 7 Steps": "/frontend/how-to-become-frontend-developer"
-  "What Front End Programming Languages Should You Learn?": "/frontend/languages"
-  "Top 7 Frontend Frameworks to Use in 2024: Pro Advice": "/frontend/frameworks"
-  "12 In-Demand Front End Developer Skills to Master": "/frontend/developer-skills"
-  "Top 10 Web Developer Portfolio Templates - A Pro’s Pick": "/frontend/web-developer-portfolio"
-  "Frontend vs. Backend in AI Development": "/frontend/vs-backend-ai"
-  "Frontend Developer Job Description [2024 Template]": "/frontend/job-description"
 seo:
   title: 'Top 30 Popular Front End Developer Interview Questions'
   description: 'Nail your frontend developer interview with these 30 popularly asked questions and answers. Test your knowledge with our quiz cards!'

src/lib/guide.ts

@@ -1,5 +1,6 @@
 import type { MarkdownFileType } from './file';
 import { type AuthorFileType, getAllAuthors } from './author.ts';
+import { replaceVariables } from './markdown.ts';
 
 export interface GuideFrontmatter {
   title: string;
@@ -21,13 +22,14 @@ export interface GuideFrontmatter {
     changefreq: 'daily' | 'weekly' | 'monthly' | 'yearly';
   };
   relatedTitle?: string;
-  relatedGuides?: Record<string, string>;
+  relatedGuidesId?: string;
   tags: string[];
 }
 
 export type GuideFileType = MarkdownFileType<GuideFrontmatter> & {
   id: string;
   author: AuthorFileType;
+  relatedGuides?: Record<string, string>;
 };
 
 /**
@@ -63,13 +65,44 @@ export async function getAllGuides(): Promise<GuideFileType[]> {
   const allAuthors = await getAllAuthors();
 
   const guideFiles = Object.values(guides) as GuideFileType[];
-  const enrichedGuides: GuideFileType[] = guideFiles.map((guideFile) => ({
+
-    ...guideFile,
+  let enrichedGuides: GuideFileType[] = guideFiles.map((guideFile) => {
-    id: guidePathToId(guideFile.file),
+    let relatedGuides: GuideFileType[] = [];
-    author: allAuthors.find(
+    if (guideFile.frontmatter.relatedGuidesId) {
-      (author) => author.id === guideFile.frontmatter.authorId,
+      relatedGuides = guideFiles.filter(
-    )!,
+        (g) =>
-  }));
+          g?.frontmatter?.relatedGuidesId ===
+            guideFile.frontmatter.relatedGuidesId && g.file !== guideFile.file,
+      );
+    }
+
+    return {
+      ...guideFile,
+      id: guidePathToId(guideFile.file),
+      author: allAuthors.find(
+        (author) => author.id === guideFile.frontmatter.authorId,
+      )!,
+      frontmatter: {
+        ...guideFile.frontmatter,
+        title: replaceVariables(guideFile.frontmatter.title),
+        description: replaceVariables(guideFile.frontmatter.description),
+        seo: {
+          ...(guideFile.frontmatter?.seo || {}),
+          title: replaceVariables(guideFile.frontmatter.seo.title),
+          description: replaceVariables(guideFile.frontmatter.seo.description),
+        },
+      },
+      relatedGuides: relatedGuides.reduce(
+        (acc, guide) => {
+          acc[replaceVariables(guide.frontmatter.title)] =
+            guide.frontmatter?.excludedBySlug ||
+            `/guides/${guidePathToId(guideFile.file)}`;
+          return acc;
+        },
+        {} as Record<string, string>,
+      ),
+    };
+  });
 
   return enrichedGuides.sort(
     (a, b) =>

src/lib/question-group.ts

@@ -1,6 +1,7 @@
 import type { MarkdownFileType } from './file';
 import slugify from 'slugify';
-import { getAllAuthors } from './author.ts';
+import { getAllAuthors, type AuthorFileType } from './author.ts';
+import { getAllGuides } from './guide.ts';
 
 interface RawQuestionGroupFrontmatter {
   order: number;
@@ -18,7 +19,7 @@ interface RawQuestionGroupFrontmatter {
     keywords: string[];
   };
   relatedTitle?: string;
-  relatedGuides?: Record<string, string>;
+  relatedGuidesId?: string;
   sitemap: {
     priority: number;
     changefreq: string;
@@ -46,6 +47,8 @@ export type QuestionType = {
 export type QuestionGroupType = RawQuestionGroupFileType & {
   questions: QuestionType[];
   allTopics: string[];
+  author?: AuthorFileType;
+  relatedGuides?: Record<string, string>;
 };
 
 /**
@@ -71,6 +74,7 @@ export async function getAllQuestionGroups(): Promise<QuestionGroupType[]> {
   );
 
   const allAuthors = await getAllAuthors();
+  const allGuides = await getAllGuides();
 
   return Object.values(questionGroupFilesMap)
     .map((questionGroupFile) => {
@@ -114,6 +118,21 @@ export async function getAllQuestionGroups(): Promise<QuestionGroupType[]> {
           return acc;
         }, [] as string[]);
 
+      const relatedGuides = questionGroupFile.frontmatter.relatedGuidesId
+        ? allGuides
+            .filter(
+              (guide) =>
+                guide.id === questionGroupFile.frontmatter.relatedGuidesId,
+            )
+            .reduce(
+              (acc, guide) => {
+                acc[guide.frontmatter.title] = `/guides/${guide.id}`;
+                return acc;
+              },
+              {} as Record<string, string>,
+            )
+        : undefined;
+
       return {
         ...questionGroupFile,
         id: questionGroupFileId,
@@ -122,6 +141,7 @@ export async function getAllQuestionGroups(): Promise<QuestionGroupType[]> {
         author: allAuthors.find(
           (author) => author.id === questionGroupFile.frontmatter.authorId,
         )!,
+        relatedGuides,
       };
     })
     .sort((a, b) => a.frontmatter.order - b.frontmatter.order);

src/pages/backend/developer-skills.astro

@@ -1,10 +1,8 @@
 ---
 import GuideContent from '../../components/Guide/GuideContent.astro';
-import GuideHeader from '../../components/GuideHeader.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
-import { replaceVariables } from '../../lib/markdown';
 
 const guideId = 'backend-developer-skills';
 const guide = await getGuideById(guideId);
@@ -20,13 +18,12 @@ const ogImageUrl =
 ---
 
 <BaseLayout
-  title={replaceVariables(guideData.seo.title)}
+  title={guideData.seo.title}
-  description={replaceVariables(guideData.seo.description)}
+  description={guideData.seo.description}
   permalink={`/backend/developer-skills`}
   canonicalUrl={guideData.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideHeader guide={guide!} />
   <GuideContent guide={guide!} />
-  <div slot="changelog-banner" />
+  <div slot='changelog-banner'></div>
 </BaseLayout>

src/pages/backend/developer-tools.astro

@@ -1,6 +1,5 @@
 ---
 import GuideContent from '../../components/Guide/GuideContent.astro';
-import GuideHeader from '../../components/GuideHeader.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
@@ -20,13 +19,12 @@ const ogImageUrl =
 ---
 
 <BaseLayout
-  title={replaceVariables(guideData.seo.title)}
+  title={guideData.seo.title}
-  description={replaceVariables(guideData.seo.description)}
+  description={guideData.seo.description}
   permalink={`/backend/developer-tools`}
   canonicalUrl={guideData.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideHeader guide={guide!} />
   <GuideContent guide={guide!} />
   <div slot="changelog-banner" />
 </BaseLayout>

src/pages/backend/frameworks.astro

@@ -1,6 +1,5 @@
 ---
 import GuideContent from '../../components/Guide/GuideContent.astro';
-import GuideHeader from '../../components/GuideHeader.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
@@ -23,13 +22,12 @@ const ogImageUrl =
 ---
 
 <BaseLayout
-  title={replaceVariables(guideData.seo.title)}
+  title={guideData.seo.title}
-  description={replaceVariables(guideData.seo.description)}
+  description={guideData.seo.description}
   permalink={`/backend/frameworks`}
   canonicalUrl={guideData.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideHeader guide={guide!} />
   <GuideContent guide={guide!} />
   <div slot="changelog-banner" />
 </BaseLayout>

src/pages/backend/job-description.astro

@@ -1,6 +1,5 @@
 ---
 import GuideContent from '../../components/Guide/GuideContent.astro';
-import GuideHeader from '../../components/GuideHeader.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
@@ -26,6 +25,5 @@ const ogImageUrl =
   canonicalUrl={guideData.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideHeader guide={guide!} />
   <GuideContent guide={guide!} />
 </BaseLayout>

src/pages/backend/languages.astro

@@ -1,6 +1,5 @@
 ---
 import GuideContent from '../../components/Guide/GuideContent.astro';
-import GuideHeader from '../../components/GuideHeader.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
@@ -23,13 +22,12 @@ const ogImageUrl =
 ---
 
 <BaseLayout
-  title={replaceVariables(guideData.seo.title)}
+  title={guideData.seo.title}
-  description={replaceVariables(guideData.seo.description)}
+  description={guideData.seo.description}
   permalink={`/backend/languages`}
   canonicalUrl={guideData.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideHeader guide={guide!} />
   <GuideContent guide={guide!} />
   <div slot="changelog-banner" />
 </BaseLayout>

src/pages/backend/project-ideas.astro

@@ -1,6 +1,5 @@
 ---
 import GuideContent from '../../components/Guide/GuideContent.astro';
-import GuideHeader from '../../components/GuideHeader.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
@@ -20,13 +19,12 @@ const ogImageUrl =
 ---
 
 <BaseLayout
-  title={replaceVariables(guideData.seo.title)}
+  title={guideData.seo.title}
-  description={replaceVariables(guideData.seo.description)}
+  description={guideData.seo.description}
   permalink={`/backend/project-ideas`}
   canonicalUrl={guideData.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideHeader guide={guide!} />
   <GuideContent guide={guide!} />
   <div slot="changelog-banner" />
 </BaseLayout>

src/pages/backend/technologies.astro

@@ -1,6 +1,5 @@
 ---
 import GuideContent from '../../components/Guide/GuideContent.astro';
-import GuideHeader from '../../components/GuideHeader.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
@@ -23,13 +22,12 @@ const ogImageUrl =
 ---
 
 <BaseLayout
-  title={replaceVariables(guideData.seo.title)}
+  title={guideData.seo.title}
-  description={replaceVariables(guideData.seo.description)}
+  description={guideData.seo.description}
   permalink={guide.frontmatter.excludedBySlug}
   canonicalUrl={guideData.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideHeader guide={guide!} />
   <GuideContent guide={guide!} />
   <div slot="changelog-banner" />
 </BaseLayout>

src/pages/devops/automation-tools.astro

@@ -1,6 +1,5 @@
 ---
 import GuideContent from '../../components/Guide/GuideContent.astro';
-import GuideHeader from '../../components/GuideHeader.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
@@ -20,13 +19,12 @@ const ogImageUrl =
 ---
 
 <BaseLayout
-  title={replaceVariables(guideData.seo.title)}
+  title={guideData.seo.title}
-  description={replaceVariables(guideData.seo.description)}
+  description={guideData.seo.description}
   permalink={guide.frontmatter.excludedBySlug}
   canonicalUrl={guideData.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideHeader guide={guide!} />
   <GuideContent guide={guide!} />
   <div slot="changelog-banner" />
 </BaseLayout>

src/pages/devops/automation.astro

@@ -1,6 +1,5 @@
 ---
 import GuideContent from '../../components/Guide/GuideContent.astro';
-import GuideHeader from '../../components/GuideHeader.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
@@ -20,13 +19,12 @@ const ogImageUrl =
 ---
 
 <BaseLayout
-  title={replaceVariables(guideData.seo.title)}
+  title={guideData.seo.title}
-  description={replaceVariables(guideData.seo.description)}
+  description={guideData.seo.description}
   permalink={guide.frontmatter.excludedBySlug}
   canonicalUrl={guideData.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideHeader guide={guide!} />
   <GuideContent guide={guide!} />
   <div slot="changelog-banner" />
 </BaseLayout>

src/pages/devops/best-practices.astro

@@ -1,6 +1,5 @@
 ---
 import GuideContent from '../../components/Guide/GuideContent.astro';
-import GuideHeader from '../../components/GuideHeader.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
@@ -20,13 +19,12 @@ const ogImageUrl =
 ---
 
 <BaseLayout
-  title={replaceVariables(guideData.seo.title)}
+  title={guideData.seo.title}
-  description={replaceVariables(guideData.seo.description)}
+  description={guideData.seo.description}
   permalink={guide.frontmatter.excludedBySlug}
   canonicalUrl={guideData.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideHeader guide={guide!} />
   <GuideContent guide={guide!} />
   <div slot="changelog-banner" />
 </BaseLayout>

src/pages/devops/career-path.astro

@@ -1,6 +1,5 @@
 ---
 import GuideContent from '../../components/Guide/GuideContent.astro';
-import GuideHeader from '../../components/GuideHeader.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
@@ -20,13 +19,12 @@ const ogImageUrl =
 ---
 
 <BaseLayout
-  title={replaceVariables(guideData.seo.title)}
+  title={guideData.seo.title}
-  description={replaceVariables(guideData.seo.description)}
+  description={guideData.seo.description}
   permalink={guide.frontmatter.excludedBySlug}
   canonicalUrl={guideData.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideHeader guide={guide!} />
   <GuideContent guide={guide!} />
   <div slot="changelog-banner" />
 </BaseLayout>

src/pages/devops/devops-engineer.astro

@@ -1,6 +1,5 @@
 ---
 import GuideContent from '../../components/Guide/GuideContent.astro';
-import GuideHeader from '../../components/GuideHeader.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
@@ -20,13 +19,12 @@ const ogImageUrl =
 ---
 
 <BaseLayout
-  title={replaceVariables(guideData.seo.title)}
+  title={guideData.seo.title}
-  description={replaceVariables(guideData.seo.description)}
+  description={guideData.seo.description}
   permalink={guide.frontmatter.excludedBySlug}
   canonicalUrl={guideData.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideHeader guide={guide!} />
   <GuideContent guide={guide!} />
   <div slot="changelog-banner" />
 </BaseLayout>

src/pages/devops/devops-vs-sre.astro

@@ -1,6 +1,5 @@
 ---
 import GuideContent from '../../components/Guide/GuideContent.astro';
-import GuideHeader from '../../components/GuideHeader.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
@@ -20,13 +19,12 @@ const ogImageUrl =
 ---
 
 <BaseLayout
-  title={replaceVariables(guideData.seo.title)}
+  title={guideData.seo.title}
-  description={replaceVariables(guideData.seo.description)}
+  description={guideData.seo.description}
-  permalink={guide.frontmatter.excludedBySlug}
+  permalink={guideData.excludedBySlug}
   canonicalUrl={guideData.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideHeader guide={guide!} />
   <GuideContent guide={guide!} />
   <div slot="changelog-banner" />
 </BaseLayout>

src/pages/devops/how-to-become-devops-engineer.astro

@@ -1,10 +1,9 @@
 ---
 import GuideContent from '../../components/Guide/GuideContent.astro';
-import GuideHeader from '../../components/GuideHeader.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { getGuideById } from '../../lib/guide';
-import { getOpenGraphImageUrl } from '../../lib/open-graph';
 import { replaceVariables } from '../../lib/markdown';
+import { getOpenGraphImageUrl } from '../../lib/open-graph';
 
 const guideId = 'how-to-become-devops-engineer';
 const guide = await getGuideById(guideId);
@@ -20,13 +19,12 @@ const ogImageUrl =
 ---
 
 <BaseLayout
-  title={replaceVariables(guideData.seo.title)}
+  title={guideData.seo.title}
-  description={replaceVariables(guideData.seo.description)}
+  description={guideData.seo.description}
-  permalink={guide.frontmatter.excludedBySlug}
+  permalink={guideData.excludedBySlug}
   canonicalUrl={guideData.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideHeader guide={guide!} />
   <GuideContent guide={guide!} />
   <div slot="changelog-banner" />
 </BaseLayout>

src/pages/devops/lifecycle.astro

@@ -1,6 +1,5 @@
 ---
 import GuideContent from '../../components/Guide/GuideContent.astro';
-import GuideHeader from '../../components/GuideHeader.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
@@ -20,13 +19,12 @@ const ogImageUrl =
 ---
 
 <BaseLayout
-  title={replaceVariables(guideData.seo.title)}
+  title={guideData.seo.title}
-  description={replaceVariables(guideData.seo.description)}
+  description={guideData.seo.description}
-  permalink={guide.frontmatter.excludedBySlug}
+  permalink={guideData.excludedBySlug}
   canonicalUrl={guideData.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideHeader guide={guide!} />
   <GuideContent guide={guide!} />
   <div slot="changelog-banner" />
 </BaseLayout>

src/pages/devops/principles.astro

@@ -1,6 +1,5 @@
 ---
 import GuideContent from '../../components/Guide/GuideContent.astro';
-import GuideHeader from '../../components/GuideHeader.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
@@ -20,13 +19,12 @@ const ogImageUrl =
 ---
 
 <BaseLayout
-  title={replaceVariables(guideData.seo.title)}
+  title={guideData.seo.title}
-  description={replaceVariables(guideData.seo.description)}
+  description={guideData.seo.description}
-  permalink={guide.frontmatter.excludedBySlug}
+  permalink={guideData.excludedBySlug}
   canonicalUrl={guideData.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideHeader guide={guide!} />
   <GuideContent guide={guide!} />
   <div slot="changelog-banner" />
 </BaseLayout>

src/pages/devops/shift-left-testing.astro

@@ -1,6 +1,5 @@
 ---
 import GuideContent from '../../components/Guide/GuideContent.astro';
-import GuideHeader from '../../components/GuideHeader.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
@@ -20,13 +19,12 @@ const ogImageUrl =
 ---
 
 <BaseLayout
-  title={replaceVariables(guideData.seo.title)}
+  title={guideData.seo.title}
-  description={replaceVariables(guideData.seo.description)}
+  description={guideData.seo.description}
-  permalink={guide.frontmatter.excludedBySlug}
+  permalink={guideData.excludedBySlug}
   canonicalUrl={guideData.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideHeader guide={guide!} />
   <GuideContent guide={guide!} />
   <div slot="changelog-banner" />
 </BaseLayout>

src/pages/devops/skills.astro

@@ -1,10 +1,9 @@
 ---
 import GuideContent from '../../components/Guide/GuideContent.astro';
-import GuideHeader from '../../components/GuideHeader.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { getGuideById } from '../../lib/guide';
-import { getOpenGraphImageUrl } from '../../lib/open-graph';
 import { replaceVariables } from '../../lib/markdown';
+import { getOpenGraphImageUrl } from '../../lib/open-graph';
 
 const guideId = 'devops-skills';
 const guide = await getGuideById(guideId);
@@ -20,13 +19,12 @@ const ogImageUrl =
 ---
 
 <BaseLayout
-  title={replaceVariables(guideData.seo.title)}
+  title={guideData.seo.title}
-  description={replaceVariables(guideData.seo.description)}
+  description={guideData.seo.description}
-  permalink={guide.frontmatter.excludedBySlug}
+  permalink={guideData.excludedBySlug}
   canonicalUrl={guideData.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideHeader guide={guide!} />
   <GuideContent guide={guide!} />
   <div slot="changelog-banner" />
 </BaseLayout>

src/pages/devops/vs-full-stack.astro

@@ -1,10 +1,9 @@
 ---
 import GuideContent from '../../components/Guide/GuideContent.astro';
-import GuideHeader from '../../components/GuideHeader.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { getGuideById } from '../../lib/guide';
-import { getOpenGraphImageUrl } from '../../lib/open-graph';
 import { replaceVariables } from '../../lib/markdown';
+import { getOpenGraphImageUrl } from '../../lib/open-graph';
 
 const guideId = 'devops-vs-full-stack';
 const guide = await getGuideById(guideId);
@@ -20,13 +19,12 @@ const ogImageUrl =
 ---
 
 <BaseLayout
-  title={replaceVariables(guideData.seo.title)}
+  title={guideData.seo.title}
-  description={replaceVariables(guideData.seo.description)}
+  description={guideData.seo.description}
-  permalink={guide.frontmatter.excludedBySlug}
+  permalink={guideData.excludedBySlug}
   canonicalUrl={guideData.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideHeader guide={guide!} />
   <GuideContent guide={guide!} />
   <div slot="changelog-banner" />
 </BaseLayout>

src/pages/frontend/developer-skills.astro

@@ -1,10 +1,9 @@
 ---
 import GuideContent from '../../components/Guide/GuideContent.astro';
-import GuideHeader from '../../components/GuideHeader.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { getGuideById } from '../../lib/guide';
-import { getOpenGraphImageUrl } from '../../lib/open-graph';
 import { replaceVariables } from '../../lib/markdown';
+import { getOpenGraphImageUrl } from '../../lib/open-graph';
 
 const guideId = 'frontend-developer-skills';
 const guide = await getGuideById(guideId);
@@ -20,12 +19,12 @@ const ogImageUrl =
 ---
 
 <BaseLayout
-  title={replaceVariables(guideData.seo.title)}
+  title={guideData.seo.title}
-  description={replaceVariables(guideData.seo.description)}
+  description={guideData.seo.description}
-  permalink={guide.frontmatter.excludedBySlug}
+  permalink={guideData.excludedBySlug}
   canonicalUrl={guideData.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideHeader guide={guide!} />
   <GuideContent guide={guide!} />
+  <div slot="changelog-banner" />
 </BaseLayout>

src/pages/frontend/frameworks.astro

@@ -1,10 +1,9 @@
 ---
 import GuideContent from '../../components/Guide/GuideContent.astro';
-import GuideHeader from '../../components/GuideHeader.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { getGuideById } from '../../lib/guide';
-import { getOpenGraphImageUrl } from '../../lib/open-graph';
 import { replaceVariables } from '../../lib/markdown';
+import { getOpenGraphImageUrl } from '../../lib/open-graph';
 
 const guideId = 'frontend-frameworks';
 const guide = await getGuideById(guideId);
@@ -20,12 +19,12 @@ const ogImageUrl =
 ---
 
 <BaseLayout
-  title={replaceVariables(guideData.seo.title)}
+  title={guideData.seo.title}
-  description={replaceVariables(guideData.seo.description)}
+  description={guideData.seo.description}
-  permalink={guide.frontmatter.excludedBySlug}
+  permalink={guideData.excludedBySlug}
   canonicalUrl={guideData.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideHeader guide={guide!} />
   <GuideContent guide={guide!} />
+  <div slot="changelog-banner" />
 </BaseLayout>

src/pages/frontend/how-to-become-frontend-developer.astro

@@ -1,6 +1,5 @@
 ---
 import GuideContent from '../../components/Guide/GuideContent.astro';
-import GuideHeader from '../../components/GuideHeader.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
@@ -20,12 +19,12 @@ const ogImageUrl =
 ---
 
 <BaseLayout
-  title={replaceVariables(guideData.seo.title)}
+  title={guideData.seo.title}
-  description={replaceVariables(guideData.seo.description)}
+  description={guideData.seo.description}
-  permalink={guide.frontmatter.excludedBySlug}
+  permalink={guideData.excludedBySlug}
   canonicalUrl={guideData.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideHeader guide={guide!} />
   <GuideContent guide={guide!} />
+  <div slot="changelog-banner" />
 </BaseLayout>

src/pages/frontend/job-description.astro

@@ -1,6 +1,5 @@
 ---
 import GuideContent from '../../components/Guide/GuideContent.astro';
-import GuideHeader from '../../components/GuideHeader.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
@@ -26,6 +25,6 @@ const ogImageUrl =
   canonicalUrl={guideData.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideHeader guide={guide!} />
   <GuideContent guide={guide!} />
+  <div slot="changelog-banner" />
 </BaseLayout>

src/pages/frontend/languages.astro

@@ -1,10 +1,9 @@
 ---
 import GuideContent from '../../components/Guide/GuideContent.astro';
-import GuideHeader from '../../components/GuideHeader.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { getGuideById } from '../../lib/guide';
-import { getOpenGraphImageUrl } from '../../lib/open-graph';
 import { replaceVariables } from '../../lib/markdown';
+import { getOpenGraphImageUrl } from '../../lib/open-graph';
 
 const guideId = 'frontend-languages';
 const guide = await getGuideById(guideId);
@@ -20,12 +19,12 @@ const ogImageUrl =
 ---
 
 <BaseLayout
-  title={replaceVariables(guideData.seo.title)}
+  title={guideData.seo.title}
-  description={replaceVariables(guideData.seo.description)}
+  description={guideData.seo.description}
-  permalink={guide.frontmatter.excludedBySlug}
+  permalink={guideData.excludedBySlug}
   canonicalUrl={guideData.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideHeader guide={guide!} />
   <GuideContent guide={guide!} />
+  <div slot="changelog-banner" />
 </BaseLayout>

src/pages/frontend/vs-backend-ai.astro

@@ -1,6 +1,5 @@
 ---
 import GuideContent from '../../components/Guide/GuideContent.astro';
-import GuideHeader from '../../components/GuideHeader.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
@@ -20,12 +19,12 @@ const ogImageUrl =
 ---
 
 <BaseLayout
-  title={replaceVariables(guideData.seo.title)}
+  title={guideData.seo.title}
-  description={replaceVariables(guideData.seo.description)}
+  description={guideData.seo.description}
-  permalink={guide.frontmatter.excludedBySlug}
+  permalink={guideData.excludedBySlug}
   canonicalUrl={guideData.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideHeader guide={guide!} />
   <GuideContent guide={guide!} />
+  <div slot="changelog-banner" />
 </BaseLayout>

src/pages/frontend/web-developer-portfolio.astro

@@ -1,6 +1,5 @@
 ---
 import GuideContent from '../../components/Guide/GuideContent.astro';
-import GuideHeader from '../../components/GuideHeader.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
@@ -20,12 +19,12 @@ const ogImageUrl =
 ---
 
 <BaseLayout
-  title={replaceVariables(guideData.seo.title)}
+  title={guideData.seo.title}
-  description={replaceVariables(guideData.seo.description)}
+  description={guideData.seo.description}
-  permalink={guide.frontmatter.excludedBySlug}
+  permalink={guideData.excludedBySlug}
   canonicalUrl={guideData.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideHeader guide={guide!} />
   <GuideContent guide={guide!} />
+  <div slot="changelog-banner" />
 </BaseLayout>

src/pages/full-stack/developer-skills.astro

@@ -1,6 +1,5 @@
 ---
 import GuideContent from '../../components/Guide/GuideContent.astro';
-import GuideHeader from '../../components/GuideHeader.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
@@ -20,12 +19,12 @@ const ogImageUrl =
 ---
 
 <BaseLayout
-  title={replaceVariables(guideData.seo.title)}
+  title={guideData.seo.title}
-  description={replaceVariables(guideData.seo.description)}
+  description={guideData.seo.description}
-  permalink={guide.frontmatter.excludedBySlug}
+  permalink={guideData.excludedBySlug}
   canonicalUrl={guideData.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideHeader guide={guide!} />
   <GuideContent guide={guide!} />
+  <div slot="changelog-banner" />
 </BaseLayout>

src/pages/full-stack/job-description.astro

@@ -1,6 +1,5 @@
 ---
 import GuideContent from '../../components/Guide/GuideContent.astro';
-import GuideHeader from '../../components/GuideHeader.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
@@ -20,12 +19,12 @@ const ogImageUrl =
 ---
 
 <BaseLayout
-  title={replaceVariables(guideData.seo.title)}
+  title={guideData.seo.title}
-  description={replaceVariables(guideData.seo.description)}
+  description={guideData.seo.description}
-  permalink={guide.frontmatter.excludedBySlug}
+  permalink={guideData.excludedBySlug}
   canonicalUrl={guideData.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideHeader guide={guide!} />
   <GuideContent guide={guide!} />
+  <div slot="changelog-banner" />
 </BaseLayout>

src/pages/full-stack/vs-backend.astro

@@ -1,6 +1,5 @@
 ---
 import GuideContent from '../../components/Guide/GuideContent.astro';
-import GuideHeader from '../../components/GuideHeader.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
@@ -20,12 +19,12 @@ const ogImageUrl =
 ---
 
 <BaseLayout
-  title={replaceVariables(guideData.seo.title)}
+  title={guideData.seo.title}
-  description={replaceVariables(guideData.seo.description)}
+  description={guideData.seo.description}
-  permalink={guide.frontmatter.excludedBySlug}
+  permalink={guideData.excludedBySlug}
   canonicalUrl={guideData.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideHeader guide={guide!} />
   <GuideContent guide={guide!} />
+  <div slot="changelog-banner" />
 </BaseLayout>

src/pages/full-stack/vs-software-engineer.astro

@@ -1,6 +1,5 @@
 ---
 import GuideContent from '../../components/Guide/GuideContent.astro';
-import GuideHeader from '../../components/GuideHeader.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
@@ -20,12 +19,12 @@ const ogImageUrl =
 ---
 
 <BaseLayout
-  title={replaceVariables(guideData.seo.title)}
+  title={guideData.seo.title}
-  description={replaceVariables(guideData.seo.description)}
+  description={guideData.seo.description}
-  permalink={guide.frontmatter.excludedBySlug}
+  permalink={guideData.excludedBySlug}
   canonicalUrl={guideData.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideHeader guide={guide!} />
   <GuideContent guide={guide!} />
+  <div slot="changelog-banner" />
 </BaseLayout>

src/pages/guides/[guideId].astro

@@ -1,6 +1,5 @@
 ---
 import GuideContent from '../../components/Guide/GuideContent.astro';
-import GuideHeader from '../../components/GuideHeader.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { getAllGuides, type GuideFileType } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
@@ -34,13 +33,12 @@ const ogImageUrl =
 ---
 
 <BaseLayout
-  title={replaceVariables(guideData.seo.title)}
+  title={guideData.seo.title}
-  description={replaceVariables(guideData.seo.description)}
+  description={guideData.seo.description}
   permalink={`/guides/${guideId}`}
   canonicalUrl={guideData.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideHeader guide={guide} />
   <GuideContent guide={guide!} />
 
   <div slot="changelog-banner" />

src/pages/java/developer-skills.astro

@@ -1,10 +1,8 @@
 ---
 import GuideContent from '../../components/Guide/GuideContent.astro';
-import GuideHeader from '../../components/GuideHeader.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
-import { replaceVariables } from '../../lib/markdown';
 
 const guideId = 'java-developer-skills';
 const guide = await getGuideById(guideId);
@@ -20,12 +18,12 @@ const ogImageUrl =
 ---
 
 <BaseLayout
-  title={replaceVariables(guideData.seo.title)}
+  title={guideData.seo.title}
-  description={replaceVariables(guideData.seo.description)}
+  description={guideData.seo.description}
-  permalink={guide.frontmatter.excludedBySlug}
+  permalink={guideData.excludedBySlug}
   canonicalUrl={guideData.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideHeader guide={guide!} />
   <GuideContent guide={guide!} />
+  <div slot="changelog-banner" />
 </BaseLayout>