From dec4b2b35ed4ef3505baa5006b028696acb69274 Mon Sep 17 00:00:00 2001 From: Pedro Nauck Date: Fri, 12 Jul 2019 14:59:37 -0300 Subject: [PATCH] feat(gatsby-theme-docz): add custom logo support --- core/gatsby-theme-docz/README.md | 15 +++++++++++++- .../src/components/Header/index.js | 13 +++++------- .../src/components/Header/styles.js | 20 +++++++------------ .../src/components/Logo/index.css | 1 + .../src/components/Logo/index.js | 16 +++++++++++++++ .../src/components/Logo/styles.js | 15 ++++++++++++++ core/gatsby-theme-docz/src/theme/modes.js | 6 +++--- 7 files changed, 61 insertions(+), 25 deletions(-) create mode 100644 core/gatsby-theme-docz/src/components/Logo/index.css create mode 100644 core/gatsby-theme-docz/src/components/Logo/index.js create mode 100644 core/gatsby-theme-docz/src/components/Logo/styles.js diff --git a/core/gatsby-theme-docz/README.md b/core/gatsby-theme-docz/README.md index a891535d6..e8d07fcc6 100644 --- a/core/gatsby-theme-docz/README.md +++ b/core/gatsby-theme-docz/README.md @@ -59,7 +59,20 @@ theme files just by creating your own file following a file naming convetion. Example: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right? -So, now that you know about how component shadowing works on Gatsby themes, you can override anything inside the `gatsby-theme-docz`. +### Adding your logo + +So, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `
` component +but just change your logo inside it, your can shadow the `` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js` + +```js +// src/gatsby-theme-docz/components/Logo/index.js +import React from 'react' +import logo from './logo.svg' + +export const Logo = () => That's my logo +``` + +Easy, right? ### Creating your own Docz theme diff --git a/core/gatsby-theme-docz/src/components/Header/index.js b/core/gatsby-theme-docz/src/components/Header/index.js index 9d6c31c1d..df84cd52e 100644 --- a/core/gatsby-theme-docz/src/components/Header/index.js +++ b/core/gatsby-theme-docz/src/components/Header/index.js @@ -1,12 +1,13 @@ /** @jsx jsx */ import { jsx, Box, Flex, useColorMode } from 'theme-ui' -import { Link, useConfig, useCurrentDoc } from 'docz' +import { useConfig, useCurrentDoc } from 'docz' import styled from '@emotion/styled' import { themeProp } from '~utils/theme' -import { Edit, Sun, Github } from '../Icons' import * as styles from './styles' +import { Edit, Sun, Github } from '../Icons' +import { Logo } from '../Logo' const Wrapper = styled(Box)` border-bottom: 1px solid ${themeProp('colors.header.border')}; @@ -22,13 +23,9 @@ export const Header = () => { } return ( - +
- - - {config.title} - - + {config.repository && ( diff --git a/core/gatsby-theme-docz/src/components/Header/styles.js b/core/gatsby-theme-docz/src/components/Header/styles.js index 93a07749e..d180c53c4 100644 --- a/core/gatsby-theme-docz/src/components/Header/styles.js +++ b/core/gatsby-theme-docz/src/components/Header/styles.js @@ -1,8 +1,12 @@ import * as mixins from '~utils/mixins' -export const wrapper = { - bg: 'header.bg', -} +export const wrapper = mode => ({ + backgroundSize: '400px auto', + background: + mode === 'dark' + ? `url(https://cdn-std.dprcdn.net/files/acc_649651/ykOjN7)` + : `url(https://cdn-std.dprcdn.net/files/acc_649651/zPkIFZ)`, +}) export const innerContainer = { ...mixins.centerAlign, @@ -11,16 +15,6 @@ export const innerContainer = { justifyContent: 'space-between', } -export const link = { - fontSize: 3, - fontWeight: 600, - color: 'header.text', - textDecoration: 'none', - ':hover': { - color: 'primary', - }, -} - export const headerButton = { ...mixins.centerAlign, outline: 'none', diff --git a/core/gatsby-theme-docz/src/components/Logo/index.css b/core/gatsby-theme-docz/src/components/Logo/index.css new file mode 100644 index 000000000..15669cc36 --- /dev/null +++ b/core/gatsby-theme-docz/src/components/Logo/index.css @@ -0,0 +1 @@ +@import url('https://fonts.googleapis.com/css?family=Merriweather&display=swap'); diff --git a/core/gatsby-theme-docz/src/components/Logo/index.js b/core/gatsby-theme-docz/src/components/Logo/index.js new file mode 100644 index 000000000..be9f10049 --- /dev/null +++ b/core/gatsby-theme-docz/src/components/Logo/index.js @@ -0,0 +1,16 @@ +/** @jsx jsx */ +import { jsx, Flex } from 'theme-ui' +import { Link, useConfig } from 'docz' + +import * as styles from './styles' + +export const Logo = () => { + const config = useConfig() + return ( + + + {config.title} + + + ) +} diff --git a/core/gatsby-theme-docz/src/components/Logo/styles.js b/core/gatsby-theme-docz/src/components/Logo/styles.js new file mode 100644 index 000000000..856a4046b --- /dev/null +++ b/core/gatsby-theme-docz/src/components/Logo/styles.js @@ -0,0 +1,15 @@ +import './index.css' + +export const logo = { + fontFamily: 'Merriweather', + fontSize: 3, +} + +export const link = { + fontWeight: 600, + color: 'header.text', + textDecoration: 'none', + ':hover': { + color: 'primary', + }, +} diff --git a/core/gatsby-theme-docz/src/theme/modes.js b/core/gatsby-theme-docz/src/theme/modes.js index 7d5692187..784c11dc1 100644 --- a/core/gatsby-theme-docz/src/theme/modes.js +++ b/core/gatsby-theme-docz/src/theme/modes.js @@ -23,8 +23,8 @@ export const light = { text: colors.dark, border: colors.grayLight, button: { - bg: colors.grayLight, - color: colors.grayDark, + bg: colors.blue, + color: colors.white, }, }, props: { @@ -70,7 +70,7 @@ export const dark = { text: colors.grayLight, border: colors.grayDark, button: { - bg: colors.grayDark, + bg: colors.skyBlue, color: colors.white, }, },