@meteo28093/equinox-ui 0.0.1 → 0.0.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 +5 -53
- package/dist/equinox-ui.0.0.2.esm.js +2575 -0
- package/dist/equinox-ui.0.0.2.global.js +2575 -0
- package/dist/equinox-ui.0.0.3.esm.js +2575 -0
- package/dist/equinox-ui.0.0.3.global.js +2575 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,55 +2,17 @@
|
|
|
2
2
|
|
|
3
3
|
Equinox UI is a no-build web component library for blogs and small web projects.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
### Classless CSS compatibility
|
|
8
|
-
|
|
9
|
-
Components stay readable and usable in all of:
|
|
10
|
-
|
|
11
|
-
- No CSS framework (browser defaults + component fallbacks)
|
|
12
|
-
- Water.css
|
|
13
|
-
- Pico.css
|
|
14
|
-
- Sakura.css
|
|
15
|
-
|
|
16
|
-
You can use the bundled `equinox.css`
|
|
5
|
+
You can use the bundled `equinox.css`, use a classless framework like water.css or pico.css or style the components.
|
|
17
6
|
|
|
18
7
|
## Use with a CDN
|
|
19
8
|
|
|
20
9
|
```html
|
|
21
|
-
<script src="https://
|
|
10
|
+
<script src="https://unpkg.com/@meteo28093/equinox-ui@0.0.3/dist/equinox-ui.0.0.3.global.js"></script>
|
|
22
11
|
```
|
|
23
12
|
|
|
24
13
|
This registers components globally.
|
|
25
14
|
|
|
26
|
-
##
|
|
27
|
-
|
|
28
|
-
Example (Pico.css):
|
|
29
|
-
|
|
30
|
-
```html
|
|
31
|
-
<link
|
|
32
|
-
rel="stylesheet"
|
|
33
|
-
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
|
|
34
|
-
/>
|
|
35
|
-
<script type="module">
|
|
36
|
-
import "https://cdn.jsdelivr.net/npm/equinox-ui@1.0.0/dist/equinox-ui.esm.js";
|
|
37
|
-
</script>
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
Example (Water.css):
|
|
41
|
-
|
|
42
|
-
```html
|
|
43
|
-
<link
|
|
44
|
-
rel="stylesheet"
|
|
45
|
-
href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"
|
|
46
|
-
/>
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
## Use without any CSS framework
|
|
50
|
-
|
|
51
|
-
No additional CSS is required. Components include fallback tokens so they remain readable out of the box.
|
|
52
|
-
|
|
53
|
-
## Component capabilities
|
|
15
|
+
## Components
|
|
54
16
|
|
|
55
17
|
- `ee-nav` - Navigation component with mobile menu
|
|
56
18
|
- `ee-code-block` - Syntax-highlighted code display
|
|
@@ -77,16 +39,6 @@ node statusbar.js <component-tag> '<params-json>' --icon <icon-spec>
|
|
|
77
39
|
Examples:
|
|
78
40
|
|
|
79
41
|
```bash
|
|
80
|
-
node
|
|
81
|
-
node
|
|
42
|
+
node statusbar.js ee-moon-card '{"city": "Berlin"}' --icon lucide:moon-star
|
|
43
|
+
node statusbar.js ee-geo-storm '{}' --icon lucide:cloud-lightning
|
|
82
44
|
```
|
|
83
|
-
|
|
84
|
-
Notes:
|
|
85
|
-
|
|
86
|
-
- `<component-tag>` must match a file in `src/components`, for example `ee-card` or `ee-geo-storm`.
|
|
87
|
-
- `<params-json>` is optional and must be a JSON object. Values are applied to the element as attributes and properties before it mounts.
|
|
88
|
-
- `--icon` is optional. `lucide:<name>` uses a Lucide icon from `src/vendor/lucide.js`. `sf:<name>` uses an Apple SF Symbol.
|
|
89
|
-
- Only one live helper is kept per component tag. Launching `ee-zodiac` again replaces the existing `ee-zodiac` helper, but `ee-zodiac` and `ee-card` can run at the same time.
|
|
90
|
-
- The popover includes a `Quit` button that closes that helper instance.
|
|
91
|
-
|
|
92
|
-
The helper compiles `mac/StatusBarApp.swift`, serves `mac/StatusPopover.html` over `http://127.0.0.1`, and loads the selected component into a `WKWebView`.
|