Skip to content

Commit bf4118d

Browse files
NullVoxPopuliNullVoxPopuli
authored
Merge pull request #1660 from NullVoxPopuli/more-guides-updates
More guides updates
2 parents 97cee3a + bc188a0 commit bf4118d

File tree

8 files changed

+183
-13
lines changed

8 files changed

+183
-13
lines changed

‎apps/tutorial/app/components/prose/index.gts

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export const Prose: TOC<{ Element: HTMLDivElement }> = <template>
1919
<style>
2020
.ember-primitives__sticky-footer__footer { position: sticky; bottom: -32px; } .call-to-play {
2121
filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.5)); border: 3px dashed var(--horizon-lavender);
22-
padding: 0.75rem; text-align: right; border-radius: 0.25rem; background: var(--horizon-blue);
22+
padding: 0.75rem; text-align: right; border-radius: 0.25rem; background: var(--ember-linen);
2323
color: black; transform: skewX(-15deg); width: calc(100% - 6rem); margin-left: auto;
2424
margin-right: 0.8rem; font-weight: 500; font-family: system-ui; font-size: 1.125rem; }
2525
</style>

‎apps/tutorial/app/components/selection.gts

+2-1
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,8 @@ export class Selection extends Component {
5353
<span class="limber__selected">{{this.humanSelected}}</span>
5454
</span>
5555
<style>
56-
.limber__selected { text-wrap: nowrap; text-overflow: ellipsis; overflow: hidden; }
56+
.limber__selected { text-wrap: nowrap; white-space: nowrap; text-overflow: ellipsis;
57+
overflow: hidden; }
5758
</style>
5859

5960
<select

‎apps/tutorial/app/controllers/application.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Controller from '@ember/controller';
22

33
export default class ApplicationController extends Controller {
4-
queryParams = ['showAnswer'];
4+
queryParams = ['showAnswer', 'local'];
55
}

‎apps/tutorial/public/docs/6-component-patterns/3-conditional-blocks/answer.gjs

+48-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,51 @@
1+
const Conditional = <template>
2+
<div class="block-layout">
3+
{{#if (has-block "blue")}}
4+
<div class="blue">
5+
{{yield to="blue"}}
6+
</div>
7+
{{/if}}
8+
9+
<div class="red">
10+
{{yield to="default"}}
11+
</div>
12+
</div>
13+
14+
<style>
15+
.block-layout {
16+
border: 1px solid black;
17+
padding: 0.5rem;
18+
display: grid;
19+
gap: 0.5rem;
20+
21+
.red { border: 1px solid red; }
22+
.blue { border: 1px solid blue; }
23+
.red, .blue { padding: 0.5rem; }
24+
}
25+
</style>
26+
</template>;
27+
128
<template>
2-
This tutorial chapter needs to be written!
29+
<div class="layout">
30+
<Conditional>
31+
Default content. Only the red box shows.
32+
The blue box should not be rendered.
33+
</Conditional>
34+
35+
<Conditional>
36+
<:blue>
37+
Shows up in blue
38+
</:blue>
39+
<:default>
40+
Content for :default shows up in red
41+
</:default>
42+
</Conditional>
43+
</div>
344

4-
It could be written by you!, if you want &lt;3
45+
<style>
46+
.layout {
47+
display: grid;
48+
gap: 1rem;
49+
}
50+
</style>
551
</template>

‎apps/tutorial/public/docs/6-component-patterns/3-conditional-blocks/prompt.gjs

+46-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,49 @@
1+
const Conditional = <template>
2+
<div class="block-layout">
3+
<div class="blue">
4+
{{yield to="blue"}}
5+
</div>
6+
7+
<div class="red">
8+
{{yield to="default"}}
9+
</div>
10+
</div>
11+
12+
<style>
13+
.block-layout {
14+
border: 1px solid black;
15+
padding: 0.5rem;
16+
display: grid;
17+
gap: 0.5rem;
18+
19+
.red { border: 1px solid red; }
20+
.blue { border: 1px solid blue; }
21+
.red, .blue { padding: 0.5rem; }
22+
}
23+
</style>
24+
</template>;
25+
126
<template>
2-
This tutorial chapter needs to be written!
27+
<div class="layout">
28+
<Conditional>
29+
Default content. Only the red box shows.
30+
The blue box should not be rendered.
31+
</Conditional>
32+
33+
<Conditional>
34+
<:blue>
35+
Shows up in blue
36+
</:blue>
37+
<:default>
38+
Content for :default shows up in red
39+
</:default>
40+
</Conditional>
41+
</div>
342

4-
It could be written by you!, if you want &lt;3
43+
<style>
44+
.layout {
45+
display: grid;
46+
gap: 1rem;
47+
}
48+
</style>
549
</template>

‎apps/tutorial/public/docs/6-component-patterns/3-conditional-blocks/prose.md

+42-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,43 @@
1-
This tutorial chapter needs to be written!
1+
Conditional Blocks are `:named` blocks that only render when a condition is met. In many cases, that could be the condition that a block is used at all.
22

3-
It could be written by you!, if you want &lt;3
3+
For example, observe the difference in these component invocations:
4+
```hbs
5+
<Modal>
6+
<:content>
7+
content here
8+
</:content>
9+
</Modal>
10+
```
11+
and
12+
```hbs
13+
<Modal>
14+
<:content>
15+
quetsion here
16+
</:content>
17+
<:footer>
18+
buttons here
19+
</:footer>
20+
</Modal>
21+
```
22+
23+
The `:footer` block is optionally present, and we may expect that when it is omitted, that the component we're using, `Modal` in this case, doesn't include any of the padding or styling associated with the footer of the `Modal`.
24+
25+
To implement this, there is a built-in feature of the templating language, the [`(has-block)`][docs-has-block] helper.
26+
27+
Usage would look like this:
28+
```hbs
29+
{{#if (has-block 'footer')}}
30+
<footer class="styles, etc">
31+
{{yield to="footer"}}
32+
</footer>
33+
{{/if}}
34+
```
35+
36+
The styling provided by the `footer` element, and accompanying CSS classes would be omitted when the caller omits the `:footer` named block.
37+
38+
In this exercise,
39+
<p class="call-to-play">update the <code>Conditional</code> component to conditionally render the <code>:blue</code> block only when it is declared by the caller.</p>.
40+
41+
42+
43+
[docs-has-block]: https://api.emberjs.com/ember/5.6/classes/Ember.Templates.helpers/methods/has-block?anchor=has-block

‎apps/tutorial/public/docs/6-component-patterns/4-contextual-components/answer.gjs

+36-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,38 @@
1-
<template>
2-
This tutorial chapter needs to be written!
1+
import { hash } from '@ember/helper';
2+
3+
const AcceptButton = <template>
4+
<button>Accept</button>
5+
</template>;
6+
7+
const DeclineButton = <template>
8+
<button>Decline {{@text}}</button>
9+
</template>;
10+
11+
const CustomButton = <template>
12+
<button>
13+
<span>
14+
{{yield to="default"}}
15+
</span>
16+
{{#if (has-block "right")}}
17+
<span>
18+
{{yield to="right"}}
19+
</span>
20+
{{/if}}
21+
</button>
22+
</template>
23+
324

4-
It could be written by you!, if you want &lt;3
25+
const ButtonGroup = <template>
26+
{{yield (hash
27+
Accept=AcceptButton
28+
Decline=DeclineButton
29+
Custom=CustomButton
30+
)}}
31+
</template>;
32+
33+
<template>
34+
<ButtonGroup as |b|>
35+
<b.Accept />
36+
<b.Decline @text="to accept" />
37+
</ButtonGroup>
538
</template>

‎packages/app-support/limber-ui/addon/src/components/code.gts

+7-1
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,13 @@ interface Signature {
6565

6666
const DEFAULT_NUMBER_OF_LINES = 7;
6767
// TODO: allow import.meta.env to override this
68-
const HOST = 'https://limber.glimdown.com/edit';
68+
let HOST = 'https://limber.glimdown.com/edit';
69+
70+
const initialQPs = new URLSearchParams(window.location.search);
71+
72+
if (initialQPs.get('local')) {
73+
HOST = `http://localhost:${initialQPs.get('local')}`;
74+
}
6975

7076
const INITIAL_URL = (force?: boolean) =>
7177
`${HOST}?format=gjs&t=<template></template>` + (force ? `&forceEditor=${force}` : '');

0 commit comments

Comments
 (0)