@trapar-waves/react-tailwind 1.1.23 → 1.2.0

package/README.md

@@ -23,6 +23,22 @@
 - **Focus on Code Quality:** Includes ESLint with `@antfu/eslint-config` for linting and enforcing best practices in the codebase.
 - **Git Hooks:** Integrated `husky` and `lint-staged` for pre-commit checks.
 
+## GitHub Pages
+
+Pushing a version tag matching `v*` runs [`.github/workflows/pages.yml`](./.github/workflows/pages.yml), which builds with `BASE_PATH=/<repository-name>/`, copies `dist/index.html` to `dist/404.html` for SPA routing, and deploys to GitHub Pages. In the repository **Settings → Pages**, set **Source** to **GitHub Actions** once.
+
+Local subpath check (Unix-like shell):
+
+```bash
+BASE_PATH=/react-tailwind/ pnpm run build && pnpm preview
+```
+
+PowerShell:
+
+```powershell
+$env:BASE_PATH="/react-tailwind/"; pnpm run build; pnpm preview
+```
+
 ## 💻 Tech Stack
 
 - **Framework/Library:** React (v19)

package/eslint.config.js

@@ -13,4 +13,10 @@ export default antfu({
   formatters: {
     markdown: "prettier",
   },
+}, {
+  name: "trapar/pnpm-workspace-yaml-trust-policy",
+  files: ["pnpm-workspace.yaml"],
+  rules: {
+    "pnpm/yaml-enforce-settings": "off",
+  },
 });

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@trapar-waves/react-tailwind",
   "type": "module",
-  "version": "1.1.23",
-  "packageManager": "pnpm@10.30.0",
+  "version": "1.2.0",
+  "packageManager": "pnpm@10.33.2",
   "description": "A modern UI development template integrating React and Tailwind CSS, with Rsbuild, TypeScript, ESLint (Antfu config), and Iconify support.",
   "author": {
     "email": "admin@rikka.cc",
@@ -32,31 +32,35 @@
   "scripts": {
     "dev": "rsbuild dev --open",
     "build": "rsbuild build",
+    "build:rsdoctor": "cross-env RSDOCTOR=true rsbuild build",
     "preview": "rsbuild preview",
     "lint": "eslint . --cache --max-warnings=0 --no-warn-ignored",
     "postinstall": "husky"
   },
   "dependencies": {
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4"
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^7.4.3",
-    "@eslint-react/eslint-plugin": "^2.13.0",
-    "@iconify/json": "^2.2.440",
-    "@iconify/tailwind4": "^1.2.1",
-    "@rsbuild/core": "^1.7.3",
-    "@rsbuild/plugin-react": "^1.4.5",
-    "@tailwindcss/postcss": "^4.2.0",
+    "@antfu/eslint-config": "^8.2.0",
+    "@eslint-react/eslint-plugin": "^3.0.0",
+    "@iconify/json": "^2.2.467",
+    "@iconify/tailwind4": "^1.2.3",
+    "@rsbuild/core": "^2.0.1",
+    "@rsbuild/plugin-react": "^2.0.0",
+    "@rsdoctor/rspack-plugin": "^1.5.9",
+    "@tailwindcss/postcss": "^4.2.4",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "eslint": "^10.0.0",
-    "eslint-plugin-format": "^1.4.0",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.5.0",
+    "cross-env": "^10.1.0",
+    "eslint": "^10.2.1",
+    "eslint-plugin-format": "^2.0.1",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
     "husky": "^9.1.7",
-    "lint-staged": "^16.2.7",
-    "tailwindcss": "^4.2.0",
-    "typescript": "^5.9.3"
+    "lint-staged": "^16.4.0",
+    "tailwindcss": "^4.2.4",
+    "typescript": "^6.0.3",
+    "unplugin-turbo-console": "^2.3.1"
   }
 }

package/pnpm-workspace.yaml

@@ -1,3 +1,7 @@
+shellEmulator: true
+
+trustPolicy: off
+
 onlyBuiltDependencies:
   - "@tailwindcss/oxide"
   - core-js

package/rsbuild.config.ts

@@ -1,8 +1,35 @@
+import process from "node:process";
 import { defineConfig } from "@rsbuild/core";
 import { pluginReact } from "@rsbuild/plugin-react";
+import { RsdoctorRspackPlugin } from "@rsdoctor/rspack-plugin";
 import tailwind from "@tailwindcss/postcss";
+import TurboConsole from "unplugin-turbo-console/rspack";
+
+function normalizeBasePath(): string {
+  const raw = process.env.BASE_PATH?.trim();
+  if (!raw || raw === "/") {
+    return "/";
+  }
+  const prefixed = raw.startsWith("/") ? raw : `/${raw}`;
+  return prefixed.endsWith("/") ? prefixed : `${prefixed}/`;
+}
+
+const basePath = normalizeBasePath();
+const useSubpath = basePath !== "/";
+
+const enableRsdoctor = Boolean(process.env.RSDOCTOR);
+const enableTurboConsole = process.env.NODE_ENV === "development";
 
 export default defineConfig({
+  ...(useSubpath
+    ? {
+        server: { base: basePath },
+        output: { assetPrefix: basePath },
+      }
+    : {}),
+  performance: {
+    ...(enableRsdoctor ? { buildCache: false } : {}),
+  },
   plugins: [pluginReact()],
   tools: {
     postcss: {
@@ -10,5 +37,22 @@ export default defineConfig({
         plugins: [tailwind],
       },
     },
+    rspack: {
+      plugins: [
+        ...(enableTurboConsole ? [TurboConsole()] : []),
+        ...(enableRsdoctor
+          ? [
+              new RsdoctorRspackPlugin({
+                output: {
+                  mode: "brief",
+                  options: {
+                    type: ["json"],
+                  },
+                },
+              }),
+            ]
+          : []),
+      ],
+    },
   },
 });

package/src/App.css

@@ -1,2 +1,65 @@
-@import 'tailwindcss';
+@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Outfit:wght@400;500;600&display=swap");
+
+@import "tailwindcss";
 @plugin "@iconify/tailwind4";
+
+@theme {
+  --font-display: "Instrument Serif", ui-serif, Georgia, serif;
+  --font-sans: "Outfit", system-ui, sans-serif;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+.skip-link {
+  position: absolute;
+  left: 0.75rem;
+  top: 0.75rem;
+  z-index: 50;
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  background: #0f172a;
+  color: #f8fafc;
+  font-weight: 600;
+  font-size: 0.875rem;
+  text-decoration: none;
+  transform: translateY(-200%);
+  transition: transform 200ms ease-out;
+}
+
+.skip-link:focus {
+  transform: translateY(0);
+  outline: 3px solid #f97316;
+  outline-offset: 2px;
+}
+
+.hero-grid {
+  background-image:
+    linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
+  background-size: 48px 48px;
+}
+
+.trapar-tech-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  border-radius: 0.75rem;
+  background: rgba(255, 255, 255, 0.95);
+  border: 1px solid rgba(234, 88, 12, 0.2);
+  flex-shrink: 0;
+}
+
+.trapar-tech-icon span[class^="icon-"] {
+  font-size: 1.5rem;
+  line-height: 1;
+}

package/src/App.tsx

@@ -1,11 +1,167 @@
 import "./App.css";
 
+const HOMEPAGE = "https://github.com/Trapar-waves/react-tailwind";
+const LOGOS_SET_URL = "https://icon-sets.iconify.design/logos/";
+
+interface TechItem {
+  id: string;
+  label: string;
+  hint: string;
+  iconClass: string;
+}
+
+const techStack: TechItem[] = [
+  { id: "react", label: "React 19", hint: "组件驱动、声明式 UI", iconClass: "icon-[logos--react]" },
+  { id: "ts", label: "TypeScript", hint: "静态类型与编辑器体验", iconClass: "icon-[logos--typescript-icon]" },
+  { id: "tailwind", label: "Tailwind CSS 4", hint: "tailwindcss · @tailwindcss/postcss", iconClass: "icon-[logos--tailwindcss-icon]" },
+  { id: "rsbuild", label: "Rsbuild", hint: "@rsbuild/core · @rsbuild/plugin-react", iconClass: "icon-[material-icon-theme--rstack]" },
+  { id: "eslint", label: "ESLint", hint: "@antfu/eslint-config", iconClass: "icon-[logos--eslint]" },
+  { id: "iconify", label: "Iconify", hint: "@iconify/json · @iconify/tailwind4（含 logos）", iconClass: "icon-[logos--markdown]" },
+  { id: "pnpm", label: "pnpm", hint: "包管理与 CI 缓存", iconClass: "icon-[logos--pnpm]" },
+  { id: "node", label: "Node.js", hint: "本地开发与构建", iconClass: "icon-[logos--nodejs-icon]" },
+  { id: "github", label: "GitHub Actions", hint: "Release 与 Pages 工作流", iconClass: "icon-[logos--github-icon]" },
+];
+
+const readmeFeatures: string[] = [
+  "基于 React 19 的组件化界面。",
+  "Tailwind CSS v4 与 @tailwindcss/postcss，工具类优先、易迭代。",
+  "Rsbuild 提供极速开发与优化构建。",
+  "@iconify/json 与 @iconify/tailwind4，支持 logos 等多集合矢量图标。",
+  "TypeScript 贯穿模板代码。",
+  "@antfu/eslint-config 统一代码风格与规则。",
+  "Husky 与 lint-staged 在提交前执行检查。",
+];
+
+const readmeTechNote = "本模板未内置路由或全局状态；可按业务接入 TanStack Router、Zustand 等，与 README「扩展」章节一致。";
+
 function App() {
   return (
-    <div className="bg-red-200">
-      <h1 className="text-green-800">Rsbuild with React</h1>
-      <p>Start building amazing things with Rsbuild.</p>
-      <span className="icon-[cryptocurrency--btc]"></span>
+    <div className="min-h-dvh bg-[#faf8f5] text-slate-900 font-sans antialiased">
+      <a href="#main" className="skip-link">
+        跳到主要内容
+      </a>
+      <div className="hero-grid relative overflow-hidden border-b border-slate-200/80">
+        <div
+          className="pointer-events-none absolute -right-24 top-0 h-72 w-72 rounded-full bg-orange-500/15 blur-3xl motion-safe:animate-[pulse_14s_ease-in-out_infinite]"
+          aria-hidden
+        />
+        <header className="relative mx-auto max-w-5xl px-6 pb-16 pt-14 sm:px-10 sm:pb-20 sm:pt-20">
+          <p className="font-mono text-xs font-medium uppercase tracking-[0.2em] text-orange-700">
+            Trapar-waves / react-tailwind
+          </p>
+          <h1 className="mt-4 max-w-3xl font-display text-4xl font-normal leading-tight text-slate-950 sm:text-5xl">
+            Rsbuild、React 19 与 Tailwind CSS 4 的轻量起点
+          </h1>
+          <p className="mt-6 max-w-2xl text-lg leading-relaxed text-slate-600">
+            本页结合 README 特性与
+            {" "}
+            <a
+              href={LOGOS_SET_URL}
+              target="_blank"
+              rel="noreferrer"
+              className="font-semibold text-orange-800 underline decoration-orange-300 underline-offset-2 hover:text-orange-950"
+            >
+              Iconify logos
+            </a>
+            {" "}
+            集合展示技术栈；保留 @theme 字体、跳过链接与减少动效等可访问实践。
+          </p>
+          <div className="mt-10 flex flex-wrap items-center gap-4">
+            <a
+              href={HOMEPAGE}
+              className="inline-flex min-h-11 min-w-11 items-center justify-center rounded-full bg-slate-900 px-8 py-3 text-sm font-semibold text-white shadow-lg shadow-slate-900/15 transition hover:bg-slate-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-500"
+            >
+              查看模板仓库
+            </a>
+            <span className="icon-[logos--react] text-3xl text-sky-700" aria-hidden />
+            <span className="icon-[logos--tailwindcss-icon] text-3xl text-cyan-700" aria-hidden />
+            <span className="icon-[material-icon-theme--rstack] text-3xl text-amber-800" aria-hidden />
+          </div>
+        </header>
+      </div>
+
+      <main id="main" className="mx-auto max-w-5xl px-6 py-14 sm:px-10">
+        <h2 className="font-display text-2xl text-slate-900">技术栈一览</h2>
+        <p className="mt-2 max-w-3xl text-sm leading-relaxed text-slate-600">
+          Rsbuild 与 Rspack 生态相关示意使用
+          {" "}
+          <code className="rounded bg-slate-200/80 px-1.5 py-0.5 text-slate-800">material-icon-theme--rstack</code>
+          ；图标集说明见上文链接。
+        </p>
+        <ul className="mt-8 grid list-none gap-4 p-0 sm:grid-cols-2 lg:grid-cols-3">
+          {techStack.map(item => (
+            <li
+              key={item.id}
+              className="flex gap-4 rounded-2xl border border-slate-200/90 bg-white p-5 shadow-sm"
+            >
+              <div className="trapar-tech-icon" aria-hidden>
+                <span className={item.iconClass} />
+              </div>
+              <div>
+                <h3 className="text-base font-semibold text-slate-900">{item.label}</h3>
+                <p className="mt-1 text-sm leading-snug text-slate-600">{item.hint}</p>
+              </div>
+            </li>
+          ))}
+        </ul>
+
+        <h2 className="font-display mt-14 text-2xl text-slate-900">README 特性摘要</h2>
+        <ul className="mt-4 max-w-3xl list-disc space-y-2 pl-5 text-slate-700">
+          {readmeFeatures.map(line => (
+            <li key={line}>{line}</li>
+          ))}
+        </ul>
+        <p className="mt-4 max-w-3xl text-sm italic text-slate-600">{readmeTechNote}</p>
+
+        <section className="mt-12 rounded-2xl border border-slate-200/90 bg-white p-6 shadow-sm" aria-labelledby="a11y-heading">
+          <h2 id="a11y-heading" className="font-display text-xl text-slate-900">
+            图标与可访问性
+          </h2>
+          <p className="mt-3 max-w-3xl text-sm leading-relaxed text-slate-600">
+            装饰性技术标识使用 Iconify
+            <code className="mx-1 rounded bg-slate-100 px-1">logos</code>
+            集合的矢量类名（与源码中实际 slug 一致），并配合
+            <span className="font-medium text-slate-800"> aria-hidden</span>
+            ；主操作区保持约 44px 触控高度与可见焦点环；系统开启「减少动态效果」时装饰动画会缩短。
+          </p>
+          <div className="mt-4 flex flex-wrap gap-3">
+            <span className="icon-[logos--eslint] text-3xl text-purple-800" aria-hidden />
+            <span className="icon-[logos--typescript-icon] text-3xl text-blue-800" aria-hidden />
+            <span className="icon-[logos--github-icon] text-3xl text-slate-800" aria-hidden />
+          </div>
+        </section>
+
+        <h2 className="font-display mt-14 text-2xl text-slate-900">界面骨架示例</h2>
+        <ul className="mt-8 grid gap-6 sm:grid-cols-2">
+          <li className="rounded-2xl border border-slate-200/90 bg-white p-6 shadow-sm transition hover:border-orange-200 hover:shadow-md">
+            <h3 className="text-lg font-semibold text-slate-900">Tailwind 4 + PostCSS</h3>
+            <p className="mt-2 text-slate-600">
+              使用 @theme 扩展字体族，配合 @utility 与任意值快速迭代布局与间距体系。
+            </p>
+          </li>
+          <li className="rounded-2xl border border-slate-200/90 bg-white p-6 shadow-sm transition hover:border-orange-200 hover:shadow-md">
+            <h3 className="text-lg font-semibold text-slate-900">Iconify 图标</h3>
+            <p className="mt-2 text-slate-600">
+              通过 @iconify/tailwind4 以原子类方式引用多集合矢量图标，避免 emoji 替代图标。
+            </p>
+          </li>
+          <li className="rounded-2xl border border-slate-200/90 bg-white p-6 shadow-sm transition hover:border-orange-200 hover:shadow-md">
+            <h3 className="text-lg font-semibold text-slate-900">可访问与动效</h3>
+            <p className="mt-2 text-slate-600">
+              首跳链接、可见焦点环，以及在 prefers-reduced-motion 下弱化装饰性动画。
+            </p>
+          </li>
+          <li className="rounded-2xl border border-slate-200/90 bg-white p-6 shadow-sm transition hover:border-orange-200 hover:shadow-md">
+            <h3 className="text-lg font-semibold text-slate-900">GitHub Pages</h3>
+            <p className="mt-2 text-slate-600">
+              通过 BASE_PATH 子路径构建，在推送版本标签时由 Actions 发布静态站点。
+            </p>
+          </li>
+        </ul>
+      </main>
+      <footer className="border-t border-slate-200/80 bg-white/80 py-8 text-center text-sm text-slate-500">
+        MIT · Trapar-waves · 图标致谢 Iconify logos（CC0）
+      </footer>
     </div>
   );
 }

package/src/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";