feat(docz-theme-default): add fullpage support for docs

doczjs · Jul 22, 2018 · af88d0e · af88d0e
1 parent d909074
commit af88d0e
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 33 deletions.
diff --git a/packages/docz-theme-default/src/components/ui/Page.tsx b/packages/docz-theme-default/src/components/ui/Page.tsx
@@ -1,8 +1,10 @@
 import * as React from 'react'
-import { PageProps } from 'docz'
+import { PageProps, ThemeConfig } from 'docz'
 import { SFC } from 'react'
 import styled from 'react-emotion'
 
+import { Sidebar, Main } from '../shared'
+
 export const Container = styled('div')`
   margin: 0 auto;
   width: 960px;
@@ -18,8 +20,17 @@ const Wrapper = styled('div')`
   background: ${p => p.theme.colors.background};
 `
 
-export const Page: SFC<PageProps> = ({ children }) => (
-  <Wrapper>
-    <Container>{children}</Container>
-  </Wrapper>
-)
+export const Page: SFC<PageProps> = ({ children, doc: { fullpage } }) => {
+  return (
+    <ThemeConfig>
+      {config => (
+        <Main config={config}>
+          {!fullpage && <Sidebar />}
+          <Wrapper>
+            {fullpage ? children : <Container>{children}</Container>}
+          </Wrapper>
+        </Main>
+      )}
+    </ThemeConfig>
+  )
+}
diff --git a/packages/docz-theme-default/src/index.tsx b/packages/docz-theme-default/src/index.tsx
@@ -7,7 +7,6 @@ import webfont from 'webfontloader'
 import ReactBreakpoints from 'react-breakpoints'
 
 import { config } from './config'
-import { Sidebar, Main } from './components/shared'
 import { mq, breakpoints } from './styles/responsive'
 import * as components from './components/ui'
 import * as modes from './styles/modes'
@@ -18,30 +17,27 @@ const Theme = () => (
     {config => (
       <ThemeProvider theme={{ ...config, mq, breakpoints }}>
         <ReactBreakpoints breakpoints={breakpoints}>
-          <Main config={config}>
-            <Sidebar />
-            <DocPreview
-              components={{
-                page: components.Page,
-                notFound: components.NotFound,
-                render: components.Render,
-                h1: components.H1,
-                h2: components.H2,
-                h3: components.H3,
-                h4: components.H4,
-                h5: components.H5,
-                h6: components.H6,
-                ul: components.List,
-                p: components.Paragraph,
-                a: components.Link,
-                inlineCode: components.InlineCode,
-                loading: components.Loading,
-                table: components.Table,
-                pre: components.Pre,
-                tooltip: components.Tooltip,
-              }}
-            />
-          </Main>
+          <DocPreview
+            components={{
+              page: components.Page,
+              notFound: components.NotFound,
+              render: components.Render,
+              h1: components.H1,
+              h2: components.H2,
+              h3: components.H3,
+              h4: components.H4,
+              h5: components.H5,
+              h6: components.H6,
+              ul: components.List,
+              p: components.Paragraph,
+              a: components.Link,
+              inlineCode: components.InlineCode,
+              loading: components.Loading,
+              table: components.Table,
+              pre: components.Pre,
+              tooltip: components.Tooltip,
+            }}
+          />
         </ReactBreakpoints>
       </ThemeProvider>
     )}

diff --git a/packages/docz-theme-default/src/styles/index.ts b/packages/docz-theme-default/src/styles/index.ts
@@ -5,8 +5,6 @@ export const styles = {
     lineHeight: 1.5,
   },
   container: {
-    width: 960,
-    maxWidth: '100%',
     padding: ['20px 30px', '50px 50px 100px'],
   },
   h1: {