diff --git a/code/docs/docs/coding/java/介绍.md b/code/docs/docs/coding/java/介绍.md new file mode 100644 index 00000000..e69de29b diff --git a/code/docs/docs/coding/java/编程/01-基础语法.md b/code/docs/docs/coding/java/编程/01-基础语法.md new file mode 100644 index 00000000..56a6051c --- /dev/null +++ b/code/docs/docs/coding/java/编程/01-基础语法.md @@ -0,0 +1 @@ +1 \ No newline at end of file diff --git a/code/docs/docs/tutorial-extras/_category_.json b/code/docs/docs/coding/java/编程/_category_.json similarity index 67% rename from code/docs/docs/tutorial-extras/_category_.json rename to code/docs/docs/coding/java/编程/_category_.json index a8ffcc19..120e7e54 100644 --- a/code/docs/docs/tutorial-extras/_category_.json +++ b/code/docs/docs/coding/java/编程/_category_.json @@ -1,5 +1,5 @@ { - "label": "Tutorial - Extras", + "label": "编程", "position": 3, "link": { "type": "generated-index" diff --git a/code/docs/docs/coding/react-native/01-介绍.md b/code/docs/docs/coding/react-native/01-介绍.md new file mode 100644 index 00000000..6a19312c --- /dev/null +++ b/code/docs/docs/coding/react-native/01-介绍.md @@ -0,0 +1,9 @@ +[React Native](https://reactnative.dev/) 是一个开源框架，用于构建跨平台的移动应用。它允许开发者使用 React 来构建原生的 iOS 和 Android 应用。 + +主要特点： +- 跨平台开发：通过一次编写代码，React Native 可以在 iOS 和 Android 上运行，大大减少开发时间和成本。 +- 原生性能：React Native 使用原生组件（如按钮、文本框等），提供接近原生应用的性能和用户体验。 +- 热重载：开发者可以实时查看代码修改的效果，而无需重新加载整个应用。 +- 组件化开发：通过 React 的组件化理念，开发者可以更高效地构建和维护应用界面。 +- 丰富的生态系统：React Native 拥有大量的第三方库和工具，帮助开发者快速实现功能。 + diff --git a/code/docs/docs/coding/react-native/expo/01-介绍.md b/code/docs/docs/coding/react-native/expo/01-介绍.md new file mode 100644 index 00000000..cf95acdb --- /dev/null +++ b/code/docs/docs/coding/react-native/expo/01-介绍.md @@ -0,0 +1,8 @@ +[Expo](https://docs.expo.dev/) 是一个基于 React Native 的框架，旨在简化移动应用开发。它提供了一套工具和服务，让开发者可以更快速地构建、测试和发布 React Native 应用。 + +主要特点： +- 快速上手：无需复杂配置，直接在手机上查看代码效果。 +- 内置功能：相机、位置服务、推送通知等常用功能，免去手动集成。 +- 跨平台支持：同一套代码可在 iOS 和 Android 上运行。 +- 热重载：修改代码后，应用会即时更新，提升开发效率。 + diff --git a/code/docs/docs/coding/react-native/expo/02-初始化项目.md b/code/docs/docs/coding/react-native/expo/02-初始化项目.md new file mode 100644 index 00000000..84358aa8 --- /dev/null +++ b/code/docs/docs/coding/react-native/expo/02-初始化项目.md @@ -0,0 +1,22 @@ +创建项目命令： + +```bash +pnpm create expo-app@latest --template blank-typescript +``` + +[官网模板](https://docs.expo.dev/more/create-expo/) 如下： + +| 模板名称 | 描述 | +| ------------------------------------------------------------ | ------------------------------------------------------------ | +| [`default`](https://github.com/expo/expo/tree/main/templates/expo-template-default) | 默认模板，用于构建多页面应用。包含推荐工具，如 **Expo CLI**、**Expo Router** 路由库，并启用 **TypeScript** 配置。适合大多数应用。 | +| [`blank`](https://github.com/expo/expo/tree/main/templates/expo-template-blank) | 最简模板，仅安装最基本依赖，不包含导航配置。 | +| [`blank-typescript`](https://github.com/expo/expo/tree/main/templates/expo-template-blank-typescript) | 空白模板，但启用了 **TypeScript** 支持。 | +| [`tabs`](https://github.com/expo/expo/tree/main/templates/expo-template-tabs) | 启用基于文件的路由系统（Expo Router），并默认使用 **TypeScript**，适合多标签页结构的应用。 | +| [`bare-minimum`](https://github.com/expo/expo/tree/main/templates/expo-template-bare-minimum) | 带有原生目录（`android` 与 `ios`）的空白模板，创建时会自动运行 [`npx expo prebuild`](https://docs.expo.dev/workflow/prebuild)。适合需要直接修改原生代码的项目。 | + +**启动项目：** + +```bash +npx expo start +``` + diff --git a/code/docs/docs/coding/react-native/expo/03-基础配置.md b/code/docs/docs/coding/react-native/expo/03-基础配置.md new file mode 100644 index 00000000..4586dea7 --- /dev/null +++ b/code/docs/docs/coding/react-native/expo/03-基础配置.md @@ -0,0 +1,166 @@ +**生成基础文件**，后面要用到： + +```bash +npx expo customize babel.config.js +npx expo customize metro.config.js +``` + +## 配置eslint格式化 + +可以使用快捷命令（推荐）： + +```bash +pnpm dlx @antfu/eslint-config@latest +``` + +安装： + +```bash +pnpm i -D eslint @antfu/eslint-config +``` + +新建 `eslint.config.mjs` 文件： + +```js +import antfu from '@antfu/eslint-config' + +export default antfu({ + stylistic: { + indent: 2, // 缩进为 2 个空格（可选 4 或 'tab'） + quotes: 'single', // 使用单引号（可选 'double'） + }, + rules: { + 'unused-imports/no-unused-imports': 'warn', + 'unused-imports/no-unused-vars': 'warn', + '@typescript-eslint/no-use-before-define': 'off', // 关闭 TS 的“定义前使用”警告 + 'no-console': 'off', // 关闭 console 报错 + }, +}) +``` + +配置 vscode 模板，修改 `.vscode/settings.json` ： + +> 注意安装 eslint 插件 + +```json +{ + // Disable the default formatter, use eslint instead + "prettier.enable": false, + "editor.formatOnSave": false, + + // Auto fix + "editor.codeActionsOnSave": { + "source.fixAll.eslint": "explicit", + "source.organizeImports": "never" + }, + + // Silent the stylistic rules in you IDE, but still auto fix them + "eslint.rules.customizations": [ + { "rule": "style/*", "severity": "off", "fixable": true }, + { "rule": "format/*", "severity": "off", "fixable": true }, + { "rule": "*-indent", "severity": "off", "fixable": true }, + { "rule": "*-spacing", "severity": "off", "fixable": true }, + { "rule": "*-spaces", "severity": "off", "fixable": true }, + { "rule": "*-order", "severity": "off", "fixable": true }, + { "rule": "*-dangle", "severity": "off", "fixable": true }, + { "rule": "*-newline", "severity": "off", "fixable": true }, + { "rule": "*quotes", "severity": "off", "fixable": true }, + { "rule": "*semi", "severity": "off", "fixable": true } + ], + + // Enable eslint for all supported languages + "eslint.validate": [ + "javascript", + "javascriptreact", + "typescript", + "typescriptreact", + "vue", + "html", + "markdown", + "json", + "jsonc", + "yaml", + "toml", + "xml", + "gql", + "graphql", + "astro", + "svelte", + "css", + "less", + "scss", + "pcss", + "postcss" + ] +} +``` + +## 配置深度链接 + +作用：通过链接就可以跳转到该app。 + +在 `app.json` 文件下进行配置： + +```json +{ + "expo": { + "scheme": "oneao" + } +} +``` + +然后就可以通过这个配置 从别的应用或者浏览器跳转到你的app： + +``` +oneao://courses/react-native +``` + +## 定义 src 路径别名 @ + +> 参考：https://docs.expo.dev/guides/typescript/ + +修改 `tsconfig.json` 文件： + +```json +{ + "extends": "expo/tsconfig.base", + "compilerOptions": { + "baseUrl": "./", + "paths": { + "@/*": ["src/*"] + }, + "strict": true + } +} +``` + +安装 `module-resolver` ： + +``` +pnpm add -D babel-plugin-module-resolver +``` + +修改 `babel.config.js` ： + +```js +module.exports = function (api) { + api.cache(true) + return { + presets: [ + ['babel-preset-expo', { jsxImportSource: 'nativewind' }], + 'nativewind/babel', + ], + plugins: [ + [ + 'module-resolver', + { + root: ['./src'], + alias: { + '@': './src', + }, + }, + ], + ], + } +} +``` diff --git a/code/docs/docs/coding/react-native/expo/04-打包.md b/code/docs/docs/coding/react-native/expo/04-打包.md new file mode 100644 index 00000000..34c7d837 --- /dev/null +++ b/code/docs/docs/coding/react-native/expo/04-打包.md @@ -0,0 +1,189 @@ +## 云打包 +1. 安装 EAS CLI + + ```bash + npm install -g eas-cli + ``` + +2. 注册并登录 Expo 账户 + + - 访问 https://expo.dev/ 注册账户，然后命令行登录： + + ```bash + expo login + ``` + +3. 配置项目构建 + + - 输入以下命令，选择 Android 平台即可。 + + ```bash + eas build:configure + ``` + +4. 构建 Android 包 + + - 默认构建 AAB 包（上传 Google Play）： + + ```bash + eas build --platform android + ``` + + - 构建 APK（可直接安装）： + + ```bash + eas build -p android --profile preview + ``` + +## 本地打包（EAS方式） + +## 本地打包（原生方式） +### 1. 安装 [Android Studio]( https://developer.android.com/?hl=zh-cn) + +1. 下载安装 + + - 按照官网提示依次安装 SDK 工具和必要组件。 + + - 安装完成后，记住 SDK 的安装路径（例如：`D:\data\sdk`，默认位置是：`C:\Users\<你的用户名>\AppData\Local\Android\Sdk`），后续需要用到。 + +2. 配置环境变量 + + - 打开 **系统属性 → 高级 → 环境变量**。 + + - 在 **系统变量** 中新增： + + ``` + 变量名：ANDROID_HOME + 变量值：D:\data\sdk + ``` + + - 在 **Path** 中新增： + + ```bash + %ANDROID_HOME%\platform-tools + %ANDROID_HOME%\tools + %ANDROID_HOME%\tools\bin + ``` + + - 保存设置。 + +3. 验证安装 + + - 打开命令行，执行： + + ``` + echo %ANDROID_HOME% + ``` + + - 如果输出 SDK 路径，则说明配置成功。 + + + +### 2. 安装 [jdk17](https://adoptium.net/zh-CN/temurin/releases?version=8&os=any&arch=any) + +1. 下载安装 + + - 下载对应版本解压即可。 + - 安装成功后，记住 jdk 的安装路径，后续需要用到。 + +2. 配置环境变量 + + - 打开 **系统属性 → 高级 → 环境变量**。 + + - 在 **系统变量** 中新增： + + ```bash + 变量名：JAVA_HOME + 变量值：D:\devtool\jdk\jdk-17.0.16+8 + ``` + + - 在 **Path** 中新增： + + ```bash + %JAVA_HOME%\bin + ``` + + - 保存设置。 + +3. 验证安装 + + - 打开命令行，执行： + + ```bash + java --version + ``` + + - 如果输出 jdk 的信息，则说明配置成功。 + + + +### 3. Expo 项目启用 [Prebuild](https://docs.expo.dev/workflow/prebuild/) + +1. 生成原生项目 + + ```bash + npx expo prebuild + ``` + + 然后执行完毕后，会生成 `android` 目录。 + +2. 清除并重新生成原生项目 + + ```bash + npx expo prebuild --clean + ``` + + 会删除已有的 `android` 和 `ios` 目录，然后重新生成。 + +## 打包体积优化 +方法一：找到 `android/gradle.properties` 文件，找到 `reactNativeArchitectures` ，根据需要删除即可 + +```properties +reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64 +``` + +方法二：原生方法，在 `android/app/build.gradle` 文件中添加或修改以下配置： + +``` +android { + // 其他配置... + + splits { + abi { + enable true // 启用按 CPU 架构拆分 + reset() // 重置默认架构列表 + include 'arm64-v8a', 'armeabi-v7a' + universalApk false // 是否生成包含所有架构的通用 APK（false 表示只生成分架构的独立包） + // 还有一个 exclude 配置是排除指定架构的 + } + } + + // 其他配置... +} +``` + +**说明：** + +- `enable true`：启用架构拆分功能。 +- `reset()`：清空默认的架构配置，避免重复。 +- `include`：指定要生成的架构包，比如只打 `arm64-v8a` 和 `armeabi-v7a`。 +- `universalApk false`：不生成通用包（即包含所有架构的 APK）。 + +**举例：** + +执行打包命令后，将生成多个包，例如： + +``` +app-arm64-v8a-release.apk +app-armeabi-v7a-release.apk +``` + +每个 APK 只包含对应架构的二进制文件，体积更小。 + +如果把 `universalApk` 设置为 `true`，则只会生成一个： + +``` +app-universal-release.apk +``` + +这个包能在 `arm64-v8a` 和 `armeabi-v7a` 架构的设备上运行，但体积最大。 \ No newline at end of file diff --git a/code/docs/docs/coding/react-native/expo/_category_.json b/code/docs/docs/coding/react-native/expo/_category_.json new file mode 100644 index 00000000..ed1ae825 --- /dev/null +++ b/code/docs/docs/coding/react-native/expo/_category_.json @@ -0,0 +1,7 @@ +{ + "label": "expo", + "position": 1, + "link": { + "type": "generated-index" + } +} diff --git a/code/docs/docs/coding/react-native/第三方库/01-nativewind.md b/code/docs/docs/coding/react-native/第三方库/01-nativewind.md new file mode 100644 index 00000000..88bb4537 --- /dev/null +++ b/code/docs/docs/coding/react-native/第三方库/01-nativewind.md @@ -0,0 +1,109 @@ +NativeWind 原子化 CSS 库 +> 官网：https://www.nativewind.dev/docs/getting-started/installation + +1. 安装依赖 + + ```bash + npx expo add nativewind react-native-reanimated react-native-safe-area-context + npx expo add tailwindcss@^3.4.17 -- --save-dev + ``` + +2. 运行 `npx tailwindcss init` 生成 `tailwind.config.js` 文件，添加配置： + + ```js + /** @type {import('tailwindcss').Config} */ + module.exports = { + // NOTE: Update this to include the paths to all files that contain Nativewind classes. + content: ['./App.tsx', './components/**/*.{js,jsx,ts,tsx}'], + presets: [require('nativewind/preset')], + theme: { + extend: {}, + }, + plugins: [], + } + ``` + +3. 创建 `global.css` 文件： + + ```css + @tailwind base; + @tailwind components; + @tailwind utilities; + + ``` + + +注意在全局引入 + +4. 修改 `babel.config.js` 文件： + + > 如果没有该文件，执行 `npx expo customize babel.config.js` 命令创建。 + + ```js + module.exports = function (api) { + api.cache(true) + return { + presets: [ + ['babel-preset-expo', { jsxImportSource: 'nativewind' }], + 'nativewind/babel', + ], + } + } + ``` + +5. 修改 `metro.config.js` 文件： + + > 如果没有该文件，执行 `npx expo customize metro.config.js` 命令创建。 + + ```js + const { getDefaultConfig } = require('expo/metro-config') + const { withNativeWind } = require('nativewind/metro') + + const config = getDefaultConfig(__dirname) + + module.exports = withNativeWind(config, { input: './global.css' }) + ``` + +6. 新建 `src/types/nativewind-env.d.ts` 文件： + + ```ts + /// + ``` + +7. 安装 ` react-native-css-interop` ： + + ```bash + npx expo install react-native-css-interop + ``` + +8. 检验是否生效 + + ```tsx + import { Text, View } from 'react-native' + import './global.css' + + export default function App() { + return ( + + + Welcome to Nativewind! + + + ) + } + ``` + + 如果不生效，记得修改 `tailwind.config.js` 的目标路径： + + ```js + /** @type {import('tailwindcss').Config} */ + module.exports = { + // NOTE: Update this to include the paths to all files that contain Nativewind classes. + content: ['./src/app/_layout.tsx', './src/components/**/*.{js,jsx,ts,tsx}'], + presets: [require('nativewind/preset')], + theme: { + extend: {}, + }, + plugins: [], + } + ``` diff --git a/code/docs/docs/coding/react-native/第三方库/02-gluestack-ui.md b/code/docs/docs/coding/react-native/第三方库/02-gluestack-ui.md new file mode 100644 index 00000000..93939671 --- /dev/null +++ b/code/docs/docs/coding/react-native/第三方库/02-gluestack-ui.md @@ -0,0 +1,290 @@ +Gluestack UI UI 组件库 +> 官网：https://gluestack.io/ui/docs/home/getting-started/installation + +## 方式一：CLI + +```bash +npx gluestack-ui init +``` + +## 方式二：Manual（推荐） + +**前置条件：** 需要安装 `nativewind` + +1. 安装依赖： + + ```bash + npx expo add @gluestack-ui/core @gluestack-ui/utils react-native-svg @gluestack/ui-next-adapter + ``` + +2. 从 [github](https://github.com/gluestack/gluestack-ui/tree/main/src/components/ui/gluestack-ui-provider) 复制必须的组件到 `@/components/ui/gluestack-ui-provider`。 + +3. 修改 `tailwind.config.js` 文件： + + ```bash + /** @type {import('tailwindcss').Config} */ + module.exports = { + darkMode: process.env.DARK_MODE ? process.env.DARK_MODE : 'class', + content: [ + './app/**/*.{html,js,jsx,ts,tsx,mdx}', + './components/**/*.{html,js,jsx,ts,tsx,mdx}', + './utils/**/*.{html,js,jsx,ts,tsx,mdx}', + './*.{html,js,jsx,ts,tsx,mdx}', + './src/**/*.{html,js,jsx,ts,tsx,mdx}', + ], + presets: [require('nativewind/preset')], + important: 'html', + safelist: [ + { + pattern: + // eslint-disable-next-line regexp/no-dupe-disjunctions + /(bg|border|text|stroke|fill)-(primary|secondary|tertiary|error|success|warning|info|typography|outline|background|indicator)-(0|50|100|200|300|400|500|600|700|800|900|950|white|gray|black|error|warning|muted|success|info|light|dark|primary)/, + }, + ], + theme: { + extend: { + colors: { + primary: { + 0: 'rgb(var(--color-primary-0)/)', + 50: 'rgb(var(--color-primary-50)/)', + 100: 'rgb(var(--color-primary-100)/)', + 200: 'rgb(var(--color-primary-200)/)', + 300: 'rgb(var(--color-primary-300)/)', + 400: 'rgb(var(--color-primary-400)/)', + 500: 'rgb(var(--color-primary-500)/)', + 600: 'rgb(var(--color-primary-600)/)', + 700: 'rgb(var(--color-primary-700)/)', + 800: 'rgb(var(--color-primary-800)/)', + 900: 'rgb(var(--color-primary-900)/)', + 950: 'rgb(var(--color-primary-950)/)', + }, + secondary: { + 0: 'rgb(var(--color-secondary-0)/)', + 50: 'rgb(var(--color-secondary-50)/)', + 100: 'rgb(var(--color-secondary-100)/)', + 200: 'rgb(var(--color-secondary-200)/)', + 300: 'rgb(var(--color-secondary-300)/)', + 400: 'rgb(var(--color-secondary-400)/)', + 500: 'rgb(var(--color-secondary-500)/)', + 600: 'rgb(var(--color-secondary-600)/)', + 700: 'rgb(var(--color-secondary-700)/)', + 800: 'rgb(var(--color-secondary-800)/)', + 900: 'rgb(var(--color-secondary-900)/)', + 950: 'rgb(var(--color-secondary-950)/)', + }, + tertiary: { + 50: 'rgb(var(--color-tertiary-50)/)', + 100: 'rgb(var(--color-tertiary-100)/)', + 200: 'rgb(var(--color-tertiary-200)/)', + 300: 'rgb(var(--color-tertiary-300)/)', + 400: 'rgb(var(--color-tertiary-400)/)', + 500: 'rgb(var(--color-tertiary-500)/)', + 600: 'rgb(var(--color-tertiary-600)/)', + 700: 'rgb(var(--color-tertiary-700)/)', + 800: 'rgb(var(--color-tertiary-800)/)', + 900: 'rgb(var(--color-tertiary-900)/)', + 950: 'rgb(var(--color-tertiary-950)/)', + }, + error: { + 0: 'rgb(var(--color-error-0)/)', + 50: 'rgb(var(--color-error-50)/)', + 100: 'rgb(var(--color-error-100)/)', + 200: 'rgb(var(--color-error-200)/)', + 300: 'rgb(var(--color-error-300)/)', + 400: 'rgb(var(--color-error-400)/)', + 500: 'rgb(var(--color-error-500)/)', + 600: 'rgb(var(--color-error-600)/)', + 700: 'rgb(var(--color-error-700)/)', + 800: 'rgb(var(--color-error-800)/)', + 900: 'rgb(var(--color-error-900)/)', + 950: 'rgb(var(--color-error-950)/)', + }, + success: { + 0: 'rgb(var(--color-success-0)/)', + 50: 'rgb(var(--color-success-50)/)', + 100: 'rgb(var(--color-success-100)/)', + 200: 'rgb(var(--color-success-200)/)', + 300: 'rgb(var(--color-success-300)/)', + 400: 'rgb(var(--color-success-400)/)', + 500: 'rgb(var(--color-success-500)/)', + 600: 'rgb(var(--color-success-600)/)', + 700: 'rgb(var(--color-success-700)/)', + 800: 'rgb(var(--color-success-800)/)', + 900: 'rgb(var(--color-success-900)/)', + 950: 'rgb(var(--color-success-950)/)', + }, + warning: { + 0: 'rgb(var(--color-warning-0)/)', + 50: 'rgb(var(--color-warning-50)/)', + 100: 'rgb(var(--color-warning-100)/)', + 200: 'rgb(var(--color-warning-200)/)', + 300: 'rgb(var(--color-warning-300)/)', + 400: 'rgb(var(--color-warning-400)/)', + 500: 'rgb(var(--color-warning-500)/)', + 600: 'rgb(var(--color-warning-600)/)', + 700: 'rgb(var(--color-warning-700)/)', + 800: 'rgb(var(--color-warning-800)/)', + 900: 'rgb(var(--color-warning-900)/)', + 950: 'rgb(var(--color-warning-950)/)', + }, + info: { + 0: 'rgb(var(--color-info-0)/)', + 50: 'rgb(var(--color-info-50)/)', + 100: 'rgb(var(--color-info-100)/)', + 200: 'rgb(var(--color-info-200)/)', + 300: 'rgb(var(--color-info-300)/)', + 400: 'rgb(var(--color-info-400)/)', + 500: 'rgb(var(--color-info-500)/)', + 600: 'rgb(var(--color-info-600)/)', + 700: 'rgb(var(--color-info-700)/)', + 800: 'rgb(var(--color-info-800)/)', + 900: 'rgb(var(--color-info-900)/)', + 950: 'rgb(var(--color-info-950)/)', + }, + typography: { + 0: 'rgb(var(--color-typography-0)/)', + 50: 'rgb(var(--color-typography-50)/)', + 100: 'rgb(var(--color-typography-100)/)', + 200: 'rgb(var(--color-typography-200)/)', + 300: 'rgb(var(--color-typography-300)/)', + 400: 'rgb(var(--color-typography-400)/)', + 500: 'rgb(var(--color-typography-500)/)', + 600: 'rgb(var(--color-typography-600)/)', + 700: 'rgb(var(--color-typography-700)/)', + 800: 'rgb(var(--color-typography-800)/)', + 900: 'rgb(var(--color-typography-900)/)', + 950: 'rgb(var(--color-typography-950)/)', + white: '#FFFFFF', + gray: '#D4D4D4', + black: '#181718', + }, + outline: { + 0: 'rgb(var(--color-outline-0)/)', + 50: 'rgb(var(--color-outline-50)/)', + 100: 'rgb(var(--color-outline-100)/)', + 200: 'rgb(var(--color-outline-200)/)', + 300: 'rgb(var(--color-outline-300)/)', + 400: 'rgb(var(--color-outline-400)/)', + 500: 'rgb(var(--color-outline-500)/)', + 600: 'rgb(var(--color-outline-600)/)', + 700: 'rgb(var(--color-outline-700)/)', + 800: 'rgb(var(--color-outline-800)/)', + 900: 'rgb(var(--color-outline-900)/)', + 950: 'rgb(var(--color-outline-950)/)', + }, + background: { + 0: 'rgb(var(--color-background-0)/)', + 50: 'rgb(var(--color-background-50)/)', + 100: 'rgb(var(--color-background-100)/)', + 200: 'rgb(var(--color-background-200)/)', + 300: 'rgb(var(--color-background-300)/)', + 400: 'rgb(var(--color-background-400)/)', + 500: 'rgb(var(--color-background-500)/)', + 600: 'rgb(var(--color-background-600)/)', + 700: 'rgb(var(--color-background-700)/)', + 800: 'rgb(var(--color-background-800)/)', + 900: 'rgb(var(--color-background-900)/)', + 950: 'rgb(var(--color-background-950)/)', + error: 'rgb(var(--color-background-error)/)', + warning: 'rgb(var(--color-background-warning)/)', + muted: 'rgb(var(--color-background-muted)/)', + success: 'rgb(var(--color-background-success)/)', + info: 'rgb(var(--color-background-info)/)', + light: '#FBFBFB', + dark: '#181719', + }, + indicator: { + primary: 'rgb(var(--color-indicator-primary)/)', + info: 'rgb(var(--color-indicator-info)/)', + error: 'rgb(var(--color-indicator-error)/)', + }, + }, + fontFamily: { + 'heading': undefined, + 'body': undefined, + 'mono': undefined, + 'jakarta': ['var(--font-plus-jakarta-sans)'], + 'roboto': ['var(--font-roboto)'], + 'code': ['var(--font-source-code-pro)'], + 'inter': ['var(--font-inter)'], + 'space-mono': ['var(--font-space-mono)'], + }, + fontWeight: { + extrablack: '950', + }, + fontSize: { + '2xs': '10px', + }, + boxShadow: { + 'hard-1': '-2px 2px 8px 0px rgba(38, 38, 38, 0.20)', + 'hard-2': '0px 3px 10px 0px rgba(38, 38, 38, 0.20)', + 'hard-3': '2px 2px 8px 0px rgba(38, 38, 38, 0.20)', + 'hard-4': '0px -3px 10px 0px rgba(38, 38, 38, 0.20)', + 'hard-5': '0px 2px 10px 0px rgba(38, 38, 38, 0.10)', + 'soft-1': '0px 0px 10px rgba(38, 38, 38, 0.1)', + 'soft-2': '0px 0px 20px rgba(38, 38, 38, 0.2)', + 'soft-3': '0px 0px 30px rgba(38, 38, 38, 0.1)', + 'soft-4': '0px 0px 40px rgba(38, 38, 38, 0.1)', + }, + }, + }, + } + ``` + +4. 使用 `GluestackUIProvider` 包括着整个组件： + + ```tsx + // App.tsx + import { GluestackUIProvider } from '@/components/ui/gluestack-ui-provider' + import '@/global.css' // Make sure this path is correct + + export default function App() { + return ( + {/* Add your app code here */} + ) + } + ``` + +## 测试 + +下载对应组件： + +```bash +npx gluestack-ui add button +``` + +引入使用： + +```tsx +import { StyleSheet, Text, View } from 'react-native' +import { SafeAreaView } from 'react-native-safe-area-context' +import { Button, ButtonText } from '@/components/ui/button' +import { GluestackUIProvider } from '@/components/ui/gluestack-ui-provider' +import '@/styles/global.css' + +export default function Layout() { + return ( + + + + + Welcome to Nativewind! + + + + + + + ) +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: '#f5f5f5', + paddingHorizontal: 16, + } +}) +``` diff --git a/code/docs/docs/coding/react-native/第三方库/03-lucide.md b/code/docs/docs/coding/react-native/第三方库/03-lucide.md new file mode 100644 index 00000000..895a3bec --- /dev/null +++ b/code/docs/docs/coding/react-native/第三方库/03-lucide.md @@ -0,0 +1,6 @@ +Lucide 是一个轻量级、开源的图标库 +> 官网：https://lucide.dev/icons/ + +```bash +npx expo add lucide-react-native +``` \ No newline at end of file diff --git a/code/docs/docs/coding/react-native/第三方库/_category_.json b/code/docs/docs/coding/react-native/第三方库/_category_.json new file mode 100644 index 00000000..d3c62634 --- /dev/null +++ b/code/docs/docs/coding/react-native/第三方库/_category_.json @@ -0,0 +1,7 @@ +{ + "label": "第三方库", + "position": 2, + "link": { + "type": "generated-index" + } +} diff --git a/code/docs/docs/dev-tools/docusaurus/01-介绍.md b/code/docs/docs/dev-tools/docusaurus/01-介绍.md new file mode 100644 index 00000000..fcbde995 --- /dev/null +++ b/code/docs/docs/dev-tools/docusaurus/01-介绍.md @@ -0,0 +1,34 @@ +Docusaurus 是一个开源的静态网站生成器，专注于帮助开发者快速构建、部署和维护文档类网站。 +> 官网：https://docusaurus.io/zh-CN/ + +## 优点 +- 高度自定义： + - 使用 react 开发，并支持自定义扩展组件或自定义页面 + - 提供 swizzle 命令可完全自定义布局 +- 基础页面干净整洁，可快速捕捉到关键信息 +- 社区群庞大，拥有广大的社区支持 +- 同时支持 docs（文档） 和 blog（博客），能够有更多的选择 + +## 快速开始 + +### 1.环境要求 +- Node版本最低 20 + +### 2.安装 +```bash +npx create-docusaurus@latest my-website classic +``` +如果需要支持 `typescript`，则使用 +```bash +npx create-docusaurus@latest my-website classic --typescript +``` + +### 3.运行 +下载依赖 +```bash +pnpm i +``` +运行项目 +```bash +pnpm run start +``` \ No newline at end of file diff --git a/code/docs/docs/dev-tools/docusaurus/02-项目结构.md b/code/docs/docs/dev-tools/docusaurus/02-项目结构.md new file mode 100644 index 00000000..59972a65 --- /dev/null +++ b/code/docs/docs/dev-tools/docusaurus/02-项目结构.md @@ -0,0 +1,35 @@ +默认的项目结构如下 +```text +my-website +├── blog +│ ├── 2019-05-28-hola.md +│ ├── 2019-05-29-hello-world.md +│ └── 2020-05-30-welcome.md +├── docs +│ ├── doc1.md +│ ├── doc2.md +│ ├── doc3.md +│ └── mdx.md +├── src +│ ├── css +│ │ └── custom.css +│ └── pages +│ ├── styles.module.css +│ └── index.ts +├── static +│ └── img +├── docusaurus.config.ts +├── package.json +├── README.md +├── sidebars.ts +└── yarn.lock +``` + +目录介绍： + +- `blog` - 存放博客文章，格式是 Markdown +- `docs` - 存放文档内容，也用 Markdown 格式 +- `src` - 存放自定义的页面和样式。 +- `static` - 存放自定义的页面和样式 +- `docusaurus.config.ts` - 配置网站的各种信息 +- `sidebars.ts` - 配置 docs 侧边栏的内容和结构 \ No newline at end of file diff --git a/code/docs/docs/dev-tools/docusaurus/03-docs-文档.md b/code/docs/docs/dev-tools/docusaurus/03-docs-文档.md new file mode 100644 index 00000000..bb9a9a99 --- /dev/null +++ b/code/docs/docs/dev-tools/docusaurus/03-docs-文档.md @@ -0,0 +1,123 @@ +关于文档的创建和配置 + +## 1. navbar 配置 + +在 `docusaurus.config.ts` 文件中进行配置， `config` - `themeConfig` - `navbar` - `items` + +### 1.1 单级导航 + +在 `docs` 文件夹下创建 `test.md` 文件，并在 `items` 配置项中添加： + +```json +{ + // ... + "items": [ + { + "to": "/docs/test", + "label": "test" + } + ] +} +``` + +刷新页面，即可进行预览 + +### 1.2 多级导航 + +docusaurus 的 navbar 最多支持两级导航，比如： + +```json +{ + // ... + "items": [ + { + "type": "dropdown", + "label": "编程语言", + "position": "left", + "items": [ + { + "label": "Stack Overflow", + "href": "https://stackoverflow.com/questions/tagged/docusaurus" + }, + { + "label": "Discord", + "href": "https://discordapp.com/invite/docusaurus" + } + ] + } + ] +} +``` + +## 2. 侧边栏配置 + +docs 的侧边栏配置主要在 `sidebars.ts` 文件中 + +### 2.1 自动生成 + +在 docs 目录中创建 `coding/java` 目录，在 `sidebar.ts` 文件中添加配置： + +```ts +import type { SidebarsConfig } from '@docusaurus/plugin-content-docs' + +const sidebars: SidebarsConfig = { + // coding 目录下的自动生成的 Java 相关文档 + javaSidebar: [{ type: 'autogenerated', dirName: 'coding/java' }] +} + +export default sidebars +``` + +修改 `docusaurus.config.ts` 文件： + +```json +{ + // ... + "items": [ + { + "type": "dropdown", + "label": "编程语言", + "position": "left", + "items": [ + { + "type": "docSidebar", + "label": "Java", + "sidebarId": "javaSidebar" + } + ] + } + ] +} +``` + +提示： + +- `sidebarId` 需要和 `SidebarsConfig` 中的 key 保持一致 +- `type: 'autogenerated'` 表示自动生成 +- **自动生成模式下 将自动根据目录和目录下的文件自动构建侧边栏** + +### 2.2 手动配置 + +```ts +import type { SidebarsConfig } from '@docusaurus/plugin-content-docs' + +const sidebars: SidebarsConfig = { + // 手动配置的侧边栏 + javaSidebar: [ + { + type: 'category', + label: 'Java 基础', + items: ['coding/java/intro', 'coding/java/advanced'], + }, + { + type: 'category', + label: 'Java 框架', + items: ['coding/java/spring-boot', 'coding/java/hibernate'], + }, + ] +} + +export default sidebars +``` + + diff --git a/code/docs/docs/dev-tools/docusaurus/04-blog-博客.md b/code/docs/docs/dev-tools/docusaurus/04-blog-博客.md new file mode 100644 index 00000000..e69de29b diff --git a/code/docs/docs/dev-tools/docusaurus/插件/01-algolia-全局搜索.md b/code/docs/docs/dev-tools/docusaurus/插件/01-algolia-全局搜索.md new file mode 100644 index 00000000..22dc053e --- /dev/null +++ b/code/docs/docs/dev-tools/docusaurus/插件/01-algolia-全局搜索.md @@ -0,0 +1,119 @@ +> 具体可参考：https://docusaurus.io/zh-CN/docs/search + +Algolia 是一个强大的搜索引擎平台，专注于提供快速、可定制的搜索功能。它通常用于为网站、应用或文档提供实时搜索和自动完成功能。 + +## 1. 获取 appId 和 apiKey + +1. 先到 [官网](https://dashboard.algolia.com) 注册，大概两天后会收到邮件通知注册成功，再接着往下操作 +2. 登录 +3. 创建一个新的 Application，选择左边的免费版本进行下一步 +4. 定义 index_name，选择响应快的服务进行创建。到这一步就创建成功了 +5. 打开 API keys，获取三个需要的字段 Application ID、Search-Only API key、Admin API key + +## 2. 修改 docusaurus.config.js + +```json +{ + "config": { + "themeConfig": { + "algolia": { + "appId": "填写申请的appId", + "apiKey": "填写申请的apiKey", + "indexName": "填写申请的indexName" + } + } + } +} +``` + +这样就会自动在 `navbar` 添加个搜索框 + +## 3. 新增 `docsearch.json` 配置文件 +注意将信息换成自己的信息 + +```json +{ + // 需要替换 + "index_name": "xxx", + // 需要替换。网站网址 + "start_urls": ["xxx"], + // 需要替换。sitemap的网址，docusaurus 默认在根目录下生成 sitemap.xml + "sitemap_urls": ["xxx"], + "selectors": { + "lvl0": { + "selector": "(//ul[contains(@class,'menu__list')]//a[contains(@class, 'menu__link menu__link--sublist menu__link--active')]/text() | //nav[contains(@class, 'navbar')]//a[contains(@class, 'navbar__link--active')]/text())[last()]", + "type": "xpath", + "global": true, + "default_value": "Documentation" + }, + "lvl1": "header h1, article h1", + "lvl2": "article h2", + "lvl3": "article h3", + "lvl4": "article h4", + "lvl5": "article h5, article td:first-child", + "lvl6": "article h6", + "text": "article p, article li, article td:last-child" + }, + "custom_settings": { + "attributesForFaceting": [ + "type", + "lang", + "language", + "version", + "docusaurus_tag" + ], + "attributesToRetrieve": [ + "hierarchy", + "content", + "anchor", + "url", + "url_without_anchor", + "type" + ], + "attributesToHighlight": ["hierarchy", "content"], + "attributesToSnippet": ["content:10"], + "camelCaseAttributes": ["hierarchy", "content"], + "searchableAttributes": [ + "unordered(hierarchy.lvl0)", + "unordered(hierarchy.lvl1)", + "unordered(hierarchy.lvl2)", + "unordered(hierarchy.lvl3)", + "unordered(hierarchy.lvl4)", + "unordered(hierarchy.lvl5)", + "unordered(hierarchy.lvl6)", + "content" + ], + "distinct": true, + "attributeForDistinct": "url", + "customRanking": [ + "desc(weight.pageRank)", + "desc(weight.level)", + "asc(weight.position)" + ], + "ranking": [ + "words", + "filters", + "typo", + "attribute", + "proximity", + "exact", + "custom" + ], + "highlightPreTag": "", + "highlightPostTag": "", + "minWordSizefor1Typo": 3, + "minWordSizefor2Typos": 7, + "allowTyposOnNumericTokens": false, + "minProximity": 1, + "ignorePlurals": true, + "advancedSyntax": true, + "attributeCriteriaComputedByMinProximity": true, + "removeWordsIfNoResults": "allOptional", + "separatorsToIndex": "_", + "synonyms": [ + ["js", "javascript"], + ["ts", "typescript"] + ] + } +} +``` diff --git a/code/docs/docs/dev-tools/docusaurus/部署/nginx.md b/code/docs/docs/dev-tools/docusaurus/部署/nginx.md new file mode 100644 index 00000000..e69de29b diff --git a/code/docs/docs/dev-tools/git/01-介绍.md b/code/docs/docs/dev-tools/git/01-介绍.md new file mode 100644 index 00000000..e69de29b diff --git a/code/docs/docs/dev-tools/git/02-基础使用.md b/code/docs/docs/dev-tools/git/02-基础使用.md new file mode 100644 index 00000000..e69de29b diff --git a/code/docs/docs/dev-tools/git/assets/基础使用/a30a9158772f0d90f1489d0549c82ea8.png b/code/docs/docs/dev-tools/git/assets/基础使用/a30a9158772f0d90f1489d0549c82ea8.png new file mode 100644 index 00000000..a6902e6a Binary files /dev/null and b/code/docs/docs/dev-tools/git/assets/基础使用/a30a9158772f0d90f1489d0549c82ea8.png differ diff --git a/code/docs/docs/dev-tools/git/assets/基础使用/e52275e4370605057995993c4931d483.png b/code/docs/docs/dev-tools/git/assets/基础使用/e52275e4370605057995993c4931d483.png new file mode 100644 index 00000000..74dcee54 Binary files /dev/null and b/code/docs/docs/dev-tools/git/assets/基础使用/e52275e4370605057995993c4931d483.png differ diff --git a/code/docs/docs/intro.md b/code/docs/docs/intro.md deleted file mode 100644 index 0411a1c6..00000000 --- a/code/docs/docs/intro.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -sidebar_position: 1 ---- - -# Tutorial Intro - - Let's discover **Docusaurus in less than 5 minutes**. - -## Getting Started - -Get started by **creating a new site**. - -Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**. - -### What you'll need - -- [Node.js](https://nodejs.org/en/download/) version 20.0 or above: - - When installing Node.js, you are recommended to check all checkboxes related to dependencies. - -## Generate a new site - -Generate a new Docusaurus site using the **classic template**. - -The classic template will automatically be added to your project after you run the command: - -```bash -npm init docusaurus@latest my-website classic -``` - -You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor. - -The command also installs all necessary dependencies you need to run Docusaurus. - -## Start your site - -Run the development server: - -```bash -cd my-website -npm run start -``` - -The `cd` command changes the directory you're working with. In order to work with your newly created Docusaurus site, you'll need to navigate the terminal there. - -The `npm run start` command builds your website locally and serves it through a development server, ready for you to view at http://localhost:3000/. - -Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes. diff --git a/code/docs/docs/test.md b/code/docs/docs/test.md new file mode 100644 index 00000000..e69de29b diff --git a/code/docs/docs/tutorial-basics/_category_.json b/code/docs/docs/tutorial-basics/_category_.json deleted file mode 100644 index 2e6db55b..00000000 --- a/code/docs/docs/tutorial-basics/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Tutorial - Basics", - "position": 2, - "link": { - "type": "generated-index", - "description": "5 minutes to learn the most important Docusaurus concepts." - } -} diff --git a/code/docs/docs/tutorial-basics/congratulations.md b/code/docs/docs/tutorial-basics/congratulations.md deleted file mode 100644 index 04771a00..00000000 --- a/code/docs/docs/tutorial-basics/congratulations.md +++ /dev/null @@ -1,23 +0,0 @@ ---- -sidebar_position: 6 ---- - -# Congratulations! - -You have just learned the **basics of Docusaurus** and made some changes to the **initial template**. - -Docusaurus has **much more to offer**! - -Have **5 more minutes**? Take a look at **[versioning](../tutorial-extras/manage-docs-versions.md)** and **[i18n](../tutorial-extras/translate-your-site.md)**. - -Anything **unclear** or **buggy** in this tutorial? [Please report it!](https://github.com/facebook/docusaurus/discussions/4610) - -## What's next? - -- Read the [official documentation](https://docusaurus.io/) -- Modify your site configuration with [`docusaurus.config.js`](https://docusaurus.io/docs/api/docusaurus-config) -- Add navbar and footer items with [`themeConfig`](https://docusaurus.io/docs/api/themes/configuration) -- Add a custom [Design and Layout](https://docusaurus.io/docs/styling-layout) -- Add a [search bar](https://docusaurus.io/docs/search) -- Find inspirations in the [Docusaurus showcase](https://docusaurus.io/showcase) -- Get involved in the [Docusaurus Community](https://docusaurus.io/community/support) diff --git a/code/docs/docs/tutorial-basics/create-a-blog-post.md b/code/docs/docs/tutorial-basics/create-a-blog-post.md deleted file mode 100644 index 550ae17e..00000000 --- a/code/docs/docs/tutorial-basics/create-a-blog-post.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -sidebar_position: 3 ---- - -# Create a Blog Post - -Docusaurus creates a **page for each blog post**, but also a **blog index page**, a **tag system**, an **RSS** feed... - -## Create your first Post - -Create a file at `blog/2021-02-28-greetings.md`: - -```md title="blog/2021-02-28-greetings.md" ---- -slug: greetings -title: Greetings! -authors: - - name: Joel Marcey - title: Co-creator of Docusaurus 1 - url: https://github.com/JoelMarcey - image_url: https://github.com/JoelMarcey.png - - name: Sébastien Lorber - title: Docusaurus maintainer - url: https://sebastienlorber.com - image_url: https://github.com/slorber.png -tags: [greetings] ---- - -Congratulations, you have made your first post! - -Feel free to play around and edit this post as much as you like. -``` - -A new blog post is now available at [http://localhost:3000/blog/greetings](http://localhost:3000/blog/greetings). diff --git a/code/docs/docs/tutorial-basics/create-a-document.md b/code/docs/docs/tutorial-basics/create-a-document.md deleted file mode 100644 index 5638bb63..00000000 --- a/code/docs/docs/tutorial-basics/create-a-document.md +++ /dev/null @@ -1,57 +0,0 @@ ---- -sidebar_position: 2 ---- - -# Create a Document - -Documents are **groups of pages** connected through: - -- a **sidebar** -- **previous/next navigation** -- **versioning** - -## Create your first Doc - -Create a Markdown file at `docs/hello.md`: - -```md title="docs/hello.md" -# Hello - -This is my **first Docusaurus document**! -``` - -A new document is now available at [http://localhost:3000/docs/hello](http://localhost:3000/docs/hello). - -## Configure the Sidebar - -Docusaurus automatically **creates a sidebar** from the `docs` folder. - -Add metadata to customize the sidebar label and position: - -```md title="docs/hello.md" {1-4} ---- -sidebar_label: "Hi!" -sidebar_position: 3 ---- - -# Hello - -This is my **first Docusaurus document**! -``` - -It is also possible to create your sidebar explicitly in `sidebars.js`: - -```js title="sidebars.js" -export default { - tutorialSidebar: [ - "intro", - // highlight-next-line - "hello", - { - type: "category", - label: "Tutorial", - items: ["tutorial-basics/create-a-document"], - }, - ], -}; -``` diff --git a/code/docs/docs/tutorial-basics/create-a-page.md b/code/docs/docs/tutorial-basics/create-a-page.md deleted file mode 100644 index a2cb8eda..00000000 --- a/code/docs/docs/tutorial-basics/create-a-page.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -sidebar_position: 1 ---- - -# Create a Page - -Add **Markdown or React** files to `src/pages` to create a **standalone page**: - -- `src/pages/index.js` → `localhost:3000/` -- `src/pages/foo.md` → `localhost:3000/foo` -- `src/pages/foo/bar.js` → `localhost:3000/foo/bar` - -## Create your first React Page - -Create a file at `src/pages/my-react-page.js`: - -```jsx title="src/pages/my-react-page.js" -import React from "react"; -import Layout from "@theme/Layout"; - -export default function MyReactPage() { - return ( - -

My React page

-

This is a React page

- - ); -} -``` - -A new page is now available at [http://localhost:3000/my-react-page](http://localhost:3000/my-react-page). - -## Create your first Markdown Page - -Create a file at `src/pages/my-markdown-page.md`: - -```mdx title="src/pages/my-markdown-page.md" -# My Markdown page - -This is a Markdown page -``` - -A new page is now available at [http://localhost:3000/my-markdown-page](http://localhost:3000/my-markdown-page). diff --git a/code/docs/docs/tutorial-basics/deploy-your-site.md b/code/docs/docs/tutorial-basics/deploy-your-site.md deleted file mode 100644 index 1c50ee06..00000000 --- a/code/docs/docs/tutorial-basics/deploy-your-site.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -sidebar_position: 5 ---- - -# Deploy your site - -Docusaurus is a **static-site-generator** (also called **[Jamstack](https://jamstack.org/)**). - -It builds your site as simple **static HTML, JavaScript and CSS files**. - -## Build your site - -Build your site **for production**: - -```bash -npm run build -``` - -The static files are generated in the `build` folder. - -## Deploy your site - -Test your production build locally: - -```bash -npm run serve -``` - -The `build` folder is now served at [http://localhost:3000/](http://localhost:3000/). - -You can now deploy the `build` folder **almost anywhere** easily, **for free** or very small cost (read the **[Deployment Guide](https://docusaurus.io/docs/deployment)**). diff --git a/code/docs/docs/tutorial-basics/markdown-features.mdx b/code/docs/docs/tutorial-basics/markdown-features.mdx deleted file mode 100644 index 0c590285..00000000 --- a/code/docs/docs/tutorial-basics/markdown-features.mdx +++ /dev/null @@ -1,153 +0,0 @@ ---- -sidebar_position: 4 ---- - -# Markdown Features - -Docusaurus supports **[Markdown](https://daringfireball.net/projects/markdown/syntax)** and a few **additional features**. - -## Front Matter - -Markdown documents have metadata at the top called [Front Matter](https://jekyllrb.com/docs/front-matter/): - -```text title="my-doc.md" -// highlight-start ---- -id: my-doc-id -title: My document title -description: My document description -slug: /my-custom-url ---- -// highlight-end - -## Markdown heading - -Markdown text with [links](./hello.md) -``` - -## Links - -Regular Markdown links are supported, using url paths or relative file paths. - -```md -Let's see how to [Create a page](/create-a-page). -``` - -```md -Let's see how to [Create a page](./create-a-page.md). -``` - -**Result:** Let's see how to [Create a page](./create-a-page.md). - -## Images - -Regular Markdown images are supported. - -You can use absolute paths to reference images in the static directory (`static/img/docusaurus.png`): - -```md -![Docusaurus logo](/img/docusaurus.png) -``` - -![Docusaurus logo](/img/docusaurus.png) - -You can reference images relative to the current file as well. This is particularly useful to colocate images close to the Markdown files using them: - -```md -![Docusaurus logo](./img/docusaurus.png) -``` - -## Code Blocks - -Markdown code blocks are supported with Syntax highlighting. - -````md -```jsx title="src/components/HelloDocusaurus.js" -function HelloDocusaurus() { - return

Hello, Docusaurus!

; -} -``` -```` - -```jsx title="src/components/HelloDocusaurus.js" -function HelloDocusaurus() { - return

Hello, Docusaurus!

; -} -``` - -## Admonitions - -Docusaurus has a special syntax to create admonitions and callouts: - -```md -:::tip My tip - -Use this awesome feature option - -::: - -:::danger Take care - -This action is dangerous - -::: -``` - -:::tip My tip - -Use this awesome feature option - -::: - -:::danger Take care - -This action is dangerous - -::: - -## MDX and React Components - -[MDX](https://mdxjs.com/) can make your documentation more **interactive** and allows using any **React components inside Markdown**: - -```jsx -export const Highlight = ({children, color}) => ( - { - alert(`You clicked the color ${color} with label ${children}`) - }}> - {children} - -); - -This is Docusaurus green ! - -This is Facebook blue ! -``` - -export const Highlight = ({ children, color }) => ( - { - alert(`You clicked the color ${color} with label ${children}`); - }} - > - {children} - -); - -This is Docusaurus green ! - -This is Facebook blue ! diff --git a/code/docs/docs/tutorial-extras/img/docsVersionDropdown.png b/code/docs/docs/tutorial-extras/img/docsVersionDropdown.png deleted file mode 100644 index 97e41646..00000000 Binary files a/code/docs/docs/tutorial-extras/img/docsVersionDropdown.png and /dev/null differ diff --git a/code/docs/docs/tutorial-extras/img/localeDropdown.png b/code/docs/docs/tutorial-extras/img/localeDropdown.png deleted file mode 100644 index e257edc1..00000000 Binary files a/code/docs/docs/tutorial-extras/img/localeDropdown.png and /dev/null differ diff --git a/code/docs/docs/tutorial-extras/manage-docs-versions.md b/code/docs/docs/tutorial-extras/manage-docs-versions.md deleted file mode 100644 index 9ea672c7..00000000 --- a/code/docs/docs/tutorial-extras/manage-docs-versions.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -sidebar_position: 1 ---- - -# Manage Docs Versions - -Docusaurus can manage multiple versions of your docs. - -## Create a docs version - -Release a version 1.0 of your project: - -```bash -npm run docusaurus docs:version 1.0 -``` - -The `docs` folder is copied into `versioned_docs/version-1.0` and `versions.json` is created. - -Your docs now have 2 versions: - -- `1.0` at `http://localhost:3000/docs/` for the version 1.0 docs -- `current` at `http://localhost:3000/docs/next/` for the **upcoming, unreleased docs** - -## Add a Version Dropdown - -To navigate seamlessly across versions, add a version dropdown. - -Modify the `docusaurus.config.js` file: - -```js title="docusaurus.config.js" -export default { - themeConfig: { - navbar: { - items: [ - // highlight-start - { - type: "docsVersionDropdown", - }, - // highlight-end - ], - }, - }, -}; -``` - -The docs version dropdown appears in your navbar: - -![Docs Version Dropdown](./img/docsVersionDropdown.png) - -## Update an existing version - -It is possible to edit versioned docs in their respective folder: - -- `versioned_docs/version-1.0/hello.md` updates `http://localhost:3000/docs/hello` -- `docs/hello.md` updates `http://localhost:3000/docs/next/hello` diff --git a/code/docs/docs/tutorial-extras/translate-your-site.md b/code/docs/docs/tutorial-extras/translate-your-site.md deleted file mode 100644 index cf3a0c43..00000000 --- a/code/docs/docs/tutorial-extras/translate-your-site.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -sidebar_position: 2 ---- - -# Translate your site - -Let's translate `docs/intro.md` to French. - -## Configure i18n - -Modify `docusaurus.config.js` to add support for the `fr` locale: - -```js title="docusaurus.config.js" -export default { - i18n: { - defaultLocale: "en", - locales: ["en", "fr"], - }, -}; -``` - -## Translate a doc - -Copy the `docs/intro.md` file to the `i18n/fr` folder: - -```bash -mkdir -p i18n/fr/docusaurus-plugin-content-docs/current/ - -cp docs/intro.md i18n/fr/docusaurus-plugin-content-docs/current/intro.md -``` - -Translate `i18n/fr/docusaurus-plugin-content-docs/current/intro.md` in French. - -## Start your localized site - -Start your site on the French locale: - -```bash -npm run start -- --locale fr -``` - -Your localized site is accessible at [http://localhost:3000/fr/](http://localhost:3000/fr/) and the `Getting Started` page is translated. - -:::caution - -In development, you can only use one locale at a time. - -::: - -## Add a Locale Dropdown - -To navigate seamlessly across languages, add a locale dropdown. - -Modify the `docusaurus.config.js` file: - -```js title="docusaurus.config.js" -export default { - themeConfig: { - navbar: { - items: [ - // highlight-start - { - type: "localeDropdown", - }, - // highlight-end - ], - }, - }, -}; -``` - -The locale dropdown now appears in your navbar: - -![Locale Dropdown](./img/localeDropdown.png) - -## Build your localized site - -Build your site for a specific locale: - -```bash -npm run build -- --locale fr -``` - -Or build your site to include all the locales at once: - -```bash -npm run build -``` diff --git a/code/docs/docusaurus.config.ts b/code/docs/docusaurus.config.ts index 5890f2bb..7a767f3b 100644 --- a/code/docs/docusaurus.config.ts +++ b/code/docs/docusaurus.config.ts @@ -32,7 +32,7 @@ const config: Config = { // may want to replace "en" with "zh-Hans". i18n: { defaultLocale: 'zh-Hans', - locales: ['zh-Hans', 'en'], + locales: ['zh-Hans'], }, presets: [ [ @@ -82,10 +82,38 @@ const config: Config = { hideOnScroll: true, items: [ { - type: 'docSidebar', - sidebarId: 'tutorialSidebar', + type: 'dropdown', + label: '编程语言', position: 'left', - label: '文档', + items: [ + { + type: 'docSidebar', + label: 'Java', + sidebarId: 'JavaSidebar', + }, + { + type: 'docSidebar', + label: 'ReactNative', + sidebarId: 'ReactNativeSidebar', + }, + ], + }, + { + type: 'dropdown', + label: '开发工具', + position: 'left', + items: [ + { + type: 'docSidebar', + label: 'Docusaurus', + sidebarId: 'DocusaurusSidebar', + }, + { + type: 'docSidebar', + label: 'Git', + sidebarId: 'GitSidebar', + }, + ], }, { to: '/blog', diff --git a/code/docs/eslint.config.mjs b/code/docs/eslint.config.mjs index 956f53da..075c5fce 100644 --- a/code/docs/eslint.config.mjs +++ b/code/docs/eslint.config.mjs @@ -10,4 +10,7 @@ export default antfu({ extends: [ 'plugin:@docusaurus/recommended', ], + rules: { + '@typescript-eslint/no-require-imports': 'off', + }, }) diff --git a/code/docs/sidebars.ts b/code/docs/sidebars.ts index 574ed394..02f4e996 100644 --- a/code/docs/sidebars.ts +++ b/code/docs/sidebars.ts @@ -1,33 +1,13 @@ import type { SidebarsConfig } from "@docusaurus/plugin-content-docs"; -// This runs in Node.js - Don't use client-side code here (browser APIs, JSX...) - -/** - * Creating a sidebar enables you to: - - create an ordered group of docs - - render a sidebar for each doc of that group - - provide next/previous navigation - - The sidebars can be generated from the filesystem, or explicitly defined here. - - Create as many sidebars as you want. - */ const sidebars: SidebarsConfig = { - // By default, Docusaurus generates a sidebar from the docs folder structure - tutorialSidebar: [{ type: "autogenerated", dirName: "." }], + // coding + JavaSidebar: [{ type: "autogenerated", dirName: "coding/java" }], + ReactNativeSidebar: [{ type: "autogenerated", dirName: "coding/react-native" }], - // But you can create a sidebar manually - /* - tutorialSidebar: [ - 'intro', - 'hello', - { - type: 'category', - label: 'Tutorial', - items: ['tutorial-basics/create-a-document'], - }, - ], - */ + // dev-tools + DocusaurusSidebar: [{ type: "autogenerated", dirName: "dev-tools/docusaurus" }], + GitSidebar: [{ type: "autogenerated", dirName: "dev-tools/git" }], }; export default sidebars; diff --git a/code/docs/src/pages/index.tsx b/code/docs/src/pages/index.tsx index 99548221..58ac530a 100644 --- a/code/docs/src/pages/index.tsx +++ b/code/docs/src/pages/index.tsx @@ -18,9 +18,9 @@ function HomepageHeader() {

{siteConfig.tagline}

- + {/* Docusaurus Tutorial - 5min ⏱️ - + */}
diff --git a/code/docs/src/theme/NavbarItem/DropdownNavbarItem/Desktop/index.js b/code/docs/src/theme/NavbarItem/DropdownNavbarItem/Desktop/index.js deleted file mode 100644 index bed38861..00000000 --- a/code/docs/src/theme/NavbarItem/DropdownNavbarItem/Desktop/index.js +++ /dev/null @@ -1,68 +0,0 @@ -import React, {useState, useRef, useEffect} from 'react'; -import clsx from 'clsx'; -import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink'; -import NavbarItem from '@theme/NavbarItem'; -export default function DropdownNavbarItemDesktop({ - items, - position, - className, - onClick, - ...props -}) { - const dropdownRef = useRef(null); - const [showDropdown, setShowDropdown] = useState(false); - useEffect(() => { - const handleClickOutside = (event) => { - if (!dropdownRef.current || dropdownRef.current.contains(event.target)) { - return; - } - setShowDropdown(false); - }; - document.addEventListener('mousedown', handleClickOutside); - document.addEventListener('touchstart', handleClickOutside); - document.addEventListener('focusin', handleClickOutside); - return () => { - document.removeEventListener('mousedown', handleClickOutside); - document.removeEventListener('touchstart', handleClickOutside); - document.removeEventListener('focusin', handleClickOutside); - }; - }, [dropdownRef]); - return ( -
- tag focusable in case no link target - // See https://github.com/facebook/docusaurus/pull/6003 - // There's probably a better solution though... - href={props.to ? undefined : '#'} - className={clsx('navbar__link', className)} - {...props} - onClick={props.to ? undefined : (e) => e.preventDefault()} - onKeyDown={(e) => { - if (e.key === 'Enter') { - e.preventDefault(); - setShowDropdown(!showDropdown); - } - }}> - {props.children ?? props.label} - -
    - {items.map((childItemProps, i) => ( - - ))} -
-
- ); -} diff --git a/code/docs/src/theme/NavbarItem/DropdownNavbarItem/Desktop/index.tsx b/code/docs/src/theme/NavbarItem/DropdownNavbarItem/Desktop/index.tsx deleted file mode 100644 index 8e87642f..00000000 --- a/code/docs/src/theme/NavbarItem/DropdownNavbarItem/Desktop/index.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import type { Props } from '@theme/NavbarItem/DropdownNavbarItem/Desktop' -import type { ReactNode } from 'react' -import NavbarItem from '@theme/NavbarItem' -import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink' -import clsx from 'clsx' -import React, { useEffect, useRef, useState } from 'react' - -export default function DropdownNavbarItemDesktop({ - items, - position, - className, - onClick, - ...props -}: Props): ReactNode { - const dropdownRef = useRef(null) - const [showDropdown, setShowDropdown] = useState(false) - - useEffect(() => { - const handleClickOutside = ( - event: MouseEvent | TouchEvent | FocusEvent, - ) => { - if ( - !dropdownRef.current - || dropdownRef.current.contains(event.target as Node) - ) { - return - } - setShowDropdown(false) - } - - document.addEventListener('mousedown', handleClickOutside) - document.addEventListener('touchstart', handleClickOutside) - document.addEventListener('focusin', handleClickOutside) - - return () => { - document.removeEventListener('mousedown', handleClickOutside) - document.removeEventListener('touchstart', handleClickOutside) - document.removeEventListener('focusin', handleClickOutside) - } - }, [dropdownRef]) - - return ( -
- tag focusable in case no link target - // See https://github.com/facebook/docusaurus/pull/6003 - // There's probably a better solution though... - href={props.to ? undefined : '#'} - className={clsx('navbar__link', className)} - {...props} - onClick={props.to ? undefined : e => e.preventDefault()} - onKeyDown={(e) => { - if (e.key === 'Enter') { - e.preventDefault() - setShowDropdown(!showDropdown) - } - }} - > - {props.children ?? props.label} - -
    - {items.map((childItemProps, i) => ( - - ))} -
-
- ) -} diff --git a/code/docs/src/theme/NavbarItem/DropdownNavbarItem/Mobile/index.js b/code/docs/src/theme/NavbarItem/DropdownNavbarItem/Mobile/index.js deleted file mode 100644 index 092860e6..00000000 --- a/code/docs/src/theme/NavbarItem/DropdownNavbarItem/Mobile/index.js +++ /dev/null @@ -1,136 +0,0 @@ -import React, {useEffect} from 'react'; -import clsx from 'clsx'; -import { - isRegexpStringMatch, - useCollapsible, - Collapsible, -} from '@docusaurus/theme-common'; -import {isSamePath, useLocalPathname} from '@docusaurus/theme-common/internal'; -import {translate} from '@docusaurus/Translate'; -import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink'; -import NavbarItem from '@theme/NavbarItem'; -import styles from './styles.module.css'; -function isItemActive(item, localPathname) { - if (isSamePath(item.to, localPathname)) { - return true; - } - if (isRegexpStringMatch(item.activeBaseRegex, localPathname)) { - return true; - } - if (item.activeBasePath && localPathname.startsWith(item.activeBasePath)) { - return true; - } - return false; -} -function containsActiveItems(items, localPathname) { - return items.some((item) => isItemActive(item, localPathname)); -} -function CollapseButton({collapsed, onClick}) { - return ( -