Add thumbnail images to VSI (#415)

* add thumbnail image generation

improves page load from 41.7 MB to 7.6 MB

* remove filesCreated set - thumbnails for each image are generated.

* set package:image version in pubspec

* Update grind.dart

web/samples_index/.gitignore

@@ -15,3 +15,6 @@ doc/api/
 
 # All HTML files are generated by `grind generate`
 web/*.html
+
+# Any thumbnails should be ignored
+web/images/**/*_thumb.png

web/samples_index/README.md

@@ -9,7 +9,7 @@ We use [grinder](https://pub.dev/packages/grinder) to run the build tasks:
 ```bash
 $ pub get
 $ pub global activate grinder
-$ grind build
+$ grind generate
 ```
 
 This will generate the index into `./web`

web/samples_index/lib/src/data.dart

@@ -7,6 +7,7 @@ library data;
 
 import 'package:json_annotation/json_annotation.dart';
 import 'package:samples_index/src/util.dart' as util;
+import 'package:path/path.dart' as path;
 
 part 'data.g.dart';
 
@@ -103,6 +104,13 @@ class Sample {
 
   Map<String, dynamic> toJson() => _$SampleToJson(this);
 
+  String get thumbnail {
+    var screenshotUrl = screenshots.first.url;
+    var prefix = path.dirname(screenshotUrl);
+    var filename = path.basenameWithoutExtension(screenshotUrl);
+    return path.join(prefix, filename + '_thumb.png');
+  }
+
   String get searchAttributes {
     var buf = StringBuffer();
     buf.write(name.toLowerCase());

web/samples_index/lib/src/templates.dart

@@ -136,7 +136,7 @@ String _indexCards(List<Sample> samples) => samples.map(_indexCard).join();
 String _indexCard(Sample sample) => '''
 <div class="mdc-card demo-card mdc-elevation--z0" search-attrs="${_escapeAttribute(sample.searchAttributes)}">
   <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="${sample.filename}.html">
-    <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="${_backgroundImage(sample.screenshots.first.url)}"></div>
+    <div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="${_backgroundImage(sample.thumbnail)}"></div>
     <div class="demo-card__label type-label">${_escapeElement(sample.type)}</div>
     <div class="demo-card__primary">
       <h2 class="demo-card__title mdc-typography mdc-typography--headline6">${_escapeElement(sample.name)}</h2>

web/samples_index/pubspec.yaml

@@ -24,4 +24,5 @@ dev_dependencies:
   build_runner: ^1.7.0
   build_web_compilers: ^2.7.0
   tuneup: ^0.3.6
+  image: ^2.1.0
 

web/samples_index/tool/grind.dart

@@ -10,6 +10,7 @@ import 'package:path/path.dart' as path;
 import 'package:samples_index/samples_index.dart';
 import 'package:samples_index/src/templates.dart' as templates;
 import 'package:samples_index/cookbook.dart';
+import 'package:image/image.dart' as image;
 
 void main(args) => grind(args);
 
@@ -22,7 +23,7 @@ void analyze() {
 }
 
 @Task('deploy')
-@Depends(analyze, testCli, generate, buildRelease)
+@Depends(analyze, testCli, generate, createThumbnails, buildRelease)
 void deploy() {
   print('All tasks completed. To deploy to Firebase, run:');
   print('');
@@ -82,6 +83,36 @@ Future scrapeCookbook() async {
   }
 }
 
+@Task('creates thumbnail images in web/images')
+Future createThumbnails() async {
+  await _createThumbnails(Directory('web/images'));
+  await _createThumbnails(Directory('web/images/cookbook'));
+}
+
+// Creates a thumbnail image for each png file
+Future _createThumbnails(Directory directory) async {
+  var files = await directory.list().toList();
+  var filesToWrite = <Future>{};
+
+  for (var entity in files) {
+    var extension = path.extension(entity.path);
+    var filename = path.basenameWithoutExtension(entity.path);
+    if (extension != '.png' || entity is! File || filename.endsWith('_thumb')) {
+      continue;
+    }
+
+    var file = entity as File;
+    var pathPrefix = path.dirname(file.path);
+    var thumbnailFile = File(path.join(pathPrefix, filename + '_thumb.png'));
+
+    var img = image.decodeImage(await file.readAsBytes());
+    var resized = image.copyResize(img, width: 640);
+    filesToWrite.add(thumbnailFile.writeAsBytes(image.encodePng(resized)));
+  }
+
+  await Future.wait(filesToWrite);
+}
+
 @Task('remove generated HTML files')
 Future clean() async {
   var tasks = <Future>[];