wip

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 guideId = 'career-path';
-const guide = await getGuideById(guideId);
+const roadmapId = 'ai-data-scientist';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={`/ai-data-scientist/career-path`}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'lifecycle';
-const guide = await getGuideById(guideId);
+const roadmapId = 'ai-data-scientist';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={`/ai-data-scientist/lifecycle`}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'skills';
-const guide = await getGuideById(guideId);
+const roadmapId = 'ai-data-scientist';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={`/ai-data-scientist/skills`}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'tools';
-const guide = await getGuideById(guideId);
+const roadmapId = 'ai-data-scientist';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={`/ai-data-scientist/tools`}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'vs-ai';
-const guide = await getGuideById(guideId);
+const roadmapId = 'ai-data-scientist';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={`/ai-data-scientist/vs-ai`}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'vs-business-analytics';
-const guide = await getGuideById(guideId);
+const roadmapId = 'ai-data-scientist';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={`/ai-data-scientist/vs-business-analytics`}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'vs-computer-science';
-const guide = await getGuideById(guideId);
+const roadmapId = 'ai-data-scientist';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={`/ai-data-scientist/vs-computer-science`}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
   <GuideContent guide={guide!} />

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 guideId = 'vs-cyber-security';
-const guide = await getGuideById(guideId);
+const roadmapId = 'ai-data-scientist';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={`/ai-data-scientist/vs-cyber-security`}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'vs-data-analytics';
-const guide = await getGuideById(guideId);
+const roadmapId = 'ai-data-scientist';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={`/ai-data-scientist/vs-data-analytics`}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'vs-data-engineering';
-const guide = await getGuideById(guideId);
+const roadmapId = 'ai-data-scientist';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={`/ai-data-scientist/vs-data-engineering`}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'vs-machine-learning';
-const guide = await getGuideById(guideId);
+const roadmapId = 'ai-data-scientist';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={`/ai-data-scientist/vs-machine-learning`}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'vs-software-engineering';
-const guide = await getGuideById(guideId);
+const roadmapId = 'ai-data-scientist';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={`/ai-data-scientist/vs-software-engineering`}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'vs-statistics';
-const guide = await getGuideById(guideId);
+const roadmapId = 'ai-data-scientist';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={`/ai-data-scientist/vs-statistics`}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'developer-skills';
-const guide = await getGuideById(guideId);
+const roadmapId = 'backend';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={`/backend/developer-skills`}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'developer-tools';
-const guide = await getGuideById(guideId);
+const roadmapId = 'backend';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={`/backend/developer-tools`}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
-  <div slot="changelog-banner" />
+  <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'frameworks';
-const guide = await getGuideById(guideId).catch(() => null);
+const roadmapId = 'backend';
-if (!guide) {
+const guide = await getOfficialGuide(guideId, roadmapId);
-  return Astro.redirect('/404');
-}
-
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={`/backend/frameworks`}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
-  <div slot="changelog-banner" />
+  <div slot='changelog-banner'></div>
 </BaseLayout>

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 roadmapId = 'backend';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo?.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={replaceVariables(guideData?.seo?.title)}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={replaceVariables(guideData?.seo?.description)}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={guideData.excludedBySlug}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
 </BaseLayout>

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 guideId = 'languages';
-const guide = await getGuideById(guideId).catch(() => null);
+const roadmapId = 'backend';
-if (!guide) {
+const guide = await getOfficialGuide(guideId, roadmapId);
-  return Astro.redirect('/404');
-}
-
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={`/backend/languages`}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
-  <div slot="changelog-banner" />
+  <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'project-ideas';
-const guide = await getGuideById(guideId);
+const roadmapId = 'backend';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={`/backend/project-ideas`}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
-  <div slot="changelog-banner" />
+  <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'technologies';
-const guide = await getGuideById(guideId).catch(() => null);
+const roadmapId = 'backend';
-if (!guide) {
+const guide = await getOfficialGuide(guideId, roadmapId);
-  return Astro.redirect('/404');
-}
-
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={guideData.excludedBySlug}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
-  <div slot="changelog-banner" />
+  <div slot='changelog-banner'></div>
 </BaseLayout>

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`}
+  permalink={permalink}
-  canonicalUrl={guide?.seo?.canonicalUrl || ''}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
   <GuideContent guide={guide!} client:load />

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 guideId = 'how-to-become';
-const guide = await getGuideById(guideId);
+const roadmapId = 'data-analyst';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={`/data-analyst/how-to-become`}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'vs-data-engineer';
-const guide = await getGuideById(guideId);
+const roadmapId = 'data-analyst';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={`/data-analyst/vs-data-engineer`}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'automation-tools';
-const guide = await getGuideById(guideId);
+const roadmapId = 'devops';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={guideData.excludedBySlug}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
-  <div slot="changelog-banner" />
+  <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'automation';
-const guide = await getGuideById(guideId);
+const roadmapId = 'devops';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={guideData.excludedBySlug}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
-  <div slot="changelog-banner" />
+  <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'best-practices';
-const guide = await getGuideById(guideId);
+const roadmapId = 'devops';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={guideData.excludedBySlug}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
-  <div slot="changelog-banner" />
+  <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'career-path';
-const guide = await getGuideById(guideId);
+const roadmapId = 'devops';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={replaceVariables(guideData.seo.title)}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={replaceVariables(guideData.seo.description)}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={guideData.excludedBySlug}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
-  <div slot="changelog-banner" />
+  <div slot='changelog-banner'></div>
 </BaseLayout>

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 roadmapId = 'devops';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={guideData.excludedBySlug}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
-  <div slot="changelog-banner" />
+  <div slot='changelog-banner'></div>
 </BaseLayout>

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 roadmapId = 'devops';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={guideData.excludedBySlug}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
-  <div slot="changelog-banner" />
+  <div slot='changelog-banner'></div>
 </BaseLayout>

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 roadmapId = 'devops';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={guideData.excludedBySlug}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
-  <div slot="changelog-banner" />
+  <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'job-description';
-const guide = await getGuideById(guideId);
+const roadmapId = 'devops';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={guideData.excludedBySlug}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'lifecycle';
-const guide = await getGuideById(guideId);
+const roadmapId = 'devops';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={guideData.excludedBySlug}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
-  <div slot="changelog-banner" />
+  <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'principles';
-const guide = await getGuideById(guideId);
+const roadmapId = 'devops';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={guideData.excludedBySlug}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
-  <div slot="changelog-banner" />
+  <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'shift-left-testing';
-const guide = await getGuideById(guideId);
+const roadmapId = 'devops';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={guideData.excludedBySlug}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
-  <div slot="changelog-banner" />
+  <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'skills';
-const guide = await getGuideById(guideId);
+const roadmapId = 'devops';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={guideData.excludedBySlug}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
-  <div slot="changelog-banner" />
+  <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'test-automation';
-const guide = await getGuideById(guideId);
+const roadmapId = 'devops';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={guideData.excludedBySlug}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'tools';
-const guide = await getGuideById(guideId);
+const roadmapId = 'devops';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={guideData.excludedBySlug}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
-  <div slot="changelog-banner" />
+  <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'vs-agile';
-const guide = await getGuideById(guideId);
+const roadmapId = 'devops';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={guideData.excludedBySlug}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'vs-developer';
-const guide = await getGuideById(guideId);
+const roadmapId = 'devops';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={replaceVariables(guideData.seo.title)}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={replaceVariables(guideData.seo.description)}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={guideData.excludedBySlug}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
-  <div slot="changelog-banner" />
+  <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'vs-devsecops';
-const guide = await getGuideById(guideId);
+const roadmapId = 'devops';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={guideData.excludedBySlug}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'vs-full-stack';
-const guide = await getGuideById(guideId);
+const roadmapId = 'devops';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={guideData.excludedBySlug}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
-  <div slot="changelog-banner" />
+  <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'developer-skills';
-const guide = await getGuideById(guideId);
+const roadmapId = 'frontend';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={guideData.excludedBySlug}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
-  <div slot="changelog-banner" />
+  <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'frameworks';
-const guide = await getGuideById(guideId);
+const roadmapId = 'frontend';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={guideData.excludedBySlug}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
-  <div slot="changelog-banner" />
+  <div slot='changelog-banner'></div>
 </BaseLayout>

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 roadmapId = 'frontend';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={guideData.excludedBySlug}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
-  <div slot="changelog-banner" />
+  <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'job-description';
-const guide = await getGuideById(guideId);
+const roadmapId = 'frontend';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo?.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={replaceVariables(guideData?.seo?.title)}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={replaceVariables(guideData?.seo?.description)}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={guideData.excludedBySlug}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
-  <div slot="changelog-banner" />
+  <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'languages';
-const guide = await getGuideById(guideId);
+const roadmapId = 'frontend';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={guideData.excludedBySlug}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
-  <div slot="changelog-banner" />
+  <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'technologies';
-const guide = await getGuideById(guideId).catch(() => null);
+const roadmapId = 'frontend';
-if (!guide) {
+const guide = await getOfficialGuide(guideId, roadmapId);
-  return Astro.redirect('/404');
-}
-
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={guideData.excludedBySlug}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
-  <div slot="changelog-banner" />
+  <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'web-developer-portfolio';
-const guide = await getGuideById(guideId);
+const roadmapId = 'frontend';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={guideData.excludedBySlug}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
-  <div slot="changelog-banner" />
+  <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'developer-skills';
-const guide = await getGuideById(guideId);
+const roadmapId = 'full-stack';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={guideData.excludedBySlug}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
-  <div slot="changelog-banner" />
+  <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'how-to-become';
-const guide = await getGuideById(guideId);
+const roadmapId = 'full-stack';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={guideData.excludedBySlug}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'job-description';
-const guide = await getGuideById(guideId);
+const roadmapId = 'full-stack';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={guideData.excludedBySlug}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
-  <div slot="changelog-banner" />
+  <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'vs-backend';
-const guide = await getGuideById(guideId);
+const roadmapId = 'full-stack';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={guideData.excludedBySlug}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
-  <div slot="changelog-banner" />
+  <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'vs-software-engineer';
-const guide = await getGuideById(guideId);
+const roadmapId = 'full-stack';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={guideData.excludedBySlug}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
-  <div slot="changelog-banner" />
+  <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'rest-api';
-const guide = await getGuideById(guideId);
+const roadmapId = 'golang';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={guideData.excludedBySlug}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl ?? ''}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
-  <div slot="changelog-banner" />
+  <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'vs-java';
-const guide = await getGuideById(guideId);
+const roadmapId = 'golang';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={guideData.excludedBySlug}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl ?? ''}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>

src/pages/guides/[guideId].astro

@@ -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>

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 guideId = 'developer-skills';
-const guide = await getGuideById(guideId);
+const roadmapId = 'java';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={guideData.excludedBySlug}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
-  <div slot="changelog-banner" />
+  <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'vs-javascript';
-const guide = await getGuideById(guideId);
+const roadmapId = 'java';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={guideData.excludedBySlug}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
-  <div slot="changelog-banner" />
+  <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'vs-python';
-const guide = await getGuideById(guideId);
+const roadmapId = 'java';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={guideData.excludedBySlug}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
-  <div slot="changelog-banner" />
+  <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'vs-typescript';
-const guide = await getGuideById(guideId);
+const roadmapId = 'javascript';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={`/javascript/vs-typescript`}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'hard-to-learn';
-const guide = await getGuideById(guideId);
+const roadmapId = 'sql';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={`/sql/hard-to-learn`}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
-  <div slot="changelog-banner"></div>
+  <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'how-long-to-learn';
-const guide = await getGuideById(guideId);
+const roadmapId = 'sql';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={`/sql/how-long-to-learn`}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
-  <div slot="changelog-banner"></div>
+  <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'vs-mysql';
-const guide = await getGuideById(guideId);
+const roadmapId = 'sql';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={`/sql/vs-mysql`}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>

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 guideId = 'vs-python';
-const guide = await getGuideById(guideId);
+const roadmapId = 'sql';
-
+const guide = await getOfficialGuide(guideId, roadmapId);
-const { frontmatter: guideData } = guide!;
 
 const ogImageUrl =
-  guideData.seo.ogImageUrl ||
+  guide?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
   });
+
+const permalink = `/${roadmapId}/${guideId}`;
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={guide?.seo?.metaTitle ?? guide?.title ?? ''}
-  description={guideData.seo.description}
+  description={guide?.seo?.metaDescription ?? guide?.description ?? ''}
-  permalink={`/sql/vs-python`}
+  permalink={permalink}
-  canonicalUrl={guideData.canonicalUrl}
+  canonicalUrl={guide?.seo?.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >
-  <GuideContent guide={guide!} />
+  <GuideContent guide={guide!} client:load />
   <div slot='changelog-banner'></div>
 </BaseLayout>
+