updated optimize script

.github/workflows/deploy-preview.yml

@@ -47,6 +47,9 @@ jobs:
       - name: Build the website
         run: npm run build
 
+      - name: Optimize static content
+        run: npm run optimize
+
       - name: Creating symlinks to old version
         run: |
           ln -s ../nightwatchjs.org out/v17

.github/workflows/deploy.yml

@@ -44,12 +44,12 @@ jobs:
       - name: Install dependencies
         run: npm install
 
-      - name: Prebuild #required ensure api pages are generated before the ejs files are processed
-        run: npm run prebuild
-
       - name: Build the website
         run: npm run build
 
+      - name: Optimize static content
+        run: npm run optimize
+
       - name: Creating symlinks to old version
         run: |
           ln -s ../nightwatchjs.org out/v17

build/optimize.js

@@ -0,0 +1,54 @@
+import {generate} from 'critical';
+import {minify} from 'html-minifier';
+import {readFileSync, writeFileSync} from 'fs';
+import path from 'path';
+
+// Inline critical CSS
+generate({
+  inline: true,
+  base: 'out/',
+  src: 'index.html',
+  target: {
+    html: 'index.html',
+    uncritical: 'css/landing/style.css'
+  },
+  dimensions: [
+    {
+      height: 200,
+      width: 500
+    },
+    {
+      height: 900,
+      width: 1024
+    },
+    {
+      height: 900,
+      width: 1400
+    }
+  ],
+  // ignore CSS rules
+  ignoreInlinedStyles: true
+}).then(({css, html, uncritical}) => {
+  console.log('Critical CSS generated', css.length);
+  console.log('Uncritical CSS generated', uncritical.length);
+}).catch(err => {
+  console.error('Critical CSS generation failed', err);
+}).then(() => {
+  // Minify HTML
+  const htmlPath = path.resolve('out/index.html');
+  const htmlContent = readFileSync(htmlPath, 'utf8');
+  const minifiedHTMLContent = minify(htmlContent, {
+    collapseWhitespace: true,
+    collapseInlineTagWhitespace: true,
+    conservativeCollapse: true,
+    minifyCSS: true,
+    minifyJS: true,
+    removeComments: true,
+    useShortDoctype: true,
+    html5: true
+  });
+
+  writeFileSync(htmlPath, minifiedHTMLContent, 'utf8');
+  console.log('Wrote minified HTML to', htmlPath, minifiedHTMLContent.length);
+});
+

package.json

@@ -8,7 +8,8 @@
     "serve": "postdoc preview",
     "clone:docs": "rm -rf nightwatch-docs/ && git clone https://github.com/nightwatchjs/nightwatch-docs.git",
     "clone:nightwatch": "rm -rf nightwatch/ && git clone https://github.com/nightwatchjs/nightwatch.git",
-    "build": "postdoc build && node build/optimize.mjs",
+    "build": "postdoc build",
+    "optimize": "node build/optimize.js",
     "netlify": "npm run clone:docs && npm run clone:nightwatch && npm run build",
     "partytown": "partytown copylib public/~partytown",
     "eslint": "eslint src test --quiet"