@docusaurus/plugin-content-pages

What is @docusaurus/plugin-content-pages?

@docusaurus/plugin-content-pages is a plugin for Docusaurus, a popular static site generator. This plugin allows you to create custom pages in your Docusaurus site using React components. It is useful for adding static content that doesn't fit into the documentation or blog categories, such as landing pages, about pages, or custom 404 pages.

What are @docusaurus/plugin-content-pages's main functionalities?

Creating Custom Pages

This feature allows you to create custom pages in your Docusaurus site. You can define a new page by creating a React component in the `src/pages` directory. The example shows how to create a simple custom page with a title and some content.

module.exports = {
  plugins: [
    '@docusaurus/plugin-content-pages',
  ],
};

// src/pages/customPage.js
import React from 'react';
import Layout from '@theme/Layout';

function CustomPage() {
  return (
    <Layout title="Custom Page">
      <div>
        <h1>Custom Page</h1>
        <p>This is a custom page.</p>
      </div>
    </Layout>
  );
}

export default CustomPage;

Custom 404 Page

This feature allows you to create a custom 404 page for your Docusaurus site. By creating a `404.js` file in the `src/pages` directory, you can define the content that will be displayed when a user navigates to a non-existent page.

// src/pages/404.js
import React from 'react';
import Layout from '@theme/Layout';

function NotFound() {
  return (
    <Layout title="Page Not Found">
      <div>
        <h1>404</h1>
        <p>Oops! The page you are looking for does not exist.</p>
      </div>
    </Layout>
  );
}

export default NotFound;

Other packages similar to @docusaurus/plugin-content-pages

gatsby-plugin-page-creator

gatsby-plugin-page-creator is a plugin for Gatsby, another popular static site generator. It automatically creates pages from React components in specified directories. Compared to @docusaurus/plugin-content-pages, it offers similar functionality but is tailored for use with Gatsby.

next.js

Next.js is a React framework that allows you to create static and dynamic pages. It provides a file-based routing system where you can create pages by adding React components to the `pages` directory. While it offers more advanced features like server-side rendering and API routes, it can be used similarly to @docusaurus/plugin-content-pages for creating static content.

README

The README file is missing

Changelog

2.0.0-alpha.31 (2019-10-26)

• Footer is now sticky/ pinned to the bottom of the viewport in desktop browsers.
• Footer is now also displayed in docs page for consistency.
• Remove empty doc sidebar container if sidebar for a particular doc page does not exist. Otherwise, it will cause an additional empty space.
• Default PostCSS loader now only polyfills stage 3+ features (previously it was stage 2) like Create React App. Stage 2 CSS is considered relatively unstable and subject to change while Stage 3 features will likely become a standard.
• Fix search bar focus bug. When you put the focus on search input, previously the focus will remain although we have clicked to other area outside of the search input.
• New themeConfig option sidebarCollapsible. It is on by default. If explicitly set to false, all doc items in sidebar is expanded. Otherwise, it will still be a collapsible sidebar.
• Disable adding hashes to the generated class names of CSS modules in dev mode. Generating unique identifiers takes some time, which can be saved since including paths to files in class names is enough to avoid collisions.
• Fix showing sidebar category with empty items.
• Update infima from 0.2.0-alpha.2 to 0.2.0-alpha.3
  • Fix pagination nav and right sidebar color contrast ratio
  • Fix sidebar arrow color in dark mode
  • Fix footer mobile issue
  • Increase sidebar width
  • etc