Skip to content

[2.0] RFC: docusaurus swizzle --wrap/copy #5380

@slorber

Description

@slorber

🚀 Feature

We have a feature to wrap existing theme components:
https://docusaurus.io/docs/using-themes#wrapping-theme-components

import OriginalFooter from "@theme-original/Footer";
import React from "react";

export default function Footer(props) {
  return (
    <>
      <div>Before footer</div>
      <OriginalFooter {...props} />
    </>
  );
}

It's a very useful pattern to use to customize your Docusaurus site.
It allows you to enhance a Docusaurus theme without having to copy (and maintain) theme code.

Unfortunately, this feature is not very visible and we don't encourage its usage, as the code above is only found in our doc, and the swizzle CLI command does not produce such code.

Some use-cases:

  • Add a custom comp before/after (above/under) any existing theme component (like add comments to blog posts)
  • Slightly modify the layout/behavior of an existing theme component (like, add line numbers to code blocks)
  • Add custom MDX components

I suggest to do some changes:

  • Add a docusaurus swizzle --wrap option to produce such code. It wouldn't require the usage of --danger because it's way safer than copying.
  • For copying, require explicit usage of --copy option, keep --danger for unsafe components and suggest to prefer usage of --wrap
  • No option: suggest use either --wrap or --copy, hint to prefer --wrap

Other changes to consider in the long term:

  • Rename docusaurus swizzle to something more intuitive like docusaurus theme?
  • Create much smaller theme components, so that users naturally have more before/after wrapping possibilities to suit their use-cases.

Metadata

Metadata

Assignees

No one assigned

    Labels

    featureThis is not a bug or issue with Docusausus, per se. It is a feature request for the future.

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions