@webjskit/cli 0.1.1 → 0.1.2
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 +12 -7
- package/lib/create.js +13 -5
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -7,20 +7,25 @@ Installing this package gives you the `webjs` command.
|
|
|
7
7
|
|
|
8
8
|
## Install
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
Install once, globally:
|
|
11
11
|
|
|
12
12
|
```sh
|
|
13
|
-
|
|
14
|
-
cd my-app
|
|
15
|
-
npm install
|
|
16
|
-
npm run dev
|
|
13
|
+
npm i -g @webjskit/cli
|
|
17
14
|
```
|
|
18
15
|
|
|
19
|
-
|
|
16
|
+
Then scaffold a new app anywhere:
|
|
20
17
|
|
|
21
18
|
```sh
|
|
22
|
-
npm install -g @webjskit/cli
|
|
23
19
|
webjs create my-app
|
|
20
|
+
cd my-app && npm install && npm run dev
|
|
21
|
+
# → http://localhost:3000
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
One-shot without global install:
|
|
25
|
+
|
|
26
|
+
```sh
|
|
27
|
+
npx @webjskit/cli create my-app
|
|
28
|
+
cd my-app && npm install && npm run dev
|
|
24
29
|
```
|
|
25
30
|
|
|
26
31
|
## Commands
|
package/lib/create.js
CHANGED
|
@@ -498,18 +498,26 @@ export class ThemeToggle extends WebComponent {
|
|
|
498
498
|
}
|
|
499
499
|
|
|
500
500
|
render() {
|
|
501
|
+
const t = this.state.theme;
|
|
502
|
+
const label = t === 'system' ? 'AUTO' : t === 'light' ? 'LIGHT' : 'DARK';
|
|
503
|
+
const icon = t === 'light' ? ICONS.sun : t === 'dark' ? ICONS.moon : ICONS.system;
|
|
501
504
|
return html\`
|
|
502
505
|
<button
|
|
503
|
-
class="inline-flex items-center
|
|
506
|
+
class="inline-flex items-center justify-center w-9 h-9 p-0 border border-border rounded-full bg-bg-elev text-fg-muted cursor-pointer transition-all duration-150 hover:text-fg hover:border-border-strong active:scale-[0.94] focus-visible:outline-none focus-visible:border-accent focus-visible:ring-[3px] focus-visible:ring-accent-tint"
|
|
504
507
|
@click=\${() => this.cycle()}
|
|
505
|
-
|
|
506
|
-
\${
|
|
507
|
-
|
|
508
|
-
</button>
|
|
508
|
+
aria-label="Cycle theme (currently \${label})"
|
|
509
|
+
title="Theme: \${label.toLowerCase()}"
|
|
510
|
+
>\${icon}</button>
|
|
509
511
|
\`;
|
|
510
512
|
}
|
|
511
513
|
}
|
|
512
514
|
|
|
515
|
+
const ICONS = {
|
|
516
|
+
sun: html\`<svg class="w-4 h-4 stroke-current fill-none" style="stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 3v2M12 19v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M3 12h2M19 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>\`,
|
|
517
|
+
moon: html\`<svg class="w-4 h-4 stroke-current fill-none" style="stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round" viewBox="0 0 24 24"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z"/></svg>\`,
|
|
518
|
+
system: html\`<svg class="w-4 h-4 stroke-current fill-none" style="stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round" viewBox="0 0 24 24"><path d="M3 5h18v11H3zM8 20h8M12 16v4"/></svg>\`,
|
|
519
|
+
};
|
|
520
|
+
|
|
513
521
|
ThemeToggle.register('theme-toggle');
|
|
514
522
|
`);
|
|
515
523
|
} // end if (!isApi)
|