feat: consolidate page prefixing under docs, integrate YAML page cont…

…ent into nav data structure

.circleci/config.yml

@@ -1,7 +1,7 @@
 version: 2.1
 
 orbs:
-  node: circleci/node@5.2.0
+  node: circleci/node@5.3.0
 
 parameters:
   content-update:
@@ -111,12 +111,6 @@ jobs:
                 printf '.'
                 sleep 1
             done
-      - run:
-          name: Test nginx /docs rewriting
-          command: |
-            ./bin/assert-success.sh /docs
-            ./bin/assert-redirect.sh /docs/ https://localhost/docs
-            ./bin/assert-success.sh /docs/channels
       - run:
           name: Smoke test trailing slash redirects
           command: |

config/nginx.conf.erb

@@ -89,10 +89,6 @@ http {
       rewrite ^ $redirected_url permanent;
     }
 
-    # Strip /docs from the requests (we build with --prefix-paths and our files are in public/)
-    rewrite ^/docs/(.*)$ /$1 last;
-    rewrite ^/docs$ / last;
-
     location ~* \.json$ {
       more_set_headers 'Access-Control-Allow-Origin: *';
     }

data/createPages/index.js

@@ -17,15 +17,6 @@ const writeRedirect = writeRedirectToConfigFile('config/nginx-redirects.conf');
 const documentTemplate = path.resolve(`src/templates/document.tsx`);
 const apiReferenceTemplate = path.resolve(`src/templates/apiReference.tsx`);
 
-const siteUrl = new URL(siteMetadata.siteUrl);
-
-// Check if path is absolute and add pathPrefix in front if it's not
-const maybeAddPathPrefix = (path, pathPrefix) => {
-  const parsed = new URL(path, siteUrl.toString());
-  const isRelativeProtocol = path.startsWith(`//`);
-  return `${parsed.host != siteUrl.host || isRelativeProtocol ? `` : pathPrefix}${path}`;
-};
-
 const createPages = async ({ graphql, actions: { createPage, createRedirect } }) => {
   /**
    * It's not ideal to have:
@@ -119,7 +110,7 @@ const createPages = async ({ graphql, actions: { createPage, createRedirect } })
 
     const script = safeFileExists(`static/scripts/${edge.node.slug}.js`);
 
-    const pagePath = `/${edge.node.slug}`;
+    const pagePath = `${pathPrefix}/${edge.node.slug}`;
 
     const redirectFromList = edge.node.meta?.redirect_from;
 
@@ -130,7 +121,7 @@ const createPages = async ({ graphql, actions: { createPage, createRedirect } })
         if (!redirectFromUrl.hash) {
           // We need to be prefix aware just like Gatsby's internals so it works
           // with nginx redirects
-          writeRedirect(maybeAddPathPrefix(redirectFrom, pathPrefix), maybeAddPathPrefix(pagePath, pathPrefix));
+          writeRedirect(redirectFrom, pagePath);
         }
 
         createRedirect({
@@ -160,6 +151,13 @@ const createPages = async ({ graphql, actions: { createPage, createRedirect } })
     return slug;
   };
 
+  createRedirect({
+    fromPath: '/',
+    toPath: pathPrefix,
+    isPermanent: true,
+    redirectInBrowser: true,
+  });
+
   await Promise.all([
     ...documentResult.data.allFileHtml.edges.map(documentCreator(documentTemplate)),
     ...apiReferenceResult.data.allFileHtml.edges.map(documentCreator(apiReferenceTemplate)),

data/onCreateNode/create-graphql-schema-customization.ts

@@ -42,28 +42,6 @@ export const createSchemaCustomization: GatsbyNode['createSchemaCustomization']
   `;
   createTypes(typeDefs);
 
-  // Schema update for page-content YAML files
-  const pageContentTypes = `
-    type PageContentYamlSectionsCallToAction implements Node {
-      text: String!
-      href: String!
-      external: Boolean
-      type: String!
-    }
-    type PageContentYamlSectionsCardsLinks implements Node {
-      text: String!
-      href: String!
-      external: Boolean
-    }
-    type PageContentYamlSectionsCardsCallToAction implements Node {
-      text: String!
-      href: String!
-      external: Boolean
-      type: String!
-    }
-  `;
-  createTypes(pageContentTypes);
-
   // Schema update for site
   const siteTypes = `
     # We always want an assetPrefix

gatsby-config.ts

@@ -78,14 +78,6 @@ export const plugins = [
     },
     __key: 'textile-nanoc-compatible',
   },
-  {
-    resolve: 'gatsby-source-filesystem',
-    options: {
-      name: 'yaml-page-content',
-      path: './data/yaml/page-content',
-    },
-    __key: 'yaml-page-content',
-  },
   {
     resolve: 'gatsby-source-filesystem',
     options: {

jest.config.js

@@ -17,10 +17,6 @@ module.exports = {
   transformIgnorePatterns: [
     `node_modules/(?!(gatsby|gatsby-script|use-keyboard-shortcut|react-medium-image-zoom|@react-hook/media-query|@mdx-js/react|@ably/ui/core)/)`,
   ],
-  globals: {
-    __PATH_PREFIX__: '/docs',
-    __BASE_PATH__: '/docs',
-  },
   testEnvironmentOptions: {
     url: `http://localhost`,
     customExportConditions: [''],

package.json

@@ -21,12 +21,12 @@
     "start": "yarn clean && yarn develop",
     "edit": "unset EDITOR_WARNINGS_OFF && export ENABLE_GATSBY_REFRESH_ENDPOINT='true' && gatsby clean && gatsby develop",
     "refresh": "curl -X POST http://localhost:8000/__refresh",
-    "build": "yarn clean && gatsby build --prefix-paths",
+    "build": "yarn clean && gatsby build",
     "build:cli": "tsc -p .",
     "debug:textile": "yarn build:cli && node ./dist/read-textile.js",
-    "serve": "gatsby serve --prefix-paths",
+    "serve": "gatsby serve",
     "clean": "gatsby clean",
-    "rebuild": "gatsby clean && gatsby build --prefix-paths && gatsby serve --prefix-paths",
+    "rebuild": "gatsby clean && gatsby build && gatsby serve",
     "test": "jest -u",
     "test:watch": "jest --watch",
     "test:ETL": "jest --testPathPattern=\"$PWD/data/*\"",

src/components/Homepage/BodySection/BodySection.tsx

@@ -1,49 +1,37 @@
 import cn from '@ably/ui/core/utils/cn';
-import { withPrefix } from 'gatsby';
 import { ImageProps, getImageFromList } from 'src/components/Image';
-import { SectionProps } from '../HomepageContent';
 import { BodySectionDescription } from './BodySectionDescription';
 import { HeroCard } from './Card/HeroCard';
 import { FeatureCard } from './Card/FeatureCard';
 import { SdkCard } from './Card/SdkCard';
 import FeatureLink from '@ably/ui/core/FeaturedLink';
-import { checkLinkIsInternal, normalizeLegacyDocsLink } from 'src/utilities/link-checks';
+import { ContentSection } from 'src/data/content/types';
 
-const cardTypes = {
-  hero: HeroCard,
-  feature: FeatureCard,
-  sdk: SdkCard,
-};
-
-const gridColVariants = {
+const gridColVariants: Record<number, string> = {
   1: 'lg:grid-cols-1',
   2: 'sm:grid-cols-2 lg:grid-cols-2',
   4: 'sm:grid-cols-4 lg:grid-cols-4',
 };
 
-const sectionBottomMarginVariants = {
+const sectionBottomMarginVariants: Record<number, string> = {
   48: 'mb-48',
   72: 'mb-72',
   80: 'mb-80',
   160: 'mb-160',
 };
 
-const gridGapVariants = {
+const gridGapVariants: Record<number, string> = {
   1: '',
   2: 'gap-32',
   4: 'gap-24',
 };
 
-export const BodySection = ({ section, images }: { section: SectionProps; images: ImageProps[] }) => {
+export const BodySection = ({ section, images }: { section: ContentSection; images: ImageProps[] }) => {
   const cards = section.cards ?? [];
   const cardsExist = cards.length > 0;
   const columns = section.columns;
   const singleColumn = columns == 1;
-  const bottomMargin = sectionBottomMarginVariants[section.bottomMargin];
-
-  if (section.callToAction && checkLinkIsInternal(section.callToAction.href)) {
-    section.callToAction.href = withPrefix(normalizeLegacyDocsLink(section.callToAction.href));
-  }
+  const bottomMargin = sectionBottomMarginVariants[section.bottomMargin ?? 48] ?? sectionBottomMarginVariants[48];
 
   return (
     <section className={bottomMargin}>
@@ -52,18 +40,20 @@ export const BodySection = ({ section, images }: { section: SectionProps; images
       {cardsExist && (
         <div
           className={cn({
-            [`grid grid-cols-1 ${gridColVariants[columns]} ${gridGapVariants[columns]}`]: !singleColumn,
+            [`grid grid-cols-1 ${gridColVariants[columns ?? 1]} ${gridGapVariants[columns ?? 1]}`]: !singleColumn,
           })}
         >
           {cards.map((card, index) => {
-            const Card = cardTypes[card.type];
-            return (
-              <Card
-                key={index}
-                {...card}
-                {...(card.type !== 'hero' && { image: getImageFromList(images, card.image) })}
-              />
-            );
+            switch (card.type) {
+              case 'hero':
+                return <HeroCard key={index} {...card} />;
+              case 'feature':
+                return <FeatureCard key={index} {...card} image={getImageFromList(images, card.image)} />;
+              case 'sdk':
+                return <SdkCard key={index} {...card} image={getImageFromList(images, card.image)} />;
+              default:
+                return null;
+            }
           })}
         </div>
       )}

src/components/Homepage/BodySection/Card/FeatureCard.tsx

@@ -1,9 +1,9 @@
-import { CardProps } from '../../HomepageContent';
 import { Links } from './Links';
 import { Image } from '../../../Image';
 import { navigate } from '../../../Link';
+import { ContentCardWithImage } from './types';
 
-export const FeatureCard = ({ title, content, image, links }: CardProps) => (
+export const FeatureCard = ({ title, content, image, links }: ContentCardWithImage) => (
   <button
     onClick={() => navigate(links?.[0]?.href || '#')}
     className="flex justify-between flex-col w-full text-left hover:bg-neutral-50 transition-colors focus:outline-none"

src/components/Homepage/BodySection/Card/HeroCard.tsx

@@ -1,7 +1,7 @@
-import { CardProps } from '../../HomepageContent';
 import { SearchBar } from '../../../SearchBar';
+import { ContentCardWithoutImage } from './types';
 
-export const HeroCard = ({ title, content }: CardProps) => (
+export const HeroCard = ({ title, content }: ContentCardWithoutImage) => (
   <div className="flex flex-col items-center mt-88">
     <div className="text-center">
       <h1 className="ui-text-h1">{title}</h1>

src/components/Homepage/BodySection/Card/Links.tsx

@@ -1,23 +1,17 @@
 import Icon from '@ably/ui/core/Icon';
-import { LinkProps } from '../../HomepageContent';
 import Link from '../../../Link';
+import { ContentLink } from 'src/data/content/types';
 
-export const Links = ({ links }: { links?: LinkProps[] }) =>
+export const Links = ({ links }: { links?: ContentLink[] }) =>
   links ? (
     <>
       <div className="mt-auto">
         {links.length === 1 && (
           <div>
-            {links.map(({ href, external, text }, index) => {
+            {links.map(({ href, text }, index) => {
               return (
                 <div key={index + text} className="h-full flex items-center">
-                  <Link
-                    to={href}
-                    external={external}
-                    className="text-gui-default font-medium mr-4"
-                    target="_blank"
-                    rel="noopener"
-                  >
+                  <Link to={href} className="text-gui-default font-medium mr-4" target="_blank" rel="noopener">
                     {text}
                   </Link>
                   <Icon name="icon-gui-arrow-long-right-micro" size="1rem" />
@@ -28,16 +22,10 @@ export const Links = ({ links }: { links?: LinkProps[] }) =>
         )}
         {links.length > 1 && (
           <ul className="ui-unordered-list" style={{ marginLeft: '0.75rem', marginBottom: '0' }}>
-            {links.map(({ href, external, text }, index) => {
+            {links.map(({ href, text }, index) => {
               return (
                 <li key={index + text}>
-                  <Link
-                    to={href}
-                    external={external}
-                    className="text-gui-default"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
+                  <Link to={href} className="text-gui-default" target="_blank" rel="noopener noreferrer">
                     {text}
                   </Link>
                 </li>

src/components/Homepage/BodySection/Card/SdkCard.tsx

@@ -1,17 +1,17 @@
 import Icon from '@ably/ui/core/Icon';
-import { CardProps } from '../../HomepageContent';
 import Link from '../../../Link';
 import { Image } from '../../../Image';
+import { ContentCardWithImage } from './types';
 
-export const SdkCard = ({ title, content, image, callToAction }: CardProps) => (
+export const SdkCard = ({ title, content, image, callToAction }: ContentCardWithImage) => (
   <div className="border border-extra-light-grey rounded-lg bg-extra-light-grey flex flex-col sm:flex-row p-24 md:p-40">
     <div className="mr-40 flex flex-col">
       <h2 className="ui-text-h2 mb-16 font-extrabold">{title}</h2>
       <p className="ui-text-p1 mb-40 font-medium text-neutral-800">{content}</p>
 
       {callToAction ? (
         <div className="mt-auto mb-40 sm:mb-0">
-          <Link to={callToAction.href} external={callToAction.external} className="ui-button-primary">
+          <Link to={callToAction.href} className="ui-button-primary">
             {callToAction.text}
             <Icon
               name="icon-gui-arrow-long-right-outline"

src/components/Homepage/BodySection/Card/types.ts

@@ -0,0 +1,6 @@
+import { ImageProps } from 'src/components/Image';
+import { ContentCard } from 'src/data/content/types';
+
+export type ContentCardWithImage = Omit<ContentCard, 'image'> & { image?: ImageProps };
+
+export type ContentCardWithoutImage = Omit<ContentCard, 'image'>;

src/components/Homepage/HomepageContent.tsx

@@ -1,26 +1,16 @@
+import { ContentSection } from 'src/data/content/types';
 import { BodySection } from './BodySection/BodySection';
 import { ImageProps } from 'src/components/Image';
 
 export type CardProps = {
   title: string;
   content: string;
-  image: ImageProps;
+  image: string;
   type: 'hero' | 'feature' | 'sdk';
   links?: LinkProps[];
   callToAction?: CallToActionProps;
 };
 
-export type SectionProps = {
-  title: string;
-  type: string;
-  columns: 1 | 2 | 4;
-  mainImage: string;
-  bottomMargin: 48 | 72;
-  description: string | null;
-  callToAction: CallToActionProps;
-  cards: CardProps[];
-};
-
 export type LinkProps = {
   text: string;
   href: string;
@@ -34,7 +24,7 @@ export type CallToActionProps = {
   type: string;
 };
 
-export const HomepageContent = ({ sections, images }: { sections: SectionProps[]; images: ImageProps[] }) => (
+export const HomepageContent = ({ sections, images }: { sections: ContentSection[]; images: ImageProps[] }) => (
   <article className="mx-auto max-w-[960px]">
     {sections.map((section, index) => (
       <BodySection key={index} section={section} images={images} />

src/components/Layout/Breadcrumbs.test.tsx

@@ -47,7 +47,7 @@ describe('Breadcrumbs', () => {
 
   it('includes relevant links on the breadcrumb nodes', () => {
     render(<Breadcrumbs />);
-    expect(screen.getByText('Home')).toHaveAttribute('href', '/');
+    expect(screen.getByText('Home')).toHaveAttribute('href', '/docs');
     expect(screen.getByText('Section 1')).toHaveAttribute('href', '/section-1');
     expect(screen.queryByText('Subsection 1')).not.toBeInTheDocument();
     expect(screen.getByText('Current Page')).toHaveAttribute('href', '/section-1/subsection-1/page-1');

src/components/Layout/Breadcrumbs.tsx

@@ -22,7 +22,7 @@ const Breadcrumbs: React.FC = () => {
 
   return (
     <nav aria-label="breadcrumb" className="flex mt-32 items-center gap-4">
-      <Link to="/" className={cn(linkStyles, 'hidden sm:block')}>
+      <Link to="/docs" className={cn(linkStyles, 'hidden sm:block')}>
         Home
       </Link>
       <Icon