add BlogPostPage swizzle: hide sidebar, add hiring CTA on every post

docs/my-website/src/theme/BlogPostPage/index.js

@@ -0,0 +1,40 @@
+import React, {useEffect} from 'react';
+import OriginalBlogPostPage from '@theme-original/BlogPostPage';
+import styles from './styles.module.css';
+
+function HiringCTA() {
+  return (
+    <div className={styles.ctaOuter}>
+      <div className={styles.cta}>
+        <p className={styles.ctaEyebrow}>We're hiring</p>
+        <a
+          href="https://jobs.ashbyhq.com/litellm"
+          target="_blank"
+          rel="noopener noreferrer"
+          className={styles.ctaLink}
+        >
+          Like what you see? Join us
+          <svg className={styles.ctaArrow} fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+          </svg>
+        </a>
+        <p className={styles.ctaSub}>Come build the future of AI infrastructure.</p>
+      </div>
+    </div>
+  );
+}
+
+export default function BlogPostPage(props) {
+  // Add body class so CSS can hide the sidebar
+  useEffect(() => {
+    document.body.classList.add('blog-post-body');
+    return () => document.body.classList.remove('blog-post-body');
+  }, []);
+
+  return (
+    <>
+      <OriginalBlogPostPage {...props} />
+      <HiringCTA />
+    </>
+  );
+}

docs/my-website/src/theme/BlogPostPage/styles.module.css

@@ -0,0 +1,68 @@
+.ctaOuter {
+  max-width: 820px;
+  margin: 0 auto;
+  padding: 0 2rem 4rem;
+}
+
+.cta {
+  border-radius: 16px;
+  background: #f9fafb;
+  border: 1px solid #e5e7eb;
+  padding: 2.5rem 2rem;
+  text-align: center;
+}
+
+.ctaEyebrow {
+  font-size: 0.68rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: #9ca3af;
+  margin: 0 0 0.75rem;
+}
+
+.ctaLink {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 1.5rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: #111827;
+  text-decoration: none !important;
+  transition: color 0.15s;
+}
+
+.ctaLink:hover {
+  color: #0ea5e9;
+}
+
+.ctaArrow {
+  width: 1.25rem;
+  height: 1.25rem;
+  transition: transform 0.15s;
+  flex-shrink: 0;
+}
+
+.ctaLink:hover .ctaArrow {
+  transform: translateX(3px);
+}
+
+.ctaSub {
+  margin: 0.75rem 0 0;
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+[data-theme='dark'] .cta {
+  background: #1f2937;
+  border-color: #374151;
+}
+
+[data-theme='dark'] .ctaLink {
+  color: #f9fafb;
+}
+
+[data-theme='dark'] .ctaSub {
+  color: #9ca3af;
+}