From fdd7500904e4b9ccab124ecde5f40c8119646d7c Mon Sep 17 00:00:00 2001
From: ishaan-berri <155045088+ishaan-berri@users.noreply.github.com>
Date: Sat, 11 Apr 2026 19:15:45 -0700
Subject: [PATCH] blog: add back arrow to blog post pages (#25587)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* blog: add back arrow to post pages

* blog: style back arrow — fixed top-left below navbar
---
 .../src/theme/BlogPostPage/index.js           | 14 +++++++
 .../src/theme/BlogPostPage/styles.module.css  | 41 +++++++++++++++++++
 2 files changed, 55 insertions(+)

diff --git a/docs/my-website/src/theme/BlogPostPage/index.js b/docs/my-website/src/theme/BlogPostPage/index.js
index ab8a8a173a..05f34db24b 100644
--- a/docs/my-website/src/theme/BlogPostPage/index.js
+++ b/docs/my-website/src/theme/BlogPostPage/index.js
@@ -2,6 +2,19 @@ import React, {useEffect} from 'react';
 import OriginalBlogPostPage from '@theme-original/BlogPostPage';
 import styles from './styles.module.css';
 
+function BackLink() {
+  return (
+    <div className={styles.backOuter}>
+      <a href="/blog" className={styles.backLink}>
+        <svg className={styles.backArrow} fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16l-4-4m0 0l4-4m-4 4h18" />
+        </svg>
+        Blog
+      </a>
+    </div>
+  );
+}
+
 function HiringCTA() {
   return (
     <div className={styles.ctaOuter}>
@@ -33,6 +46,7 @@ export default function BlogPostPage(props) {
 
   return (
     <>
+      <BackLink />
       <OriginalBlogPostPage {...props} />
       <HiringCTA />
     </>
diff --git a/docs/my-website/src/theme/BlogPostPage/styles.module.css b/docs/my-website/src/theme/BlogPostPage/styles.module.css
index b9a0a479eb..9666037803 100644
--- a/docs/my-website/src/theme/BlogPostPage/styles.module.css
+++ b/docs/my-website/src/theme/BlogPostPage/styles.module.css
@@ -1,3 +1,44 @@
+.backOuter {
+  position: fixed;
+  top: calc(var(--ifm-navbar-height, 60px) + 1rem);
+  left: 2rem;
+  z-index: 100;
+}
+
+.backLink {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #6b7280;
+  text-decoration: none !important;
+  transition: color 0.15s;
+}
+
+.backLink:hover {
+  color: #111827;
+}
+
+.backArrow {
+  width: 1rem;
+  height: 1rem;
+  transition: transform 0.15s;
+  flex-shrink: 0;
+}
+
+.backLink:hover .backArrow {
+  transform: translateX(-3px);
+}
+
+[data-theme='dark'] .backLink {
+  color: #9ca3af;
+}
+
+[data-theme='dark'] .backLink:hover {
+  color: #f9fafb;
+}
+
 .ctaOuter {
   max-width: 820px;
   margin: 0 auto;