FE-1816 - Fixing getting-started-sparkpost links/media (#682)

* FE-1816 - Fix images loading and 2 of the # links in the top nav of the subpage

Author: nstanard

.gitignore

@@ -44,3 +44,9 @@ public/content
 
 # Netlify
 /.netlify/
+
+# Cypress
+cypress/screenshots
+
+# nodenv - use 16.12.0
+.node-version

README.md

@@ -151,6 +151,10 @@ The following instructions walk you through how to sync your local version of th
 
 _**This is not a required step in contributing to the documentation**_
 
+### Node Version
+
+16.12.0
+
 ### Installation
 
 Navigate in your terminal to the root directory (`support-docs/` or whatever you named it) and install all dependencies:
@@ -169,6 +173,14 @@ npm run dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
+### Local Cypress Tests
+
+After setting your local node version, installing deps, and running `npm run start`:
+
+```bash
+npm run test
+```
+
 ### Learn More About Next.js
 
 To learn more about Next.js, take a look at the following resources:

components/markdown/image.tsx

@@ -5,7 +5,8 @@ import { Box } from '@sparkpost/matchbox';
 
 const getImageSrc = (asPath: string, src?: string) => {
   const environment = getWindow();
-  const pathArr = asPath.split('/');
+  // replace any trailing #page-link info from the end first, then split
+  const pathArr = asPath.replace(/#.*$/g, '').split('/');
 
   // Check for 'trailing slash'
   if (!pathArr[pathArr.length - 1]) {

content/docs/getting-started/getting-started-sparkpost.md

@@ -14,9 +14,9 @@ Note: SparkPost is available in multiple regions. "SparkPost" refers to the Spar
 * [Preparing Your "From:" Address](#preparing-your-from-address)
 * [Important: Coming From Other Email Services](#important-coming-from-other-email-services)
 * [Sending Email](#sending-email)
-* [Tracking Recipient Behavior](#tracking-recipient-behavior)
+* [Tracking Recipient Behavior](#tracking-analytics)
 * [Improving Reputation And Branding](#improving-reputation-and-branding)
-* [Signals Analytics and Tracking](#signals-analytics-and-tracking)
+* [Signals Analytics and Tracking](#signals-analytics)
 * [Where To Next?](#where-to-next)
 * [How To Get Help](#how-to-get-help)
 

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

@@ -6,6 +6,8 @@ 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
+
 Testing Image 1 without ./
 
 ![Billing plan selection without ./](media/upgrading-your-account/billing-page.png)

cypress/integration/subpage.spec.ts

@@ -47,9 +47,18 @@ describe('images', () => {
     });
   });
 
-  it('Should display without error with ./', () => {
+  it('Should load urls with trailing / and build image paths correctly', () => {
     cy.visit('/docs/billing/upgrading-your-account/');
-    cy.get('[alt="Plan upgrade form with ./"]').should(($img) => {
+    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 load urls with # links and build image paths correctly', () => {
+    cy.visit('/docs/billing/upgrading-your-account/#testing-image');
+    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);