Add roles "page:header" and "page:footer"

2 files changed, 11 insertions, 5 deletions

diff --git a/packages/gitbook-plugin-theme-default/less/Page.less b/packages/gitbook-plugin-theme-default/less/Page.less
index 3d6e9db..6011533 100644
--- a/packages/gitbook-plugin-theme-default/less/Page.less
+++ b/packages/gitbook-plugin-theme-default/less/Page.less
@@ -1,4 +1,4 @@
-.Page {
+.PageContainer {
     position: relative;
     outline: none;
     width: 100%;
diff --git a/packages/gitbook-plugin-theme-default/src/components/Page.js b/packages/gitbook-plugin-theme-default/src/components/Page.js
index cad3765..8e4324c 100644
--- a/packages/gitbook-plugin-theme-default/src/components/Page.js
+++ b/packages/gitbook-plugin-theme-default/src/components/Page.js
@@ -10,11 +10,17 @@ const Page = React.createClass({
         const { page } = this.props;
 
         return (
-            <div className="Page page-wrapper">
+            <div className="PageContainer">
                 <GitBook.InjectedComponent matching={{ role: 'search:container:results' }} props={this.props}>
-                    <GitBook.InjectedComponent matching={{ role: 'page:container' }} props={this.props}>
-                        <GitBook.HTMLContent html={page.content} />
-                    </GitBook.InjectedComponent>
+                    <div className="Page">
+                        <GitBook.InjectedComponentSet matching={{ role: 'page:header' }} props={this.props} />
+
+                        <GitBook.InjectedComponent matching={{ role: 'page:container' }} props={this.props}>
+                            <GitBook.HTMLContent html={page.content} />
+                        </GitBook.InjectedComponent>
+
+                        <GitBook.InjectedComponentSet matching={{ role: 'page:footer' }} props={this.props} />
+                    </div>
                 </GitBook.InjectedComponent>
             </div>
         );