feat: option to add web name into title

Mariia Marchenkova · Mariia Marchenkova · commit 3d8169b161a4 · 2020-05-13T17:11:12.000+02:00
diff --git a/example/__fixtures__/custom/Custom.js b/example/__fixtures__/custom/Custom.js
@@ -16,6 +16,7 @@ export default class Custom extends React.Component<{}> {
 
 export const meta = {
   title: 'Custom 🎉',
+  webTitle: 'Component Docs',
   description: 'Custom React Component',
   link: 'custom-component',
 };
diff --git a/example/__fixtures__/markdown/1.Home.md b/example/__fixtures__/markdown/1.Home.md
@@ -1,5 +1,7 @@
 ---
 link: index
+webTitle: Component Docs
+divider: ·
 description: Simple documentation for your React components.
 ---
 
diff --git a/src/parsers/component.js b/src/parsers/component.js
@@ -92,6 +92,8 @@ export default function component(
   return {
     filepath: path.relative(root, filepath),
     title: name,
+    webTitle: info.webTitle,
+    divider: info.divider,
     description: info.description,
     link: dashify(name),
     data: info,
diff --git a/src/parsers/custom.js b/src/parsers/custom.js
@@ -19,13 +19,17 @@ export default function custom(
   const meta = exported.meta || {};
 
   const title = meta.title || name;
+  const webTitle = meta.webTitle;
+  const divider = meta.divider;
   const description = meta.description;
   const link = meta.link || dashify(name);
   const type = 'custom';
 
   return {
     filepath: path.relative(root, filepath),
     title,
+    webTitle,
+    divider,
     description,
     type,
     link,
@@ -38,6 +42,8 @@ export default function custom(
           var m = e.meta || {};
           return {
              title: m.title || ${JSON.stringify(title)},
+             webTitle: m.webTitle,
+             divider: m.divider,
              link: m.link || ${JSON.stringify(link)},
              description: m.description,
              type: ${JSON.stringify(type)},
diff --git a/src/parsers/md.js b/src/parsers/md.js
@@ -39,6 +39,8 @@ export default function md(
   return {
     filepath: path.relative(root, filepath),
     title,
+    webTitle: meta.webTitle || '',
+    divider: meta.divider || ' ',
     description: meta.description || '',
     link: meta.link || dashify(title),
     data,
diff --git a/src/parsers/mdx.js b/src/parsers/mdx.js
@@ -73,13 +73,17 @@ export default function(
     component.displayName ||
     component.name ||
     getNameFromPath(filepath);
+  const webTitle = meta.webTitle || '';
+  const divider = meta.divider || ' ';
   const description = meta.description || '';
   const link = meta.link || dashify(title);
   const type = 'custom';
 
   return {
     filepath: path.relative(root, filepath),
     title,
+    webTitle,
+    divider,
     description,
     type,
     link,
@@ -123,6 +127,8 @@ ${result};
   return {
     title: meta.title || ${JSON.stringify(title)},
     link: meta.link || ${JSON.stringify(link)},
+    webTitle: meta.webTitle || ${JSON.stringify(webTitle)},
+    divider: meta.divider || ${JSON.stringify(divider)},
     description: meta.description,
     type: ${JSON.stringify(type)},
     data: function MDXContent(props) {
diff --git a/src/templates/HTML.js b/src/templates/HTML.js
@@ -5,12 +5,21 @@ import * as React from 'react';
 
 type Props = {
   title: string,
+  webTitle: string,
+  divider: string,
   description: string,
   body: string,
   sheets: string[],
 };
 
-export default function HTML({ title, description, body, sheets }: Props) {
+export default function HTML({
+  title,
+  webTitle,
+  divider = ' ',
+  description,
+  body,
+  sheets,
+}: Props) {
   return (
     <html lang="en">
       <head>
@@ -30,9 +39,12 @@ export default function HTML({ title, description, body, sheets }: Props) {
 
         <meta property="og:type" content="website" />
         <meta property="og:title" content={title} />
+        <meta property="og:webTitle" content={webTitle} />
         <meta property="og:description" content={description} />
 
-        <title>{title}</title>
+        <title>
+          {title} {divider} {webTitle}
+        </title>
 
         {sheets.map(sheet => (
           <link key={sheet} type="text/css" rel="stylesheet" href={sheet} />
diff --git a/src/templates/Router.js b/src/templates/Router.js
@@ -44,8 +44,11 @@ export default class Router extends Component<Props, State> {
     if (prevState.path !== this.state.path) {
       const route = this.props.routes.find(r => r.link === this.state.path);
       if (route) {
+        const divider = route.divider ? route.divider : ' ';
         // eslint-disable-next-line no-undef
-        document.title = route.title || '';
+        document.title = route.webTitle
+          ? `${route.title} ${divider} ${route.webTitle}`
+          : route.title || '';
       }
     }
   }
diff --git a/src/types.js b/src/types.js
@@ -28,6 +28,8 @@ export type Options = {
 
 export type PageInfo = {
   title: string,
+  webTitle: string,
+  divider: string,
   description: string,
   link: string,
   filepath: string,
diff --git a/src/utils/build404.js b/src/utils/build404.js
@@ -20,6 +20,8 @@ export default function build404({ data, sheets }: Options) {
     // eslint-disable-next-line react/jsx-pascal-case
     <HTML
       title="404"
+      webTitle=""
+      divider=""
       description="Page not found"
       body={body}
       sheets={sheets}
diff --git a/src/utils/buildHTML.js b/src/utils/buildHTML.js
@@ -85,6 +85,8 @@ export default function buildHTML({
     // eslint-disable-next-line react/jsx-pascal-case
     <HTML
       title={info.title}
+      webTitle={info.webTitle || ''}
+      divider={info.divider || ' '}
       description={(info.description || '').split('\n')[0]}
       body={body}
       sheets={sheets}

Original file line number	Diff line number	Diff line change
`@@ -44,8 +44,11 @@ export default class Router extends Component<Props, State> {`
`44`	`44`	`if (prevState.path !== this.state.path) {`
`45`	`45`	`const route = this.props.routes.find(r => r.link === this.state.path);`
`46`	`46`	`if (route) {`
	`47`	`+ const divider = route.divider ? route.divider : ' ';`
`47`	`48`	`// eslint-disable-next-line no-undef`
`48`		`- document.title = route.title \|\| '';`
	`49`	`+ document.title = route.webTitle`
	`50`	+ ? `${route.title} ${divider} ${route.webTitle}`
	`51`	`+ : route.title \|\| '';`
`49`	`52`	`}`
`50`	`53`	`}`
`51`	`54`	`}`