Merge pull request #1660 from NullVoxPopuli/more-guides-updates

More guides updates

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

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

apps/tutorial/app/components/selection.gts

@@ -53,7 +53,8 @@ export class Selection extends Component {
         <span class="limber__selected">{{this.humanSelected}}</span>
       </span>
       <style>
-        .limber__selected { text-wrap: nowrap; text-overflow: ellipsis; overflow: hidden; }
+        .limber__selected { text-wrap: nowrap; white-space: nowrap; text-overflow: ellipsis;
+        overflow: hidden; }
       </style>
 
       <select

apps/tutorial/app/controllers/application.ts

@@ -1,5 +1,5 @@
 import Controller from '@ember/controller';
 
 export default class ApplicationController extends Controller {
-  queryParams = ['showAnswer'];
+  queryParams = ['showAnswer', 'local'];
 }

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

@@ -1,5 +1,51 @@
+const Conditional = <template>
+  <div class="block-layout">
+    {{#if (has-block "blue")}}
+      <div class="blue">
+        {{yield to="blue"}}
+      </div>
+    {{/if}}
+
+    <div class="red">
+      {{yield to="default"}}
+    </div>
+  </div>
+
+  <style>
+    .block-layout {
+      border: 1px solid black;
+      padding: 0.5rem;
+      display: grid;
+      gap: 0.5rem;
+
+      .red { border: 1px solid red; }
+      .blue { border: 1px solid blue; }
+      .red, .blue { padding: 0.5rem; }
+    }
+  </style>
+</template>;
+
 <template>
-  This tutorial chapter needs to be written!
+  <div class="layout">
+    <Conditional>
+      Default content. Only the red box shows.
+      The blue box should not be rendered.
+    </Conditional>
+
+    <Conditional>
+      <:blue>
+        Shows up in blue
+      </:blue>
+      <:default>
+        Content for :default shows up in red
+      </:default>
+    </Conditional>
+  </div>
 
-  It could be written by you!, if you want &lt;3
+  <style>
+    .layout {
+      display: grid;
+      gap: 1rem;
+    }
+  </style>
 </template>

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

@@ -1,5 +1,49 @@
+const Conditional = <template>
+  <div class="block-layout">
+    <div class="blue">
+      {{yield to="blue"}}
+    </div>
+
+    <div class="red">
+      {{yield to="default"}}
+    </div>
+  </div>
+
+  <style>
+    .block-layout {
+      border: 1px solid black;
+      padding: 0.5rem;
+      display: grid;
+      gap: 0.5rem;
+
+      .red { border: 1px solid red; }
+      .blue { border: 1px solid blue; }
+      .red, .blue { padding: 0.5rem; }
+    }
+  </style>
+</template>;
+
 <template>
-  This tutorial chapter needs to be written!
+  <div class="layout">
+    <Conditional>
+      Default content. Only the red box shows.
+      The blue box should not be rendered.
+    </Conditional>
+
+    <Conditional>
+      <:blue>
+        Shows up in blue
+      </:blue>
+      <:default>
+        Content for :default shows up in red
+      </:default>
+    </Conditional>
+  </div>
 
-  It could be written by you!, if you want &lt;3
+  <style>
+    .layout {
+      display: grid;
+      gap: 1rem;
+    }
+  </style>
 </template>

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

@@ -1,3 +1,43 @@
-This tutorial chapter needs to be written!
+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.
 
-It could be written by you!, if you want <3
+For example, observe the difference in these component invocations:
+```hbs
+<Modal>
+  <:content>
+     content here
+  </:content>
+</Modal>
+```
+and
+```hbs
+<Modal>
+  <:content>
+    quetsion here
+  </:content>
+  <:footer>
+    buttons here
+  </:footer>
+</Modal>
+```
+
+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`.
+
+To implement this, there is a built-in feature of the templating language, the [`(has-block)`][docs-has-block] helper.
+
+Usage would look like this:
+```hbs
+{{#if (has-block 'footer')}}
+  <footer class="styles, etc">
+    {{yield to="footer"}}
+  </footer>
+{{/if}}
+```
+
+The styling provided by the `footer` element, and accompanying CSS classes would be omitted when the caller omits the `:footer` named block.
+
+In this exercise, 
+<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>.
+
+
+
+[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

@@ -1,5 +1,38 @@
-<template>
-  This tutorial chapter needs to be written!
+import { hash } from '@ember/helper';
+
+const AcceptButton = <template>
+  <button>Accept</button>
+</template>;
+
+const DeclineButton = <template>
+  <button>Decline {{@text}}</button>
+</template>;
+
+const CustomButton = <template>
+  <button>
+    <span>
+      {{yield to="default"}}
+    </span>
+    {{#if (has-block "right")}}
+      <span>
+        {{yield to="right"}}
+      </span>
+    {{/if}}
+  </button>
+</template>
+
 
-  It could be written by you!, if you want &lt;3
+const ButtonGroup = <template>
+  {{yield (hash
+    Accept=AcceptButton
+    Decline=DeclineButton
+    Custom=CustomButton
+  )}}
+</template>;
+
+<template>
+  <ButtonGroup as |b|>
+    <b.Accept />
+    <b.Decline @text="to accept" />
+  </ButtonGroup>
 </template>

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

@@ -65,7 +65,13 @@ interface Signature {
 
 const DEFAULT_NUMBER_OF_LINES = 7;
 // TODO: allow import.meta.env to override this
-const HOST = 'https://limber.glimdown.com/edit';
+let HOST = 'https://limber.glimdown.com/edit';
+
+const initialQPs = new URLSearchParams(window.location.search);
+
+if (initialQPs.get('local')) {
+  HOST = `http://localhost:${initialQPs.get('local')}`;
+}
 
 const INITIAL_URL = (force?: boolean) =>
   `${HOST}?format=gjs&t=<template></template>` + (force ? `&forceEditor=${force}` : '');