🚀 Refactor service pages to use consistent container classes; add theme initialization script; enhance global styles for prose and transitions; update TypeScript configuration for improved module resolution

Author: AR10Dev

.gitignore

@@ -33,4 +33,7 @@ dist
 .astro/
 
 # Typescript mcp cache
-.lsmcp/
+.lsmcp/
+
+# Playwright mcp cache
+.playwright-mcp/

.vscode/mcp.json

@@ -57,4 +57,4 @@
       "args": ["@playwright/mcp@latest"]
     }
   }
-}
+}

astro.config.ts

@@ -1,19 +1,17 @@
 import mdx from "@astrojs/mdx";
 import partytown from "@astrojs/partytown";
-import sitemap, { ChangeFreqEnum } from "@astrojs/sitemap";
+import sitemap from "@astrojs/sitemap";
 import solid from "@astrojs/solid-js";
 import tailwindcss from "@tailwindcss/vite";
 import AstroPWA from "@vite-pwa/astro";
 import { defineConfig } from "astro/config";
 
-const tailwindPlugin = tailwindcss() as unknown as never;
-
 // 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 /
   vite: {
-    plugins: [tailwindPlugin],
+    plugins: [tailwindcss()],
   },
   integrations: [
     solid(),
@@ -28,52 +26,52 @@ export default defineConfig({
         // Enhanced sitemap with priority and changefreq
         const url = item.url;
         let priority = 0.5;
-        let changefreq = ChangeFreqEnum.MONTHLY;
+        let changefreq = "monthly";
 
         // Homepage gets highest priority
         if (url === "https://avaabrazzaq.com/") {
           priority = 1.0;
-          changefreq = ChangeFreqEnum.WEEKLY;
+          changefreq = "weekly";
         }
         // Blog posts - high priority, updated occasionally
         else if (url.includes("/blog/") && !url.endsWith("/blog/")) {
           priority = 0.8;
-          changefreq = ChangeFreqEnum.MONTHLY;
+          changefreq = "monthly";
         }
         // Blog index
         else if (url.endsWith("/blog/")) {
           priority = 0.9;
-          changefreq = ChangeFreqEnum.WEEKLY;
+          changefreq = "weekly";
         }
         // Service pages - high priority
         else if (url.includes("/services/") && !url.endsWith("/services/")) {
           priority = 0.8;
-          changefreq = ChangeFreqEnum.MONTHLY;
+          changefreq = "monthly";
         }
         // Services index
         else if (url.endsWith("/services/")) {
           priority = 0.9;
-          changefreq = ChangeFreqEnum.MONTHLY;
+          changefreq = "monthly";
         }
         // Portfolio items
         else if (url.includes("/portfolio/") && !url.endsWith("/portfolio/")) {
           priority = 0.7;
-          changefreq = ChangeFreqEnum.YEARLY;
+          changefreq = "yearly";
         }
         // Portfolio index
         else if (url.endsWith("/portfolio/")) {
           priority = 0.8;
-          changefreq = ChangeFreqEnum.MONTHLY;
+          changefreq = "monthly";
         }
         // About and contact
         else if (url.includes("/about/") || url.includes("/contact/")) {
           priority = 0.7;
-          changefreq = ChangeFreqEnum.MONTHLY;
+          changefreq = "monthly";
         }
 
         return {
           ...item,
-          changefreq,
+          changefreq: changefreq as typeof item.changefreq,
           priority,
           // Note: lastmod is automatically added by Astro sitemap when available
         };
@@ -94,17 +92,19 @@ export default defineConfig({
             src: "/pwa-192x192.png",
             sizes: "192x192",
             type: "image/png",
+            purpose: "any",
           },
           {
             src: "/pwa-512x512.png",
             sizes: "512x512",
             type: "image/png",
+            purpose: "any",
           },
           {
-            src: "/pwa-192x192.png",
-            sizes: "192x192",
+            src: "/pwa-512x512.png",
+            sizes: "512x512",
             type: "image/png",
-            purpose: "any maskable",
+            purpose: "maskable",
           },
         ],
       },

src/components/Contact.astro

@@ -63,7 +63,7 @@ const { homepage } = Astro.props as Props;
       <a
         href={homepage.githubUrl}
         data-track="open_github_profile"
-        class={`${CARD_CLASSES.glassVariant} px-6 py-3 font-semibold text-[var(--text-strong)]`}
+        class={`${CARD_CLASSES.glass} px-6 py-3 font-semibold text-[var(--text-strong)]`}
       >
         GitHub
       </a>

src/components/Footer.astro

@@ -0,0 +1,89 @@
+---
+type Props = {
+  title: string;
+  description: string;
+  canonicalUrl: string;
+  ogImage: string;
+  ogType?: string;
+  author?: string;
+  robots?: string;
+  keywords?: string;
+  publishedTime?: string;
+  modifiedTime?: string;
+  twitterHandle?: string;
+  structuredData?: Record<string, unknown>;
+};
+
+const {
+  title,
+  description,
+  canonicalUrl,
+  ogImage,
+  ogType = "website",
+  author = "Avaab Razzaq",
+  robots = "index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1",
+  keywords,
+  publishedTime,
+  modifiedTime,
+  twitterHandle = "@itsmeAvaab",
+  structuredData,
+} = Astro.props as Props;
+---
+
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
+<meta name="description" content={description} />
+<meta name="author" content={author} />
+<meta name="robots" content={robots} />
+{keywords && <meta name="keywords" content={keywords} />}
+
+<link rel="icon" type="image/x-icon" href="/favicon.ico" />
+<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+<link rel="canonical" href={canonicalUrl} />
+<link rel="sitemap" href="/sitemap-index.xml" />
+<link
+  rel="alternate"
+  type="application/rss+xml"
+  title="Avaab Razzaq Blog RSS Feed"
+  href="/blog/rss.xml"
+/>
+
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Manrope:wght@300..800&family=Sora:wght@300..800&display=swap"
+  rel="stylesheet"
+/>
+
+<title>{title}</title>
+
+<meta property="og:type" content={ogType} />
+<meta property="og:title" content={title} />
+<meta property="og:description" content={description} />
+<meta property="og:url" content={canonicalUrl} />
+<meta property="og:image" content={ogImage} />
+<meta property="og:image:alt" content={title} />
+<meta property="og:image:width" content="1200" />
+<meta property="og:image:height" content="630" />
+<meta property="og:site_name" content="Avaab Razzaq - AI Growth Engineer" />
+<meta property="og:locale" content="en_US" />
+
+{publishedTime && <meta property="article:published_time" content={publishedTime} />}
+{modifiedTime && <meta property="article:modified_time" content={modifiedTime} />}
+
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:site" content={twitterHandle} />
+<meta name="twitter:creator" content={twitterHandle} />
+<meta name="twitter:title" content={title} />
+<meta name="twitter:description" content={description} />
+<meta name="twitter:image" content={ogImage} />
+
+<meta name="theme-color" content="#0e2a47" />
+
+{structuredData && (
+  <script
+    is:inline
+    type="application/ld+json"
+    set:html={JSON.stringify(structuredData)}
+  />
+)}

src/components/HeadSEO.astro

@@ -5,13 +5,12 @@ import { ICON_BUTTON_CLASSES } from "@lib/constants";
 import type { NavLink } from "@solid-components/Navigation";
 import Navigation from "@solid-components/Navigation";
 
-export interface Props {
+type Props = {
   background?: string;
-  currentPath?: string;
-}
+  currentPath: string;
+};
 
-const { background = "", currentPath = Astro.url.pathname } =
-  Astro.props as Props;
+const { background = "", currentPath } = Astro.props as Props;
 
 const navLinks: NavLink[] = [
   { label: "Home", href: "/" },

src/components/Header.astro

@@ -27,7 +27,7 @@ const techBadgeClass =
             <div class="mb-3 flex justify-between items-start">
               <div>
                 <p class={TYPOGRAPHY_CLASSES.labelXs}>{item.data.category}</p>
-                <h3 class={`mt-1 ${TYPOGRAPHY_CLASSES.cardTitleBold}`}>{item.data.title}</h3>
+                <h3 class={`mt-1 ${TYPOGRAPHY_CLASSES.cardTitle} font-bold`}>{item.data.title}</h3>
               </div>
             </div>
 

src/components/HeaderNav.astro

@@ -1,5 +1,5 @@
 ---
-import { SOCIAL_LINK_CLASSES } from "@lib/constants";
+import { ICON_BUTTON_CLASSES, SOCIAL_LINK_CLASSES } from "@lib/constants";
 
 export type SocialKind = "linkedin" | "github";
 export type SocialVariant = "icon" | "text";
@@ -21,6 +21,7 @@ const { links, variant = "icon", className = "" } = Astro.props as Props;
 
 const listBaseClass = "m-0 flex list-none flex-wrap items-center p-0";
 const listVariantClass = "gap-3";
+const iconVariantClass = `${ICON_BUTTON_CLASSES.base} ${ICON_BUTTON_CLASSES.elevated} h-[2.4rem] w-[2.4rem]`;
 
 const iconPathByKind: Record<SocialKind, string> = {
   linkedin:
@@ -37,7 +38,7 @@ const iconPathByKind: Record<SocialKind, string> = {
         href={link.href}
         target="_blank"
         rel="noopener noreferrer"
-        class={variant === "icon" ? SOCIAL_LINK_CLASSES.icon : SOCIAL_LINK_CLASSES.text}
+        class={variant === "icon" ? iconVariantClass : SOCIAL_LINK_CLASSES.text}
         data-track={link.trackId}
         aria-label={variant === "icon" ? `Open ${link.label}` : undefined}
         title={link.label}