diff --git a/core/core/README.md b/core/core/README.md index 06bf0ba75..3c38219c4 100644 --- a/core/core/README.md +++ b/core/core/README.md @@ -177,7 +177,7 @@ $ npm install @component-controls/core --save-dev ## DefaultStore -_defined in [@component-controls/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L367)_ +_defined in [@component-controls/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L375)_ @@ -241,7 +241,7 @@ _defined in [@component-controls/core/src/document.ts](https://github.com/ccontr store of stories information in memory after the loader is applied -_defined in [@component-controls/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L328)_ +_defined in [@component-controls/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L336)_ @@ -298,7 +298,7 @@ _defined in [@component-controls/core/src/document.ts](https://github.com/ccontr list of components used in stories -_defined in [@component-controls/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L303)_ +_defined in [@component-controls/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L311)_ Record<string, @@ -326,14 +326,16 @@ _defined in [@component-controls/core/src/document.ts](https://github.com/ccontr | `description` | string | documentation file description | | `draft` | boolean | if set to true, the document will be hidden in production builds. | | `fileName` | string | file name of the file of stories | +| `image` | string | link to an image for the document, will be used for SEO | | `isMDXComponent` | boolean | custom prop set by mdxjs | +| `keywords` | string\[] | comma-separated list of SEO keywords | | `menu` | string | to which static menu to attach the document compatibility with docz | | `order` | number | document order, used to sort documents within the same parent | | `package` | string | lookup into the global store of PackageInfo package.json | | `route` | string | if provided, will be used as the route for the page. if not provided, the title in lowercase will be used as the route | | `source` | string | source code of the entire file of stories | | `stories` | string\[] | list of story ids contained in the document. | -| `tags` | string\[] | comma-separated list of document tags, used for search | +| `tags` | string\[] | comma-separated list of document tags, used for search and for SOE keywords unless keyswords are specified. | | `title*` | string | title of the document. If no 'route' parameter is specifified, the title is used to generate the document url. This is the only required field, to show the document in the menu structures. | | `type` | [DocType](#doctype) | document type - blogs, pages, stories and even custom ones. By default - story | | `StoryProps` | [StoryProps](#storyprops) | | @@ -343,7 +345,7 @@ _defined in [@component-controls/core/src/document.ts](https://github.com/ccontr list of story files, or groups -_defined in [@component-controls/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L308)_ +_defined in [@component-controls/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L316)_ Record<string, @@ -368,7 +370,7 @@ _defined in [@component-controls/core/src/document.ts](https://github.com/ccontr list of repositories -_defined in [@component-controls/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L320)_ +_defined in [@component-controls/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L328)_ Record<string, @@ -378,13 +380,13 @@ Record<string, ## Pages -_defined in [@component-controls/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L310)_ +_defined in [@component-controls/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L318)_ [Document](#document)\[] ## StoreObserver -_defined in [@component-controls/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L322)_ +_defined in [@component-controls/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L330)_ **function** (`story`: [Story](#story)): void; @@ -399,7 +401,7 @@ _defined in [@component-controls/core/src/document.ts](https://github.com/ccontr list of stories -_defined in [@component-controls/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L315)_ +_defined in [@component-controls/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L323)_ Record<string, @@ -460,7 +462,7 @@ _defined in [@component-controls/core/src/document.ts](https://github.com/ccontr ## CURRENT_STORY -_defined in [@component-controls/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L324)_ +_defined in [@component-controls/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L332)_ @@ -472,7 +474,7 @@ _defined in [@component-controls/core/src/document.ts](https://github.com/ccontr ## dateToLocalString -_defined in [@component-controls/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L293)_ +_defined in [@component-controls/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L301)_ **function** dateToLocalString(`date`: [Date](#date)): string; @@ -485,7 +487,7 @@ _defined in [@component-controls/core/src/document.ts](https://github.com/ccontr ## getDefaultStore -_defined in [@component-controls/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L393)_ +_defined in [@component-controls/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L401)_ **function** getDefaultStore(): [Store](#store); @@ -1137,7 +1139,7 @@ _defined in [@component-controls/core/src/utility.ts](https://github.com/ccontro configuration options for the controls module -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L200)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L206)_ @@ -1151,7 +1153,7 @@ _defined in [@component-controls/core/src/configuration.ts](https://github.com/c page layout - sidebars, full width -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L47)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L54)_ @@ -1168,38 +1170,40 @@ _defined in [@component-controls/core/src/configuration.ts](https://github.com/c global configuration used at build time stored in a file named main.js/main.ts -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L212)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L218)_ ### properties -| Name | Type | Description | -| ----------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| `analytics` | any | analytics options | -| `author` | string | author: Default is "@component-controls" | -| `components` | Record<string, unknown> | custom props to components ex: components: { story:{ wrapper: 'iframe' } }, | -| `controls` | [ControlsConfig](#controlsconfig) | controls module configuration options | -| `decorators` | [StoryRenderFn](#storyrenderfn)\[] | story decorator functions - used to wrap stories example: \[story => <ThemeProvider>{story()}</ThemeProvider>] | -| `description` | string | alternative site description field - docz compatibility | -| `footer` | [ToolbarConfig](#toolbarconfig) | custom footer items | -| `logo` | string \| [ReactNode](#reactnode) | logo for the site - can be a string link to an image, or a react node | -| `menu` | [StaticMenuItems](#staticmenuitems) | static menu items, can be used in conjunction with the menu prop on the document provides compatibility with docz | -| `pages` | [PagesConfiguration](#pagesconfiguration) | page types configurations | -| `renderFn` | [FrameworkRenderFn](#frameworkrenderfn) | framework-specific render function. By default react render | -| `sidebar` | [ActionItems](#actionitems) | custom sidebar items | -| `copyright` | string | copyright notice displayed in the footer | -| `description` | string | site description. Default is "Component controls stories. Write your components documentation with MDX and JSX. Design, develop, test and review in a single site." | -| `image` | string | link to site image | -| `language` | string | site language, Deault is "en" | -| `title` | string | standalone site title. Default is "Component controls" | -| `storySort` | **function** (`a`\*: string, `b`\*: string): number; | story sorting function | -| `theme` | \[key: string]: any | theme-ui theme configuration | -| `toolbar` | [ToolbarConfig](#toolbarconfig) | custom toolbar items | +| Name | Type | Description | +| ------------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `analytics` | any | analytics options | +| `app` | [FC](#fc) | application wrapper, can be used to insert tags or styles. The application will be passed as children | +| `author` | string | author: Default is "@component-controls" | +| `components` | Record<string, unknown> | custom props to components ex: components: { story:{ wrapper: 'iframe' } }, | +| `controls` | [ControlsConfig](#controlsconfig) | controls module configuration options | +| `copyright` | string | copyright notice displayed in the footer | +| `decorators` | [StoryRenderFn](#storyrenderfn)\[] | story decorator functions - used to wrap stories example: \[story => <ThemeProvider>{story()}</ThemeProvider>] | +| `description` | string | site description. Default is "Component controls stories. Write your components documentation with MDX and JSX. Design, develop, test and review in a single site." | +| `footer` | [ToolbarConfig](#toolbarconfig) | custom footer items | +| `image` | string | link to site image | +| `language` | string | site language, Deault is "en" | +| `links` | DetailedHTMLProps<LinkHTMLAttributes<[HTMLLinkElement](#htmllinkelement)>, [HTMLLinkElement](#htmllinkelement)>\[] | meta links for seo header | +| `logo` | string \| [ReactNode](#reactnode) | logo for the site - can be a string link to an image, or a react node | +| `menu` | [StaticMenuItems](#staticmenuitems) | static menu items, can be used in conjunction with the menu prop on the document provides compatibility with docz | +| `pages` | [PagesConfiguration](#pagesconfiguration) | page types configurations | +| `renderFn` | [FrameworkRenderFn](#frameworkrenderfn) | framework-specific render function. By default react render | +| `seo` | [ReactNode](#reactnode) | custom seo rendering. | +| `sidebar` | [ActionItems](#actionitems) | custom sidebar items | +| `storySort` | **function** (`a`\*: string, `b`\*: string): number; | story sorting function | +| `theme` | \[key: string]: any | theme-ui theme configuration | +| `title` | string | standalone site title. Default is "Component controls" | +| `toolbar` | [ToolbarConfig](#toolbarconfig) | custom toolbar items | ## SideNavConfiguration -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L61)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L68)_ @@ -1212,7 +1216,7 @@ _defined in [@component-controls/core/src/configuration.ts](https://github.com/c ## SitemapConfigPage -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L118)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L125)_ @@ -1226,7 +1230,7 @@ _defined in [@component-controls/core/src/configuration.ts](https://github.com/c story type pages can have multiple tabs with separate page configurations. -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L20)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L27)_ @@ -1241,7 +1245,7 @@ _defined in [@component-controls/core/src/configuration.ts](https://github.com/c ## ToolbarConfig -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L180)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L186)_ @@ -1257,7 +1261,7 @@ _defined in [@component-controls/core/src/configuration.ts](https://github.com/c global configuration used at build time stored in a file named main.js/main.ts -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L135)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L142)_ ### properties @@ -1276,7 +1280,7 @@ _defined in [@component-controls/core/src/configuration.ts](https://github.com/c ## DocType -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L41)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L48)_ 'story' | 'blog' | 'page' | 'tags' | 'author' | string @@ -1284,7 +1288,7 @@ _defined in [@component-controls/core/src/configuration.ts](https://github.com/c render function by framework. By default 'react' -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L11)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L18)_ **function** (`story`\*: [Story](#story), `doc`: [Document](#document), `options`: any): [ReactElement](#reactelement); @@ -1299,7 +1303,7 @@ _defined in [@component-controls/core/src/configuration.ts](https://github.com/c ## PageConfiguration -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L72)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L79)_ ### properties @@ -1316,13 +1320,13 @@ _defined in [@component-controls/core/src/configuration.ts](https://github.com/c ## PageTabs -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L39)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L46)_ [TabConfiguration](#tabconfiguration)\[] ## PagesConfiguration -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L109)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L116)_ Record< @@ -1336,7 +1340,7 @@ Record< ## PagesOnlyRoutes -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L111)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L118)_ Record< @@ -1355,7 +1359,7 @@ Record< ## RunConfiguration -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L318)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L332)_ ### properties @@ -1366,7 +1370,7 @@ _defined in [@component-controls/core/src/configuration.ts](https://github.com/c ## SitemapConfig -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L121)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L128)_ **pages**: **doc**: [SitemapConfigPage](#sitemapconfigpage)**home**: [SitemapConfigPage](#sitemapconfigpage)**index**: [SitemapConfigPage](#sitemapconfigpage) | boolean @@ -1374,19 +1378,19 @@ _defined in [@component-controls/core/src/configuration.ts](https://github.com/c static menu items -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L195)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L201)_ string | **menu**: [StaticMenuItem](#staticmenuitem)\[]**name**: string ## StaticMenuItems -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L196)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L202)_ [StaticMenuItem](#staticmenuitem)\[] ## convertConfig -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L357)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L371)_ **function** convertConfig(`config`\*: [RunConfiguration](#runconfiguration)): [RunConfiguration](#runconfiguration); @@ -1399,7 +1403,7 @@ _defined in [@component-controls/core/src/configuration.ts](https://github.com/c ## defaultBuildConfig -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L366)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L375)_ @@ -1415,20 +1419,20 @@ _defined in [@component-controls/core/src/configuration.ts](https://github.com/c ## defaultRunConfig -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L321)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L335)_ ### properties -| Name | Type | Description | -| ------------------ | ------ | ----------- | -| `author*` | string | | +| Name | Type | Description | +| -------------- | ------ | ----------- | +| `author*` | string | | | `description*` | string | | | `language*` | string | | | `title*` | string | | -| `controls*` | object | | -| `pages*` | object | | +| `controls*` | object | | +| `pages*` | object | | ## BuildProps @@ -1627,7 +1631,7 @@ _defined in [@component-controls/core/src/build.ts](https://github.com/ccontrols ## StoreObserver -_defined in [@component-controls/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L322)_ +_defined in [@component-controls/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L330)_ **function** (`story`: [Story](#story)): void; @@ -1665,7 +1669,7 @@ _defined in [@component-controls/core/src/document.ts](https://github.com/ccontr list of components used in stories -_defined in [@component-controls/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L303)_ +_defined in [@component-controls/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L311)_ Record<string, @@ -1675,7 +1679,7 @@ Record<string, ## RunConfiguration -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L318)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L332)_ ### properties @@ -1688,7 +1692,7 @@ _defined in [@component-controls/core/src/configuration.ts](https://github.com/c list of story files, or groups -_defined in [@component-controls/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L308)_ +_defined in [@component-controls/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L316)_ Record<string, @@ -1700,7 +1704,7 @@ Record<string, list of repositories -_defined in [@component-controls/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L320)_ +_defined in [@component-controls/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L328)_ Record<string, @@ -1712,7 +1716,7 @@ Record<string, list of stories -_defined in [@component-controls/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L315)_ +_defined in [@component-controls/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L323)_ Record<string, @@ -1747,7 +1751,7 @@ _defined in [@component-controls/core/src/utility.ts](https://github.com/ccontro ## DocType -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L41)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L48)_ 'story' | 'blog' | 'page' | 'tags' | 'author' | string @@ -1771,14 +1775,16 @@ _defined in [@component-controls/core/src/document.ts](https://github.com/ccontr | `description` | string | documentation file description | | `draft` | boolean | if set to true, the document will be hidden in production builds. | | `fileName` | string | file name of the file of stories | +| `image` | string | link to an image for the document, will be used for SEO | | `isMDXComponent` | boolean | custom prop set by mdxjs | +| `keywords` | string\[] | comma-separated list of SEO keywords | | `menu` | string | to which static menu to attach the document compatibility with docz | | `order` | number | document order, used to sort documents within the same parent | | `package` | string | lookup into the global store of PackageInfo package.json | | `route` | string | if provided, will be used as the route for the page. if not provided, the title in lowercase will be used as the route | | `source` | string | source code of the entire file of stories | | `stories` | string\[] | list of story ids contained in the document. | -| `tags` | string\[] | comma-separated list of document tags, used for search | +| `tags` | string\[] | comma-separated list of document tags, used for search and for SOE keywords unless keyswords are specified. | | `title*` | string | title of the document. If no 'route' parameter is specifified, the title is used to generate the document url. This is the only required field, to show the document in the menu structures. | | `type` | [DocType](#doctype) | document type - blogs, pages, stories and even custom ones. By default - story | | `StoryProps` | [StoryProps](#storyprops) | | @@ -1818,13 +1824,13 @@ string ## StaticMenuItems -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L196)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L202)_ [StaticMenuItem](#staticmenuitem)\[] ## PagesConfiguration -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L109)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L116)_ Record< @@ -1840,7 +1846,7 @@ Record< render function by framework. By default 'react' -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L11)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L18)_ **function** (`story`\*: [Story](#story), `doc`: [Document](#document), `options`: any): [ReactElement](#reactelement); @@ -1861,7 +1867,7 @@ _defined in [@component-controls/core/src/utility.ts](https://github.com/ccontro ## PagesOnlyRoutes -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L111)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L118)_ Record< @@ -1880,19 +1886,19 @@ Record< ## SitemapConfig -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L121)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L128)_ **pages**: **doc**: [SitemapConfigPage](#sitemapconfigpage)**home**: [SitemapConfigPage](#sitemapconfigpage)**index**: [SitemapConfigPage](#sitemapconfigpage) | boolean ## PageTabs -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L39)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L46)_ [TabConfiguration](#tabconfiguration)\[] ## PageConfiguration -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L72)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L79)_ ### properties @@ -1912,7 +1918,7 @@ _defined in [@component-controls/core/src/configuration.ts](https://github.com/c global configuration used at build time stored in a file named main.js/main.ts -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L135)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L142)_ ### properties @@ -1933,7 +1939,7 @@ _defined in [@component-controls/core/src/configuration.ts](https://github.com/c static menu items -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L195)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L201)_ string | **menu**: [StaticMenuItem](#staticmenuitem)\[]**name**: string @@ -2017,7 +2023,7 @@ _defined in [@component-controls/core/src/document.ts](https://github.com/ccontr ## DocType -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L41)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L48)_ 'story' | 'blog' | 'page' | 'tags' | 'author' | string @@ -2041,14 +2047,16 @@ _defined in [@component-controls/core/src/document.ts](https://github.com/ccontr | `description` | string | documentation file description | | `draft` | boolean | if set to true, the document will be hidden in production builds. | | `fileName` | string | file name of the file of stories | +| `image` | string | link to an image for the document, will be used for SEO | | `isMDXComponent` | boolean | custom prop set by mdxjs | +| `keywords` | string\[] | comma-separated list of SEO keywords | | `menu` | string | to which static menu to attach the document compatibility with docz | | `order` | number | document order, used to sort documents within the same parent | | `package` | string | lookup into the global store of PackageInfo package.json | | `route` | string | if provided, will be used as the route for the page. if not provided, the title in lowercase will be used as the route | | `source` | string | source code of the entire file of stories | | `stories` | string\[] | list of story ids contained in the document. | -| `tags` | string\[] | comma-separated list of document tags, used for search | +| `tags` | string\[] | comma-separated list of document tags, used for search and for SOE keywords unless keyswords are specified. | | `title*` | string | title of the document. If no 'route' parameter is specifified, the title is used to generate the document url. This is the only required field, to show the document in the menu structures. | | `type` | [DocType](#doctype) | document type - blogs, pages, stories and even custom ones. By default - story | | `StoryProps` | [StoryProps](#storyprops) | | @@ -2056,13 +2064,13 @@ _defined in [@component-controls/core/src/document.ts](https://github.com/ccontr ## PageTabs -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L39)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L46)_ [TabConfiguration](#tabconfiguration)\[] ## PagesOnlyRoutes -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L111)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L118)_ Record< @@ -2081,7 +2089,7 @@ Record< ## SitemapConfig -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L121)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L128)_ **pages**: **doc**: [SitemapConfigPage](#sitemapconfigpage)**home**: [SitemapConfigPage](#sitemapconfigpage)**index**: [SitemapConfigPage](#sitemapconfigpage) | boolean @@ -2112,13 +2120,13 @@ _defined in [@component-controls/core/src/utility.ts](https://github.com/ccontro ## DocType -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L41)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L48)_ 'story' | 'blog' | 'page' | 'tags' | 'author' | string ## PageConfiguration -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L72)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L79)_ ### properties @@ -2135,7 +2143,7 @@ _defined in [@component-controls/core/src/configuration.ts](https://github.com/c ## PageTabs -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L39)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L46)_ [TabConfiguration](#tabconfiguration)\[] diff --git a/examples/gatsby/.config/runtime.tsx b/examples/gatsby/.config/runtime.tsx index 8696864d5..d7f1ca6d8 100644 --- a/examples/gatsby/.config/runtime.tsx +++ b/examples/gatsby/.config/runtime.tsx @@ -3,7 +3,6 @@ import { jsx, Box, Text } from 'theme-ui'; import { RunOnlyConfiguration, defaultRunConfig } from "@component-controls/core"; import { Link } from "@component-controls/components"; import { OctofaceIcon } from '@primer/octicons-react'; -import { Helmet } from "@component-controls/app"; import { TestingPage } from "./TestingPage"; const categories = ['Introduction', 'Application','Controls','Blocks', 'Design Tokens', 'Editors', 'Components', 'Plugins'] @@ -14,14 +13,6 @@ const config: RunOnlyConfiguration = { description: `A next-generation tool to create blazing-fast documentation sites`, language: `en`, author: `@component-controls`, - app: ({ children }) => ( -
- - - - {children} -
- ), theme: { colors: { // primary: 'pink', diff --git a/examples/stories/src/tutorial/getting-started/seo.mdx b/examples/stories/src/tutorial/getting-started/seo.mdx index 8636ce95f..faec8f31d 100644 --- a/examples/stories/src/tutorial/getting-started/seo.mdx +++ b/examples/stories/src/tutorial/getting-started/seo.mdx @@ -131,7 +131,8 @@ You can use the `Helmet` component to add any custom tags to the `` secti ```js:title=.config/runtime.ts import { RunOnlyConfiguration } from "@component-controls/core"; -import { Helmet } from "@component-controls/app"; +import { Helmet } from "@component-controls/gatsby-theme-stories"; +//or import { Helmet } from "@component-controls/nextjs-plugin"; const config: RunOnlyConfiguration = { title: `My custom title`, @@ -154,7 +155,8 @@ you can even completely replace the default seo meta tags: ```js:title=.config/runtime.ts import { RunOnlyConfiguration } from "@component-controls/core"; -import { Helmet } from "@component-controls/app"; +import { Helmet } from "@component-controls/gatsby-theme-stories"; +//or import { Helmet } from "@component-controls/nextjs-plugin"; const config: RunOnlyConfiguration = { title: `My custom title`, diff --git a/integrations/gatsby-theme-stories/README.md b/integrations/gatsby-theme-stories/README.md index 45d2e9663..828edda4d 100644 --- a/integrations/gatsby-theme-stories/README.md +++ b/integrations/gatsby-theme-stories/README.md @@ -3,6 +3,7 @@ - [In action](#in-action) - [Overview](#overview) - [API](#api) + - [onRenderBody](#insonrenderbodyins) - [onPreRenderHTML](#insonprerenderhtmlins) - [GatsbyLink](#insgatsbylinkins) - [Layout](#inslayoutins) @@ -32,6 +33,10 @@ Special thanks for the inspiration drawn from [Gatsby themes](https://github.com +## onRenderBody + +_onRenderBody [source code](https://github.com/ccontrols/component-controls/tree/master/integrations/gatsby-theme-stories/src/gatsby-ssr.tsx)_ + ## onPreRenderHTML _onPreRenderHTML [source code](https://github.com/ccontrols/component-controls/tree/master/integrations/gatsby-theme-stories/src/gatsby-ssr.tsx)_ diff --git a/integrations/gatsby-theme-stories/gatsby-config.js b/integrations/gatsby-theme-stories/gatsby-config.js index de2cb6f44..25cd13103 100644 --- a/integrations/gatsby-theme-stories/gatsby-config.js +++ b/integrations/gatsby-theme-stories/gatsby-config.js @@ -1,9 +1,7 @@ module.exports = () => { return { - plugins: [ - 'gatsby-plugin-react-helmet', - 'gatsby-plugin-theme-ui', - 'gatsby-plugin-typescript', - ].filter(Boolean), + plugins: ['gatsby-plugin-theme-ui', 'gatsby-plugin-typescript'].filter( + Boolean, + ), }; }; diff --git a/integrations/gatsby-theme-stories/gatsby-ssr.js b/integrations/gatsby-theme-stories/gatsby-ssr.js index b6bd64168..ce4125b90 100644 --- a/integrations/gatsby-theme-stories/gatsby-ssr.js +++ b/integrations/gatsby-theme-stories/gatsby-ssr.js @@ -1,2 +1,3 @@ -const { onPreRenderHTML } = require('./dist/gatsby-ssr'); +const { onPreRenderHTML, onRenderBody } = require('./dist/gatsby-ssr'); +exports.onRenderBody = onRenderBody; exports.onPreRenderHTML = onPreRenderHTML; diff --git a/integrations/gatsby-theme-stories/package.json b/integrations/gatsby-theme-stories/package.json index 5af56fe67..974091f78 100644 --- a/integrations/gatsby-theme-stories/package.json +++ b/integrations/gatsby-theme-stories/package.json @@ -43,7 +43,6 @@ "@component-controls/pages": "^1.37.0", "@component-controls/webpack-compile": "^1.37.0", "@component-controls/webpack-configs": "^1.37.0", - "gatsby-plugin-react-helmet": "^3.3.2", "gatsby-plugin-theme-ui": "^0.3.0", "gatsby-plugin-typescript": "^2.4.24", "react-helmet": "^6.0.0", diff --git a/integrations/gatsby-theme-stories/src/components/Layout.tsx b/integrations/gatsby-theme-stories/src/components/Layout.tsx index 3ca59621a..e1d54f136 100644 --- a/integrations/gatsby-theme-stories/src/components/Layout.tsx +++ b/integrations/gatsby-theme-stories/src/components/Layout.tsx @@ -1,4 +1,5 @@ import React, { FC } from 'react'; +import { Helmet } from 'react-helmet'; import { AppContext } from '@component-controls/app'; import { store } from '@component-controls/store/controls-store'; @@ -22,6 +23,7 @@ export const Layout: FC = ({ storyId={storyId} store={store} linkClass={GatsbyLink} + Helmet={Helmet} activeTab={activeTab} > {children} diff --git a/integrations/gatsby-theme-stories/src/gatsby-ssr.tsx b/integrations/gatsby-theme-stories/src/gatsby-ssr.tsx index a3fe2071d..44269c813 100644 --- a/integrations/gatsby-theme-stories/src/gatsby-ssr.tsx +++ b/integrations/gatsby-theme-stories/src/gatsby-ssr.tsx @@ -1,6 +1,26 @@ import fs from 'fs'; import React from 'react'; -import { PreRenderHTMLArgs } from 'gatsby'; +import { PreRenderHTMLArgs, RenderBodyArgs } from 'gatsby'; +import { Helmet } from 'react-helmet'; + +export const onRenderBody = ({ + setHeadComponents, + setHtmlAttributes, + setBodyAttributes, +}: RenderBodyArgs): void => { + const helmet = Helmet.renderStatic(); + setHtmlAttributes(helmet.htmlAttributes.toComponent()); + setBodyAttributes(helmet.bodyAttributes.toComponent()); + setHeadComponents([ + helmet.title.toComponent(), + helmet.link.toComponent(), + helmet.meta.toComponent(), + helmet.noscript.toComponent(), + helmet.script.toComponent(), + helmet.style.toComponent(), + helmet.base.toComponent(), + ]); +}; export const onPreRenderHTML = ({ getHeadComponents, @@ -12,5 +32,17 @@ export const onPreRenderHTML = ({ const cssStyles = fs.readFileSync(cssBundle, 'utf8'); headComponents.push(); } + //fix issue with facebook ignoring the helmet tags + headComponents.sort(a => { + if ( + (a as React.Component).props && + (a as React.Component<{ 'data-react-helmet'?: boolean }>).props[ + 'data-react-helmet' + ] + ) { + return 0; + } + return 1; + }); replaceHeadComponents(headComponents); }; diff --git a/integrations/gatsby-theme-stories/src/index.ts b/integrations/gatsby-theme-stories/src/index.ts index 48d277392..dccb87e7e 100644 --- a/integrations/gatsby-theme-stories/src/index.ts +++ b/integrations/gatsby-theme-stories/src/index.ts @@ -1 +1 @@ -//noop +export { Helmet } from 'react-helmet'; diff --git a/integrations/nextjs-plugin/src/components/Layout.tsx b/integrations/nextjs-plugin/src/components/Layout.tsx index 9e5ae0861..3f28b5053 100644 --- a/integrations/nextjs-plugin/src/components/Layout.tsx +++ b/integrations/nextjs-plugin/src/components/Layout.tsx @@ -1,5 +1,6 @@ import React, { FC } from 'react'; import { AppContext } from '@component-controls/app'; +import Helmet from 'next/head'; import { store } from '../store'; import { NextLink } from './NextLink'; @@ -17,6 +18,7 @@ export const Layout: FC = ({ }) => { return ( DocsLink](#insdocslinkins) - [StoryLink](#insstorylinkins) - [PageContainer](#inspagecontainerins) + - [Helmet](#inshelmetins) - [SEO](#insseoins) - [SideContext](#inssidecontextins) - [Sidebar](#inssidebarins) @@ -49,12 +50,6 @@ application container component. adds SEO, SkipLinks, Header and Footer. _App [source code](https://github.com/ccontrols/component-controls/tree/master/ui/app/src/App/App.tsx)_ -### properties - -| Name | Type | Description | -| ------- | -------- | ----------- | -| `title` | _string_ | page title | - ## AppContext _AppContext [source code](https://github.com/ccontrols/component-controls/tree/master/ui/app/src/AppContext/AppContext.tsx)_ @@ -233,18 +228,20 @@ _PageContainer [source code](https://github.com/ccontrols/component-controls/tre | `variant` | _string_ | theme variant | | `ref` | _Ref<HTMLDivElement>_ | ref to the page container component | +## Helmet + +_Helmet [source code](https://github.com/ccontrols/component-controls/tree/master/ui/app/src/SEO/SEO.tsx)_ + ## SEO _SEO [source code](https://github.com/ccontrols/component-controls/tree/master/ui/app/src/SEO/SEO.tsx)_ ### properties -| Name | Type | Description | -| ------------- | -------- | ----------- | -| `title` | _string_ | | -| `description` | _string_ | | -| `pathname` | _string_ | | -| `image` | _string_ | | +| Name | Type | Description | +| -------- | ------------------ | ----------- | +| `doc` | _Document_ | | +| `config` | _RunConfiguration_ | | ## SideContext diff --git a/ui/app/package.json b/ui/app/package.json index 13cb69e43..b14ce0f9e 100644 --- a/ui/app/package.json +++ b/ui/app/package.json @@ -35,8 +35,7 @@ "@component-controls/core": "^1.37.0", "@component-controls/pages": "^1.37.0", "@component-controls/store": "^1.37.0", - "query-string": "^6.13.5", - "react-helmet": "^6.0.0" + "query-string": "^6.13.5" }, "devDependencies": { "@component-controls/jest-snapshots": "^1.37.0", diff --git a/ui/app/src/App/App.tsx b/ui/app/src/App/App.tsx index 00f8ad383..795c01d54 100644 --- a/ui/app/src/App/App.tsx +++ b/ui/app/src/App/App.tsx @@ -1,7 +1,6 @@ /** @jsx jsx */ -import { FC, Fragment } from 'react'; +import { FC, ReactNode, Fragment } from 'react'; import { jsx, Box } from 'theme-ui'; -import { Helmet } from 'react-helmet'; import { SkipLinks, SkiLinksItemProps } from '@component-controls/components'; import { useStore, @@ -13,13 +12,15 @@ import { Header } from '../Header'; import { Footer } from '../Footer'; import { useAnalytics } from './useAnalytics'; import { AppError } from '../AppError'; -export interface AppProps {} +export interface AppProps { + Helmet?: FC<{ children: ReactNode }>; +} /** * application container component. adds SEO, SkipLinks, Header and Footer. * */ -export const App: FC = ({ children }) => { +export const App: FC = ({ children, Helmet }) => { const store = useStore(); const doc = useCurrentDocument(); const config = useConfig(); @@ -47,17 +48,16 @@ export const App: FC = ({ children }) => { const Wrapper = app || Fragment; return ( - - - {siteMap && ( - - )} - - {seo || } + {Helmet && ( + + {`${docTitle} | ${title}`} + + {siteMap && ( + + )} + + )} + {seo || } diff --git a/ui/app/src/AppContext/AppContext.tsx b/ui/app/src/AppContext/AppContext.tsx index 2e40d99a1..2dc29db49 100644 --- a/ui/app/src/AppContext/AppContext.tsx +++ b/ui/app/src/AppContext/AppContext.tsx @@ -1,5 +1,5 @@ /** @jsx jsx */ -import { FC } from 'react'; +import { FC, ReactNode } from 'react'; import { jsx } from 'theme-ui'; import queryString from 'query-string'; import { Store, docStoryToId } from '@component-controls/core'; @@ -17,6 +17,7 @@ export interface AppContextProps { storyId?: string; store: Store; linkClass: LinkContextProviderProps['linkClass']; + Helmet?: FC<{ children: ReactNode }>; activeTab?: string; } @@ -27,6 +28,7 @@ export const AppContext: FC = ({ store, linkClass, activeTab, + Helmet, }) => { const query = typeof window !== 'undefined' @@ -50,7 +52,7 @@ export const AppContext: FC = ({ > - {children} + {children} diff --git a/ui/app/src/SEO/SEO.tsx b/ui/app/src/SEO/SEO.tsx index ece0c0aba..5e5f2c12b 100644 --- a/ui/app/src/SEO/SEO.tsx +++ b/ui/app/src/SEO/SEO.tsx @@ -1,21 +1,29 @@ -import React, { FC } from 'react'; -import { Helmet } from 'react-helmet'; +import React, { FC, ReactNode } from 'react'; import { ensureTrailingSlash, removeStartingSlash, RunConfiguration, Document, + getStoryPath, } from '@component-controls/core'; -import { useCurrentStory, useDocDescription } from '@component-controls/store'; +import { + useActiveTab, + useCurrentStory, + useDocDescription, + useStore, +} from '@component-controls/store'; import { useIsLocalLink, useTheme } from '@component-controls/components'; import { defaultLinks } from './defaultLinks'; -export { Helmet }; + export interface SEOProps { + Helmet?: FC<{ children: ReactNode }>; doc?: Document; config?: RunConfiguration; } -export const SEO: FC = ({ doc, config }) => { +export const SEO: FC = ({ Helmet, doc, config }) => { const story = useCurrentStory(); + const store = useStore(); + const tab = useActiveTab(); const titleParts = doc?.title ? doc.title.split('/') : ['']; const docTitle = titleParts[titleParts.length - 1]; const docDescription = useDocDescription(doc); @@ -34,11 +42,15 @@ export const SEO: FC = ({ doc, config }) => { const imageUrl = isLocalImage && pageImage ? ensureTrailingSlash(siteUrl) + removeStartingSlash(pageImage) - : 'hello' || pageImage; + : pageImage; const pageDescription = story?.description || docDescription || description; - const url = typeof window === 'undefined' ? siteUrl : window.location.href; + const url = + typeof window === 'undefined' + ? getStoryPath(story?.id, doc, store, tab) + : window.location.href; const author = doc?.author || siteAuthor; - return ( + + return Helmet ? ( {Array.isArray(keywords) && ( @@ -78,5 +90,5 @@ export const SEO: FC = ({ doc, config }) => { - ); + ) : null; };