Swap out static code samples with live, editable, interactive code demos

app/components/editable.hbs

@@ -0,0 +1,9 @@
+{{#if this.code.isResolved}}
+  <iframe
+    title={{this.title}}
+    src="{{this.host}}?{{this.code.value}}"
+    style={{htmlSafe (concat "height: calc(1.5rem * " this.lines ");")}}
+    ...attributes
+  >
+  </iframe>
+{{/if}}

app/components/editable.js

@@ -0,0 +1,44 @@
+import Component from '@glimmer/component';
+import { guidFor } from '@ember/object/internals';
+
+import { trackedFunction } from 'ember-resources/util/function';
+
+export default class Editable extends Component {
+  code = trackedFunction(this, async () => {
+    let { path, code } = this.args;
+
+    if (code) return wrap(code);
+
+    let response = await fetch(`/${path}`);
+    let text = await response.text();
+
+    return wrap(text);
+  });
+
+  get lines() {
+    return this.code.value?.split(encodeURIComponent('\n'))?.length ?? 7;
+  }
+
+  get host() {
+    if (window.location.host.includes('localhost')) {
+      return 'http://localhost:4200';
+    }
+
+    return 'https://limber.glimdown.com/edit';
+  }
+
+  get title() {
+    return this.args.title ?? guidFor(this.code);
+  }
+}
+
+function wrap(code) {
+  const params = new URLSearchParams();
+
+  let sample = '' + code + '';
+
+  params.set('t', sample);
+  params.set('format', 'gjs');
+
+  return params.toString();
+}

app/styles/app.css

@@ -29,6 +29,13 @@ html {
   height: 100%;
 }
 
+iframe {
+  width: 100%;
+  border: 1px solid gray;
+  border-radius: 0.25rem;
+  resize: vertical;
+}
+
 body {
   background-color: rgb(244, 246, 248);
   color: rgb(66, 71, 79);

docs/templates.md

@@ -92,26 +92,9 @@ functionA(argA, argB, { argC: functionB(argD) });
 
 <GuideSection @id="templates-how-to" as |Section|>
   <Section @id="iterate">
-
-```hbs
-{{#each this.anIterable as |item|}}
-  {{log item}}
-{{/each}}
-```
-
-```hbs
-{{#each-in this.anObject as |key value|}}
-  {{log key value}}
-{{/each}}
-```
-
-```hbs
-{{#each this.anIterable key='uuid' as |item|}}
-  {{log item}}
-{{/each}}
-```
-
-
+    <Editable @path="templates-how-to/iterate/code/index.gjs" />
+    <Editable @path="templates-how-to/iterate/code/array.gjs" />
+    <Editable @path="templates-how-to/iterate/code/keyed.gjs" />
   </Section>
 
   <Section @id="invoke-function">

package.json

@@ -33,19 +33,19 @@
     "test": "percy exec -- ember test"
   },
   "devDependencies": {
-    "@docfy/ember": "^0.4.8",
+    "@docfy/ember": "^0.5.0",
     "@ember/optional-features": "^2.0.0",
-    "@ember/test-helpers": "^2.6.0",
-    "@embroider/compat": "^0.49.0",
-    "@embroider/core": "^0.49.0",
-    "@embroider/webpack": "^0.49.0",
+    "@ember/test-helpers": "^2.8.1",
+    "@embroider/compat": "^1.8.3",
+    "@embroider/core": "^1.8.3",
+    "@embroider/webpack": "^1.8.3",
     "@fortawesome/ember-fontawesome": "github:NullVoxPopuli/ember-fontawesome#support-3-20-and-3-24",
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-regular-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@glimmer/component": "^1.0.4",
-    "@glimmer/tracking": "^1.0.4",
-    "@nullvoxpopuli/eslint-configs": "^2.1.16",
+    "@glimmer/component": "^1.1.2",
+    "@glimmer/tracking": "^1.1.2",
+    "@nullvoxpopuli/eslint-configs": "^2.2.36",
     "@percy/cli": "^1.0.0-beta.71",
     "@percy/ember": "^3.0.0",
     "@types/ember-qunit": "^3.4.15",
@@ -75,21 +75,21 @@
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",
     "ember-a11y-testing": "^4.3.0",
-    "ember-auto-import": "^2.2.4",
-    "ember-cli": "~4.1.0",
+    "ember-auto-import": "^2.4.2",
+    "ember-cli": "~4.5.0",
     "ember-cli-app-version": "^5.0.0",
     "ember-cli-babel": "^7.26.11",
-    "ember-cli-dependency-checker": "^3.2.0",
+    "ember-cli-dependency-checker": "^3.3.1",
     "ember-cli-dependency-lint": "^2.0.1",
     "ember-cli-deploy": "^1.0.2",
     "ember-cli-deploy-build": "^2.0.0",
     "ember-cli-deploy-git": "^1.3.4",
-    "ember-cli-htmlbars": "^6.0.1",
+    "ember-cli-htmlbars": "^6.1.0",
     "ember-cli-inject-live-reload": "^2.1.0",
     "ember-cli-sri": "^2.1.1",
     "ember-cli-terser": "^4.0.2",
-    "ember-cli-typescript": "^4.2.1",
-    "ember-container-query": "^1.1.9",
+    "ember-cli-typescript": "^5.1.0",
+    "ember-container-query": "^2.1.0",
     "ember-export-application-global": "^2.0.1",
     "ember-fetch": "^8.1.1",
     "ember-intl": "^5.7.2",
@@ -98,8 +98,8 @@
     "ember-page-title": "^7.0.0",
     "ember-qunit": "^5.1.5",
     "ember-resolver": "^8.0.3",
-    "ember-source": "~3.28.8",
-    "ember-template-lint": "^3.9.0",
+    "ember-source": "~4.5.0",
+    "ember-template-lint": "^4.10.1",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-decorator-position": "^2.2.29",
@@ -130,7 +130,8 @@
     "yarn": "1.22.17"
   },
   "dependencies": {
-    "ember-functions-as-helper-polyfill": "^1.0.10",
+    "ember-functions-as-helper-polyfill": "^2.1.1",
+    "ember-resources": "^5.0.2",
     "highlight.js": "^11.4.0",
     "highlightjs-glimmer": "^1.4.1",
     "remark-autolink-headings": "^6.1.0",

public/templates-how-to/iterate/code/array.gjs

@@ -0,0 +1,7 @@
+const anArray = [1, 2, 3, 4];
+
+<template>
+  {{#each anArray as |item|}}
+    Item: {{item}} <br>
+  {{/each}}
+</template>

public/templates-how-to/iterate/code/index.gjs

@@ -0,0 +1,7 @@
+let anObject = { foo: '2', bar: '3', baz: '4' };
+
+<template>
+  {{#each-in anObject as |key value|}}
+    {{key}} : {{value}} <br>
+  {{/each-in}}
+</template>

public/templates-how-to/iterate/code/keyed.gjs

@@ -0,0 +1,13 @@
+let anIterable = [
+  { uuid: '123 .... abc', data: 'a' },
+  { uuid: '231 .... abc', data: 'b' },
+  { uuid: '321 .... abc', data: 'c' },
+];
+
+<template>
+  Using keying to change what invalidates the list.
+
+  {{#each anIterable key='uuid' as |item|}}
+    Item: {{item.data}} <br>
+  {{/each}}
+</template>

translations/templates-how-to/iterate/en-us.yml

@@ -1,3 +1,3 @@
 title: Iteration
 description: >
-  TODO: Write this
+  Iteration can happen on anything with an Iterator. Most commonly, this is arrays, but you can also iterate over objects.