+
)}
-
-
+
+ {props.showDate &&
}
+
-
-
- {formattedDate}
-
-
- {post.excerpt &&
{post.excerpt}
}
+
+ {post.excerpt && (
+
+ {post.excerpt}
+
+ )}
+ {posts.map((post, index) => (
+
+ {post.featuredImage && (
+
+
+ )}
+
+ {props.showDate &&
}
+
+
+
+ {post.excerpt && (
+
+ {post.excerpt}
+
+ )}
+
+ ))}
+
+
+ {formattedDate}
+
+
+ );
+}
+
+function PostAttribution({ showAuthor, post }) {
+ const author = showAuthor ? postAuthor(post) : null;
+ const category = postCategory(post);
+ if (!author && !category) {
+ return null;
+ }
+ return (
+
+ {author && (
+ <>
+ {'By '}
+ {author}
+
+ )}
+ {category && (
+ <>
+ {author ? ' in ' : 'In '}
+ {category}
+
+ )}
+
+ );
+}
+
+function postAuthor(post) {
+ if (!post.author) {
+ return null;
+ }
+ const author = post.author;
+ const children = (
+ <>
+ {author.firstName && {author.firstName} }{' '}
+ {author.lastName && {author.lastName} }
+
+ );
+ if (author.slug) {
+ return (
+ {children} ;
+ }
+}
+
+function postCategory(post) {
+ if (!post.category) {
+ return null;
+ }
+ const category = post.category;
+ return (
+
-
- );
+ return
)}
diff --git a/src/layouts/PostFeedCategoryLayout/index.tsx b/src/layouts/PostFeedCategoryLayout/index.tsx
new file mode 100644
index 00000000..4e6b6605
--- /dev/null
+++ b/src/layouts/PostFeedCategoryLayout/index.tsx
@@ -0,0 +1,2 @@
+import PostFeedLayout from '../PostFeedLayout';
+export default PostFeedLayout;
diff --git a/src/layouts/PostFeedLayout/index.tsx b/src/layouts/PostFeedLayout/index.tsx
new file mode 100644
index 00000000..99700ee9
--- /dev/null
+++ b/src/layouts/PostFeedLayout/index.tsx
@@ -0,0 +1,127 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import Link from '../../utils/link';
+import { getComponent } from '../../components-registry';
+import { getBaseLayoutComponent } from '../../utils/base-layout';
+
+export default function PostFeedLayout(props) {
+ const { page, site } = props;
+ const BaseLayout = getBaseLayoutComponent(page.baseLayout, site.baseLayout);
+ const { title, topSections = [], bottomSections = [], pageIndex, baseUrlPath, numOfPages, items, postFeed } = page;
+ const PostFeedSection = getComponent('PostFeedSection');
+ const pageLinks = PageLinks({ pageIndex, baseUrlPath, numOfPages });
+
+ return (
+
+
+ {title && (
+
+ {title}
+
+ )}
+ {renderSections(topSections, 'topSections')}
+
+
+ );
+}
+
+function renderSections(sections: any[], fieldName: string) {
+ if (sections.length === 0) {
+ return null;
+ }
+ return (
+
+ {sections.map((section, index) => {
+ const Component = getComponent(section.type);
+ if (!Component) {
+ throw new Error(`no component matching the page section's type: ${section.type}`);
+ }
+ return
+ );
+}
+
+function PageLinks({ pageIndex, baseUrlPath, numOfPages }) {
+ if (numOfPages < 2) {
+ return null;
+ }
+ const pageLinks = [];
+ const padRange = 2;
+ const startIndex = pageIndex - padRange > 2 ? pageIndex - padRange : 0;
+ const endIndex = pageIndex + padRange < numOfPages - 3 ? pageIndex + padRange : numOfPages - 1;
+
+ // following logic renders pagination controls:
+ // for example, if the current page is 6 (pageIndex === 5)
+ // ↓
+ // ← 1 ... 4 5 6 7 8 ... 20 →
+ // ↑ ↑
+ // and padRange === 2, then it renders from 4 (6 - 2) to 8 (6 + 2)
+
+ // renders prev "←" button, if the current page is the first page, the button is disabled
+ if (pageIndex > 0) {
+ pageLinks.push(
);
+ } else {
+ pageLinks.push(
);
+ }
+
+ // if startIndex is not 0, then render the first page followed by ellipsis, if needed.
+ if (startIndex > 0) {
+ pageLinks.push(
);
+ if (startIndex > 1) {
+ pageLinks.push(
);
+ }
+ }
+
+ // render all pages between startIndex and endIndex, the current page should be disabled
+ for (let i = startIndex; i <= endIndex; i++) {
+ if (pageIndex === i) {
+ pageLinks.push(
);
+ } else {
+ pageLinks.push(
);
+ }
+ }
+
+ // if endIndex is not the last page, then render the last page preceded by ellipsis, if needed.
+ if (endIndex < numOfPages - 1) {
+ if (endIndex < numOfPages - 2) {
+ pageLinks.push(
);
+ }
+ pageLinks.push(
);
+ }
+
+ // renders next "→" button, if the current page is the last page, the button is disabled
+ if (pageIndex < numOfPages - 1) {
+ pageLinks.push(
);
+ } else {
+ pageLinks.push(
);
+ }
+
+ return
{pageLinks}
;
+}
+
+function PageLink({ pageIndex, buttonLabel, baseUrlPath }) {
+ return (
+
+ {buttonLabel}
+
+ );
+}
+
+function PageLinkDisabled({ buttonLabel }) {
+ return (
+
+ {buttonLabel}
+
+ );
+}
+
+function Ellipsis() {
+ return
… ;
+}
+
+function urlPathForPageAtIndex(pageIndex, baseUrlPath) {
+ return pageIndex === 0 ? baseUrlPath : `${baseUrlPath}/page/${pageIndex + 1}`;
+}
diff --git a/src/layouts/PostLayout/index.tsx b/src/layouts/PostLayout/index.tsx
index 116d1ac3..05d1ff86 100644
--- a/src/layouts/PostLayout/index.tsx
+++ b/src/layouts/PostLayout/index.tsx
@@ -3,6 +3,8 @@ import dayjs from 'dayjs';
import Markdown from 'markdown-to-jsx';
import { getBaseLayoutComponent } from '../../utils/base-layout';
import { getComponent } from '../../components-registry';
+import Link from '../../utils/link';
+import getPageUrlPath from '../../utils/get-page-url-path';
export default function PostLayout(props) {
const { page, site } = props;
@@ -23,7 +25,7 @@ export default function PostLayout(props) {