Rewrite samples to match the Chart.js style

README.md

@@ -12,6 +12,7 @@ Requires [Chart.js](https://github.com/chartjs/Chart.js/releases) **2.6.0** or l
 
 - [Installation](https://chartjs-plugin-deferred.netlify.com/installation)
 - [Options](https://chartjs-plugin-deferred.netlify.com/options)
+- [Samples](https://chartjs-plugin-deferred.netlify.com/samples)
 
 ## Example
 
@@ -43,6 +44,7 @@ The following commands will then be available from the repository root:
     > gulp build --watch    // build and watch for changes
     > gulp lint             // perform code linting
     > gulp docs             // generate GitBook documentation (`dist/docs`)
+    > gulp samples          // prepare samples for release (`dist/samples`)
     > gulp package          // create an archive with dist files and samples
 
 ## License

docs/SUMMARY.md

@@ -1,2 +1,3 @@
 * [Installation](installation.md)
 * [Options](options.md)
+* [Samples](https://chartjs-plugin-deferred.netlify.com/samples)

gulpfile.js

@@ -18,6 +18,7 @@ var pkg = require('./package.json');
 
 var argv = require('yargs')
 	.option('output', {alias: 'o', default: 'dist'})
+	.option('samples-dir', {default: 'samples'})
 	.option('docs-dir', {default: 'docs'})
 	.argv;
 
@@ -79,16 +80,20 @@ gulp.task('docs', function(done) {
 	});
 });
 
-gulp.task('package', function() {
+gulp.task('samples', function() {
+	// since we moved the dist files one folder up (package root), we need to rewrite
+	// samples src="../dist/ to src="../ and then copy them in the /samples directory.
+	var out = path.join(argv.output, argv.samplesDir);
+	return gulp.src('samples/**/*', {base: 'samples'})
+		.pipe(streamify(replace(/src="((?:\.\.\/)+)dist\//g, 'src="$1', {skipBinary: true})))
+		.pipe(gulp.dest(out));
+});
+
+gulp.task('package', ['build', 'samples'], function() {
 	var out = argv.output;
 	var streams = merge(
-		// gather "regular" files landing in the package root
-		gulp.src([out + '*.js', 'LICENSE.md']),
-
-		// dist files in the package are in the root, so we need to rewrite samples
-		// src="../dist/ to src="../ and then copy them in the /samples directory.
-		gulp.src('samples/**/*', {base: '.'})
-			.pipe(streamify(replace('src="../dist/', 'src="../')))
+		gulp.src(path.join(out, argv.samplesDir, '**/*'), {base: out}),
+		gulp.src([path.join(out, '*.js'), 'LICENSE.md'])
 	);
 
 	return streams

samples/index.css

@@ -0,0 +1,152 @@
+body, html {
+	color: #333538;
+	font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
+	line-height: 1.6;
+	padding: 0;
+	margin: 0;
+}
+
+body {
+	max-width: 800px;
+	margin: auto;
+	padding: 16px 32px;
+}
+
+a {
+	color: #f27173;
+	text-decoration: none;
+}
+
+a:hover {
+	color: #e25f5f;
+	text-decoration: underline;
+}
+
+.btn {
+	background-color: #aaa;
+	border-radius: 4px;
+	color: white;
+	font-weight: 600;
+	padding: 0.25rem 0.75rem;
+}
+
+.btn .fa {
+	font-size: 1rem;
+}
+
+.btn:hover {
+	background-color: #888;
+	color: white;
+	text-decoration: none;
+}
+
+.btn-chartjs { background-color: #f27173; }
+.btn-chartjs:hover { background-color: #e25f5f; }
+.btn-docs:hover { background-color: #2793db; }
+.btn-docs { background-color: #36A2EB; }
+.btn-docs:hover { background-color: #2793db; }
+.btn-gh { background-color: #444; }
+.btn-gh:hover { background-color: #333; }
+
+.btn-on {
+	border-style: inset;
+}
+
+#header {
+	background-size: 40px;
+	text-align: center;
+	padding: 32px 0;
+}
+
+#header .title {
+	font-size: 1.5rem;
+	font-weight: 600;
+	white-space: nowrap;
+}
+
+#header:before {
+	background-image: url(logo.svg);
+	background-position: left center;
+	background-repeat: no-repeat;
+	background-size: 40px;
+	content: '';
+	display: inline-block;
+	padding: 20px;
+}
+
+#header .title .main {
+	color: #f27173;
+	display: inline-block;
+	font-size: 1.5rem;
+	font-weight: 600;
+}
+
+#header .title .name:before {
+	content: '/';
+	margin-right: 0.5rem;
+}
+
+#header .caption {
+	font-size: 1.1rem;
+}
+
+#header .links {
+	display: flex;
+	justify-content: center;
+	padding: 8px 0;
+}
+
+#header .links a {
+	font-size: 0.85rem;
+	margin: 0.2rem;
+}
+
+#header .links .fa:before {
+	margin-right: 0.5em;
+}
+
+.samples-category {
+	display: inline-block;
+	margin-bottom: 32px;
+	vertical-align: top;
+	width: 25%;
+}
+
+.samples-category > .title {
+	color: #aaa;
+	font-weight: 300;
+	font-size: 1.5rem;
+}
+
+.samples-category:hover > .title {
+	color: black;
+}
+
+.samples-category > .items {
+	padding: 8px 0;
+}
+
+.samples-entry {
+	padding: 0 0 4px 0;
+}
+
+.samples-entry > .title {
+	font-weight: 700;
+}
+
+@media (max-width: 640px) {
+	#header {padding: 8px 0;}
+	.samples-category { width: 33%; }
+}
+
+@media (max-width: 512px) {
+	#header .caption { font-size: 1.05rem; }
+	#header .title .name { display: none }
+	#header .links a { flex-direction: column; }
+	#header .links .fa { margin: 0 }
+	.samples-category { width: 50%; }
+}
+
+@media (max-width: 384px) {
+	.samples-category { width: 100%; }
+}