Support description in OrganizedContent Header
This commit is contained in:
parent
5a52682c76
commit
eda8393a7a
|
@ -19,6 +19,15 @@
|
||||||
text-align: center;
|
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)) {
|
@media only screen and (max-width: calc(768rem / 16)) {
|
||||||
.headerContainer {
|
.headerContainer {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
@ -34,4 +43,8 @@
|
||||||
.headerImage {
|
.headerImage {
|
||||||
width: calc(100rem / 16);
|
width: calc(100rem / 16);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -8,14 +8,29 @@ export interface Props {
|
||||||
title: string;
|
title: string;
|
||||||
image: string;
|
image: string;
|
||||||
children: ReactNode;
|
children: ReactNode;
|
||||||
|
description?: string;
|
||||||
|
imagePosition?: "left" | "right";
|
||||||
}
|
}
|
||||||
|
|
||||||
export function Header({ title, image, children }: Props) {
|
export function Header({
|
||||||
|
title,
|
||||||
|
image,
|
||||||
|
children,
|
||||||
|
description,
|
||||||
|
imagePosition,
|
||||||
|
}: Props) {
|
||||||
return (
|
return (
|
||||||
<main className={styles.page}>
|
<main className={styles.page}>
|
||||||
<header className={styles.headerContainer}>
|
<header
|
||||||
|
className={`${styles.headerContainer} ${
|
||||||
|
imagePosition === "right" ? styles.imageRight : ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
<Image src={image} className={styles.headerImage} />
|
<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>
|
</header>
|
||||||
{children}
|
{children}
|
||||||
</main>
|
</main>
|
||||||
|
|
|
@ -26,10 +26,19 @@ export interface Options {
|
||||||
pagePath: string;
|
pagePath: string;
|
||||||
title: string;
|
title: string;
|
||||||
image: string;
|
image: string;
|
||||||
|
imagePosition?: "left" | "right";
|
||||||
link?: ComponentType<LinkProps>;
|
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);
|
const Link = link ?? createLink(pagePath);
|
||||||
|
|
||||||
return function Page({ sections }: Props) {
|
return function Page({ sections }: Props) {
|
||||||
|
@ -44,7 +53,12 @@ export function createReadAllPage({ title, image, pagePath, link }: Options) {
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Header title={title} image={image}>
|
<Header
|
||||||
|
title={title}
|
||||||
|
image={image}
|
||||||
|
description={description}
|
||||||
|
imagePosition={imagePosition}
|
||||||
|
>
|
||||||
<OrganizedContent
|
<OrganizedContent
|
||||||
id={readAllSection.section.id}
|
id={readAllSection.section.id}
|
||||||
sections={[
|
sections={[
|
||||||
|
|
|
@ -1,13 +1,10 @@
|
||||||
import { MDXRemote, MDXRemoteSerializeResult } from "next-mdx-remote";
|
import { MDXRemote, MDXRemoteSerializeResult } from "next-mdx-remote";
|
||||||
import React, { ComponentType } from "react";
|
import React from "react";
|
||||||
|
|
||||||
import {
|
import { createLink, OrganizedContent } from "@/components/OrganizedContent";
|
||||||
createLink,
|
|
||||||
LinkProps,
|
|
||||||
OrganizedContent,
|
|
||||||
} from "@/components/OrganizedContent";
|
|
||||||
|
|
||||||
import { Header } from "./Header";
|
import { Header } from "./Header";
|
||||||
|
import { Options } from "./ReadAll";
|
||||||
|
|
||||||
interface Section {
|
interface Section {
|
||||||
id: string;
|
id: string;
|
||||||
|
@ -20,19 +17,24 @@ export interface Props {
|
||||||
current: number;
|
current: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface Options {
|
export function createSectionPage({
|
||||||
title: string;
|
title,
|
||||||
pagePath: string;
|
image,
|
||||||
image: string;
|
pagePath,
|
||||||
link?: ComponentType<LinkProps>;
|
link,
|
||||||
}
|
description,
|
||||||
|
imagePosition,
|
||||||
export function createSectionPage({ title, image, pagePath, link }: Options) {
|
}: Options) {
|
||||||
const Link = link ?? createLink(pagePath);
|
const Link = link ?? createLink(pagePath);
|
||||||
|
|
||||||
return function Page(this: void, { content, sections, current }: Props) {
|
return function Page(this: void, { content, sections, current }: Props) {
|
||||||
return (
|
return (
|
||||||
<Header title={title} image={image}>
|
<Header
|
||||||
|
title={title}
|
||||||
|
image={image}
|
||||||
|
description={description}
|
||||||
|
imagePosition={imagePosition}
|
||||||
|
>
|
||||||
<OrganizedContent
|
<OrganizedContent
|
||||||
sections={sections}
|
sections={sections}
|
||||||
id={sections[current].id}
|
id={sections[current].id}
|
||||||
|
|
Loading…
Reference in New Issue