website: fix usages of img tag (#12696)

This commit is contained in:
Bryce Kalow 2022-04-05 11:18:57 -05:00 committed by GitHub
parent a49cbf50dd
commit 23200990db
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 127 additions and 58 deletions

2
website/.gitignore vendored
View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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.

View File

@ -20,7 +20,11 @@ By leveraging Consuls 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 Consuls 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 Consuls 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 HashiCorps partner page as well as be available for posting on the partners 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

View File

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

View File

@ -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"
},

View File

@ -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

View File

@ -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