create-obsidian-arrow 0.2.1 → 0.2.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/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { html } from "@arrow-js/core";
|
|
2
2
|
import type { ArrowExpression } from "@arrow-js/core";
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
3
|
+
import { findExample } from "../examples/registry";
|
|
4
|
+
import { Home } from "../sandbox/home";
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
7
|
* Single route resolver, shared by every entry point. Returns the page status,
|
|
@@ -24,8 +24,8 @@ export function routeToPage(url: string): Page {
|
|
|
24
24
|
if (pathname === "/" || pathname === "") {
|
|
25
25
|
return {
|
|
26
26
|
status: 200,
|
|
27
|
-
title:
|
|
28
|
-
view:
|
|
27
|
+
title: APP_NAME,
|
|
28
|
+
view: Home(),
|
|
29
29
|
};
|
|
30
30
|
}
|
|
31
31
|
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
import { component, html, reactive } from "@arrow-js/core";
|
|
2
|
+
import type { ArrowTemplate } from "@arrow-js/core";
|
|
3
|
+
import { ExamplesIndex } from "../examples/ExamplesIndex";
|
|
4
|
+
import { examples } from "../examples/registry";
|
|
5
|
+
import { layoutState } from "./layout";
|
|
6
|
+
import { themeState } from "./theme";
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Sandbox landing page at "/": a readiness check + getting-started commands +
|
|
10
|
+
* the examples list. Sandbox chrome — does not port to a plugin.
|
|
11
|
+
*
|
|
12
|
+
* The readiness probe catches the #1 fresh-machine gotcha: running `pnpm dev`
|
|
13
|
+
* before `pnpm pull-css` leaves app.css unloaded, so every `var(--…)` token is
|
|
14
|
+
* empty. We detect that by reading the computed value of a known token.
|
|
15
|
+
*/
|
|
16
|
+
const probe = reactive({ tick: 0 });
|
|
17
|
+
|
|
18
|
+
function stylingLoaded(): boolean {
|
|
19
|
+
const generation = probe.tick; // reactive dependency; Re-check bumps it
|
|
20
|
+
const style = getComputedStyle(document.body);
|
|
21
|
+
return (
|
|
22
|
+
generation >= 0 &&
|
|
23
|
+
style.getPropertyValue("--background-primary").trim() !== "" &&
|
|
24
|
+
style.getPropertyValue("--text-accent").trim() !== ""
|
|
25
|
+
);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
function recheck(): void {
|
|
29
|
+
probe.tick++;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
const GETTING_STARTED = [
|
|
33
|
+
{ cmd: "pnpm pull-css", note: "extract Obsidian's app.css — run once (macOS auto-detect)" },
|
|
34
|
+
{ cmd: "pnpm dev", note: "this dev server (Vite + HMR)" },
|
|
35
|
+
{ cmd: "pnpm skills:install --yes", note: "install the agent skills from the published repo" },
|
|
36
|
+
{ cmd: "pnpm run ci", note: "biome + typecheck + tests + build" },
|
|
37
|
+
];
|
|
38
|
+
|
|
39
|
+
export const Home = component((): ArrowTemplate => {
|
|
40
|
+
// Re-probe shortly after mount, in case app.css finished loading after the
|
|
41
|
+
// first paint (stylesheets load async).
|
|
42
|
+
setTimeout(recheck, 250);
|
|
43
|
+
|
|
44
|
+
return html`
|
|
45
|
+
<div class="oas-settings">
|
|
46
|
+
<div class="setting-item setting-item-heading">
|
|
47
|
+
<div class="setting-item-info">
|
|
48
|
+
<div class="setting-item-name">Obsidian Arrow Sandbox</div>
|
|
49
|
+
<div class="setting-item-description">
|
|
50
|
+
Prototype Obsidian plugin UI with Arrow.js against Obsidian's real styling.
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
|
|
55
|
+
<div class="setting-item">
|
|
56
|
+
<div class="setting-item-info">
|
|
57
|
+
<div class="setting-item-name">Obsidian styling</div>
|
|
58
|
+
<div class="setting-item-description">
|
|
59
|
+
${() =>
|
|
60
|
+
stylingLoaded()
|
|
61
|
+
? "app.css loaded — tokens resolve."
|
|
62
|
+
: "Not loaded — run `pnpm pull-css`, then Re-check."}
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
<div class="setting-item-control">
|
|
66
|
+
<span
|
|
67
|
+
style="${() =>
|
|
68
|
+
`color: ${stylingLoaded() ? "var(--text-success)" : "var(--text-error)"}; font-weight: var(--font-semibold);`}"
|
|
69
|
+
>${() => (stylingLoaded() ? "READY" : "MISSING")}</span>
|
|
70
|
+
<button class="oas-recheck" @click="${recheck}">Re-check</button>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
|
|
74
|
+
<div class="setting-item">
|
|
75
|
+
<div class="setting-item-info">
|
|
76
|
+
<div class="setting-item-name">Theme / panel</div>
|
|
77
|
+
<div class="setting-item-description">
|
|
78
|
+
${() => `${themeState.theme} · ${layoutState.width}px`}
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
82
|
+
|
|
83
|
+
<div class="setting-item setting-item-heading">
|
|
84
|
+
<div class="setting-item-info">
|
|
85
|
+
<div class="setting-item-name">Getting started</div>
|
|
86
|
+
<div class="setting-item-description">
|
|
87
|
+
See AGENTS.md + docs/ for the full flow; agent prompts in docs/prompts/.
|
|
88
|
+
</div>
|
|
89
|
+
</div>
|
|
90
|
+
</div>
|
|
91
|
+
${GETTING_STARTED.map((step) =>
|
|
92
|
+
html`
|
|
93
|
+
<div class="setting-item">
|
|
94
|
+
<div class="setting-item-info">
|
|
95
|
+
<div class="setting-item-name" style="font-family: var(--font-monospace);">
|
|
96
|
+
${step.cmd}
|
|
97
|
+
</div>
|
|
98
|
+
<div class="setting-item-description">${step.note}</div>
|
|
99
|
+
</div>
|
|
100
|
+
</div>
|
|
101
|
+
`.key(step.cmd)
|
|
102
|
+
)}
|
|
103
|
+
</div>
|
|
104
|
+
${ExamplesIndex(examples)}
|
|
105
|
+
`;
|
|
106
|
+
});
|
|
@@ -109,6 +109,11 @@ body {
|
|
|
109
109
|
align-items: center;
|
|
110
110
|
}
|
|
111
111
|
|
|
112
|
+
.oas-frame .setting-item-control button.oas-recheck {
|
|
113
|
+
margin-left: var(--size-4-2);
|
|
114
|
+
font-size: var(--font-ui-smaller);
|
|
115
|
+
}
|
|
116
|
+
|
|
112
117
|
/* Drag-to-resize handle on the pane's right edge (Obsidian-like). */
|
|
113
118
|
.oas-frame .oas-resize-handle {
|
|
114
119
|
position: absolute;
|