From b4516e6612f652f5e4575a74ca3c9b8533247c9f Mon Sep 17 00:00:00 2001
From: Alexander Wang <aw@Alexanders-Mac-mini.local>
Date: Mon, 7 Sep 2026 17:42:57 -0700
Subject: [PATCH] Add author byline beside blog post dates

---
 src/theme/BlogPostItem/Header/Info/index.js   | 56 +++++++++++++++++++
 .../Header/Info/styles.module.css             |  7 +++
 2 files changed, 63 insertions(+)
 create mode 100644 src/theme/BlogPostItem/Header/Info/index.js
 create mode 100644 src/theme/BlogPostItem/Header/Info/styles.module.css

diff --git a/src/theme/BlogPostItem/Header/Info/index.js b/src/theme/BlogPostItem/Header/Info/index.js
new file mode 100644
index 0000000..6d9f6d3
--- /dev/null
+++ b/src/theme/BlogPostItem/Header/Info/index.js
@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from "react";
+import clsx from "clsx";
+import { translate } from "@docusaurus/Translate";
+import { usePluralForm } from "@docusaurus/theme-common";
+import { useDateTimeFormat } from "@docusaurus/theme-common/internal";
+import { useBlogPost } from "@docusaurus/plugin-content-blog/client";
+import styles from "./styles.module.css";
+
+function ReadingTime({ readingTime }) {
+  const { selectMessage } = usePluralForm();
+  const minutes = Math.ceil(readingTime);
+  return selectMessage(
+    minutes,
+    translate(
+      {
+        id: "theme.blog.post.readingTime.plurals",
+        description:
+          'Pluralized label for "{readingTime} min read". Use as much plural forms (separated by "|") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)',
+        message: "One min read|{readingTime} min read",
+      },
+      { readingTime: minutes }
+    )
+  );
+}
+
+export default function BlogPostItemHeaderInfo({ className }) {
+  const { metadata } = useBlogPost();
+  const { date, readingTime } = metadata;
+  const dateTimeFormat = useDateTimeFormat({
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+    timeZone: "UTC",
+  });
+
+  return (
+    <div className={clsx(styles.container, "margin-vert--md", className)}>
+      <time dateTime={date}>{dateTimeFormat.format(new Date(date))}</time>
+      {" | "}
+      <span className={styles.author}>Alexander Wang</span>
+      {typeof readingTime !== "undefined" && (
+        <>
+          {" · "}
+          <ReadingTime readingTime={readingTime} />
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/src/theme/BlogPostItem/Header/Info/styles.module.css b/src/theme/BlogPostItem/Header/Info/styles.module.css
new file mode 100644
index 0000000..d0f2a78
--- /dev/null
+++ b/src/theme/BlogPostItem/Header/Info/styles.module.css
@@ -0,0 +1,7 @@
+.container {
+  font-size: 0.9rem;
+}
+
+.author {
+  white-space: nowrap;
+}