create-react-docs-ui 0.2.0 → 0.4.0

package/template/public/docs/en/docs/test/katex-test.md

@@ -0,0 +1,258 @@
+# 🧪 KaTeX Full Feature Test
+
+> Used to verify that KaTeX correctly loads all extensions (mhchem / physics / mathtools, etc.)
+
+---
+
+## ✅ Inline Formulas
+
+Einstein's mass-energy equation:
+$E = mc^2$
+
+Euler's formula:
+$e^{i\pi} + 1 = 0$
+
+Fraction test:
+$\frac{a+b}{c+d}$
+
+Root test:
+$\sqrt{2},\ \sqrt[n]{x}$
+
+---
+
+## ✅ Block Formulas
+
+$$
+\int_{-\infty}^{\infty} e^{-x^2}\,dx = \sqrt{\pi}
+$$
+
+$$
+\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}
+$$
+
+---
+
+## ✅ Matrices (mathtools)
+
+### Basic Matrix
+
+$$
+\begin{matrix}
+1 & 2 \\
+3 & 4
+\end{matrix}
+$$
+
+### Parentheses Matrix
+
+$$
+\begin{pmatrix}
+a & b \\
+c & d
+\end{pmatrix}
+$$
+
+### Bracket Matrix
+
+$$
+\begin{bmatrix}
+1 & 0 \\
+0 & 1
+\end{bmatrix}
+$$
+
+### Determinant
+
+$$
+\begin{vmatrix}
+a & b \\
+c & d
+\end{vmatrix}
+$$
+
+---
+
+## ✅ Alignment Environment (ams)
+
+$$
+\begin{aligned}
+a^2 + b^2 &= c^2 \\
+e^{i\theta} &= \cos\theta + i\sin\theta
+\end{aligned}
+$$
+
+---
+
+## ✅ Piecewise Function
+
+$$
+f(x) =
+\begin{cases}
+x^2 & x \ge 0 \\
+-x & x < 0
+\end{cases}
+$$
+
+---
+
+## ✅ Chemical Formulas (mhchem)
+
+Water:
+
+$$
+\ce{H2O}
+$$
+
+Combustion reaction:
+
+$$
+\ce{CH4 + 2O2 -> CO2 + 2H2O}
+$$
+
+Reversible reaction:
+
+$$
+\ce{A <=> B}
+$$
+
+Ions:
+
+$$
+\ce{Na+ + Cl- -> NaCl}
+$$
+
+---
+
+## ✅ Physics Macro Test
+
+Derivative:
+
+$$
+\dv{y}{x}
+$$
+
+Partial derivative:
+
+$$
+\pdv{f}{x}
+$$
+
+Second derivative:
+
+$$
+\dv[2]{y}{x}
+$$
+
+Absolute value:
+
+$$
+\abs{x}
+$$
+
+Norm:
+
+$$
+\norm{\vec{v}}
+$$
+
+Expectation value:
+
+$$
+\expval{A}
+$$
+
+Auto-scaling parentheses:
+
+$$
+\qty(\frac{a}{b})
+$$
+
+---
+
+## ✅ mathtools Extensions
+
+Multi-line alignment:
+
+$$
+\begin{aligned}
+\max_x \quad & x^2 + 2x \\
+\text{s.t.}\quad & x \ge 0
+\end{aligned}
+$$
+
+With label:
+
+$$
+\underbrace{a+b+\cdots+z}_{26}
+$$
+
+---
+
+## ✅ Common Mathematical Symbols
+
+Greek letters:
+
+$$
+\alpha,\ \beta,\ \gamma,\ \Gamma,\ \Delta,\ \Omega
+$$
+
+Relation symbols:
+
+$$
+\le,\ \ge,\ \neq,\ \approx,\ \equiv
+$$
+
+Set symbols:
+
+$$
+\in,\ \notin,\ \subset,\ \supset,\ \cup,\ \cap
+$$
+
+Arrows:
+
+$$
+\rightarrow,\ \Rightarrow,\ \leftrightarrow,\ \mapsto
+$$
+
+---
+
+## 🚨 Extreme Stress Test (Very Important)
+
+> If this section renders correctly, it means KaTeX is basically fully functional
+
+$$
+\pdv{ }{t}\qty(
+\int_{V} \rho(\vb{r},t)\, dV
+) =
+- \oint_{S} \rho \vb{v} \cdot d\vb{S}
+$$
+
+$$
+\ce{^{235}_{92}U + ^1_0n -> ^{236}_{92}U -> ^{141}_{56}Ba + ^{92}_{36}Kr + 3^1_0n}
+$$
+
+$$
+\begin{aligned}
+\mathcal{L} &= \frac{1}{2} m \dot{x}^2 - V(x) \\
+\hat{H}\psi &= i\hbar \pdv{\psi}{t}
+\end{aligned}
+$$
+
+---
+
+## ✅ Rendering Checklist
+
+- [ ] Inline formulas work correctly
+- [ ] Block formulas are centered
+- [ ] Matrix alignment is correct
+- [ ] mhchem works correctly
+- [ ] Physics macros work correctly
+- [ ] Alignment environment works correctly
+- [ ] No overflow on mobile
+- [ ] Visible in dark mode
+
+---
+
+# 🎉 If All Pass
+
+👉 Your KaTeX configuration is already **complete**

package/template/public/docs/en/docs/test/mdx-test.mdx

@@ -0,0 +1,136 @@
+# MDX Component Usage Examples
+
+This page demonstrates how to use custom React components in Markdown documents.
+
+## Using Built-in Components
+
+react-docs-ui provides some built-in MDX components that can be used directly.
+
+**Note**: Component names support both PascalCase (recommended) and lowercase. For example, both `<CodeBlock>` and `<codeblock>` work correctly.
+
+<Tip title="This is a warning tip"
+>This is the content of a tip component. You can place important tips here.
+</Tip>
+
+<Warning title="This is a warning">
+    This is the content of a warning component. Used to remind users of potential issues or risks.
+</Warning>
+
+<Card title="This is a card">
+    This is the content of a card component. Cards can be used to organize related content blocks.
+</Card>
+
+## Using Custom Components
+
+React components created in the `src/components` directory of the template are automatically scanned and registered, and can be used directly in MDX documents:
+
+<MyTip>
+    This is a custom component from template/src/components! You can create any React component in the `src/components` directory, and they will be automatically available in MDX documents.
+</MyTip>
+
+## New Component Examples
+
+### Alert Component
+
+The Alert component supports multiple types: info, success, warning, error
+
+<Alert type="info" title="Information">
+    This is a general information tip for displaying general information.
+</Alert>
+
+<Alert type="success" title="Operation Successful">
+    Congratulations! The operation has been completed successfully.
+</Alert>
+
+<Alert type="warning" title="Attention">
+    Please note, there are some things that need attention here.
+</Alert>
+
+<Alert type="error" title="Error">
+    An error occurred, please check and try again.
+</Alert>
+
+### Feature Component
+
+The Feature component is used to display feature highlights:
+
+<Feature
+    icon="⚡"
+    title="Quick Start"
+    description="Start your project in seconds without complex configuration."
+></Feature>
+<Feature
+    icon="🎨"
+    title="Theme Customization"
+    description="Supports light and dark themes, fully customizable."
+></Feature>
+<Feature
+    icon="📱"
+    title="Responsive Design"
+    description="Perfectly adapts to various devices for the best user experience."
+></Feature>
+
+### Callout Component
+
+The Callout component is used to emphasize important content:
+
+<Callout variant="default">
+    This is a default style Callout used to emphasize important content.
+</Callout>
+
+<Callout variant="primary">
+    This is a primary style Callout used to highlight core information.
+</Callout>
+
+<Callout variant="secondary">
+    This is a secondary style Callout used for supplementary information.
+</Callout>
+
+### StepList Component
+
+The StepList component is used to display step processes:
+
+<StepList>
+    <StepList.Step title="Install Dependencies">
+        Run the `npm install` command to install the required dependencies for the project.
+    </StepList.Step>
+    <StepList.Step title="Configure Environment">
+        Configure environment variables and development environment according to project requirements.
+    </StepList.Step>
+    <StepList.Step title="Start Project">
+        Run `npm run dev` to start the development server.
+    </StepList.Step>
+    <StepList.Step title="Start Development">
+        Start writing code to implement your functional requirements.
+    </StepList.Step>
+</StepList>
+
+### BadgeList Component
+
+The BadgeList component is used to display tags or statuses:
+
+<BadgeList>
+    <BadgeList.Badge variant="default">Default Tag</BadgeList.Badge>
+    <BadgeList.Badge variant="success">Success Status</BadgeList.Badge>
+    <BadgeList.Badge variant="warning">Warning Status</BadgeList.Badge>
+    <BadgeList.Badge variant="error">Error Status</BadgeList.Badge>
+    <BadgeList.Badge variant="info">Info Tag</BadgeList.Badge>
+</BadgeList>
+
+## Code Block Examples
+
+You can use standard Markdown code block syntax in MDX:
+
+```tsx
+// This is a TypeScript code block example
+function Greeting({ name }: { name: string }) {
+    return <div>Hello, {name}!</div>;
+}
+```
+
+```javascript
+// This is a JavaScript code block example
+function add(a, b) {
+    return a + b;
+}
+```

package/template/public/docs/en/docs/test/test.md

@@ -0,0 +1,212 @@
+# 📄 Document Rendering Test Page
+
+> Used to test whether the documentation website correctly renders various Markdown / MDX features.
+
+---
+
+## 🧭 Table of Contents
+
+- [Heading Test](#heading-test)
+- [Text Styles](#text-styles)
+- [Lists](#lists)
+- [Code Blocks](#code-blocks)
+- [Tables](#tables)
+- [Quote Blocks](#quote-blocks)
+- [Callout Blocks](#callout-blocks)
+- [Images](#images)
+- [Math Formulas](#math-formulas)
+- [MDX Components (Optional)](#mdx-components-optional)
+
+---
+
+## Heading Test
+
+### H3 Heading
+#### H4 Heading
+##### H5 Heading
+###### H6 Heading
+
+---
+
+## Text Styles
+
+**Bold**
+
+*Italic*
+
+~~Strikethrough~~
+
+`Inline code`
+
+<kbd>Ctrl</kbd> + <kbd>C</kbd>
+
+---
+
+## Lists
+
+### Unordered List
+
+- Apple
+- Banana
+  - Sub-item 1
+  - Sub-item 2
+- Orange
+
+### Ordered List
+
+1. First step
+2. Second step
+3. Third step
+
+### Task List
+
+- [x] Completed
+- [ ] Not completed
+
+---
+
+## Code Blocks
+
+### JavaScript
+
+```js
+function greet(name) {
+  console.log(`Hello, ${name}!`)
+}
+
+greet("World")
+````
+
+### Bash
+
+```bash
+pnpm install
+pnpm dev
+```
+
+### JSON
+
+```json
+{
+  "name": "docs-test",
+  "version": "1.0.0"
+}
+```
+
+---
+
+## Tables
+
+| Feature | Supported | Notes |
+| ---- | ---- | ----- |
+| Headings | ✅ | Normal |
+| Code Blocks | ✅ | Highlighted |
+| Math Formulas | ⏳ | Depends on theme |
+
+---
+
+## Quote Blocks
+
+> This is a quote block
+> Used to test styles.
+
+---
+
+## Callout Blocks
+
+> [!NOTE]
+> This is a NOTE callout block (some themes support it)
+
+> [!TIP]
+> This is a TIP callout block
+
+> [!WARNING]
+> This is a WARNING callout block
+
+---
+
+## Images
+
+![Sample Image](https://picsum.photos/800/400)
+![01-image](/images/yrzx.png)
+
+---
+
+## Math Formulas
+
+Inline formula:
+
+$E = mc^2$
+
+Block formula:
+
+$$
+\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
+$$
+
+---
+
+## MDX Components (Optional)
+
+If your documentation system supports MDX, you can test:
+
+```jsx
+export function Hello() {
+  return <div style={{color: 'red'}}>Hello MDX!</div>
+}
+```
+
+---
+
+## 🔥 Collapsible Block (Some themes support)
+
+<details>
+<summary>Click to expand</summary>
+
+This is the collapsed content.
+
+</details>
+
+---
+
+## 🧪 Long Content Scroll Test
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+---
+
+## ✅ Rendering Checklist
+
+* [ ] Code highlighting works correctly
+* [ ] Table styles are correct
+* [ ] Callout blocks have styles
+* [ ] Math formulas work correctly
+* [ ] Images are responsive
+* [ ] Mobile responsive works correctly
+
+---
+
+**Test Completed 🎉**
+
+---
+
+If you'd like, I can help you generate another one:
+
+- 🔥 Specialized test version for **Nextra**
+- 🚀 Specialized test version for **VitePress**
+- 🎨 Extreme stress test version (specifically tests if styles break)
+
+Just let me know 👍

package/template/public/docs/en/docs/test.md

@@ -0,0 +1,9 @@
+# Documentation Tests
+
+This section contains various test pages to verify the rendering capabilities of React Docs UI.
+
+## Test Pages
+
+- [MD Test](/docs/test/test) - Test various Markdown syntax and features
+- [KaTeX Test](/docs/test/katex-test) - Test complete mathematical formula functionality
+- [MDX Demo](/docs/test/mdx-test) - View examples of MDX component usage

package/template/public/docs/en/docs.md

@@ -0,0 +1,16 @@
+# Documentation
+
+Welcome to the React Docs UI documentation system.
+
+## Quick Start
+
+- [Introduction](/docs/guide/introduction) - Learn about the core philosophy of React Docs UI
+- [Installation](/docs/guide/installation) - Learn how to install and configure
+- [Quick Start](/docs/guide/quick-start) - Create your first documentation site in 5 minutes
+- [Configuration](/docs/guide/configuration) - Deep dive into configuration options
+
+## Documentation Tests
+
+- [MD Test](/docs/test/test) - Test Markdown rendering functionality
+- [KaTeX Test](/docs/test/katex-test) - Test mathematical formula rendering
+- [MDX Demo](/docs/test/mdx-test) - View MDX component usage examples