feat: Support external Gatsby links

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](../../example/guides/)
-* [Sign up for the newsletter](/guides/)
+* [Get started](../../example/plop/)
+* [Sign up for the newsletter](/plop/)
 
 
 
@@ -59,9 +59,9 @@ Create plugins for Adobe XD that push the boundaries of experience design by add
 When you’re ready, you can ship your plugin to XD users right from within the app.
 
 * [Get started](../guides)
-* [Sign up for the newsletter](../guides)
+* [Sign up for the newsletter](/guides/)
 
-- [No Icon Product](https://www.adobe.com/products/premiere.html)
+- [No Icon Product](/guides)
 
 ![Screenshot 2](images/intro2.png)
 
@@ -128,8 +128,8 @@ Instantly share Creative Cloud files, designs, specs, and notifications all in r
 Connect your users to Creative Cloud right from within your mobile or web apps with our service APIs. Give users access to
 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](../guides)
+* [Learn more](https://adobe.io)
+* [Sign up for partner program](https://adobe.io)
 
 
 
@@ -266,7 +266,7 @@ 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](../guides)
+* [Learn more](https://adobe.io)
 * [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](../guides)
-* [View docs](../guides)
+* [Learn more](https://adobe.io)
+* [View docs](https://adobe.io)
 
 
 <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](../guides)
-* [View docs](../guides)
+* [Learn more](https://adobe.io)
+* [View docs](../plop)
 
 
 

packages/gatsby-theme-parliament/src/components/AnchorButton/index.js

@@ -11,8 +11,8 @@
  */
 
 import React from 'react';
-import { Link as GatsbyLink } from 'gatsby';
-import { getExternalLinkProps, isExternalLink, fixPathPrefix } from '../../utils';
+import { GatsbyLink } from '../GatsbyLink';
+import { getExternalLinkProps, isExternalLink } from '../../utils';
 import PropTypes from 'prop-types';
 import { Button } from '@adobe/react-spectrum';
 import '@spectrum-css/button';
@@ -38,7 +38,7 @@ const AnchorButton = ({ href, variant, isQuiet, link, ...props }) => {
       className={classNames('spectrum-Button', `spectrum-Button--${variant}`, {
         'spectrum-Button--quiet': isQuiet
       })}
-      to={fixPathPrefix(href)}
+      to={href}
       {...props}
     />
   );

packages/gatsby-theme-parliament/src/components/AnchorLink/index.js

@@ -11,26 +11,20 @@
  */
 
 import React from 'react';
-import { Link as GatsbyLink } from 'gatsby';
-import { getExternalLinkProps, isExternalLink, fixPathPrefix } from '../../utils';
+import { GatsbyLink } from '../GatsbyLink';
+import { getExternalLinkProps, isExternalLink } from '../../utils';
 import { Link } from '@adobe/react-spectrum';
 import PropTypes from 'prop-types';
 
-const AnchorLink = ({ href, ...props }) => {
-  if (isExternalLink(href)) {
-    return (
-      <Link isQuiet={true}>
-        <a href={href} {...getExternalLinkProps(href)} {...props} />
-      </Link>
-    );
-  }
-
-  return (
-    <Link isQuiet={true}>
-      <GatsbyLink to={fixPathPrefix(href)} {...props} />
-    </Link>
-  );
-};
+const AnchorLink = ({ href, ...props }) => (
+  <Link isQuiet={true}>
+    {isExternalLink(href) ? (
+      <a href={href} {...getExternalLinkProps(href)} {...props} />
+    ) : (
+      <GatsbyLink to={href} {...props} />
+    )}
+  </Link>
+);
 
 AnchorLink.propTypes = {
   href: PropTypes.string

packages/gatsby-theme-parliament/src/components/GatsbyLink/index.js

@@ -0,0 +1,34 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import React, { forwardRef, useContext } from 'react';
+import { Link, withPrefix } from 'gatsby';
+import { isInternalLink } from '../../utils';
+import PropTypes from 'prop-types';
+import Context from '../Context';
+
+const GatsbyLink = forwardRef(({ to, ...props }, ref) => {
+  const { location, allSitePage } = useContext(Context);
+  const pages = allSitePage.nodes.map((page) => withPrefix(page.path));
+
+  if (isInternalLink(to, location, pages)) {
+    return <Link to={to} ref={ref} {...props} />;
+  }
+
+  return <a href={to} ref={ref} {...props} />;
+});
+
+GatsbyLink.propTypes = {
+  to: PropTypes.string
+};
+
+export { GatsbyLink };

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, setPathPrefix } from '../../utils';
+import { rootFix, rootFixPages, findSelectedPages, findSubPages, LARGE_SCREEN_WIDTH } 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';
@@ -81,7 +81,6 @@ export default ({ children, pageContext, location }) => {
           }
         }
         site {
-          pathPrefix
           siteMetadata {
             globalNav {
               home {
@@ -183,7 +182,7 @@ export default ({ children, pageContext, location }) => {
   );
 
   const { allMdx, allSitePage, site, allGithub, allGithubContributors, ParliamentSearchIndex } = data;
-  const { siteMetadata, pathPrefix } = site;
+  const { siteMetadata } = site;
   const { globalNav, versions, pages, subPages, docs } = siteMetadata;
 
   const [showSideNav, setShowSideNav] = useState(false);
@@ -204,8 +203,6 @@ export default ({ children, pageContext, location }) => {
     }
   }
 
-  setPathPrefix(pathPrefix);
-
   return (
     <Provider
       value={{

packages/gatsby-theme-parliament/src/utils/index.js

@@ -14,12 +14,6 @@ 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}/`;
@@ -28,17 +22,6 @@ 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_/');
@@ -189,6 +172,19 @@ export const findSelectedPageSiblings = (pathname, pages) => {
   return siblings;
 };
 
+export const isInternalLink = (pathname, location, pages) => {
+  if (!pathname) {
+    return false;
+  }
+
+  const base = 'https://example.com';
+  const href = new URL(encodeURI(location.pathname), base);
+
+  pathname = trailingSlashFix(new URL(pathname, href).pathname);
+
+  return pages.some((path) => path === pathname);
+};
+
 export const isExternalLink = (url) => {
   url = String(url).replace('#', '');