website: link plugin version badges

website/components/badge/index.tsx

@@ -9,18 +9,21 @@ interface BadgeProps {
   label: string
   iconSvg?: string
   theme?: BadgeTheme
+  href?: string
 }
 
 function Badge({
   theme = 'gray',
   label,
   iconSvg,
+  href,
 }: BadgeProps): React.ReactElement {
+  const Elem = href ? 'a' : 'div'
   return (
-    <div className={classnames(s.root, s[`theme-${theme}`])}>
+    <Elem href={href} className={classnames(s.root, s[`theme-${theme}`])}>
       {iconSvg ? <InlineSvg className={s.icon} src={iconSvg} /> : null}
       <span className={s.text}>{label}</span>
-    </div>
+    </Elem>
   )
 }
 

website/components/remote-plugin-docs/server.js

@@ -69,9 +69,13 @@ async function generateStaticProps({
     if (pluginData?.isHcpPackerReady) {
       badgesMdx.push(`<PluginBadge type="hcp_packer_ready" />`)
     }
-    // Add badge showing the latest release version number
+    // Add badge showing the latest release version number,
+    // and link this badge to the latest release
     if (latestReleaseTag) {
-      badgesMdx.push(`<Badge label="${latestReleaseTag}" theme="light-gray"/>`)
+      const href = `https://github.com/${pluginData.repo}/releases/tag/${latestReleaseTag}`
+      badgesMdx.push(
+        `<Badge href="${href}" label="${latestReleaseTag}" theme="light-gray"/>`
+      )
     }
     // If we have badges to add, inject them into the MDX
     if (badgesMdx.length > 0) {