@modern-js/main-doc 2.70.5 → 2.70.7

package/package.json

@@ -15,14 +15,14 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.70.5",
+  "version": "2.70.7",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
   "dependencies": {
     "mermaid": "^11.4.1",
-    "@modern-js/sandpack-react": "2.70.5"
+    "@modern-js/sandpack-react": "2.70.7"
   },
   "devDependencies": {
     "@rsbuild/plugin-sass": "1.5.0",

package/rspress.config.ts

@@ -11,7 +11,7 @@ export default defineConfig({
   title: 'Modern.js',
   description:
     'The Modern.js framework is a progressive web framework based on React. At ByteDance, we use Modern.js to build upper-level frameworks that have supported the development of thousands of web applications.',
-  base: '/',
+  base: '/v2/',
   logo: 'https://lf-cdn-tos.bytescm.com/obj/static/webinfra/modern-js-website/assets/images/images/modernjs-logo.svg',
   icon: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/favicon.ico',
   lang: 'en',

package/src/i18n/enUS.ts

@@ -1,4 +1,6 @@
 export const EN_US = {
+  upgradeBanner: 'Modern.js 3.0 Release',
+  upgradeBannerTag: 'New',
   introduction: 'Introduction',
   quickStart: 'Quick Start',
 

package/src/i18n/zhCN.ts

@@ -1,6 +1,8 @@
 import type { EN_US } from './enUS';
 
 export const ZH_CN: Record<keyof typeof EN_US, string> = {
+  upgradeBanner: 'Modern.js 3.0 发布',
+  upgradeBannerTag: '新',
   introduction: '介绍',
   quickStart: '快速上手',
 

package/src/pages/index.module.scss

@@ -31,6 +31,71 @@
   padding-top: 20vh;
 }
 
+.upgradeBanner {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  height: 49px;
+  padding: 0 20px;
+  margin-left: 32px;
+  border: 1px solid rgba(78, 202, 255, 0.7);
+  border-radius: 39px;
+  background: linear-gradient(274.85deg, rgba(78, 202, 255, 0.25) 3%, rgba(100, 207, 222, 0.25) 97.17%);
+  color: #b0e6ff;
+  font-size: 14px;
+  font-weight: 500;
+  white-space: nowrap;
+  text-decoration: none;
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  &:hover {
+    background: linear-gradient(274.85deg, rgba(78, 202, 255, 0.35) 3%, rgba(100, 207, 222, 0.35) 97.17%);
+    border-color: #84daff;
+    color: #d0f0ff;
+    text-decoration: none;
+  }
+}
+
+.upgradeBannerNew {
+  position: absolute;
+  top: -10px;
+  left: -10px;
+  padding: 2px 10px 2px 12px;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+  color: #000;
+  background: linear-gradient(135deg, #ffcf5c 0%, #ff8a44 100%);
+  border-radius: 0 4px 4px 0;
+  letter-spacing: 0.5px;
+  transform: rotate(-12deg);
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 0;
+    height: 0;
+    border-top: 11px solid transparent;
+    border-bottom: 11px solid transparent;
+    border-left: 8px solid #000;
+  }
+
+}
+
+.upgradeBannerArrow {
+  font-size: 14px;
+  transition: transform 0.3s ease;
+
+  .upgradeBanner:hover & {
+    transform: translateX(3px);
+  }
+}
+
 .title {
   font-style: normal;
   font-weight: bold;
@@ -146,6 +211,11 @@
     margin-left: 0;
     margin-top: 32px;
   }
+  .upgradeBanner {
+    margin-left: 0;
+    margin-top: 32px;
+    width: 100%;
+  }
   .singleImg {
     max-width: 100%;
   }

package/src/pages/index.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { useEffect } from 'react';
-import { Head, useLocation } from 'rspress/runtime';
+import { Head, useLang, useLocation } from 'rspress/runtime';
 import ContentCard from '../components/ContentCard';
 import { FeatureLayout } from '../components/FeatureLayout';
 import Footer from '../components/Footer';
@@ -8,8 +8,15 @@ import SecondaryTitle from '../components/SecondaryTitle';
 import { useI18n, useUrl } from '../i18n';
 import styles from './index.module.scss';
 
+const UPGRADE_LINKS = {
+  zh: 'https://modernjs.dev/zh',
+  en: 'https://modernjs.dev/',
+} as const;
+
 const HomepageHeader = () => {
   const t = useI18n();
+  const lang = useLang();
+  const upgradeHref = UPGRADE_LINKS[lang === 'zh' ? 'zh' : 'en'];
 
   return (
     <div className={styles.header}>
@@ -37,6 +44,18 @@ const HomepageHeader = () => {
           >
             {t('quickStart')}
           </a>
+          <a
+            href={upgradeHref}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={styles.upgradeBanner}
+          >
+            <span className={styles.upgradeBannerNew}>
+              {t('upgradeBannerTag')}
+            </span>
+            {t('upgradeBanner')}
+            <span className={styles.upgradeBannerArrow}>→</span>
+          </a>
         </div>
       </header>
     </div>