docs(website): add release link to homepage hero (#387)

Author: chenjiahan

website/i18n.json

@@ -11,6 +11,10 @@
     "en": "GitHub",
     "zh": "GitHub"
   },
+  "latestRelease": {
+    "en": "Latest release",
+    "zh": "最新版本"
+  },
   "title": {
     "en": "Unified Toolchain for",
     "zh": "统一工具链"

website/theme/components/Hero.module.scss

@@ -1,7 +1,6 @@
 .hero {
   --hero-title: #111214;
-  --hero-title-muted: #747474;
-  --hero-text: #707174;
+  --hero-text: #848484;
   --hero-primary-bg: #111214;
   --hero-primary-bg-hover: #383838;
   --hero-primary-text: #fff;
@@ -15,16 +14,15 @@
   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);
 }
 
 :global(.dark) .hero {
   --hero-title: #f5f5f5;
-  --hero-title-muted: #9a9a9a;
-  --hero-text: #a1a3a6;
+  --hero-text: #9a9a9a;
   --hero-primary-bg: #f2f2f2;
   --hero-primary-bg-hover: #fff;
   --hero-primary-text: #111214;
@@ -44,6 +42,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);
@@ -59,16 +84,16 @@
 }
 
 .subtitle {
-  color: var(--hero-title-muted);
+  color: var(--hero-text);
 }
 
 .description {
   max-width: 42rem;
   margin: clamp(2.5rem, 5vh, 3.75rem) 0 0;
   color: var(--hero-text);
-  font-size: clamp(1rem, 2vw, 1.25rem);
+  font-size: clamp(1rem, 2vw, 1.2rem);
   font-weight: 400;
-  line-height: 1.5;
+  line-height: 1.6;
   letter-spacing: -0.02em;
   text-wrap: balance;
 }
@@ -125,15 +150,15 @@
 
   &:hover {
     color: var(--hero-secondary-text);
-    border-color: var(--hero-title-muted);
+    border-color: var(--hero-text);
     background: var(--hero-secondary-bg-hover);
   }
 }
 
 @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 +167,11 @@
     letter-spacing: -0.055em;
   }
 
+  .releaseLink {
+    margin-bottom: 1.5rem;
+    font-size: 0.8125rem;
+  }
+
   .description {
     max-width: 30rem;
     margin-top: 2rem;
@@ -162,7 +192,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({ label }: { label: string }) {
+  return (
+    <a
+      className={styles.releaseLink}
+      href={releasesUrl}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {label} 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 label={t('latestRelease')} />
+
         <h1 id="home-hero-title" className={styles.title}>
           <span>{t('title')}</span>
           <span className={styles.subtitle}>{t('subtitle')}</span>