blog: add back arrow to blog post pages (#25587)

* blog: add back arrow to post pages

* blog: style back arrow — fixed top-left below navbar

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 />
     </>

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;