feat: add nav

e2e/playground/basic/docs/rpress.config.ts

@@ -2,4 +2,10 @@ import { defineConfig } from 'r-press/dist'
 export default defineConfig({
   title: 'RPress',
   description: 'RPress Playground',
+  themeConfig: {
+    nav: [
+      { text: "主页", link: "/" },
+      { text: "指南", link: "/guide/" },
+    ],
+  },
 })

package.json

@@ -27,6 +27,7 @@
   "devDependencies": {
     "@commitlint/cli": "^17.7.2",
     "@commitlint/config-conventional": "^17.7.0",
+    "@iconify-json/carbon": "^1.1.21",
     "@playwright/test": "^1.26.1",
     "@types/fs-extra": "^11.0.2",
     "@types/hast": "^2.3.4",
@@ -43,6 +44,7 @@
     "execa": "5.1.1",
     "lint-staged": "^14.0.1",
     "prettier": "^3.0.3",
+    "sass": "^1.69.4",
     "simple-git-hooks": "^2.9.0",
     "tsup": "^7.2.0",
     "tsx": "^3.13.0",

src/node/plugin-r-press/config.ts

@@ -1,6 +1,7 @@
-import { relative } from 'path'
-import { SiteConfig } from 'shared/types'
-import { Plugin } from 'vite'
+import { relative, join } from 'path'
+import { ROOT } from 'node/constant'
+import type { SiteConfig } from 'shared/types'
+import type { Plugin } from 'vite'
 
 const SITE_DATA_ID = 'rpress:site-data'
 
@@ -10,6 +11,21 @@ export function pluginConfig(
 ): Plugin {
   return {
     name: 'r-press:site-data',
+    config() {
+      return {
+        root: ROOT,
+        resolve: {
+          alias: {
+            '@runtime': join(ROOT, 'src', 'runtime', 'index.ts'),
+          },
+        },
+        css: {
+          modules: {
+            localsConvention: 'camelCaseOnly',
+          },
+        },
+      }
+    },
     resolveId(id) {
       if (id === SITE_DATA_ID) {
         return '\0' + SITE_DATA_ID

src/node/unocssOptions.ts

@@ -3,6 +3,14 @@ import { presetAttributify, presetWind, presetIcons } from 'unocss'
 
 const options: VitePluginConfig = {
   presets: [presetAttributify(), presetWind({}), presetIcons()],
+  rules: [
+    [
+      /^divider-(\w+)$/,
+      ([, w]) => ({
+        [`border-${w}`]: '1px solid var(--island-c-divider-light)',
+      }),
+    ],
+  ],
 }
 
 export default options

src/runtime/theme-default/Layout/index.tsx

@@ -1,19 +1,12 @@
-import { usePageData } from '../../'
+import { Nav } from '../components/Nav'
+import '../styles/base.css'
+import '../styles/vars.css'
 import 'uno.css'
 
 export function Layout() {
-  const pageData = usePageData()
-  // 获取 pageType
-  const { pageType } = pageData
-  // 根据 pageType 分发不同的页面内容
-  const getContent = () => {
-    if (pageType === 'home') {
-      return <div>Home 页面</div>
-    } else if (pageType === 'doc') {
-      return <div>正文页面</div>
-    } else {
-      return <div>404 页面</div>
-    }
-  }
-  return <div>{getContent()}</div>
+  return (
+    <div>
+      <Nav />
+    </div>
+  )
 }

src/runtime/theme-default/components/Nav/index.module.scss

@@ -0,0 +1,20 @@
+.link:hover {
+  color: var(--island-c-brand);
+  transition: color 0.2s;
+}
+
+.link {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.social-link-icon {
+  display: flex;
+  fill: currentColor;
+  transition: color 0.2s;
+  color: var(--island-c-text-2);
+  &:hover {
+    color: var(--island-c-text-1);
+  }
+}

src/runtime/theme-default/components/Nav/index.tsx

@@ -0,0 +1,55 @@
+import { usePageData } from '../../../'
+import styles from './index.module.scss'
+import type { NavItemWithLink } from 'shared/types'
+
+export function MenuItem(item: NavItemWithLink) {
+  return (
+    <div className="text-sm font-medium mx-3">
+      <a href={item.link} className={styles.link}>
+        {item.text}
+      </a>
+    </div>
+  )
+}
+
+export function Nav() {
+  const { siteData } = usePageData()
+  const nav = siteData.themeConfig.nav || []
+  return (
+    // {/* 视频中包含 relative="~"，属于无效代码，需要去掉 */}
+    <header fixed="~" pos="t-0 l-0" w="full">
+      <div
+        flex="~"
+        items="center"
+        justify="between"
+        // {/* divider-bottom 为自定义规则*/}
+        className="px-8 h-14 divider-bottom"
+      >
+        <div>
+          <a
+            href="/"
+            hover="opacity-60"
+            className="w-full h-full text-1rem font-semibold flex items-center"
+          >
+            Island.js
+          </a>
+        </div>
+        <div flex="~">
+          {/* 普通菜单 */}
+          <div flex="~">
+            {nav.map((item) => (
+              <MenuItem {...item} key={item.text} />
+            ))}
+          </div>
+          {/* 白天/夜间模式切换 */}
+          {/* 相关链接 */}
+          <div className={styles.socialLinkIcon} ml="2">
+            <a href="/">
+              <div className="i-carbon-logo-github w-5 h-5 fill-current"></div>
+            </a>
+          </div>
+        </div>
+      </div>
+    </header>
+  )
+}