Edit DartPad embeds, add troubleshooting instructions (dart-lang#1956)

Also updated embedding macros, edited the overview of the DartPad page, and fixed a site-wide formatting issue with multi-paragraph alerts.
GGurbanov · Sep 30, 2019 · 395d426 · 395d426
1 parent a1ea53e
commit 395d426
Show file tree

Hide file tree

Showing 19 changed files with 128 additions and 118 deletions.
diff --git a/_config.yml b/_config.yml
@@ -25,7 +25,9 @@ pub-api: https://pub.dev/documentation
 pub-pkg: https://pub.dev/packages
 lints: https://dart-lang.github.io/linter/lints
 dartpad: https://dartpad.dev
-dartpadx: https://dartpad.dev/experimental/embed-new-dart.html
+dartpad-embed: https://dartpad.dev/embed-dart.html
+dartpad-embed-html: https://dartpad.dev/embed-html.html
+dartpad-embed-inline: https://dartpad.dev/embed-inline.html
 news: https://news.dartlang.org
 group: https://groups.google.com/a/dartlang.org
 
@@ -60,15 +62,6 @@ defaults:
     repo: *repo-shared
 
 custom:
-  dartpad:
-    embed-dart-prefix: https://dartpad.dev/embed-dart.html
-    embed-html-prefix: https://dartpad.dev/embed-html.html
-    embed-inline-prefix: https://dartpad.dev/embed-inline.html
-  dartpadx:
-    embed-dart-prefix: https://dartpad.dev/experimental/embed-new-dart.html
-    embed-flutter-prefix: https://dartpad.dev/experimental/embed-new-flutter.html
-    embed-html-prefix: https://dartpad.dev/experimental/embed-new-html.html
-    embed-inline-prefix: https://dartpad.dev/experimental/embed-new-inline.html
   downloads:
     dartarchive-be-url-prefix: https://storage.googleapis.com/dart-archive/channels/be/raw
     dartarchive-dev-url-prefix: https://storage.googleapis.com/dart-archive/channels/dev/release

diff --git a/src/_assets/css/main.scss b/src/_assets/css/main.scss
@@ -1240,7 +1240,7 @@ h3.popover-header {
   pre, code {
     background-color: transparent;
   }
-  p {
+  p:last-child {
     margin-bottom: 0;
   }
   &.alert-success {

diff --git a/src/_assets/image/dartpad-hello.png b/src/_assets/image/dartpad-hello.png
diff --git a/src/_guides/language/language-tour.md b/src/_guides/language/language-tour.md
@@ -16,13 +16,14 @@ To learn more about Dart's core libraries, see the
 Whenever you want more details about a language feature,
 consult the [Dart language specification][].
 
-<div class="alert alert-info" markdown="1">
-**Tip:**
-You can play with most of Dart's language features using DartPad
-([learn more](/tools/dartpad)).
+{{ site.alert.note }}
+  You can play with most of Dart's language features using DartPad
+  ([learn more](/tools/dartpad)).
+  **<a href="{{ site.dartpad }}" target="_blank">Open DartPad</a>**
 
-**<a href="{{ site.dartpad }}" target="_blank">Open DartPad</a>**
-</div>
+  This page uses embedded DartPads to display some of the examples.
+  {% include dartpads-embedded-troubleshooting.md %}
+{{ site.alert.end }}
 
 
 ## A basic Dart program
@@ -1054,7 +1055,7 @@ void main() {
 {% endcomment %}
 
 <iframe
-src="{{site.custom.dartpadx.embed-inline-prefix}}?id=589bc5c95318696cefe5"
+src="{{site.dartpad-embed-inline}}?id=589bc5c95318696cefe5"
     width="100%"
     height="400px"
     style="border: 1px solid #ccc;">
@@ -1325,7 +1326,7 @@ https://gist.github.com/d988cfce0a54c6853799
 {{site.dartpad}}/d988cfce0a54c6853799
 (The gist needs updating: see https://github.com/dart-lang/site-www/issues/189)
 <iframe
-src="{{site.custom.dartpadx.embed-inline-prefix}}?id=d988cfce0a54c6853799"
+src="{{site.dartpad-embed-inline}}?id=d988cfce0a54c6853799"
     width="100%"
     height="450px"
     style="border: 1px solid #ccc;">
@@ -1442,7 +1443,7 @@ https://gist.github.com/chalin/5d70bc1889d055c7a18d35d77874af88
 {% endcomment %}
 
 <iframe
-src="{{site.custom.dartpadx.embed-inline-prefix}}?id=5d70bc1889d055c7a18d35d77874af88&split=60"
+src="{{site.dartpad-embed-inline}}?id=5d70bc1889d055c7a18d35d77874af88&split=60"
     width="100%"
     height="400px"
     style="border: 1px solid #ccc;">
@@ -2839,7 +2840,7 @@ void main() {
 {% endcomment %}
 
 <iframe
-src="{{site.custom.dartpadx.embed-inline-prefix}}?id=e57aa06401e6618d4eb8&split=90"
+src="{{site.dartpad-embed-inline}}?id=e57aa06401e6618d4eb8&split=90"
     width="100%"
     height="500px"
     style="border: 1px solid #ccc;">
@@ -2934,7 +2935,7 @@ void main() {
 {% endcomment %}
 
 <iframe
-src="{{site.custom.dartpadx.embed-inline-prefix}}?id=7a9764702c0608711e08&split=90"
+src="{{site.dartpad-embed-inline}}?id=7a9764702c0608711e08&split=90"
     width="100%"
     height="420px"
     style="border: 1px solid #ccc;">
@@ -4165,7 +4166,7 @@ main() => print(out);
 {% endcomment %}
 
 <iframe
-src="{{site.custom.dartpadx.embed-inline-prefix}}?id=405379bacf30335f3aed"
+src="{{site.dartpad-embed-inline}}?id=405379bacf30335f3aed"
     width="100%"
     height="350px"
     style="border: 1px solid #ccc;">

diff --git a/src/_includes/dartpad-embedded-troubleshooting.md b/src/_includes/dartpad-embedded-troubleshooting.md
@@ -0,0 +1,2 @@
+If you see an empty box instead of code, go to the
+[DartPad troubleshooting page](/tools/dartpad/troubleshoot).
diff --git a/src/_includes/dartpads-embedded-troubleshooting.md b/src/_includes/dartpads-embedded-troubleshooting.md
@@ -0,0 +1,2 @@
+If you see empty boxes instead of DartPads, go to the
+[DartPad troubleshooting page](/tools/dartpad/troubleshoot).
diff --git a/src/_tutorials/language/streams.md b/src/_tutorials/language/streams.md
@@ -56,6 +56,11 @@ when using the **await for** loop.
 The following example tests the previous code by
 generating a simple stream of integers using an `async*` function:
 
+{{ site.alert.note }}
+  This page uses embedded DartPads to display runnable examples.
+  {% include dartpads-embedded-troubleshooting.md %}
+{{ site.alert.end }}
+
 {% comment %}
 https://gist.github.com/Sfshaza/15d5ef986238c97dbc14
 
@@ -84,7 +89,7 @@ main() async {
 {% endcomment %}
 
 <iframe
-src="{{site.custom.dartpadx.embed-inline-prefix}}?id=15d5ef986238c97dbc14"
+src="{{site.dartpad-embed-inline}}?id=15d5ef986238c97dbc14"
     width="100%"
     height="490px"
     style="border: 1px solid #ccc;">
@@ -154,7 +159,7 @@ main() async {
 {% endcomment %}
 
 <iframe
-src="{{site.custom.dartpadx.embed-inline-prefix}}?id=df7c1168a5c6b20fda2a76d6ff33a1da"
+src="{{site.dartpad-embed-inline}}?id=df7c1168a5c6b20fda2a76d6ff33a1da"
     width="100%"
     height="450px"
     style="border: 1px solid #ccc;">

diff --git a/src/_tutorials/server/get-started.md b/src/_tutorials/server/get-started.md
@@ -27,8 +27,12 @@ change the greeting to use another language. To get the full DartPad experience,
 <a href="{{site.dartpad}}/27e044ec9e2957d9c5c7062871ce8bf3" target="_blank">open
 the example at dartpad.dev.</a>
 
+{{ site.alert.note }}
+  {% include dartpad-embedded-troubleshooting.md %}
+{{ site.alert.end }}
+
 <iframe
-    src="{{site.custom.dartpadx.embed-inline-prefix}}?id=27e044ec9e2957d9c5c7062871ce8bf3"
+    src="{{site.dartpad-embed-inline}}?id=27e044ec9e2957d9c5c7062871ce8bf3"
     width="100%"
     height="300px"
     style="border: 1px solid #ccc;">

diff --git a/src/_tutorials/web/fetch-data.md b/src/_tutorials/web/fetch-data.md
@@ -30,6 +30,12 @@ For web apps,
 HTTP requests are served by the browser in which the app is running,
 and thus are subject to the browser's security restrictions.
 
+{{ site.alert.note }}
+  This page uses embedded DartPads to display runnable examples.
+  {% include dartpads-embedded-troubleshooting.md %}
+{{ site.alert.end }}
+
+
 ## About JSON
 
 The JSON data format is easy for humans
@@ -171,7 +177,7 @@ void showJson(Event _) {
 {% endcomment %}
 
 <iframe
-src="{{site.custom.dartpadx.embed-html-prefix}}?id=1d42e4eadb75bcc1ffbc079e299b862e"
+src="{{site.dartpad-embed-html}}?id=1d42e4eadb75bcc1ffbc079e299b862e"
     width="100%"
     height="600px"
     style="border: 1px solid #ccc;">
@@ -410,7 +416,7 @@ and loads the file.
 
 {% comment %} https://gist.github.com/chalin/6b76bce8d46986e624f4e82925c48287 {% endcomment %}
 <iframe
-src="{{site.custom.dartpadx.embed-html-prefix}}?id=6b76bce8d46986e624f4e82925c48287"
+src="{{site.dartpad-embed-html}}?id=6b76bce8d46986e624f4e82925c48287"
     width="100%"
     height="500px"
     style="border: 1px solid #ccc;">
@@ -466,7 +472,7 @@ an HttpRequest object.
 
 {% comment %} https://gist.github.com/chalin/c387e454cb751ab0632c68ccbbf94d12 {% endcomment %}
 <iframe
-src="{{site.custom.dartpadx.embed-html-prefix}}?id=c387e454cb751ab0632c68ccbbf94d12"
+src="{{site.dartpad-embed-html}}?id=c387e454cb751ab0632c68ccbbf94d12"
     width="100%"
     height="500px"
     style="border: 1px solid #ccc;">

diff --git a/src/_tutorials/web/get-started.md b/src/_tutorials/web/get-started.md
@@ -23,8 +23,12 @@ which includes the web UI that the app produces,
 <a href="{{site.dartpad}}/2a24f3f042f1c86cf91621c30adce771"
    target="_blank">open the example at dartpad.dev.</a>
 
+{{ site.alert.note }}
+  {% include dartpad-embedded-troubleshooting.md %}
+{{ site.alert.end }}
+
 <iframe
-    src="{{site.custom.dartpadx.embed-html-prefix}}?id=2a24f3f042f1c86cf91621c30adce771"
+    src="{{site.dartpad-embed-html}}?id=2a24f3f042f1c86cf91621c30adce771"
     width="100%"
     height="450px"
     style="border: 1px solid #ccc;">

diff --git a/src/_tutorials/web/low-level-html/add-elements.md b/src/_tutorials/web/low-level-html/add-elements.md
@@ -10,11 +10,6 @@ prevpage:
   title: "Connect Dart & HTML"
 ---
 
-{% comment %}
-NOTE: No sample_links section goes here because all the samples are in embedded
-DartPads.
-{% endcomment %}
-
 <div class="panel" markdown="1">
 
 #### <a id="whats-the-point" class="anchor" href="#whats-the-point" aria-hidden="true"><span class="octicon octicon-link"></span></a>What's the point?
@@ -97,7 +92,7 @@ void addToDoItem(Event e) {
 } -->
 
 <!-- <iframe
-src="{{site.custom.dartpadx.embed-html-prefix}}?id=65c90ff6b078c332d4b6"
+src="{{site.dartpad-embed-html}}?id=65c90ff6b078c332d4b6"
     width="100%"
     height="500px"
     style="border: 1px solid #ccc;">
@@ -351,6 +346,11 @@ You might prefer to
 the app in DartPad</a>
 to have more space for the app's code and UI.
 
+{{ site.alert.note }}
+  This page uses embedded DartPads to display runnable examples.
+  {% include dartpads-embedded-troubleshooting.md %}
+{{ site.alert.end }}
+
 {% comment %}
 https://gist.github.com/Sfshaza/0532bfcb70bf5e4a900c
 
@@ -432,7 +432,7 @@ generateNewLetters() {
 {% endcomment %}
 
 <iframe
-src="{{site.custom.dartpadx.embed-html-prefix}}?id=0532bfcb70bf5e4a900c"
+src="{{site.dartpad-embed-html}}?id=0532bfcb70bf5e4a900c"
     width="100%"
     height="600px"
     style="border: 1px solid #ccc;">

diff --git a/src/_tutorials/web/low-level-html/connect-dart-html.md b/src/_tutorials/web/low-level-html/connect-dart-html.md
@@ -6,19 +6,6 @@ nextpage:
   title: "Add elements to the DOM"
 ---
 
-{% capture sample_links %}
-<p>
-This tutorial features these examples:</p>
-* mini
-* mini_with_style
-<p>
-Don't have the source code?
-<a href="https://github.com/dart-lang/dart-tutorials-samples/archive/master.zip">
-  Download it.
-</a>
-{% endcapture %}
-
-
 This tutorial is the first of a series on
 basic, low-level web programming with the dart:html library.
 If you use a web framework like [AngularDart,]({{site.angulardart}})
@@ -380,22 +367,23 @@ on how to convert a DartPad app into one you can run in the browser.
 Here's the full HTML code for this app,
 assuming that the Dart code is in a file named `main.dart`:
 
-<pre class="prettyprint lang-dart allow-scroll">
-&lt;!DOCTYPE html>
-
-&lt;html>
-  &lt;head>
-    &lt;title>A Minimalist App&lt;/title>
-    <a href="#" class="dart-popover" data-toggle="popover" data-html="true" data-trigger="hover focus" data-content="Specifies the location of the compiled Dart code">&lt;script defer src="main.dart.js">&lt;/script></a>
-  &lt;/head>
-  &lt;body>
-    &lt;p id="RipVanWinkle">
+```dart
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <title>A Minimalist App</title>
+    <script defer src="main.dart.js"></script>
+  </head>
+  <body>
+    <p id="RipVanWinkle">
       RipVanWinkle paragraph.
-    &lt;/p>
-  &lt;/body>
-&lt;/html>
-</pre>
+    </p>
+  </body>
+</html>
+```
 
+The `<script>` element specifies the location of the compiled Dart code.
 
 ## Give the app some style with CSS {#add-css}
 

diff --git a/src/_tutorials/web/low-level-html/remove-elements.md b/src/_tutorials/web/low-level-html/remove-elements.md
@@ -7,11 +7,6 @@ prevpage:
   title: "Add elements to the DOM"
 ---
 
-{% comment %}
-NOTE: No sample_links section goes here because all the samples are in
-embedded DartPads.
-{% endcomment %}
-
 <div class="panel" markdown="1">
 
 #### <a id="whats-the-point" class="anchor" href="#whats-the-point" aria-hidden="true"><span class="octicon octicon-link"></span></a>What's the point?
@@ -84,8 +79,12 @@ Click it and it disappears from the list.
 Use the **Delete All** button
 to remove all of the items in the list at once.
 
+{{ site.alert.note }}
+  {% include dartpad-embedded-troubleshooting.md %}
+{{ site.alert.end }}
+
 <iframe
-src="{{site.custom.dartpadx.embed-html-prefix}}?id=582b9a8d36786566ba08"
+src="{{site.dartpad-embed-html}}?id=582b9a8d36786566ba08"
     width="100%"
     height="500px"
     style="border: 1px solid #ccc;">

diff --git a/src/assets/dash/js/dartpad_picker_main.dart.js b/src/assets/dash/js/dartpad_picker_main.dart.js
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		If you see an empty box instead of code, go to the
		[DartPad troubleshooting page](/tools/dartpad/troubleshoot).
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		If you see empty boxes instead of DartPads, go to the
		[DartPad troubleshooting page](/tools/dartpad/troubleshoot).