feat(website): add release link to homepage hero

Author: chenjiahan

website/theme/components/Hero.module.scss

@@ -15,8 +15,8 @@
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  min-height: calc(100svh - var(--rp-nav-height));
-  padding: clamp(3.75rem, 7.5vh, 6rem) 2rem;
+  min-height: calc(80svh - var(--rp-nav-height));
+  padding: clamp(3.75rem, 7.5vh, 6rem) 2rem 0;
   overflow: hidden;
   background: var(--rp-c-bg);
 }
@@ -44,6 +44,33 @@
   transform: translateY(-1.5rem);
 }
 
+.releaseLink {
+  display: inline-flex;
+  align-items: center;
+  margin-bottom: clamp(1.5rem, 3vh, 2.5rem);
+  color: var(--hero-text);
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.5;
+  text-decoration-line: underline;
+  text-decoration-color: transparent;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.25em;
+  transition:
+    color 0.2s ease,
+    text-decoration-color 0.2s ease;
+
+  &:hover {
+    color: var(--hero-title);
+    text-decoration-color: currentcolor;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--rp-c-brand);
+    outline-offset: 3px;
+  }
+}
+
 .title {
   margin: 0;
   color: var(--hero-title);
@@ -132,8 +159,8 @@
 
 @media (max-width: 640px) {
   .hero {
-    min-height: calc(100svh - var(--rp-nav-height));
-    padding: 3.25rem 1.25rem;
+    min-height: calc(80svh - var(--rp-nav-height));
+    padding: 3.25rem 1.25rem 0;
   }
 
   .title {
@@ -142,6 +169,11 @@
     letter-spacing: -0.055em;
   }
 
+  .releaseLink {
+    margin-bottom: 1.5rem;
+    font-size: 0.8125rem;
+  }
+
   .description {
     max-width: 30rem;
     margin-top: 2rem;
@@ -162,7 +194,8 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .link {
+  .link,
+  .releaseLink {
     transition: none;
   }
 }

website/theme/components/Hero.tsx

@@ -1,9 +1,24 @@
 import { useI18n } from '@rspress/core/runtime';
 import { Link } from '@rspress/core/theme-original';
+import rstackPackage from 'rstack/package.json';
 import { useI18nUrl } from './utils';
 import styles from './Hero.module.scss';
 
 const githubUrl = 'https://github.com/rstackjs/rstack-cli';
+const releasesUrl = `${githubUrl}/releases`;
+
+function ReleaseLink() {
+  return (
+    <a
+      className={styles.releaseLink}
+      href={releasesUrl}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      Latest release v{rstackPackage.version}
+    </a>
+  );
+}
 
 export function Hero() {
   const tUrl = useI18nUrl();
@@ -12,6 +27,8 @@ export function Hero() {
   return (
     <section className={styles.hero} aria-labelledby="home-hero-title">
       <div className={styles.inner}>
+        <ReleaseLink />
+
         <h1 id="home-hero-title" className={styles.title}>
           <span>{t('title')}</span>
           <span className={styles.subtitle}>{t('subtitle')}</span>