docs: Display patch versions in site catalog

Consumes the new catalog-v2.json endpoint which provides the
latest patch versions.
The latest patch version is now being presented in:
- The version dropdown for the function
- A new dynamic latest image tag section at the top of the page

Issues: kptdev/kpt#2609

site/index.html

@@ -117,9 +117,9 @@
 
               let catalogPath;
               if (isContribFn) {
-                catalogPath = "/contrib/catalog.json";
+                catalogPath = "/contrib/catalog-v2.json";
               } else {
-                catalogPath = "/catalog.json";
+                catalogPath = "/catalog-v2.json";
               }
               window.Docsify.get(catalogPath).then(function (
                 catalogResponse
@@ -135,8 +135,10 @@
                   versionName = pathElements[2];
                 }
 
-                const currentVersion = versionName.replaceAll("v", "");
+                const patchSemver = versions[versionName]['LatestPatchVersion']
+                const currentVersion = patchSemver.replaceAll("v", "");
                 const sortedSemvers = Object.keys(versions)
+                  .map((minor) => versions[minor]['LatestPatchVersion'])
                   .sort((a, b) => compareVersions(a, b))
                   .reverse();
                 versionDropdown += `
@@ -155,7 +157,7 @@
                 </ol>
               </div>`;
 
-                const examples = catalog[functionName][versionName];
+                const examples = catalog[functionName][versionName]['Examples'];
                 const ghElement = document
                   .getElementsByClassName("github-corner")
                   .item(0);
@@ -218,9 +220,18 @@ <h3 id="examples">${
                   versionDropdown +
                   examplesDropdown +
                   "</div>";
+                let imageContent =
+                    `<pre v-pre="" data-lang="shell" class="language-shell">` +
+                    `<code class="lang-shell language-shell">` +
+                    `gcr.io/kpt-fn${isContribFn ? "-contrib" : ""}/${functionName}:${patchSemver}` +
+                    `</code>` +
+                    `</pre>`
 
                 const dropdownContainer = document.createElement("div");
+                const imageSection = document.createElement("div");
                 const content = document.getElementsByClassName("markdown-section").item(0);
+                content.prepend(imageSection)
+                imageSection.outerHTML = imageContent
                 content.prepend(dropdownContainer);
                 dropdownContainer.outerHTML = dropdowns;
                 // Update title of page to title of document.