Migrating interactive examples inline

[LeoMcA]

Hey folks, recently we've been working on a new architecture for interactive examples. We're nearly ready to migrate the JavaScript examples, and we wanted to share what's changing:

Architecturally, we're doing away with bob and the interactive-examples repo, replacing them with a new {{InteractiveExamples}} macro which, behind the scenes, uses a web component to take inline code and run it in the MDN Playground, displaying the result in the same way the current interactive examples do.

What that means from an authoring perspective is that you’ll be able to write interactive examples inline, like so:

{{InteractiveExample("JavaScript Demo: Array.from()", "shorter")}}

```js interactive-example
console.log(Array.from('foo'));
// Expected output: Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], (x) => x + x));
// Expected output: Array [2, 4, 6]

```

What’s next

Phase one of this project is focused on the JavaScript examples. This will allow us to refine the migration process moving forward.

We have automatically migrated them in content and translated-content: you can see the result on our testing environment. We'll open PRs when we're finished with our snapshot testing of the console output, which should be in the next few days: we don't expect a manual review of the thousands of lines changed, but apologies if this causes some merge conflicts.

Support for (and migration of the) HTML, CSS, and WAT examples will come next and we will update you when we’re ready with those changes. We plan to use the same syntax for HTML and WAT and a similar one for CSS:

{{InteractiveExample("CSS Demo:")}}

```css interactive-example-choice
color: red;
```

```css interactive-example-choice
color: blue;
```

For now, the focus of this effort is migrating the examples, rather than perfecting the syntax: please do still let us know if you have any feedback on that, but we'll leave any changes regarding the syntax until after the initial migration work.