Simplify and cleanup setup of /tutorials (#5182)

- Moves `_tutorials` to `tutorials` for automatic rendering without
collection
- Removes now unused tutorials collection config
- Moves all images used by tutorials to `/assets`

Contributes to #5177

_config.yml

@@ -45,9 +45,6 @@ collections:
   articles:
     output: true
     permalink: /articles/:path
-  tutorials:
-    output: true
-    permalink: /tutorials/:path
   guides:
     output: true
     permalink: /guides/:path

src/_tutorials/index.md → src/tutorials/index.md

@@ -44,5 +44,4 @@ which are fundamental to most Dart programs.
 
 ## More tutorials
 
-See the [Flutter tutorials.](https://flutter.dev/tutorials)
-<!-- * [Dart Academy](https://dart.academy) -->
+Check out the [Flutter codelabs and tutorials]({{site.flutter-docs}}/codelabs).

src/_tutorials/libraries/shared-pkgs.md → src/tutorials/libraries/shared-pkgs.md

@@ -197,7 +197,7 @@ only one, `lib`, was installed when you ran pub get.
   <hr>
   <div class="row">
     <div class="col-lg-3">
-    <img class="scale-img-max" src="/tutorials/images/libraries-folder.png"
+    <img class="scale-img-max" src="/assets/img/tutorials/libraries/libraries-folder.png"
          alt="Dart libraries directory"/>
     </div>
     <div class="col-lg-7">
@@ -209,7 +209,7 @@ only one, `lib`, was installed when you ran pub get.
   <hr>
   <div class="row">
     <div class="col-lg-3">
-    <img class="scale-img-max" src="/tutorials/images/housekeeping-files.png"
+    <img class="scale-img-max" src="/assets/img/tutorials/libraries/housekeeping-files.png"
          alt="Housekeeping files"/>
     </div>
     <div class="col-lg-7">
@@ -230,7 +230,7 @@ only one, `lib`, was installed when you ran pub get.
   <hr>
   <div class="row">
     <div class="col-lg-3">
-    <img class="scale-img-max" src="/tutorials/images/other-folders.png"
+    <img class="scale-img-max" src="/assets/img/tutorials/libraries/other-folders.png"
          alt="Document, scripts, tests, and other resources"/>
     </div>
     <div class="col-lg-7">

src/_tutorials/server/cmdline.md → src/tutorials/server/cmdline.md

@@ -204,7 +204,7 @@ result of parsing command-line arguments is stored in `argResults`.
 The following diagram shows how the `dcat` command line used above
 is parsed into an `ArgResults` object.
 
-![Run dcat from the command-line](images/dcat-dart-run.svg){:width="350"}
+![Run dcat from the command-line](/assets/img/tutorials/server/dcat-dart-run.svg){:width="350"}
 
 You can access flags and options by name,
 treating an `ArgResults` like a `Map`.

src/_tutorials/web/low-level-html/add-elements.md → src/tutorials/web/low-level-html/add-elements.md

@@ -160,7 +160,7 @@ DOM through the `Element` class.
 An `Element` object has a parent `Element`
 and maintains references to its children elements in a list.
 
-<img class="scale-img-max" src="/tutorials/web/images/relationships.png"
+<img class="scale-img-max" src="/assets/img/tutorials/web/relationships.png"
      alt="An element with multiple child elements and a parent element">
 
 An `Element` object has at most one parent `Element`.
@@ -170,7 +170,7 @@ Get an `Element`'s parent with the getter `parent`.
 For example, if you have an `Element` with the name `anElement`
 you would refer to its parent element with `anElement.parent`.
 
-<img class="scale-img-max" src="/tutorials/web/images/parent-reference.png"
+<img class="scale-img-max" src="/assets/img/tutorials/web/parent-reference.png"
      alt="Dart code reference to anElement's parent">
 
 An `Element` object maintains references to its child elements in a list.
@@ -197,13 +197,13 @@ The `List` class has various methods and operators
 whereby you can refer to each child element individually,
 iterate over the list, and add and remove elements.
 
-<img class="scale-img-max" src="/tutorials/web/images/child-references.png"
+<img class="scale-img-max" src="/assets/img/tutorials/web/child-references.png"
      alt="Dart code references to anElement's list of children and individual child Elements">
 
 You can change the tree structure by adding children to
 and removing children from an element's list of children.
 
-<img class="scale-img-max" src="/tutorials/web/images/add-element.png"
+<img class="scale-img-max" src="/assets/img/tutorials/web/add-element.png"
      alt="Add a child element">
 
 When you change an `Element` or its child elements in your Dart program,
@@ -223,12 +223,12 @@ You could get the same results using Dart code,
 but it's usually better to define the primary page elements
 in HTML code (easier to read, quicker to load).
 
-<img class="scale-img-max" src="/tutorials/web/images/todo-html.png"
+<img class="scale-img-max" src="/assets/img/tutorials/web/todo-html.png"
      alt="todo app and its corresponding HTML code">
 
 The following diagram shows a partial DOM tree for the todo app.
 
-<img class="scale-img-max" src="/tutorials/web/images/todo-dom.png"
+<img class="scale-img-max" src="/assets/img/tutorials/web/todo-dom.png"
      alt="The todo app and part of its DOM tree">
 
 Of interest are the two-page elements that have IDs:
@@ -244,7 +244,7 @@ whenever the user enters text into the input element.
 The following diagram shows
 the Dart code for the todo app.
 
-<img class="scale-img-max" src="/tutorials/web/images/todo-dart.png"
+<img class="scale-img-max" src="/assets/img/tutorials/web/todo-dart.png"
      alt="todo app and its corresponding Dart code">
 
 The top-level variables are initialized using
@@ -282,14 +282,14 @@ The todo app defines a function, `addToDoItem()`,
 that can handle these change events.
 The following code connects `addToDoItem()` to the input field:
 
-<img class="scale-img-max" src="/tutorials/web/images/event-handler-todo.png"
+<img class="scale-img-max" src="/assets/img/tutorials/web/event-handler-todo.png"
      alt="Add an event handler to the toDoInput element">
 
 Rather than dissect this busy line of code,
 think of it as a Dart idiom
 for adding an event handler to an `Element` object.
 
-<img class="scale-img-max" src="/tutorials/web/images/event-handler-idiom.png"
+<img class="scale-img-max" src="/assets/img/tutorials/web/event-handler-idiom.png"
      alt="Dart idiom: Add an event handler to an Element">
 
 A change event is just one of many types of events
@@ -330,7 +330,7 @@ The `addToDoItem()` function ignores the Event object passed to it.
 
 The change event handler has the following code:
 
-<img class="scale-img-max" src="/tutorials/web/images/add-element-code.png"
+<img class="scale-img-max" src="/assets/img/tutorials/web/add-element-code.png"
      alt="The addToDoItem() function explained">
 
 The final line of code is where the DOM gets changed.
@@ -347,7 +347,7 @@ in the to do list.
 
 Let's take a look at the CSS file for this app.
 
-<img class="scale-img-max" src="/tutorials/web/images/css-code.png"
+<img class="scale-img-max" src="/assets/img/tutorials/web/css-code.png"
      alt="The effect of CSS styles">
 
 This code uses three different kinds of CSS selectors.
@@ -492,7 +492,7 @@ The program adds each button to a DOM element—a simple
 `<div>` element identified by the CSS selector `letterpile`—with
 a call to `letterpile.children.add()`.
 
-<img class="scale-img-max" src="/tutorials/web/images/anagram-newletters.png"
+<img class="scale-img-max" src="/assets/img/tutorials/web/anagram-newletters.png"
      alt="Dart code populates the letter pile with buttons">
 
 Each button element in the letter pile
@@ -509,7 +509,7 @@ Because an element can have only one parent,
 adding the button to a different parent
 automatically removes it from its previous parent.
 
-<img class="scale-img-max" src="/tutorials/web/images/anagram-move.png"
+<img class="scale-img-max" src="/assets/img/tutorials/web/anagram-move.png"
      alt="The mouse click handler adds the button to the word, thus moving it">
 
 The `+=` operator is a compound assignment operator,

src/_tutorials/web/low-level-html/connect-dart-html.md → src/tutorials/web/low-level-html/connect-dart-html.md

@@ -95,7 +95,7 @@ and displays the document in a window.
 The following diagram shows a simple HTML file and
 the resulting web browser page in Chrome.
 
-<img class="scale-img-max" src="/tutorials/web/images/simple-html.png"
+<img class="scale-img-max" src="/assets/img/tutorials/web/simple-html.png"
      alt="A simple HTML file and its resulting web page">
 
 HTML uses tags to describe the document.
@@ -117,7 +117,7 @@ For example, the tree has page elements,
 text nodes, and attribute nodes.
 Here is the DOM tree for the simple HTML file above.
 
-<img class="scale-img-max" src="/tutorials/web/images/simple-dom-tree.png"
+<img class="scale-img-max" src="/assets/img/tutorials/web/simple-dom-tree.png"
      alt="A Dart dynamically changing the DOM">
 
 Notice that some tags, such as the `<p>` paragraph tag,
@@ -136,7 +136,7 @@ by adding, deleting, and modifying the nodes in the DOM tree.
 When the DOM is changed,
 the browser immediately re-renders the window.
 
-<img class="scale-img-max" src="/tutorials/web/images/dynamic-dart.png"
+<img class="scale-img-max" src="/assets/img/tutorials/web/dynamic-dart.png"
      alt="A Dart program can dynamically change the DOM">
 
 The diagram shows a small Dart program that makes
@@ -337,7 +337,7 @@ the node containing the string
 "RipVanWinkle paragraph."
 is a text node.
 
-<img class="scale-img-max" src="/tutorials/web/images/paragraph-dom.png"
+<img class="scale-img-max" src="/assets/img/tutorials/web/paragraph-dom.png"
      alt="DOM tree for a paragraph element">
 
 More complex text,
@@ -387,7 +387,7 @@ In DartPad, the only visible connection between
 the Dart code and the HTML code
 is the `RipVanWinkle` ID.
 
-<img class="scale-img-max" src="/tutorials/web/images/dart-html-connect.png"
+<img class="scale-img-max" src="/assets/img/tutorials/web/dart-html-connect.png"
      alt="The RipVanWinkle ID is used by both Dart and HTML">
 
 To run your app outside DartPad,
@@ -496,7 +496,7 @@ Let's look at the CSS code for the mini app.
 The CSS file for the mini app has one CSS rule in it.
 A CSS rule has two main parts: a selector and a set of declarations.
 
-<img class="scale-img-max" src="/tutorials/web/images/css-rule-explained.png"
+<img class="scale-img-max" src="/assets/img/tutorials/web/css-rule-explained.png"
      alt="The parts of a CSS rule">
 
 In the mini app, the selector `#RipVanWinkle` is an ID selector,
@@ -518,7 +518,7 @@ for all matching elements.
 The style sheet is used to set the appearance
 of the matching element(s) on the web page.
 
-<img class="scale-img-max" src="/tutorials/web/images/css-property-value.png"
+<img class="scale-img-max" src="/assets/img/tutorials/web/css-property-value.png"
      alt="A declaration specifies an attribute and its value">
 
 The CSS rule for the `RipVanWinkle` paragraph

src/_tutorials/web/low-level-html/remove-elements.md → src/tutorials/web/low-level-html/remove-elements.md

@@ -174,7 +174,7 @@ using the element's `remove()` function
 is shorter and more concise than
 using functions from the `List` class.
 
-<img class="scale-img-max" src="/tutorials/web/images/remove-element.png"
+<img class="scale-img-max" src="/assets/img/tutorials/web/remove-element.png"
      alt="Use element.remove() to remove an element from the DOM">
 
 In the app,
@@ -186,7 +186,7 @@ When the user clicks that new element,
 its event handler causes the element to remove itself from the DOM
 with `remove()`.
 
-<img class="scale-img-max" src="/tutorials/web/images/remove-element-code.png"
+<img class="scale-img-max" src="/assets/img/tutorials/web/remove-element-code.png"
      alt="Registering an event handler to delete an item">
 
 When the element removes itself from the DOM,
@@ -198,7 +198,7 @@ and the item disappears from the to do list.
 When the user clicks the **Delete All** button,
 all elements are removed from the list.
 
-<img class="scale-img-max" src="/tutorials/web/images/remove-all-elements.png"
+<img class="scale-img-max" src="/assets/img/tutorials/web/remove-all-elements.png"
      alt="Use element.children.clear() to remove all of an element's children">
 
 In this case, using the `List` class's `clear()` function
@@ -219,7 +219,7 @@ that implements the **Delete All** button.
    the handler removes all of the child elements from the to do list.
    Here is all the Dart code related to the **Delete All** button.
 
-   <img class="scale-img-max" src="/tutorials/web/images/remove-all-code.png"
+   <img class="scale-img-max" src="/assets/img/tutorials/web/remove-all-code.png"
    alt="Remove all child elements from an Element">
 
 ## About function expressions and =>
@@ -235,7 +235,7 @@ For more details,
 see the language tour's coverage of
 [functions](/language/functions).
 
-<img class="scale-img-max" src="/tutorials/web/images/event-listener-exp.png"
+<img class="scale-img-max" src="/assets/img/tutorials/web/event-listener-exp.png"
      alt="A one-line function definition">
 
 It is equivalent to writing this:

tool/create_code_with_tooltips.dart

@@ -17,7 +17,7 @@ const sources = [
   _SrcAndTipPaths(
     '$repoBase/examples/misc/bin/dcat/dcat.dart',
     '$repoBase/examples/misc/bin/dcat/dcat_tooltips.html',
-    '$repoBase/src/_tutorials/server/_dcat-example.html',
+    '$repoBase/src/tutorials/server/_dcat-example.html',
   ),
 ];