/frontend

Frontend for wtf.academy

Primary LanguageJupyter Notebook

WTF Frontend

Getting Started

cp .env.sample .env
pnpm install
pnpm start

命名规范

  • 文件夹名：
    • 组件文件夹：大驼峰命名法
    • 其他文件夹：短横线命名法
  • 文件名：
    • 组件：大驼峰命令
    • context：大驼峰命名
    • hook：小驼峰命名
    • 其他文件：短横线命名法
  • 类型定义：
    • type类型：T + 名字
    • interface类型：I + 名字
    • enum类型：E + 名字
    • 其他类型：名字
  • 变量名：
    • 常量：大写字母 + 下划线
    • 其他变量：小驼峰命名

目录结构

├── docs // 文档相关
├── plugins // docusaurus插件
├── src
│   ├── components // 组件
│   │   ├── ui // 基础UI组件
│   ├── contexts // 全局context
│   ├── hooks  // 全局hook
│   ├── pages  // 页面
│   ├── styles // 全局样式
│   ├── types  // 全局类型定义
│   ├── utils  // 全局工具函数

如何创建一个shadcn组件

1. 创建组件文件

在src/components/ui目录下创建一个文件夹，文件夹名为组件名，组件名使用大驼峰命名法，如Button。

2. 打开shadcn页面，打开Manual Installation选项，按步骤复制代码

3. 变动组件文件内class utils的文件引入路径

import { cn } from "@/lib/utils" --> import { cn } from "@site/src/utils/class-utils"

Q&A

  1. alias使用
使用@site开头的别名路径
  1. pages书写规范
根据docusaurus的规范，pages下的文件夹名为路由名，使用"_"标记的组件不会当做一个页面来创建路由