docusaurus/lib/core/BlogPageLayout.js

/**
 * Copyright (c) 2017-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

const BlogPost = require("./BlogPost.js");
const BlogSidebar = require("./BlogSidebar.js");
const Container = require("./Container.js");
const MetadataBlog = require("./MetadataBlog.js");
const React = require("react");
const Site = require("./Site.js");

// used to generate entire blog pages, i.e. collection of truncated blog posts
class BlogPageLayout extends React.Component {
  getPageURL(page) {
    let url = this.props.config.baseUrl + "blog/";
    if (page > 0) {
      url += "page" + (page + 1) + "/";
    }
    return url;
  }

  render() {
    const perPage = this.props.metadata.perPage;
    const page = this.props.metadata.page;
    return (
      <Site title="Blog" language="en" config={this.props.config}>
        <div className="docMainWrapper wrapper">
          <BlogSidebar
            language={this.props.language}
            config={this.props.config}
          />
          <Container className="mainContainer documentContainer postContainer blogContainer">
            <div className="posts">
              {MetadataBlog.slice(
                page * perPage,
                (page + 1) * perPage
              ).map(post => {
                return (
                  <BlogPost
                    post={post}
                    content={post.content}
                    truncate={true}
                    key={post.path + post.title}
                    config={this.props.config}
                  />
                );
              })}
              <div className="docs-prevnext">
                {page > 0 && (
                  <a className="docs-prev" href={this.getPageURL(page - 1)}>
                    ← Prev
                  </a>
                )}
                {MetadataBlog.length > (page + 1) * perPage && (
                  <a className="docs-next" href={this.getPageURL(page + 1)}>
                    Next →
                  </a>
                )}
              </div>
            </div>
          </Container>
        </div>
      </Site>
    );
  }
}

module.exports = BlogPageLayout;