feat(v2): add optional custom wrapper class name for pages based on theme classic Layout (#3457)

* feat(v2): add optional custom wrapper class name for pages based on theme classic Layout

* feat(v2): add optional custom wrapper class name for markdown pages

* fix TS types

packages/docusaurus-plugin-content-pages/src/plugin-content-pages.d.ts

@@ -13,6 +13,7 @@ declare module '@theme/MDXPage' {
       readonly frontMatter: {
         readonly title: string;
         readonly description: string;
+        readonly wrapperClassName?: string;
       };
       readonly metadata: {readonly permalink: string};
       readonly rightToc: readonly MarkdownRightTableOfContents[];

packages/docusaurus-theme-classic/src/theme/Layout/index.tsx

@@ -6,6 +6,7 @@
  */
 
 import React from 'react';
+import clsx from 'clsx';
 import Head from '@docusaurus/Head';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useBaseUrl from '@docusaurus/useBaseUrl';
@@ -43,6 +44,7 @@ function Layout(props: Props): JSX.Element {
     image,
     keywords,
     permalink,
+    wrapperClassName,
   } = props;
   const metaTitle = title ? `${title} | ${siteTitle}` : siteTitle;
   const metaImage = image || defaultImage;
@@ -87,7 +89,7 @@ function Layout(props: Props): JSX.Element {
 
       <AnnouncementBar />
       <Navbar />
-      <div className="main-wrapper">{children}</div>
+      <div className={clsx('main-wrapper', wrapperClassName)}>{children}</div>
       {!noFooter && <Footer />}
     </Providers>
   );

packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx

@@ -14,11 +14,15 @@ import type {Props} from '@theme/MDXPage';
 function MDXPage(props: Props): JSX.Element {
   const {content: MDXPageContent} = props;
   const {frontMatter, metadata} = MDXPageContent;
-  const {title, description} = frontMatter;
+  const {title, description, wrapperClassName} = frontMatter;
   const {permalink} = metadata;
 
   return (
-    <Layout title={title} description={description} permalink={permalink}>
+    <Layout
+      title={title}
+      description={description}
+      permalink={permalink}
+      wrapperClassName={wrapperClassName}>
       <main>
         <div className="container margin-vert--lg padding-vert--lg">
           <MDXProvider components={MDXComponents}>

packages/docusaurus-theme-classic/src/types.d.ts

@@ -245,6 +245,7 @@ declare module '@theme/Layout' {
     image?: string;
     keywords?: string[];
     permalink?: string;
+    wrapperClassName?: string;
   };
 
   const Layout: (props: Props) => JSX.Element;

website/src/pages/examples/markdownPageExample.md

@@ -1,6 +1,7 @@
 ---
 title: Markdown Page example title
 description: Markdown Page example description
+wrapperClassName: docusaurus-markdown-example
 ---
 
 # Markdown page