Skip to content

Commit

Permalink
feat: customize seo tags
Browse files Browse the repository at this point in the history
  • Loading branch information
@atanasster
atanasster committed Nov 5, 2020
1 parent 2600637 commit 2803219
Show file tree
Hide file tree
Showing 28 changed files with 445 additions and 189 deletions.
17 changes: 8 additions & 9 deletions core/core/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1188,14 +1188,13 @@ _defined in [@component-controls/core/src/configuration.ts](https://github.com/c
| `pages` | [PagesConfiguration](#pagesconfiguration) | page types configurations |
| `renderFn` | [FrameworkRenderFn](#frameworkrenderfn) | framework-specific render function. By default react render |
| `sidebar` | [ActionItems](#actionitems) | custom sidebar items |
| `siteCopyright` | string | copyright notice displayed in the footer |
| `siteDescription` | 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." |
| `siteImage` | string | link to site image |
| `siteLanguage` | string | site language, Deault is "en" |
| `siteTitle` | string | standalone site title. Default is "Component controls" |
| `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 |
| `title` | string | alternative site title field - docz compatibility |
| `toolbar` | [ToolbarConfig](#toolbarconfig) | custom toolbar items |

## SideNavConfiguration
Expand Down Expand Up @@ -1425,9 +1424,9 @@ _defined in [@component-controls/core/src/configuration.ts](https://github.com/c
| Name | Type | Description |
| ------------------ | ------ | ----------- |
| `author*` | string | |
| `siteDescription*` | string | |
| `siteLanguage*` | string | |
| `siteTitle*` | string | |
| `description*` | string | |
| `language*` | string | |
| `title*` | string | |
| `controls*` | object | |
| `pages*` | object | |

Expand Down
51 changes: 30 additions & 21 deletions core/core/src/configuration.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
import {
FC,
ComponentType,
ReactNode,
DetailedHTMLProps,
LinkHTMLAttributes,
} from 'react';
import { BuildProps } from './build';
import { ActionItems } from './utility';
import { ComponentType, ReactNode } from 'react';

import { StoryRenderFn } from './utility';
import { ReactElement } from 'react';
import { Story, Document } from './document';
Expand Down Expand Up @@ -170,7 +177,6 @@ export type BuildConfiguration = BuildProps & {
* Deployed site url. Also used for auto generated sitemap.
*/
siteUrl?: string;

/**
* instrumentation configuration
*/
Expand Down Expand Up @@ -222,10 +228,6 @@ export interface RunOnlyConfiguration {
/**
* standalone site title. Default is "Component controls"
*/
siteTitle?: string;
/**
* alternative site title field - docz compatibility
*/
title?: string;

/**
Expand All @@ -234,22 +236,23 @@ export interface RunOnlyConfiguration {
logo?: string | ReactNode;

/**
* 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."
* application wrapper, can be used to insert tags or styles. The application will be passed as children
*/
siteDescription?: string;
app?: FC;

/**
* alternative site description field - docz compatibility
* site description. Default is "Component controls stories. Write your components documentation with MDX and JSX. Design, develop, test and review in a single site."
*/
description?: string;

/**
* copyright notice displayed in the footer
*/
siteCopyright?: string;
copyright?: string;
/**
* site language, Deault is "en"
*/
siteLanguage?: string;
language?: string;

/**
* author: Default is "@component-controls"
Expand All @@ -259,8 +262,19 @@ export interface RunOnlyConfiguration {
/**
* link to site image
*/
siteImage?: string;
image?: string;
/**
* meta links for seo header
*/
links?: DetailedHTMLProps<
LinkHTMLAttributes<HTMLLinkElement>,
HTMLLinkElement
>[];

/**
* custom seo rendering.
*/
seo?: ReactNode;
/**
* page types configurations
*/
Expand Down Expand Up @@ -319,10 +333,10 @@ export type RunConfiguration = RunOnlyConfiguration &
Omit<BuildConfiguration, 'pages'>;

export const defaultRunConfig: RunConfiguration = {
siteTitle: 'Component controls',
siteDescription:
title: 'Component controls',
description:
'Component controls stories. Write your components documentation with MDX and JSX. Design, develop, test and review in a single site.',
siteLanguage: 'en',
language: 'en',
author: '@component-controls',
controls: {
threshold: 10,
Expand Down Expand Up @@ -355,12 +369,7 @@ export const defaultRunConfig: RunConfiguration = {
};

export const convertConfig = (config: RunConfiguration): RunConfiguration => {
const { siteTitle, siteDescription, title, description, ...rest } = config;
return {
siteTitle: siteTitle || title,
siteDescription: siteDescription || description,
...rest,
};
return config;
};

export const defaultBuildConfig: BuildConfiguration = {
Expand Down
12 changes: 10 additions & 2 deletions core/core/src/document.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -223,15 +223,23 @@ export type Document = {
draft?: boolean;

/**
* comma-separated list of document tags, used for search
* comma-separated list of document tags, used for search and for SOE keywords unless keyswords are specified.
*/
tags?: string[];

/**
* comma-separated list of SEO keywords
*/
keywords?: string[];

/**
* documentation file description
*/
description?: string;

/**
* link to an image for the document, will be used for SEO
*/
image?: string;
/**
* document author
*/
Expand Down
4 changes: 3 additions & 1 deletion core/instrument/src/babel/mdx-stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,9 @@ export const extractMDXStories: (
const collectAttributes = (node: any): Record<string, string> => {
return node.attributes.reduce(
(acc: Record<string, unknown>, attribute: any) => {
if (attribute.value.type === 'StringLiteral') {
if (!attribute.value) {
//console.log(attribute);
} else if (attribute.value.type === 'StringLiteral') {
return {
...acc,
[attribute.name.name]: attribute.value.value,
Expand Down
15 changes: 9 additions & 6 deletions core/instrument/src/misc/prettify.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,15 @@ export const prettify = async (
);
allPrettierOptions = { ...userOptions, ...allPrettierOptions };
}

return prettier.format(code, {
parser: 'typescript',
plugins: [parserBabel],
...allPrettierOptions,
});
try {
return prettier.format(code, {
parser: 'typescript',
plugins: [parserBabel],
...allPrettierOptions,
});
} catch (e) {
return code;
}
} else {
return code || '';
}
Expand Down
2 changes: 1 addition & 1 deletion core/webpack-configs/src/react/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ export const react: PresetType = (options: BuildProps) => {
loader: 'url-loader',
options: customLoaderOptions(options, 'url-loader', {
limit: 25000,
name: '[name].[hash].[ext]',
name: '[name].[ext]',
publicPath: '/static',
outputPath: path.relative(
options?.distFolder || process.cwd(),
Expand Down
2 changes: 1 addition & 1 deletion examples/gatsby/.config/buildtime.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ module.exports = {
//'../../stories/src/blogs/gatsby-nextjs-storybook.mdx',

],
siteUrl: `https://component-controls.com`,
siteUrl: process.env.NODE_ENV === 'development' ? 'http://localhost:9020' : 'https://component-controls.com',
pages: {
story: {
basePath: 'api/',
Expand Down
15 changes: 12 additions & 3 deletions examples/gatsby/.config/runtime.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,25 @@ 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']

const config: RunOnlyConfiguration = {
analytics: 'UA-172446254-1',
siteTitle: `Component controls`,
siteDescription: `A next-generation tool to create blazing-fast documentation sites`,
siteLanguage: `en`,
title: `Component controls`,
description: `A next-generation tool to create blazing-fast documentation sites`,
language: `en`,
author: `@component-controls`,
app: ({ children }) => (
<div>
<Helmet>
<meta name="description" content="a page with custom meta description" />
</Helmet>
{children}
</div>
),
theme: {
colors: {
// primary: 'pink',
Expand Down
2 changes: 1 addition & 1 deletion examples/nextjs/.config/buildtime.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ module.exports = {
'../../../plugins/viewport-plugin/src/stories/**/*.stories.@(js|jsx|tsx|mdx)',
// '../../stories/src/blogs/introduction-to-controls.mdx',
],
siteUrl: `https://nextjs.component-controls.com`,
siteUrl: process.env.NODE_ENV === 'development' ? 'http://localhost:9021' : `https://nextjs.component-controls.com`,
pages: {
story: {
basePath: 'api/',
Expand Down
6 changes: 3 additions & 3 deletions examples/nextjs/.config/runtime.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ const categories = ['Introduction', 'Application','Controls','Blocks', 'Design T

const config: RunOnlyConfiguration = {
analytics: 'UA-172446254-1',
siteTitle: `Component controls`,
siteDescription: `A next-generation tool to create blazing-fast documentation sites`,
siteLanguage: `en`,
title: `Component controls`,
description: `A next-generation tool to create blazing-fast documentation sites`,
language: `en`,
author: `@component-controls`,
theme: {
colors: {
Expand Down
2 changes: 1 addition & 1 deletion examples/simple/docs/runtime.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { RunOnlyConfiguration } from '@component-controls/core';

const config: RunOnlyConfiguration = {
logo: <div>hello</div>,
siteTitle: 'Title',
title: 'Title',
};

export default config;
4 changes: 2 additions & 2 deletions examples/starter/.config/runtime.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import { RunOnlyConfiguration, defaultRunConfig } from "@component-controls/core
import { TestingPage } from "./TestingPage";

const config: RunOnlyConfiguration = {
siteTitle: `awLib`,
siteDescription: `Some description meta.`,
title: `awLib`,
description: `Some description meta.`,
author: 'my name',
pages: {
story: {
Expand Down
2 changes: 1 addition & 1 deletion examples/starter/src/docs/first-story.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export default {

export const overview = (props: ButtonProps) => {
const store = useStore();
return <Button {...props}>{store.config.siteTitle}</Button>;
return <Button {...props}>{store.config.title}</Button>;
};

overview.component = Button;
4 changes: 0 additions & 4 deletions examples/stories/src/blogs/docz-migration.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,10 +97,6 @@ export default {

* [**files**](https://www.docz.site/docs/project-configuration) field is mapped to the **stories** configuration field.

* [**title**](https://www.docz.site/docs/project-configuration) field is mapped to the **siteTitle** configuration field.

* [**description**](https://www.docz.site/docs/project-configuration) field is mapped to the **siteDescription** configuration field.

* [**menu**](https://www.docz.site/docs/project-configuration) field is used in component-controls in a similar way to docz. You will need to fill the menu field in a document to attach it to a menu item.

## Components
Expand Down
10 changes: 5 additions & 5 deletions examples/stories/src/tutorial/configuration/runtime.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,11 @@ Possible names for the file are:
| `author` | string | author: Default is "@component-controls" |
| `decorators` | [StoryRenderFn]((/tutorial/reference/configuration/#storyrenderfn)\[] | story decorator functions - used to wrap stories. Example: \[story => &lt;ThemeProvider>{story()}&lt;/ThemeProvider>] |
| `pages` | [PagesConfiguration]((/tutorial/reference/configuration#pagesconfiguration) | page types configurations |
| `siteDescription` or `description` | 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." |
| `siteCopyright` | string | copyright notice displayed in the footer|
| `siteImage` | string | link to site image, used in page meta tag `<meta name="image" content={siteLanguage} />` |
| `siteLanguage` | string | site language, Deault is "en" |
| `siteTitle` or `title` | string | standalone site title. Default is "Component controls" |
| `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." |
| `copyright` | string | copyright notice displayed in the footer|
| `image` | string | link to site image, used in page meta tag `<meta name="image" content={language} />` |
| `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](/tutorial/reference/configuration#toolbarconfig) | custom toolbar items
4 changes: 2 additions & 2 deletions examples/stories/src/tutorial/getting-started/documentation-site.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,8 @@ In `.config`, create a `runtime.js` file and change some of the site's meta info

```js:title=.config/runtime.js
module.exports = {
siteTitle: `awLib`,
siteDescription: `Some description meta.`,
title: `awLib`,
description: `Some description meta.`,
author: 'my name'
};
```
Expand Down
2 changes: 1 addition & 1 deletion examples/stories/src/tutorial/getting-started/external-libraries.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: Getting started/External libraries
author: atanasster
type: tutorial
order: 6
order: 7
route: /tutorial/getting-started/external-libraries
tags:
- configuration
Expand Down
Binary file added examples/stories/src/tutorial/getting-started/media/seo-tags.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 2803219

Please sign in to comment.