Refactor services and layouts: Update related services, add blog post links, and enhance styles

- Changed related service from 'astro-development' to 'full-stack-web-development' in the blog post about Astro.
- Updated related services in 'full-stack-web-development', 'mobile-app-development', and 'saas-mvp-development' JSON files.
- Added Mermaid CSS styles for diagram rendering.
- Enhanced ServiceLayout to include related blog posts based on service slug.
- Removed deprecated services page and its associated logic.
- Removing SEO validation script.

Author: AR10Dev

astro.config.ts

@@ -5,17 +5,68 @@ import solid from "@astrojs/solid-js";
 import tailwindcss from "@tailwindcss/vite";
 import AstroPWA from "@vite-pwa/astro";
 import { defineConfig } from "astro/config";
+import rehypeMermaid from "rehype-mermaid";
+
+type HastNode = {
+  type?: string;
+  tagName?: string;
+  properties?: Record<string, unknown>;
+  children?: HastNode[];
+};
+
+const rehypeMermaidAriaLabel = () => {
+  return (tree: HastNode) => {
+    const visit = (node: HastNode) => {
+      if (
+        node.type === "element" &&
+        node.tagName === "svg" &&
+        typeof node.properties?.id === "string" &&
+        node.properties.id.startsWith("mermaid-")
+      ) {
+        if (!node.properties) {
+          node.properties = {};
+        }
+
+        const properties = node.properties;
+        if (typeof properties["aria-label"] !== "string") {
+          properties["aria-label"] = "Mermaid diagram";
+        }
+      }
+
+      node.children?.forEach(visit);
+    };
+
+    visit(tree);
+  };
+};
 
 // https://astro.build/config
 export default defineConfig({
   site: "https://avaabrazzaq.com", // Used to generate canonical URLs and sitemap entries.
   trailingSlash: "always", // Consistent URL format - all URLs end with /
+  markdown: {
+    syntaxHighlight: {
+      type: "shiki",
+      excludeLangs: ["math", "mermaid"],
+    },
+  },
   vite: {
     plugins: [tailwindcss()],
   },
   integrations: [
     solid(),
-    mdx(),
+    mdx({
+      rehypePlugins: [
+        [
+          rehypeMermaid,
+          {
+            strategy: "inline-svg",
+            dark: true,
+          },
+        ],
+        rehypeMermaidAriaLabel,
+      ],
+    }),
     partytown({
       config: {
         forward: ["dataLayer.push"],

bun.lock

@@ -16,21 +16,23 @@
   },
   "keywords": [],
   "devDependencies": {
-    "@astrojs/mdx": "5.0.2",
-    "@astrojs/sitemap": "3.7.1",
+    "@astrojs/mdx": "5.0.3",
+    "@astrojs/sitemap": "3.7.2",
     "@astrojs/solid-js": "6.0.1",
-    "@biomejs/biome": "2.4.8",
-    "@tailwindcss/typography": "0.5.16",
+    "@biomejs/biome": "2.4.10",
+    "@tailwindcss/typography": "0.5.19",
     "@tailwindcss/vite": "4.2.2",
     "@vite-pwa/astro": "1.2.0",
-    "cspell": "9.7.0",
+    "cspell": "10.0.0",
+    "playwright": "1.59.1",
+    "rehype-mermaid": "3.0.0",
     "tailwindcss": "4.2.2",
     "typescript": "6.0.2"
   },
   "dependencies": {
     "@astrojs/partytown": "2.1.6",
     "@astrojs/rss": "4.0.18",
-    "astro": "6.0.8",
-    "solid-js": "1.9.11"
+    "astro": "6.1.4",
+    "solid-js": "1.9.12"
   }
 }

package.json

@@ -89,20 +89,19 @@ These emails go out within minutes of form submission—catching leads at peak i
 
 Here's the architecture I typically implement:
 
-```
-Form Submission
-      ↓
-Webhook triggers n8n/Make workflow
-      ↓
-API calls to enrichment services
-      ↓
-LLM analyzes and scores lead
-      ↓
-CRM updated with score + enrichment
-      ↓
-Routing rules assign owner
-      ↓
-Personalized email via SendGrid
+```mermaid
+flowchart TD
+  A[🧾 Form Submission] --> B[⚡ Webhook Trigger\nn8n / Make]
+  B --> C[🔍 Enrichment APIs\nClearbit · Apollo · HubSpot]
+  C --> D[🤖 LLM Analysis\nScores & Qualifies Lead]
+  D --> E[📊 CRM Update\nScore + Enrichment Data]
+  E --> F[🔀 Routing Rules\nAssign Owner]
+  F --> G[📧 Personalized Email\nSendGrid]
+
+  subgraph "AI Processing Layer"
+    C
+    D
+  end
 ```
 
 The key components:

run-lint-format.js

@@ -8,7 +8,7 @@ category: Development
 draft: false
 featured: false
 readingTime: 10
-relatedService: astro-development
+relatedService: full-stack-web-development
 ---
 
 After building dozens of marketing sites across different frameworks, I keep coming back to Astro. Not because it's trendy, but because it solves the specific problems marketing sites face better than the alternatives.

setup-assets.js

@@ -77,5 +77,5 @@
       "answer": "Performance directly impacts business outcomes. Every 100ms of latency costs 1% in conversions. Google uses Core Web Vitals as a ranking factor. Mobile users abandon sites that take longer than 3 seconds to load. Fast sites rank better, convert better, and provide better user experience."
     }
   ],
-  "relatedServices": ["astro-development", "saas-mvp-development"]
+  "relatedServices": ["mobile-app-development", "saas-mvp-development"]
 }

…o-automate-lead-qualification-with-ai.md …-automate-lead-qualification-with-ai.mdxsrc/content/blog/how-to-automate-lead-qualification-with-ai.md renamed to src/content/blog/how-to-automate-lead-qualification-with-ai.mdx src/content/blog/how-to-automate-lead-qualification-with-ai.md renamed to src/content/blog/how-to-automate-lead-qualification-with-ai.mdx

@@ -83,6 +83,6 @@
     }
   ],
   "parentService": "full-stack-web-development",
-  "relatedServices": ["saas-mvp-development", "astro-development"],
+  "relatedServices": ["saas-mvp-development", "full-stack-web-development"],
   "relatedBlogPosts": []
 }

src/content/blog/why-astro-best-framework-marketing-sites.md

@@ -78,6 +78,6 @@
     }
   ],
   "parentService": "full-stack-web-development",
-  "relatedServices": ["astro-development", "full-stack-web-development"],
+  "relatedServices": ["mobile-app-development", "full-stack-web-development"],
   "relatedBlogPosts": ["building-mvp-4-weeks-technical-guide"]
 }