feat: site logo, default and custom

core/core/src/configuration.ts

@@ -217,6 +217,10 @@ export interface RunOnlyConfiguration {
    */
   title?: string;
 
+  /**
+   * logo for the site - can be a string link to an image, or a react node
+   */
+  logo?: string | ReactNode;
   /**
    * Deployed site url. Default is "https://component-controls.com"
    */

examples/gatsby/.config/runtime.tsx

@@ -11,7 +11,7 @@ const config: RunOnlyConfiguration = {
   analytics: 'UA-172446254-1',
   siteTitle: `Component controls`,
   siteUrl: `https://component-controls.com`,
-  siteDescription: `A next-generation tool to create blazing-fast documentation sites.`,
+  siteDescription: `A next-generation tool to create blazing-fast documentation sites`,
   siteLanguage: `en`,
   author: `@component-controls`,
   theme: {

examples/nextjs/.config/runtime.tsx

@@ -11,7 +11,7 @@ const config: RunOnlyConfiguration = {
   analytics: 'UA-172446254-1',
   siteTitle: `Component controls`,
   siteUrl: `https://nextjs.component-controls.com`,
-  siteDescription: `A next-generation tool to create blazing-fast documentation sites.`,
+  siteDescription: `A next-generation tool to create blazing-fast documentation sites`,
   siteLanguage: `en`,
   author: `@component-controls`,
   theme: {

examples/stories/src/tutorial/getting-started/ui-customization.mdx

@@ -35,6 +35,11 @@ The site meta settings are used both for SEO purposes as page `<meta />` tags an
     value: '',
     description: 'Standalone site title. Default is "Component controls"',
   },
+  logo: {
+    type: ControlTypes.TEXT,
+    value: 'https://upload.wikimedia.org/wikipedia/commons/b/b8/Netlify_logo.svg',
+    description: 'Custom logo url',
+  },
   siteUrl: {
     type: ControlTypes.TEXT,
     value: '',
@@ -61,18 +66,18 @@ The site meta settings are used both for SEO purposes as page `<meta />` tags an
     description: 'Site author. Default is "@component-controls"',
   }
 }}>
-  {({ siteTitle, siteUrl, siteDescription, siteCopyright, siteLanguage, author }) => {
+  {({ siteTitle, logo, siteUrl, siteDescription, siteCopyright, siteLanguage, author }) => {
     return (
       <Fragment>
         <Box sx={{ mb: 2 }}>
           <Source title=".config/runtime.js">
   {`export default {
-${siteTitle ? `  siteTitle: '${siteTitle}',\n` : ''}${siteUrl ? `  siteUrl: '${siteUrl}',\n` : ''}${siteDescription ? `  siteDescription: '${siteDescription}',\n` : ''}${siteCopyright ? `  siteCopyright: '${siteCopyright}',\n` : ''}${siteLanguage ? `  siteLanguage: '${siteLanguage}',\n` : ''}${author ? `  author: '${author}',\n` : ''}
+${siteTitle ? `  siteTitle: '${siteTitle}',\n` : ''}${logo ? `  logo: '${logo}',\n` : ''}${siteUrl ? `  siteUrl: '${siteUrl}',\n` : ''}${siteDescription ? `  siteDescription: '${siteDescription}',\n` : ''}${siteCopyright ? `  siteCopyright: '${siteCopyright}',\n` : ''}${siteLanguage ? `  siteLanguage: '${siteLanguage}',\n` : ''}${author ? `  author: '${author}',\n` : ''}
 }`}
           </Source>
         </Box>  
         <AppContext store={{...getDefaultStore(), config: { 
-          siteTitle, siteUrl, siteDescription, siteLanguage, author, siteCopyright,
+          siteTitle, logo, siteUrl, siteDescription, siteLanguage, author, siteCopyright,
           theme: { app: { minHeight: 'unset' }, header: { zIndex: 0 } } }}}/>
       </Fragment>
     );  
@@ -221,7 +226,7 @@ ${leftItems.length ? `    left: [\n${itemsToString(leftItems)}\n    ],${rightIte
 
 <PropsTable name="custom-toolbar" expanded={{ 'prop.parentName:first': true, 'prop.parentName:second': true }} />
 
-### Insert toolbar logo
+### Insert toolbar item
 
 You can insert a toolbar item at any position, by specifying the `order` property.
 

package.json

@@ -53,6 +53,7 @@
     "@commitlint/config-lerna-scopes": "^8.2.0",
     "@component-controls/ts-markdown-docs": "^1.3.0", 
     "@rollup/plugin-node-resolve": "^7.1.1",
+    "@rollup/plugin-image": "^2.0.5",
     "@rollup/plugin-json": "^4.0.2",
     "@rollup/plugin-commonjs": "^11.0.2",
     "@types/fs-extra": "^8.0.0",

rollup-config.js

@@ -2,6 +2,7 @@ import typescript from 'rollup-plugin-typescript2';
 import json from '@rollup/plugin-json';
 import commonjs from '@rollup/plugin-commonjs';
 import resolve from '@rollup/plugin-node-resolve';
+import image from '@rollup/plugin-image';
 
 const defaultExternal = id =>
   !id.startsWith('\0') &&
@@ -22,6 +23,7 @@ const createOutput = (dir = 'dist', defaultOpts) => {
       include: /\/node_modules\//,
     }),
     json(),
+    image(),
     typescript({
       typescript: require('typescript'),
       rollupCommonJSResolveHack: true,

ui/app/src/Header/Header.tsx

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { FC, useContext, useMemo } from 'react';
-import { jsx, Box, Heading } from 'theme-ui';
+import { jsx, Box, Heading, Image } from 'theme-ui';
 import { DocType, getDocTypePath, getHomePath } from '@component-controls/core';
 import { ActionBar, ActionItems, Link } from '@component-controls/components';
 import {
@@ -16,6 +16,7 @@ import {
   useStore,
 } from '@component-controls/store';
 import { Search } from '@component-controls/blocks';
+import * as logoImg from './logo.jpg';
 
 export interface HeaderProps {
   toolbar?: {
@@ -34,11 +35,38 @@ export const Header: FC<HeaderProps> = ({ toolbar = {} }) => {
   const docCounts = useDocTypeCount();
   const config = useConfig();
   const doc = useCurrentDocument();
-  const { pages, siteTitle } = config || {};
+  const { pages, siteTitle, logo, siteDescription } = config || {};
+  const LogoLink: FC = ({ children }) => (
+    <Link
+      variant="appheader.title"
+      href={homePath}
+      aria-label={siteTitle}
+      sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}
+    >
+      {children}
+    </Link>
+  );
+  const LogoImage: FC<{ src: string }> = ({ src }) => (
+    <Image alt={siteDescription} variant="appheader.logo" src={src} />
+  );
   const leftActions: ActionItems = useMemo(() => {
     const actions: ActionItems = [
       {
-        node: 'Home',
+        node: logo ? (
+          typeof logo === 'string' ? (
+            <LogoLink>
+              <LogoImage src={logo} />
+            </LogoLink>
+          ) : (
+            logo
+          )
+        ) : logo === null ? (
+          'Home'
+        ) : (
+          <LogoLink>
+            <LogoImage src={logoImg.default} />
+          </LogoLink>
+        ),
         href: homePath,
         'aria-label': 'go to home page',
         id: 'home',
@@ -69,14 +97,27 @@ export const Header: FC<HeaderProps> = ({ toolbar = {} }) => {
         Array.prototype.push.apply(actions, pageItems);
       } else {
         actions[0].node = (
-          <Link href={`${homePath}`} variant="appheader.title">
-            <Heading as="h2">{siteTitle}</Heading>
-          </Link>
+          <LogoLink>
+            {logo === null ? (
+              <Heading as="h2">{siteTitle}</Heading>
+            ) : (
+              <LogoImage src={logoImg.default} />
+            )}
+          </LogoLink>
         );
       }
     }
     return toolbar.left ? [...actions, ...toolbar.left] : actions;
-  }, [pages, toolbar.left, docCounts, homePath, store, homePage, siteTitle]);
+  }, [
+    pages,
+    toolbar.left,
+    logo,
+    docCounts,
+    homePath,
+    store,
+    homePage,
+    siteTitle,
+  ]);
 
   const rightActions: ActionItems = useMemo(() => {
     const actions: ActionItems = [

ui/app/src/typings.d.ts

@@ -1 +1,2 @@
 declare module '@analytics/google-analytics';
+declare module '*.jpg';

ui/components/src/ActionBar/ActionBar.tsx

@@ -39,6 +39,9 @@ export const ActionBar: FC<ActionBarProps> = ({
             sx={{
               mr: index === 0 ? 1 : 0,
               ml: nextGroup !== group || group === undefined ? 2 : 1,
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center',
             }}
           >
             {typeof node === 'string' ? (

ui/components/src/ThemeContext/theme.ts

@@ -959,6 +959,11 @@ export const theme: ControlsTheme = {
       fontWeight: 'normal',
       ':hover': { color: `secondary` },
     },
+    logo: {
+      maxHeight: 30,
+      width: 'auto',
+      objectFit: 'cover',
+    },
     items: {
       display: 'flex',
       flexDirection: 'row',

yarn.lock

@@ -3230,6 +3230,14 @@
     magic-string "^0.25.2"
     resolve "^1.11.0"
 
+"@rollup/plugin-image@^2.0.5":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-image/-/plugin-image-2.0.5.tgz#07859a69f5fe592643c2ad3ef59ae8a5c268a7ef"
+  integrity sha512-R+yGLJjLN1won2JlZPZmdlyZGLZwwsW8V/RYu3mTcRq8Aqd9GC2fo4Zi892bFteM5LolfbpxK8Y9QQcAhbBwSQ==
+  dependencies:
+    "@rollup/pluginutils" "^3.0.4"
+    mini-svg-data-uri "^1.1.3"
+
 "@rollup/plugin-json@^4.0.2":
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-json/-/plugin-json-4.1.0.tgz#54e09867ae6963c593844d8bd7a9c718294496f3"
@@ -3248,7 +3256,7 @@
     is-module "^1.0.0"
     resolve "^1.14.2"
 
-"@rollup/pluginutils@^3.0.8", "@rollup/pluginutils@^3.1.0":
+"@rollup/pluginutils@^3.0.4", "@rollup/pluginutils@^3.0.8", "@rollup/pluginutils@^3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.1.0.tgz#706b4524ee6dc8b103b3c995533e5ad680c02b9b"
   integrity sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==
@@ -16792,6 +16800,11 @@ mini-css-extract-plugin@^0.8.2:
     schema-utils "^1.0.0"
     webpack-sources "^1.1.0"
 
+mini-svg-data-uri@^1.1.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.2.3.tgz#e16baa92ad55ddaa1c2c135759129f41910bc39f"
+  integrity sha512-zd6KCAyXgmq6FV1mR10oKXYtvmA9vRoB6xPSTUJTbFApCtkefDnYueVR1gkof3KcdLZo1Y8mjF2DFmQMIxsHNQ==
+
 minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"