🎭 chore: support nextui

.npmrc

@@ -0,0 +1 @@
+public-hoist-pattern[]=*@nextui-org/*

next.config.mjs

@@ -10,5 +10,8 @@ export default withNextra({
   images: {
     unoptimized: true,
   },
-  reactStrictMode: true,
+  transpilePackages: [
+    '@nextui-org/react',
+    '@nextui-org/theme',
+  ],
 })

package.json

@@ -1,26 +1,30 @@
 {
   "name": "nextjs-nextra-starter",
+  "type": "module",
   "version": "0.0.1",
   "description": "Next.js Nextra docs starter",
-  "type": "module",
-  "scripts": {
-    "dev": "next dev -p 8000",
-    "build": "next build",
-    "start": "next start -p 7000",
-    "lint": "eslint .",
-    "lint:fix": "eslint --fix ."
-  },
+  "author": "Wisdom <pdsu.wwz@foxmail.com>",
+  "license": "MIT",
+  "homepage": "https://github.com/pdsuwwz/nextjs-nextra-starter#readme",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/pdsuwwz/nextjs-nextra-starter.git"
   },
-  "author": "Wisdom <pdsu.wwz@foxmail.com>",
-  "license": "MIT",
   "bugs": {
     "url": "https://github.com/pdsuwwz/nextjs-nextra-starter/issues"
   },
-  "homepage": "https://github.com/pdsuwwz/nextjs-nextra-starter#readme",
+  "scripts": {
+    "dev": "next dev -p 8000",
+    "build": "next build",
+    "start": "next start -p 7000",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix ."
+  },
   "dependencies": {
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
+    "@nextui-org/react": "^2.4.6",
+    "framer-motion": "^11.3.21",
     "next": "14.2.5",
     "nextra": "^2.13.4",
     "nextra-theme-docs": "^2.13.4",
@@ -38,6 +42,7 @@
     "eslint-plugin-format": "^0.1.2",
     "eslint-plugin-react-refresh": "^0.4.9",
     "postcss": "^8.4.40",
+    "sass": "^1.77.8",
     "tailwindcss": "^3.4.7",
     "typescript": "^5.5.4"
   }

src/components/HomepageHero/Setup.tsx

@@ -0,0 +1,45 @@
+import Link from 'next/link'
+import { Button } from '@nextui-org/react'
+import styles from '@/components/HomepageHero/SetupHero.module.scss'
+
+interface Props {
+}
+export function SetupHero(props: Props) {
+  return (
+    <div className={styles.container}>
+      <div className={styles.tilesBackground}></div>
+      <div className={styles.tilesGradient}></div>
+      <div className={styles.content}>
+        <div className={styles.badgeContainer}>
+          <a
+            className={styles.badge}
+            href="https://github.com/pdsuwwz/nextjs-nextra-starter"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            轻量级、开箱即用 🎉
+          </a>
+        </div>
+        <h1 className={styles.headline}>
+          ⚡️ Nextra Starter Template
+        </h1>
+        <p className={styles.subtitle}>
+          Next.js + Nextra + TypeScript + Tailwind CSS
+        </p>
+        <div className={styles.actions}>
+          <Button
+            color="primary"
+            variant="shadow"
+            size="lg"
+            href="/introduction"
+            className="group"
+            as={Link}
+          >
+            Get Started
+            <span className="w-[20px] transition-all group-hover:pl-[6px]">→</span>
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/HomepageHero/SetupHero.module.scss

@@ -0,0 +1,150 @@
+.container {
+  position: relative;
+}
+
+.tilesGradient {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-image: linear-gradient(
+    180deg,
+    rgba(229, 231, 235, 0),
+    rgba(229, 231, 235, 0.7)
+  );
+
+  :global(.dark) & {
+    background-image: linear-gradient(
+      180deg,
+      rgba(38, 38, 38, 0.1),
+      rgba(38, 38, 38, 0.7)
+    );
+  }
+}
+
+.tilesBackground {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  // background-image: url('~@/assets/images/hero-tile-light.svg');
+  background-image: url('data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSIxNDIiCiAgaGVpZ2h0PSI3MSIKICB2aWV3Qm94PSIwIDAgMTQyIDcxIgogIGZpbGw9Im5vbmUiCiAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgo+CiAgPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CiAgICA8cmVjdCB4PSIwLjUiIHk9IjAiIHdpZHRoPSI3MCIgaGVpZ2h0PSI3MCIgZmlsbD0iI2ZmZiIgLz4KICAgIDxyZWN0IHg9IjcxLjUiIHk9IjAiIHdpZHRoPSI3MCIgaGVpZ2h0PSI3MCIgZmlsbD0iI2ZmZiIgLz4KICA8L2c+CiAgPGRlZnM+CiAgICA8Y2xpcFBhdGggaWQ9ImNsaXAwIj4KICAgICAgPHJlY3Qgd2lkdGg9IjE0MiIgaGVpZ2h0PSI3MSIgZmlsbD0id2hpdGUiIC8+CiAgICA8L2NsaXBQYXRoPgogIDwvZGVmcz4KPC9zdmc+');
+  background-position: calc(50% - 35.5px) bottom;
+  background-repeat: repeat;
+  background-size: 142px 71px;
+
+  :global(.dark) & {
+    // background-image: url('~@/assets/images/hero-tile-dark.svg');
+    background-image: url('data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSIxNDIiCiAgaGVpZ2h0PSI3MSIKICB2aWV3Qm94PSIwIDAgMTQyIDcxIgogIGZpbGw9Im5vbmUiCiAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgo+CiAgPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CiAgICA8cmVjdCB4PSIwLjUiIHk9IjAiIHdpZHRoPSI3MCIgaGVpZ2h0PSI3MCIgZmlsbD0iIzExMSIgLz4KICAgIDxyZWN0IHg9IjcxLjUiIHk9IjAiIHdpZHRoPSI3MCIgaGVpZ2h0PSI3MCIgZmlsbD0iIzExMSIgLz4KICA8L2c+CiAgPGRlZnM+CiAgICA8Y2xpcFBhdGggaWQ9ImNsaXAwIj4KICAgICAgPHJlY3Qgd2lkdGg9IjE0MiIgaGVpZ2h0PSI3MSIgZmlsbD0id2hpdGUiIC8+CiAgICA8L2NsaXBQYXRoPgogIDwvZGVmcz4KPC9zdmc+');
+  }
+}
+
+.content {
+  margin: 0 auto;
+  position: relative;
+  z-index: 2;
+  padding-bottom: 142px;
+  padding-left: max(env(safe-area-inset-left), 1.5rem);
+  padding-right: max(env(safe-area-inset-right), 1.5rem);
+  max-width: 90rem;
+  text-align: center;
+}
+
+.badgeContainer {
+  margin-top: 4rem;
+}
+
+.badge {
+  padding: 0.5rem 1rem;
+  border-radius: 2em;
+  box-shadow: hsl(204 10% 75%) 0 0 0 1px inset;
+  background: rgba(255, 255, 255, 0.7);
+  color: hsl(204 20% 30%);
+  font-size: 1rem;
+  text-decoration: none;
+  white-space: nowrap;
+  user-select: none;
+  transition: all 0.2s ease;
+
+  &:hover {
+    box-shadow: 0 5px 22px -10px hsl(204 45% 20%);
+    box-shadow: hsl(204 20% 50%) 0 0 0 1px inset;
+  }
+
+  &:active {
+    box-shadow: hsl(204 10% 75%) 0 0 0 1px inset;
+  }
+
+  &:focus-visible {
+    outline: 2px solid
+      hsl(var(--nextra-primary-hue) var(--nextra-primary-saturation) 77%);
+    outline-offset: 2px;
+  }
+
+  :global(.dark) & {
+    background: rgba(17, 17, 17, 0.7);
+    color: hsl(204 10% 70%);
+    box-shadow: hsl(204 10% 25%) 0 0 0 1px inset;
+    text-shadow: 0 1px 1px #000;
+
+    &:hover {
+      background: rgba(17, 17, 17, 1);
+      box-shadow: hsl(204 10% 50%) 0 0 0 1px inset;
+    }
+
+    &:active {
+      box-shadow: hsl(204 10% 25%) 0 0 0 1px inset;
+    }
+  }
+}
+
+.headline {
+  margin-top: 1.5rem;
+  display: inline-flex;
+  background-image: linear-gradient(146deg, #000, #5e6265);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  font-size: 3.125rem;
+  font-size: min(4rem, max(8vw, 2.8rem));
+  font-weight: 700;
+  font-feature-settings: initial;
+  line-height: 1.05;
+  letter-spacing: -0.12rem;
+
+  :global(.dark) & {
+    background-image: linear-gradient(146deg, #fff, #81878b);
+  }
+}
+
+.subtitle {
+  margin-top: 1.25em;
+  color: hsl(204 20% 40%);
+  font-size: 1.3rem;
+  font-size: min(1.3rem, max(3.5vw, 1.1rem));
+  font-feature-settings: initial;
+  font-weight: 400;
+  line-height: 1.6;
+
+  br {
+    display: none;
+
+    @media (min-width: 810px) {
+      display: block;
+    }
+  }
+
+  :global(.dark) & {
+    color: hsl(204, 12%, 50%);
+  }
+}
+
+.actions {
+  margin-top: 1.6em;
+  margin-bottom: 1.4em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.3rem;
+  font-size: min(1.3rem, max(3.5vw, 1.1rem));
+  font-weight: 500;
+}

src/components/HomepageHero/index.tsx

@@ -0,0 +1,25 @@
+import Image from 'next/image'
+import { SetupHero } from './Setup'
+
+export default function HomepageHero() {
+  return (
+    <>
+      <SetupHero />
+      <div className="relative top-[-118px] mb-[-118px] flex justify-center py-[100px] z-[2]">
+        <a
+          href="https://github.com/pdsuwwz/nextjs-nextra-starter"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="w-[150px] h-[100px] flex flex-col items-center gap-[20px]"
+        >
+          <img
+            className="dark:invert"
+            src="/next.svg"
+            style={{ width: '100%', height: 'auto' }}
+          />
+        </a>
+      </div>
+      <div>232323</div>
+    </>
+  )
+}