updates

Author: ramkrishnsaini

app/[slug]/page.tsx

@@ -1,11 +1,11 @@
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import { getAllPostSlugs, getPostBySlug } from '@/lib/posts';
+import { getCanonicalUrlForPost } from '@/lib/post-canonical';
 import PostLayout from '@/components/PostLayout';
 import ArticleStructuredData from '@/components/ArticleStructuredData';
 import { defaultOgImage } from '@/lib/site-seo';
 
-/** Job-support service pages are canonical at /:slug/ (root). */
 const isJobSupportSlug = (slug: string) =>
   slug.includes('job-support') || slug.includes('job-help');
 
@@ -23,7 +23,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
   const post = await getPostBySlug(slug);
   if (!post) return {};
 
-  const canonical = `https://proxytechsupport.com/${slug}/`;
+  const canonical = getCanonicalUrlForPost(post);
   const title = `${post.title} | Proxy Tech Support`;
   const published = post.date ? `${post.date}T12:00:00.000Z` : undefined;
 
@@ -58,7 +58,8 @@ export default async function SlugPage({ params }: Props) {
   const post = await getPostBySlug(slug);
   if (!post) notFound();
 
-  const url = `https://proxytechsupport.com/${slug}/`;
+  const Article = post.Article;
+  const url = getCanonicalUrlForPost(post);
 
   const breadcrumbs = isJobSupportSlug(slug)
     ? [
@@ -83,11 +84,12 @@ export default async function SlugPage({ params }: Props) {
       />
       <PostLayout
         title={post.title}
-        content={post.content}
         date={post.date}
         breadcrumbs={breadcrumbs}
         showInterviewBanner={isJobSupportSlug(slug)}
-      />
+      >
+        <Article />
+      </PostLayout>
     </>
   );
 }

app/agentic-ai-rag-mlops-job-support-usa/page.tsx

@@ -0,0 +1,10 @@
+import type { Metadata } from 'next';
+import LandingPageTemplate from '@/components/LandingPageTemplate';
+import { agenticAiRagMlopsJobSupportUSA } from '@/data/landing-pages';
+import { landingPageMetadata } from '@/lib/site-seo';
+
+export const metadata: Metadata = landingPageMetadata(agenticAiRagMlopsJobSupportUSA);
+
+export default function AgenticAiRagMlopsJobSupportUSAPage() {
+  return <LandingPageTemplate config={agenticAiRagMlopsJobSupportUSA} />;
+}

app/blog/[slug]/page.tsx

@@ -1,17 +1,16 @@
 import type { Metadata } from 'next';
-import { notFound, permanentRedirect } from 'next/navigation';
+import { notFound } from 'next/navigation';
 import { getAllPostSlugs, getPostBySlug } from '@/lib/posts';
+import { getCanonicalUrlForPost } from '@/lib/post-canonical';
 import PostLayout from '@/components/PostLayout';
 import ArticleStructuredData from '@/components/ArticleStructuredData';
 import { defaultOgImage } from '@/lib/site-seo';
 
 /**
- * Job-support service pages are canonical at /:slug/ (root level).
- * If a legacy /blog/:slug/ URL arrives for one of these, we 308-redirect
- * it back to the root so rankings stay at the correct canonical URL.
- *
- * Pure blog articles (no "job-support" in slug) ARE canonical here at
- * /blog/:slug/ and are rendered normally.
+ * Duplicate URLs: many posts are reachable at both /blog/:slug/ and /:slug/
+ * (static export cannot rely on HTTP redirects on GitHub Pages).
+ * We render full content here and in app/[slug]/page.tsx and set the same
+ * canonical URL (from meta.permalink when present) on both.
  */
 const isJobSupportSlug = (slug: string) =>
   slug.includes('job-support') || slug.includes('job-help');
@@ -22,20 +21,15 @@ type Props = {
 
 export async function generateStaticParams() {
   const slugs = await getAllPostSlugs();
-  // Static export (`output: 'export'`): emit every slug so legacy /blog/:slug/ URLs
-  // that point at job-support posts still get HTML redirect pages to /:slug/.
   return slugs.map((slug) => ({ slug }));
 }
 
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
   const { slug } = await params;
-  // Metadata is irrelevant for slugs that will redirect
-  if (isJobSupportSlug(slug)) return {};
-
   const post = await getPostBySlug(slug);
   if (!post) return {};
 
-  const canonical = `https://proxytechsupport.com/blog/${slug}/`;
+  const canonical = getCanonicalUrlForPost(post);
   const title = `${post.title} | Proxy Tech Support`;
   const published = post.date ? `${post.date}T12:00:00.000Z` : undefined;
 
@@ -67,16 +61,11 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 
 export default async function BlogArticlePage({ params }: Props) {
   const { slug } = await params;
-
-  // Job-support pages belong at root level — redirect legacy /blog/:slug/ hits
-  if (isJobSupportSlug(slug)) {
-    permanentRedirect(`/${slug}/`);
-  }
-
   const post = await getPostBySlug(slug);
   if (!post) notFound();
 
-  const url = `https://proxytechsupport.com/blog/${slug}/`;
+  const Article = post.Article;
+  const url = getCanonicalUrlForPost(post);
 
   const breadcrumbs = [
     { label: 'Home', href: '/' },
@@ -95,11 +84,12 @@ export default async function BlogArticlePage({ params }: Props) {
       />
       <PostLayout
         title={post.title}
-        content={post.content}
         date={post.date}
         breadcrumbs={breadcrumbs}
-        showInterviewBanner
-      />
+        showInterviewBanner={isJobSupportSlug(slug)}
+      >
+        <Article />
+      </PostLayout>
     </>
   );
 }

app/blog/page.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from 'next';
 import Link from 'next/link';
 import { getAllPosts } from '@/lib/posts';
+import { getPostPublicHref } from '@/lib/post-canonical';
 import TopBar from '@/components/TopBar';
 import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
@@ -40,13 +41,9 @@ export const metadata: Metadata = {
   },
 };
 
-/**
- * Job-support service pages live at their root canonical URL /:slug/.
- * Pure blog articles (no "job-support" in slug) live at /blog/:slug/.
- */
-function getPostUrl(slug: string) {
-  const isJobSupport = slug.includes('job-support') || slug.includes('job-help');
-  return isJobSupport ? `/${slug}/` : `/blog/${slug}/`;
+/** Uses each post's permalink when set (matches indexed URLs). */
+function getPostUrl(post: Awaited<ReturnType<typeof getAllPosts>>[number]) {
+  return getPostPublicHref(post);
 }
 
 export default async function BlogPage() {
@@ -79,7 +76,7 @@ export default async function BlogPage() {
 
         <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
           {posts.map((post) => {
-            const href = getPostUrl(post.slug);
+            const href = getPostUrl(post);
             return (
               <article
                 key={post.slug}

app/interviews/[slug]/page.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import { getAllInterviewSlugs, getInterviewBySlug } from '@/lib/interviews';
+import { getCanonicalInterviewUrl } from '@/lib/interview-canonical';
 import PostLayout from '@/components/PostLayout';
 import ArticleStructuredData from '@/components/ArticleStructuredData';
 import { defaultOgImage } from '@/lib/site-seo';
@@ -19,13 +20,16 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
   const interview = await getInterviewBySlug(slug);
   if (!interview) return {};
 
-  const canonical = `https://proxytechsupport.com/interviews/${slug}/`;
+  const canonical = getCanonicalInterviewUrl(interview.slug);
   const title = `${interview.title} | Proxy Tech Support`;
   const published = interview.date ? `${interview.date}T12:00:00.000Z` : undefined;
 
   return {
     title,
     description: interview.description,
+    ...(interview.keywords
+      ? { keywords: interview.keywords.split(',').map((k) => k.trim()) }
+      : {}),
     alternates: { canonical },
     robots: { index: true, follow: true },
     openGraph: {
@@ -53,7 +57,8 @@ export default async function InterviewPostPage({ params }: Props) {
   const interview = await getInterviewBySlug(slug);
   if (!interview) notFound();
 
-  const url = `https://proxytechsupport.com/interviews/${slug}/`;
+  const Article = interview.Article;
+  const url = getCanonicalInterviewUrl(interview.slug);
 
   return (
     <>
@@ -66,15 +71,17 @@ export default async function InterviewPostPage({ params }: Props) {
       />
       <PostLayout
         title={interview.title}
-        content={interview.content}
         date={interview.date}
         showInterviewBanner
+        wrapWithBlogShell
         breadcrumbs={[
           { label: 'Home', href: '/' },
           { label: 'Interview Questions', href: '/interviews/' },
           { label: interview.title },
         ]}
-      />
+      >
+        <Article />
+      </PostLayout>
     </>
   );
 }

app/sitemap.ts

@@ -1,6 +1,8 @@
 import type { MetadataRoute } from 'next';
 import { getAllPosts } from '@/lib/posts';
+import { getCanonicalUrlForPost } from '@/lib/post-canonical';
 import { getAllInterviews } from '@/lib/interviews';
+import { getCanonicalInterviewUrl } from '@/lib/interview-canonical';
 import { allLandingPages } from '@/data/landing-pages';
 
 /** Required so `output: 'export'` can emit `/sitemap.xml` at build time. */
@@ -33,9 +35,7 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
   ];
 
   const postRoutes: MetadataRoute.Sitemap = posts.map((post) => {
-    const isJobSupport =
-      post.slug.includes('job-support') || post.slug.includes('job-help');
-    const url = isJobSupport ? `${BASE}/${post.slug}/` : `${BASE}/blog/${post.slug}/`;
+    const url = getCanonicalUrlForPost(post);
     const last =
       post.date && post.date.length >= 10 ? post.date : today;
     return {
@@ -49,7 +49,7 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
   const interviewRoutes: MetadataRoute.Sitemap = interviews.map((i) => {
     const last = i.date && i.date.length >= 10 ? i.date : today;
     return {
-      url: `${BASE}/interviews/${i.slug}/`,
+      url: getCanonicalInterviewUrl(i.slug),
       lastModified: last,
       changeFrequency: 'weekly' as const,
       priority: prio('0.7'),

components/BlogArticleShell.tsx

@@ -0,0 +1,107 @@
+import type { ReactNode } from 'react';
+
+export type BlogArticleShellProps = {
+  children: ReactNode;
+  /** default = subtle card wrap; feature = dark hero band + tags */
+  variant?: 'default' | 'feature';
+  hero?: {
+    eyebrow?: string;
+    subtitle?: string;
+    tags?: string[];
+  };
+};
+
+/**
+ * Wraps blog article HTML/TSX bodies for richer layouts than flat markdown prose.
+ */
+export default function BlogArticleShell({ children, variant = 'default', hero }: BlogArticleShellProps) {
+  if (variant === 'feature' && hero) {
+    return (
+      <div className="blog-article-shell blog-article-shell--feature">
+        <div
+          className="blog-article-shell-hero"
+          style={{
+            margin: '-0.25rem -0.5rem 1.75rem',
+            padding: '2rem 1.25rem 1.75rem',
+            borderRadius: 'var(--pts-card-radius)',
+            background: 'linear-gradient(135deg, var(--pts-nav-bg) 0%, var(--pts-surface-dark-raised) 55%, var(--pts-dashboard-bg) 100%)',
+            border: '1px solid rgba(0, 223, 130, 0.2)',
+            boxShadow: 'var(--pts-shadow-lp)',
+          }}
+        >
+          {hero.eyebrow && (
+            <p
+              style={{
+                fontSize: '0.72rem',
+                letterSpacing: '0.14em',
+                textTransform: 'uppercase',
+                color: 'var(--pts-accent)',
+                fontWeight: 700,
+                marginBottom: '0.75rem',
+              }}
+            >
+              {hero.eyebrow}
+            </p>
+          )}
+          {hero.subtitle && (
+            <p
+              style={{
+                fontSize: '1.05rem',
+                lineHeight: 1.65,
+                color: 'rgba(255,255,255,0.86)',
+                maxWidth: '44rem',
+                fontWeight: 500,
+              }}
+            >
+              {hero.subtitle}
+            </p>
+          )}
+          {hero.tags && hero.tags.length > 0 && (
+            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.45rem', marginTop: '1.1rem' }}>
+              {hero.tags.map((t) => (
+                <span
+                  key={t}
+                  style={{
+                    fontSize: '0.68rem',
+                    letterSpacing: '0.06em',
+                    textTransform: 'uppercase',
+                    padding: '0.25rem 0.6rem',
+                    borderRadius: '999px',
+                    background: 'rgba(0, 223, 130, 0.12)',
+                    color: 'var(--pts-accent)',
+                    border: '1px solid rgba(0, 223, 130, 0.28)',
+                  }}
+                >
+                  {t}
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+        <div
+          className="blog-article-shell-body"
+          style={{
+            padding: '0.25rem 0.15rem 0.5rem',
+          }}
+        >
+          {children}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="blog-article-shell blog-article-shell--default"
+      style={{
+        padding: '1.25rem 1.25rem 1.5rem',
+        borderRadius: 'var(--pts-card-radius)',
+        background: 'linear-gradient(180deg, var(--pts-tech-header) 0%, var(--pts-card-bg) 35%)',
+        border: '1px solid var(--pts-border)',
+        boxShadow: 'var(--pts-shadow-lp)',
+      }}
+    >
+      {children}
+    </div>
+  );
+}