Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 1 commit into from
Nov 14, 2019
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 0 additions & 5 deletions src/_assets/css/_overwrites.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -295,11 +295,6 @@ body.homepage .get-started-section {
.alert, pre {
border: 1px solid black;
}

/* Hide "Open Dartpad" link */
.run-in-dartpad {
display: none;
}
Comment on lines -298 to -302
Copy link
Contributor Author

@chalin chalin Nov 14, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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).

}

/* Overwrite bootstrap: don't wrap code */
Expand Down
58 changes: 0 additions & 58 deletions src/_assets/css/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -628,19 +628,6 @@ img {
}
}


/* -----------------------------------------
Dartpad
----------------------------------------- */

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

Comment on lines -631 to -643
Copy link
Contributor Author

@chalin chalin Nov 14, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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).

/* -----------------------------------------
Search
----------------------------------------- */
Expand Down Expand Up @@ -815,51 +802,6 @@ main .content {
border-radius: 8px;
}

.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;
}
}

Comment on lines -818 to -862
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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).

// Columns
.col2 {
list-style: none;
Expand Down
35 changes: 21 additions & 14 deletions src/_tutorials/server/get-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,36 +7,43 @@ nextpage:
prevpage:
url: /tutorials/server
title: Dart command-line and server tutorials
js: [{url: https://dartpad.dev/experimental/inject_embed.dart.js, defer: true}]
---

Follow these steps to start using the Dart SDK to develop command-line and server apps.
First you’ll play with the Dart language and libraries in your browser, no download required.
First you’ll play with the Dart language in your browser, no download required.
Then you’ll install the Dart SDK, write a small program, and run that program using the Dart VM.
Finally, you'll use an AOT (_ahead of time_) compiler to compile your finished program to native machine code,
which you'll execute using the Dart runtime.

## 1. Play with Dart code in DartPad

With DartPad you can experiment with the Dart language and APIs,
no download necessary.
With [DartPad](/tools/dartpad) you can experiment with the Dart language and
APIs, no download necessary.

For example, here's an embedded DartPad that lets you play with the code for a
small Hello World program. Click **Run** to run the app; the console output
appears beneath the code. Try editing the source code—perhaps you'd like to
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>
small Hello World program. Click **Run** to run the app; output appears in the
console view. Try editing the source code &mdash; perhaps you'd like to change the
greeting to use another language.

{{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%;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Screen Shot 2019-11-14 at 13 06 44

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd like to increase the height.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See #2097

}
</style>
Comment on lines +33 to +39
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

SGTM


<?code-excerpt "misc/test/samples_test.dart (hello-world)"?>
```dart:run-dartpad
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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.

void main() {
print('Hello, World!');
}
```

More information:

Expand Down