Add og images to backend articles

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

@@ -6,6 +6,7 @@ excludedBySlug: '/backend/developer-skills'
 seo:
   title: '8 In-Demand Backend Developer Skills to Master'
   description: 'Learn what the essential backend developer skills are that you should learn and master to advance in your career.'
+  ogImageUrl: 'https://assets.roadmap.sh/guest/backend-developer-skills-30wwu.jpg'
 isNew: false
 type: 'textual'
 date: 2024-02-27

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

@@ -6,6 +6,7 @@ excludedBySlug: '/backend/developer-tools'
 seo:
   title: '25 Essential Backend Development Tools for @currentYear@'
   description: 'Elevate your coding with backend developer tools that bring efficiency, scalability, and innovation to your projects. Improve your development process today!'
+  ogImageUrl: 'https://assets.roadmap.sh/guest/backend-development-tools-xa6xw.jpg'
 isNew: false
 type: 'textual'
 date: 2024-03-19
@@ -18,7 +19,6 @@ tags:
   - 'guide-sitemap'
 ---
 
-
 As developers, we’re not just writing code on a text editor without any other external help. Whether we realize it or not, we’re constantly using different development tools to improve the way we work and the speed at which we can deliver our code.
 
 In this article, we’ll cover 25 backend development tools that are crucial in the web development industry, and as a [backend developer](/backend), you should be aware of them.
@@ -385,9 +385,3 @@ Now, you suddenly have access to hundreds of [community-created extensions](http
 ![Raycast app launcher](https://assets.roadmap.sh/guest/raycast-app-launcher-w5rg3.png)
 
 While it is only available for macOS users, Raycast has become a must-have application for backend developers on this platform. In the end, the faster you can reach for your tools, the more productive you become. And a properly configured Raycast can make your web development process feel like a breeze.
-
-
-
-
-
-

src/data/guides/backend-languages.md

@@ -6,6 +6,7 @@ excludedBySlug: '/backend/languages'
 seo:
   title: 'The 5 Best Backend Development Languages to Master (@currentYear@)'
   description: 'Discover the best backend development languages to learn right now for career development, with practical tips from an experienced developer.'
+  ogImageUrl: 'https://assets.roadmap.sh/guest/backend-development-languages-78dxq.jpg'
 isNew: false
 type: 'textual'
 date: 2024-01-18

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

@@ -6,6 +6,7 @@ excludedBySlug: '/backend/project-ideas'
 seo:
   title: '20 Backend Project Ideas to take you from Beginner to Pro'
   description: 'Seeking backend projects to enhance your skills? Explore our top 20 project ideas, from simple apps to complex systems. Start building today!'
+  ogImageUrl: 'https://assets.roadmap.sh/guest/backend-project-ideas-ovr48.jpg'
 isNew: true
 type: 'textual'
 date: 2024-05-09

src/pages/backend/developer-skills.astro

@@ -4,17 +4,19 @@ import GuideHeader from '../../components/GuideHeader.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
-import {replaceVariables} from "../../lib/markdown";
+import { replaceVariables } from '../../lib/markdown';
 
 const guideId = 'backend-developer-skills';
 const guide = await getGuideById(guideId);
 
 const { frontmatter: guideData } = guide!;
 
-const ogImageUrl = getOpenGraphImageUrl({
+const ogImageUrl =
+  guideData.seo.ogImageUrl ||
+  getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
-});
+  });
 ---
 
 <BaseLayout

src/pages/backend/developer-tools.astro

@@ -11,10 +11,12 @@ const guide = await getGuideById(guideId);
 
 const { frontmatter: guideData } = guide!;
 
-const ogImageUrl = getOpenGraphImageUrl({
+const ogImageUrl =
+  guideData.seo.ogImageUrl ||
+  getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
-});
+  });
 ---
 
 <BaseLayout

src/pages/backend/languages.astro

@@ -14,10 +14,12 @@ if (!guide) {
 
 const { frontmatter: guideData } = guide!;
 
-const ogImageUrl = getOpenGraphImageUrl({
+const ogImageUrl =
+  guideData.seo.ogImageUrl ||
+  getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
-});
+  });
 ---
 
 <BaseLayout

src/pages/backend/project-ideas.astro

@@ -6,15 +6,17 @@ import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
 import { replaceVariables } from '../../lib/markdown';
 
-const guideId = 'backend-project-ideas' ;
+const guideId = 'backend-project-ideas';
 const guide = await getGuideById(guideId);
 
 const { frontmatter: guideData } = guide!;
 
-const ogImageUrl = getOpenGraphImageUrl({
+const ogImageUrl =
+  guideData.seo.ogImageUrl ||
+  getOpenGraphImageUrl({
     group: 'guide',
     resourceId: guideId,
-});
+  });
 ---
 
 <BaseLayout