diff --git a/README.md b/README.md index af4dbd32f3..a1793563c4 100644 --- a/README.md +++ b/README.md @@ -565,7 +565,9 @@ component will automatically display the badge in the correct color based on the ### Simple Card Grid This is a custom component that creates a grid of simple text cards with two columns, styled according to our color -scheme. The rows of cards are dynamically created according to the list of specified cards. +scheme. The rows of cards are dynamically created according to the list of specified cards. This component uses the +`VersionedLink` under the covers. URLs should be specified as discussed in the [Internal Links](#internal-links) +section. ```js diff --git a/docs/docs-content/getting-started/additional-capabilities/additional-capabilities.md b/docs/docs-content/getting-started/additional-capabilities/additional-capabilities.md index 2d19746ff4..ba6c473f19 100644 --- a/docs/docs-content/getting-started/additional-capabilities/additional-capabilities.md +++ b/docs/docs-content/getting-started/additional-capabilities/additional-capabilities.md @@ -55,6 +55,8 @@ Started section to learn how they can grow with Palette and have a long-term rel In this section, you get an overview of other parts of Palette not yet covered by your Getting Started journey so far. Explore more through the following pages. + + diff --git a/docs/docs-content/getting-started/aws/aws.md b/docs/docs-content/getting-started/aws/aws.md index 65b549b94a..286e0d2313 100644 --- a/docs/docs-content/getting-started/aws/aws.md +++ b/docs/docs-content/getting-started/aws/aws.md @@ -30,37 +30,37 @@ your cluster is deployed, you can update it using cluster profile updates. title: "Set up Palette with AWS", description: "Set up the prerequisites of using Palette with AWS.", buttonText: "Learn more", - relativeURL: "./setup", + url: "/getting-started/aws/setup", }, { title: "Create a Cluster Profile", description: "Create a full cluster profile in Palette.", buttonText: "Learn more", - relativeURL: "./create-cluster-profile", + url: "/getting-started/aws/create-cluster-profile", }, { title: "Deploy a Cluster", description: "Deploy a Palette host cluster to AWS.", buttonText: "Learn more", - relativeURL: "./deploy-k8s-cluster", + url: "/getting-started/aws/deploy-k8s-cluster", }, { title: "Deploy Cluster Profile Updates", description: "Update your deployed clusters using Palette Cluster Profiles.", buttonText: "Learn more", - relativeURL: "./update-k8s-cluster", + url: "/getting-started/aws/update-k8s-cluster", }, { title: "Cluster Management with Terraform", description: "Deploy and update a Palette host cluster with Terraform.", buttonText: "Learn more", - relativeURL: "./deploy-manage-k8s-cluster-tf", + url: "/getting-started/aws/deploy-manage-k8s-cluster-tf", }, { title: "Scale, Upgrade, and Secure Clusters", description: "Learn how to scale, upgrade, and secure Palette host clusters deployed to AWS.", buttonText: "Learn more", - relativeURL: "./scale-secure-cluster", + url: "/getting-started/aws/scale-secure-cluster", }, ]} /> diff --git a/docs/docs-content/getting-started/azure/azure.md b/docs/docs-content/getting-started/azure/azure.md index 3503036dde..a610b2854b 100644 --- a/docs/docs-content/getting-started/azure/azure.md +++ b/docs/docs-content/getting-started/azure/azure.md @@ -30,37 +30,37 @@ your cluster is deployed, you can update it using cluster profile updates. title: "Set up Palette with Azure", description: "Set up the prerequisites of using Palette with Azure.", buttonText: "Learn more", - relativeURL: "./setup", + url: "/getting-started/azure/setup", }, { title: "Create a Cluster Profile", description: "Create a full cluster profile in Palette.", buttonText: "Learn more", - relativeURL: "./create-cluster-profile", + url: "/getting-started/azure/create-cluster-profile", }, { title: "Deploy a Cluster", description: "Deploy a Palette host cluster to Azure.", buttonText: "Learn more", - relativeURL: "./deploy-k8s-cluster", + url: "/getting-started/azure/deploy-k8s-cluster", }, { title: "Deploy Cluster Profile Updates", description: "Update your deployed clusters using Palette Cluster Profiles.", buttonText: "Learn more", - relativeURL: "./update-k8s-cluster", + url: "/getting-started/azure/update-k8s-cluster", }, { title: "Cluster Management with Terraform", description: "Deploy and update a Palette host cluster with Terraform.", buttonText: "Learn more", - relativeURL: "./deploy-manage-k8s-cluster-tf", + url: "/getting-started/azure/deploy-manage-k8s-cluster-tf", }, { title: "Scale, Upgrade, and Secure Clusters", description: "Learn how to scale, upgrade, and secure Palette host clusters deployed to Azure.", buttonText: "Learn more", - relativeURL: "./scale-secure-cluster", + url: "/getting-started/azure/scale-secure-cluster", }, ]} /> diff --git a/docs/docs-content/getting-started/gcp/gcp.md b/docs/docs-content/getting-started/gcp/gcp.md index b15e5200ce..db882c84d7 100644 --- a/docs/docs-content/getting-started/gcp/gcp.md +++ b/docs/docs-content/getting-started/gcp/gcp.md @@ -30,37 +30,37 @@ your cluster is deployed, you can update it using cluster profile updates. title: "Set up Palette with GCP", description: "Set up the prerequisites of using Palette with GCP.", buttonText: "Learn more", - relativeURL: "./setup", + url: "/getting-started/gcp/setup", }, { title: "Create a Cluster Profile", description: "Create a full cluster profile in Palette.", buttonText: "Learn more", - relativeURL: "./create-cluster-profile", + url: "/getting-started/gcp/create-cluster-profile", }, { title: "Deploy a Cluster", description: "Deploy a Palette host cluster to GCP.", buttonText: "Learn more", - relativeURL: "./deploy-k8s-cluster", + url: "/getting-started/gcp/deploy-k8s-cluster", }, { title: "Deploy Cluster Profile Updates", description: "Update your deployed clusters using Palette Cluster Profiles.", buttonText: "Learn more", - relativeURL: "./update-k8s-cluster", + url: "/getting-started/gcp/update-k8s-cluster", }, { title: "Cluster Management with Terraform", description: "Deploy and update a Palette host cluster with Terraform.", buttonText: "Learn more", - relativeURL: "./deploy-manage-k8s-cluster-tf", + url: "/getting-started/gcp/deploy-manage-k8s-cluster-tf", }, { title: "Scale, Upgrade, and Secure Clusters", description: "Learn how to scale, upgrade, and secure Palette host clusters deployed to GCP.", buttonText: "Learn more", - relativeURL: "./scale-secure-cluster", + url: "/getting-started/gcp/scale-secure-cluster", }, ]} /> diff --git a/docs/docs-content/getting-started/getting-started.md b/docs/docs-content/getting-started/getting-started.md index fc29e91d72..70be39162c 100644 --- a/docs/docs-content/getting-started/getting-started.md +++ b/docs/docs-content/getting-started/getting-started.md @@ -57,37 +57,37 @@ Explore more through the following pages. title: "Introduction to Palette", description: "Learn about what makes Palette different.", buttonText: "Learn more", - relativeURL: "./introduction", + url: "/getting-started/introduction", }, { title: "Deploy a Cluster to Amazon Web Services (AWS)", description: "Deploy and update a Palette host cluster to AWS.", buttonText: "Learn more", - relativeURL: "./aws", + url: "/getting-started/aws", }, { title: "Deploy a Cluster to Microsoft Azure", description: "Deploy and update a Palette host cluster to Azure.", buttonText: "Learn more", - relativeURL: "./azure", + url: "/getting-started/azure", }, { title: "Deploy a Cluster to Google Cloud Platform (GCP)", description: "Deploy and update a Palette host cluster to Google Cloud.", buttonText: "Learn more", - relativeURL: "./gcp", + url: "/getting-started/gcp", }, { title: "Deploy a Cluster to VMware", description: "Deploy and update a Palette host cluster to VMware vSphere.", buttonText: "Learn more", - relativeURL: "./vmware", + url: "/getting-started/vmware", }, { title: "Additional Capabilities", description: "Learn about Palette's additional capabilities.", buttonText: "Learn more", - relativeURL: "./additional-capabilities", + url: "/getting-started/additional-capabilities", }, ]} /> diff --git a/docs/docs-content/getting-started/introduction.md b/docs/docs-content/getting-started/introduction.md index 2b6522c36e..8866817b3f 100644 --- a/docs/docs-content/getting-started/introduction.md +++ b/docs/docs-content/getting-started/introduction.md @@ -89,25 +89,25 @@ Select your infrastructure provider to start exploring Palette. title: "Deploy a Cluster to Amazon Web Services (AWS)", description: "Deploy and update a Palette host cluster to AWS.", buttonText: "Learn more", - relativeURL: "../aws", + url: "/getting-started/aws", }, { title: "Deploy a Cluster to Microsoft Azure", description: "Deploy and update a Palette host cluster to Azure.", buttonText: "Learn more", - relativeURL: "../azure", + url: "/getting-started/azure", }, { title: "Deploy a Cluster to Google Cloud Platform (GCP)", description: "Deploy and update a Palette host cluster to Google Cloud.", buttonText: "Learn more", - relativeURL: "../gcp", + url: "/getting-started/gcp", }, { title: "Deploy a Cluster to VMware", description: "Deploy and update a Palette host cluster to VMware vSphere.", buttonText: "Learn more", - relativeURL: "../vmware", + url: "/getting-started/vmware", }, ]} /> diff --git a/docs/docs-content/getting-started/vmware/vmware.md b/docs/docs-content/getting-started/vmware/vmware.md index efb584707a..a44cc8e358 100644 --- a/docs/docs-content/getting-started/vmware/vmware.md +++ b/docs/docs-content/getting-started/vmware/vmware.md @@ -30,43 +30,43 @@ Once your cluster is deployed, you can update it using cluster profile updates. title: "Set up Palette with VMware", description: "Set up the prerequisites of using Palette with VMware.", buttonText: "Learn more", - relativeURL: "./setup", + url: "/getting-started/vmware/setup", }, { title: "Deploy a PCG", description: "Learn to deploy a PCG with Palette CLI.", buttonText: "Learn more", - relativeURL: "./deploy-pcg", + url: "/getting-started/vmware/deploy-pcg", }, { title: "Create a Cluster Profile", description: "Create a full cluster profile in Palette.", buttonText: "Learn more", - relativeURL: "./create-cluster-profile", + url: "/getting-started/vmware/create-cluster-profile", }, { title: "Deploy a Cluster", description: "Deploy a Palette host cluster to VMware.", buttonText: "Learn more", - relativeURL: "./deploy-k8s-cluster", + url: "/getting-started/vmware/deploy-k8s-cluster", }, { title: "Deploy Cluster Profile Updates", description: "Update your deployed clusters using Palette Cluster Profiles.", buttonText: "Learn more", - relativeURL: "./update-k8s-cluster", + url: "/getting-started/vmware/update-k8s-cluster", }, { title: "Cluster Management with Terraform", description: "Deploy and update a Palette host cluster with Terraform.", buttonText: "Learn more", - relativeURL: "./deploy-manage-k8s-cluster-tf", + url: "/getting-started/vmware/deploy-manage-k8s-cluster-tf", }, { title: "Scale, Upgrade, and Secure Clusters", description: "Learn how to scale, upgrade, and secure Palette host clusters deployed to VMware.", buttonText: "Learn more", - relativeURL: "./scale-secure-cluster", + url: "/getting-started/vmware/scale-secure-cluster", }, ]} /> diff --git a/docs/docs-content/tutorials/tutorials.md b/docs/docs-content/tutorials/tutorials.md index 365b63f138..7cc5aec711 100644 --- a/docs/docs-content/tutorials/tutorials.md +++ b/docs/docs-content/tutorials/tutorials.md @@ -32,6 +32,8 @@ concepts. Explore more through the following tutorials. + + diff --git a/scripts/find-unused-images.sh b/scripts/find-unused-images.sh index 0adc4a4d62..512d24f921 100755 --- a/scripts/find-unused-images.sh +++ b/scripts/find-unused-images.sh @@ -5,7 +5,7 @@ set -e # Create a list of all the images we have and save it to a json. # Trim the path static/assets/docs/images. -find static/assets/docs/images -type f \( -name "*.gif" -o -name "*.webp" \) ! -name ".DS_STORE" ! -name ".DS_Store" | sed 's|static/assets/docs/images||g' > all_images.json +find static/assets/docs/images README.md -type f \( -name "*.gif" -o -name "*.webp" \) ! -name ".DS_STORE" ! -name ".DS_Store" | sed 's|static/assets/docs/images||g' > all_images.json image_count=$(wc -l < all_images.json) echo "Detected $image_count .webp and .gif assets in static/assets/docs/images..." @@ -28,9 +28,10 @@ echo "$branches" > evaluated_branches.json for current_branch in $branches; do git checkout $current_branch + grep -Hn -E "\.webp|\.gif" README.md > readme_used_images.json find docs -type f -name "*.md" -exec grep -Hn -E "\.webp|\.gif" {} \; > docs_used_images.json find _partials -type f -name "*.mdx" -exec grep -Hn -E "\.webp|\.gif" {} \; > partials_used_images.json - cat docs_used_images.json partials_used_images.json > used_images.json + cat readme_used_images.json docs_used_images.json partials_used_images.json > used_images.json line_number=1 for img in $(cat all_images.json); do @@ -48,6 +49,7 @@ echo "Detected $unused_image_count unused webp assets in static/assets/docs/imag # Clean up files rm all_images.json +rm readme_used_images.json rm docs_used_images.json rm partials_used_images.json rm used_images.json diff --git a/src/components/SimpleCardGrid/SimpleCardGrid.test.tsx b/src/components/SimpleCardGrid/SimpleCardGrid.test.tsx index 3de9a9eb61..06b16822ea 100644 --- a/src/components/SimpleCardGrid/SimpleCardGrid.test.tsx +++ b/src/components/SimpleCardGrid/SimpleCardGrid.test.tsx @@ -8,12 +8,18 @@ jest.mock("./SimpleCardFooterArrow", () => { }); }); +jest.mock("../VersionedLink", () => { + return jest.fn(({ url, component }) => { + return {component}; + }); +}); + describe("Display SimpleCardGrid", () => { interface testCard { title: string; description: string; buttonText: string; - relativeURL: string; + url: string; } interface testCase { @@ -26,19 +32,19 @@ describe("Display SimpleCardGrid", () => { title: "First Card", description: "Card 1", buttonText: "Learn more 1", - relativeURL: "./getting-started-1", + url: "/getting-started/getting-started-1", }, { title: "Second Card", description: "Card 2", buttonText: "Learn more 2", - relativeURL: "./getting-started-2", + url: "/getting-started/getting-started-2", }, { title: "Third Card", description: "Card 3", buttonText: "Learn more 3", - relativeURL: "./getting-started-3", + url: "/getting-started/getting-started-3", }, ]; @@ -74,7 +80,7 @@ describe("Display SimpleCardGrid", () => { expect(screen.getByText(tc.buttonText, { selector: "button" })).toBeInTheDocument(); expect( screen.getAllByRole("link").filter((value) => { - return value.getAttribute("href") == tc.relativeURL; + return value.getAttribute("href") == tc.url; }) ).not.toBeNull(); }); diff --git a/src/components/SimpleCardGrid/SimpleCardGrid.tsx b/src/components/SimpleCardGrid/SimpleCardGrid.tsx index 8c77cee138..d2c007e05f 100644 --- a/src/components/SimpleCardGrid/SimpleCardGrid.tsx +++ b/src/components/SimpleCardGrid/SimpleCardGrid.tsx @@ -1,6 +1,7 @@ import React from "react"; import styles from "./SimpleCardGrid.module.scss"; import SimpleCardFooterArrow from "./SimpleCardFooterArrow"; +import VersionedLink from "../VersionedLink"; interface SimpleCardProps { cards?: SimpleCard[]; @@ -12,10 +13,9 @@ interface SimpleCard { index?: number; description: string; buttonText: string; - relativeURL: string; + url: string; hideNumber?: boolean; } - interface SimpleCardHeader { index?: number; hideNumber?: boolean; @@ -31,8 +31,8 @@ export default function SimpleCardGrid({ cards = [], hideNumber = false }: Simpl index={index + 1} description={card.description} buttonText={card.buttonText} - relativeURL={card.relativeURL} key={`simpleCard-${index}`} + url={card.url} hideNumber={hideNumber} /> ))} @@ -40,22 +40,25 @@ export default function SimpleCardGrid({ cards = [], hideNumber = false }: Simpl ); } -function SimpleCard({ title, index, description, buttonText, relativeURL, hideNumber }: SimpleCard) { +function SimpleCard({ title, index, description, buttonText, url, hideNumber }: SimpleCard) { + const body = SimpleCardBody(title, description, buttonText, index, hideNumber); + return ; +} + +function SimpleCardBody(title: string, description: string, buttonText: string, index?: number, hideNumber?: boolean) { return ( - -
- -
-

{description}

-
-
- -
+
+ +
+

{description}

-
+
+ +
+
); } diff --git a/src/components/VersionedLink/VersionedLink.test.tsx b/src/components/VersionedLink/VersionedLink.test.tsx index 61b824cd5b..3fcd0500e9 100644 --- a/src/components/VersionedLink/VersionedLink.test.tsx +++ b/src/components/VersionedLink/VersionedLink.test.tsx @@ -20,6 +20,19 @@ describe("Versioned link", () => { expect(link).toBe(url); }); + it("latest version with component", () => { + prevVersionPath = ""; + const componentText = "Component text"; + const component =

{componentText}

; + const url = "/path/url"; + render(); + const componentRender = screen.getByText(componentText); + expect(componentRender).not.toBeNull(); + const link = screen.getByRole("link").getAttribute("href"); + expect(link).not.toBeNull(); + expect(link).toBe(url); + }); + it("previous version", () => { prevVersionPath = "/v4.3.1"; const text = "Test link"; @@ -30,6 +43,19 @@ describe("Versioned link", () => { expect(link).toBe(prevVersionPath.concat(url)); }); + it("previous version with component", () => { + prevVersionPath = "/v4.3.1"; + const componentText = "Component text"; + const component =

{componentText}

; + const url = "/path/url"; + render(); + const componentRender = screen.getByText(componentText); + expect(componentRender).not.toBeNull(); + const link = screen.getByRole("link").getAttribute("href"); + expect(link).not.toBeNull(); + expect(link).toBe(prevVersionPath.concat(url)); + }); + it("url with back dots", () => { prevVersionPath = ""; const text = "Test link"; diff --git a/src/components/VersionedLink/VersionedLink.tsx b/src/components/VersionedLink/VersionedLink.tsx index ee67c639ed..5f1235f364 100644 --- a/src/components/VersionedLink/VersionedLink.tsx +++ b/src/components/VersionedLink/VersionedLink.tsx @@ -2,7 +2,9 @@ import React from "react"; import GetVersionPath from "./CheckVersion"; interface ComponentProperties { - [key: string]: string; + text?: string; + url: string; + component?: React.ReactElement; } export default function VersionedLink(props: ComponentProperties) { @@ -17,10 +19,24 @@ export default function VersionedLink(props: ComponentProperties) { "Versioned links should not be used for external URLs. Please use the default markdown syntax instead." ); } + + // Versioning detected if (path != "") { const versionedURL = path.concat(props.url); + + // Component Mode detected + if (props.component != null) { + return {props.component}; + } + + // Text mode detected return {props.text}; } + // Component mode of versioned link detected without versioning + if (props.component != null) { + return {props.component}; + } + return {props.text}; } diff --git a/static/assets/docs/images/hide_copy_button.webp b/static/assets/docs/images/hide_copy_button.webp new file mode 100644 index 0000000000..eb7afe852e Binary files /dev/null and b/static/assets/docs/images/hide_copy_button.webp differ diff --git a/static/assets/docs/images/hide_copy_button_example.webp b/static/assets/docs/images/hide_copy_button_example.webp new file mode 100644 index 0000000000..5b9176cade Binary files /dev/null and b/static/assets/docs/images/hide_copy_button_example.webp differ