feat: add base as option (#81)

* Add base element as an option * Add automatically generated api documentation * Update e2e tests and override unit test
ifiokjr · Jun 30, 2023 · 1cb7303 · 1cb7303
1 parent 2fa64fa
commit 1cb7303
Show file tree

Hide file tree

Showing 12 changed files with 84 additions and 2 deletions.
diff --git a/docs/api/gatsby-plugin-next-seo.baseseoprops.base.md b/docs/api/gatsby-plugin-next-seo.baseseoprops.base.md
@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [gatsby-plugin-next-seo](./gatsby-plugin-next-seo.md) &gt; [BaseSeoProps](./gatsby-plugin-next-seo.baseseoprops.md) &gt; [base](./gatsby-plugin-next-seo.baseseoprops.base.md)
+
+## BaseSeoProps.base property
+
+Specifies the base URL to use for all relative URLs in a document. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
+
+<b>Signature:</b>
+
+```typescript
+base?: BaseProps;
+```
diff --git a/docs/api/gatsby-plugin-next-seo.baseseoprops.md b/docs/api/gatsby-plugin-next-seo.baseseoprops.md
@@ -15,6 +15,7 @@ export interface BaseSeoProps
 
 |  Property | Type | Description |
 |  --- | --- | --- |
+|  [base](./gatsby-plugin-next-seo.baseseoprops.base.md) | BaseProps | Specifies the base URL to use for all relative URLs in a document. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base |
 |  [canonical](./gatsby-plugin-next-seo.baseseoprops.canonical.md) | string | Set the page canonical url. |
 |  [description](./gatsby-plugin-next-seo.baseseoprops.description.md) | string | Set the page meta description. |
 |  [facebook](./gatsby-plugin-next-seo.baseseoprops.facebook.md) | { appId: string; } | Used for Facebook Insights, you must add a facebook app ID to your page to for it. |

diff --git a/docs/api/gatsby-plugin-next-seo.gatsbyseo.md b/docs/api/gatsby-plugin-next-seo.gatsbyseo.md
@@ -9,7 +9,7 @@ This component render the tags in the `<head>` for SEO on a per page basis. As a
 <b>Signature:</b>
 
 ```typescript
-GatsbySeo: ({ metaTags, linkTags, canonical, description, facebook, htmlAttributes, language, languageAlternates, mobileAlternate, nofollow, noindex, openGraph, title, titleTemplate, twitter, }: GatsbySeoProps) => JSX.Element
+GatsbySeo: ({ metaTags, linkTags, canonical, description, facebook, htmlAttributes, language, languageAlternates, mobileAlternate, nofollow, noindex, openGraph, title, titleTemplate, twitter, base, }: GatsbySeoProps) => JSX.Element
 ```
 
 ## Remarks

diff --git a/docs/etc/gatsby-plugin-next-seo.api.md b/docs/etc/gatsby-plugin-next-seo.api.md
@@ -60,11 +60,18 @@ export interface ArticleJsonLdProps extends DeferSeoProps, Overrides<Article> {
     url: string;
 }
 
+// Warning: (ae-internal-missing-underscore) The name "BaseProps" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export type BaseProps = JSX.IntrinsicElements['base'];
+
 // @public
 export const BaseSeo: ({ defer, metaTags, linkTags, ...props }: AllSeoProps) => JSX.Element;
 
 // @public (undocumented)
 export interface BaseSeoProps {
+    // Warning: (ae-incompatible-release-tags) The symbol "base" is marked as @public, but its signature references "BaseProps" which is marked as @internal
+    base?: BaseProps;
     canonical?: string;
     description?: string;
     facebook?: {
@@ -216,7 +223,7 @@ export interface FAQJsonLdProps extends DeferSeoProps, Overrides<FAQPage> {
 }
 
 // @public
-export const GatsbySeo: ({ metaTags, linkTags, canonical, description, facebook, htmlAttributes, language, languageAlternates, mobileAlternate, nofollow, noindex, openGraph, title, titleTemplate, twitter, }: GatsbySeoProps) => JSX.Element;
+export const GatsbySeo: ({ metaTags, linkTags, canonical, description, facebook, htmlAttributes, language, languageAlternates, mobileAlternate, nofollow, noindex, openGraph, title, titleTemplate, twitter, base, }: GatsbySeoProps) => JSX.Element;
 
 // @public (undocumented)
 export interface GatsbySeoPluginOptions extends DefaultSeoProps, BaseSeoProps {

diff --git a/e2e/__tests__/seo.e2e.ts b/e2e/__tests__/seo.e2e.ts
@@ -9,6 +9,8 @@ test.each(testIterator)('Default SEO / - %s', async (_, disableJavascript) => {
   const $document = await launch({ disableJavascript, path: '/' });
   const tagAssertions = [
     { selector: 'h1', prop: 'innerText', result: 'Default SEO on this Page' },
+    { selector: 'base', prop: 'href', result: 'http://www.test.com/' },
+    { selector: 'base', prop: 'target', result: '_blank' },
     {
       selector: 'head title',
       prop: 'innerText',
@@ -116,6 +118,12 @@ test.each(testIterator)(
 
     const tagAssertions: TagAssertionBuilder[] = [
       { selector: 'h1', prop: 'innerText', result: 'Overridden Seo' },
+      {
+        selector: 'base',
+        prop: 'href',
+        result: 'http://www.overridetest.com/',
+      },
+      { selector: 'base', prop: 'target', result: '_self' },
       {
         selector: 'html',
         prop: 'lang',

diff --git a/example/gatsby-config.js b/example/gatsby-config.js
@@ -14,6 +14,10 @@ module.exports = {
     {
       resolve: 'gatsby-plugin-next-seo',
       options: {
+        base: {
+          href: 'http://www.test.com',
+          target: '_blank',
+        },
         title: 'Title A',
         titleTemplate: '%s | Gatsby SEO',
         description: 'Description A',

diff --git a/example/src/pages/overridden.tsx b/example/src/pages/overridden.tsx
@@ -9,6 +9,10 @@ const Overridden = () => (
       noindex={true}
       nofollow={true}
       title='Title B'
+      base={{
+        href: 'http://www.overridetest.com',
+        target: '_self',
+      }}
       description='Description B'
       canonical='https://www.canonical.ie/b'
       language='en'

diff --git a/src/meta/__tests__/__snapshots__/base-seo.test.tsx.snap b/src/meta/__tests__/__snapshots__/base-seo.test.tsx.snap
@@ -591,6 +591,11 @@ exports[`renders correctly 1`] = `
     <title>
       This is a test title.
     </title>
+    <base
+      data-rh="true"
+      href="www.test.com"
+      target="_blank"
+    />
     <link
       data-rh="true"
       href="https://m.canonical.ie"

diff --git a/src/meta/__tests__/base-seo.test.tsx b/src/meta/__tests__/base-seo.test.tsx
@@ -6,6 +6,10 @@ import { __resetDefaults, BaseSeo } from '../base-seo';
 
 const SEO = {
   title: 'This is a test title.',
+  base: {
+    href: 'www.test.com',
+    target: '_blank',
+  },
   language: 'en-GB',
   description: 'This is a test description.',
   canonical: 'https://www.canonical.ie',
@@ -71,6 +75,13 @@ test('returns full array for default seo object', () => {
     SEO.language,
   );
 
+  expect(document.querySelector('base')?.getAttribute('href')).toBe(
+    SEO?.base?.href,
+  );
+  expect(document.querySelector('base')?.getAttribute('target')).toBe(
+    SEO?.base?.target,
+  );
+
   const title = getByText(
     document.documentElement,
     (content, element) =>
@@ -315,9 +326,15 @@ test('BaseSeo respects the nesting/overriding behaviour of React Helmet', () =>
   const title = 'Example Title';
   const exampleUrlBase = 'https://example.com';
   const exampleUrlOverride = 'https://examp2le.com';
+  const exampleBaseHrefOverride = 'https://overridetest.com';
+  const exampleBaseTargetOverride = '_self';
   render(
     <>
       <BaseSeo
+        base={{
+          href: exampleBaseHrefOverride,
+          target: exampleBaseTargetOverride,
+        }}
         title={title}
         titleTemplate={`${template} | %s`}
         openGraph={{ url: exampleUrlBase }}
@@ -351,6 +368,13 @@ test('BaseSeo respects the nesting/overriding behaviour of React Helmet', () =>
   );
   expect(ogUrlTag).toBeTruthy();
   expect(ogUrlTag?.getAttribute('content')).toEqual(exampleUrlOverride);
+
+  expect(document.querySelector('base')?.getAttribute('href')).toBe(
+    exampleBaseHrefOverride,
+  );
+  expect(document.querySelector('base')?.getAttribute('target')).toBe(
+    exampleBaseTargetOverride,
+  );
 });
 
 const ArticleSEO = {

diff --git a/src/meta/base-seo.tsx b/src/meta/base-seo.tsx
@@ -479,6 +479,10 @@ export const BaseSeo = ({
     helmetProps['titleTemplate'] = props.titleTemplate;
   }
 
+  if (props.base) {
+    helmetProps['base'] = props.base;
+  }
+
   return (
     <>
       <Helmet {...helmetProps}></Helmet>

diff --git a/src/meta/gatsby-seo.tsx b/src/meta/gatsby-seo.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import React from 'react';
 
 import { GatsbySeoProps } from '../types';
@@ -39,6 +40,7 @@ export const GatsbySeo = ({
   title,
   titleTemplate,
   twitter,
+  base,
 }: GatsbySeoProps) => {
   return (
     <BaseSeo
@@ -57,6 +59,7 @@ export const GatsbySeo = ({
       title={title}
       titleTemplate={titleTemplate}
       twitter={twitter}
+      base={base}
     />
   );
 };
diff --git a/src/types.ts b/src/types.ts
@@ -244,6 +244,11 @@ interface HTMLAttributes {
  * @public
  */
 export interface BaseSeoProps {
+  /**
+   * Specifies the base URL to use for all relative URLs in a document. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
+   */
+  base?: BaseProps;
+
   /**
    * The language being used for the current page.
    *
@@ -592,3 +597,7 @@ export type StyleProps = JSX.IntrinsicElements['style'];
  * @internal
  */
 export type TitleProps = JSX.IntrinsicElements['title'];
+/**
+ * @internal
+ */
+export type BaseProps = JSX.IntrinsicElements['base'];