From f9944cb2fcf74d9baecaad660c5e3725e97f2014 Mon Sep 17 00:00:00 2001
From: Bartosz Kaszubowski <gosimek@gmail.com>
Date: Wed, 23 Sep 2020 14:38:17 +0200
Subject: [PATCH] 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
---
 .../src/plugin-content-pages.d.ts                         | 1 +
 .../docusaurus-theme-classic/src/theme/Layout/index.tsx   | 4 +++-
 .../docusaurus-theme-classic/src/theme/MDXPage/index.tsx  | 8 ++++++--
 packages/docusaurus-theme-classic/src/types.d.ts          | 1 +
 website/src/pages/examples/markdownPageExample.md         | 1 +
 5 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/docusaurus-plugin-content-pages/src/plugin-content-pages.d.ts b/packages/docusaurus-plugin-content-pages/src/plugin-content-pages.d.ts
index 9eed9f0c36..7f5dc3fd57 100644
--- a/packages/docusaurus-plugin-content-pages/src/plugin-content-pages.d.ts
+++ b/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[];
diff --git a/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx b/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx
index 48b3086ec4..b41ad334ab 100644
--- a/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx
+++ b/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>
   );
diff --git a/packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx
index de2406baa9..4b960949e7 100644
--- a/packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx
+++ b/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}>
diff --git a/packages/docusaurus-theme-classic/src/types.d.ts b/packages/docusaurus-theme-classic/src/types.d.ts
index 0739ee9be9..7d12285625 100644
--- a/packages/docusaurus-theme-classic/src/types.d.ts
+++ b/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;
diff --git a/website/src/pages/examples/markdownPageExample.md b/website/src/pages/examples/markdownPageExample.md
index 5e35d6771e..9637579929 100644
--- a/website/src/pages/examples/markdownPageExample.md
+++ b/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