Switch to injecting new DartPad UI (#5627)

- Updates to use the new, smaller injection script (introduced in
dart-lang/site-shared#205)
- Updates the markdown renderer to set the new expected data variables
- Removes some old code relating to multi-file DartPad

Staged example:
https://dart-dev--pr5627-feat-new-dartpad-injection-n1bx8le4.web.app/codelabs/async-await

Author: parlough

eleventy.config.js

@@ -91,6 +91,7 @@ export default function (eleventyConfig) {
 
   eleventyConfig.addPassthroughCopy('src/content/assets/dash');
   eleventyConfig.addPassthroughCopy('src/content/assets/js');
+  eleventyConfig.addPassthroughCopy({'site-shared/packages/inject_dartpad/lib/inject_dartpad.js': 'assets/js/inject_dartpad.js'});
   eleventyConfig.addPassthroughCopy('src/content/assets/img', { expand: true });
   eleventyConfig.addPassthroughCopy('src/content/f', {
     expand: true,

site-shared

@@ -80,12 +80,9 @@ function _highlight(
   language,
   attributeString,
 ) {
-  // Don't customize or highlight DartPad snippets
-  // so that inject_embed can convert them.
-  if (language.includes('-dartpad') || language.includes('file-')) {
-    return `<pre><code class="language-${language}">
-${markdown.utils.escapeHtml(content)}
-</code></pre>`;
+  // Specially handle DartPad snippets so that inject_embed can convert them.
+  if (language.includes('-dartpad')) {
+    return `<pre><code data-dartpad="true" data-embed="true" data-theme="light">${markdown.utils.escapeHtml(content)}</code></pre>`;
   }
 
   const attributes = _parseAttributes(attributeString);

src/_11ty/plugins/highlight.js

@@ -187,7 +187,7 @@ pre {
 }
 
 // Border and resizability for dartpad
-iframe[src^="https://dartpad"]:not(#try-dart-pad), iframe[src^="https://old-dartpad"] {
+iframe[src^="https://dartpad"]:not(#try-dart-pad) {
   border: 1px solid #ccc;
   margin-bottom: 1rem;
   min-height: 400px;

src/_sass/components/_code.scss

@@ -1,7 +1,7 @@
 ---
 title: "Asynchronous programming: futures, async, await"
 description: Learn about and practice writing asynchronous code in DartPad!
-js: [{url: 'https://old-dartpad-3ce3f.web.app/inject_embed.dart.js', defer: true}]
+js: [{url: '/assets/js/inject_dartpad.js', defer: true}]
 ---
 <?code-excerpt replace="/ *\/\/\s+ignore_for_file:[^\n]+\n//g; /(^|\n) *\/\/\s+ignore:[^\n]+\n/$1/g; /(\n[^\n]+) *\/\/\s+ignore:[^\n]+\n/$1\n/g"?>
 <?code-excerpt plaster="none"?>

src/content/codelabs/async-await.md

@@ -1,7 +1,7 @@
 ---
 title: Dart cheatsheet codelab
 description: Interactively learn (or relearn) some of Dart's unique features.
-js: [{url: 'https://old-dartpad-3ce3f.web.app/inject_embed.dart.js', defer: true}]
+js: [{url: '/assets/js/inject_dartpad.js', defer: true}]
 ---
 <?code-excerpt replace="/ *\/\/\s+ignore_for_file:[^\n]+\n//g; /(^|\n) *\/\/\s+ignore:[^\n]+\n/$1/g; /(\n[^\n]+) *\/\/\s+ignore:[^\n]+\n/$1\n/g"?>
 

src/content/codelabs/dart-cheatsheet.md

@@ -1,7 +1,7 @@
 ---
 title: Iterable collections
 description: An interactive guide to using Iterable objects such as lists and sets.
-js: [{url: 'https://old-dartpad-3ce3f.web.app/inject_embed.dart.js', defer: true}]
+js: [{url: '/assets/js/inject_dartpad.js', defer: true}]
 ---
 <?code-excerpt replace="/ *\/\/\s+ignore_for_file:[^\n]+\n//g; /(^|\n) *\/\/\s+ignore:[^\n]+\n/$1/g; /(\n[^\n]+) *\/\/\s+ignore:[^\n]+\n/$1\n/g"?>
 <?code-excerpt plaster="none"?>

src/content/codelabs/iterables.md

@@ -1,7 +1,7 @@
 ---
 title: Callable objects
 description: Learn how to create and use callable objects in Dart.
-js: [{url: 'https://old-dartpad-3ce3f.web.app/inject_embed.dart.js', defer: true}]
+js: [{url: '/assets/js/inject_dartpad.js', defer: true}]
 toc: false
 prevpage:
   url: /language/extension-types

src/content/language/callable-objects.md

@@ -1,7 +1,7 @@
 ---
 title: Constructors
 description: Everything about using constructors in Dart.
-js: [{url: 'https://old-dartpad-3ce3f.web.app/inject_embed.dart.js', defer: true}]
+js: [{url: '/assets/js/inject_dartpad.js', defer: true}]
 prevpage:
   url: /language/classes
   title: Classes

src/content/language/constructors.md

@@ -1,7 +1,7 @@
 ---
 title: Functions
 description: Everything about functions in Dart.
-js: [{url: 'https://old-dartpad-3ce3f.web.app/inject_embed.dart.js', defer: true}]
+js: [{url: '/assets/js/inject_dartpad.js', defer: true}]
 prevpage:
   url: /language/pattern-types
   title: Pattern types

src/content/language/functions.md

@@ -1,7 +1,7 @@
 ---
 title: Dart overview
 description: A short introduction to Dart.
-js: [{url: 'https://old-dartpad-3ce3f.web.app/inject_embed.dart.js', defer: true}]
+js: [{url: '/assets/js/inject_dartpad.js', defer: true}]
 ---
 
 <img 

src/content/overview.md

@@ -1,7 +1,7 @@
 ---
 title: "Asynchronous programming: Streams"
 description: Learn how to consume single-subscriber and broadcast streams.
-js: [{url: 'https://old-dartpad-3ce3f.web.app/inject_embed.dart.js', defer: true}]
+js: [{url: '/assets/js/inject_dartpad.js', defer: true}]
 ---
 
 :::secondary What's the point?

src/content/tutorials/language/streams.md

@@ -1,7 +1,7 @@
 ---
 title: Fetch data from the internet
 description: Fetch data over the internet using the http package.
-js: [{url: 'https://old-dartpad-3ce3f.web.app/inject_embed.dart.js', defer: true}]
+js: [{url: '/assets/js/inject_dartpad.js', defer: true}]
 prevpage:
   url: /tutorials/server/cmdline
   title: Write command-line apps

src/content/tutorials/server/fetch-data.md

@@ -1,7 +1,7 @@
 ---
 title: "Get started: Command-line and server apps"
 description: Get Dart, run and compile a small app.
-js: [{url: 'https://old-dartpad-3ce3f.web.app/inject_embed.dart.js', defer: true}]
+js: [{url: '/assets/js/inject_dartpad.js', defer: true}]
 prevpage:
   url: /tutorials/server
   title: Dart command-line and server tutorials