fix: update Helmet prop

ccontrols · Nov 5, 2020 · d1de02c · d1de02c
1 parent 8edcd84
commit d1de02c
Show file tree

Hide file tree

Showing 17 changed files with 197 additions and 145 deletions.
diff --git a/core/core/README.md b/core/core/README.md
diff --git 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 }) => (
-    <div>
-      <Helmet>
-        <meta name="description" content="a page with custom meta description" />
-      </Helmet>
-      {children}
-    </div>
-  ),
   theme: {
     colors: {
       // primary: 'pink',

diff --git 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 `<head >` 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
@@ -3,6 +3,7 @@
 -   [In action](#in-action)
 -   [Overview](#overview)
 -   [API](#api)
+    -   [<ins>onRenderBody</ins>](#insonrenderbodyins)
     -   [<ins>onPreRenderHTML</ins>](#insonprerenderhtmlins)
     -   [<ins>GatsbyLink</ins>](#insgatsbylinkins)
     -   [<ins>Layout</ins>](#inslayoutins)
@@ -32,6 +33,10 @@ Special thanks for the inspiration drawn from [Gatsby themes](https://github.com
 
 <!-- START-REACT-DOCGEN-TYPESCRIPT -->
 
+## <ins>onRenderBody</ins>
+
+_onRenderBody [source code](https://github.com/ccontrols/component-controls/tree/master/integrations/gatsby-theme-stories/src/gatsby-ssr.tsx)_
+
 ## <ins>onPreRenderHTML</ins>
 
 _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
@@ -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
@@ -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
@@ -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
@@ -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<LayoutProps> = ({
       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
@@ -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(<style key="controls-styles">{cssStyles}</style>);
   }
+  //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
@@ -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
@@ -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<LayoutProps> = ({
 }) => {
   return (
     <AppContext
+      Helmet={Helmet}
       docId={docId}
       storyId={storyId}
       store={store}

diff --git a/integrations/nextjs-plugin/src/index.ts b/integrations/nextjs-plugin/src/index.ts
@@ -1,3 +1,5 @@
+import Helmet from 'next/head';
 export * from './components/Layout';
 export * from './store';
 export * from './page-links';
+export { Helmet };
diff --git a/ui/app/README.md b/ui/app/README.md
@@ -18,6 +18,7 @@
     -   [<ins>DocsLink</ins>](#insdocslinkins)
     -   [<ins>StoryLink</ins>](#insstorylinkins)
     -   [<ins>PageContainer</ins>](#inspagecontainerins)
+    -   [<ins>Helmet</ins>](#inshelmetins)
     -   [<ins>SEO</ins>](#insseoins)
     -   [<ins>SideContext</ins>](#inssidecontextins)
     -   [<ins>Sidebar</ins>](#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  |
-
 ## <ins>AppContext</ins>
 
 _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&lt;HTMLDivElement>_ | ref to the page container component |
 
+## <ins>Helmet</ins>
+
+_Helmet [source code](https://github.com/ccontrols/component-controls/tree/master/ui/app/src/SEO/SEO.tsx)_
+
 ## <ins>SEO</ins>
 
 _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_ |             |
 
 ## <ins>SideContext</ins>
 

diff --git 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
@@ -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<AppProps> = ({ children }) => {
+export const App: FC<AppProps> = ({ children, Helmet }) => {
   const store = useStore();
   const doc = useCurrentDocument();
   const config = useConfig();
@@ -47,17 +48,16 @@ export const App: FC<AppProps> = ({ children }) => {
   const Wrapper = app || Fragment;
   return (
     <Fragment>
-      <Helmet
-        title={docTitle}
-        defaultTitle={title}
-        titleTemplate={`%s | ${title}`}
-      >
-        <html lang={language} />
-        {siteMap && (
-          <link rel="sitemap" type="application/xml" href="/sitemap.xml" />
-        )}
-      </Helmet>
-      {seo || <SEO doc={doc} config={config} />}
+      {Helmet && (
+        <Helmet>
+          <title>{`${docTitle} | ${title}`}</title>
+          <html lang={language} />
+          {siteMap && (
+            <link rel="sitemap" type="application/xml" href="/sitemap.xml" />
+          )}
+        </Helmet>
+      )}
+      {seo || <SEO Helmet={Helmet} doc={doc} config={config} />}
       <SkipLinks items={items} />
       <Wrapper>
         <Box variant="app">

diff --git 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<AppContextProps> = ({
   store,
   linkClass,
   activeTab,
+  Helmet,
 }) => {
   const query =
     typeof window !== 'undefined'
@@ -50,7 +52,7 @@ export const AppContext: FC<AppContextProps> = ({
     >
       <SidebarContextProvider>
         <LinkContextProvider linkClass={linkClass}>
-          <App>{children}</App>
+          <App Helmet={Helmet}>{children}</App>
         </LinkContextProvider>
       </SidebarContextProvider>
     </BlockContextProvider>

diff --git 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<SEOProps> = ({ doc, config }) => {
+export const SEO: FC<SEOProps> = ({ 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<SEOProps> = ({ 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 ? (
     <Helmet>
       {Array.isArray(keywords) && (
         <meta name="keywords" content={keywords.join(',')} />
@@ -78,5 +90,5 @@ export const SEO: FC<SEOProps> = ({ doc, config }) => {
       <meta name="application-name" content={title} />
       <meta name="theme-color" content={theme.colors?.background} />
     </Helmet>
-  );
+  ) : null;
 };