nsbp-cli 0.2.11 → 0.2.14

package/README.md

@@ -147,7 +147,7 @@ node ./bin/nsbp.js --help  # Test CLI locally
 
 - **Package Name**: `nsbp-cli`
 - **Bin Command**: `nsbp` (install globally and run `nsbp --help`)
-- **Version**: `0.2.11`
+- **Version**: `0.2.14`
 - **Dependencies**: chalk, commander, fs-extra, inquirer
 - **Package Manager**: Uses pnpm (also compatible with npm)
 - **Node Version**: >=16.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nsbp-cli",
-  "version": "0.2.11",
+  "version": "0.2.14",
   "description": "CLI tool for creating NSBP (Node React SSR by Webpack) projects",
   "main": "index.js",
   "homepage": "https://nsbp.erishen.cn/",

package/templates/basic/src/containers/Home.tsx

@@ -52,6 +52,8 @@ import {
   QuickStartTitle,
   QuickStartCode,
   QuickStartDescription,
+  DemoButtonLink,
+  DemoButtonIcon,
   Footer
 } from '../styled/home'
 
@@ -124,10 +126,11 @@ const Home: React.FC = () => {
       }} />
       <Helmet>
         <title>Nsbp.js - 轻量级 React SSR 框架</title>
-        <meta name="description" content="Nsbp.js - 一个轻量级 React SSR 框架，专为低资源部署与高度可定制场景而生。与 Next.js 相比，更节省资源，更灵活配置。" />
+        <meta name="description" content="Nsbp.js - 一个轻量级 React SSR 框架，专为低资源部署与高度可定制场景而生。与 Next.js 相比，更节省资源，更灵活配置。查看线上演示：https://nsbp.erishen.cn/" />
         <meta name="keywords" content="Nsbp.js, React SSR, 轻量级, SSR, TypeScript, React 19" />
         <meta property="og:title" content="Nsbp.js - 轻量级 React SSR 框架" />
-        <meta property="og:description" content="与 Next.js 相比，Nsbp.js 更轻量、更灵活、更可控。" />
+        <meta property="og:description" content="与 Next.js 相比，Nsbp.js 更轻量、更灵活、更可控。查看线上演示：https://nsbp.erishen.cn/" />
+        <meta property="og:url" content="https://nsbp.erishen.cn/" />
       </Helmet>
 
       <Layout query={{}}>
@@ -148,6 +151,17 @@ const Home: React.FC = () => {
                 完全掌控 Webpack 配置，无黑盒限制
               </HeroSubtitle>
 
+              <DemoButtonLink
+                href="https://nsbp.erishen.cn/"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="fade-in"
+                style={{animationDelay: '0.4s'}}
+              >
+                <DemoButtonIcon>🌐</DemoButtonIcon>
+                查看线上演示
+              </DemoButtonLink>
+
               <HeroStats>
                 <StatCard>
                   <StatValue>~60%</StatValue>

package/templates/basic/src/styled/home.ts

@@ -776,6 +776,67 @@ export const QuickStartDescription = styled.p`
   margin-top: 1rem;
 `
 
+// ============================================
+// Demo Button（线上演示按钮）
+// ============================================
+
+export const DemoButtonLink = styled.a`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 1rem 2rem;
+  background: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(10px);
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-radius: 12px;
+  color: #ffffff;
+  font-size: 1.1rem;
+  font-weight: 600;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+    animation: shine 2s infinite;
+  }
+
+  @keyframes shine {
+    0% { left: -100%; }
+    100% { left: 100%; }
+  }
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.25);
+    border-color: rgba(255, 255, 255, 0.5);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+
+  @media (max-width: 768px) {
+    padding: 0.75rem 1.5rem;
+    font-size: 1rem;
+  }
+`
+
+export const DemoButtonIcon = styled.span`
+  font-size: 1.2rem;
+  display: inline-block;
+`
+
 // ============================================
 // Footer
 // ============================================