Merge branch 'main' of https://github.com/recodehive/recode-website into blog/google-icon-doc

Author: sanjay-kv

src/css/custom.css

@@ -2094,16 +2094,22 @@ html[data-theme="dark"] {
   max-width: 280px !important;
   padding-left: 0 !important;
   padding-right: 0.5rem !important;
-  border-left: 2px solid var(--ifm-toc-border-color) !important;
   align-self: stretch !important;
 }
 
-/* TOC inner wrapper — sticky */
+/* TOC inner wrapper — sticky; border-left here so the vertical line
+   only spans the height of the TOC content, not the full page */
 .blog-wrapper .col.col--2 > div {
   position: sticky !important;
   top: calc(var(--ifm-navbar-height, 60px) + 1rem) !important;
   max-height: calc(100vh - var(--ifm-navbar-height, 60px) - 2rem) !important;
   overflow-y: auto !important;
+  border-left: 2px solid var(--ifm-toc-border-color) !important;
+  scrollbar-width: none !important;
+}
+
+.blog-wrapper .col.col--2 > div::-webkit-scrollbar {
+  display: none !important;
 }
 
 /* TOC list — vertical left border track */
@@ -2160,6 +2166,20 @@ html[data-theme="dark"] .blog-post-page .markdown {
   margin-bottom: 0.5rem !important;
 }
 
+.blog-post-page .markdown h1,
+.blog-post-page .markdown h2,
+.blog-post-page .markdown h3,
+.blog-post-page .markdown h4 {
+  color: #1F2937 !important;
+}
+
+html[data-theme="dark"] .blog-post-page .markdown h1,
+html[data-theme="dark"] .blog-post-page .markdown h2,
+html[data-theme="dark"] .blog-post-page .markdown h3,
+html[data-theme="dark"] .blog-post-page .markdown h4 {
+  color: #D1D5DB !important;
+}
+
 /* ── Large desktop (≥1400px) — wider content ── */
 @media (min-width: 1400px) {
   .blog-wrapper .container>.row>.col.col--3 {

src/theme/BlogPostItem/Footer/index.tsx

@@ -89,9 +89,7 @@ export default function BlogPostItemFooterWrapper(props: Props): JSX.Element {
       month: "short",
       day: "numeric",
     }).format(new Date(metadata.date));
-  const metaItems = [authorHandle, blogDate, readTimeText]
-    .filter(Boolean)
-    .join(META_SEPARATOR);
+  const metaDateAndTime = [blogDate, readTimeText].filter(Boolean).join(META_SEPARATOR);
 
   const showAuthorCard = Boolean(isBlogPostPage && primaryAuthor && authorName);
 
@@ -111,7 +109,28 @@ export default function BlogPostItemFooterWrapper(props: Props): JSX.Element {
         <section ref={authorCardRef} className={styles.authorCard} aria-label="Post author details">
           <div className={styles.authorBody}>
             <div className={styles.authorAvatarWrapper}>
-              {authorAvatar ? (
+              {githubUrl ? (
+                <Link
+                  to={githubUrl}
+                  className={styles.authorAvatarLink}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  aria-label={`${authorName} on GitHub`}
+                >
+                  {authorAvatar ? (
+                    <img
+                      className={styles.authorAvatar}
+                      src={authorAvatar}
+                      alt={`${authorName} profile picture`}
+                      loading="lazy"
+                    />
+                  ) : (
+                    <div className={styles.authorAvatarFallback} aria-hidden="true">
+                      {authorName?.charAt(0).toUpperCase()}
+                    </div>
+                  )}
+                </Link>
+              ) : authorAvatar ? (
                 <img
                   className={styles.authorAvatar}
                   src={authorAvatar}
@@ -137,10 +156,40 @@ export default function BlogPostItemFooterWrapper(props: Props): JSX.Element {
             </div>
             <div className={styles.authorIdentity}>
               <div className={styles.authorNameRow}>
-                <p className={styles.authorName}>{authorName}</p>
+                {githubUrl ? (
+                  <Link
+                    to={githubUrl}
+                    className={styles.authorName}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {authorName}
+                  </Link>
+                ) : (
+                  <p className={styles.authorName}>{authorName}</p>
+                )}
                 <span className={styles.authorBadge}>Author</span>
               </div>
-              {metaItems ? <p className={styles.authorMeta}>{metaItems}</p> : null}
+              {(authorHandle || metaDateAndTime) ? (
+                <p className={styles.authorMeta}>
+                  {authorHandle && (
+                    githubUrl ? (
+                      <Link
+                        to={githubUrl}
+                        className={styles.authorHandleLink}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        {authorHandle}
+                      </Link>
+                    ) : (
+                      authorHandle
+                    )
+                  )}
+                  {authorHandle && metaDateAndTime ? META_SEPARATOR : null}
+                  {metaDateAndTime}
+                </p>
+              ) : null}
               {authorSummary ? (
                 <p className={styles.authorSummary}>{authorSummary}</p>
               ) : null}

src/theme/BlogPostItem/Footer/styles.module.css

@@ -34,6 +34,16 @@
   justify-content: center;
 }
 
+.authorAvatarLink {
+  display: block;
+  line-height: 0;
+  border-radius: 50%;
+}
+
+.authorAvatarLink:hover {
+  opacity: 0.85;
+}
+
 .authorAvatar,
 .authorAvatarFallback {
   width: 64px;
@@ -64,6 +74,21 @@
   font-size: 1.75rem;
   font-weight: 800;
   line-height: 1.2;
+  color: var(--ifm-font-color-base);
+  text-decoration: none;
+}
+
+.authorName:hover {
+  text-decoration: underline;
+}
+
+.authorHandleLink {
+  color: inherit;
+  text-decoration: none;
+}
+
+.authorHandleLink:hover {
+  text-decoration: underline;
 }
 
 .authorNameRow {