From 23200990db0dda2863cc7ac517791ae75b610ea5 Mon Sep 17 00:00:00 2001 From: Bryce Kalow Date: Tue, 5 Apr 2022 11:18:57 -0500 Subject: [PATCH] website: fix usages of img tag (#12696) --- website/.gitignore | 2 + website/Makefile | 80 ++++++++----------- website/README.md | 2 +- website/content/docs/ecs/architecture.mdx | 12 ++- .../content/docs/integrate/partnerships.mdx | 27 ++++++- website/next.config.js | 2 +- website/package.json | 4 +- website/{redirects.next.js => redirects.js} | 0 website/scripts/website-build.sh | 31 +++++++ website/scripts/website-start.sh | 25 ++++++ 10 files changed, 127 insertions(+), 58 deletions(-) rename website/{redirects.next.js => redirects.js} (100%) create mode 100755 website/scripts/website-build.sh create mode 100755 website/scripts/website-start.sh diff --git a/website/.gitignore b/website/.gitignore index 507cbf4e5..7d809dab7 100644 --- a/website/.gitignore +++ b/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 diff --git a/website/Makefile b/website/Makefile index 7267737fa..485e1b884 100644 --- a/website/Makefile +++ b/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 - @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 \ - npm start + @docker pull $(DOCKER_IMAGE) + @echo "==> Starting website..." + @docker run $(DOCKER_RUN_FLAGS) $(DOCKER_IMAGE) -# This command will generate a static version of the website to the "out" folder. -build: - @echo "==> Downloading latest Docker image..." - @docker pull hashicorp/consul-website - @echo "==> Starting build in Docker..." - @docker run \ - --interactive \ - --rm \ - --tty \ - --workdir "/website" \ - --volume "$(shell pwd):/website" \ - --volume "/website/node_modules" \ - hashicorp/consul-website \ - npm run static +# Use this if you have run `website/build-local` to use the locally built image. +.PHONY: website/local +website/local: + @echo "==> Starting website from local image..." + @docker run $(DOCKER_RUN_FLAGS) $(DOCKER_IMAGE_LOCAL) -# If you are changing node dependencies locally, run this to generate a new -# local Docker image with the dependency changes included. -build-image: - @echo "==> Building Docker image..." - @docker build --tag hashicorp-consul-website-local . +# Run this to generate a new local Docker image. +.PHONY: website/build-local +website/build-local: + @echo "==> Building local Docker image" + @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 diff --git a/website/README.md b/website/README.md index 545bbd3f8..7428737ca 100644 --- a/website/README.md +++ b/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 diff --git a/website/content/docs/ecs/architecture.mdx b/website/content/docs/ecs/architecture.mdx index 766402fcc..03d8bf7bc 100644 --- a/website/content/docs/ecs/architecture.mdx +++ b/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: -Task Startup Timeline + + +![Task Startup Timeline](/img/ecs-task-startup.svg) + + - **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: -Task Shutdown Timeline + + +![Task Shutdown Timeline](/img/ecs-task-shutdown.svg) + + - **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. diff --git a/website/content/docs/integrate/partnerships.mdx b/website/content/docs/integrate/partnerships.mdx index b4bd3c10c..e7c5bb222 100644 --- a/website/content/docs/integrate/partnerships.mdx +++ b/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:** -Consul Architecture + + +![Consul Architecture](/img/consul_ecosystem_diagram2.png) + + **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. - + + + +![Consul Enterprise Badge](/img/consul_enterprise_partner_badge.png) + + + + +![HCP Consul](/img/HCPc_badge.png) + + + 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. -Integration Program Steps + + +![Integration Program Steps](/img/consul_integration_program_steps.png) + + 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) \ No newline at end of file +For any questions or feedback, please contact us at: [technologypartners@hashicorp.com](mailto:technologypartners@hashicorp.com) diff --git a/website/next.config.js b/website/next.config.js index f90501d0d..b46f9830b 100644 --- a/website/next.config.js +++ b/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: { diff --git a/website/package.json b/website/package.json index e4235d9cb..e8067cee0 100644 --- a/website/package.json +++ b/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" }, diff --git a/website/redirects.next.js b/website/redirects.js similarity index 100% rename from website/redirects.next.js rename to website/redirects.js diff --git a/website/scripts/website-build.sh b/website/scripts/website-build.sh new file mode 100755 index 000000000..1c3e5bd77 --- /dev/null +++ b/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 diff --git a/website/scripts/website-start.sh b/website/scripts/website-start.sh new file mode 100755 index 000000000..0f2a5212b --- /dev/null +++ b/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