Support description in OrganizedContent Header

components/OrganizedContent/Header.module.css

@@ -19,6 +19,15 @@
   text-align: center;
 }
 
+.imageRight {
+  flex-direction: row-reverse;
+}
+
+.imageRight .header {
+  text-align: left;
+  margin-left: 0;
+}
+
 @media only screen and (max-width: calc(768rem / 16)) {
   .headerContainer {
     flex-direction: column;
@@ -34,4 +43,8 @@
   .headerImage {
     width: calc(100rem / 16);
   }
+
+  .description {
+    display: none;
+  }
 }

components/OrganizedContent/Header.tsx

@@ -8,14 +8,29 @@ export interface Props {
   title: string;
   image: string;
   children: ReactNode;
+  description?: string;
+  imagePosition?: "left" | "right";
 }
 
-export function Header({ title, image, children }: Props) {
+export function Header({
+  title,
+  image,
+  children,
+  description,
+  imagePosition,
+}: Props) {
   return (
     <main className={styles.page}>
-      <header className={styles.headerContainer}>
+      <header
+        className={`${styles.headerContainer} ${
+          imagePosition === "right" ? styles.imageRight : ""
+        }`}
+      >
         <Image src={image} className={styles.headerImage} />
-        <h1 className={styles.header}>{title}</h1>
+        <div>
+          <h1 className={styles.header}>{title}</h1>
+          {description && <p className={styles.description}>{description}</p>}
+        </div>
       </header>
       {children}
     </main>

components/OrganizedContent/ReadAll.tsx

@@ -26,10 +26,19 @@ export interface Options {
   pagePath: string;
   title: string;
   image: string;
+  imagePosition?: "left" | "right";
   link?: ComponentType<LinkProps>;
+  description?: string;
 }
 
-export function createReadAllPage({ title, image, pagePath, link }: Options) {
+export function createReadAllPage({
+  title,
+  image,
+  pagePath,
+  link,
+  description,
+  imagePosition,
+}: Options) {
   const Link = link ?? createLink(pagePath);
 
   return function Page({ sections }: Props) {
@@ -44,7 +53,12 @@ export function createReadAllPage({ title, image, pagePath, link }: Options) {
     );
 
     return (
-      <Header title={title} image={image}>
+      <Header
+        title={title}
+        image={image}
+        description={description}
+        imagePosition={imagePosition}
+      >
         <OrganizedContent
           id={readAllSection.section.id}
           sections={[

components/OrganizedContent/Section.tsx

@@ -1,13 +1,10 @@
 import { MDXRemote, MDXRemoteSerializeResult } from "next-mdx-remote";
-import React, { ComponentType } from "react";
+import React from "react";
 
-import {
-  createLink,
-  LinkProps,
-  OrganizedContent,
-} from "@/components/OrganizedContent";
+import { createLink, OrganizedContent } from "@/components/OrganizedContent";
 
 import { Header } from "./Header";
+import { Options } from "./ReadAll";
 
 interface Section {
   id: string;
@@ -20,19 +17,24 @@ export interface Props {
   current: number;
 }
 
-export interface Options {
-  title: string;
-  pagePath: string;
-  image: string;
-  link?: ComponentType<LinkProps>;
-}
-
-export function createSectionPage({ title, image, pagePath, link }: Options) {
+export function createSectionPage({
+  title,
+  image,
+  pagePath,
+  link,
+  description,
+  imagePosition,
+}: Options) {
   const Link = link ?? createLink(pagePath);
 
   return function Page(this: void, { content, sections, current }: Props) {
     return (
-      <Header title={title} image={image}>
+      <Header
+        title={title}
+        image={image}
+        description={description}
+        imagePosition={imagePosition}
+      >
         <OrganizedContent
           sections={sections}
           id={sections[current].id}