feat!: switch to preact for templates

.github/workflows/build-example.yml

@@ -22,5 +22,5 @@ jobs:
             ${{ runner.os }}-
       - name: Build site
         run: |
-                npm install
-                npm run build
+          npm install
+          npm run build

.github/workflows/deploy.yml

@@ -25,8 +25,8 @@ jobs:
             ${{ runner.os }}-
       - name: Build site
         run: |
-                npm install
-                npm run build
+          npm install
+          npm run build
       - name: Deploy to GitHub Pages
         uses: peaceiris/actions-gh-pages@v3
         with:

.github/workflows/release-please.yml

@@ -13,20 +13,16 @@ jobs:
           token: ${{ secrets.GITHUB_TOKEN }}
           release-type: node
           package-name: test-release-please
-      # The logic below handles the npm publication:
       - uses: actions/checkout@v2
-        # these if statements ensure that a publication only occurs when
-        # a new release is created:
         if: ${{ steps.release.outputs.release_created }}
       - uses: actions/setup-node@v1
         with:
           node-version: 14
           registry-url: 'https://registry.npmjs.org'
         if: ${{ steps.release.outputs.release_created }}
-      # if you are using Yarn, substitute the command below with `yarn install --frozen-lockfile`
       - run: npm ci
         if: ${{ steps.release.outputs.release_created }}
       - run: npm publish
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
-        if: ${{ steps.release.outputs.release_created }}
+        if: ${{ steps.release.outputs.release_created }}

README.md

@@ -20,7 +20,7 @@ npx create-amagaki
 
 ## Features
 
-- Reusable partial HTML templates (Nunjucks).
+- Reusable page modules in Preact (`TSX`).
 - Responsive media elements using `<degu-image>` and `<degu-video>`.
 - Per-partial CSS splitting.
 - TypeScript compilation with tree-shaking for minimal payloads.
@@ -52,10 +52,9 @@ matched to approach page building by assembling reusable modules.
 1. Create partials by adding files in the following locations:
 
 - CSS: `/src/partials/{partial}/{partial}.sass`
-- TypeScript: `/src/partials/{partial}/{partial}.ts`
-- Nunjucks: `/src/partials/{partials}/{partial}.njk`
+- Preact: `/src/partials/{partial}/{partial}.tsx`
 
-2. Create pages by mixing and matching partials:
+1. Create pages by mixing and matching partials:
 
 - Document: `/content/pages/{page}.yaml`
 

amagaki.ts

@@ -9,10 +9,16 @@ import {
 import {DeguPlugin} from './plugins/degu';
 import {PageBuilder} from '@amagaki/amagaki-plugin-page-builder';
 import {PlaceholderPlugin} from './plugins/placeholder';
+import {PreactEnginePlugin} from '@amagaki/amagaki-engine-preact';
 
 export default (pod: Pod) => {
+  PreactEnginePlugin.register(pod);
   DeguPlugin.register(pod);
   PageBuilder.register(pod, {
+    inspector: {
+      enabled: pod.env.name !== 'prod',
+    },
+    beautifyContainer: false,
     head: {
       siteName: 'Starter',
       scripts: [pod.staticFile('/dist/js/main.min.js')],
@@ -23,9 +29,9 @@ export default (pod: Pod) => {
       ],
     },
     partialPaths: {
-      css: '/dist/css/${partial.partial}/${partial.partial}.css',
-      js: '/dist/js/partials/${partial.partial}/${partial.partial}.js',
-      view: '/src/partials/${partial.partial}/${partial.partial}.njk',
+      css: ['/dist/css/${partial.partial}/${partial.partial}.css'],
+      js: ['/dist/js/partials/${partial.partial}/${partial.partial}.js'],
+      view: ['/src/partials/${partial.partial}/${partial.partial}.tsx'],
     },
   });
 

content/pages/about.yaml

@@ -5,11 +5,11 @@ order: 1
 
 partials:
 
-- partial: spacer
+- partial: Spacer
   options:
   - large
 
-- partial: hero
+- partial: Hero
   title: Culpa sunt ad labore labore
   body: Consequat fugiat Lorem fugiat consectetur consectetur. Ut culpa et sunt nulla et dolore anim do sit consequat et. Est commodo exercitation irure do irure tempor eiusmod mollit. Amet sunt adipisicing et fugiat Lorem incididunt nostrud culpa. Fugiat consectetur consectetur voluptate dolor culpa commodo ea do ullamco tempo.
   buttons:
@@ -21,72 +21,72 @@ partials:
     url: '#'
     options: ['low-emphasis']
 
-- partial: spacer
+- partial: Spacer
   options:
   - medium
 
-- partial: simple-intro
+- partial: SimpleIntro
   title: Laboris commodo aliquip velit ullamco
 
-- partial: spacer
+- partial: Spacer
   options:
   - large
 
-- partial: columns-50x50
+- partial: Columns50x50
   primary:
     eyebrow: Duis laborum dolor amet excepteur
     title: Magna do magna occaecat irure.
     body: Esse in dolor anim excepteur incididunt laborum pariatur consequat. Occaecat officia elit nisi Lorem ex ex mollit aliqua ipsum fugiat quis amet sit. Mollit dolore cillum ea commodo ullamco cillum minim nisi et reprehenderit consectetur aute fugiat.
   secondary:
-    asset:
-      url: /static/placeholder/1x1.svg
+    assets:
+    - url: /static/placeholder/1x1.svg
 
-- partial: spacer
+- partial: Spacer
   options:
   - large
 
-- partial: promo-banner
+- partial: PromoBanner
   assets:
   - url: /static/placeholder/4x3.svg?bgColor=F3492F
   body: Aute amet voluptate voluptate proident ullamco. Pariatur cupidatat aute officia ea exercitation reprehenderit.
   buttons:
   - url: '#'
     label: Learn more
 
-- partial: spacer
+- partial: Spacer
   options:
   - large
 
-- partial: simple-intro
+- partial: SimpleIntro
   title: Adipisicing culpa tempor deserunt
 
-- partial: spacer
+- partial: Spacer
   options:
   - large
 
-- partial: columns-50x50
+- partial: Columns50x50
   primary:
     eyebrow: Eiusmod amet ea culpa
     title: Ex id reprehenderit in ullamco in nisi.
     body: Lorem incididunt anim dolore nulla enim in ea. Dolor id irure dolor adipisicing in esse enim labore occaecat proident reprehenderit. Sint enim nostrud esse anim id sint minim cupidatat.
   secondary:
-    asset:
-      url: /static/placeholder/1x1.svg
+    assets:
+    - url: /static/placeholder/1x1.svg
 
-- partial: spacer
+- partial: Spacer
   options:
   - large
 
-- partial: columns-50x50
+- partial: Columns50x50
   options: ['reversed']
   primary:
     eyebrow: Eu amet mollit consectetur
     title: Ad eiusmod do consequat amet quis.
     body: Anim anim reprehenderit adipisicing elit non sit amet dolore reprehenderit proident aliquip. Lorem ad labore eu aute irure minim sunt officia ullamco anim culpa qui aliquip. Eu officia incididunt laborum est mollit anim velit. Sit incididunt ex est nostrud esse quis ullamco elit exercitation reprehenderit enim.
   secondary:
-    asset:
-      url: /static/placeholder/1x1.svg
+    assets:
+    - url: /static/placeholder/1x1.svg
 
-- partial: spacer
+- partial: Spacer
   options:
   - large

content/pages/index.yaml

@@ -5,11 +5,11 @@ order: 0
 
 partials:
 
-- partial: spacer
+- partial: Spacer
   options:
   - large
 
-- partial: hero
+- partial: Hero
   title: Lorem ipsum dolor
   body: Eu mollit ullamco nisi eu ipsum aliqua occaecat excepteur ullamco magna consectetur. Adipisicing ipsum laborum sunt eu qui laborum pariatur aliqua duis dolore id.
   buttons:
@@ -25,33 +25,33 @@ partials:
     width: 16
     height: 9
 
-- partial: spacer
+- partial: Spacer
   options:
   - medium
 
-- partial: simple-intro
+- partial: SimpleIntro
   title: Laboris commodo aliquip velit ullamco
 
-- partial: spacer
+- partial: Spacer
   options:
   - large
 
-- partial: columns-50x50
+- partial: Columns50x50
   primary:
     eyebrow: Duis laborum dolor amet excepteur
     title: Magna do magna occaecat irure.
     body: Esse in dolor anim excepteur incididunt laborum pariatur consequat. Occaecat officia elit nisi Lorem ex ex mollit aliqua ipsum fugiat quis amet sit. Mollit dolore cillum ea commodo ullamco cillum minim nisi et reprehenderit consectetur aute fugiat.
   secondary:
-    asset:
-      url: /static/placeholder/1x1.svg
+    assets:
+    - url: /static/placeholder/1x1.svg
       width: 1
       height: 1
 
-- partial: spacer
+- partial: Spacer
   options:
   - large
 
-- partial: promo-banner
+- partial: PromoBanner
   assets:
   - url: /static/placeholder/4x3.svg?bgColor=F3492F
     width: 4
@@ -61,33 +61,33 @@ partials:
   - url: '#'
     label: Learn more
 
-- partial: spacer
+- partial: Spacer
   options:
   - large
 
-- partial: simple-intro
+- partial: SimpleIntro
   title: Adipisicing culpa tempor deserunt
 
-- partial: spacer
+- partial: Spacer
   options:
   - large
 
-- partial: columns-50x50
+- partial: Columns50x50
   primary:
     eyebrow: Eiusmod amet ea culpa
     title: Ex id reprehenderit in ullamco in nisi.
     body: Lorem incididunt anim dolore nulla enim in ea. Dolor id irure dolor adipisicing in esse enim labore occaecat proident reprehenderit. Sint enim nostrud esse anim id sint minim cupidatat.
   secondary:
-    asset:
-      url: /static/placeholder/1x1.svg
+    assets:
+    - url: /static/placeholder/1x1.svg
       width: 1
       height: 1
 
-- partial: spacer
+- partial: Spacer
   options:
   - large
 
-- partial: columns-50x50
+- partial: Columns50x50
   options: ['reversed']
   primary:
     eyebrow: Eu amet mollit consectetur
@@ -98,11 +98,11 @@ partials:
       url: '#'
       options: ['medium-emphasis']
   secondary:
-    asset:
-      url: /static/placeholder/1x1.svg
+    assets:
+    - url: /static/placeholder/1x1.svg
       width: 1
       height: 1
 
-- partial: spacer
+- partial: Spacer
   options:
   - large

content/partials/footer.yaml

@@ -1,4 +1,4 @@
-partial: footer
+partial: Footer
 logo:
   title: Amagaki
 nav: !pod.docs ['/content/pages/**', {sort: 'order'}]

content/partials/header.yaml

@@ -1,4 +1,4 @@
-partial: header
+partial: Header
 logo:
   doc: !pod.doc /content/pages/index.yaml
   image:

gulpfile.ts

@@ -7,11 +7,12 @@ import sass from 'gulp-dart-sass';
 
 const ENTRIES = {
   js: {
-    tsc_out: ['./dist/js/main.js'],
+    tsc_out: ['./dist/tsc/main.js'],
     out: './dist/js/main.min.js',
-    watch: ['./src/ts/**/*.ts'],
+    watch: ['./src/**/*.ts', './src/**/*.tsx'],
   },
   sass: {
+    includePaths: ['./node_modules/', './src/sass/', './src/'],
     src: ['./src/partials/**/*.sass', './src/sass/*.sass'],
     out: './dist/css/',
     watch: ['./src/**/*.sass'],
@@ -38,6 +39,11 @@ const runEsBuild = async prod => {
           bundle: true,
           platform: 'browser',
           minify: prod,
+          jsxFactory: 'preact.h',
+          jsxFragment: 'preact.Fragment',
+          define: {
+            ...(prod && {'process.env.NODE_ENV': "'production'"}),
+          },
         });
         resolve();
       }
@@ -55,7 +61,7 @@ gulp.task('build:sass', () => {
     .pipe(
       sass({
         outputStyle: 'compressed',
-        includePaths: ['./node_modules/', './src/sass/'],
+        includePaths: ENTRIES.sass.includePaths,
       })
     )
     .on('error', sass.logError)