@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.19 (2019-06-07)

• Add a sensible default for browserslist config.
• UI
  • Add sun and moon emoji to the dark mode toggle.
  • Mobile responsive menu.
  • Right table of contents for docs is now sticky.
• Plugins
  • Change plugin definitions from classes to functions. Refer to the new plugin docs.
  • Implement Clients module API.
  • Change format within docusaurus.config.js to be like presets.
• Deps
  • Infima CSS is now locked down to specific versions and not relying upon the CDN which reads from trunk.
  • Update dependencies to latest
• Customize/ Override infima CSS variables by passing options into the classic preset.

presets: [
  [
    '@docusaurus/preset-classic',
    {
      theme: {
        customCss: require.resolve('./css/custom.css'),
      },
      ...
    },
  ],
],

• Allow passing remark and rehype plugins to mdx-loader for docs and blog plugin
• Move themes component of docs and blog to be part of theme-classic
• Use composition style for prism syntax highlighting instead of doing it via rehype plugin
• Pass MDXProvider to docs and blog. To change the provided MDX components, run docusaurus swizzle @docusaurus/theme-classic MDXComponents
• Add @docusaurus/theme-livecodeblock plugin
• Better run-time code generation & webpack splitchunks optimization
• Minify css for production build
• Fix weird scrolling problem when navigating to a route with a hash location

V2 Changelog (2019-04-10)