xs-dev 0.25.3 → 0.25.5

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 (56) hide show
  1. package/README.md +27 -1
  2. package/build/toolbox/setup/pico.js +19 -4
  3. package/docs/astro.config.mjs +39 -8
  4. package/docs/public/favicon.ico +0 -0
  5. package/docs/public/favicon.svg +25 -0
  6. package/docs/src/assets/Chip.svg +25 -0
  7. package/docs/src/assets/Chip.webp +0 -0
  8. package/docs/src/assets/Logo.svg +113 -0
  9. package/docs/src/assets/Logo.webp +0 -0
  10. package/docs/src/assets/houston.webp +0 -0
  11. package/docs/src/components/YoutubeEmbed.astro +13 -0
  12. package/docs/src/content/config.ts +7 -0
  13. package/docs/src/{pages/en → content/docs}/features/doctor.md +0 -1
  14. package/docs/src/{pages/en → content/docs}/features/include.md +0 -1
  15. package/docs/src/{pages/en → content/docs}/features/init.md +0 -1
  16. package/docs/src/{pages/en → content/docs}/features/run.md +0 -1
  17. package/docs/src/{pages/en → content/docs}/features/scan.md +0 -1
  18. package/docs/src/{pages/en → content/docs}/features/setup.md +1 -2
  19. package/docs/src/{pages/en → content/docs}/features/teardown.md +0 -1
  20. package/docs/src/{pages/en → content/docs}/features/update.md +0 -1
  21. package/docs/src/{pages/en → content/docs}/guide/00-prepare.md +1 -2
  22. package/docs/src/{pages/en → content/docs}/guide/01-hello-console.md +0 -1
  23. package/docs/src/{pages/en → content/docs}/guide/02-blinky.md +2 -1
  24. package/docs/src/content/docs/index.mdx +66 -0
  25. package/docs/src/env.d.ts +2 -1
  26. package/docs/tsconfig.json +1 -16
  27. package/package.json +4 -8
  28. package/docs/public/make-scrollable-code-focusable.js +0 -3
  29. package/docs/public/run-hello-world.png +0 -0
  30. package/docs/src/components/Footer/AvatarList.astro +0 -149
  31. package/docs/src/components/Footer/Footer.astro +0 -16
  32. package/docs/src/components/HeadCommon.astro +0 -38
  33. package/docs/src/components/HeadSEO.astro +0 -28
  34. package/docs/src/components/Header/Header.astro +0 -133
  35. package/docs/src/components/Header/LanguageSelect.css +0 -47
  36. package/docs/src/components/Header/LanguageSelect.tsx +0 -47
  37. package/docs/src/components/Header/Search.css +0 -39
  38. package/docs/src/components/Header/Search.tsx +0 -61
  39. package/docs/src/components/Header/SidebarToggle.tsx +0 -43
  40. package/docs/src/components/Header/SkipToContent.astro +0 -22
  41. package/docs/src/components/LeftSidebar/LeftSidebar.astro +0 -118
  42. package/docs/src/components/PageContent/PageContent.astro +0 -40
  43. package/docs/src/components/RightSidebar/MoreMenu.astro +0 -78
  44. package/docs/src/components/RightSidebar/RightSidebar.astro +0 -26
  45. package/docs/src/components/RightSidebar/TableOfContents.tsx +0 -52
  46. package/docs/src/components/RightSidebar/ThemeToggleButton.css +0 -37
  47. package/docs/src/components/RightSidebar/ThemeToggleButton.tsx +0 -75
  48. package/docs/src/config.ts +0 -48
  49. package/docs/src/languages.ts +0 -10
  50. package/docs/src/layouts/MainLayout.astro +0 -122
  51. package/docs/src/pages/en/introduction.md +0 -82
  52. package/docs/src/pages/index.astro +0 -5
  53. package/docs/src/pages/search-index.json.ts +0 -18
  54. package/docs/src/styles/index.css +0 -382
  55. package/docs/src/styles/theme.css +0 -125
  56. package/docs/tailwind.config.cjs +0 -7
@@ -1,122 +0,0 @@
1
- ---
2
- import HeadCommon from '../components/HeadCommon.astro';
3
- import HeadSEO from '../components/HeadSEO.astro';
4
- import Header from '../components/Header/Header.astro';
5
- import Footer from '../components/Footer/Footer.astro';
6
- import PageContent from '../components/PageContent/PageContent.astro';
7
- import LeftSidebar from '../components/LeftSidebar/LeftSidebar.astro';
8
- import RightSidebar from '../components/RightSidebar/RightSidebar.astro';
9
- import * as CONFIG from '../config';
10
-
11
- const { content = {}, headings = [] } = Astro.props;
12
- const currentPage = new URL(Astro.request.url).pathname;
13
- const currentFile = `src/pages${currentPage.replace(/\/$/, '')}.md`;
14
- const githubEditUrl = CONFIG.GITHUB_EDIT_URL && CONFIG.GITHUB_EDIT_URL + currentFile;
15
- ---
16
-
17
- <html dir={content.dir ?? 'ltr'} lang={content.lang ?? 'en-us'} class="initial">
18
- <head>
19
- <HeadCommon />
20
- <HeadSEO {content} />
21
- <title>{content.title ? `${content.title} 🚀 ${CONFIG.SITE.title}` : CONFIG.SITE.title}</title>
22
- <style>
23
- body {
24
- width: 100%;
25
- display: grid;
26
- grid-template-rows: var(--theme-navbar-height) 1fr;
27
- --gutter: 0.5rem;
28
- --doc-padding: 2rem;
29
- }
30
- .layout {
31
- display: grid;
32
- grid-auto-flow: column;
33
- grid-template-columns:
34
- minmax(var(--gutter), 1fr)
35
- minmax(0, var(--max-width))
36
- minmax(var(--gutter), 1fr);
37
- overflow-x: hidden;
38
- }
39
- .layout :global(> *) {
40
- width: 100%;
41
- height: 100%;
42
- }
43
- .grid-sidebar {
44
- height: 100vh;
45
- position: sticky;
46
- top: 0;
47
- padding: 0;
48
- }
49
- #grid-left {
50
- position: fixed;
51
- background-color: var(--theme-bg);
52
- z-index: 10;
53
- display: none;
54
- }
55
- #grid-main {
56
- padding: var(--doc-padding) var(--gutter);
57
- grid-column: 2;
58
- display: flex;
59
- flex-direction: column;
60
- height: 100%;
61
- }
62
- #grid-right {
63
- display: none;
64
- }
65
- :global(.mobile-sidebar-toggle) {
66
- overflow: hidden;
67
- }
68
- :global(.mobile-sidebar-toggle) #grid-left {
69
- display: block;
70
- top: 2rem;
71
- }
72
- @media (min-width: 50em) {
73
- .layout {
74
- overflow: initial;
75
- grid-template-columns:
76
- 20rem
77
- minmax(0, var(--max-width));
78
- gap: 1em;
79
- }
80
- #grid-left {
81
- display: flex;
82
- padding-left: 2rem;
83
- position: sticky;
84
- grid-column: 1;
85
- }
86
- }
87
-
88
- @media (min-width: 72em) {
89
- .layout {
90
- grid-template-columns:
91
- 20rem
92
- minmax(0, var(--max-width))
93
- 18rem;
94
- padding-left: 0;
95
- padding-right: 0;
96
- margin: 0 auto;
97
- }
98
- #grid-right {
99
- grid-column: 3;
100
- display: flex;
101
- }
102
- }
103
- </style>
104
- </head>
105
-
106
- <body>
107
- <Header {currentPage} />
108
- <main class="layout">
109
- <aside id="grid-left" class="grid-sidebar" title="Site Navigation">
110
- <LeftSidebar {currentPage} />
111
- </aside>
112
- <div id="grid-main">
113
- <PageContent {content} {githubEditUrl}>
114
- <slot />
115
- </PageContent>
116
- </div>
117
- <aside id="grid-right" class="grid-sidebar" title="Table of Contents">
118
- <RightSidebar {content} {headings} {githubEditUrl} />
119
- </aside>
120
- </main>
121
- </body>
122
- </html>
@@ -1,82 +0,0 @@
1
- ---
2
- title: Introduction
3
- description: xs-dev intro
4
- layout: ../../layouts/MainLayout.astro
5
- ---
6
-
7
- # **Welcome to xs-dev!**
8
-
9
- CLI for automating the setup and usage of [Moddable XS tools](https://github.com/Moddable-OpenSource/moddable/blob/public/documentation/Moddable%20SDK%20-%20Getting%20Started.md)
10
-
11
- The Moddable SDK and associated dev board tooling is incredibly empowering for embedded JS hardware development, however the set up process can be tedious to follow when getting started. This project aims to streamline the installation and environment configuration requirements across platforms in just a few commands.
12
-
13
- **This project is a work in progress and currently pre-1.0, so there may be breaking changes.**
14
-
15
- **Features:**
16
-
17
- - [X] [Moddable SDK setup](/en/features/setup)
18
- - [X] [SDK updates](/en/features/update)
19
- - [X] [Teardown](/en/features/teardown)
20
- - [X] [Device discovery](/en/features/scan)
21
- - [X] [Project creation](/en/features/init)
22
- - [X] [Run a project or example](/en/features/run)
23
- - [X] [SDK module management](/en/features/include)
24
- - [X] [Get dev environment info](/en/features/doctor)
25
- - [ ] Third-party dependency management ([coming soon](https://github.com/HipsterBrown/xs-dev/issues/49))
26
-
27
- **Platform support:**
28
-
29
- - [X] Mac
30
- - [-] Windows (currently in beta)
31
- - [X] Linux
32
-
33
- **Check out the getting started video from the Moddable team**
34
-
35
- <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/1gxFWBnDl18" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
36
-
37
- **Read through the starter guide for a detailed walkthrough**
38
-
39
- 0. [Prepare for embedded JS development](/en/guide/00-prepare)
40
- 1. [Hello Console](/en/guide/01-hello-console)
41
- 2. [Guiding light](/en/guide/02-blinky)
42
-
43
- ## Requirements
44
-
45
- [Node.js >= v16](https://nodejs.org/en/)
46
-
47
- _If you've never installed Node.js before, check out the [getting started guide for xs-dev](/xs-dev/en/guide/00-prepare#nodejs-package-manager-optional)._
48
-
49
- **On Linux:**
50
-
51
- Setup commands rely on [`ssh-askpass`](https://packages.ubuntu.com/bionic/ssh-askpass) to prompt for permission when installing other tools and dependencies.
52
-
53
- ## Installation
54
-
55
- Install the package globally from `npm`:
56
-
57
- ```
58
- npm install -g xs-dev
59
- ```
60
-
61
- ```
62
- pnpm install -g xs-dev
63
- ```
64
-
65
- ```
66
- yarn global add xs-dev
67
- ```
68
-
69
- ## Update to latest release
70
-
71
- ```
72
- npm update -g xs-dev
73
- ```
74
-
75
- ```
76
- pnpm update -g xs-dev
77
- ```
78
-
79
- ```
80
- yarn global upgrade xs-dev
81
- ```
82
-
@@ -1,5 +0,0 @@
1
- <script is:inline>
2
- // Redirect your homepage to the first page of documentation.
3
- // If you have a landing page, remove this script and add it here!
4
- window.location.pathname += `en/introduction`;
5
- </script>
@@ -1,18 +0,0 @@
1
- export async function get() {
2
- const pagesMeta = import.meta.glob('./en/**/*.md')
3
- const pages = await Promise.all(
4
- Object.values(pagesMeta).map(async (getInfo) => {
5
- const { rawContent, url, frontmatter } = await getInfo()
6
- return {
7
- content: rawContent(),
8
- url,
9
- ...frontmatter,
10
- }
11
- })
12
- )
13
- const json = JSON.stringify(pages)
14
-
15
- return {
16
- body: json,
17
- }
18
- }
@@ -1,382 +0,0 @@
1
- * {
2
- box-sizing: border-box;
3
- margin: 0;
4
- }
5
-
6
- /* Global focus outline reset */
7
- *:focus:not(:focus-visible) {
8
- outline: none;
9
- }
10
-
11
- :root {
12
- --user-font-scale: 1rem - 16px;
13
- --max-width: calc(100% - 1rem);
14
- }
15
-
16
- @media (min-width: 50em) {
17
- :root {
18
- --max-width: 46em;
19
- }
20
- }
21
-
22
- body {
23
- display: flex;
24
- flex-direction: column;
25
- min-height: 100vh;
26
- font-family: var(--font-body);
27
- font-size: 1rem;
28
- font-size: clamp(0.9rem, 0.75rem + 0.375vw + var(--user-font-scale), 1rem);
29
- line-height: 1.5;
30
- max-width: 100vw;
31
- }
32
-
33
- nav ul {
34
- list-style: none;
35
- padding: 0;
36
- }
37
-
38
- .content > section > * + * {
39
- margin-top: 1.25rem;
40
- }
41
-
42
- .content > section > :first-child {
43
- margin-top: 0;
44
- }
45
-
46
- /* Typography */
47
- h1,
48
- h2,
49
- h3,
50
- h4,
51
- h5,
52
- h6 {
53
- margin-bottom: 1rem;
54
- font-weight: bold;
55
- line-height: 1;
56
- }
57
-
58
- h1,
59
- h2 {
60
- max-width: 40ch;
61
- }
62
-
63
- :is(h2, h3):not(:first-child) {
64
- margin-top: 3rem;
65
- }
66
-
67
- :is(h4, h5, h6):not(:first-child) {
68
- margin-top: 2rem;
69
- }
70
-
71
- h1 {
72
- font-size: 3.25rem;
73
- font-weight: 800;
74
- }
75
-
76
- h2 {
77
- font-size: 2.5rem;
78
- }
79
-
80
- h3 {
81
- font-size: 1.75rem;
82
- }
83
-
84
- h4 {
85
- font-size: 1.3rem;
86
- }
87
-
88
- h5 {
89
- font-size: 1rem;
90
- }
91
-
92
- p {
93
- line-height: 1.65em;
94
- }
95
-
96
- .content ul {
97
- line-height: 1.1em;
98
- }
99
-
100
- p,
101
- .content ul {
102
- color: var(--theme-text-light);
103
- }
104
-
105
- small,
106
- .text_small {
107
- font-size: 0.833rem;
108
- }
109
-
110
- a {
111
- color: var(--theme-text-accent);
112
- font-weight: 400;
113
- text-underline-offset: 0.08em;
114
- align-items: center;
115
- gap: 0.5rem;
116
- }
117
-
118
- article > section :is(ul, ol) > * + * {
119
- margin-top: 0.75rem;
120
- }
121
-
122
- article > section nav :is(ul, ol) > * + * {
123
- margin-top: inherit;
124
- }
125
-
126
- article > section li > :is(p, pre, blockquote):not(:first-child) {
127
- margin-top: 1rem;
128
- }
129
-
130
- article > section :is(ul, ol) {
131
- padding-left: 1em;
132
- }
133
-
134
- article > section nav :is(ul, ol) {
135
- padding-left: inherit;
136
- }
137
-
138
- article > section nav {
139
- margin-top: 1rem;
140
- margin-bottom: 2rem;
141
- }
142
-
143
- article > section ::marker {
144
- font-weight: bold;
145
- color: var(--theme-text-light);
146
- }
147
-
148
- article > section iframe {
149
- width: 100%;
150
- height: auto;
151
- aspect-ratio: 16 / 9;
152
- }
153
-
154
- a > code {
155
- position: relative;
156
- color: var(--theme-text-accent);
157
- background: transparent;
158
- text-underline-offset: var(--padding-block);
159
- }
160
-
161
- a > code::before {
162
- content: '';
163
- position: absolute;
164
- top: 0;
165
- right: 0;
166
- bottom: 0;
167
- left: 0;
168
- display: block;
169
- background: var(--theme-accent);
170
- opacity: var(--theme-accent-opacity);
171
- border-radius: var(--border-radius);
172
- }
173
-
174
- a:hover,
175
- a:focus {
176
- text-decoration: underline;
177
- }
178
-
179
- a:focus {
180
- outline: 2px solid currentColor;
181
- outline-offset: 0.25em;
182
- }
183
-
184
- strong {
185
- font-weight: 600;
186
- color: inherit;
187
- }
188
-
189
- /* Supporting Content */
190
-
191
- code {
192
- --border-radius: 3px;
193
- --padding-block: 0.2rem;
194
- --padding-inline: 0.33rem;
195
-
196
- font-family: var(--font-mono);
197
- font-size: 0.85em;
198
- color: inherit;
199
- background-color: var(--theme-code-inline-bg);
200
- padding: var(--padding-block) var(--padding-inline);
201
- margin: calc(var(--padding-block) * -1) -0.125em;
202
- border-radius: var(--border-radius);
203
- word-break: break-word;
204
- }
205
-
206
- pre.astro-code > code {
207
- all: unset;
208
- }
209
-
210
- pre > code {
211
- font-size: 1em;
212
- }
213
-
214
- table,
215
- pre {
216
- position: relative;
217
- --padding-block: 1rem;
218
- --padding-inline: 2rem;
219
- padding: var(--padding-block) var(--padding-inline);
220
- padding-right: calc(var(--padding-inline) * 2);
221
- margin-left: calc(var(--padding-inline) * -1);
222
- margin-right: calc(var(--padding-inline) * -1);
223
- font-family: var(--font-mono);
224
-
225
- line-height: 1.5;
226
- font-size: 0.85em;
227
- overflow-y: hidden;
228
- overflow-x: auto;
229
- }
230
-
231
- table {
232
- width: 100%;
233
- padding: var(--padding-block) 0;
234
- margin: 0;
235
- border-collapse: collapse;
236
- }
237
-
238
- /* Zebra striping */
239
- tr:nth-of-type(odd) {
240
- background: var(--theme-bg-hover);
241
- }
242
- th {
243
- background: var(--color-black);
244
- color: var(--theme-color);
245
- font-weight: bold;
246
- }
247
- td,
248
- th {
249
- padding: 6px;
250
- text-align: left;
251
- }
252
-
253
- pre {
254
- background-color: var(--theme-code-bg);
255
- color: var(--theme-code-text);
256
- }
257
-
258
- blockquote code {
259
- background-color: var(--theme-bg);
260
- }
261
-
262
- @media (min-width: 37.75em) {
263
- pre {
264
- --padding-inline: 1.25rem;
265
- border-radius: 8px;
266
- margin-left: 0;
267
- margin-right: 0;
268
- }
269
- }
270
-
271
- blockquote {
272
- margin: 2rem 0;
273
- padding: 1.25em 1.5rem;
274
- border-left: 3px solid var(--theme-text-light);
275
- background-color: var(--theme-bg-offset);
276
- border-radius: 0 0.25rem 0.25rem 0;
277
- line-height: 1.7;
278
- }
279
-
280
- img {
281
- max-width: 100%;
282
- }
283
-
284
- .flex {
285
- display: flex;
286
- align-items: center;
287
- }
288
-
289
- button {
290
- display: flex;
291
- align-items: center;
292
- justify-items: center;
293
- gap: 0.25em;
294
- padding: 0.33em 0.67em;
295
- border: 0;
296
- background: var(--theme-bg);
297
- display: flex;
298
- font-size: 1rem;
299
- align-items: center;
300
- gap: 0.25em;
301
- border-radius: 99em;
302
- color: var(--theme-text);
303
- background-color: var(--theme-bg);
304
- }
305
-
306
- h2.heading {
307
- font-size: 1rem;
308
- font-weight: 700;
309
- padding: 0.1rem 1rem;
310
- text-transform: uppercase;
311
- margin-bottom: 0.5rem;
312
- }
313
-
314
- .header-link {
315
- font-size: 1rem;
316
- padding: 0.1rem 0 0.1rem 1rem;
317
- border-left: 4px solid var(--theme-divider);
318
- }
319
-
320
- .header-link:hover,
321
- .header-link:focus {
322
- border-left-color: var(--theme-accent);
323
- color: var(--theme-accent);
324
- }
325
- .header-link:focus-within {
326
- color: var(--theme-text-light);
327
- border-left-color: hsla(var(--color-gray-40), 1);
328
- }
329
- .header-link svg {
330
- opacity: 0.6;
331
- }
332
- .header-link:hover svg {
333
- opacity: 0.8;
334
- }
335
- .header-link a {
336
- display: inline-flex;
337
- gap: 0.5em;
338
- width: 100%;
339
- padding: 0.15em 0 0.15em 0;
340
- }
341
-
342
- .header-link.depth-3 {
343
- padding-left: 2rem;
344
- }
345
- .header-link.depth-4 {
346
- padding-left: 3rem;
347
- }
348
-
349
- .header-link a {
350
- font: inherit;
351
- color: inherit;
352
- text-decoration: none;
353
- }
354
-
355
- /* Screenreader Only Text */
356
- .sr-only {
357
- position: absolute;
358
- width: 1px;
359
- height: 1px;
360
- padding: 0;
361
- margin: -1px;
362
- overflow: hidden;
363
- clip: rect(0, 0, 0, 0);
364
- white-space: nowrap;
365
- border-width: 0;
366
- }
367
-
368
- .focus\:not-sr-only:focus,
369
- .focus\:not-sr-only:focus-visible {
370
- position: static;
371
- width: auto;
372
- height: auto;
373
- padding: 0;
374
- margin: 0;
375
- overflow: visible;
376
- clip: auto;
377
- white-space: normal;
378
- }
379
-
380
- :target {
381
- scroll-margin: calc(var(--theme-sidebar-offset, 5rem) + 2rem) 0 2rem;
382
- }