Merge branch 'main' of git.xiongxiao.me:template/astro-simple-template

astro.config.mjs

@@ -4,15 +4,19 @@ import react from '@astrojs/react';
 import sitemap from '@astrojs/sitemap';
 import pkgs from './package.json';
 import tailwindcss from '@tailwindcss/vite';
+import dotenv from 'dotenv';
+
+dotenv.config();
 const isDev = process.env.NODE_ENV === 'development';
 
-let target = process.env.VITE_API_URL || 'https://localhost:51015';
+let target = process.env.VITE_API_URL || 'http://localhost:51015';
 const apiProxy = { target: target, changeOrigin: true, ws: true, rewriteWsOrigin: true, secure: false, cookieDomainRewrite: 'localhost' };
 let proxy = {
   '/root/': {
     target: `${target}/root/`,
   },
   '/api': apiProxy,
+  '/client': apiProxy,
 };
 
 const basename = isDev ? undefined : `${pkgs.basename}`;
@@ -27,7 +31,7 @@ export default defineConfig({
   vite: {
     plugins: [tailwindcss()],
     define: {
-      basename: JSON.stringify(basename || ''),
+      BASE_NAME: JSON.stringify(basename || ''),
     },
     server: {
       port: 7008,

package.json

@@ -16,20 +16,26 @@
   "license": "MIT",
   "type": "module",
   "dependencies": {
-    "@astrojs/mdx": "^4.3.10",
+    "@astrojs/mdx": "^4.3.12",
     "@astrojs/react": "^4.4.2",
     "@astrojs/sitemap": "^3.6.0",
     "@kevisual/query": "^0.0.29",
-    "@kevisual/query-login": "^0.0.6",
+    "@kevisual/query-login": "^0.0.7",
     "@kevisual/registry": "^0.0.1",
     "@radix-ui/react-slot": "^1.2.4",
     "@tailwindcss/vite": "^4.1.17",
-    "astro": "^5.15.4",
+    "@uiw/react-md-editor": "^4.0.8",
+    "antd": "^6.0.0",
+    "astro": "^5.16.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.19",
-    "es-toolkit": "^1.41.0",
-    "lucide-react": "^0.553.0",
+    "es-toolkit": "^1.42.0",
+    "github-markdown-css": "^5.8.1",
+    "highlight.js": "^11.11.1",
+    "lucide-react": "^0.554.0",
+    "marked": "^17.0.1",
+    "marked-highlight": "^2.2.3",
     "nanoid": "^5.1.6",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
@@ -42,14 +48,13 @@
   },
   "devDependencies": {
     "@kevisual/types": "^0.0.10",
-    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.2",
-    "@vitejs/plugin-basic-ssl": "^2.1.0",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "dotenv": "^17.2.3",
     "tailwindcss": "^4.1.17",
     "tw-animate-css": "^1.4.0"
   },
-  "packageManager": "pnpm@10.20.0",
+  "packageManager": "pnpm@10.23.0",
   "onlyBuiltDependencies": [
     "@tailwindcss/oxide",
     "esbuild",

src/apps/footer.tsx

@@ -0,0 +1,41 @@
+import { wrapBasename } from "@/modules/basename"
+
+export const Footer = () => {
+
+  const links = [
+    {
+      href: wrapBasename('/'),
+      label: '主页',
+    },
+    {
+      href: wrapBasename('/docs'),
+      label: '文档',
+    },
+  ]
+
+  return (
+    <footer className="fixed bottom-0 w-full bg-white border-t border-gray-200 shadow-lg">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+        {/* 链接区域 */}
+        <nav className="flex flex-wrap justify-center items-center gap-2 sm:gap-4 mb-3">
+          {links.map((link) => (
+            <a
+              key={link.href}
+              href={link.href}
+              className="relative px-4 py-2 text-sm sm:text-base font-medium text-gray-600 hover:text-blue-600 transition-all duration-300 ease-in-out
+                         before:absolute before:bottom-0 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 before:transition-all before:duration-300
+                         hover:before:w-full active:scale-95"
+            >
+              {link.label}
+            </a>
+          ))}
+        </nav>
+
+        {/* 版权信息 */}
+        <div className="text-center text-xs sm:text-sm text-gray-500">
+          &copy; 2025 Daily Question
+        </div>
+      </div>
+    </footer>
+  )
+}

src/apps/menu.tsx

@@ -0,0 +1,56 @@
+import { useMemo } from "react";
+
+export type MenuProps = {
+  items: MenuItem[];
+  basename?: string;
+};
+export type MenuItem = {
+  id: string;
+  data: {
+    title: string;
+    tags: string[];
+    hideInMenu?: boolean;
+  }
+}
+export const Menu = (props: MenuProps) => {
+  const { items, basename = '' } = props;
+  const list = useMemo(() => {
+    return items.filter(item => !item.data?.hideInMenu);
+  }, [items]);
+  if (list.length === 0) {
+    return null;
+  }
+  return (
+    <nav className='flex-1 overflow-y-auto scrollbar bg-sidebar border border-sidebar-border rounded-lg p-4 shadow-sm'>
+      <h2 className="text-sm font-semibold text-sidebar-foreground">列表</h2>
+      <div className="space-y-1">
+        {list.map(item => (
+          <a
+            key={item.id}
+            href={`${basename}/docs/${item.id}/`}
+            className="group block rounded-md hover:bg-sidebar-accent transition-all duration-200 ease-in-out"
+          >
+            <div className="px-3 py-2.5">
+              <h3 className="text-sm font-semibold text-sidebar-foreground group-hover:text-sidebar-accent-foreground transition-colors">
+                {item.data?.title}
+              </h3>
+              {item.data?.tags && item.data.tags.length > 0 && (
+                <div className="flex flex-wrap gap-1.5 mt-2">
+                  {item.data.tags.map(tag => (
+                    <span
+                      key={tag}
+                      className="text-xs px-2 py-0.5 rounded-full bg-muted/60 text-muted-foreground font-medium hover:bg-muted transition-colors"
+                    >
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+              )}
+            </div>
+          </a>
+        ))}
+      </div>
+    </nav>
+  );
+}
+

src/content.config.ts

@@ -3,13 +3,20 @@ import { defineCollection, z } from 'astro:content';
 import { glob, file } from 'astro/loaders'; // 不适用于旧版 API
 
 const docs = defineCollection({
-  // loader: glob({ pattern: '**/*.md', base: './src/data/blogs' }),
   loader: glob({ pattern: '**/[^_]*.md', base: './src/data/docs' }),
   schema: z.object({
     title: z.string().optional(),
     description: z.string().optional(),
+    tags: z.array(z.string()).optional(),
     // pubDate: z.coerce.date(),
-    // updatedDate: z.coerce.date().optional(),
+    createdAt: z.coerce.date().optional(),
+    updatedAt: z.coerce.date().optional(),
+    showMenu: z.boolean().optional().default(true),
+    /**
+     * 在侧边栏隐藏该文档
+     */
+    hideInMenu: z.boolean().optional().default(false),
+    order: z.number().optional().default(0),
   }),
 });
 

src/data/docs/menu.md

@@ -0,0 +1,8 @@
+---
+title: 'astro 概览'
+tags: ['astro', 'simple', 'template']
+createdAt: '2025-11-25 20:00:00'
+hideInMenu: true
+---
+
+## 概览

src/data/docs/simpalte-template.md

@@ -1,6 +1,8 @@
 ---
 title: 'astro 例子'
 tags: ['astro', 'simple', 'template']
+createdAt: '2025-11-25 20:00:00'
+hideInMenu: true
 ---
 
 ## astro-simplate-template

src/layouts/mdx.astro

@@ -5,29 +5,34 @@ export interface Props {
 import '../styles/global.css';
 import '../styles/theme.css';
 import 'github-markdown-css/github-markdown-light.css';
-
+import { Menu, MenuItem } from '../apps/menu';
 export interface Props {
   title?: string;
   description?: string;
   lang?: string;
   charset?: string;
+  showMenu?: boolean;
+  menu?: MenuItem[];
+  basename?: string;
 }
 
-const { title = 'Light Code', description = 'A lightweight code editor', lang = 'zh-CN', charset = 'UTF-8' } = Astro.props;
+const {
+  title = 'Light Code',
+  description = 'A lightweight code editor',
+  lang = 'zh-CN',
+  charset = 'UTF-8',
+  showMenu = true,
+  menu,
+  basename = '',
+} = Astro.props;
 ---
 
-<html lang='zh-CN'>
+<html lang={lang}>
   <head>
-    <meta charset='UTF-8' />
+    <meta charset={charset} />
     <meta name='viewport' content='width=device-width, initial-scale=1.0' />
-    <title>Docs</title>
-    <link
-      rel='stylesheet'
-      href='https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.8.1/github-markdown-light.min.css'
-      integrity='sha512-X175XRJAO6PHAUi8AA7GP8uUF5Wiv+w9bOi64i02CHKDQBsO1yy0jLSKaUKg/NhRCDYBmOLQCfKaTaXiyZlLrw=='
-      crossorigin='anonymous'
-      referrerpolicy='no-referrer'
-    />
+    <title>{title}</title>
+    <meta name='description' content={description} />
     <style>
       html,
       body {
@@ -37,25 +42,31 @@ const { title = 'Light Code', description = 'A lightweight code editor', lang =
         padding: 0;
         overflow: hidden;
       }
-      body {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-      }
     </style>
   </head>
-  <body>
-    <div>
+  <body class='flex flex-col items-center bg-background'>
+    <div class='w-full'>
       <slot name='header' />
     </div>
-    <main class='p-2 flex-1 overflow-hidden'>
-      <div class='markdown-body h-full scrollbar border-gray-200 overflow-auto px-6 py-2 w-[800px] border my-4 rounded-md shadow-md'>
-        <slot />
+    <main class='flex-1 flex overflow-hidden w-full max-w-7xl px-4 py-4'>
+      {
+        showMenu && (
+          <aside class='w-64 min-w-64 h-full flex flex-col'>
+            <slot name='menu'>
+              <Menu items={menu!} client:only basename={basename} />
+            </slot>
+          </aside>
+        )
+      }
+      <div class='flex-1 h-full flex items-start justify-center overflow-hidden'>
+        <article class='markdown-body h-full scrollbar overflow-auto px-8 py-6 w-full max-w-4xl border border-border rounded-lg shadow-sm bg-card'>
+          <slot />
+        </article>
       </div>
     </main>
-    <footer>
+    <footer class='w-full border-t border-border bg-card/50 backdrop-blur-sm'>
       <slot name='footer'>
-        <p>Copyrignt &copy; 2025</p>
+        <div class='text-center text-sm text-muted-foreground py-4'>Copyright &copy; 2025</div>
       </slot>
     </footer>
   </body>

src/modules/basename.ts

@@ -2,3 +2,11 @@
 export const basename = BASE_NAME;
 
 console.log(basename);
+
+export const wrapBasename = (path: string) => {
+  if (basename) {
+    return `${basename}${path}/`;
+  } else {
+    return path;
+  }
+}

src/modules/query.ts

@@ -0,0 +1,15 @@
+import { Query } from '@kevisual/query'
+
+const getUrl = () => {
+  const host = window.location.host
+  const isKevisual = host.includes('kevisual');
+  if (isKevisual) {
+    return '/api/router'
+  }
+
+  return '/client/router'
+}
+
+export const query = new Query({
+  url: getUrl()
+});

src/pages/docs/[...id].astro

@@ -1,23 +1,27 @@
 ---
 import { getCollection, render } from 'astro:content';
 import Main from '@/layouts/mdx.astro';
+import { basename } from '@/modules/basename';
 // 1. 为每个集合条目生成一个新路径
 export async function getStaticPaths() {
   const posts = await getCollection('docs');
   return posts.map((post) => ({
     params: { id: post.id },
     props: { post },
+    data: post,
   }));
 }
 type Post = {
-  data: { title: string };
+  data: { title: string; tags: string[]; showMenu?: boolean };
 };
 // 2. 对于你的模板，你可以直接从 prop 获取条目
 const { post } = Astro.props as { post: Post };
 const { Content } = await render(post);
+const showMenu = post.data?.showMenu;
+const staticPaths = await getStaticPaths();
+const menu = staticPaths.map((item) => item.data);
 ---
 
-<Main>
-  <!-- <h1 slot={'header'}>{post.data.title}</h1> -->
+<Main showMenu={showMenu} menu={menu} basename={basename}>
   <Content />
 </Main>

src/pages/docs/index.astro

@@ -1,23 +1,82 @@
 ---
 import { getCollection } from 'astro:content';
 const posts = await getCollection('docs');
-console.log('post', posts);
 import { basename } from '@/modules/basename';
 import Blank from '@/layouts/blank.astro';
 ---
 
 <Blank>
-  <main class='max-w-3xl mx-auto'>
-    <h1>My posts</h1>
-    <ul class='p-2 m-2'>
+  <main class='min-h-screen bg-linear-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800'>
+    <div class='max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12'>
+      {/* 页面标题区域 */}
+      <div class='mb-12'>
+        <h1
+          class='text-4xl sm:text-5xl font-bold text-slate-900 dark:text-white mb-4 bg-clip-text bg-linear-to-r from-blue-600 to-purple-600'>
+          📚 文档列表
+        </h1>
+        <p class='text-slate-600 dark:text-slate-400 text-lg'>浏览所有可用的文档资源</p>
+        <div class='mt-4 h-1 w-20 bg-linear-to-r from-blue-600 to-purple-600 rounded-full'></div>
+      </div>
+
+      {/* 文档列表 */}
+      <div class='space-y-4'>
+        {
+          posts.map((post) => {
+            const tags = post.data.tags || [];
+            return (
+              <article class='group bg-white dark:bg-slate-800 rounded-xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-slate-200 dark:border-slate-700 hover:border-blue-500 dark:hover:border-blue-400'>
+                <div class='p-6'>
+                  {/* 文档标题 */}
+                  <a href={`${basename}/docs/${post.id}/`} class='block'>
+                    <h2 class='text-xl sm:text-2xl font-semibold text-slate-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-200 mb-3'>
+                      {post.data.title}
+                    </h2>
+                  </a>
+
+                  {/* 文档描述(如果有) */}
+                  {post.data.description && <p class='text-slate-600 dark:text-slate-400 mb-4 line-clamp-2'>{post.data.description}</p>}
+
+                  {/* 标签列表 */}
+                  {tags.length > 0 && (
+                    <div class='flex flex-wrap gap-2 mt-4'>
+                      {tags.map((tag) => (
+                        <div class='inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-900/50 transition-colors duration-200 border border-blue-200 dark:border-blue-800'>
+                          <span class='mr-1'>#</span>
+                          {tag}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+
+                  {/* 阅读更多指示器 */}
+                  <a
+                    href={`${basename}/docs/${post.id}/`}
+                    class='mt-4 flex items-center text-blue-600 dark:text-blue-400 text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity duration-200'>
+                    <span>阅读更多</span>
+                    <svg
+                      class='w-4 h-4 ml-1 transform group-hover:translate-x-1 transition-transform duration-200'
+                      fill='none'
+                      viewBox='0 0 24 24'
+                      stroke='currentColor'>
+                      <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5l7 7-7 7' />
+                    </svg>
+                  </a>
+                </div>
+              </article>
+            );
+          })
+        }
+      </div>
+
+      {/* 空状态 */}
       {
-        posts.map((post) => (
-          <li>
-            {/* <a href={`${basename}/demo/${post.id}`}>{post.data.title}</a> */}
-            <a href={`/docs/${post.id}/`}>{post.data.title}</a>
-          </li>
-        ))
+        posts.length === 0 && (
+          <div class='text-center py-16'>
+            <div class='text-6xl mb-4'>📭</div>
+            <p class='text-xl text-slate-600 dark:text-slate-400'>暂无文档</p>
+          </div>
+        )
       }
-    </ul>
+    </div>
   </main>
 </Blank>