From e94d6a8daf6dba20b293eb9c22aa7fbb787c843d Mon Sep 17 00:00:00 2001
From: Arik Chakma <arikchangma@gmail.com>
Date: Mon, 18 Aug 2025 13:48:44 +0600
Subject: [PATCH] wip

---
 src/pages/ai-data-scientist/career-path.astro | 26 +++++-----
 src/pages/ai-data-scientist/lifecycle.astro   | 25 +++++-----
 src/pages/ai-data-scientist/skills.astro      | 25 +++++-----
 src/pages/ai-data-scientist/tools.astro       | 26 +++++-----
 src/pages/ai-data-scientist/vs-ai.astro       | 25 +++++-----
 .../vs-business-analytics.astro               | 25 +++++-----
 .../vs-computer-science.astro                 | 24 +++++-----
 .../ai-data-scientist/vs-cyber-security.astro | 25 +++++-----
 .../ai-data-scientist/vs-data-analytics.astro | 26 +++++-----
 .../vs-data-engineering.astro                 | 26 +++++-----
 .../vs-machine-learning.astro                 | 26 +++++-----
 .../vs-software-engineering.astro             | 25 +++++-----
 .../ai-data-scientist/vs-statistics.astro     | 26 +++++-----
 src/pages/backend/developer-skills.astro      | 25 +++++-----
 src/pages/backend/developer-tools.astro       | 28 +++++------
 src/pages/backend/frameworks.astro            | 31 ++++++------
 src/pages/backend/job-description.astro       | 24 +++++-----
 src/pages/backend/languages.astro             | 31 ++++++------
 src/pages/backend/project-ideas.astro         | 28 +++++------
 src/pages/backend/technologies.astro          | 31 ++++++------
 src/pages/data-analyst/career-path.astro      |  9 ++--
 src/pages/data-analyst/how-to-become.astro    | 25 +++++-----
 src/pages/data-analyst/vs-data-engineer.astro | 27 ++++++-----
 src/pages/devops/automation-tools.astro       | 28 +++++------
 src/pages/devops/automation.astro             | 28 +++++------
 src/pages/devops/best-practices.astro         | 28 +++++------
 src/pages/devops/career-path.astro            | 28 +++++------
 src/pages/devops/devops-engineer.astro        | 26 +++++-----
 src/pages/devops/devops-vs-sre.astro          | 26 +++++-----
 .../how-to-become-devops-engineer.astro       | 26 +++++-----
 src/pages/devops/job-description.astro        | 26 +++++-----
 src/pages/devops/lifecycle.astro              | 28 +++++------
 src/pages/devops/principles.astro             | 28 +++++------
 src/pages/devops/shift-left-testing.astro     | 28 +++++------
 src/pages/devops/skills.astro                 | 28 +++++------
 src/pages/devops/test-automation.astro        | 26 +++++-----
 src/pages/devops/tools.astro                  | 28 +++++------
 src/pages/devops/vs-agile.astro               | 25 +++++-----
 src/pages/devops/vs-developer.astro           | 28 +++++------
 src/pages/devops/vs-devsecops.astro           | 25 +++++-----
 src/pages/devops/vs-full-stack.astro          | 28 +++++------
 src/pages/frontend/developer-skills.astro     | 28 +++++------
 src/pages/frontend/frameworks.astro           | 28 +++++------
 .../how-to-become-frontend-developer.astro    | 26 +++++-----
 src/pages/frontend/job-description.astro      | 28 +++++------
 src/pages/frontend/languages.astro            | 28 +++++------
 src/pages/frontend/technologies.astro         | 30 ++++++------
 .../frontend/web-developer-portfolio.astro    | 28 +++++------
 src/pages/full-stack/developer-skills.astro   | 28 +++++------
 src/pages/full-stack/how-to-become.astro      | 26 +++++-----
 src/pages/full-stack/job-description.astro    | 28 +++++------
 src/pages/full-stack/vs-backend.astro         | 28 +++++------
 .../full-stack/vs-software-engineer.astro     | 28 +++++------
 src/pages/golang/rest-api.astro               | 28 +++++------
 src/pages/golang/vs-java.astro                | 25 +++++-----
 src/pages/guides/[guideId].astro              | 47 -------------------
 src/pages/java/developer-skills.astro         | 27 ++++++-----
 src/pages/java/vs-javascript.astro            | 27 ++++++-----
 src/pages/java/vs-python.astro                | 27 ++++++-----
 src/pages/javascript/vs-typescript.astro      | 25 +++++-----
 src/pages/sql/hard-to-learn.astro             | 29 ++++++------
 src/pages/sql/how-long-to-learn.astro         | 29 ++++++------
 src/pages/sql/vs-mysql.astro                  | 27 ++++++-----
 src/pages/sql/vs-python.astro                 | 28 ++++++-----
 64 files changed, 848 insertions(+), 882 deletions(-)
 delete mode 100644 src/pages/guides/[guideId].astro

diff --git a/src/pages/ai-data-scientist/career-path.astro b/src/pages/ai-data-scientist/career-path.astro
index bca35672d..aa3a97c6f 100644
--- a/src/pages/ai-data-scientist/career-path.astro
+++ b/src/pages/ai-data-scientist/career-path.astro
@@ -1,30 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
-import { replaceVariables } from '../../lib/markdown';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'ai-data-scientist-career-path';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'career-path';
+const roadmapId = 'ai-data-scientist';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={`/ai-data-scientist/career-path`}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/ai-data-scientist/lifecycle.astro b/src/pages/ai-data-scientist/lifecycle.astro
index 9347bca71..dfebe1135 100644
--- a/src/pages/ai-data-scientist/lifecycle.astro
+++ b/src/pages/ai-data-scientist/lifecycle.astro
@@ -1,29 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'ai-data-scientist-lifecycle';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'lifecycle';
+const roadmapId = 'ai-data-scientist';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={`/ai-data-scientist/lifecycle`}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/ai-data-scientist/skills.astro b/src/pages/ai-data-scientist/skills.astro
index bc3e50c76..7451f5750 100644
--- a/src/pages/ai-data-scientist/skills.astro
+++ b/src/pages/ai-data-scientist/skills.astro
@@ -1,29 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'ai-data-scientist-skills';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'skills';
+const roadmapId = 'ai-data-scientist';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={`/ai-data-scientist/skills`}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/ai-data-scientist/tools.astro b/src/pages/ai-data-scientist/tools.astro
index 433b6a9fe..fe6c3dc98 100644
--- a/src/pages/ai-data-scientist/tools.astro
+++ b/src/pages/ai-data-scientist/tools.astro
@@ -1,30 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
-import { replaceVariables } from '../../lib/markdown';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'ai-data-scientist-tools';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'tools';
+const roadmapId = 'ai-data-scientist';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={`/ai-data-scientist/tools`}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/ai-data-scientist/vs-ai.astro b/src/pages/ai-data-scientist/vs-ai.astro
index fa7a21766..d17ad2c6e 100644
--- a/src/pages/ai-data-scientist/vs-ai.astro
+++ b/src/pages/ai-data-scientist/vs-ai.astro
@@ -1,29 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'ai-data-scientist-vs-ai';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'vs-ai';
+const roadmapId = 'ai-data-scientist';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={`/ai-data-scientist/vs-ai`}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/ai-data-scientist/vs-business-analytics.astro b/src/pages/ai-data-scientist/vs-business-analytics.astro
index a1fc61f66..e2d899091 100644
--- a/src/pages/ai-data-scientist/vs-business-analytics.astro
+++ b/src/pages/ai-data-scientist/vs-business-analytics.astro
@@ -1,29 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'ai-data-scientist-vs-business-analytics';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'vs-business-analytics';
+const roadmapId = 'ai-data-scientist';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={`/ai-data-scientist/vs-business-analytics`}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/ai-data-scientist/vs-computer-science.astro b/src/pages/ai-data-scientist/vs-computer-science.astro
index 6df46bde1..7d633397d 100644
--- a/src/pages/ai-data-scientist/vs-computer-science.astro
+++ b/src/pages/ai-data-scientist/vs-computer-science.astro
@@ -1,28 +1,28 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
-import { replaceVariables } from '../../lib/markdown';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'ai-data-scientist-vs-computer-science';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'vs-computer-science';
+const roadmapId = 'ai-data-scientist';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={`/ai-data-scientist/vs-computer-science`}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
   <GuideContent guide={guide!} />
diff --git a/src/pages/ai-data-scientist/vs-cyber-security.astro b/src/pages/ai-data-scientist/vs-cyber-security.astro
index 216ef2390..2cf17a29c 100644
--- a/src/pages/ai-data-scientist/vs-cyber-security.astro
+++ b/src/pages/ai-data-scientist/vs-cyber-security.astro
@@ -1,29 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'ai-data-scientist-vs-cyber-security';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'vs-cyber-security';
+const roadmapId = 'ai-data-scientist';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={`/ai-data-scientist/vs-cyber-security`}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/ai-data-scientist/vs-data-analytics.astro b/src/pages/ai-data-scientist/vs-data-analytics.astro
index 1df2ac4b9..9b09c0b52 100644
--- a/src/pages/ai-data-scientist/vs-data-analytics.astro
+++ b/src/pages/ai-data-scientist/vs-data-analytics.astro
@@ -1,30 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
-import { replaceVariables } from '../../lib/markdown';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'ai-data-scientist-vs-data-analytics';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'vs-data-analytics';
+const roadmapId = 'ai-data-scientist';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={`/ai-data-scientist/vs-data-analytics`}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/ai-data-scientist/vs-data-engineering.astro b/src/pages/ai-data-scientist/vs-data-engineering.astro
index abd369879..3d23de45b 100644
--- a/src/pages/ai-data-scientist/vs-data-engineering.astro
+++ b/src/pages/ai-data-scientist/vs-data-engineering.astro
@@ -1,30 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
-import { replaceVariables } from '../../lib/markdown';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'ai-data-scientist-vs-data-engineering';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'vs-data-engineering';
+const roadmapId = 'ai-data-scientist';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={`/ai-data-scientist/vs-data-engineering`}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/ai-data-scientist/vs-machine-learning.astro b/src/pages/ai-data-scientist/vs-machine-learning.astro
index b9f38bbcf..e492f5850 100644
--- a/src/pages/ai-data-scientist/vs-machine-learning.astro
+++ b/src/pages/ai-data-scientist/vs-machine-learning.astro
@@ -1,30 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
-import { replaceVariables } from '../../lib/markdown';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'ai-data-scientist-vs-machine-learning';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'vs-machine-learning';
+const roadmapId = 'ai-data-scientist';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={`/ai-data-scientist/vs-machine-learning`}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/ai-data-scientist/vs-software-engineering.astro b/src/pages/ai-data-scientist/vs-software-engineering.astro
index 385b72467..6248d6be6 100644
--- a/src/pages/ai-data-scientist/vs-software-engineering.astro
+++ b/src/pages/ai-data-scientist/vs-software-engineering.astro
@@ -1,29 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'ai-data-scientist-vs-software-engineering';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'vs-software-engineering';
+const roadmapId = 'ai-data-scientist';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={`/ai-data-scientist/vs-software-engineering`}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/ai-data-scientist/vs-statistics.astro b/src/pages/ai-data-scientist/vs-statistics.astro
index f67188ee0..c99b09fa8 100644
--- a/src/pages/ai-data-scientist/vs-statistics.astro
+++ b/src/pages/ai-data-scientist/vs-statistics.astro
@@ -1,30 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
-import { replaceVariables } from '../../lib/markdown';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'ai-data-scientist-vs-statistics';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'vs-statistics';
+const roadmapId = 'ai-data-scientist';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={`/ai-data-scientist/vs-statistics`}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/backend/developer-skills.astro b/src/pages/backend/developer-skills.astro
index 3010e657e..63ca4b875 100644
--- a/src/pages/backend/developer-skills.astro
+++ b/src/pages/backend/developer-skills.astro
@@ -1,29 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'backend-developer-skills';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'developer-skills';
+const roadmapId = 'backend';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={`/backend/developer-skills`}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/backend/developer-tools.astro b/src/pages/backend/developer-tools.astro
index d00f49ca1..b71d34920 100644
--- a/src/pages/backend/developer-tools.astro
+++ b/src/pages/backend/developer-tools.astro
@@ -1,30 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
-import { replaceVariables } from '../../lib/markdown';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'backend-developer-tools';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'developer-tools';
+const roadmapId = 'backend';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={`/backend/developer-tools`}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
-  <div slot="changelog-banner" />
+  <GuideContent guide={guide!} client:load />
+  <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/backend/frameworks.astro b/src/pages/backend/frameworks.astro
index aef48f7cb..64f7cb2f6 100644
--- a/src/pages/backend/frameworks.astro
+++ b/src/pages/backend/frameworks.astro
@@ -1,33 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
-import { replaceVariables } from '../../lib/markdown';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'backend-frameworks';
-const guide = await getGuideById(guideId).catch(() => null);
-if (!guide) {
-  return Astro.redirect('/404');
-}
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'frameworks';
+const roadmapId = 'backend';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={`/backend/frameworks`}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
-  <div slot="changelog-banner" />
+  <GuideContent guide={guide!} client:load />
+  <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/backend/job-description.astro b/src/pages/backend/job-description.astro
index 61af69fca..b1d2c0e28 100644
--- a/src/pages/backend/job-description.astro
+++ b/src/pages/backend/job-description.astro
@@ -1,29 +1,29 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
-import { replaceVariables } from '../../lib/markdown';
+import { getOfficialGuide } from '../../queries/official-guide';
 
 const guideId = 'backend-job-description';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const roadmapId = 'backend';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo?.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={replaceVariables(guideData?.seo?.title)}
-  description={replaceVariables(guideData?.seo?.description)}
-  permalink={guideData.excludedBySlug}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
 </BaseLayout>
diff --git a/src/pages/backend/languages.astro b/src/pages/backend/languages.astro
index cd00a4719..5111c4249 100644
--- a/src/pages/backend/languages.astro
+++ b/src/pages/backend/languages.astro
@@ -1,33 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
-import { replaceVariables } from '../../lib/markdown';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'backend-languages';
-const guide = await getGuideById(guideId).catch(() => null);
-if (!guide) {
-  return Astro.redirect('/404');
-}
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'languages';
+const roadmapId = 'backend';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={`/backend/languages`}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
-  <div slot="changelog-banner" />
+  <GuideContent guide={guide!} client:load />
+  <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/backend/project-ideas.astro b/src/pages/backend/project-ideas.astro
index c9d714942..b3f0e0009 100644
--- a/src/pages/backend/project-ideas.astro
+++ b/src/pages/backend/project-ideas.astro
@@ -1,30 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
-import { replaceVariables } from '../../lib/markdown';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'backend-project-ideas';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'project-ideas';
+const roadmapId = 'backend';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={`/backend/project-ideas`}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
-  <div slot="changelog-banner" />
+  <GuideContent guide={guide!} client:load />
+  <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/backend/technologies.astro b/src/pages/backend/technologies.astro
index 0efcd5018..b0a12759f 100644
--- a/src/pages/backend/technologies.astro
+++ b/src/pages/backend/technologies.astro
@@ -1,33 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
-import { replaceVariables } from '../../lib/markdown';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'backend-technologies';
-const guide = await getGuideById(guideId).catch(() => null);
-if (!guide) {
-  return Astro.redirect('/404');
-}
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'technologies';
+const roadmapId = 'backend';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={guideData.excludedBySlug}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
-  <div slot="changelog-banner" />
+  <GuideContent guide={guide!} client:load />
+  <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/data-analyst/career-path.astro b/src/pages/data-analyst/career-path.astro
index a14f15e8a..e5d06342f 100644
--- a/src/pages/data-analyst/career-path.astro
+++ b/src/pages/data-analyst/career-path.astro
@@ -5,7 +5,8 @@ import { getOpenGraphImageUrl } from '../../lib/open-graph';
 import { getOfficialGuide } from '../../queries/official-guide';
 
 const guideId = 'career-path';
-const guide = await getOfficialGuide(guideId, 'data-analyst');
+const roadmapId = 'data-analyst';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
   guide?.seo?.ogImageUrl ||
@@ -13,13 +14,15 @@ const ogImageUrl =
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
   title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
   description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={`/data-analyst/career-path`}
-  canonicalUrl={guide?.seo?.canonicalUrl || ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
   <GuideContent guide={guide!} client:load />
diff --git a/src/pages/data-analyst/how-to-become.astro b/src/pages/data-analyst/how-to-become.astro
index 2d4e2fac6..9e6e9b5b1 100644
--- a/src/pages/data-analyst/how-to-become.astro
+++ b/src/pages/data-analyst/how-to-become.astro
@@ -1,29 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'data-analyst-how-to-become';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'how-to-become';
+const roadmapId = 'data-analyst';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={`/data-analyst/how-to-become`}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/data-analyst/vs-data-engineer.astro b/src/pages/data-analyst/vs-data-engineer.astro
index 71b7f9452..2cca00cb3 100644
--- a/src/pages/data-analyst/vs-data-engineer.astro
+++ b/src/pages/data-analyst/vs-data-engineer.astro
@@ -1,29 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'data-analyst-vs-data-engineer';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'vs-data-engineer';
+const roadmapId = 'data-analyst';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={`/data-analyst/vs-data-engineer`}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
-</BaseLayout>
\ No newline at end of file
+</BaseLayout>
diff --git a/src/pages/devops/automation-tools.astro b/src/pages/devops/automation-tools.astro
index e1b18f847..f6a2c2507 100644
--- a/src/pages/devops/automation-tools.astro
+++ b/src/pages/devops/automation-tools.astro
@@ -1,30 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
-import { replaceVariables } from '../../lib/markdown';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'devops-automation-tools';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'automation-tools';
+const roadmapId = 'devops';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={guideData.excludedBySlug}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
-  <div slot="changelog-banner" />
+  <GuideContent guide={guide!} client:load />
+  <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/devops/automation.astro b/src/pages/devops/automation.astro
index c6f1a3d36..1fda13d5a 100644
--- a/src/pages/devops/automation.astro
+++ b/src/pages/devops/automation.astro
@@ -1,30 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
-import { replaceVariables } from '../../lib/markdown';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'devops-automation';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'automation';
+const roadmapId = 'devops';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={guideData.excludedBySlug}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
-  <div slot="changelog-banner" />
+  <GuideContent guide={guide!} client:load />
+  <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/devops/best-practices.astro b/src/pages/devops/best-practices.astro
index e0ce7f19f..c12bdd063 100644
--- a/src/pages/devops/best-practices.astro
+++ b/src/pages/devops/best-practices.astro
@@ -1,30 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
-import { replaceVariables } from '../../lib/markdown';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'devops-best-practices';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'best-practices';
+const roadmapId = 'devops';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={guideData.excludedBySlug}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
-  <div slot="changelog-banner" />
+  <GuideContent guide={guide!} client:load />
+  <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/devops/career-path.astro b/src/pages/devops/career-path.astro
index 592f9ea57..3a9678945 100644
--- a/src/pages/devops/career-path.astro
+++ b/src/pages/devops/career-path.astro
@@ -1,30 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
-import { replaceVariables } from '../../lib/markdown';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'devops-career-path';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'career-path';
+const roadmapId = 'devops';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={replaceVariables(guideData.seo.title)}
-  description={replaceVariables(guideData.seo.description)}
-  permalink={guideData.excludedBySlug}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
-  <div slot="changelog-banner" />
+  <GuideContent guide={guide!} client:load />
+  <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/devops/devops-engineer.astro b/src/pages/devops/devops-engineer.astro
index abf33c5a8..f5eea49e3 100644
--- a/src/pages/devops/devops-engineer.astro
+++ b/src/pages/devops/devops-engineer.astro
@@ -1,32 +1,32 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
-import { replaceVariables } from '../../lib/markdown';
+import { getOfficialGuide } from '../../queries/official-guide';
 
 export const prerender = false;
 
 const guideId = 'devops-engineer';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const roadmapId = 'devops';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={guideData.excludedBySlug}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
-  <div slot="changelog-banner" />
+  <GuideContent guide={guide!} client:load />
+  <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/devops/devops-vs-sre.astro b/src/pages/devops/devops-vs-sre.astro
index b8a83f091..ff7c00687 100644
--- a/src/pages/devops/devops-vs-sre.astro
+++ b/src/pages/devops/devops-vs-sre.astro
@@ -1,30 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
-import { replaceVariables } from '../../lib/markdown';
+import { getOfficialGuide } from '../../queries/official-guide';
 
 const guideId = 'devops-vs-sre';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const roadmapId = 'devops';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={guideData.excludedBySlug}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
-  <div slot="changelog-banner" />
+  <GuideContent guide={guide!} client:load />
+  <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/devops/how-to-become-devops-engineer.astro b/src/pages/devops/how-to-become-devops-engineer.astro
index e0d333c09..60b34e7c9 100644
--- a/src/pages/devops/how-to-become-devops-engineer.astro
+++ b/src/pages/devops/how-to-become-devops-engineer.astro
@@ -1,30 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
-import { replaceVariables } from '../../lib/markdown';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
+import { getOfficialGuide } from '../../queries/official-guide';
 
 const guideId = 'how-to-become-devops-engineer';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const roadmapId = 'devops';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={guideData.excludedBySlug}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
-  <div slot="changelog-banner" />
+  <GuideContent guide={guide!} client:load />
+  <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/devops/job-description.astro b/src/pages/devops/job-description.astro
index e6455932d..266f08903 100644
--- a/src/pages/devops/job-description.astro
+++ b/src/pages/devops/job-description.astro
@@ -1,30 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
-import { replaceVariables } from '../../lib/markdown';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'devops-job-description';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'job-description';
+const roadmapId = 'devops';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={guideData.excludedBySlug}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/devops/lifecycle.astro b/src/pages/devops/lifecycle.astro
index cdf5c514d..20e5a512c 100644
--- a/src/pages/devops/lifecycle.astro
+++ b/src/pages/devops/lifecycle.astro
@@ -1,30 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
-import { replaceVariables } from '../../lib/markdown';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'devops-lifecycle';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'lifecycle';
+const roadmapId = 'devops';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={guideData.excludedBySlug}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
-  <div slot="changelog-banner" />
+  <GuideContent guide={guide!} client:load />
+  <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/devops/principles.astro b/src/pages/devops/principles.astro
index 6bad64ced..0ff7ae8b8 100644
--- a/src/pages/devops/principles.astro
+++ b/src/pages/devops/principles.astro
@@ -1,30 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
-import { replaceVariables } from '../../lib/markdown';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'devops-principles';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'principles';
+const roadmapId = 'devops';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={guideData.excludedBySlug}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
-  <div slot="changelog-banner" />
+  <GuideContent guide={guide!} client:load />
+  <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/devops/shift-left-testing.astro b/src/pages/devops/shift-left-testing.astro
index 439e7ffb5..3b8a15b99 100644
--- a/src/pages/devops/shift-left-testing.astro
+++ b/src/pages/devops/shift-left-testing.astro
@@ -1,30 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
-import { replaceVariables } from '../../lib/markdown';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'devops-shift-left-testing';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'shift-left-testing';
+const roadmapId = 'devops';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={guideData.excludedBySlug}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
-  <div slot="changelog-banner" />
+  <GuideContent guide={guide!} client:load />
+  <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/devops/skills.astro b/src/pages/devops/skills.astro
index b067817a8..3ce2c1df9 100644
--- a/src/pages/devops/skills.astro
+++ b/src/pages/devops/skills.astro
@@ -1,30 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
-import { replaceVariables } from '../../lib/markdown';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'devops-skills';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'skills';
+const roadmapId = 'devops';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={guideData.excludedBySlug}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
-  <div slot="changelog-banner" />
+  <GuideContent guide={guide!} client:load />
+  <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/devops/test-automation.astro b/src/pages/devops/test-automation.astro
index b03226944..9ec30b444 100644
--- a/src/pages/devops/test-automation.astro
+++ b/src/pages/devops/test-automation.astro
@@ -1,30 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
-import { replaceVariables } from '../../lib/markdown';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'devops-test-automation';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'test-automation';
+const roadmapId = 'devops';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={guideData.excludedBySlug}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/devops/tools.astro b/src/pages/devops/tools.astro
index 2d4be2ac2..cbab7c78a 100644
--- a/src/pages/devops/tools.astro
+++ b/src/pages/devops/tools.astro
@@ -1,30 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
-import { replaceVariables } from '../../lib/markdown';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'devops-tools';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'tools';
+const roadmapId = 'devops';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={guideData.excludedBySlug}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
-  <div slot="changelog-banner" />
+  <GuideContent guide={guide!} client:load />
+  <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/devops/vs-agile.astro b/src/pages/devops/vs-agile.astro
index fa497f10b..7353d5c77 100644
--- a/src/pages/devops/vs-agile.astro
+++ b/src/pages/devops/vs-agile.astro
@@ -1,29 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'devops-vs-agile';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'vs-agile';
+const roadmapId = 'devops';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={guideData.excludedBySlug}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/devops/vs-developer.astro b/src/pages/devops/vs-developer.astro
index 08c31adf0..6b2b51be8 100644
--- a/src/pages/devops/vs-developer.astro
+++ b/src/pages/devops/vs-developer.astro
@@ -1,30 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
-import { replaceVariables } from '../../lib/markdown';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'devops-vs-developer';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'vs-developer';
+const roadmapId = 'devops';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={replaceVariables(guideData.seo.title)}
-  description={replaceVariables(guideData.seo.description)}
-  permalink={guideData.excludedBySlug}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
-  <div slot="changelog-banner" />
+  <GuideContent guide={guide!} client:load />
+  <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/devops/vs-devsecops.astro b/src/pages/devops/vs-devsecops.astro
index c4047865b..4fd5c9c6d 100644
--- a/src/pages/devops/vs-devsecops.astro
+++ b/src/pages/devops/vs-devsecops.astro
@@ -1,29 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'devops-vs-devsecops';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'vs-devsecops';
+const roadmapId = 'devops';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={guideData.excludedBySlug}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/devops/vs-full-stack.astro b/src/pages/devops/vs-full-stack.astro
index 0cff40988..c1bee0320 100644
--- a/src/pages/devops/vs-full-stack.astro
+++ b/src/pages/devops/vs-full-stack.astro
@@ -1,30 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
-import { replaceVariables } from '../../lib/markdown';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'devops-vs-full-stack';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'vs-full-stack';
+const roadmapId = 'devops';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={guideData.excludedBySlug}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
-  <div slot="changelog-banner" />
+  <GuideContent guide={guide!} client:load />
+  <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/frontend/developer-skills.astro b/src/pages/frontend/developer-skills.astro
index dd7c0b5e7..a87e1178f 100644
--- a/src/pages/frontend/developer-skills.astro
+++ b/src/pages/frontend/developer-skills.astro
@@ -1,30 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
-import { replaceVariables } from '../../lib/markdown';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'frontend-developer-skills';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'developer-skills';
+const roadmapId = 'frontend';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={guideData.excludedBySlug}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
-  <div slot="changelog-banner" />
+  <GuideContent guide={guide!} client:load />
+  <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/frontend/frameworks.astro b/src/pages/frontend/frameworks.astro
index fd535680e..db4814399 100644
--- a/src/pages/frontend/frameworks.astro
+++ b/src/pages/frontend/frameworks.astro
@@ -1,30 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
-import { replaceVariables } from '../../lib/markdown';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'frontend-frameworks';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'frameworks';
+const roadmapId = 'frontend';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={guideData.excludedBySlug}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
-  <div slot="changelog-banner" />
+  <GuideContent guide={guide!} client:load />
+  <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/frontend/how-to-become-frontend-developer.astro b/src/pages/frontend/how-to-become-frontend-developer.astro
index 353f86660..3f027263c 100644
--- a/src/pages/frontend/how-to-become-frontend-developer.astro
+++ b/src/pages/frontend/how-to-become-frontend-developer.astro
@@ -1,30 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
-import { replaceVariables } from '../../lib/markdown';
+import { getOfficialGuide } from '../../queries/official-guide';
 
 const guideId = 'how-to-become-frontend-developer';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const roadmapId = 'frontend';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={guideData.excludedBySlug}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
-  <div slot="changelog-banner" />
+  <GuideContent guide={guide!} client:load />
+  <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/frontend/job-description.astro b/src/pages/frontend/job-description.astro
index 5aaa73729..dd2f09e67 100644
--- a/src/pages/frontend/job-description.astro
+++ b/src/pages/frontend/job-description.astro
@@ -1,30 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
-import { replaceVariables } from '../../lib/markdown';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'frontend-job-description';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'job-description';
+const roadmapId = 'frontend';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo?.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={replaceVariables(guideData?.seo?.title)}
-  description={replaceVariables(guideData?.seo?.description)}
-  permalink={guideData.excludedBySlug}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
-  <div slot="changelog-banner" />
+  <GuideContent guide={guide!} client:load />
+  <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/frontend/languages.astro b/src/pages/frontend/languages.astro
index ee1ada208..bc2b0cbca 100644
--- a/src/pages/frontend/languages.astro
+++ b/src/pages/frontend/languages.astro
@@ -1,30 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
-import { replaceVariables } from '../../lib/markdown';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'frontend-languages';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'languages';
+const roadmapId = 'frontend';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={guideData.excludedBySlug}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
-  <div slot="changelog-banner" />
+  <GuideContent guide={guide!} client:load />
+  <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/frontend/technologies.astro b/src/pages/frontend/technologies.astro
index 4477e9304..d984361fa 100644
--- a/src/pages/frontend/technologies.astro
+++ b/src/pages/frontend/technologies.astro
@@ -1,32 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'frontend-technologies';
-const guide = await getGuideById(guideId).catch(() => null);
-if (!guide) {
-  return Astro.redirect('/404');
-}
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'technologies';
+const roadmapId = 'frontend';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={guideData.excludedBySlug}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
-  <div slot="changelog-banner" />
+  <GuideContent guide={guide!} client:load />
+  <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/frontend/web-developer-portfolio.astro b/src/pages/frontend/web-developer-portfolio.astro
index 63fe99b9e..6678df95a 100644
--- a/src/pages/frontend/web-developer-portfolio.astro
+++ b/src/pages/frontend/web-developer-portfolio.astro
@@ -1,30 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
-import { replaceVariables } from '../../lib/markdown';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'frontend-web-developer-portfolio';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'web-developer-portfolio';
+const roadmapId = 'frontend';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={guideData.excludedBySlug}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
-  <div slot="changelog-banner" />
+  <GuideContent guide={guide!} client:load />
+  <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/full-stack/developer-skills.astro b/src/pages/full-stack/developer-skills.astro
index d48ecd76d..334447526 100644
--- a/src/pages/full-stack/developer-skills.astro
+++ b/src/pages/full-stack/developer-skills.astro
@@ -1,30 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
-import { replaceVariables } from '../../lib/markdown';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'full-stack-developer-skills';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'developer-skills';
+const roadmapId = 'full-stack';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={guideData.excludedBySlug}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
-  <div slot="changelog-banner" />
+  <GuideContent guide={guide!} client:load />
+  <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/full-stack/how-to-become.astro b/src/pages/full-stack/how-to-become.astro
index e23b2b38c..b9b9e3c4d 100644
--- a/src/pages/full-stack/how-to-become.astro
+++ b/src/pages/full-stack/how-to-become.astro
@@ -1,30 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
-import { replaceVariables } from '../../lib/markdown';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'full-stack-how-to-become';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'how-to-become';
+const roadmapId = 'full-stack';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={guideData.excludedBySlug}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/full-stack/job-description.astro b/src/pages/full-stack/job-description.astro
index d963039fa..29f189793 100644
--- a/src/pages/full-stack/job-description.astro
+++ b/src/pages/full-stack/job-description.astro
@@ -1,30 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
-import { replaceVariables } from '../../lib/markdown';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'full-stack-job-description';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'job-description';
+const roadmapId = 'full-stack';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={guideData.excludedBySlug}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
-  <div slot="changelog-banner" />
+  <GuideContent guide={guide!} client:load />
+  <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/full-stack/vs-backend.astro b/src/pages/full-stack/vs-backend.astro
index 617918749..c4819a680 100644
--- a/src/pages/full-stack/vs-backend.astro
+++ b/src/pages/full-stack/vs-backend.astro
@@ -1,30 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
-import { replaceVariables } from '../../lib/markdown';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'full-stack-vs-backend';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'vs-backend';
+const roadmapId = 'full-stack';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={guideData.excludedBySlug}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
-  <div slot="changelog-banner" />
+  <GuideContent guide={guide!} client:load />
+  <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/full-stack/vs-software-engineer.astro b/src/pages/full-stack/vs-software-engineer.astro
index 6d04fa25d..df3eda974 100644
--- a/src/pages/full-stack/vs-software-engineer.astro
+++ b/src/pages/full-stack/vs-software-engineer.astro
@@ -1,30 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
-import { replaceVariables } from '../../lib/markdown';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'full-stack-vs-software-engineer';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'vs-software-engineer';
+const roadmapId = 'full-stack';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={guideData.excludedBySlug}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
-  <div slot="changelog-banner" />
+  <GuideContent guide={guide!} client:load />
+  <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/golang/rest-api.astro b/src/pages/golang/rest-api.astro
index 90acda95e..606408e0e 100644
--- a/src/pages/golang/rest-api.astro
+++ b/src/pages/golang/rest-api.astro
@@ -1,30 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
-import { replaceVariables } from '../../lib/markdown';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'golang-rest-api';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'rest-api';
+const roadmapId = 'golang';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={guideData.excludedBySlug}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl ?? ''}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
-  <div slot="changelog-banner" />
+  <GuideContent guide={guide!} client:load />
+  <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/golang/vs-java.astro b/src/pages/golang/vs-java.astro
index c8ced7e9d..20016ffed 100644
--- a/src/pages/golang/vs-java.astro
+++ b/src/pages/golang/vs-java.astro
@@ -1,29 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'go-vs-java';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'vs-java';
+const roadmapId = 'golang';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={guideData.excludedBySlug}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl ?? ''}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/guides/[guideId].astro b/src/pages/guides/[guideId].astro
deleted file mode 100644
index c6a7f28c7..000000000
--- a/src/pages/guides/[guideId].astro
+++ /dev/null
@@ -1,47 +0,0 @@
----
-import GuideContent from '../../components/Guide/GuideContent.astro';
-import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getAllGuides, type GuideFileType } from '../../lib/guide';
-import { getOpenGraphImageUrl } from '../../lib/open-graph';
-import { replaceVariables } from '../../lib/markdown';
-
-export const prerender = true;
-
-export interface Props {
-  guide: GuideFileType;
-}
-
-export async function getStaticPaths() {
-  const guides = (await getAllGuides()).filter(
-    (guide) => !guide.frontmatter.excludedBySlug,
-  );
-
-  return guides.map((guide) => ({
-    params: { guideId: guide.id },
-    props: { guide },
-  }));
-}
-
-const { guideId } = Astro.params;
-const { guide } = Astro.props;
-const { frontmatter: guideData, author } = guide;
-
-const ogImageUrl =
-  guideData.seo.ogImageUrl ||
-  getOpenGraphImageUrl({
-    group: 'guide',
-    resourceId: guideId,
-  });
----
-
-<BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={`/guides/${guideId}`}
-  canonicalUrl={guideData.canonicalUrl}
-  ogImageUrl={ogImageUrl}
->
-  <GuideContent guide={guide!} />
-
-  <div slot="changelog-banner" />
-</BaseLayout>
diff --git a/src/pages/java/developer-skills.astro b/src/pages/java/developer-skills.astro
index 28d0b714f..06dbcc625 100644
--- a/src/pages/java/developer-skills.astro
+++ b/src/pages/java/developer-skills.astro
@@ -1,29 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'java-developer-skills';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'developer-skills';
+const roadmapId = 'java';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={guideData.excludedBySlug}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
-  <div slot="changelog-banner" />
+  <GuideContent guide={guide!} client:load />
+  <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/java/vs-javascript.astro b/src/pages/java/vs-javascript.astro
index 46343ae44..7bcc471bf 100644
--- a/src/pages/java/vs-javascript.astro
+++ b/src/pages/java/vs-javascript.astro
@@ -1,29 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'java-vs-javascript';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'vs-javascript';
+const roadmapId = 'java';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={guideData.excludedBySlug}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
-  <div slot="changelog-banner" />
+  <GuideContent guide={guide!} client:load />
+  <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/java/vs-python.astro b/src/pages/java/vs-python.astro
index 7f8632aa5..5dd4b271a 100644
--- a/src/pages/java/vs-python.astro
+++ b/src/pages/java/vs-python.astro
@@ -1,29 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'java-vs-python';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'vs-python';
+const roadmapId = 'java';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={guideData.excludedBySlug}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
-  <div slot="changelog-banner" />
+  <GuideContent guide={guide!} client:load />
+  <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/javascript/vs-typescript.astro b/src/pages/javascript/vs-typescript.astro
index 46351390a..b7d74e8e7 100644
--- a/src/pages/javascript/vs-typescript.astro
+++ b/src/pages/javascript/vs-typescript.astro
@@ -1,29 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'javascript-vs-typescript';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'vs-typescript';
+const roadmapId = 'javascript';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={`/javascript/vs-typescript`}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>
diff --git a/src/pages/sql/hard-to-learn.astro b/src/pages/sql/hard-to-learn.astro
index 75fdeab5d..e33652363 100644
--- a/src/pages/sql/hard-to-learn.astro
+++ b/src/pages/sql/hard-to-learn.astro
@@ -1,29 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'sql-hard-to-learn';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'hard-to-learn';
+const roadmapId = 'sql';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={`/sql/hard-to-learn`}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
-  <div slot="changelog-banner"></div>
-</BaseLayout> 
\ No newline at end of file
+  <GuideContent guide={guide!} client:load />
+  <div slot='changelog-banner'></div>
+</BaseLayout>
diff --git a/src/pages/sql/how-long-to-learn.astro b/src/pages/sql/how-long-to-learn.astro
index bcae6a815..47cfa82e6 100644
--- a/src/pages/sql/how-long-to-learn.astro
+++ b/src/pages/sql/how-long-to-learn.astro
@@ -1,29 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'sql-how-long-to-learn';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'how-long-to-learn';
+const roadmapId = 'sql';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={`/sql/how-long-to-learn`}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
-  <div slot="changelog-banner"></div>
-</BaseLayout> 
\ No newline at end of file
+  <GuideContent guide={guide!} client:load />
+  <div slot='changelog-banner'></div>
+</BaseLayout>
diff --git a/src/pages/sql/vs-mysql.astro b/src/pages/sql/vs-mysql.astro
index 8076683e8..4e6f39ce7 100644
--- a/src/pages/sql/vs-mysql.astro
+++ b/src/pages/sql/vs-mysql.astro
@@ -1,29 +1,30 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'sql-vs-mysql';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'vs-mysql';
+const roadmapId = 'sql';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={`/sql/vs-mysql`}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
-</BaseLayout> 
\ No newline at end of file
+</BaseLayout>
diff --git a/src/pages/sql/vs-python.astro b/src/pages/sql/vs-python.astro
index cec52ad78..6aebf61c0 100644
--- a/src/pages/sql/vs-python.astro
+++ b/src/pages/sql/vs-python.astro
@@ -1,29 +1,31 @@
 ---
-import GuideContent from '../../components/Guide/GuideContent.astro';
+import { GuideContent } from '../../components/Guide/GuideContent';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
+import { getOfficialGuide } from '../../queries/official-guide';
 
-const guideId = 'sql-vs-python';
-const guide = await getGuideById(guideId);
-
-const { frontmatter: guideData } = guide!;
+const guideId = 'vs-python';
+const roadmapId = 'sql';
+const guide = await getOfficialGuide(guideId, roadmapId);
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
-  description={guideData.seo.description}
-  permalink={`/sql/vs-python`}
-  canonicalUrl={guideData.canonicalUrl}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
+  permalink={permalink}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
-</BaseLayout> 
\ No newline at end of file
+</BaseLayout>
+