daily-soup-widget 0.1.1 → 0.1.3
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.
- package/README.md +22 -6
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -65,13 +65,29 @@ const handle = mount(host, { lang: 'zh', theme: 'auto' });
|
|
|
65
65
|
|
|
66
66
|
## Configuration
|
|
67
67
|
|
|
68
|
-
| Option | Values
|
|
69
|
-
| ------------- |
|
|
70
|
-
| `lang` | `'zh'` / `'en'`
|
|
71
|
-
| `theme` | `'auto'` / `'light'` / `'dark'`
|
|
72
|
-
| `scheduleUrl` | any HTTPS URL or `''` (same-origin)
|
|
68
|
+
| Option | Values | Default | Description |
|
|
69
|
+
| ------------- | ------------------------------------------------- | -------------------------------------- | ----------------------------------------------------------------- |
|
|
70
|
+
| `lang` | `'zh'` / `'en'` | `'zh'` | Content language. One value per widget instance. |
|
|
71
|
+
| `theme` | `'auto'` / `'light'` / `'dark'` / color object | `'auto'` | `auto` follows host's `prefers-color-scheme` and reacts to changes. Pass an object to override colors — see below. |
|
|
72
|
+
| `scheduleUrl` | any HTTPS URL or `''` (same-origin) | `https://daily-soup-widget.vercel.app` | Override the CDN that serves `/schedule-<lang>.json`. |
|
|
73
|
+
| `maxWidth` | any valid CSS width (e.g. `'100%'`, `'48rem'`) | `'32rem'` | Cap on the card's rendered width. Set to `'100%'` to fill the embed container. |
|
|
73
74
|
|
|
74
|
-
|
|
75
|
+
### Theme as object
|
|
76
|
+
|
|
77
|
+
For a quick palette tweak without a full restyle, pass an object instead of a string:
|
|
78
|
+
|
|
79
|
+
```tsx
|
|
80
|
+
<DailySoup
|
|
81
|
+
theme={{ base: 'light', bg: '#fff8ee', border: 'transparent' }}
|
|
82
|
+
maxWidth="100%"
|
|
83
|
+
/>
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
Recognised keys: `base` (`'light'` | `'dark'`, controls default vars before overrides), `bg`, `ink`, `muted`, `border`, `accent`. Any omitted key falls back to the `base` palette. Object themes do **not** follow system preference — they're explicit.
|
|
87
|
+
|
|
88
|
+
CDN attribute support is string-only — use `data-theme="auto|light|dark"` and `data-max-width="..."`. The object form requires the NPM API.
|
|
89
|
+
|
|
90
|
+
Container queries still apply for layout. Three breakpoints: <320px (icon-only share row), 320–500px (standard), 500–700px (larger quote), >700px (comfortable spacing). The card never exceeds `maxWidth`.
|
|
75
91
|
|
|
76
92
|
---
|
|
77
93
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "daily-soup-widget",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"description": "Embeddable daily quote widget — growth-themed, deterministic, copyright-safe. Drop a script tag or npm install.",
|
|
5
5
|
"keywords": ["widget", "embed", "daily-quote", "shadow-dom", "react", "umd"],
|
|
6
6
|
"homepage": "https://daily-soup-widget.vercel.app",
|