fix: Gatsby Link duplicated path prefix

adobe · Nov 3, 2020 · 8a1a0f7 · 8a1a0f7
1 parent 9072d87
commit 8a1a0f7
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 60 deletions.
diff --git a/example/src/pages/creative_cloud/index.md b/example/src/pages/creative_cloud/index.md
@@ -15,8 +15,8 @@ Start building.
 
 Creative Cloud services include tools and capabilities to streamline your workflows so that you, your team, and your stakeholders stay perfectly in sync across projects of any size
 
-* [Get started](/guides/oauth_using_curl/)
-* [Sign up for the newsletter](https://adobe.io)
+* [Get started](../../example/guides/)
+* [Sign up for the newsletter](/guides/)
 
 
 
@@ -58,8 +58,8 @@ And be sure to join the [Exchange Program for Creative Cloud](https://partners.a
 Create plugins for Adobe XD that push the boundaries of experience design by adding new features to the app, automating workflows, connecting XD to external services, and more—all on a quick, modern JavaScript engine with native UI components.
 When you’re ready, you can ship your plugin to XD users right from within the app.
 
-* [Get started](https://adobe.io)
-* [Sign up for the newsletter](https://adobe.io)
+* [Get started](../guides)
+* [Sign up for the newsletter](../guides)
 
 - [No Icon Product](https://www.adobe.com/products/premiere.html)
 
@@ -129,7 +129,7 @@ Connect your users to Creative Cloud right from within your mobile or web apps w
 world-class creative assets with the Adobe Stock API, or sign up for early information on our upcoming CC Storage API.
 
 * [Learn more](../guides)
-* [Sign up for partner program](https://adobe.io)
+* [Sign up for partner program](../guides)
 
 
 
@@ -145,7 +145,7 @@ With the Cloud Content APIs, you can bring design work created in XD directly to
 
 <ResourceCard slots="link, image, heading, text" width="50%" variant="vertical" />
 
-[Adobe I/O](https://adobe.io)
+[Adobe I/O](../guides)
 
 ![Resource 3](images/resource3.png)
 
@@ -157,7 +157,7 @@ Rob Kleiman, July 8th 2020
 
 <ResourceCard slots="link, image, heading, text" width="50%" />
 
-[Adobe I/O](https://adobe.io)
+[Adobe I/O](../guides)
 
 ![Resource 1](images/resource1.png)
 
@@ -169,7 +169,7 @@ Nihil Gupta, July 24th 2020
 
 <ResourceCard slots="link, image, heading, text" width="50%" />
 
-[Adobe I/O](https://adobe.io)
+[Adobe I/O](../guides)
 
 ![Resource 1](images/resource2.png)
 
@@ -181,7 +181,7 @@ Ash Ryan Arnwine, March 12th 2020
 
 <ResourceCard slots="link, image, heading, text" width="50%" variant="vertical" />
 
-[Adobe I/O](https://adobe.io)
+[Adobe I/O](../guides)
 
 ![Resource 3](images/resource3.png)
 
@@ -193,7 +193,7 @@ Rob Kleiman, July 8th 2020
 
 <ResourceCard slots="link, image, heading, text" width="50%" />
 
-[Adobe I/O](https://adobe.io)
+[Adobe I/O](../guides)
 
 ![Resource 1](images/resource1.png)
 
@@ -205,7 +205,7 @@ Nihil Gupta, July 24th 2020
 
 <ResourceCard slots="link, image, heading, text" width="50%" />
 
-[Adobe I/O](https://adobe.io)
+[Adobe I/O](../guides)
 
 ![Resource 1](images/resource2.png)
 
@@ -216,7 +216,7 @@ Ash Ryan Arnwine, March 12th 2020
 
 <ResourceCard slots="link, image, heading, text" variant="vertical" />
 
-[Adobe I/O](https://adobe.io)
+[Adobe I/O](../guides)
 
 ![Resource 3](images/resource3.png)
 
@@ -228,7 +228,7 @@ Rob Kleiman, July 8th 2020
 
 <ResourceCard slots="link, image, heading, text" variant="horizontal" />
 
-[Adobe I/O](https://adobe.io)
+[Adobe I/O](../guides)
 
 ![Resource 3](images/resource3.png)
 
@@ -253,8 +253,8 @@ Rob Kleiman, July 8th 2020
 
 CC Storage API lets you access and modify assets stored in the Creative Cloud, the world's most popular creative platform.
 
-* [Learn more](https://adobe.io)
-* [View docs](https://adobe.io)
+* [Learn more](../guides)
+* [View docs](../guides)
 
 
 
@@ -266,8 +266,8 @@ CC Storage API lets you access and modify assets stored in the Creative Cloud, t
 
 CC Storage API lets you access and modify assets stored in the Creative Cloud, the world's most popular creative platform.
 
-* [Learn more](https://adobe.io)
-* [View docs](https://adobe.io)
+* [Learn more](../guides)
+* [View docs](../guides)
 
 
 
@@ -279,8 +279,8 @@ CC Storage API lets you access and modify assets stored in the Creative Cloud, t
 
 CC Storage API lets you access and modify assets stored in the Creative Cloud, the world's most popular creative platform.
 
-* [Learn more](https://adobe.io)
-* [View docs](https://adobe.io)
+* [Learn more](../guides)
+* [View docs](../guides)
 
 
 <ProductCard slots="icon, heading, text, buttons" theme="light" width="33%" />
@@ -291,8 +291,8 @@ CC Storage API lets you access and modify assets stored in the Creative Cloud, t
 
 CC Storage API lets you access and modify assets stored in the Creative Cloud, the world's most popular creative platform.
 
-* [Learn more](https://adobe.io)
-* [View docs](https://adobe.io)
+* [Learn more](../guides)
+* [View docs](../guides)
 
 
 
@@ -303,8 +303,8 @@ CC Storage API lets you access and modify assets stored in the Creative Cloud, t
 
 Gives your users access to the perfect Adobe Stock asset to enhance their creative projects.
 
-* [Learn more](https://adobe.io)
-* [View docs](https://adobe.io)
+* [Learn more](../guides)
+* [View docs](../guides)
 
 
 
@@ -317,8 +317,8 @@ Gives your users access to the perfect Adobe Stock asset to enhance their creati
 
 Build extensions with HTML, CSS, Javascript and Node. Deploy across multiple Adobe apps.
 
-* [Learn more](https://adobe.io)
-* [View docs](https://adobe.io)
+* [Learn more](../guides)
+* [View docs](../guides)
 
 
 
@@ -330,8 +330,8 @@ Build extensions with HTML, CSS, Javascript and Node. Deploy across multiple Ado
 
 CC Storage API lets you access and modify assets stored in the Creative Cloud, the world's most popular creative platform.
 
-* [Learn more](https://adobe.io)
-* [View docs](https://adobe.io)
+* [Learn more](../guides)
+* [View docs](../guides)
 
 
 
@@ -343,8 +343,8 @@ CC Storage API lets you access and modify assets stored in the Creative Cloud, t
 
 CC Storage API lets you access and modify assets stored in the Creative Cloud, the world's most popular creative platform.
 
-* [Learn more](https://adobe.io)
-* [View docs](https://adobe.io)
+* [Learn more](../guides)
+* [View docs](../guides)
 
 
 
@@ -356,8 +356,8 @@ CC Storage API lets you access and modify assets stored in the Creative Cloud, t
 
 CC Storage API lets you access and modify assets stored in the Creative Cloud, the world's most popular creative platform.
 
-* [Learn more](https://adobe.io)
-* [View docs](https://adobe.io)
+* [Learn more](../guides)
+* [View docs](../guides)
 
 
 
@@ -369,8 +369,8 @@ CC Storage API lets you access and modify assets stored in the Creative Cloud, t
 
 CC Storage API lets you access and modify assets stored in the Creative Cloud, the world's most popular creative platform.
 
-* [Learn more](https://adobe.io)
-* [View docs](https://adobe.io)
+* [Learn more](../guides)
+* [View docs](../guides)
 
 
 
@@ -383,5 +383,5 @@ CC Storage API lets you access and modify assets stored in the Creative Cloud, t
 A monthly newsletter featuring news for anyone who creates, develops, or build plugins, extensions, or integrations for the
 Creative Cloud family of products.
 
-* [Subscribe to the newsletter](https://adobe.io)
-* [Learn more](https://adobe.io)
+* [Subscribe to the newsletter](../guides)
+* [Learn more](../guides)
diff --git a/example/src/pages/project_firefly/index.md b/example/src/pages/project_firefly/index.md
@@ -11,43 +11,43 @@ description: This is the Project Firefly homepage
 
 Adobe products and technologies power them
 
-* [Explore our APIs](https://adobe.io)
+* [Explore our APIs](../guides)
 * [Subscribe](../guides)
 
 
 
 
-<TextBlock slots="image, heading, text" width="33%" theme="light" isCentered />
+<TextBlock slots="image, heading, text, buttons" width="33%" theme="light" isCentered />
 
 ![icon 1](images/icon1.png)
 
 ### Your app, our infrastructure
 
 Build secure, scalable apps with easy integrations and we'll take care of the storage and hosting.
 
+* [Explore our APIs](../guides)
 
 
-
-<TextBlock slots="image, heading, text" width="33%" theme="light" isCentered />
+<TextBlock slots="image, heading, text, buttons" width="33%" theme="light" isCentered />
 
 ![icon 2](images/icon2.png)
 
 ### Fast UI design
 
 UI design is made easy with [Spectrum components](https://spectrum.adobe.com) that match the look and feel of Adobe's products.  
 
+* [Explore our APIs](../guides)
 
 
-
-<TextBlock slots="image, heading, text" width="33%" theme="light" isCentered />
+<TextBlock slots="image, heading, text, buttons" width="33%" theme="light" isCentered />
 
 ![icon 3](images/icon3.png)
 
 ### Secure and easy to manage
 
 Get API authorization and user access control out of the box.
 
-
+* [Explore our APIs](https://adobe.io)
 
 
 <TextBlock slots="heading, text, video" isCentered />

diff --git a/packages/gatsby-theme-parliament/src/components/AnchorButton/index.js b/packages/gatsby-theme-parliament/src/components/AnchorButton/index.js
@@ -10,18 +10,15 @@
  * governing permissions and limitations under the License.
  */
 
-import React, { useContext } from 'react';
+import React from 'react';
 import { Link as GatsbyLink } from 'gatsby';
-import { getExternalLinkProps, isExternalLink } from '../../utils';
+import { getExternalLinkProps, isExternalLink, fixPathPrefix } from '../../utils';
 import PropTypes from 'prop-types';
 import { Button } from '@adobe/react-spectrum';
 import '@spectrum-css/button';
 import classNames from 'classnames';
-import Context from '../Context';
 
 const AnchorButton = ({ href, variant, isQuiet, link, ...props }) => {
-  const { pathPrefix } = useContext(Context);
-
   if (isExternalLink(href)) {
     return (
       <Button
@@ -35,15 +32,13 @@ const AnchorButton = ({ href, variant, isQuiet, link, ...props }) => {
     );
   }
 
-  const internalLink = String(href).replace(pathPrefix, '');
-
   return (
     <GatsbyLink
       role="button"
       className={classNames('spectrum-Button', `spectrum-Button--${variant}`, {
         'spectrum-Button--quiet': isQuiet
       })}
-      to={internalLink}
+      to={fixPathPrefix(href)}
       {...props}
     />
   );

diff --git a/packages/gatsby-theme-parliament/src/components/AnchorLink/index.js b/packages/gatsby-theme-parliament/src/components/AnchorLink/index.js
@@ -10,16 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
-import React, { useContext } from 'react';
+import React from 'react';
 import { Link as GatsbyLink } from 'gatsby';
-import { getExternalLinkProps, isExternalLink } from '../../utils';
+import { getExternalLinkProps, isExternalLink, fixPathPrefix } from '../../utils';
 import { Link } from '@adobe/react-spectrum';
 import PropTypes from 'prop-types';
-import Context from '../Context';
 
 const AnchorLink = ({ href, ...props }) => {
-  const { pathPrefix } = useContext(Context);
-
   if (isExternalLink(href)) {
     return (
       <Link isQuiet={true}>
@@ -28,11 +25,9 @@ const AnchorLink = ({ href, ...props }) => {
     );
   }
 
-  const internalLink = String(href).replace(pathPrefix, '');
-
   return (
     <Link isQuiet={true}>
-      <GatsbyLink to={internalLink} {...props} />
+      <GatsbyLink to={fixPathPrefix(href)} {...props} />
     </Link>
   );
 };

diff --git a/packages/gatsby-theme-parliament/src/components/Layout/index.js b/packages/gatsby-theme-parliament/src/components/Layout/index.js
@@ -15,7 +15,7 @@ import { SSRProvider, Provider as RSProvider, defaultTheme } from '@adobe/react-
 import { I18nProvider, useLocale } from '@react-aria/i18n';
 import { css } from '@emotion/core';
 import { useStaticQuery, graphql } from 'gatsby';
-import { rootFix, rootFixPages, findSelectedPages, findSubPages, LARGE_SCREEN_WIDTH } from '../../utils';
+import { rootFix, rootFixPages, findSelectedPages, findSubPages, LARGE_SCREEN_WIDTH, setPathPrefix } from '../../utils';
 import '@spectrum-css/vars/dist/spectrum-global.css';
 import '@spectrum-css/vars/dist/spectrum-medium.css';
 import '@spectrum-css/vars/dist/spectrum-large.css';
@@ -204,13 +204,14 @@ export default ({ children, pageContext, location }) => {
     }
   }
 
+  setPathPrefix(pathPrefix);
+
   return (
     <Provider
       value={{
         location,
         pageContext,
         hasSideNav,
-        pathPrefix,
         siteMetadata,
         allSitePage,
         allMdx,

diff --git a/packages/gatsby-theme-parliament/src/utils/index.js b/packages/gatsby-theme-parliament/src/utils/index.js
@@ -14,6 +14,12 @@ import React from 'react';
 import { withPrefix } from 'gatsby';
 import globals from '../../scripts/globals';
 
+let _pathPrefix = '';
+
+export const setPathPrefix = (value) => {
+  _pathPrefix = value;
+};
+
 export const trailingSlashFix = (pathname) => {
   if (!pathname.endsWith('/')) {
     return `${pathname}/`;
@@ -22,6 +28,17 @@ export const trailingSlashFix = (pathname) => {
   return pathname;
 };
 
+export const fixPathPrefix = (pathname) => {
+  if (_pathPrefix) {
+    const pathPrefix = trailingSlashFix(_pathPrefix);
+    if (pathname?.startsWith(pathPrefix)) {
+      pathname = `/${pathname.replace(pathPrefix, '')}`;
+    }
+  }
+
+  return pathname;
+};
+
 export const rootFix = (pathname) => {
   if (pathname === withPrefix('/')) {
     return withPrefix('/_ROOT_/');