feat(docz-theme-default): add logo option

doczjs · May 26, 2018 · 435da9b · 435da9b
1 parent 0dcaefb
commit 435da9b
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 12 deletions.
diff --git a/packages/docz-core/src/DataServer.ts b/packages/docz-core/src/DataServer.ts
@@ -87,7 +87,11 @@ export class DataServer {
   }
 
   private configData(config: Config): string {
-    return this.dataObj('docz.config', config.themeConfig)
+    return this.dataObj('docz.config', {
+      ...config.themeConfig,
+      title: config.title,
+      description: config.description,
+    })
   }
 
   private updateEntries(
@@ -105,7 +109,7 @@ export class DataServer {
   }
 
   private updateConfig(socket: WS): () => void {
-    const config = load('docz', {}, true)
+    const config = load('docz', { ...this.config }, true)
 
     return () => {
       if (isSocketOpened(socket)) {

diff --git a/packages/docz-core/src/commands/args.ts b/packages/docz-core/src/commands/args.ts
@@ -41,11 +41,11 @@ export const args = (yargs: any) => {
   })
   yargs.positional('title', {
     type: 'string',
-    default: 'Docz',
+    default: 'MyDoc',
   })
   yargs.positional('description', {
     type: 'string',
-    default: 'My awesome design system!',
+    default: 'My awesome app using Docz',
   })
   yargs.positional('theme', {
     type: 'string',

diff --git a/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx b/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Docs, Link, Entry } from 'docz'
+import { Docs, Link, Entry, ThemeConfig } from 'docz'
 import styled from 'react-emotion'
 
 import { Menu, isActive } from './Menu'
@@ -38,6 +38,28 @@ const Wrapper = styled('div')`
   }
 `
 
+const LogoImg = styled('img')`
+  margin: 24px 16px 64px;
+  padding: 0;
+`
+
+const LogoText = styled('h1')`
+  position: relative;
+  margin: 24px 16px 64px;
+  padding: 0;
+  font-size: 32px;
+
+  &:before {
+    position: absolute;
+    content: '';
+    bottom: 0;
+    left: 0;
+    width: 15%;
+    height: 3px;
+    background: ${p => p.theme.colors.primary};
+  }
+`
+
 export const Sidebar = () => (
   <Docs>
     {({ docs, menus }) => {
@@ -46,6 +68,15 @@ export const Sidebar = () => (
 
       return (
         <Wrapper>
+          <ThemeConfig>
+            {({ title, logo }) =>
+              logo ? (
+                <LogoImg src={logo.src} width={logo.width} alt={title} />
+              ) : (
+                <LogoText>{title}</LogoText>
+              )
+            }
+          </ThemeConfig>
           {docsWithoutMenu.map(doc => (
             <Link key={doc.id} to={doc.slug} isActive={isActive}>
               {doc.name}

diff --git a/packages/docz/src/components/ThemeConfig.tsx b/packages/docz/src/components/ThemeConfig.tsx
@@ -3,20 +3,16 @@ import { SFC, Children } from 'react'
 
 import { dataContext, ThemeConfig as Config } from '../theme'
 
-export interface ThemeConfigRenderProps {
-  config: Config
-}
-
 export interface ThemeConfigProps {
-  children?: (renderProps: ThemeConfigRenderProps) => React.ReactNode
+  children?: (config: Config) => React.ReactNode
 }
 
 export const ThemeConfig: SFC<ThemeConfigProps> = ({ children }) => {
   if (typeof children !== 'function') return null
 
   return (
     <dataContext.Consumer>
-      {({ config }) => Children.only(children({ config }))}
+      {({ config }) => Children.only(children(config))}
     </dataContext.Consumer>
   )
 }
diff --git a/packages/docz/src/theme.tsx b/packages/docz/src/theme.tsx
@@ -63,7 +63,7 @@ export function theme(
     const value = {
       entries,
       imports,
-      config: merge(defaultConfig || {}, config),
+      config: merge(defaultConfig, config),
     }
 
     return (