Skip to content

Commit 8da6f3a

Browse files
NullVoxPopuliNullVoxPopuli
authored
Merge pull request #1988 from NullVoxPopuli/more-repl-sdk-docs
More REPL-sdk docs
2 parents 80f0372 + 0c6c2b5 commit 8da6f3a

File tree

22 files changed

+1336
-732
lines changed

22 files changed

+1336
-732
lines changed

‎apps/repl/.template-lintrc.cjs‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,12 @@ module.exports = {
1818
'no-forbidden-elements': 'off',
1919
// Incorrect, because it matches anything that looks like an arg, even if it's a string (intentionally)
2020
'no-potential-path-strings': 'off',
21+
22+
// Broke with formatDocs here:
23+
// {{#each formats as |formatDocs|}}
24+
// <formatDocs />
25+
// {{/each}}
26+
'no-shadowed-elements': 'off',
2127
},
2228
},
2329
{

‎apps/repl/app/templates/docs.gts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,6 @@ import { NavLink, Topics } from './docs/topics.gts';
1313
</div>
1414
</nav>
1515

16-
<hr />
17-
1816
<div class="centered-content">
1917
<main class="prose">
2018
{{outlet}}

‎apps/repl/app/templates/docs/editor.gts‎

Lines changed: 295 additions & 294 deletions
Large diffs are not rendered by default.

‎apps/repl/app/templates/docs/embedding.gts‎

Lines changed: 164 additions & 147 deletions
Original file line numberDiff line numberDiff line change
@@ -47,154 +47,171 @@ const EXAMPLES = {
4747
};
4848

4949
<template>
50-
<h1>Embedding</h1>
51-
52-
The REPL can be embedded via invocation of the
53-
<code>REPL</code>
54-
component.
55-
56-
<div data-format="gjs" {{highlighted EXAMPLES.basic}}></div>
57-
58-
Output:
59-
<REPL @code={{counter}} @editor="60h" @editorLoad="force" />
60-
61-
The
62-
<code>REPL</code>
63-
component interprets and configures the URL set on the iframe that loads the REPL.
64-
65-
<H2 @id="install">Install</H2>
66-
67-
With your favorite package manager
68-
69-
<div data-format="bash" {{highlighted "npm add limber-ui"}}></div>
70-
<div data-format="bash" {{highlighted "pnpm add limber-ui"}}></div>
71-
(etc)
72-
73-
<section class="options">
74-
<h2>Options</h2>
75-
76-
<p>
77-
For each option:
78-
79-
<dl>
80-
<dt><Live /></dt>
81-
<dd>changes to this argument will update the REPL (or its container) without a full refresh
82-
of the iframe</dd>
83-
<dt><Refresh /></dt>
84-
<dd>changes to this argument will cause the REPL to fully reload</dd>
85-
</dl>
86-
87-
These (both
88-
<Live />
89-
and
90-
<Refresh />) are inverses of each other.
91-
</p>
92-
93-
<Option @name="@code" @type="string" @live={{true}}>
94-
This is the code that both shows up in the editor and is rendered in the output pane. By
95-
default the format is gjs, so the passed code should be written in gjs.
96-
</Option>
97-
98-
<Option @name="@format" @type="string" @live={{true}}>
99-
This is the format that the REPL should both render and load the editor for. The default is
100-
"gjs", but valid options are:
50+
<aside>
51+
<nav>
10152
<ul>
102-
<li>"gjs"</li>
103-
<li>"js"</li>
104-
<li>"gmd"</li>
105-
<li>"svelte"</li>
106-
<li>"vue"</li>
107-
<li>"mermaid"</li>
108-
<li>"hbs|ember"</li>
109-
<li>"jsx|react"</li>
110-
</ul>
111-
112-
</Option>
113-
114-
<Option @name="@clickToLoad" @type="boolean">
115-
By default, the REPL will load when its bounding box approaches the viewport (<ExternalLink
116-
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe#lazy"
117-
>via loading=lazy</ExternalLink>). Setting
118-
<code>@clickToLoad</code>
119-
will require user interaction before
120-
<em>rendering</em>
121-
the iframe.
122-
<br />
123-
<br />
124-
125-
The UI for click to load has stable CSS classes available for customization.
126-
<code>.limber__code__click-to-load</code>
127-
and
128-
<code>.limber__code__click-to-load__button</code>
129-
130-
<Example @clickToLoad={{true}} @editorLoad="force" @code={{hello}} @configurable={{false}} />
131-
</Option>
132-
133-
<Option @name="@editor" @type="string">
134-
Set the editor size and/or split. For example passing
135-
<code>min</code>
136-
will minimize the editor, and passing
137-
<code>max</code>
138-
will maximize the editor. Also, the percent of the vertical or horizontal direction can be
139-
specified as well. For example, passing
140-
<code>60v</code>
141-
will cause a vertical split where the editor takes up 60% of the available space and
142-
<code>30h</code>
143-
will cause a horizontal split where the editor takes up 30% of the available space.
144-
145-
<Example @editor="30v" @code={{hello}} />
146-
</Option>
147-
148-
<Option @name="@editorLoad" @type="string">
149-
Determines how the editor should load. Normally the editor will load automatically upon
150-
detecting interaction activity. This is to optimize page-load as editors can be a few MB when
151-
fully featured. Valid options:
152-
<ul>
153-
<li>
154-
"force" - the editor will always load eagerly
155-
</li>
156-
<li>
157-
"onclick" - the editor will only load when the user clicks that they want to edit the
158-
example
159-
</li>
160-
<li>
161-
"never" - the editor is entirely disabled and the left-hand side is only a highlighted
162-
code snippet as is not editable
53+
<li><a href="#install">Install</a></li>
54+
<li><a href="#options">Options</a>
16355
</li>
164-
</ul>
165-
166-
<Example @editorLoad="never" @code={{hello}} />
167-
</Option>
168-
169-
<Option @name="@lines" @type="number" @live={{true}}>
170-
Sets the height of the iframe via specifying the number of lines of code to show.
17156

172-
<Example @lines={{4}} @code={{hello}} />
173-
</Option>
174-
175-
<Option @name="@title" @type="string" @live={{true}}>
176-
Sets the
177-
<code>title</code>
178-
attribute on the iframe. If
179-
<code>@title</code>
180-
is not passed, this value will be generated for you. Helps with screen readers.
181-
</Option>
182-
183-
<Option @name="@shadowdom" @type="boolean" @live={{true}}>
184-
Sets whether or not the output area should be rendered within a shadow-dom. The default is to
185-
render the output in a shadow-dom (true).
186-
<br />
187-
<br />
188-
Changing this can be helpful if importing a library only knows how to mutate the document's
189-
head (for styles or otherwise)
190-
</Option>
191-
192-
<Option @name="@nohighlight" @type="boolean">
193-
If set to true, the preview code shown before the editor loads will not have highlighting
194-
enabled. This option has no affect when the editor is forced to eagerly load.
195-
196-
<Example @nohighlight={{true}} @code={{hello}} />
197-
</Option>
198-
199-
</section>
57+
</ul>
58+
</nav>
59+
</aside>
60+
<div class="main-content">
61+
<h1>Embedding</h1>
62+
63+
The REPL can be embedded via invocation of the
64+
<code>REPL</code>
65+
component.
66+
67+
<div data-format="gjs" {{highlighted EXAMPLES.basic}}></div>
68+
69+
Output:
70+
<REPL @code={{counter}} @editor="60h" @editorLoad="force" />
71+
72+
The
73+
<code>REPL</code>
74+
component interprets and configures the URL set on the iframe that loads the REPL.
75+
76+
<H2 @id="install">Install</H2>
77+
78+
With your favorite package manager
79+
80+
<div data-format="bash" {{highlighted "npm add limber-ui"}}></div>
81+
<div data-format="bash" {{highlighted "pnpm add limber-ui"}}></div>
82+
(etc)
83+
84+
<section class="options">
85+
<h2>Options</h2>
86+
87+
<p>
88+
For each option:
89+
90+
<dl>
91+
<dt><Live /></dt>
92+
<dd>changes to this argument will update the REPL (or its container) without a full
93+
refresh of the iframe</dd>
94+
<dt><Refresh /></dt>
95+
<dd>changes to this argument will cause the REPL to fully reload</dd>
96+
</dl>
97+
98+
These (both
99+
<Live />
100+
and
101+
<Refresh />) are inverses of each other.
102+
</p>
103+
104+
<Option @name="@code" @type="string" @live={{true}}>
105+
This is the code that both shows up in the editor and is rendered in the output pane. By
106+
default the format is gjs, so the passed code should be written in gjs.
107+
</Option>
108+
109+
<Option @name="@format" @type="string" @live={{true}}>
110+
This is the format that the REPL should both render and load the editor for. The default is
111+
"gjs", but valid options are:
112+
<ul>
113+
<li>"gjs"</li>
114+
<li>"js"</li>
115+
<li>"gmd"</li>
116+
<li>"svelte"</li>
117+
<li>"vue"</li>
118+
<li>"mermaid"</li>
119+
<li>"hbs|ember"</li>
120+
<li>"jsx|react"</li>
121+
</ul>
122+
123+
</Option>
124+
125+
<Option @name="@clickToLoad" @type="boolean">
126+
By default, the REPL will load when its bounding box approaches the viewport (<ExternalLink
127+
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe#lazy"
128+
>via loading=lazy</ExternalLink>). Setting
129+
<code>@clickToLoad</code>
130+
will require user interaction before
131+
<em>rendering</em>
132+
the iframe.
133+
<br />
134+
<br />
135+
136+
The UI for click to load has stable CSS classes available for customization.
137+
<code>.limber__code__click-to-load</code>
138+
and
139+
<code>.limber__code__click-to-load__button</code>
140+
141+
<Example
142+
@clickToLoad={{true}}
143+
@editorLoad="force"
144+
@code={{hello}}
145+
@configurable={{false}}
146+
/>
147+
</Option>
148+
149+
<Option @name="@editor" @type="string">
150+
Set the editor size and/or split. For example passing
151+
<code>min</code>
152+
will minimize the editor, and passing
153+
<code>max</code>
154+
will maximize the editor. Also, the percent of the vertical or horizontal direction can be
155+
specified as well. For example, passing
156+
<code>60v</code>
157+
will cause a vertical split where the editor takes up 60% of the available space and
158+
<code>30h</code>
159+
will cause a horizontal split where the editor takes up 30% of the available space.
160+
161+
<Example @editor="30v" @code={{hello}} />
162+
</Option>
163+
164+
<Option @name="@editorLoad" @type="string">
165+
Determines how the editor should load. Normally the editor will load automatically upon
166+
detecting interaction activity. This is to optimize page-load as editors can be a few MB
167+
when fully featured. Valid options:
168+
<ul>
169+
<li>
170+
"force" - the editor will always load eagerly
171+
</li>
172+
<li>
173+
"onclick" - the editor will only load when the user clicks that they want to edit the
174+
example
175+
</li>
176+
<li>
177+
"never" - the editor is entirely disabled and the left-hand side is only a highlighted
178+
code snippet as is not editable
179+
</li>
180+
</ul>
181+
182+
<Example @editorLoad="never" @code={{hello}} />
183+
</Option>
184+
185+
<Option @name="@lines" @type="number" @live={{true}}>
186+
Sets the height of the iframe via specifying the number of lines of code to show.
187+
188+
<Example @lines={{4}} @code={{hello}} />
189+
</Option>
190+
191+
<Option @name="@title" @type="string" @live={{true}}>
192+
Sets the
193+
<code>title</code>
194+
attribute on the iframe. If
195+
<code>@title</code>
196+
is not passed, this value will be generated for you. Helps with screen readers.
197+
</Option>
198+
199+
<Option @name="@shadowdom" @type="boolean" @live={{true}}>
200+
Sets whether or not the output area should be rendered within a shadow-dom. The default is
201+
to render the output in a shadow-dom (true).
202+
<br />
203+
<br />
204+
Changing this can be helpful if importing a library only knows how to mutate the document's
205+
head (for styles or otherwise)
206+
</Option>
207+
208+
<Option @name="@nohighlight" @type="boolean">
209+
If set to true, the preview code shown before the editor loads will not have highlighting
210+
enabled. This option has no affect when the editor is forced to eagerly load.
211+
212+
<Example @nohighlight={{true}} @code={{hello}} />
213+
</Option>
214+
215+
</section>
216+
</div>
200217
</template>

0 commit comments

Comments
 (0)