fix: react-helmet html attributes

ccontrols · Mar 10, 2021 · c241445 · c241445
1 parent 9ce38f6
commit c241445
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 57 deletions.
diff --git a/ui/app/src/App/App.tsx b/ui/app/src/App/App.tsx
@@ -1,19 +1,19 @@
 /** @jsx jsx */
-import { FC, ComponentType, Fragment } from 'react';
+import { FC, Fragment } from 'react';
 import { jsx, Box } from 'theme-ui';
 import { SkipLinks, SkipLinksItemProps } from '@component-controls/components';
 import {
   useStore,
   useCurrentDocument,
   useConfig,
 } from '@component-controls/store';
-import { SEO } from '../SEO';
+import { SEO, SEOProps } from '../SEO';
 import { Header } from '../Header';
 import { Footer } from '../Footer';
 import { useAnalytics } from './useAnalytics';
 import { AppError } from '../AppError';
 export interface AppProps {
-  Helmet?: ComponentType;
+  Helmet?: SEOProps['Helmet'];
   type?: string;
 }
 
@@ -43,22 +43,11 @@ export const App: FC<AppProps> = ({ children, Helmet, type = '' }) => {
     });
   }
   useAnalytics();
-  const titleParts = doc?.title ? doc.title.split('/') : [type];
-  const docTitle = titleParts[titleParts.length - 1];
-  const { title, language, siteMap, seo, app } = config || {};
+  const { app } = config || {};
   const Wrapper = app || Fragment;
   return (
     <Fragment>
-      {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} title={type} />}
+      <SEO doc={doc} config={config} title={type} Helmet={Helmet} />
       <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, ComponentType } from 'react';
+import { FC } from 'react';
 import { jsx } from 'theme-ui';
 import queryString from 'query-string';
 import { Store, docStoryToId } from '@component-controls/core';
@@ -9,7 +9,7 @@ import {
   LinkContextProviderProps,
 } from '@component-controls/components';
 import { BlockContextProvider } from '@component-controls/blocks';
-import { App } from '../App';
+import { App, AppProps } from '../App';
 import { mdxComponents } from './mdxComponents';
 
 export interface AppContextProps {
@@ -18,7 +18,7 @@ export interface AppContextProps {
   type?: string;
   store: Store;
   linkClass: LinkContextProviderProps['linkClass'];
-  Helmet?: ComponentType;
+  Helmet?: AppProps['Helmet'];
   activeTab?: string;
 }
 

diff --git a/ui/app/src/SEO/SEO.tsx b/ui/app/src/SEO/SEO.tsx
@@ -16,7 +16,7 @@ import { useIsLocalLink, useTheme } from '@component-controls/components';
 import { defaultLinks } from './defaultLinks';
 
 export interface SEOProps {
-  Helmet?: ComponentType;
+  Helmet?: ComponentType<{ htmlAttributes?: Record<string, unknown> }>;
   doc?: Document;
   config?: RunConfiguration;
   title?: string;
@@ -36,6 +36,9 @@ export const SEO: FC<SEOProps> = ({
   const keywords = doc?.keywords || doc?.tags;
   const {
     title,
+    language,
+    siteMap,
+    seo,
     siteUrl = '',
     description,
     image,
@@ -60,45 +63,62 @@ export const SEO: FC<SEOProps> = ({
       : window.location.href;
   const author = doc?.author || siteAuthor;
   return Helmet ? (
-    <Helmet>
-      {Array.isArray(keywords) && (
-        <meta name="keywords" content={keywords.join(',')} />
-      )}
-      {pageDescription && <meta name="description" content={pageDescription} />}
-      {imageUrl && <meta name="image" content={imageUrl} />}
-      <meta property="og:title" content={docTitle} />
-      <meta property="og:url" content={url} />
-      {pageDescription && (
-        <meta property="og:description" content={pageDescription} />
-      )}
-      {imageUrl && <meta property="og:image" content={imageUrl} />}
-      {pageDescription && (
-        <meta property="og:image:alt" content={pageDescription} />
-      )}
-      <meta property="og:type" content="website" />
+    <>
+      <Helmet htmlAttributes={{ lang: language }}>
+        <title>{`${docTitle} | ${title}`}</title>
+        {siteMap && (
+          <link rel="sitemap" type="application/xml" href="/sitemap.xml" />
+        )}
+      </Helmet>
+      {seo ? (
+        <Helmet>{seo}</Helmet>
+      ) : (
+        <Helmet>
+          {Array.isArray(keywords) && (
+            <meta name="keywords" content={keywords.join(',')} />
+          )}
+          {pageDescription && (
+            <meta name="description" content={pageDescription} />
+          )}
+          {imageUrl && <meta name="image" content={imageUrl} />}
+          <meta property="og:title" content={docTitle} />
+          <meta property="og:url" content={url} />
+          {pageDescription && (
+            <meta property="og:description" content={pageDescription} />
+          )}
+          {imageUrl && <meta property="og:image" content={imageUrl} />}
+          {pageDescription && (
+            <meta property="og:image:alt" content={pageDescription} />
+          )}
+          <meta property="og:type" content="website" />
 
-      <meta name="twitter:card" content="summary" />
+          <meta name="twitter:card" content="summary" />
 
-      <meta name="twitter:site" content={siteAuthor} />
-      <meta name="twitter:title" content={docTitle} />
-      <meta name="twitter:url" content={url} />
-      {pageDescription && (
-        <meta name="twitter:description" content={pageDescription} />
-      )}
-      {imageUrl && <meta name="twitter:image" content={imageUrl} />}
-      {pageDescription && (
-        <meta name="twitter:image:alt" content={pageDescription} />
-      )}
-      <meta name="twitter:creator" content={author} />
-      {links &&
-        links.map((link, idx) => <link key={`meta_key${idx}`} {...link} />)}
-      {typeof theme.colors?.primary === 'string' && (
-        <meta name="msapplication-TileColor" content={theme.colors.primary} />
-      )}
-      <meta name="application-name" content={title} />
-      {typeof theme.colors?.background === 'string' && (
-        <meta name="theme-color" content={theme.colors.background} />
+          <meta name="twitter:site" content={siteAuthor} />
+          <meta name="twitter:title" content={docTitle} />
+          <meta name="twitter:url" content={url} />
+          {pageDescription && (
+            <meta name="twitter:description" content={pageDescription} />
+          )}
+          {imageUrl && <meta name="twitter:image" content={imageUrl} />}
+          {pageDescription && (
+            <meta name="twitter:image:alt" content={pageDescription} />
+          )}
+          <meta name="twitter:creator" content={author} />
+          {links &&
+            links.map((link, idx) => <link key={`meta_key${idx}`} {...link} />)}
+          {typeof theme.colors?.primary === 'string' && (
+            <meta
+              name="msapplication-TileColor"
+              content={theme.colors.primary}
+            />
+          )}
+          <meta name="application-name" content={title} />
+          {typeof theme.colors?.background === 'string' && (
+            <meta name="theme-color" content={theme.colors.background} />
+          )}
+        </Helmet>
       )}
-    </Helmet>
+    </>
   ) : null;
 };