website: fix usages of img tag (#12696)

website/.gitignore

@@ -6,3 +6,5 @@ out
 
 # As per Next.js conventions (https://nextjs.org/docs/basic-features/environment-variables#default-environment-variables)
 .env*.local
+
+website-preview

website/Makefile

@@ -1,54 +1,38 @@
+.DEFAULT_GOAL := website
+
+PWD=$$(pwd)
+DOCKER_IMAGE="hashicorp/dev-portal"
+DOCKER_IMAGE_LOCAL="dev-portal-local"
+DOCKER_RUN_FLAGS=-it \
+		--publish "3000:3000" \
+		--rm \
+		--tty \
+		--volume "$(PWD)/content:/app/content" \
+		--volume "$(PWD)/public:/app/public" \
+		--volume "$(PWD)/data:/app/data" \
+		--volume "$(PWD)/redirects.js:/app/redirects.js" \
+		--volume "next-dir:/app/website-preview/.next" \
+		--volume "$(PWD)/.env:/app/.env" \
+		-e "REPO=consul"
+
 # Default: run this if working on the website locally to run in watch mode.
+.PHONY: website
 website:
 	@echo "==> Downloading latest Docker image..."
-	@docker pull hashicorp/consul-website
+	@docker pull $(DOCKER_IMAGE)
-	@echo "==> Starting website in Docker..."
+	@echo "==> Starting website..."
-	@docker run \
+	@docker run $(DOCKER_RUN_FLAGS) $(DOCKER_IMAGE)
-		--interactive \
-		--rm \
-		--tty \
-		--workdir "/website" \
-		--volume "$(shell pwd):/website" \
-		--volume "/website/node_modules" \
-		--publish "3000:3000" \
-		hashicorp/consul-website \
-		npm start
 
-# This command will generate a static version of the website to the "out" folder.
+# Use this if you have run `website/build-local` to use the locally built image.
-build:
+.PHONY: website/local
-	@echo "==> Downloading latest Docker image..."
+website/local:
-	@docker pull hashicorp/consul-website
+	@echo "==> Starting website from local image..."
-	@echo "==> Starting build in Docker..."
+	@docker run $(DOCKER_RUN_FLAGS) $(DOCKER_IMAGE_LOCAL)
-	@docker run \
-		--interactive \
-		--rm \
-		--tty \
-		--workdir "/website" \
-		--volume "$(shell pwd):/website" \
-		--volume "/website/node_modules" \
-		hashicorp/consul-website \
-		npm run static
 
-# If you are changing node dependencies locally, run this to generate a new
+# Run this to generate a new local Docker image.
-# local Docker image with the dependency changes included.
+.PHONY: website/build-local
-build-image:
+website/build-local:
-	@echo "==> Building Docker image..."
+	@echo "==> Building local Docker image"
-	@docker build --tag hashicorp-consul-website-local .
+	@docker build https://github.com/hashicorp/dev-portal.git\#main \
+		-t $(DOCKER_IMAGE_LOCAL)
 
-# Use this if you have run `build-image` to use the locally built image
-# rather than our CI-generated image to test dependency changes.
-website-local:
-	@echo "==> Starting website in Docker..."
-	@docker run \
-		--interactive \
-		--rm \
-		--tty \
-		--workdir "/website" \
-		--volume "$(shell pwd):/website" \
-		--volume "/website/node_modules" \
-		--publish "3000:3000" \
-		hashicorp-consul-website-local \
-		npm start
-
-.DEFAULT_GOAL := website
-.PHONY: build build-image website website-local

website/README.md

@@ -58,7 +58,7 @@ The website can be run locally through node.js or [Docker](https://www.docker.co
 
 Running the site locally is simple. Provided you have Docker installed, clone this repo, run `make`, and then visit `http://localhost:3000`.
 
-The docker image is pre-built with all the website dependencies installed, which is what makes it so quick and simple, but also means if you need to change dependencies and test the changes within Docker, you'll need a new image. If this is something you need to do, you can run `make build-image` to generate a local Docker image with updated dependencies, then `make website-local` to use that image and preview.
+The docker image is pre-built with all the website dependencies installed, which is what makes it so quick and simple, but also means if you need to change dependencies and test the changes within Docker, you'll need a new image. If this is something you need to do, you can run `make website/build-local` to generate a local Docker image with updated dependencies, then `make website/local` to use that image and preview.
 
 ### With Node
 

website/content/docs/ecs/architecture.mdx

@@ -32,7 +32,11 @@ For more information about how Consul works in general, see Consul's [Architectu
 
 This diagram shows the timeline of a task starting up and all its containers:
 
-<img alt="Task Startup Timeline" src="/img/ecs-task-startup.svg" style={{display: "block", maxWidth: "400px"}} />
+<ImageConfig width={400}>
+
+![Task Startup Timeline](/img/ecs-task-startup.svg)
+
+</ImageConfig>
 
 - **T0:** ECS starts the task. The `consul-client` and `mesh-init` containers start:
   - `consul-client` uses the `retry-join` option to join the Consul cluster
@@ -49,7 +53,11 @@ This diagram shows the timeline of a task starting up and all its containers:
 
 This diagram shows an example timeline of a task shutting down:
 
-<img alt="Task Shutdown Timeline" src="/img/ecs-task-shutdown.svg" style={{display: "block", maxWidth: "400px"}} />
+<ImageConfig width={400}>
+
+![Task Shutdown Timeline](/img/ecs-task-shutdown.svg)
+
+</ImageConfig>
 
 - **T0**: ECS sends a TERM signal to all containers. Each container reacts to the TERM signal:
   - `consul-client` begins to gracefully leave the Consul cluster.

website/content/docs/integrate/partnerships.mdx

@@ -20,7 +20,11 @@ By leveraging Consul’s RESTful HTTP API system, prospective partners are able
 
 **The Consul ecosystem of integrations:**
 
-<img src="/img/consul_ecosystem_diagram2.png" alt="Consul Architecture" style={{display:'block', margin:'auto', width:'624px'}}/>
+<ImageConfig width={624}>
+
+![Consul Architecture](/img/consul_ecosystem_diagram2.png)
+
+</ImageConfig>
 
 **Data Plane**: These integrations extend Consul’s certificate management, secure ACL configuration, observability metrics and logging, and service discovery that allows for dynamic service mapping APM and logging tools, extend sidecar proxies to support Consul connect, and extend API gateways to allow Consul to route incoming traffic to the proxies for Connect-enabled services.
 
@@ -36,7 +40,18 @@ By leveraging Consul’s RESTful HTTP API system, prospective partners are able
 
 **Consul integration verification badges**: Partners will be issued the Consul Enterprise badge for integrations that work with [Consul Enterprise features](https://www.consul.io/docs/enterprise) such as namespaces. Partners will be issued the HCP Consul badge for integrations validated to work with [HCP Consul](https://cloud.hashicorp.com/docs/consul/features). Each badge would be displayed on HashiCorp’s partner page as well as be available for posting on the partner’s own website to provide better visibility and differentiation of the integration for joint customers.
 
-<span style={{display:'block', textAlign:'center'}}><img src="/img/consul_enterprise_partner_badge.png" style={{width:'192px', height:'192px'}}/><img src="/img/HCPc_badge.png" style={{width:'192px', height:'192px'}}/></span>
+<span style={{display:'block', textAlign:'center'}}>
+<ImageConfig inline height={192} width={192}>
+
+![Consul Enterprise Badge](/img/consul_enterprise_partner_badge.png)
+
+</ImageConfig>
+<ImageConfig inline height={192} width={192}>
+
+![HCP Consul](/img/HCPc_badge.png)
+
+</ImageConfig>
+</span>
 
 Developing a valid integration with either Consul Enterprise or HCP Consul also qualifies the partner for the Premier tier of the HashiCorp Technology Partners program. The process for verification of these integrations is detailed below.
 
@@ -44,7 +59,11 @@ Developing a valid integration with either Consul Enterprise or HCP Consul also
 
 The Consul integration development process is described in the steps below. By following these steps, Consul integrations can be developed alongside HashiCorp to ensure new integrations are reviewed, approved and released as quickly as possible.
 
-<img src="/img/consul_integration_program_steps.png" alt="Integration Program Steps" style={{display:'block', margin:'auto', width:'624px'}}/>
+<ImageConfig width={624}>
+
+![Integration Program Steps](/img/consul_integration_program_steps.png)
+
+</ImageConfig>
 
 1.  Engage: Initial contact between vendor and HashiCorp
 2.  Enable: Documentation, code samples and best practices for developing the integration
@@ -168,4 +187,4 @@ Below is a checklist of steps that should be followed during the Consul integrat
 
 ## Contact Us
 
-For any questions or feedback, please contact us at: [technologypartners@hashicorp.com](mailto:technologypartners@hashicorp.com)
+For any questions or feedback, please contact us at: [technologypartners@hashicorp.com](mailto:technologypartners@hashicorp.com)

website/next.config.js

@@ -1,5 +1,5 @@
 const withHashicorp = require('@hashicorp/platform-nextjs-plugin')
-const redirects = require('./redirects.next')
+const redirects = require('./redirects')
 
 module.exports = withHashicorp({
   dato: {

website/package.json

@@ -72,14 +72,14 @@
   },
   "main": "index.js",
   "scripts": {
-    "build": "node --max-old-space-size=4096 ./node_modules/.bin/next build",
+    "build": "./scripts/website-build.sh",
     "dynamic": "NODE_ENV=production next build && next start",
     "export": "node --max-old-space-size=4096 ./node_modules/.bin/next export",
     "format": "next-hashicorp format",
     "generate:component": "next-hashicorp generate component",
     "generate:readme": "next-hashicorp markdown-blocks README.md",
     "lint": "next-hashicorp lint",
-    "start": "next-remote-watch './content/**/*.mdx'",
+    "start": "./scripts/website-start.sh",
     "static": "npm run build && npm run export && cp _redirects out/.",
     "linkcheck": "linkcheck https://consul.io"
   },

website/scripts/website-build.sh

@@ -0,0 +1,31 @@
+# Repo which we are cloning and executing npm run build:deploy-preview within
+REPO_TO_CLONE=dev-portal
+# Set the subdirectory name for the base project
+PREVIEW_DIR=website-preview
+# The directory we want to clone the project into
+CLONE_DIR=website-preview
+# The product for which we are building the deploy preview
+PRODUCT=consul
+
+from_cache=false
+
+if [ -d "$PREVIEW_DIR" ]; then
+  echo "$PREVIEW_DIR found"
+  CLONE_DIR="$PREVIEW_DIR-tmp"
+  from_cache=true
+fi
+
+# Clone the base project, if needed
+echo "⏳ Cloning the $REPO_TO_CLONE repo, this might take a while..."
+git clone --depth=1 "https://github.com/hashicorp/$REPO_TO_CLONE.git" "$CLONE_DIR"
+
+if [ "$from_cache" = true ]; then
+  echo "Setting up $PREVIEW_DIR"
+  cp -R "./$CLONE_DIR/." "./$PREVIEW_DIR"
+fi
+
+# cd into the preview directory project
+cd "$PREVIEW_DIR"
+
+# Run the build:deploy-preview start script
+REPO=$PRODUCT DEV_IO=$PRODUCT IS_CONTENT_PREVIEW=true HASHI_ENV=project-preview npm run build:deploy-preview

website/scripts/website-start.sh

@@ -0,0 +1,25 @@
+# Repo which we are cloning and executing npm run build:deploy-preview within
+REPO_TO_CLONE=dev-portal
+# Set the subdirectory name for the dev-portal app
+PREVIEW_DIR=website-preview
+# The product for which we are building the deploy preview
+PRODUCT=consul
+
+should_pull=true
+
+# Clone the dev-portal project, if needed
+if [ ! -d "$PREVIEW_DIR" ]; then
+    echo "⏳ Cloning the $REPO_TO_CLONE repo, this might take a while..."
+    git clone --depth=1 https://github.com/hashicorp/$REPO_TO_CLONE.git "$PREVIEW_DIR"
+    should_pull=false
+fi
+
+cd "$PREVIEW_DIR"
+
+# If the directory already existed, pull to ensure the clone is fresh
+if [ "$should_pull" = true ]; then
+    git pull origin main
+fi
+
+# Run the dev-portal content-repo start script
+REPO=$PRODUCT PREVIEW_DIR="$PREVIEW_DIR" npm run start:local-preview