Server > Get Started: use tested sources for DartPad Hello World #2092

chalin · 2019-11-14T17:47:04Z

Contributes to #1803 by replacing a Gist-based DartPad with a DartPad initialized from an analyzed and tested code excerpt from our examples folder.

Notes:

This PR uses the experimental DartPad inject_embed feature.
The DartPad is initialized with the base Hello World excerpt that was already a part of our examples, rather than create a new Hello World variant that illustrates use of const.

Followup to #1921
Related to #1919

Staged

https://dart-dev-staging-1.firebaseapp.com/tutorials/server/get-started

Screen shot

cc @johnpryan @legalcodes @RedBrogdon

chalin · 2019-11-14T17:49:18Z

src/_assets/css/_overwrites.scss

-
-	/* Hide "Open Dartpad" link */
-	.run-in-dartpad {
-		display: none;
-	}


This CSS class was introduced July 11, 2016, Migrating repo from Ocupop. AFAICT, since the Dash migration, this style isn't used anymore (I've checked the site sources and the generated site).

chalin · 2019-11-14T17:49:29Z

src/_assets/css/main.scss

-
-/* -----------------------------------------
- Dartpad
- ----------------------------------------- */
-
-#run-dartpad {
-  position: relative;
-  padding: 15px 0;
-  background: $gray-light;
-  border-top: 1px solid $gray;
-  z-index: 5;
-}
-


This CSS class was introduced July 11, 2016, Migrating repo from Ocupop. AFAICT, since the Dash migration, this style isn't used anymore (I've checked the site sources and the generated site).

chalin · 2019-11-14T17:50:18Z

src/_assets/css/main.scss

-.codesample__open-in-dartpad {
-  display: block;
-  position: absolute;
-  width: auto;
-  z-index: 10;
-  padding: 5px 10px 5px 35px;
-  top: 35px;
-  right: 38px;
-  background-color: $gray;
-  color: $gray-base;
-
-  font-weight: normal;
-  font-size: $font-size-base * 0.91;
-  @include media-breakpoint-up(md) {
-    font-size: $font-size-base * 0.8;
-  }
-  @include media-breakpoint-up(lg) {
-    font-size: $font-size-base * 0.91;
-  }
-
-  &.top {
-    top: 0;
-  }
-  &:visited, &:active {
-    color: $gray-base;
-  }
-  &:hover {
-    background-color: darken($gray, 10%);
-    color: $white-base;
-  }
-  &:after {
-    content: '';
-    display: block;
-    position: absolute;
-    top: 5px;
-    left: 10px;
-    width: 18px;
-    height: 18px;
-    background-image: asset_url('shared/dart/logo/default.svg');
-    background-size: cover;
-    background-position: center center;
-    background-repeat: no-repeat;
-  }
-}
-


This CSS class was introduced July 11, 2016, Migrating repo from Ocupop. AFAICT, since the Dash migration, this style isn't used anymore (I've checked the site sources and the generated site).

chalin · 2019-11-14T17:51:42Z

src/_tutorials/server/get-started.md

+<style>
+iframe[src^="https://dartpad"] {
+  border: 1px solid #ccc;
+  margin-bottom: 1rem;
+  width: 100%;
+}
+</style>


If we like this approach (of initializing DartPads from code excerpts rather than Gists), then I'll move this style definition into an appropriate SCSS file.

chalin · 2019-11-14T17:55:37Z

src/_tutorials/server/get-started.md

+</style>
+
+<?code-excerpt "misc/test/samples_test.dart (hello-world)"?>
+```dart:run-dartpad


@johnpryan, FYI, I'm keeping the language as dart because it allows IDEs etc to continue pretty-printing the code as Dart code:

It seems that inject_embed.dart is ok with class="language-dart:run-dartpad" instead of class="language-run-dartpad", as is document in https://github.com/dart-lang/dart-pad/wiki/Embedding-Guide#converting-code-blocks-to-dartpad. Maybe that wiki page entry could be updated?

chalin · 2019-11-14T17:56:30Z

src/_tutorials/server/get-started.md

+</style>
+
+<?code-excerpt "misc/test/samples_test.dart (hello-world)"?>
+```dart:run-dartpad


@kwalrath - I switched to using the default mode-dart rather than mode-inline because the default mode look slightly better on desktop and looks no worse on mobile.

johnpryan · 2019-11-14T17:57:21Z

src/_tutorials/server/get-started.md

+iframe[src^="https://dartpad"] {
+  border: 1px solid #ccc;
+  margin-bottom: 1rem;
+  width: 100%;


I would vote to make this just a little bit taller (maybe 200px-400px) to encourage people try things out. We are adding a feature very soon to support this, but right now we might want to set a min-height

What would be really nice would be to have a "grow frame" button at the bottom-right, just like GitHub comment boxes have:

WDYT? (Is there an issue / feature request open for this already? If not, would you like for me to open one?)

Since you've both approved this PR, I'll merge it as is. I'll address the min height in a followup PR.

@kwalrath - what are your feelings about the DartPad height for this sample?

I'd like to increase the height.

johnpryan · 2019-11-14T17:58:52Z

src/_tutorials/server/get-started.md

+<style>
+iframe[src^="https://dartpad"] {
+  border: 1px solid #ccc;
+  margin-bottom: 1rem;
+  width: 100%;
+}
+</style>


kwalrath

Looks great to me!

johnpryan · 2019-11-14T18:09:11Z

LGTM

johnpryan · 2019-11-14T18:11:59Z

I like that idea. I don't think there's an issue for that yet.

…

On Thu, Nov 14, 2019 at 10:09 AM Patrice Chalin ***@***.***> wrote: ***@***.**** commented on this pull request. ------------------------------ In src/_tutorials/server/get-started.md <#2092 (comment)>: > {{site.alert.note}} {% include dartpad-embedded-troubleshooting.md %} {{site.alert.end}} -<iframe - src="{{site.dartpad-embed-inline}}?id=27e044ec9e2957d9c5c7062871ce8bf3" - width="100%" - height="300px" - style="border: 1px solid #ccc;"> -</iframe> +<style> +iframe[src^="https://dartpad"] { + border: 1px solid #ccc; + margin-bottom: 1rem; + width: 100%; What would be really nice would be to have a "grow frame" button at the bottom-right, just like GitHub comment boxes have: [image: Screen Shot 2019-11-14 at 13 06 44] <https://user-images.githubusercontent.com/4140793/68883760-ae4d5a00-06df-11ea-9994-b771f8d9dd8e.png> WDYT? (Is there an issue / feature request open for this already? If not, would you like for me to open one?) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2092?email_source=notifications&email_token=AAIXW565YCZPIUUQRQYQMXTQTWH5PA5CNFSM4JNPIZCKYY3PNVWWK3TUL52HS4DFWFIHK3DMKJSXC5LFON2FEZLWNFSXPKTDN5WW2ZLOORPWSZGOCLTWXJI#discussion_r346466134>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAIXW5ZRQFIBNTCKZDYUWELQTWH5PANCNFSM4JNPIZCA> .

chalin · 2019-11-14T18:12:41Z

Thanks for the reviews. Travis is green, merging.

Server > Get Started: use tested sources for DartPad Hello World

6c0ae07

chalin added fix.examples Adds or changes example test.general Relates to unit, integration, perf testing labels Nov 14, 2019

chalin requested a review from kwalrath November 14, 2019 17:47

googlebot added the cla: yes Contributor has signed the Contributor License Agreement label Nov 14, 2019

chalin commented Nov 14, 2019

View reviewed changes

kwalrath requested a review from johnpryan November 14, 2019 17:54

chalin commented Nov 14, 2019

View reviewed changes

johnpryan approved these changes Nov 14, 2019

View reviewed changes

kwalrath approved these changes Nov 14, 2019

View reviewed changes

chalin merged commit c8048eb into master Nov 14, 2019

chalin deleted the chalin-server-get-started-dartpad-1114 branch November 14, 2019 18:12

This was referenced Nov 14, 2019

Server > Get Started: fix front matter #2094

Merged

Make DartPad resizable in Tutorial > Server > Get started #2097

Merged

kwalrath mentioned this pull request Mar 3, 2020

add google analytics ID to DartPad snippets #2293

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Server > Get Started: use tested sources for DartPad Hello World #2092

Server > Get Started: use tested sources for DartPad Hello World #2092

chalin commented Nov 14, 2019

chalin Nov 14, 2019 •

edited

Loading

chalin Nov 14, 2019 •

edited

Loading

chalin Nov 14, 2019

chalin Nov 14, 2019

johnpryan Nov 14, 2019

chalin Nov 14, 2019

chalin Nov 14, 2019

johnpryan Nov 14, 2019

chalin Nov 14, 2019

chalin Nov 14, 2019

kwalrath Nov 14, 2019

chalin Nov 14, 2019

johnpryan Nov 14, 2019

kwalrath left a comment •

edited

Loading

johnpryan commented Nov 14, 2019

johnpryan commented Nov 14, 2019 via email

chalin commented Nov 14, 2019

Server > Get Started: use tested sources for DartPad Hello World #2092

Server > Get Started: use tested sources for DartPad Hello World #2092

Conversation

chalin commented Nov 14, 2019

Staged

Screen shot

chalin Nov 14, 2019 • edited Loading

Choose a reason for hiding this comment

chalin Nov 14, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kwalrath left a comment • edited Loading

Choose a reason for hiding this comment

johnpryan commented Nov 14, 2019

johnpryan commented Nov 14, 2019 via email

chalin commented Nov 14, 2019

chalin Nov 14, 2019 •

edited

Loading

chalin Nov 14, 2019 •

edited

Loading

kwalrath left a comment •

edited

Loading