Skip to content

Commit a1e07bc

Browse files
wangdicoderwangdicoder
committed
fix: update docs
1 parent defb7ac commit a1e07bc

3 files changed

Lines changed: 69 additions & 21 deletions

File tree

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
<p align="center">
2929
<a href="https://wangdicoder.github.io/tiny-design/"><strong>Documentation</strong></a> &nbsp;&bull;&nbsp;
3030
<a href="https://wangdicoder.github.io/tiny-design/theme/theme-editor"><strong>Theme Editor</strong></a> &nbsp;&bull;&nbsp;
31-
<a href="https://wangdicoder.github.io/tiny-design/guide/customise-theme"><strong>Theming Guide</strong></a>
31+
<a href="https://wangdicoder.github.io/tiny-design/theme/customise-theme"><strong>Theming Guide</strong></a>
3232
</p>
3333

3434
---
@@ -107,7 +107,7 @@ $border-radius: 8px;
107107
@use "@tiny-design/react/es/style/index" as *;
108108
```
109109

110-
See the [Theming Guide](https://wangdicoder.github.io/tiny-design/guide/customise-theme) for the full list of tokens and variables.
110+
See the [Theming Guide](https://wangdicoder.github.io/tiny-design/theme/customise-theme) for the full list of tokens and variables.
111111

112112
## Packages
113113

‎apps/docs/src/utils/sandbox.ts‎

Lines changed: 60 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,26 @@
11
import sdk from '@stackblitz/sdk';
22
import { getParameters } from 'codesandbox/lib/api/define';
33

4-
const TINY_DESIGN_VERSION = '^1.1.0';
5-
const TINY_ICONS_VERSION = '^1.1.0';
4+
declare const __TINY_VERSION__: string;
5+
6+
const TINY_VERSION = `^${__TINY_VERSION__}`;
7+
const TINY_DESIGN_VERSION = TINY_VERSION;
8+
const TINY_ICONS_VERSION = TINY_VERSION;
9+
10+
const BOOTSTRAP_CODE = `import React from 'react';
11+
import { createRoot } from 'react-dom/client';
12+
import App from './App';
13+
14+
createRoot(document.getElementById('root')!).render(
15+
<React.StrictMode>
16+
<App />
17+
</React.StrictMode>,
18+
);`;
619

720
/**
8-
* Generate the shared file set used by both StackBlitz and CodeSandbox.
9-
*
10-
* With the new standalone demo format, the source code already contains
11-
* real imports (e.g. `import { Button } from '@tiny-design/react'`) and
12-
* a default export. It can be used directly as App.tsx.
21+
* Generate the file set for StackBlitz (Vite-based).
1322
*/
14-
function buildSandboxFiles(sourceCode: string): Record<string, string> {
23+
function buildStackBlitzFiles(sourceCode: string): Record<string, string> {
1524
return {
1625
'package.json': JSON.stringify(
1726
{
@@ -38,9 +47,10 @@ function buildSandboxFiles(sourceCode: string): Record<string, string> {
3847
<meta charset="UTF-8" />
3948
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
4049
<title>Tiny Design Demo</title>
50+
<style>body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; }</style>
4151
</head>
4252
<body>
43-
<div id="root"></div>
53+
<div id="root" style="padding: 24px"></div>
4454
<script type="module" src="/src/main.tsx"></script>
4555
</body>
4656
</html>`,
@@ -50,15 +60,46 @@ import react from '@vitejs/plugin-react';
5060
export default defineConfig({
5161
plugins: [react()],
5262
});`,
53-
'src/main.tsx': `import React from 'react';
54-
import { createRoot } from 'react-dom/client';
55-
import App from './App';
63+
'src/main.tsx': BOOTSTRAP_CODE,
64+
'src/App.tsx': sourceCode,
65+
};
66+
}
5667

57-
createRoot(document.getElementById('root')!).render(
58-
<React.StrictMode>
59-
<App />
60-
</React.StrictMode>,
61-
);`,
68+
/**
69+
* Generate the file set for CodeSandbox (classic browser sandbox).
70+
*
71+
* Classic sandboxes use an in-browser bundler — no Vite needed.
72+
* Entry point must be src/index.tsx and HTML goes in public/.
73+
*/
74+
function buildCodeSandboxFiles(sourceCode: string): Record<string, string> {
75+
return {
76+
'package.json': JSON.stringify(
77+
{
78+
name: 'tiny-design-demo',
79+
private: true,
80+
dependencies: {
81+
react: '^18.2.0',
82+
'react-dom': '^18.2.0',
83+
'@tiny-design/react': TINY_DESIGN_VERSION,
84+
'@tiny-design/icons': TINY_ICONS_VERSION,
85+
},
86+
},
87+
null,
88+
2,
89+
),
90+
'public/index.html': `<!DOCTYPE html>
91+
<html lang="en">
92+
<head>
93+
<meta charset="UTF-8" />
94+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
95+
<title>Tiny Design Demo</title>
96+
<style>body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; }</style>
97+
</head>
98+
<body>
99+
<div id="root" style="padding: 24px"></div>
100+
</body>
101+
</html>`,
102+
'src/index.tsx': BOOTSTRAP_CODE,
62103
'src/App.tsx': sourceCode,
63104
};
64105
}
@@ -68,7 +109,7 @@ createRoot(document.getElementById('root')!).render(
68109
* The sourceCode should be a standalone .tsx file with real imports.
69110
*/
70111
export function openInStackBlitz(sourceCode: string): void {
71-
const files = buildSandboxFiles(sourceCode);
112+
const files = buildStackBlitzFiles(sourceCode);
72113

73114
sdk.openProject(
74115
{
@@ -85,7 +126,7 @@ export function openInStackBlitz(sourceCode: string): void {
85126
* The sourceCode should be a standalone .tsx file with real imports.
86127
*/
87128
export function openInCodeSandbox(sourceCode: string): void {
88-
const files = buildSandboxFiles(sourceCode);
129+
const files = buildCodeSandboxFiles(sourceCode);
89130

90131
// Convert to CodeSandbox's IFiles format
91132
const csFiles: Record<string, { content: string; isBinary: boolean }> = {};

‎apps/docs/vite.config.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,19 @@ import mdx from '@mdx-js/rollup';
44
import remarkGfm from 'remark-gfm';
55
import rehypeMdxCodeProps from 'rehype-mdx-code-props';
66
import path from 'path';
7+
import { readFileSync } from 'fs';
78

9+
const reactPkg = path.resolve(__dirname, '../../packages/react/package.json');
810
const reactSrc = path.resolve(__dirname, '../../packages/react/src');
911
const iconsSrc = path.resolve(__dirname, '../../packages/icons/src');
1012

13+
const tinyVersion = JSON.parse(readFileSync(reactPkg, 'utf-8')).version;
14+
1115
export default defineConfig({
1216
base: process.env.VITE_BASE || '/',
17+
define: {
18+
__TINY_VERSION__: JSON.stringify(tinyVersion),
19+
},
1320
plugins: [
1421
{ enforce: 'pre', ...mdx({
1522
mdxExtensions: ['.mdx', '.md'],

0 commit comments

Comments
 (0)