diff --git a/site/quartz.layout.ts b/site/quartz.layout.ts index f6d4634..f3a0fec 100644 --- a/site/quartz.layout.ts +++ b/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: [ diff --git a/site/quartz/components/GameCultArticleMeta.tsx b/site/quartz/components/GameCultArticleMeta.tsx new file mode 100644 index 0000000..cfe2f82 --- /dev/null +++ b/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 ( +
+ {authorLabel(fileData.frontmatter)} +

+ {fileData.dates && } + {displayedTime} +

+
+ ) + } + + GameCultArticleMeta.css = style + return GameCultArticleMeta +}) satisfies QuartzComponentConstructor diff --git a/site/quartz/components/styles/gameCultArticleMeta.scss b/site/quartz/components/styles/gameCultArticleMeta.scss new file mode 100644 index 0000000..689f680 --- /dev/null +++ b/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; + } +}