feat!: use page builder plugin and move to esbuild (#21)

README.md

@@ -27,9 +27,17 @@ npm run dev
 npm run build
 ```
 
+## Details
+
+`amagaki-starter` uses the
+[`@amagaki/amagaki-plugin-page-builder`](https://github.com/blinkk/amagaki-plugin-page-builder).
+The page builder plugin generates the core markup for each page and manages
+partials. Partials are standalone, isolated modules that can be mixed and
+matched to approach page building by assembling reusable modules.
+
 [github-image]: https://github.com/blinkk/amagaki-starter/workflows/Build%20site/badge.svg
 [github-url]: https://github.com/blinkk/amagaki-starter/actions
 [npm-image]: https://img.shields.io/npm/v/@amagaki/amagaki-starter.svg
 [npm-url]: https://npmjs.org/package/@amagaki/amagaki-starter
 [gts-image]: https://img.shields.io/badge/code%20style-google-blueviolet.svg
-[gts-url]: https://github.com/google/gts
+[gts-url]: https://github.com/google/gts

amagaki.ts

@@ -1,12 +1,21 @@
-import * as placeholderPlugin from './plugins/placeholder';
-
 import {Document, NunjucksPlugin, Pod, StaticFile, Url} from '@amagaki/amagaki';
 
+import {PageBuilder} from '@amagaki/amagaki-plugin-page-builder';
+import {PlaceholderPlugin} from './plugins/placeholder';
+
 export default (pod: Pod) => {
-  pod.configure({
-    meta: {
-      name: 'Amagaki Starter',
+  PageBuilder.register(pod, {
+    head: {
+      siteName: 'Starter',
+      scripts: [pod.staticFile('/dist/js/main.min.js')],
+      stylesheets: [
+        'https://fonts.googleapis.com/css?family=Open+Sans:400,500,600,700|Roboto:400,500,600,700|Material+Icons&display=swap',
+        pod.staticFile('/dist/css/main.css'),
+      ],
     },
+  });
+
+  pod.configure({
     localization: {
       defaultLocale: 'en',
       locales: ['en'],
@@ -21,11 +30,16 @@ export default (pod: Pod) => {
         staticDir: '/dist/js/',
       },
     ],
+    environments: {
+      prod: {},
+    },
   });
 
-  placeholderPlugin.register(pod, {
-    sizes: ['16x9', '1x1', '9x16', '7x3'],
-  });
+  if (pod.env.name !== 'prod') {
+    PlaceholderPlugin.register(pod, {
+      sizes: ['16x9', '1x1', '9x16', '7x3'],
+    });
+  }
 
   const nunjucksPlugin = pod.plugins.get('NunjucksPlugin') as NunjucksPlugin;
   type Urlable = StaticFile | Document | string;

content/pages/_collection.yaml

@@ -1,5 +1,4 @@
 $path: /${doc.collectionPath}/${doc.basename}/
-$view: /views/base.njk
 $localization:
   path: /intl/${doc.locale.id}/${doc.collectionPath}/${doc.basename}/
   locales:

gulpfile.ts

@@ -0,0 +1,84 @@
+import * as esbuild from 'esbuild';
+
+import autoprefixer from 'gulp-autoprefixer';
+import {exec} from 'child_process';
+import gulp from 'gulp';
+import sass from 'gulp-dart-sass';
+
+const ENTRIES = {
+  js: {
+    tsc_out: ['./dist/js/main.js'],
+    out: './dist/js/main.min.js',
+    watch: ['./src/ts/**/*.ts'],
+  },
+  sass: {
+    src: ['./src/sass/**/*.sass'],
+    out: './dist/css/',
+    watch: ['./src/sass/**/*.sass'],
+  },
+};
+
+/**
+ * esBuild does not do type checks and can build with type errors so we first run
+ * `tsc` and generate a JS file. esBuild is then run on the outputted JS file.
+ *
+ * The entry point of tsc compilation is configured in tsconfig `include`.
+ */
+const runEsBuild = async prod => {
+  return new Promise<void>((resolve, reject) => {
+    exec('tsc', async (error, stderr) => {
+      if (stderr) {
+        console.error('Typescript errors');
+        console.error(stderr);
+        reject();
+      } else {
+        await esbuild.build({
+          entryPoints: ENTRIES.js.tsc_out,
+          outfile: ENTRIES.js.out,
+          bundle: true,
+          platform: 'browser',
+          minify: prod,
+        });
+        resolve();
+      }
+    });
+  });
+};
+
+gulp.task('build:js', async () => {
+  await runEsBuild(true);
+});
+
+gulp.task('build:sass', () => {
+  return gulp
+    .src(ENTRIES.sass.src)
+    .pipe(
+      sass({
+        outputStyle: 'compressed',
+        includePaths: ['./node_modules/'],
+      })
+    )
+    .on('error', sass.logError)
+    .pipe(autoprefixer())
+    .pipe(gulp.dest(ENTRIES.sass.out));
+});
+
+gulp.task('watch:sass', () => {
+  return gulp.watch(
+    ENTRIES.sass.watch,
+    {ignoreInitial: false},
+    gulp.series('build:sass')
+  );
+});
+
+gulp.task('watch:js', async cb => {
+  await runEsBuild(false);
+  gulp.watch(ENTRIES.js.watch, async () => {
+    await runEsBuild(false);
+    cb();
+  });
+});
+
+gulp.task('watch', gulp.parallel('watch:js', 'watch:sass'));
+gulp.task('build', gulp.parallel('build:sass', 'build:js'));
+gulp.task('default', gulp.series('watch'));