docs(links): Fix broken links; add SVGs to mlc_config.json (#2199)

* docs(links): Fix broken links; add SVGs to mlc_config.json

* add localhost to link check config

* finished replacing image with figure shortcode

* update nightly hugo link check html test job based on cdaas

* update htmltest output path to public/

* use youtube-enhanced shortcode to shrink embedded video

* add twitter to exclusion patterns

* remove big image files not used

* update config to ignore codeblock content

Author: aimeeu

.github/styles/vocab.txt

@@ -95,3 +95,5 @@ zsh
 {{% heading "prereq" %}}
 {{% heading "nextSteps" %}}
 {{< heading "nextSteps" >}}
+<!-- markdown-link-check-disable -->
+<!-- markdown-link-check-enable-->

.github/workflows/link-check-nightly-job.yml

@@ -4,6 +4,9 @@
 # https://github.com/wjdp/htmltest
 
 name: run-htmltest-nightly
+
+permissions:
+  contents: read # (default) needed for the actions/checkout task
 on:
   schedule:
     - cron: "0 1 * * *" # every day at 01:00
@@ -15,7 +18,7 @@ jobs:
       group: ${{ github.workflow }}-${{ github.ref }}
     steps:
       - name: Check out repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4.1.0
         with:
           fetch-depth: 0 # Fetch all history for .GitInfo and .Lastmod
       - name: Hugo setup
@@ -24,7 +27,7 @@ jobs:
           hugo-version: "0.110.0"
           extended: true
       - name: Setup Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v3.8.1
         with:
           node-version: "18"
           cache: "npm"
@@ -35,22 +38,22 @@ jobs:
           cache-dependency-path: "**/package-lock.json"
       - name: Run NPM
         run: npm ci
-      - name: BuildDocsSite
-        # Put the build output where the following steps can find it
-        # GITHUB_WORKSPACE
-        run: hugo server --verbose --destination $GITHUB_WORKPLACE/dist
+      - name: BuildDocsSite 
+        # Put the build output where the following steps can find it  GITHUB_WORKSPACE; this doesn't work
+        # https://patrickod.com/2023/05/06/til-using-htmltest-to-find-broken-links-in-your-blog/
+        run: hugo
       - name: Test HTML
         # https://github.com/wjdp/htmltest-action/
         # Don't fail on broken links
         continue-on-error: true
-        uses: wjdp/htmltest-action@master
+        uses: wjdp/htmltest-action@v0.13.0-rc1
         with:
           # For consistency, use the same config file as for local builds
           config: .htmltest.yml
       - name: Archive htmltest results
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v3.1.3
         # Note: Set ACTIONS_RUNTIME_TOKEN env variable to test with nektos/act
         with:
           name: htmltest-report
           path: tmp/.htmltest/htmltest.log
-          retention-days: 21 # Default is 90 days
+          retention-days: 21 # Default is 90 days

.htmltest.yml

@@ -1,3 +1,3 @@
-DirectoryPath: "dist"
+DirectoryPath: "public/"
 # Hugo's directory structure triggers this:
 IgnoreDirectoryMissingTrailingSlash: true

.mlc_config.json

@@ -1,22 +1,37 @@
 {
   "ignorePatterns": [
   {
-    "pattern": "^https:\/\/console.cloud.armory.io"
+    "pattern": "^\/images\/proprietary.svg"
   },
   {
-    "pattern": "^https:\/\/auth.cloud.armory.io"
+    "pattern": "^\/images\/oss.svg"
   },
   {
-    "pattern": "^https:\/\/api.cloud.armory.io"
+    "pattern": "^\/images\/ea.svg"
   },
   {
-    "pattern": "^https:\/\/go.armory.io"
+    "pattern": "^\/images\/ga.svg"
   },
   {
-    "pattern": "^https:\/\/api.github.com"
+    "pattern": "^\/images\/beta.svg"
+  },
+  {
+    "pattern": "^\/images\/exp.svg"
+  },
+  {
+    "pattern": "((http([s]){0,1}:\/\/){0,1}(localhost|127.0.0.1){1}(([:]){0,1}[\0-9]{4}){0,1}\/{0,1}){1}"
   },
   {
     "pattern": "^#[a-zA-Z0-9-]*"
+  },
+  {
+    "pattern": "^https:\/\/twitter.com"
+  },
+  {
+    "pattern": "(?s) *({{< highlight [^>]* ?>}}.*?{{< ?/ ?highlight >}})"
+  },
+  {
+    "pattern": "(?s) *(\x60\x60\x60.*?\x60\x60\x60)"
   }
 ],
   "aliveStatusCodes": [

README.md

@@ -9,8 +9,8 @@ The latest version of the docs website is the `master` branch. Previous releases
 The site has built-in support for [Mermaid](https://mermaid-js.github.io/mermaid/), which is a Javascript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. <i>Diagramming and documentation costs precious developer time and gets outdated quickly. But not having diagrams or docs ruins productivity and hurts organizational learning. Mermaid addresses this problem by cutting the time, effort and tooling that is required to create modifiable diagrams and charts, for smarter and more reusable content. The text definitions for Mermaid diagrams allows for it to be updated easily, it can also be made part of production scripts (and other pieces of code). So less time needs to be spent on documenting, as a separate and laborious task. Even non-programmers can create diagrams through the Mermaid Live Editor.</i>
 
 Mermaid resources:
-- [Quick Start](https://mermaid-js.github.io/mermaid/getting-started/n00b-gettingStarted.html)
-- [Tutorials](https://mermaid-js.github.io/mermaid/getting-started/Tutorials.html)
+- [Quick Start](http://mermaid.js.org/intro/getting-started.html)
+- [Tutorials](hhttp://mermaid.js.org/config/Tutorials.html)
 - [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor/) - create your diagrams visually and copy the generated Mermaid code to your page
 
 The theme also supports PlantUML and draw.io.

config-generated.toml

@@ -207,7 +207,7 @@ desc = "Docs repository"
 
 [[params.links.developer]]
 name = "Slack"
-url = "https://join.spinnaker.io/"
+url = "https://join.slack.com/t/spinnakerteam/shared_invite/zt-7juwxmx0-nQ4Ud4pJcbuPykX3SXwQrg"
 icon = "fab fa-slack"
 desc = "Chat with Armory users and developers in the Spinnaker Slack"
 

config-modules.yaml

@@ -166,7 +166,7 @@ params:
         icon: fab fa-github
         desc: Docs repository
       - name: Slack
-        url: "https://join.spinnaker.io/"
+        url: "https://join.slack.com/t/spinnakerteam/shared_invite/zt-7juwxmx0-nQ4Ud4pJcbuPykX3SXwQrg"
         icon: fab fa-slack
         desc: Chat with Armory users and developers in the Spinnaker Slack
   versions:

config.toml

@@ -326,7 +326,7 @@ theme = "forest"
    desc = "Docs repository"
 [[params.links.developer]]
 	name = "Slack"
-	url = "https://join.spinnaker.io/"
+	url = "https://join.slack.com/t/spinnakerteam/shared_invite/zt-7juwxmx0-nQ4Ud4pJcbuPykX3SXwQrg"
 	icon = "fab fa-slack"
    desc = "Chat with Armory users and developers in the Spinnaker Slack"
 

content/en/continuous-deployment/Overview/architecture.md

@@ -11,7 +11,7 @@ aliases:
 
 Armory Continuous Deployment is an enterprise version of open source [Spinnaker](https://spinnaker.io/). It is composed of several microservices for resiliency and follows the single-responsibility principle. It allows for faster iteration on each individual component and a more pluggable architecture for custom components. See the open source Spinnaker [microservices overview](https://spinnaker.io/docs/reference/architecture/microservices-overview/#system-dependencies) for port mappings and a table of service interdependencies. 
 
-![Architecture Diagram](/images/overview/SpinnakerArchitecture.png)
+{{< figure src="/images/overview/SpinnakerArchitecture.png" >}}
 
 ## Armory Continuous Deployment microservices
 

content/en/continuous-deployment/Overview/fiat-permissions-overview.md

@@ -90,7 +90,7 @@ Answer the following questions to figure out how to map roles and permissions in
 
 The following image shows an example result of this exercise based on the user roles described in [Example Roles](#example-roles):
 
-![Mapping Exercise Role Matrix](/images/fiat_overview_role_matrix.png)
+{{< figure src="/images/fiat_overview_role_matrix.png" >}}
 
 ## Example Configurations
 
@@ -160,7 +160,7 @@ ci:
 
 `app1` is one of the applications that needs to be deployed. Configuring permissions for an application is done in Deck, Spinnaker's UI, when you create or edit an application:
 
-![app1 permissions](/images/fiat_overview_app1_perms.png)
+{{< figure src="/images/fiat_overview_app1_perms.png" >}}
 
 `app2`, `app3`, and `app4` will look slightly different since they have different permissions based on the mapping exercise.
 

content/en/continuous-deployment/Overview/load-balancers.md

@@ -19,7 +19,7 @@ Step 1: After you select your Application, click on the Load Balancers tab.
 
 Step 2: Click the "Create Load Balancer" button.
 
-![Highlight the "Create Load Balancer" button](/images/overview/create-load-balancer.png)
+{{< figure src="/images/overview/create-load-balancer.png" >}}
 
 Step 3: The Stack and Detail should be kept in mind when creating the pipeline because the pipeline's deployment of server group should be using the same Stack and Detail.
 
@@ -31,4 +31,4 @@ Step 1: Go to your Load Balancers in your Applications.
 
 Step 2: Select a Load Balancer, then to the right a column with the Load Balancer's details should appear. Select the drop down menu and press "Delete".
 
-![Highlight the "Delete" option for a load balancer](/images/overview/delete-load-balancer.png)
+{{< figure src="/images/overview/delete-load-balancer.png" >}}

content/en/continuous-deployment/Overview/naming-conventions.md

@@ -12,42 +12,42 @@ description: >
 
 An application inside Spinnaker represents what you would typically find in a single code repository - and in many cases, an application maps directly to a microservice.
 
-![The Spinnaker Applications view](/images/overview/application.png)
+{{< figure src="/images/overview/application.png" >}}
 
 ### Cluster
 A server group is a regional view of servers, whereas a cluster is a world-wide view of server groups.
 
-![The Spinnaker Cluster view](/images/overview/cluster.png)
+{{< figure src="/images/overview/cluster.png" >}}
 
 ### Execution
 When a pipeline runs, the end result is called an execution.
 
-![The Spinnaker Executions view](/images/overview/execution.png)
+{{< figure src="/images/overview/execution.png" >}}
 
 ### Pipeline
 A pipeline in Spinnaker is a series of stages linked together that can be executed serially or in parallel. All pipelines are defined in the context of an application. A typical pipeline will contain stages for “creating images”, “testing”, and “deploying”. The process of “creating images” is also commonly referred to as a “bake”.
 
-![The Spinnaker Pipeline view](/images/overview/pipeline.png)
+{{< figure src="/images/overview/pipeline.png" >}}
 
 ### Project
 A project inside Spinnaker is a logical grouping of applications. For example, we might create a project called “Spinnaker” and its applications would be “Deck”, “Orca”, “Clouddriver”, etc. Spinnaker provides a helpful dashboard view for each project to visualize its applications and status of each application contained within it.
 
-![The Spinnaker Project Dashboard](/images/overview/project-dashboard.png)
+{{< figure src="/images/overview/project-dashboard.png" >}}
 
 ### Server Group
 From an Amazon Web Service (AWS) point of view, a server group is represented by an auto-scaling group (ASGs). All applications that are deployed by Spinnaker are deployed to server groups.
 
-![](/images/overview/cluster.png)
+{{< figure src="images/overview/cluster.png" >}}
 
 ### Stage
 Within a pipeline, the tasks that pipeline performs are called stages.
 
-![](/images/overview/pipeline.png)
+{{< figure src="/images/overview/pipeline.png" >}}
 
 ### Trigger
 A trigger is the entry point to a pipeline.
 
-![](/images/overview/trigger.png)
+{{< figure src="/images/overview/trigger.png" >}}
 
 
 ## Spinnaker Naming Conventions
@@ -73,6 +73,6 @@ The infrastructure's version number; such as v011, v012, etc. This is automatica
 
 In AWS, Spinnaker will name your ASGs and Launch Configurations according to the naming convention mentioned above (ie. “armoryspinnaker-prod-polling-v015”).
 
-![](/images/Image-2017-03-24-at-3.10.53-PM.png)
+{{< figure src="/images/Image-2017-03-24-at-3.10.53-PM.png" >}}
 
 Please note that if your user definition includes a hyphen, it will disrupt the naming convention.

content/en/continuous-deployment/Overview/your-first-application.md

@@ -16,7 +16,7 @@ An application represents the service which you are going to deploy using Spinna
 
 When you first log in to Spinnaker, the landing page should look like this:
 
-![The landing page of a fresh installation](/images/overview/your-first-application/default-view-top.png)
+{{< figure src="/images/overview/your-first-application/default-view-top.png" >}}
 
 The navigation bar at the top allows you to access Projects, Applications, and
 Infrastructure. The search bar allows you to search through your Infrastructure.
@@ -37,18 +37,18 @@ Remember that Spinnaker considers an application to be anything you would put in
 
 1. Click the “Create Application” button:
 
-   ![Highlight the "Create Application" button](/images/overview/your-first-application/create-application.png)
+   {{< figure src="/images/overview/your-first-application/create-application.png" >}}
 
 1. Fill out the pop-up form with desired user definitions.
 
-   ![The "New Application" modal](/images/overview/your-first-application/new-application-modal.png)
+   {{< figure src="/images/overview/your-first-application/new-application-modal.png" >}}
 
    - The name of the application cannot have hyphens. Using a hyphen in the application name interferes with the naming convention. This applies to all types of applications except for those that use the Kubernetes V2 provider to deploy.
    - When you create an application in Spinnaker, consider it to be anything you would put into a single code repository.
 
 1. After you fill out the form you should see this:
 
-   ![A fresh application view](/images/overview/your-first-application/new-application.png)
+   {{< figure src="/images/overview/your-first-application/new-application.png" >}}
 
 1. If you wish to modify the settings for the application, click “Config” for configurations.
 
@@ -59,4 +59,4 @@ Note that by now you should have created an application, but as you have not cre
 
 Go to your application, click on “Config” and scroll all the way down. There will be a prompt to confirm if you would like to delete your application.
 
-![Deleting an application](/images/overview/your-first-application/delete-application.png)
+{{< figure src="/images/overview/your-first-application/delete-application.png" >}}