feat: add seo document description

ccontrols · Jul 12, 2020 · 97441e6 · 97441e6
1 parent 8c8308e
commit 97441e6
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 4 deletions.
diff --git a/core/store/src/Store/Store.ts b/core/store/src/Store/Store.ts
@@ -9,6 +9,7 @@ import {
   getStoryPath,
   DocType,
   defDocType,
+  getComponentName,
 } from '@component-controls/core';
 import { BroadcastChannel } from 'broadcast-channel';
 import {
@@ -396,8 +397,21 @@ export class Store implements StoryStore {
     }
   };
   visitPage = () => {
-    if (this._analytics && typeof window !== 'undefined') {
+    if (this._analytics) {
       this._analytics.page();
     }
   };
+  getDocDescriotion = (doc: Document): string | undefined => {
+    if (doc.description) {
+      return doc.description;
+    }
+    const componentName = getComponentName(doc.component);
+    if (componentName) {
+      const component = this.loadedStore?.components[componentName];
+      if (component?.info?.description) {
+        return component.info.description;
+      }
+    }
+    return doc.title;
+  };
 }
diff --git a/core/store/src/types.ts b/core/store/src/types.ts
@@ -46,6 +46,7 @@ export interface StoryStore {
   addObserver: (observer: StoreObserver) => void;
   removeObserver: (observer: StoreObserver) => void;
   visitPage: () => void;
+  getDocDescriotion: (doc: Document) => string | undefined;
 }
 
 export const UPDATE_STORY_MSG = 'component_controls_update_story';

diff --git a/ui/app/src/App/App.tsx b/ui/app/src/App/App.tsx
@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { FC, Fragment, useContext } from 'react';
+import { FC, Fragment, useContext, useEffect } from 'react';
 import { jsx, Box } from 'theme-ui';
 import { SkipLinks, SkiLinksItemProps } from '@component-controls/components';
 import { BlockContext } from '@component-controls/blocks';
@@ -40,9 +40,16 @@ export const App: FC<AppProps> = ({ title = '', children }) => {
   }
   const titleParts = title ? title.split('/') : [''];
   const pageTitle = titleParts[titleParts.length - 1];
+  const pageDescription = doc
+    ? storeProvider.getDocDescriotion(doc)
+    : undefined;
+  useEffect(() => {
+    storeProvider.visitPage();
+  }, [storeProvider]);
+
   return (
     <Fragment>
-      <SEO title={pageTitle} />
+      <SEO title={pageTitle} description={pageDescription} />
       <SkipLinks items={items} />
       <Box variant="app">
         <Header toolbar={toolbar} />

diff --git a/ui/blocks/src/context/block/BlockContext.tsx b/ui/blocks/src/context/block/BlockContext.tsx
@@ -69,7 +69,6 @@ export const BlockContextProvider: React.FC<BlockContextInputProps> = ({
     storyId =
       doc && doc.stories && doc.stories.length ? doc.stories[0] : undefined;
   }
-  store.visitPage();
   return (
     <RecoilRoot>
       <ErrorBoundary>