Optimize PageSpeed.

Author: aalhour

.githooks/pre-commit

@@ -0,0 +1,44 @@
+#!/bin/bash
+# Digital Bazaar — Pre-commit Hook
+# Ensures assets are optimized and site builds before committing
+
+set -e
+
+echo "🔍 Running pre-commit checks..."
+
+# Colors
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[0;33m'
+NC='\033[0m' # No Color
+
+# Check if image source files changed
+IMAGES_CHANGED=$(git diff --cached --name-only | grep -E "assets/img/digital_bazaar.*\.(jpg|png)$" || true)
+
+if [ -n "$IMAGES_CHANGED" ]; then
+  echo -e "${YELLOW}📷 Image source files changed, optimizing...${NC}"
+  make images
+  make images-webp
+  # Stage the generated files
+  git add assets/img/*.webp assets/img/logo-*.jpg assets/img/favicon-*.png assets/img/apple-touch-icon.png 2>/dev/null || true
+fi
+
+# Check if any content/style files changed
+CONTENT_CHANGED=$(git diff --cached --name-only | grep -E "\.(html|md|yml|scss|css)$" || true)
+
+if [ -n "$CONTENT_CHANGED" ] || [ -n "$IMAGES_CHANGED" ]; then
+  echo -e "${YELLOW}🔨 Building for production...${NC}"
+  make prod-build
+  
+  if [ $? -eq 0 ]; then
+    echo -e "${GREEN}✅ Production build successful${NC}"
+  else
+    echo -e "${RED}❌ Production build failed${NC}"
+    exit 1
+  fi
+else
+  echo -e "${GREEN}✅ No content changes, skipping build${NC}"
+fi
+
+echo -e "${GREEN}✅ Pre-commit checks passed${NC}"
+

Makefile

@@ -1,7 +1,7 @@
 # Digital Bazaar — Makefile
 # Simplifies common development tasks
 
-.PHONY: help install update build serve clean fonts prod-build serve-drafts images images-webp
+.PHONY: help install update build serve clean fonts prod-build serve-drafts images images-webp setup-hooks
 
 # Homebrew Ruby paths (macOS)
 RUBY_BIN := /opt/homebrew/opt/ruby/bin
@@ -63,6 +63,11 @@ images-webp: ## Convert images to WebP (requires: brew install webp)
 	@cd assets/img && \
 	cwebp -q 80 logo-128.jpg -o logo-128.webp 2>/dev/null && \
 	cwebp -q 80 logo-256.jpg -o logo-256.webp 2>/dev/null && \
-	cwebp -q 80 logo-512.jpg -o logo-512.webp 2>/dev/null && \
+	cwebp -q 90 logo-512.jpg -o logo-512-hq.webp 2>/dev/null && \
 	echo "✓ WebP images created:" && \
 	ls -lh logo-*.webp
+
+setup-hooks: ## Enable git pre-commit hooks
+	@echo "Setting up git hooks..."
+	@git config core.hooksPath .githooks
+	@echo "✓ Git hooks enabled. Pre-commit will run: images, images-webp, prod-build"

README.md

@@ -23,6 +23,7 @@
 git clone https://github.com/DigitalBazaarHub/digitalbazaar.github.io.git
 cd digitalbazaar.github.io
 make install
+make setup-hooks   # Enable pre-commit checks
 make serve
 ```
 
@@ -40,6 +41,7 @@ Visit [http://localhost:4000](http://localhost:4000)
 | `make fonts` | Download self-hosted fonts |
 | `make images` | Optimize images (PNG/JPG) |
 | `make images-webp` | Convert to WebP (requires `webp`) |
+| `make setup-hooks` | Enable git pre-commit hooks |
 
 ## Workflows
 

_layouts/default.html

@@ -43,18 +43,8 @@
     <link rel="preload" href="{{ '/assets/img/logo-512-hq.webp' | relative_url }}" as="image" type="image/webp" fetchpriority="high">
   {%- endif -%}
 
-  <!-- Critical inline CSS (prevents FOUC) -->
-  <style>
-    :root{--sand:#F4E6C4;--terracotta:#B34E36;--night:#152029;--ink:#21313B}
-    html,body{margin:0;padding:0;color:var(--ink);background:linear-gradient(180deg,#FFFDF6 0%,var(--sand) 100%);min-height:100vh}
-    html[dir="rtl"],html[dir="rtl"] body{font-family:'Tajawal',sans-serif;line-height:1.8}
-    html[dir="ltr"],html[dir="ltr"] body{font-family:'DM Sans',sans-serif;line-height:1.6}
-    .wrap{max-width:940px;margin:0 auto;padding:32px 20px 64px}
-  </style>
-  
-  <!-- Full styles (async load to avoid render blocking) -->
-  <link rel="preload" href="{{ '/assets/css/styles.css' | relative_url }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
-  <noscript><link rel="stylesheet" href="{{ '/assets/css/styles.css' | relative_url }}"></noscript>
+  <!-- Styles -->
+  <link rel="stylesheet" href="{{ '/assets/css/styles.css' | relative_url }}">
 
   <!-- SEO -->
   {% seo %}