WE-410: relative image links breaking on initial load (#649)

* Fixes the image error, adds some tests and fixes a unique key error I was getting sometimes.

* Updates the example media path.

* Removes an old attempt at fixing the problem.

Author: EvanYoung-SP

components/markdown/image.tsx

@@ -6,7 +6,9 @@ import { Box } from '@sparkpost/matchbox';
 const getImageSrc = (asPath: string, src?: string) => {
   const environment = getWindow();
   const parts = asPath.split('/');
-  const dir = parts.splice(0, parts.length - 1).join('/');
+  const dirArr = parts.splice(0, parts.length - 1);
+  dirArr.pop();
+  const dir = dirArr.join('/');
   const path = `${environment?.location.origin || 'https://localhost:3000'}/content${dir}/${src}`;
   return path;
 };

components/site/docsIndexListPageContent.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import Link from 'next/link';
 import { Box, Tag, Button } from '@sparkpost/matchbox';
 import { KeyboardArrowDown } from '@sparkpost/matchbox-icons';
@@ -16,9 +16,9 @@ const DocsIndexListPageContent = (props: DocsIndexListPageContentProps) => {
   return (
     <>
       {navigationData && navigationData.items ? (
-        navigationData.items.slice(0, paginationCount).map((item) => {
+        navigationData.items.slice(0, paginationCount).map((item, i) => {
           return (
-            <>
+            <React.Fragment key={`navDataItem${i}`}>
               <Box px="500" py="650">
                 <Box as="h3">{item.title}</Box>
                 {item.lastUpdated && (
@@ -40,7 +40,7 @@ const DocsIndexListPageContent = (props: DocsIndexListPageContentProps) => {
                 </Box>
               </Box>
               <hr />
-            </>
+            </React.Fragment>
           );
         })
       ) : (

cypress/content/docs/billing/upgrading-your-account.md

@@ -0,0 +1,15 @@
+---
+lastUpdated: '02/08/2020'
+title: 'Testing Images'
+description: 'This is to test images.'
+---
+
+In order to have a working test, you have to maintain the same directory path of the image or else the image build process won't work.
+
+Testing Image 1 without ./
+
+![Billing plan selection without ./](media/upgrading-your-account/billing-page.png)
+
+Testing Image 2 with ./
+
+![Plan upgrade form with ./](./media/upgrading-your-account/upgrade-page.png)

cypress/content/momentum/1st-level/test.md

@@ -58,9 +58,11 @@ You can link to external resources using this format: `[text here](link here)`.
 
 ### Images
 
-Here's an image (put those in the `media` folder for the category in the root `public/content/` directory). For this example, the image path would be in `public/content/example/media/example.png`. This is because next.js requires that images be contained in `public/`:
+Here's an example of how an image should be written (put those in the `media` folder for the category in the root `public/content/` directory). For this example, the image path would be in `public/content/momentum/media/test/testing-image.png`. This is because next.js requires that images be contained in `public/`. Creating the link can contain `./` or just `media/`:
 
-![Alternative text here](example/media/example.png)
+![Without ./](media/test/testing-image.png)
+
+![With ./](./media/test/testing-image.png)
 
 ### Code
 

cypress/integration/subpage.spec.ts

@@ -5,7 +5,7 @@ describe('Sub section page', () => {
     });
   });
 
-  describe('test page in subsection', () => {
+  describe('test page in sub section', () => {
     it('Should display without error', () => {
       cy.visit('/momentum/1st-level/test');
     });
@@ -36,3 +36,23 @@ describe('Sub section page', () => {
     });
   });
 });
+
+describe('images', () => {
+  it('Should display without error without ./', () => {
+    cy.visit('/docs/billing/upgrading-your-account/');
+    cy.get('[alt="Billing plan selection without ./"]').should(($img) => {
+      const img = $img.get(0) as HTMLImageElement;
+      const width = img.naturalWidth;
+      expect(width).to.be.greaterThan(0);
+    });
+  });
+
+  it('Should display without error with ./', () => {
+    cy.visit('/docs/billing/upgrading-your-account/');
+    cy.get('[alt="Plan upgrade form with ./"]').should(($img) => {
+      const img = $img.get(0) as HTMLImageElement;
+      const width = img.naturalWidth;
+      expect(width).to.be.greaterThan(0);
+    });
+  });
+});

example/article.md

@@ -50,14 +50,19 @@ This is an ordered list:
 
 You can link to external resources using this format: `[text here](link here)`. For example:
 
+- [Duck, duck, GO! (quick check)](https://duckduckgo.com/)
 - [SparkPost website](https://www.sparkpost.com)
 - [SparkPost API docs](https://developers.sparkpost.com/api)
+- [Relative to current directory Link](./relative-link-test)
+- [Internal Link](/momentum/1st-level)
 
 ### Images
 
-Here's an image (put those in the `media` folder for the category):
+Here's an example of how an image should be written (put those in the `media` folder for the category in the root `public/content/` directory). For this example, the image path would be in `public/content/momentum/media/test/testing-image.png`. This is because next.js requires that images be contained in `public/`. Creating the link can contain `./` or just `media/`:
 
-![Alternative text here](example/media/example.png)
+![Without ./](media/test/testing-image.png)
+
+![With ./](./media/test/testing-image.png)
 
 ### Code
 

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "predev": "npm run build:images",
     "prebuild": "npm run build:images",
+    "prebuild:test": "npm run build:images",
     "dev": "next dev",
     "build": "next build",
     "build:ssr": "next build && next export",

utils/string.ts

@@ -1,3 +1,5 @@
+import { NextRouter } from 'next/router';
+
 /**
  * Slugifies a string
  */