spectrocloud · karl-cardenas-coding · Mar 22, 2024 · Mar 21, 2024 · Mar 21, 2024 · Mar 21, 2024
@@ -3,4 +3,6 @@
 
 npx lint-staged
 
-npm run clean-api-docs
+npm run clean-api-docs
+
+make format-images
@@ -139,3 +139,9 @@ verify-url-links-ci: ## Check for broken URLs in production in a GitHub Actions
 	jq 'del(.links[] | select(.status <= 200))' temp_report.json > link_report.json
 	rm temp_report.json
 	mv link_report.json scripts/
+
+###@ Image Formatting
+
+format-images: ## Format images
+	@echo "formatting images in /static/assets/docs/images/ folder"
+	./scripts/compress-convert-images.sh
@@ -308,7 +308,9 @@ To add a Service to the Service List complete the following actions:
 
 ### Images or other assets
 
-All images must reside in the [`static/assets/docs/images`](./static/assets/docs/images/) folder.
+All images must reside in the [`static/assets/docs/images`](./static/assets/docs/images/) folder. All images must be in
+webp format. You can save png, jpg, or jpeg to the directory. The commit hook will convert the images to webp format. Or
+issue the command `make format-images` to convert the images to webp format.
 
 ```md
 ![alt text](/clusterprofiles.png "cluster profiles example")

@@ -47,7 +47,7 @@ https://raw.githubusercontent.com/spectrocloud/librarium/master/docs/api-content
 
 Postman imports your collection and lists it under Import Complete. <br />
 
-![Copy/paste the URL in the **Import** dialog as a link.](URL-as-a-link.png)
+![Copy/paste the URL in the **Import** dialog as a link.](URL-as-a-link.webp)
 
 Find details about importing in Postman's
 [import/export](https://learning.postman.com/docs/getting-started/importing-and-exporting-data/) tutorial.
@@ -59,16 +59,16 @@ environments, projects and tenants.
 
 ### System Profile dashboard
 
-![system-profile-1.png](/system-profile-1.png)
+![system-profile-1.webp](/system-profile-1.webp)
 
 ### Add a new pack while creating the system profile
 
-![system-profile-2.png](/system-profile-2.png)
+![system-profile-2.webp](/system-profile-2.webp)
 
 ### Add a new manifest while creating the system profile
 
-![system-profile-3.png](/system-profile-3.png)
+![system-profile-3.webp](/system-profile-3.webp)
 
 ### Download system profile
 
-![system-profile-4.png](/system-profile-4.png)
+![system-profile-4.webp](/system-profile-4.webp)
@@ -31,7 +31,7 @@ As the following diagram shows, Palette provides an installer in the form of a D
 deployed on your laptop, workstation, or jump box. You can use the installer on any Linux x86-64 system with a Docker
 daemon installed and connectivity to Palette and the MAAS identity endpoint.
 
-![An architecture diagram of MaaS with PCG.](/clusters_maas_install-manage-mass-pcg_diagram-of-mass-with-pcg.png)
+![An architecture diagram of MaaS with PCG.](/clusters_maas_install-manage-mass-pcg_diagram-of-mass-with-pcg.webp)
 
 ## Install PCG
 
@@ -122,7 +122,7 @@ The diagram below shows an example of using an external DNS server for servers t
 delegation. This ensures all servers in the network can resolve the DNS names of servers deployed by MAAS. Note that it
 is not required for the DNS records to be accessible from the internet.
 
-![Image showing external DNS server machines that MAAS deploys in addition to a DNS delegation](/clusters_maas_maas-dns-setup.png)
+![Image showing external DNS server machines that MAAS deploys in addition to a DNS delegation](/clusters_maas_maas-dns-setup.webp)
 
 ### Install
 

@@ -18,7 +18,7 @@ created up to this point.
 
 - User Data
 
-![A diagram that illustrates the mentioned pieces making up an Edge artifact created by the Palette Edge CLI](/clusters_edge-forge-workflow_build-images_edge-artifact-result.png)
+![A diagram that illustrates the mentioned pieces making up an Edge artifact created by the Palette Edge CLI](/clusters_edge-forge-workflow_build-images_edge-artifact-result.webp)
 
 Use the following steps to create an Edge artifact for your Edge host.
 
@@ -64,7 +64,7 @@ Choose the workflow that fits your needs.
    ./palette-edge show
    ```
 
-   ![CLI example output from the show command](/clusters_edge-forge-workflow_build-images_edge-cli-show.png)
+   ![CLI example output from the show command](/clusters_edge-forge-workflow_build-images_edge-cli-show.webp)
 
    <br />
 
@@ -158,7 +158,7 @@ Example:
 
 <br />
 
-![The output directory content in a tree diagram](/clusters_edge-forge-workflow_build-images_edge-cli-output.png)
+![The output directory content in a tree diagram](/clusters_edge-forge-workflow_build-images_edge-cli-output.webp)
 
 5. Navigate to the output directory and review the file **.VERSIONS.env**. Set the variable `PUSH_BUILD` to `true` so
    that the Edge provider images and the Edge Installer image get pushed to your image registry. The alternative is to

@@ -129,9 +129,9 @@ To map the Host DNS Pattern to the load balancer with the NGINX Ingress Controll
 3. Create a wildcard DNS record that maps the Host Pattern to the NGINX Ingress Controller load balancer. The example
    shows an AWS Route53 record for the `*.starship.te.spectrocloud.com` Host DNS Pattern.
 
-| Example Record with Host DNS Pattern |                                                                                                                            |
-| ------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- |
-| ![AWS Route 53](/record-details.png) | Here is an example of an <br /> AWS Route53 record for the <br />`*.starship.te.spectrocloud.com` <br /> Host DNS Pattern. |
+| Example Record with Host DNS Pattern  |                                                                                                                            |
+| ------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
+| ![AWS Route 53](/record-details.webp) | Here is an example of an <br /> AWS Route53 record for the <br />`*.starship.te.spectrocloud.com` <br /> Host DNS Pattern. |
 
 </TabItem>
 </Tabs>

@@ -16,7 +16,7 @@ platform, to familiarize the users with our Palette features.
 
 ## Start your Palette Experience
 
-![user-experience.png](/user-experience.png)
+![user-experience.webp](/user-experience.webp)
 
 The product tour is followed by a Palette experience session. Here we make sure that our users are guided through a
 successful deployment pipeline in their first use, instead of them just figuring things out along the way towards

@@ -5,7 +5,7 @@ description: "EKS-D packs in Spectro Cloud"
 hiddenFromNav: true
 type: "integration"
 category: ["kubernetes"]
-logoUrl: "https://registry.spectrocloud.com/v1/kubernetes-eksd/blobs/sha256:5790ca7040999e2f9371163a319cda652ed1e32139bcb9c6fb32a0152d9f48fb?type=image/png"
+logoUrl: "https://registry.spectrocloud.com/v1/kubernetes-eksd/blobs/sha256:5790ca7040999e2f9371163a319cda652ed1e32139bcb9c6fb32a0152d9f48fb?type=image.webp"
 ---
 
 # Amazon EKS Distro
@@ -33,9 +33,9 @@ We have made the usage of EKS-D easy by incorporating it as integration within t
 button, EKS-D is brought to use while creating a Spectro Cloud-specific cluster profile. Once the cluster profile is
 created, users can deploy EKS-D based Kubernetes clusters through the Spectro Cloud console.
 
-![eksd-cluster-profile](/eksd-cluster-profile.png)
+![eksd-cluster-profile](/eksd-cluster-profile.webp)
 
-![eksd-cluster](/eksd-cluster.png)
+![eksd-cluster](/eksd-cluster.webp)
 
 ## Why EKS-D with Spectro Cloud
 

@@ -5,7 +5,7 @@ description: "aws-eks-oidc Authentication pack in Spectro Cloud"
 hiddenFromNav: true
 type: "integration"
 category: ["authentication"]
-logoUrl: "https://registry.dev.spectrocloud.com/v1/aws-eks-oidc/blobs/sha256:f86813591b3b63b3afcf0a604a7c8c715660448585e89174908f3c6a421ad8d8?type=image/png"
+logoUrl: "https://registry.dev.spectrocloud.com/v1/aws-eks-oidc/blobs/sha256:f86813591b3b63b3afcf0a604a7c8c715660448585e89174908f3c6a421ad8d8?type=image.webp"
 ---
 
 # OIDC identity provider authentication for Amazon EKS

@@ -5,7 +5,7 @@ description: "Choosing K3s with Ubuntu within the Palette console"
 hiddenFromNav: true
 type: "integration"
 category: ["system app"]
-logoUrl: "https://registry.spectrocloud.com/v1/ubuntu-k3s/blobs/sha256:10c291a69f428cc6f42458e86cf07fd3a3202c3625cc48121509c56bdf080f38?type=image/png"
+logoUrl: "https://registry.spectrocloud.com/v1/ubuntu-k3s/blobs/sha256:10c291a69f428cc6f42458e86cf07fd3a3202c3625cc48121509c56bdf080f38?type=image.webp"
 ---
 
 # Lightweight Kubernetes on Ubuntu

@@ -69,7 +69,7 @@ the OVF template deployment wizard, such as the Palette endpoint or a mistyped p
 The screenshot below highlights the OVF template properties you must carefully configure and verify before deploying a
 PCG installer VM.
 
-![A screenshot displaying the OVF template properties you  configure while deploying the PCG installer VM](/troubleshooting-pcg-template_properties.png)
+![A screenshot displaying the OVF template properties you  configure while deploying the PCG installer VM](/troubleshooting-pcg-template_properties.webp)
 
 3. Double-check the accuracy of the pairing code used for the PCG installer VM. A pairing code is a unique
    authentication code Palette generates for each PCG installer instance. Confirm that it matches the value you copied
@@ -189,12 +189,12 @@ system logs from the monitoring console. Follow the steps below to review the de
    highlighted in the screenshot below. The monitoring console allows you to check the high-level status and download
    the individual log files.
 
-![A screenshot of the monitoring console of the PCG installer.](/troubleshooting-pcg-monitoring_console.png)
+![A screenshot of the monitoring console of the PCG installer.](/troubleshooting-pcg-monitoring_console.webp)
 
 4. If any of the statuses is not **Done** after waiting for a while, download the concerned logs. The screenshot below
    displays the **Logs** tab in the monitoring console.
 
-![A screenshot of the logs in the monitoring console of the PCG installer.](/troubleshooting-pcg-monitoring_logs.png)
+![A screenshot of the logs in the monitoring console of the PCG installer.](/troubleshooting-pcg-monitoring_logs.webp)
 
 5. Examine the log files for potential errors and root causes.
 
@@ -254,16 +254,16 @@ unavailable IP addresses for the worker nodes, or the inability to perform a Net
 7. If you encounter errors other than the ones mentioned in the previous step, it is possible that the cluster
    configuration or the DNS settings are not set correctly. You can review and edit the cluster configuration in the
    cluster settings. The screenshot below highlights the cluster configuration section in the cluster settings blade.
-   ![A screenshot highlighting the cluster configuration section in the cluster settings blade.](/troubleshooting-pcg-cluster_settings.png)
+   ![A screenshot highlighting the cluster configuration section in the cluster settings blade.](/troubleshooting-pcg-cluster_settings.webp)
 
 8. If the cluster settings look correct, ensure the search domain is correctly defined in the fault domain's DNS
    settings. The screenshot below highlights how you can review and edit the DNS mapping of an existing PCG cluster.
-   ![A screenshot highlighting the DNS mapping settings.](/troubleshooting-pcg-dns.png)
+   ![A screenshot highlighting the DNS mapping settings.](/troubleshooting-pcg-dns.webp)
 
 9. If the problem persists, download the cluster logs from Palette. The screenshot below will help you locate the button
    to download logs from the cluster details page.
 
-![A screenshot highlighting how to download the cluster logs from Palette.](/troubleshooting-pcg-download_logs.png)
+![A screenshot highlighting how to download the cluster logs from Palette.](/troubleshooting-pcg-download_logs.webp)
 
 10. Share the logs with our support team at [[email protected]](mailto:[email protected]). <br />
 
@@ -333,7 +333,7 @@ installer VM lacks outbound internet connectivity. <br />
    occurred due to a preceding "https://" or "http://" string in the vCenter server URL, the error details will mention
    "https://" twice, as highlighted in the screenshot below.
 
-![A screenshot highlighting the "https://" prepended twice to the data center server URL.](/troubleshooting-pcg-http_error.png)
+![A screenshot highlighting the "https://" prepended twice to the data center server URL.](/troubleshooting-pcg-http_error.webp)
 
 6. Palette does not allow you to edit the vCenter server URL you used for authentication. Therefore, you must redeploy
    the PCG cluster with the following considerations:
@@ -342,14 +342,14 @@ installer VM lacks outbound internet connectivity. <br />
      URL, ensure the URL does not include the preceding "http://" or "https://" string. Also, select the **Use Qualified
      Network Name** checkbox if you use a URL. The screenshot below displays the vCenter server field you configure in
      Palette.
-     ![A screenshot displaying the vCenter server field you configure in Palette](/troubleshooting-pcg-cluster_config_1.png)
+     ![A screenshot displaying the vCenter server field you configure in Palette](/troubleshooting-pcg-cluster_config_1.webp)
 
    - Ensure the VMware cloud properties are specified correctly in the cloud gateway configuration. You must use the
      vSphere data center and the folder where you have permission to create resources.
 
    - If you choose the DHCP option, enable the Dynamic DNS in your DNS server. The screenshot below displays the VMware
      cloud properties you configure in Palette.
-     ![A screenshot displaying the VMware cloud properties you configure in Palette](/troubleshooting-pcg-cluster_config_2.png)
+     ![A screenshot displaying the VMware cloud properties you configure in Palette](/troubleshooting-pcg-cluster_config_2.webp)
 
 7. If the steps above do not resolve the issue, check if the deployment failed due to a lack of outbound internet
    connectivity from the PCG installer VM. Use the following steps to check outbound internet connectivity:
@@ -407,7 +407,7 @@ This issue can occur due to improper networking configuration or an error in the
    - Download the PCG cluster's kubeconfig file from the **Overview** tab. Click on the kubeconfig file name to download
      it to your local machine, as highlighted in the screenshot below.
 
-     ![A screenshot highlighting the kubeconfig file to download from Palette.](/troubleshooting-pcg-download_kubeconfig.png)
+     ![A screenshot highlighting the kubeconfig file to download from Palette.](/troubleshooting-pcg-download_kubeconfig.webp)
 
    - After you download the PCG cluster's kubeconfig file, use the following commands to make a GET request to one of
      the

@@ -49,7 +49,7 @@ contain the necessary parameters to configure Palette.
 2. **Enterprise applications** - You will use Azure AD Enterprise registrations to configure SAML SSO with Spectro Cloud
    Palette. <p></p><br />
 
-![enterprise-app-registration](/oidc-azure-images/enterprise-app-registration.png)
+![enterprise-app-registration](/oidc-azure-images/enterprise-app-registration.webp)
 
 <p></p>
 
@@ -75,7 +75,7 @@ This section describes how to enable Azure AD SSO authentication to access a Kub
     - **oidc-issuer-url** - "Issuer's URL"<p></p><br />
     - **oidc-client-id** - "Client ID"<p></p><br />
 
-      ![kubeadminconfig](/oidc-azure-images/kubeadmconfig.png)
+      ![kubeadminconfig](/oidc-azure-images/kubeadmconfig.webp)
 
 <p></p>
 <br />
@@ -88,7 +88,7 @@ This section describes how to enable Azure AD SSO authentication to access a Kub
     - **oidc-client-secret** - The secret provided by Azure AD.<p></p><br />
     - **oidc-extra-scope** - The scope tags.<p></p><br />
 
-![oidc](/oidc-azure-images/client-config.png)
+![oidc](/oidc-azure-images/client-config.webp)
 
 <p></p>
 <br />
@@ -215,7 +215,7 @@ Group** with the display name of **cluster-admin-role**.
 
 **name**: "AZURE AD GROUP ID NAME"
 
-![oidc](/oidc-azure-images/client-config.png)
+![oidc](/oidc-azure-images/client-config.webp)
 
 ## Results
 

@@ -20,7 +20,7 @@ Palette is available in three flexible deployment models:
 - **Self-hosted**: The management plane is hosted in the customer’s environment. It can be the customer’s on-prem VMware
   vSphere, OpenStack, bare metal, or in a public cloud using the customer’s cloud account.
 
-![A diagram of Palette deployment models eager-load](/architecture_architecture-overview-deployment-models.png)
+![A diagram of Palette deployment models eager-load](/architecture_architecture-overview-deployment-models.webp)
 
 <br />
 
@@ -44,7 +44,7 @@ public or an on-premises data center.
 The following diagram illustrates the data flow for the Palette SaaS platform to manage the EKS cluster using the user's
 cloud account in AWS:
 
-![A diagram of the Palette SaaS architecture eager-load](/architecture_architecture-overview_saas.png)
+![A diagram of the Palette SaaS architecture eager-load](/architecture_architecture-overview_saas.webp)
 
 There are two main data flows represented in the provisioning flow (red) and monitoring flow (green).
 
@@ -75,7 +75,7 @@ endpoint (e.g., vCenter), there is one extra component, Palette
 local orchestrator and the proxy between Palette’s SaaS platform and cloud endpoint. The following diagram illustrates
 the data flow for the Palette SaaS platform to manage an on-prem VMware private data center:
 
-![Palette SaaS architecture diagram with connections to private data centers](/architecture_architecture-overview_on-prem.png)
+![Palette SaaS architecture diagram with connections to private data centers](/architecture_architecture-overview_on-prem.webp)
 
 ## Self-Hosted Architecture and Data Flow
 
@@ -86,4 +86,4 @@ cases, Palette supports a self-hosted on-premises installation. The platform upd
 be optionally downloaded from a self-hosted private repository instead of pulling from Palette’s hosted public
 repository.
 
-![Self-hosted Palette architecture diagram](/architecture_architecture-on-prem-detailed.png)
+![Self-hosted Palette architecture diagram](/architecture_architecture-on-prem-detailed.webp)
@@ -14,7 +14,7 @@ tags:
 Palette supports three different architecture models; multi-tenant SaaS, dedicated SaaS, and self-hosted. To learn more
 about Palette's architecture and the various components that make up the model, visit the resources listed below.
 
-![Architecture image with on-prem and SaaS  eager-load](/docs_architecture-overview_components-overview.png)
+![Architecture image with on-prem and SaaS  eager-load](/docs_architecture-overview_components-overview.webp)
 
 ## Resources