feat: option to add web name into title (#37)

Author: marchenk0va

example/component-docs.config.js

@@ -38,4 +38,5 @@ module.exports = {
   pages,
   output,
   github,
+  title: '[title] - Component Docs',
 };

src/build.js

@@ -24,6 +24,7 @@ export default async function build(o: Options) {
     logo,
     output,
     colors,
+    title,
   } = options;
 
   const pages = typeof getPages === 'function' ? getPages() : getPages;
@@ -49,7 +50,7 @@ export default async function build(o: Options) {
 
   fs.writeFileSync(
     path.join(output, 'app.src.js'),
-    buildEntry({ styles, github, logo })
+    buildEntry({ styles, github, logo, title })
   );
 
   fs.writeFileSync(path.join(output, 'app.data.js'), stringifyData(data));
@@ -65,6 +66,7 @@ export default async function build(o: Options) {
         sheets: ['app.css'],
         scripts: scripts ? scripts.map(s => `scripts/${path.basename(s)}`) : [],
         colors,
+        title,
       })
     );
   });

src/cli.js

@@ -48,6 +48,11 @@ const { argv } = yargs
       description: 'Link to github folder to show edit button',
       requiresArg: true,
     },
+    title: {
+      type: 'string',
+      description: 'Title of a web page',
+      requiresArg: true,
+    },
   })
   .command('serve', 'serve pages for development', y => {
     y.options({

src/serve.js

@@ -34,6 +34,7 @@ export default function serve(o: Options) {
     port,
     open,
     colors,
+    title,
   } = options;
 
   const cache: Map<string, Metadata> = new Map();
@@ -63,7 +64,7 @@ export default function serve(o: Options) {
 
   fs.writeFileSync(
     path.join(output, 'app.src.js'),
-    buildEntry({ styles, github, logo })
+    buildEntry({ styles, github, logo, title })
   );
 
   fs.writeFileSync(path.join(output, 'app.data.js'), stringifyData(data));
@@ -78,6 +79,7 @@ export default function serve(o: Options) {
       sheets: ['app.css'],
       scripts: scripts ? scripts.map(s => `scripts/${path.basename(s)}`) : [],
       colors,
+      title,
     });
     return acc;
   }, {});
@@ -142,6 +144,7 @@ export default function serve(o: Options) {
             ? scripts.map(s => `scripts/${path.basename(s)}`)
             : [],
           colors,
+          title,
         });
         return acc;
       }, {});

src/templates/App.js

@@ -80,9 +80,10 @@ type Props = {
   data: Data,
   github?: string,
   logo?: string,
+  title?: string,
 };
 
-export default function App({ path, data, github, logo }: Props) {
+export default function App({ path, data, github, logo, title }: Props) {
   const routes = buildRoutes(data, github, logo);
-  return <Router path={path} routes={routes} />;
+  return <Router path={path} routes={routes} title={title} />;
 }

src/templates/Router.js

@@ -7,6 +7,7 @@ import type { Route } from '../types';
 type Props = {
   path: string,
   routes: Array<Route>,
+  title?: string,
 };
 
 type State = {
@@ -41,11 +42,14 @@ export default class Router extends Component<Props, State> {
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
+    const { routes, title } = this.props;
     if (prevState.path !== this.state.path) {
-      const route = this.props.routes.find(r => r.link === this.state.path);
+      const route = routes.find(r => r.link === this.state.path);
       if (route) {
         // eslint-disable-next-line no-undef
-        document.title = route.title || '';
+        document.title = title
+          ? title.replace(/\[title\]/g, route.title)
+          : route.title || '';
       }
     }
   }

src/types.js

@@ -24,6 +24,7 @@ export type Options = {
   colors?: {
     primary?: string,
   },
+  title?: string,
 };
 
 export type PageInfo = {

src/utils/buildEntry.js

@@ -6,10 +6,12 @@ export default function buildEntry({
   styles,
   github,
   logo,
+  title,
 }: {
   styles?: string[],
   github?: string,
   logo?: string,
+  title?: string,
 }) {
   return `
 import React from 'react';
@@ -37,6 +39,7 @@ const render = () => {
         data={data}
         github={${github !== undefined ? JSON.stringify(github) : 'undefined'}}
         logo={${logo !== undefined ? JSON.stringify(logo) : 'undefined'}}
+        title={${title !== undefined ? JSON.stringify(title) : 'undefined'}}
       />,
       root
     );

src/utils/buildHTML.js

@@ -16,6 +16,7 @@ type Options = {
   colors?: {
     primary?: string,
   },
+  title?: string,
 };
 
 export default function buildHTML({
@@ -26,9 +27,16 @@ export default function buildHTML({
   sheets,
   scripts,
   colors = {},
+  title,
 }: Options) {
   const html = ReactDOMServer.renderToString(
-    <App logo={logo} path={info.link} data={data} github={github} />
+    <App
+      logo={logo}
+      path={info.link}
+      data={data}
+      github={github}
+      title={title}
+    />
   );
 
   let body = `
@@ -81,10 +89,13 @@ export default function buildHTML({
     body += `<script src="${s}"></script>`;
   });
 
+  const pageTitle =
+    title !== undefined ? title.replace(/\[title\]/g, info.title) : info.title;
+
   return ReactDOMServer.renderToStaticMarkup(
     // eslint-disable-next-line react/jsx-pascal-case
     <HTML
-      title={info.title}
+      title={pageTitle}
       description={(info.description || '').split('\n')[0]}
       body={body}
       sheets={sheets}