Built 9 directories

Directories:
  animations/web
  provider_shopper/web
  charts/web
  filipino_cuisine/web
  github_dataviz/web
  particle_background/web
  slide_puzzle/web
  timeflow/web
  vision_challenge/web

Branch: more_slide_puzzle_updates
Commit: 3f1e2877b8 (dirty)

package:peanut 3.5.1

.build.manifest

@@ -36,102 +36,195 @@ handle_scrolling.html
 handle_taps.html
 images/.DS_Store
 images/add_to_app1.png
+images/add_to_app1_thumb.png
 images/add_to_app2.png
+images/add_to_app2_thumb.png
 images/animations1.png
+images/animations1_thumb.png
 images/animations2.png
+images/animations2_thumb.png
 images/animations3.png
+images/animations3_thumb.png
 images/charts1.png
+images/charts1_thumb.png
 images/cookbook/animated-container.png
+images/cookbook/animated-container_thumb.png
 images/cookbook/authenticated-requests.png
+images/cookbook/authenticated-requests_thumb.png
 images/cookbook/background-parsing.png
+images/cookbook/background-parsing_thumb.png
 images/cookbook/basic-list.png
+images/cookbook/basic-list_thumb.png
 images/cookbook/cached-images.png
+images/cookbook/cached-images_thumb.png
 images/cookbook/dismissible.png
+images/cookbook/dismissible_thumb.png
 images/cookbook/drawer.png
+images/cookbook/drawer_thumb.png
 images/cookbook/error-reporting.png
+images/cookbook/error-reporting_thumb.png
 images/cookbook/fading-in-images.png
+images/cookbook/fading-in-images_thumb.png
 images/cookbook/fetch-data.png
+images/cookbook/fetch-data_thumb.png
 images/cookbook/finders.png
+images/cookbook/finders_thumb.png
 images/cookbook/floating-app-bar.png
+images/cookbook/floating-app-bar_thumb.png
 images/cookbook/focus.png
+images/cookbook/focus_thumb.png
 images/cookbook/fonts.png
+images/cookbook/fonts_thumb.png
 images/cookbook/grid-lists.png
+images/cookbook/grid-lists_thumb.png
 images/cookbook/handling-taps.png
+images/cookbook/handling-taps_thumb.png
 images/cookbook/hero-animations.png
+images/cookbook/hero-animations_thumb.png
 images/cookbook/horizontal-list.png
+images/cookbook/horizontal-list_thumb.png
 images/cookbook/introduction.png
+images/cookbook/introduction_thumb.png
 images/cookbook/key-value.png
+images/cookbook/key-value_thumb.png
 images/cookbook/long-lists.png
+images/cookbook/long-lists_thumb.png
 images/cookbook/mixed-list.png
+images/cookbook/mixed-list_thumb.png
 images/cookbook/mocking.png
+images/cookbook/mocking_thumb.png
 images/cookbook/named-routes.png
+images/cookbook/named-routes_thumb.png
 images/cookbook/navigate-with-arguments.png
+images/cookbook/navigate-with-arguments_thumb.png
 images/cookbook/navigation-basics.png
+images/cookbook/navigation-basics_thumb.png
 images/cookbook/network-image.png
+images/cookbook/network-image_thumb.png
 images/cookbook/opacity-animation.png
+images/cookbook/opacity-animation_thumb.png
 images/cookbook/orientation.png
+images/cookbook/orientation_thumb.png
 images/cookbook/package-fonts.png
+images/cookbook/package-fonts_thumb.png
 images/cookbook/page-route-animation.png
+images/cookbook/page-route-animation_thumb.png
 images/cookbook/passing-data.png
+images/cookbook/passing-data_thumb.png
 images/cookbook/physics-simulation.png
+images/cookbook/physics-simulation_thumb.png
 images/cookbook/picture-using-camera.png
+images/cookbook/picture-using-camera_thumb.png
 images/cookbook/play-video.png
+images/cookbook/play-video_thumb.png
 images/cookbook/profiling.png
+images/cookbook/profiling_thumb.png
 images/cookbook/reading-writing-files.png
+images/cookbook/reading-writing-files_thumb.png
 images/cookbook/retrieve-input.png
+images/cookbook/retrieve-input_thumb.png
 images/cookbook/returning-data.png
+images/cookbook/returning-data_thumb.png
 images/cookbook/ripples.png
+images/cookbook/ripples_thumb.png
 images/cookbook/scrolling.png
+images/cookbook/scrolling_thumb.png
 images/cookbook/send-data.png
+images/cookbook/send-data_thumb.png
 images/cookbook/snackbars.png
+images/cookbook/snackbars_thumb.png
 images/cookbook/sqlite.png
+images/cookbook/sqlite_thumb.png
 images/cookbook/tabs.png
+images/cookbook/tabs_thumb.png
 images/cookbook/tap-drag.png
+images/cookbook/tap-drag_thumb.png
 images/cookbook/text-field-changes.png
+images/cookbook/text-field-changes_thumb.png
 images/cookbook/text-input.png
+images/cookbook/text-input_thumb.png
 images/cookbook/themes.png
+images/cookbook/themes_thumb.png
 images/cookbook/validation.png
+images/cookbook/validation_thumb.png
 images/cookbook/web-sockets.png
+images/cookbook/web-sockets_thumb.png
 images/filipino_cuisine1.png
+images/filipino_cuisine1_thumb.png
 images/flutter_maps_firestore1.png
+images/flutter_maps_firestore1_thumb.png
 images/flutter_maps_firestore2.png
+images/flutter_maps_firestore2_thumb.png
 images/gallery1.png
+images/gallery1_thumb.png
 images/gallery2.png
+images/gallery2_thumb.png
 images/gallery3.png
+images/gallery3_thumb.png
 images/gallery4.png
+images/gallery4_thumb.png
 images/gallery5.png
+images/gallery5_thumb.png
 images/github_dataviz1.png
+images/github_dataviz1_thumb.png
 images/isolate1.png
+images/isolate1_thumb.png
 images/isolate2.png
+images/isolate2_thumb.png
 images/isolate3.png
+images/isolate3_thumb.png
 images/jsonexample1.png
+images/jsonexample1_thumb.png
 images/jsonexample2.png
+images/jsonexample2_thumb.png
 images/jsonexample3.png
+images/jsonexample3_thumb.png
 images/logos/logo_flutter_1080px_clr.png
 images/logos/logo_flutter_96px_clr.png
 images/logos/logo_lockup_flutter_horizontal_wht.png
 images/logos/logo_lockup_flutter_horizontal_wht_96.png
 images/particle_background1.png
+images/particle_background1_thumb.png
 images/place_tracker1.png
+images/place_tracker1_thumb.png
 images/place_tracker2.png
+images/place_tracker2_thumb.png
 images/place_tracker3.png
+images/place_tracker3_thumb.png
 images/place_tracker4.png
+images/place_tracker4_thumb.png
 images/platform_design1.png
+images/platform_design1_thumb.png
 images/platform_design2.png
+images/platform_design2_thumb.png
 images/platform_design3.png
+images/platform_design3_thumb.png
 images/platform_design4.png
+images/platform_design4_thumb.png
 images/platform_design5.png
+images/platform_design5_thumb.png
 images/platform_design6.png
+images/platform_design6_thumb.png
 images/platform_design7.png
+images/platform_design7_thumb.png
 images/platform_view_swift1.png
+images/platform_view_swift1_thumb.png
 images/platform_view_swift2.png
+images/platform_view_swift2_thumb.png
 images/provider_shopper1.png
+images/provider_shopper1_thumb.png
 images/provider_shopper2.png
+images/provider_shopper2_thumb.png
 images/provider_shopper3.png
+images/provider_shopper3_thumb.png
 images/slide_puzzle1.png
+images/slide_puzzle1_thumb.png
 images/timeflow1.png
+images/timeflow1_thumb.png
 images/vision_challenge1.png
+images/vision_challenge1_thumb.png
 images/vision_challenge2.png
+images/vision_challenge2_thumb.png
 implement_swipe_to_dismiss.html
 index.html
 isolate_example.html

.packages

@@ -36,6 +36,7 @@ html:packages/html/
 http:packages/http/
 http_multi_server:packages/http_multi_server/
 http_parser:packages/http_parser/
+image:packages/image/
 intl:packages/intl/
 io:packages/io/
 js:packages/js/
@@ -54,6 +55,7 @@ package_config:packages/package_config/
 package_resolver:packages/package_resolver/
 path:packages/path/
 pedantic:packages/pedantic/
+petitparser:packages/petitparser/
 pool:packages/pool/
 protobuf:packages/protobuf/
 pub_semver:packages/pub_semver/
@@ -89,5 +91,6 @@ watcher:packages/watcher/
 web_socket_channel:packages/web_socket_channel/
 webdriver:packages/webdriver/
 webkit_inspection_protocol:packages/webkit_inspection_protocol/
+xml:packages/xml/
 yaml:packages/yaml/
 $sdk:packages/$sdk/

index.html

@@ -71,7 +71,7 @@
       <div class="grid">
         <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="gallery tag:intermediate intermediate tag:sample sample tag:gallery gallery tag:material material tag:design design tag:vignettes vignettes platform:web web platform:ios ios platform:android android widget:AlertDialog widget:AppBar widget:BottomAppBar widget:BottomNavigationBar widget:BottomSheet widget:Card widget:Checkbox widget:ChoiceChip widget:CircularProgressIndicator widget:Container widget:CupertinoActivityIndicator widget:CupertinoAlertDialog widget:CupertinoButton widget:CupertinoButton widget:CupertinoDatePicker widget:CupertinoDialogAction widget:CupertinoNavigationBar widget:CupertinoPageScaffold widget:CupertinoSegmentedControl widget:CupertinoSlider widget:CupertinoSlidingSegmentedControl widget:CupertinoSliverRefreshControl widget:CupertinoSwitch widget:CupertinoTabView widget:CupertinoTextField widget:CupertinoTheme widget:DayPicker widget:FilterChip widget:FlatButton widget:FloatingActionButton widget:GridTile widget:GridView widget:Icon widget:InputChip widget:LayoutBuilder widget:LinearProgressIndicator widget:ListTile widget:ListView widget:MaterialBanner widget:MonthPicker widget:PaginatedDataTable widget:PopupMenuButton widget:PopupMenuItem widget:Radio widget:RaisedButton widget:RangeSlider widget:Scaffold widget:SimpleDialog widget:Slider widget:SnackBar widget:Switch widget:TabBar widget:TabBarView widget:TextField widget:TextFormField widget:Tooltip widget:YearPicker package:flutter/material package:flutter/cupertino package:google_fonts package:scoped_model type:demo">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="gallery.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/gallery1.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/gallery1_thumb.png');"></div>
           <div class="demo-card__label type-label">demo</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Gallery</h2>
@@ -81,7 +81,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="add to app tag:advanced advanced tag:sample sample tag:add-to-app add-to-app tag:android android tag:ios ios tag:native native tag:embedding embedding platform:ios ios platform:android android widget:WidgetsFlutterBinding widget:MethodChannel package:flutter/material package:flutter/services package:provider type:sample">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="add_to_app.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/add_to_app1.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/add_to_app1_thumb.png');"></div>
           <div class="demo-card__label type-label">sample</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Add to App</h2>
@@ -91,7 +91,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="animations tag:intermediate intermediate tag:sample sample tag:animation animation platform:ios ios platform:android android platform:web web widget:AnimatedContainer widget:PageRouteBuilder widget:AnimationController widget:SingleTickerProviderStateMixin widget:Tween widget:AnimatedBuilder widget:TweenSequence widget:TweenSequenceItem package:flutter/material type:sample">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="animations.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/animations1.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/animations1_thumb.png');"></div>
           <div class="demo-card__label type-label">sample</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Animations</h2>
@@ -102,7 +102,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="flutter maps firestore tag:intermediate intermediate tag:sample sample tag:firebase firebase tag:maps maps platform:ios ios platform:android android widget:GoogleMap package:flutter/material package:cloud_firestore package:google_maps_flutter package:google_maps_webservice type:sample">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="flutter_maps_firestore.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/flutter_maps_firestore1.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/flutter_maps_firestore1_thumb.png');"></div>
           <div class="demo-card__label type-label">sample</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Flutter Maps Firestore</h2>
@@ -112,7 +112,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="isolate example tag:intermediate intermediate tag:sample sample tag:isolates isolates tag:concurrency concurrency platform:ios ios platform:android android widget:FutureBuilder widget:AnimationController package:dart:isolate package:dart:math type:sample">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="isolate_example.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/isolate1.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/isolate1_thumb.png');"></div>
           <div class="demo-card__label type-label">sample</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Isolate Example</h2>
@@ -122,7 +122,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="jsonexample tag:beginner beginner tag:sample sample platform:ios ios platform:android android widget:Table widget:TableRow package:json_serializable package:built_value package:built_collection package:json_annotation package:build_runner package:built_value_generator type:sample">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="jsonexample.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/jsonexample1.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/jsonexample1_thumb.png');"></div>
           <div class="demo-card__label type-label">sample</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">jsonexample</h2>
@@ -132,7 +132,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="place tracker tag:intermediate intermediate tag:sample sample tag:json json tag:serialization serialization platform:android android widget:GoogleMap package:google_maps_flutter type:sample">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="place_tracker.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/place_tracker1.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/place_tracker1_thumb.png');"></div>
           <div class="demo-card__label type-label">sample</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Place Tracker</h2>
@@ -142,7 +142,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="platform design tag:advanced advanced tag:sample sample tag:ios ios platform:ios ios platform:android android widget:TargetPlatform package:flutter/material package:flutter/cupertino type:sample">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="platform_design.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/platform_design1.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/platform_design1_thumb.png');"></div>
           <div class="demo-card__label type-label">sample</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Platform Design</h2>
@@ -152,7 +152,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="platform view swift tag:advanced advanced tag:sample sample tag:ios ios platform:ios ios widget:MethodChannel package:flutter/material package:flutter/services type:sample">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="platform_view_swift.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/platform_view_swift1.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/platform_view_swift1_thumb.png');"></div>
           <div class="demo-card__label type-label">sample</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Platform View Swift</h2>
@@ -162,7 +162,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="provider shopper tag:intermediate intermediate tag:sample sample tag:provider provider platform:ios ios platform:android android platform:web web widget:Provider widget:MultiProvider widget:ChangeNotifier package:provider type:sample">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="provider_shopper.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/provider_shopper1.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/provider_shopper1_thumb.png');"></div>
           <div class="demo-card__label type-label">sample</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Provider Shopper</h2>
@@ -172,7 +172,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="charts tag:demo demo tag:charts charts platform:ios ios platform:android android platform:web web type:demo">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="charts.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/charts1.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/charts1_thumb.png');"></div>
           <div class="demo-card__label type-label">demo</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Charts</h2>
@@ -183,7 +183,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="filipino cuisine tag:demo demo tag:flutter create flutter create platform:web web type:demo">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="filipino_cuisine.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/filipino_cuisine1.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/filipino_cuisine1_thumb.png');"></div>
           <div class="demo-card__label type-label">demo</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Filipino Cuisine</h2>
@@ -194,7 +194,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="github dataviz tag:demo demo tag:data data tag:visualization visualization platform:web web type:demo">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="git_hub_dataviz.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/github_dataviz1.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/github_dataviz1_thumb.png');"></div>
           <div class="demo-card__label type-label">demo</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">GitHub Dataviz</h2>
@@ -205,7 +205,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="particle background tag:demo demo tag:animation animation platform:web web type:demo">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="particle_background.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/particle_background1.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/particle_background1_thumb.png');"></div>
           <div class="demo-card__label type-label">demo</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Particle Background</h2>
@@ -216,7 +216,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="slide puzzle tag:demo demo tag:game game platform:web web type:demo">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="slide_puzzle.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/slide_puzzle1.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/slide_puzzle1_thumb.png');"></div>
           <div class="demo-card__label type-label">demo</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Slide Puzzle</h2>
@@ -227,7 +227,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="timeflow tag:demo demo tag:animation animation platform:web web type:demo">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="timeflow.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/timeflow1.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/timeflow1_thumb.png');"></div>
           <div class="demo-card__label type-label">demo</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Timeflow</h2>
@@ -237,7 +237,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="vision challenge tag:demo demo tag:game game platform:web web type:demo">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="vision_challenge.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/vision_challenge1.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/vision_challenge1_thumb.png');"></div>
           <div class="demo-card__label type-label">demo</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Vision Challenge</h2>
@@ -248,7 +248,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="animate a page route transition tag:cookbook cookbook tag:animation animation type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="animate_a_page_route_transition.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/page-route-animation.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/page-route-animation_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Animate a page route transition</h2>
@@ -258,7 +258,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="animate a widget using a physics simulation tag:cookbook cookbook tag:animation animation type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="animate_a_widget_using_a_physics_simulation.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/physics-simulation.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/physics-simulation_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Animate a widget using a physics simulation</h2>
@@ -268,7 +268,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="animate the properties of a container tag:cookbook cookbook tag:animation animation type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="animate_the_properties_of_a_container.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/animated-container.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/animated-container_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Animate the properties of a container</h2>
@@ -279,7 +279,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="fade a widget in and out tag:cookbook cookbook tag:animation animation type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="fade_a_widget_in_and_out.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/opacity-animation.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/opacity-animation_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Fade a widget in and out</h2>
@@ -290,7 +290,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="add a drawer to a screen tag:cookbook cookbook tag:design design type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="add_a_drawer_to_a_screen.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/drawer.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/drawer_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Add a Drawer to a screen</h2>
@@ -301,7 +301,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="display a snackbar tag:cookbook cookbook tag:design design type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="display_a_snackbar.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/snackbars.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/snackbars_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Display a snackbar</h2>
@@ -311,7 +311,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="export fonts from a package tag:cookbook cookbook tag:design design type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="export_fonts_from_a_package.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/package-fonts.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/package-fonts_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Export fonts from a package</h2>
@@ -322,7 +322,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="update the ui based on orientation tag:cookbook cookbook tag:design design type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="update_the_u_i_based_on_orientation.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/orientation.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/orientation_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Update the UI based on orientation</h2>
@@ -333,7 +333,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="use a custom font tag:cookbook cookbook tag:design design type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="use_a_custom_font.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/fonts.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/fonts_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Use a custom font</h2>
@@ -344,7 +344,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="use themes to share colors and font styles tag:cookbook cookbook tag:design design type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="use_themes_to_share_colors_and_font_styles.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/themes.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/themes_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Use themes to share colors and font styles</h2>
@@ -355,7 +355,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="work with tabs tag:cookbook cookbook tag:design design type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="work_with_tabs.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/tabs.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/tabs_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Work with tabs</h2>
@@ -366,7 +366,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="build a form with validation tag:cookbook cookbook tag:forms forms type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="build_a_form_with_validation.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/validation.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/validation_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Build a form with validation</h2>
@@ -376,7 +376,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="create and style a text field tag:cookbook cookbook tag:forms forms type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="create_and_style_a_text_field.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/text-input.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/text-input_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Create and style a text field</h2>
@@ -387,7 +387,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="focus and text fields tag:cookbook cookbook tag:forms forms type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="focus_and_text_fields.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/focus.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/focus_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Focus and text fields</h2>
@@ -398,7 +398,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="handle changes to a text field tag:cookbook cookbook tag:forms forms type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="handle_changes_to_a_text_field.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/text-field-changes.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/text-field-changes_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Handle changes to a text field</h2>
@@ -408,7 +408,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="retrieve the value of a text field tag:cookbook cookbook tag:forms forms type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="retrieve_the_value_of_a_text_field.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/retrieve-input.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/retrieve-input_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Retrieve the value of a text field</h2>
@@ -419,7 +419,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="add material touch ripples tag:cookbook cookbook tag:gestures gestures type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="add_material_touch_ripples.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/ripples.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/ripples_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Add Material touch ripples</h2>
@@ -430,7 +430,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="handle taps tag:cookbook cookbook tag:gestures gestures type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="handle_taps.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/handling-taps.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/handling-taps_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Handle taps</h2>
@@ -441,7 +441,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="implement swipe to dismiss tag:cookbook cookbook tag:gestures gestures type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="implement_swipe_to_dismiss.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/dismissible.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/dismissible_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Implement swipe to dismiss</h2>
@@ -452,7 +452,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="display images from the internet tag:cookbook cookbook tag:images images type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="display_images_from_the_internet.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/network-image.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/network-image_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Display images from the internet</h2>
@@ -463,7 +463,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="fade in images with a placeholder tag:cookbook cookbook tag:images images type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="fade_in_images_with_a_placeholder.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/fading-in-images.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/fading-in-images_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Fade in images with a placeholder</h2>
@@ -474,7 +474,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="work with cached images tag:cookbook cookbook tag:images images type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="work_with_cached_images.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/cached-images.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/cached-images_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Work with cached images</h2>
@@ -484,7 +484,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="create a grid list tag:cookbook cookbook tag:lists lists type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="create_a_grid_list.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/grid-lists.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/grid-lists_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Create a grid list</h2>
@@ -494,7 +494,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="create a horizontal list tag:cookbook cookbook tag:lists lists type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="create_a_horizontal_list.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/horizontal-list.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/horizontal-list_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Create a horizontal list</h2>
@@ -505,7 +505,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="create lists with different types of items tag:cookbook cookbook tag:lists lists type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="create_lists_with_different_types_of_items.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/mixed-list.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/mixed-list_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Create lists with different types of items</h2>
@@ -515,7 +515,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="place a floating app bar above a list tag:cookbook cookbook tag:lists lists type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="place_a_floating_app_bar_above_a_list.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/floating-app-bar.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/floating-app-bar_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Place a floating app bar above a list</h2>
@@ -526,7 +526,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="use lists tag:cookbook cookbook tag:lists lists type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="use_lists.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/basic-list.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/basic-list_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Use lists</h2>
@@ -536,7 +536,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="work with long lists tag:cookbook cookbook tag:lists lists type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="work_with_long_lists.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/long-lists.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/long-lists_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Work with long lists</h2>
@@ -547,7 +547,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="report errors to a service tag:cookbook cookbook tag:maintenance maintenance type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="report_errors_to_a_service.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/error-reporting.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/error-reporting_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Report errors to a service</h2>
@@ -558,7 +558,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="animate a widget across screens tag:cookbook cookbook tag:navigation navigation type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="animate_a_widget_across_screens.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/hero-animations.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/hero-animations_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Animate a widget across screens</h2>
@@ -568,7 +568,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="navigate to a new screen and back tag:cookbook cookbook tag:navigation navigation type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="navigate_to_a_new_screen_and_back.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/navigation-basics.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/navigation-basics_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Navigate to a new screen and back</h2>
@@ -578,7 +578,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="navigate with named routes tag:cookbook cookbook tag:navigation navigation type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="navigate_with_named_routes.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/named-routes.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/named-routes_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Navigate with named routes</h2>
@@ -589,7 +589,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="pass arguments to a named route tag:cookbook cookbook tag:navigation navigation type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="pass_arguments_to_a_named_route.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/navigate-with-arguments.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/navigate-with-arguments_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Pass arguments to a named route</h2>
@@ -600,7 +600,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="return data from a screen tag:cookbook cookbook tag:navigation navigation type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="return_data_from_a_screen.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/returning-data.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/returning-data_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Return data from a screen</h2>
@@ -611,7 +611,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="send data to a new screen tag:cookbook cookbook tag:navigation navigation type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="send_data_to_a_new_screen.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/passing-data.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/passing-data_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Send data to a new screen</h2>
@@ -622,7 +622,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="fetch data from the internet tag:cookbook cookbook tag:networking networking type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="fetch_data_from_the_internet.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/fetch-data.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/fetch-data_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Fetch data from the internet</h2>
@@ -633,7 +633,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="make authenticated requests tag:cookbook cookbook tag:networking networking type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="make_authenticated_requests.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/authenticated-requests.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/authenticated-requests_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Make authenticated requests</h2>
@@ -644,7 +644,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="parse json in the background tag:cookbook cookbook tag:networking networking type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="parse_j_s_o_n_in_the_background.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/background-parsing.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/background-parsing_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Parse JSON in the background</h2>
@@ -655,7 +655,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="send data to the internet tag:cookbook cookbook tag:networking networking type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="send_data_to_the_internet.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/send-data.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/send-data_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Send data to the internet</h2>
@@ -666,7 +666,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="work with websockets tag:cookbook cookbook tag:networking networking type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="work_with_web_sockets.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/web-sockets.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/web-sockets_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Work with WebSockets</h2>
@@ -677,7 +677,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="persist data with sqlite tag:cookbook cookbook tag:persistence persistence type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="persist_data_with_s_q_lite.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/sqlite.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/sqlite_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Persist data with SQLite</h2>
@@ -687,7 +687,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="read and write files tag:cookbook cookbook tag:persistence persistence type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="read_and_write_files.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/reading-writing-files.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/reading-writing-files_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Read and write files</h2>
@@ -698,7 +698,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="store key-value data on disk tag:cookbook cookbook tag:persistence persistence type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="store_key-value_data_on_disk.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/key-value.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/key-value_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Store key-value data on disk</h2>
@@ -709,7 +709,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="play and pause a video tag:cookbook cookbook tag:plugins plugins type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="play_and_pause_a_video.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/play-video.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/play-video_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Play and pause a video</h2>
@@ -720,7 +720,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="take a picture using the camera tag:cookbook cookbook tag:plugins plugins type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="take_a_picture_using_the_camera.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/picture-using-camera.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/picture-using-camera_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Take a picture using the camera</h2>
@@ -731,7 +731,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="an introduction to integration testing tag:cookbook cookbook tag:integration integration type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="an_introduction_to_integration_testing.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/introduction.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/introduction_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">An introduction to integration testing</h2>
@@ -741,7 +741,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="handle scrolling tag:cookbook cookbook tag:integration integration type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="handle_scrolling.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/scrolling.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/scrolling_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Handle scrolling</h2>
@@ -752,7 +752,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="performance profiling tag:cookbook cookbook tag:integration integration type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="performance_profiling.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/profiling.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/profiling_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Performance profiling</h2>
@@ -762,7 +762,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="an introduction to unit testing tag:cookbook cookbook tag:unit unit type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="an_introduction_to_unit_testing.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/introduction.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/introduction_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">An introduction to unit testing</h2>
@@ -772,7 +772,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="mock dependencies using mockito tag:cookbook cookbook tag:unit unit type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="mock_dependencies_using_mockito.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/mocking.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/mocking_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Mock dependencies using Mockito</h2>
@@ -782,7 +782,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="an introduction to widget testing tag:cookbook cookbook tag:widget widget type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="an_introduction_to_widget_testing.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/introduction.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/introduction_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">An introduction to widget testing</h2>
@@ -793,7 +793,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="find widgets tag:cookbook cookbook tag:widget widget type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="find_widgets.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/finders.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/finders_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Find widgets</h2>
@@ -804,7 +804,7 @@
       </div>
       <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="tap, drag, and enter text tag:cookbook cookbook tag:widget widget type:cookbook">
         <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="tap_drag_and_enter_text.html">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/tap-drag.png');"></div>
+          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/tap-drag_thumb.png');"></div>
           <div class="demo-card__label type-label">cookbook</div>
           <div class="demo-card__primary">
             <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Tap, drag, and enter text</h2>

packages/samples_index/src/samples.yaml

@@ -401,7 +401,7 @@ samples:
     screenshots:
       - url: images/timeflow1.png
         alt: Timeflow screenshot
-    source: github.com/Fabian-Stein/timeflow
+    source: https://github.com/Fabian-Stein/timeflow
     description: >
       A gentle animation that provides a calming experience to stressed developers.
     difficulty: advanced

timeflow.html

@@ -31,7 +31,7 @@
       <p>By Fabian Stein</p>
       <div class="toolbar">
         <div class="buttons">
-          <button class="mdc-button mdc-button--outlined" onclick="window.location.href = 'web/timeflow';"><span class="mdc-button__ripple"></span> Launch App</button><button class="mdc-button mdc-button--outlined" onclick="window.location.href = 'github.com/Fabian-Stein/timeflow';">
+          <button class="mdc-button mdc-button--outlined" onclick="window.location.href = 'web/timeflow';"><span class="mdc-button__ripple"></span> Launch App</button><button class="mdc-button mdc-button--outlined" onclick="window.location.href = 'https://github.com/Fabian-Stein/timeflow';">
       <div class="mdc-button__ripple"></div>
       <i class="material-icons mdc-button__icon" aria-hidden="true">code</i>
       <span class="mdc-button__label">Source Code</span>