feat(hashi-head): validate props.image, add twitter:description (#623)

* feat(hashi-head): validate that props.image is absolute URL * feat: throw error in dev * doc: comment on is-absolute-url * fix: name not property * docs: add reference link for absolute URL in open graph * tests: add test for image error, update descrip test * docs: add examples to is-aboslute-url * fix: clean up TODO comments * chore: update changeset
hashicorp · Jun 22, 2022 · 270c679 · 270c679 · vercel · Jun 22, 2022
1 parent b5fc376
commit 270c679
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 8 deletions.
diff --git a/.changeset/selfish-points-raise.md b/.changeset/selfish-points-raise.md
@@ -0,0 +1,5 @@
+---
+'@hashicorp/react-head': minor
+---
+
+Validates that props.image is an absolute URL, and throws an error in development if it is not. As well, adds `twitter:description` when `description` prop is provided.
diff --git a/packages/head/helpers/is-absolute-url.ts b/packages/head/helpers/is-absolute-url.ts
@@ -0,0 +1,26 @@
+/**
+ * Given a string,
+ * return true if the string is an absolute URL,
+ * or false otherwise.
+ *
+ * Uses regex so may not be 100% accurate.
+ * Based on https://github.com/sindresorhus/is-absolute-url
+ *
+ * @example
+ * // returns true, this is an absolute URL
+ * isAbsoluteUrl('https://www.hashicorp.com/foo/bar');
+ * @example
+ * // returns false, this is a relative path
+ * isAbsoluteUrl('./foo/bar');
+ * @example
+ * // returns false, this is an absolute path, but not an absolute URL
+ * isAbsoluteUrl('/foo/bar');
+ * @param string The URL to test
+ * @returns true if the URL is absolute, false otherwise
+ */
+function isAbsoluteUrl(string: string): boolean {
+  const regex = /^[a-zA-Z][a-zA-Z\d+\-.]*:/
+  return regex.test(string)
+}
+
+export default isAbsoluteUrl
diff --git a/packages/head/index.test.js b/packages/head/index.test.js
@@ -51,6 +51,7 @@ describe('<Head />', () => {
         metaHttpEquivHTML,
         metaDefaultTagsHTML,
         '<meta name="description" property="og:description" content="Page Description">',
+        '<meta name="twitter:description" content="Page Description">',
         '</head>',
       ].join('')
     )
@@ -85,19 +86,32 @@ describe('<Head />', () => {
   })
 
   it('should render and display <meta name="og:image"> tag', () => {
-    const { container } = renderHead(<Head image="/site-image.jpg" />)
+    const { container } = renderHead(
+      <Head image="https://www.hashicorp.com/site-image.jpg" />
+    )
 
     expect(container.innerHTML).toBe(
       [
         '<head>',
         metaHttpEquivHTML,
         metaDefaultTagsHTML,
-        '<meta property="og:image" content="/site-image.jpg">',
+        '<meta property="og:image" content="https://www.hashicorp.com/site-image.jpg">',
         '</head>',
       ].join('')
     )
   })
 
+  it('should throw an error in development if image is not an absolute URL', () => {
+    //  Suppress console.error for this test, we expect an error
+    jest.spyOn(console, 'error')
+    global.console.error.mockImplementation(() => {})
+    expect(() => {
+      renderHead(<Head image="/site-image.jpg" />)
+    }).toThrowError()
+    //  Restore console.error for further tests
+    global.console.error.mockRestore()
+  })
+
   it('should render and display <link rel="preload"> tags', () => {
     const { container } = renderHead(
       <Head preload={[{ href: '/style.css', as: 'stylesheet' }]} />

diff --git a/packages/head/index.tsx b/packages/head/index.tsx
@@ -1,9 +1,34 @@
 import Head from 'next/head'
+import isAbsoluteUrl from './helpers/is-absolute-url'
 import { renderMetaTags } from './seo'
 
 export { renderMetaTags }
 
+const IS_DEV = process.env.NODE_ENV !== 'production'
+
 export default function HashiHead(props: HashiHeadProps): React.ReactElement {
+  /**
+   * Throw an error if props.image is a relative URL.
+   * It must be an absolute URL in order to work as expected as og:image.
+   * Reference: https://ogp.me/#url
+   */
+  if (typeof props.image !== 'undefined' && !isAbsoluteUrl(props.image)) {
+    const errorMessage = `Error: HashiHead "props.image" must be an absolute URL. Non-absolute URL detected: "${props.image}". Please provide a fully qualified absolute URL or "props.image".`
+    if (IS_DEV) {
+      throw new Error(errorMessage)
+    } else {
+      /**
+       * TODO: should we consider alternatives to throwing an error here?
+       * Eg, perhaps we could log to Datadog or something rather than throw.
+       * However, Datadog only in hashicorp/dev-portal... maybe if we use it
+       * on all properties, this type of tracking could be a good fit?
+       * Related "Removing Sentry" discussion item:
+       * https://app.asana.com/0/1202347960758186/1202475860181284/f
+       */
+      console.error(errorMessage)
+    }
+  }
+
   return (
     <Head>
       {whenString(props.title, <title>{props.title}</title>)}
@@ -24,12 +49,19 @@ export default function HashiHead(props: HashiHeadProps): React.ReactElement {
       <meta name="theme-color" content="#000" key="themeColor" />
       {whenString(
         props.description,
-        <meta
-          name="description"
-          property="og:description"
-          content={props.description}
-          key="description"
-        />
+        <>
+          <meta
+            name="description"
+            property="og:description"
+            content={props.description}
+            key="description"
+          />
+          <meta
+            name="twitter:description"
+            content={props.description}
+            key="twitterDescription"
+          />
+        </>
       )}
       {whenString(
         props.siteName,