tona-loader 1.0.21 → 1.0.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +78 -12
  2. package/README.zh-CN.md +77 -11
  3. package/package.json +12 -12
  4. package/vite.config.ts +10 -0
  5. package/tsdown.config.ts +0 -11
  6. /package/dist/{loader.min.js → index.iife.js} +0 -0
package/README.md CHANGED
@@ -1,39 +1,105 @@
1
1
  # tona-loader
2
2
 
3
+ <p align="center">
4
+ <img src="../../assets/tona.png" alt="Tona" width="100" />
5
+ </p>
6
+
7
+ <p align="center">
8
+ Theme loader for CNBlogs (博客园) - Load Tona themes dynamically.
9
+ </p>
10
+
11
+ <p align="center">
12
+ <a href="https://www.npmjs.com/package/tona-loader"><img src="https://img.shields.io/npm/v/tona-loader?style=flat-square" alt="npm version"></a>
13
+ <a href="LICENSE"><img src="https://img.shields.io/npm/l/tona-loader?style=flat-square" alt="license"></a>
14
+ </p>
15
+
3
16
  **English** | [中文](./README.zh-CN.md)
4
17
 
5
- 🚀 Loading theme js file for Tona.
18
+ ## Features
6
19
 
7
- Loader receives a configuration object, mounts the object to window, and then loads the corresponding theme file according to the `configurationObject.theme.name` in the incoming object.
20
+ - **Dynamic Theme Loading** - Load themes by name or URL
21
+ - **Configuration Mounting** - Automatically mounts config to window object
22
+ - **CDN Support** - Load themes from CDN or custom URLs
23
+ - **jQuery Integration** - Uses `$.tona()` for initialization
24
+ - **Lightweight** - Minimal loader script
8
25
 
9
26
  ## Usage
10
27
 
11
- Load skins via theme name.
28
+ ### Load by Theme Name
12
29
 
13
30
  ```html
14
31
  <script src="https://blog-static.cnblogs.com/files/guangzan/loader.min.js"></script>
15
32
  <script>
16
33
  const opts = {
17
34
  theme: {
18
- name: "geek",
35
+ name: 'geek',
19
36
  },
20
- // 其他配置
21
- };
22
- $.tona(opts);
37
+ // Additional configuration
38
+ }
39
+ $.tona(opts)
23
40
  </script>
24
41
  ```
25
42
 
26
- Load skins via theme URL.
43
+ ### Load by Theme URL
27
44
 
28
45
  ```html
29
46
  <script src="https://blog-static.cnblogs.com/files/guangzan/loader.min.js"></script>
30
47
  <script>
31
48
  const opts = {
32
49
  theme: {
33
- name: "https://blog-static.cnblogs.com/files/guangzan/reacg.js",
50
+ name: 'https://blog-static.cnblogs.com/files/guangzan/reacg.js',
34
51
  },
35
- // 其他配置
36
- };
37
- $.tona(opts);
52
+ // Additional configuration
53
+ }
54
+ $.tona(opts)
38
55
  </script>
39
56
  ```
57
+
58
+ ## Configuration
59
+
60
+ The loader accepts a configuration object that gets mounted to the window:
61
+
62
+ ```javascript
63
+ const opts = {
64
+ theme: {
65
+ name: 'geek', // Theme name or URL
66
+ },
67
+ // Theme-specific options
68
+ bodyBackground: {
69
+ enable: true,
70
+ value: '#f5f5f5',
71
+ },
72
+ // ... other options
73
+ }
74
+
75
+ $.tona(opts)
76
+ ```
77
+
78
+ ## How It Works
79
+
80
+ 1. The loader script mounts your configuration object to `window`
81
+ 2. It then loads the theme JavaScript file based on `theme.name`
82
+ 3. The theme file accesses the configuration via the global window object
83
+
84
+ ## Available Themes
85
+
86
+ - `geek` - Modern minimalist theme
87
+ - `reacg` - Anime-style theme
88
+ - `shadcn` - Modern shadcn/ui inspired theme
89
+
90
+ For a complete list, visit [tona-themes](https://github.com/guangzan/tona/tree/main/packages/data).
91
+
92
+ ## Installation (for Development)
93
+
94
+ ```bash
95
+ npm install tona-loader
96
+ ```
97
+
98
+ ```bash
99
+ pnpm add tona-loader
100
+ ```
101
+
102
+ ## Related
103
+
104
+ - [tona](https://github.com/guangzan/tona/tree/main/packages/core) - Core framework
105
+ - [tona-themes](https://github.com/guangzan/tona/tree/main/packages/data) - Theme registry
package/README.zh-CN.md CHANGED
@@ -1,39 +1,105 @@
1
1
  # tona-loader
2
2
 
3
- **中文** | [English](./README.md)
3
+ <p align="center">
4
+ <img src="../../assets/tona.png" alt="Tona" width="100" />
5
+ </p>
4
6
 
5
- 🚀 Tona 博客园皮肤加载器。
7
+ <p align="center">
8
+ 博客园（CNBlogs）主题加载器 - 动态加载 Tona 主题。
9
+ </p>
6
10
 
7
- Loader 接收一个配置对象，将该对象挂载到窗口，然后根据传入的配置对象中的 `configurationObject.theme` 加载相应的皮肤文件。
11
+ <p align="center">
12
+ <a href="https://www.npmjs.com/package/tona-loader"><img src="https://img.shields.io/npm/v/tona-loader?style=flat-square" alt="npm version"></a>
13
+ <a href="LICENSE"><img src="https://img.shields.io/npm/l/tona-loader?style=flat-square" alt="license"></a>
14
+ </p>
15
+
16
+ [English](./README.md) | **中文**
17
+
18
+ ## 特性
19
+
20
+ - **动态主题加载** - 通过名称或 URL 加载主题
21
+ - **配置挂载** - 自动将配置挂载到 window 对象
22
+ - **CDN 支持** - 从 CDN 或自定义 URL 加载主题
23
+ - **jQuery 集成** - 使用 `$.tona()` 进行初始化
24
+ - **轻量级** - 极小的加载器脚本
8
25
 
9
26
  ## 使用
10
27
 
11
- 通过皮肤名称加载皮肤。
28
+ ### 通过主题名称加载
12
29
 
13
30
  ```html
14
31
  <script src="https://blog-static.cnblogs.com/files/guangzan/loader.min.js"></script>
15
32
  <script>
16
33
  const opts = {
17
34
  theme: {
18
- name: "geek",
35
+ name: 'geek',
19
36
  },
20
37
  // 其他配置
21
- };
22
- $.tona(opts);
38
+ }
39
+ $.tona(opts)
23
40
  </script>
24
41
  ```
25
42
 
26
- 通过皮肤 URL 加载皮肤。
43
+ ### 通过主题 URL 加载
27
44
 
28
45
  ```html
29
46
  <script src="https://blog-static.cnblogs.com/files/guangzan/loader.min.js"></script>
30
47
  <script>
31
48
  const opts = {
32
49
  theme: {
33
- name: "https://blog-static.cnblogs.com/files/guangzan/reacg.js",
50
+ name: 'https://blog-static.cnblogs.com/files/guangzan/reacg.js',
34
51
  },
35
52
  // 其他配置
36
- };
37
- $.tona(opts);
53
+ }
54
+ $.tona(opts)
38
55
  </script>
39
56
  ```
57
+
58
+ ## 配置
59
+
60
+ 加载器接受一个配置对象，该对象会被挂载到 window：
61
+
62
+ ```javascript
63
+ const opts = {
64
+ theme: {
65
+ name: 'geek', // 主题名称或 URL
66
+ },
67
+ // 主题特定选项
68
+ bodyBackground: {
69
+ enable: true,
70
+ value: '#f5f5f5',
71
+ },
72
+ // ... 其他选项
73
+ }
74
+
75
+ $.tona(opts)
76
+ ```
77
+
78
+ ## 工作原理
79
+
80
+ 1. 加载器脚本将您的配置对象挂载到 `window`
81
+ 2. 然后根据 `theme.name` 加载主题 JavaScript 文件
82
+ 3. 主题文件通过全局 window 对象访问配置
83
+
84
+ ## 可用主题
85
+
86
+ - `geek` - 现代极简主题
87
+ - `reacg` - 动漫风格主题
88
+ - `shadcn` - 现代 shadcn/ui 风格主题
89
+
90
+ 完整列表请访问 [tona-themes](https://github.com/guangzan/tona/tree/main/packages/data)。
91
+
92
+ ## 安装（用于开发）
93
+
94
+ ```bash
95
+ npm install tona-loader
96
+ ```
97
+
98
+ ```bash
99
+ pnpm add tona-loader
100
+ ```
101
+
102
+ ## 相关
103
+
104
+ - [tona](https://github.com/guangzan/tona/tree/main/packages/core) - 核心框架
105
+ - [tona-themes](https://github.com/guangzan/tona/tree/main/packages/data) - 主题注册表
package/package.json CHANGED
@@ -1,27 +1,27 @@
1
1
  {
2
2
  "name": "tona-loader",
3
- "type": "module",
4
- "version": "1.0.21",
3
+ "version": "1.0.22",
5
4
  "description": "Loading theme js file",
6
- "author": "",
5
+ "keywords": [
6
+ "博客园",
7
+ "皮肤"
8
+ ],
7
9
  "license": "ISC",
10
+ "author": "",
8
11
  "repository": {
9
12
  "type": "git",
10
13
  "url": "git+https://github.com/guangzan/tona.git",
11
14
  "directory": "packages/loader"
12
15
  },
13
- "keywords": [
14
- "博客园",
15
- "皮肤"
16
- ],
16
+ "type": "module",
17
17
  "main": "index.js",
18
18
  "devDependencies": {
19
- "@types/jquery": "^3.5.33",
20
- "tsdown": "latest",
21
- "vitest": "^4.0.16"
19
+ "@types/jquery": "^4.0.0",
20
+ "vite-plus": "latest",
21
+ "vitest": "npm:@voidzero-dev/vite-plus-test@latest"
22
22
  },
23
23
  "scripts": {
24
- "build": "tsdown",
25
- "dev": "tsdown --watch"
24
+ "build": "vp pack",
25
+ "dev": "vp pack --watch"
26
26
  }
27
27
  }
package/vite.config.ts ADDED
@@ -0,0 +1,10 @@
1
+ import { defineConfig } from 'vite-plus'
2
+
3
+ export default defineConfig({
4
+ pack: {
5
+ platform: 'browser',
6
+ entry: ['./src/index.ts'],
7
+ format: ['iife'],
8
+ minify: true,
9
+ },
10
+ })
package/tsdown.config.ts DELETED
@@ -1,11 +0,0 @@
1
- import { defineConfig } from 'tsdown'
2
-
3
- export default defineConfig({
4
- platform: 'browser',
5
- entry: ['./src/index.ts'],
6
- format: ['iife'],
7
- outputOptions: {
8
- file: 'dist/loader.min.js',
9
- },
10
- minify: true,
11
- })
/package/dist/{loader.min.js → index.iife.js} RENAMED
File without changes