Show article authors in metadata rows

site/quartz.layout.ts

@@ -1,12 +1,15 @@
 import { PageLayout, SharedLayout } from "./quartz/cfg"
 import * as Component from "./quartz/components"
 import GameCultMasthead from "./quartz/components/GameCultMasthead"
+import GameCultArticleMeta from "./quartz/components/GameCultArticleMeta"
 import GameCultOverviewSidebar from "./quartz/components/GameCultOverviewSidebar"
 import GameCultThemeLock from "./quartz/components/GameCultThemeLock"
 
 const isGraphPage = (page: any) => page.fileData.slug === "Graph"
 const isIntegratedDossierPage = (page: any) => page.fileData.slug === "dossier"
 const isStandardContentPage = (page: any) => page.fileData.slug !== "index" && !isGraphPage(page)
+const isBlogArticle = (page: any) =>
+  page.fileData.slug?.startsWith("Blog/") && page.fileData.slug !== "Blog/index"
 
 // components shared across all pages
 export const sharedPageComponents: SharedLayout = {
@@ -44,9 +47,13 @@ export const defaultContentPageLayout: PageLayout = {
       component: Component.ArticleTitle(),
       condition: isStandardContentPage,
     }),
+    Component.ConditionalRender({
+      component: GameCultArticleMeta(),
+      condition: isBlogArticle,
+    }),
     Component.ConditionalRender({
       component: Component.ContentMeta(),
-      condition: isStandardContentPage,
+      condition: (page) => isStandardContentPage(page) && !isBlogArticle(page),
     }),
   ],
   left: [

site/quartz/components/GameCultArticleMeta.tsx

@@ -0,0 +1,51 @@
+import readingTime from "reading-time"
+import { i18n } from "../i18n"
+import { Date, getDate } from "./Date"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import style from "./styles/gameCultArticleMeta.scss"
+
+function authorLabel(frontmatter: QuartzComponentProps["fileData"]["frontmatter"]) {
+  const author = frontmatter?.author
+  if (typeof author === "string" && author.trim().length > 0) {
+    return author.trim()
+  }
+
+  const authors = frontmatter?.authors
+  if (Array.isArray(authors)) {
+    const labels = authors.filter(
+      (candidate): candidate is string =>
+        typeof candidate === "string" && candidate.trim().length > 0,
+    )
+    if (labels.length > 0) {
+      return labels.map((candidate) => candidate.trim()).join(", ")
+    }
+  }
+
+  return "GameCult"
+}
+
+export default (() => {
+  const GameCultArticleMeta: QuartzComponent = ({ cfg, fileData, displayClass }) => {
+    if (!fileData.text) {
+      return null
+    }
+
+    const { minutes } = readingTime(fileData.text)
+    const displayedTime = i18n(cfg.locale).components.contentMeta.readingTime({
+      minutes: Math.ceil(minutes),
+    })
+
+    return (
+      <div class={`${displayClass ?? ""} gamecult-article-meta`}>
+        <span class="gamecult-article-meta-author">{authorLabel(fileData.frontmatter)}</span>
+        <p show-comma="true" class="content-meta gamecult-article-meta-details">
+          {fileData.dates && <Date date={getDate(cfg, fileData)!} locale={cfg.locale} />}
+          <span>{displayedTime}</span>
+        </p>
+      </div>
+    )
+  }
+
+  GameCultArticleMeta.css = style
+  return GameCultArticleMeta
+}) satisfies QuartzComponentConstructor

site/quartz/components/styles/gameCultArticleMeta.scss

@@ -0,0 +1,28 @@
+.gamecult-article-meta {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-top: 0.55rem;
+  color: rgba(183, 199, 217, 0.78);
+}
+
+.gamecult-article-meta-author {
+  min-width: 0;
+  color: var(--secondary);
+  font-weight: 500;
+}
+
+.gamecult-article-meta-details {
+  display: inline-flex;
+  flex: 0 0 auto;
+  justify-content: flex-end;
+  margin: 0;
+  text-align: right;
+}
+
+@media (max-width: 480px) {
+  .gamecult-article-meta {
+    align-items: flex-start;
+  }
+}