Refactor constitution and code of conduct pages shapes backgrounds

This commit is contained in:
Amy 2021-08-23 16:28:25 -04:00
parent 5bceff26fd
commit 5fbe067b00
4 changed files with 32 additions and 20 deletions

View File

@ -8,11 +8,7 @@ import {
OrganizedContent,
} from "@/components/OrganizedContent";
import {
mobileShapesConfig,
aboutShapesConfig,
GetShapesConfig,
} from "../ShapesBackground";
import { GetShapesConfig } from "../ShapesBackground";
import { Header } from "./Header";
@ -32,10 +28,17 @@ export interface Options {
pagePath: string;
title: string;
image: string;
getShapesConfig: GetShapesConfig;
link?: ComponentType<LinkProps>;
}
export function createReadAllPage({ title, image, pagePath, link }: Options) {
export function createReadAllPage({
title,
image,
pagePath,
getShapesConfig,
link,
}: Options) {
const Link = link ?? createLink(pagePath);
function Page({ sections }: Props) {
@ -65,10 +68,7 @@ export function createReadAllPage({ title, image, pagePath, link }: Options) {
);
}
// TODO: differentiate between About pages and Resources pages
Page.getShapesConfig = (() => {
return window.innerWidth <= 768 ? mobileShapesConfig : aboutShapesConfig;
}) as GetShapesConfig;
Page.getShapesConfig = getShapesConfig;
return Page;
}

View File

@ -7,11 +7,7 @@ import {
OrganizedContent,
} from "@/components/OrganizedContent";
import {
mobileShapesConfig,
aboutShapesConfig,
GetShapesConfig,
} from "../ShapesBackground";
import { GetShapesConfig } from "../ShapesBackground";
import { Header } from "./Header";
@ -30,10 +26,17 @@ export interface Options {
title: string;
pagePath: string;
image: string;
getShapesConfig: GetShapesConfig;
link?: ComponentType<LinkProps>;
}
export function createSectionPage({ title, image, pagePath, link }: Options) {
export function createSectionPage({
title,
image,
pagePath,
getShapesConfig,
link,
}: Options) {
const Link = link ?? createLink(pagePath);
function Page(this: void, { content, sections, current }: Props) {
@ -50,10 +53,7 @@ export function createSectionPage({ title, image, pagePath, link }: Options) {
);
}
// TODO: differentiate between About pages and Resources pages
Page.getShapesConfig = (() => {
return window.innerWidth <= 768 ? mobileShapesConfig : aboutShapesConfig;
}) as GetShapesConfig;
Page.getShapesConfig = getShapesConfig;
return Page;
}

View File

@ -2,6 +2,10 @@ import path from "path";
import { createReadAllPage } from "@/components/OrganizedContent/ReadAll";
import { createReadAllGetStaticProps } from "@/components/OrganizedContent/static";
import {
mobileShapesConfig,
aboutShapesConfig,
} from "@/components/ShapesBackground";
export const CONSTITUTION_PAGE = path.join("about", "constitution");
@ -9,6 +13,8 @@ export default createReadAllPage({
title: "Constitution",
image: "images/constitution.svg",
pagePath: CONSTITUTION_PAGE,
getShapesConfig: () =>
window.innerWidth <= 768 ? mobileShapesConfig : aboutShapesConfig,
});
export const getStaticProps = createReadAllGetStaticProps(CONSTITUTION_PAGE);

View File

@ -3,6 +3,10 @@ import {
createSectionGetStaticPaths,
createSectionGetStaticProps,
} from "@/components/OrganizedContent/static";
import {
mobileShapesConfig,
aboutShapesConfig,
} from "@/components/ShapesBackground";
import { CONSTITUTION_PAGE } from "../constitution";
@ -10,6 +14,8 @@ export default createSectionPage({
title: "Constitution",
image: "images/constitution.svg",
pagePath: CONSTITUTION_PAGE,
getShapesConfig: () =>
window.innerWidth <= 768 ? mobileShapesConfig : aboutShapesConfig,
});
export const getStaticProps = createSectionGetStaticProps(CONSTITUTION_PAGE);