From 1bed424f593457cb740b09c9b52e078ace2d73dc Mon Sep 17 00:00:00 2001 From: atanasster Date: Fri, 5 Jun 2020 16:35:20 -0400 Subject: [PATCH] feat: site options and SEO component --- core/specification/src/configuration.ts | 44 ++++++++++++++++++- core/store/src/serialization/load-store.ts | 3 +- core/store/src/types.ts | 15 +++++++ examples/gatsby/.config/runtime.js | 9 ++++ examples/gatsby/gatsby-config.js | 6 --- .../gatsby-theme-stories/gatsby-config.js | 10 +---- .../src/components/Layout.tsx | 37 +++++++--------- .../src/components/Sidebar.tsx | 5 +-- .../src/hooks/use-site-metadata.tsx | 33 -------------- ui/app/package.json | 2 + ui/app/src/Page/Page.tsx | 2 +- .../src/components => ui/app/src/SEO}/SEO.tsx | 18 +++----- ui/app/src/SEO/index.ts | 1 + ui/app/src/SideContext/SideContext.tsx | 4 +- ui/app/src/Sidebar/Sidebar.tsx | 15 ++++--- ui/app/src/index.ts | 1 + yarn.lock | 7 +++ 17 files changed, 116 insertions(+), 96 deletions(-) delete mode 100644 integrations/gatsby-theme-stories/src/hooks/use-site-metadata.tsx rename {integrations/gatsby-theme-stories/src/components => ui/app/src/SEO}/SEO.tsx (88%) create mode 100644 ui/app/src/SEO/index.ts diff --git a/core/specification/src/configuration.ts b/core/specification/src/configuration.ts index 470bf55a7..8e3e34d93 100644 --- a/core/specification/src/configuration.ts +++ b/core/specification/src/configuration.ts @@ -10,7 +10,7 @@ export interface Configuration { * internally using `glob` for the search: https://www.npmjs.com/package/glob * example: "./stories/**/ /*.stories.(js|jsx|tsx|mdx)" */ - stories: string[]; + stories?: string[]; /** * story decorator functions - used to wrap stories @@ -21,6 +21,48 @@ export interface Configuration { * global options object */ options?: { + /** + * standalone site title. Default is "Component controls" + */ + siteTitle?: string; + /** + * site alt for images. Default is "Component controls - https://github.com/ccontrols/component-controls" + */ + siteTitleAlt?: string; + + /** + * Site headline. Default is "Component controls gatsby" + */ + siteHeadline?: string; + + /** + * Deployed site url. Default is "https://component-controls-gatsby.netlify.app" + */ + siteUrl?: string; + + /** + * site description. siteDescription: Default is "Component controls stories. Write your components documentation with MDX and JSX. Design, develop, test and review in a single site." + */ + siteDescription?: string; + + /** + * site language, Deault is "en" + */ + siteLanguage?: string; + + /** + * author: Default is "@component-controls" + */ + author?: string; + + /** + * link to site image + */ + siteImage?: string; + /** + * base url path for API documentation pages. Default is "docs" + */ + basePath?: string; /** * story sorting function */ diff --git a/core/store/src/serialization/load-store.ts b/core/store/src/serialization/load-store.ts index a0003a0fd..790c5743a 100644 --- a/core/store/src/serialization/load-store.ts +++ b/core/store/src/serialization/load-store.ts @@ -8,6 +8,7 @@ import { import { LoadingStore } from '@component-controls/loader'; import { toId, storyNameFromExport } from '@storybook/csf'; import { addSmartControls } from './smart-controls'; +import { defaultConfig } from '../types'; let storyStore: StoriesStore | undefined = undefined; @@ -34,7 +35,7 @@ export const loadStoryStore = ( stories: {}, components: {}, packages: {}, - config, + config: deepMerge(config, defaultConfig), }; stores.forEach(s => { const storeDoc = s.doc; diff --git a/core/store/src/types.ts b/core/store/src/types.ts index 559ac27e1..49da94fa8 100644 --- a/core/store/src/types.ts +++ b/core/store/src/types.ts @@ -36,3 +36,18 @@ export interface MessageType { moduleId: number; propName: string; } + +export const defaultConfig: Configuration = { + options: { + siteTitle: 'Component controls', + siteTitleAlt: + 'Component controls - https://github.com/ccontrols/component-controls', + siteHeadline: 'Component controls gatsby', + siteUrl: 'https://component-controls-gatsby.netlify.app', + siteDescription: + 'Component controls stories. Write your components documentation with MDX and JSX. Design, develop, test and review in a single site.', + siteLanguage: 'en', + author: '@component-controls', + basePath: 'docs', + }, +}; diff --git a/examples/gatsby/.config/runtime.js b/examples/gatsby/.config/runtime.js index a21d14fa9..ee29d06e5 100644 --- a/examples/gatsby/.config/runtime.js +++ b/examples/gatsby/.config/runtime.js @@ -2,6 +2,15 @@ const categories = ['Introduction', 'Controls','Blocks', 'Editors', 'Components' module.exports = { options: { + siteTitle: `Component controls`, + siteTitleAlt: `Component controls - https://github.com/ccontrols/component-controls`, + siteHeadline: `Component controls gatsby`, + siteUrl: `https://component-controls-gatsby.netlify.app`, + siteDescription: `Component controls stories. Write your components documentation with MDX and JSX. Design, develop, test and review in a single site.`, + siteLanguage: `en`, + author: `@atanasster`, + basePath: 'docs', + storySort: (a, b) => { const aDoc = a.split('/')[0]; const aIndex = categories.findIndex(c => c === aDoc); diff --git a/examples/gatsby/gatsby-config.js b/examples/gatsby/gatsby-config.js index a010c5439..6044c5747 100644 --- a/examples/gatsby/gatsby-config.js +++ b/examples/gatsby/gatsby-config.js @@ -1,10 +1,4 @@ module.exports = { - siteMetadata: { - siteTitle: 'Component Controls Gatsby Starter', - author: 'Atanas Stoyanov', - description: 'A sample site to showcase gatsby stories loading.', - siteUrl: 'https://components-storybook-6-no-docs.netlify.app', - }, plugins: [ { resolve: '@component-controls/gatsby-theme-stories', diff --git a/integrations/gatsby-theme-stories/gatsby-config.js b/integrations/gatsby-theme-stories/gatsby-config.js index 3acacd40e..757882fdf 100644 --- a/integrations/gatsby-theme-stories/gatsby-config.js +++ b/integrations/gatsby-theme-stories/gatsby-config.js @@ -1,15 +1,7 @@ -module.exports = options => { +module.exports = () => { return { siteMetadata: { siteTitle: `Stories`, - siteTitleAlt: `Component controls stories - @lekoarts/gatsby-theme-graphql-playground`, - siteHeadline: `Component controls stories - Gatsby Theme from @atanasster`, - siteUrl: `https://gatsby-theme-stories.netlify.com`, - siteDescription: `Component controls stories. Write your components documentation with MDX and JSX and design, develop, test and review in a single site.`, - siteLanguage: `en`, - author: `@atanasster`, - graphiQLUrl: `https://gatsby-theme-stories.netlify.com/___graphql`, - basePath: options.basePath, }, plugins: [ 'gatsby-plugin-react-helmet', diff --git a/integrations/gatsby-theme-stories/src/components/Layout.tsx b/integrations/gatsby-theme-stories/src/components/Layout.tsx index 90264b02d..c1d1fa9b0 100644 --- a/integrations/gatsby-theme-stories/src/components/Layout.tsx +++ b/integrations/gatsby-theme-stories/src/components/Layout.tsx @@ -3,11 +3,10 @@ import { FC } from 'react'; import { jsx, Flex } from 'theme-ui'; import { Global } from '@emotion/core'; import { ThemeProvider } from '@component-controls/components'; -import { Page } from '@component-controls/app'; +import { Page, SEO } from '@component-controls/app'; import { SidebarContextProvider } from '@component-controls/app-components'; import { BlockContextProvider } from '@component-controls/blocks'; import { Store } from '@component-controls/store'; -import { SEO } from './SEO'; import { Sidebar } from './Sidebar'; import { Header } from './Header'; import { PagesConfig } from './types'; @@ -38,28 +37,24 @@ export const Layout: FC = ({ }, })} /> - - - -
- - + + + + +
+ - + +