♿ improving lighthouse score

Mortaro · Mortaro · commit fd714201459c · 2022-04-30T23:10:47.000-03:00
diff --git a/i18n/en-US/components/Documentation.yml b/i18n/en-US/components/Documentation.yml
@@ -75,3 +75,5 @@ topics:
         href: "/how-to-use-google-analytics-with-nullstack"
       - title: "How to use Facebook Pixel"
         href: "/how-to-use-facebook-pixel-with-nullstack"
+      - title: "Nullstack Logo"
+        href: "/nullstack-logo"
diff --git a/package.json b/package.json
@@ -17,13 +17,15 @@
   },
   "dependencies": {
     "@tailwindcss/typography": "^0.4.0",
+    "glob": "^8.0.1",
     "nullsheet": "~0.2.0",
     "nullstack-google-analytics": "^1.0.0",
     "poisonicon": "^0.1.1",
     "postcss-cli": "^8.3.1",
     "prismjs": "^1.22.0",
+    "purgecss-webpack-plugin": "^4.1.3",
     "remarkable": "^2.0.1",
     "remarkable-meta": "^1.0.1",
     "yaml": "^1.10.0"
   }
-}
+}
diff --git a/server.js b/server.js
@@ -16,8 +16,6 @@ worker.preload = [
   '/arrow.webp',
   '/stars.webp',
   '/footer.webp',
-  '/what-is-nullstack',
-  '/documentation',
   '/contributors',
   '/roboto-v20-latin-300.woff2',
   '/roboto-v20-latin-500.woff2',
diff --git a/src/Application.njs b/src/Application.njs
@@ -42,7 +42,7 @@ class Application extends Nullstack {
   renderHiringBanner() {
     return (
       <div class="p-3 md:p-0">
-        <a class="bg-yellow-100 dark:bg-gray-800 py-2 flex justify-center items-center space-x-2 font-semibold flex-col md:flex-row px-6 text-center md:mt-2" href="https://ae.studio/jobs/4484720004/nullstack-developer" target="_blank">
+        <a class="bg-yellow-100 dark:bg-gray-800 py-2 flex justify-center items-center space-x-2 font-semibold flex-col md:flex-row px-6 text-center md:mt-3" href="https://ae.studio/jobs/4484720004/nullstack-developer" target="_blank">
           <span class="text-gray-900 dark:text-white"> AE Studio is hiring Nullstack developers that get shit done! </span>
           <span class="text-pink-800 dark:text-pink-200"> Apply here. </span>
         </a>
diff --git a/src/Footer.njs b/src/Footer.njs
@@ -14,7 +14,7 @@ class Footer extends Translatable {
         title={title}
         target="_blank"
         rel="noopener"
-        class="text-pink-600 hover:text-white inline-block"
+        class="text-pink-600 hover:text-white inline-block h-12 w-12 flex items-center justify-center"
       >
         <Icon size={45} />
       </a>
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,20 @@
+const [server, client] = require('nullstack/webpack.config');
+
+const glob = require('glob');
+const PurgecssPlugin = require('purgecss-webpack-plugin');
+
+function customClient(...args) {
+  const config = client(...args);
+  if (config.mode === 'production') {
+    config.plugins.push(new PurgecssPlugin({
+      paths: glob.sync(`src/**/*`, { nodir: true }),
+      content: ['./**/*.njs'],
+      safelist: ['script', 'body', 'html', 'style'],
+      defaultExtractor: content => content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || [],
+    }));
+  }
+
+  return config;
+}
+
+module.exports = [server, customClient]

Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@ class Footer extends Translatable {`
`14`	`14`	`title={title}`
`15`	`15`	`target="_blank"`
`16`	`16`	`rel="noopener"`
`17`		`- class="text-pink-600 hover:text-white inline-block"`
	`17`	`+ class="text-pink-600 hover:text-white inline-block h-12 w-12 flex items-center justify-center"`
`18`	`18`	`>`
`19`	`19`	`<Icon size={45} />`
`20`	`20`	`</a>`