Alex.

• Create ShareNotification.astro component for consistent notifications

- Add shareManager.ts utility for centralized clipboard operations
- Refactor avatar generator and blog share buttons to use shared utilities
- Move notification styles from avatar.css to global.css for site-wide availability
- Fix clipboard API user gesture chain by removing preventDefault
- Update service worker navigateFallbackDenylist regex patterns
- Ensure dark text color in notifications for better contrast
- Update icomoon fonts
- Update back to top icon

• Add global scroll progress bar across all pages

- Implement floating back-to-top button with auto-hide behavior
- Appears after 250px scroll, auto-hides after 3s of inactivity
- Centered horizontally for mobile compatibility (48px) and desktop (56px)
- Smooth scroll animation with hover pause functionality
- Fix theme switcher initialization on first page load
- Add document.readyState check for proper event listener setup
- Manually update localStorage and data-theme attributes
- Remove duplicate event listeners to prevent conflicts
- Extract scroll progress from blog-specific to global utility
- Move from blogInteractions.ts to scrollProgress.ts
- Remove blog-only back-to-top button in favor of floating button
- Add conditional initialization for AvatarGenerator
- Prevent errors on pages without avatar canvas element
- Separate back-to-top logic into dedicated script module
- Create src/scripts/backToTop.ts
- Update knip.json for new file

## Blog Infrastructure
- Migrate blog posts to content collections with glob loader
- Create dynamic route /blog/[...slug].astro for blog post rendering
- Implement accurate reading time estimator based on word count (200 WPM)
- Add reading time display to blog cards and post layouts
- Update blog post paths from src/pages/blog to src/content/blog
- Update all MDX imports to use path aliases (@/)

Files: src/content/config.ts, src/pages/blog/[...slug].astro,
src/pages/blog/index.astro, src/pages/tags/[tag].astro,
src/layouts/BlogLayout.astro, src/lib/blog/utils.ts,
src/components/Post.astro

## SEO Enhancements
- Generate unique Open Graph images per blog post using astro-og-canvas
- Integrate content collections with OG image generation
- Add RSS feed auto-discovery meta tags for better feed detection

Files: src/pages/open-graph/[...route].ts,
src/components/seo/MetaTags.astro

## View Transitions & UX
- Implement Astro ClientRouter for SPA-like page navigation
- Add fade transitions between pages for smooth navigation
- Update all interactive components to support view transitions:
- Blog interactions (BlogLayout)
- Theme switcher (ThemeSwitcher)
- Search functionality (SearchField)
- GitHub contributions (GitHubContributions)
- Avatar generator (AvatarGenerator)
- Add astro:page-load event listeners for proper reinitialization
- Prevent duplicate search box initialization with state tracking

Files: src/layouts/Layout.astro, src/layouts/BlogLayout.astro,
src/components/ThemeSwitcher.astro, src/components/SearchField.astro,
src/components/GitHubContributions.astro,
src/components/AvatarGenerator.astro

## Dark Mode Improvements
- Add smooth CSS transitions for theme switching (0.3s bg, 0.2s colors)
- Implement smart exclusions to prevent animation conflicts
- Add prefers-reduced-motion support for accessibility
- Eliminate jarring theme switch flashes

Files: src/styles/global.css

## Footer Enhancements
- Add build timestamp to footer
- Display formatted build date alongside commit hash
- Capture build time at build-time via new Date().toISOString()

Files: src/data/navigation.ts, src/components/Footer.astro

## Implement Content Security Policy (CSP) headers:
- Add strict CSP directives to prevent XSS attacks
- Configure script-src with necessary inline permissions for Astro
- Restrict image sources to self, data URIs, HTTPS, and blobs
- Allow iframe embedding only from trusted GitHub contributions source
- Allow our service worker to fetch GitHub OpenGraph images from opengraph.githubassets.com
- Add Strict-Transport-Security with 2-year max-age and preload
- Enhance Permissions-Policy to restrict payment API access
- Add worker-src directive for service worker support
- Include connect-src for fetch/XHR restrictions

Files: netlify.toml

## Service Worker Enhancements
Add runtime caching strategy for GitHub OpenGraph images used in project cards:
- Cache GitHub OG images from opengraph.githubassets.com
- Use CacheFirst strategy for optimal performance
- Configure 30-day expiration with 50 image limit
- Enable offline support for project card images
- Reduce bandwidth usage by caching external images
- Eliminate network latency on repeat visits

Files: astro.config.mjs

## Technical Details
### CSP Directives
- default-src 'self' - Restrict all resources to same-origin by default
- script-src 'self' 'unsafe-inline' 'unsafe-eval' - Allow Astro hydration
- style-src 'self' 'unsafe-inline' - Allow inline styles for Astro
- img-src 'self' data: https: blob: - Support various image sources
- font-src 'self' data: - Allow local and data URI fonts
- connect-src 'self' https://jandee.vercel.app - Restrict API calls
- frame-src https://jandee.vercel.app - Only GitHub contributions iframe
- worker-src 'self' blob: - Support service workers and blob workers
- object-src 'none' - Block plugins like Flash
- base-uri 'self' - Prevent base tag hijacking
- form-action 'self' - Restrict form submissions
- frame-ancestors 'none' - Prevent clickjacking
- upgrade-insecure-requests - Force HTTPS for all resources

### Additional Security Headers
- X-Frame-Options: DENY (legacy clickjacking protection)
- X-XSS-Protection: 1; mode=block (legacy XSS protection)
- X-Content-Type-Options: nosniff (prevent MIME sniffing)
- Referrer-Policy: strict-origin-when-cross-origin (privacy)
- Permissions-Policy: Restrict camera, microphone, geolocation, payment
- Strict-Transport-Security: 2-year HSTS with preload eligibility

### Reading Time Algorithm
- Strip MDX frontmatter, imports, JSX, code blocks, and markdown syntax
- Count actual readable words
- Calculate based on 200 words per minute industry standard
- Provide fallback for empty content

### View Transitions Lifecycle
- Initialize on DOMContentLoaded for first page load
- Reinitialize on astro:page-load for client-side navigation
- Prevent duplicate initializations with state tracking
- Maintain functionality across page transitions

## Technical Notes

### Static Site CSP Limitations
While unsafe-inline weakens XSS protection, it's required for static Astro sites due to:
- Astro's component hydration using inline scripts
- astro-themes FOUC prevention scripts
- Service worker registration inline script
- View transitions client router inline code

## Performance Impact
- No hydration cost from view transitions (uses native API)
- Lazy search initialization with requestIdleCallback
- Optimized font loading with font-display: swap
- Build timestamp captured at build-time (zero runtime cost)

## Accessibility
- Automatic route announcements for screen readers
- prefers-reduced-motion support for theme transitions
- Proper ARIA labels maintained across transitions
- Skip-to-content links preserved
- GitHub OG Images: Instant loading after first visit (0ms latency)
- Offline Support: Project cards remain functional offline

Footer Enhancements:
- Display current commit hash in footer with link to GitHub commit
- Format: "open source on commit [hash]. made with astro"
- Conditional rendering - only shows when COMMIT_REF is available
- Add Astro link to footer text

Site Metadata Updates:
- Add commit hash logic to siteMetadata in navigation.ts
- Add computed properties: commitHash, commitHashFull, commitUrl
- Add astroUrl to siteMetadata for centralized link management
- Create helper functions getFullCommitHash() and getShortCommitHash()
- All footer data now centralized in single source of truth

PWA Screenshot Updates:
- Add 5 mobile screenshots (narrow form factor, 1242x2688)
- Add 8 desktop screenshots (wide form factor, 1280x720)
- Add proper sizes attribute to all screenshots for validation
- Comply with PWA manifest screenshot limits

Add automatic GitHub OG image fallback for project cards
- Add getGitHubOgImage() helper function to src/lib/api/github.ts
- Parses GitHub repo URLs to extract owner and repo name
- Generates OpenGraph preview URL: opengraph.githubassets.com/1/{owner}/{repo}
- Returns null for invalid URLs with proper error handling

- Update Card component to use GitHub OG fallback images
- Import and utilize getGitHubOgImage() helper
- Maintain image priority: local image prop → imagePath lookup → GitHub OG
- Render GitHub OG images when no local images exist

Build & Deploy Configuration:
- Set COMMIT_REF=$(git rev-parse HEAD) in package.json predeploy
- Ensures commit hash available for GitHub Pages deployments
- Add COMMIT_REF to .env.example with setup instructions

• Implement GitHub API integration to fetch repositories dynamically

- Create getFeaturedProjects() with pagination support (up to 1000 repos)
- Add support for sorting by stars, name, or recent activity
- Include language enrichment via parallel API calls
- Add optional fork filtering and project blacklist

- Add language icon mapping utility
- Map programming languages to icon classes
- Support case-insensitive matching with fallback logic

- Refactor projects page to use GitHub API
- Replace static JSON with live API data
- Display all languages per project (not just primary)
- Add fork indicators with icon-git
- Sort by most recently pushed repositories
- Support optional project preview images (jpg/jpeg/png/gif)

- Update reusable Card component
- Consolidate project card layout into single component
- Add optional image loading with automatic format detection
- Include star counter, fork badge, and language tags with icons
- Support responsive grid layout via Columns component

- Update homepage projects list to also use GitHub API
- Fetch top 4 starred projects dynamically

- Improve blog post layout and accessibility
- Redesign post layout

- Add environment configuration
- Create .env.example with placeholders for GitHub PAT and Netlify tokens

Technical Details:
- Use Promise.all for parallel API calls (language fetching)
- Implement pagination to fetch all repos (100 per page, max 10 pages)
- Support word-breaking for underscore-separated names (break-all)
- Prevent star counter squeezing with flex-shrink-0

• Update PWA offline functionality:

- Create /offline page with connection status detection
- Implement OfflineManager utility for last page tracking
- Add auto-redirect when connection is restored
- Configure service worker offline fallback in astro.config.mjs

* Enhance structured data and SEO:
- Add Person JSON-LD schema to OpenGraphTags component
- Include expertise areas, education, and social profiles
- Improve search engine understanding of personal identity
- Add google website verification file

* Update homepage and TypeScript configuration

• Add copy link button to blog social share buttons

- Create reusable CopyToClipboard utility in src/scripts/
- Add share button with icon-share icon and hover:-rotate-6 animation
- Copy format: "Title\nURL" for easy sharing
- Show notification on successful copy

fix: service worker intercepting URLs with query parameters and sending them to the 404 page

• Added navigateFallbackDenylist to prevent XML files (RSS, sitemap) from

being redirected to 404 page
- Added 'xml' to globPatterns to ensure RSS and sitemap files are precached
- Excluded /fonts/icomoon/ directory from precaching to fix 404 errors
- Updated service worker registration to only run in production mode,
preventing 404 errors during development

Resolved service worker precaching error by adding globIgnores configuration
to exclude the /public/fonts/icomoon/ directory, which is used for version
control of font definitions and not actively served in the application.

- Added globIgnores to workbox configuration in astro.config.mjs
- Excluded patterns: /fonts/icomoon/ and **/fonts/icomoon

This fixes the browser console error:
"bad-precaching-response: {"url":"https://alexmbugua.me/fonts/icomoon","status":404}"

Add extensive SEO optimizations across the site to improve search engine
visibility, social media previews, and accessibility:

Open Graph & Twitter Card Enhancements:
- Add og:image dimensions (1200x630 for articles, 400x400 for website)
- Add og:image:type for proper image display
- Add article:author and article:section metadata
- Add twitter:label1/data1 for reading time display
- Add twitter:label2/data2 for published date
- Implement reading time estimation utility (200 words/min)

JSON-LD Structured Data:
- Add BreadcrumbList schema for navigation hierarchy
- Add Organization schema alongside Person schema
- Add wordCount and timeRequired to BlogPosting schema
- Enhance schema with comprehensive social profiles

Security & Privacy:
- Add referrer policy (strict-origin-when-cross-origin)
- Add color-scheme meta tag for dark mode support

Accessibility Improvements:
- Add skip-to-content link for keyboard navigation
- Ensure proper focus management and ARIA support
- Verify lang="en" attribute on html element

Favicon Optimization:
- Generate favicon-16x16.png and favicon-32x32.png
- Add multiple favicon sizes for better browser support
- Maintain .ico fallback for older browsers

• Add full PWA support with offline functionality and installability

- Fix accessibility tap target sizing (WCAG 2.1 compliance)
- Add adaptive theme colors for mobile browsers
- Generate optimized PWA icons with maskable variants
- Configure service worker with intelligent caching strategies

### README.md
Added Table of Contents:
Added Netlify Deployment Documentation:
1. Setup: Link Repository to Netlify (One-time)
- Netlify UI method (step-by-step):
* Log in and import existing project
* Connect GitHub and authorize
* Configure build settings (base directory, build command, publish directory)
* Add environment variables (GUESTBOOK_ID, NETLIFY_ACCESS, NODE_VERSION)
* Configure custom domain (alexmbugua.me)
* Update site name (optional)
- Netlify CLI method:
* Install options (npx vs global)
* Authentication with netlify login
* Link repository (--name flag or interactive)
* Verify connection with netlify status
* Set up local .env file
* Why use npx vs global install (detailed comparison)
2. Automatic Git Deployment (Recommended)
- Push to main triggers automatic deployment
- Netlify runs build with Node 22
- Deploys dist directory
- Runs plugins for optimization
- Deploy notifications setup
3. Local Development with Netlify Features
- Test environment variables injection
- Test redirects and headers
- Test form submissions locally
- Runs on localhost:8888 (proxies Astro dev on 4321)
4. Manual CLI Deployment
- Production deployment: npm run deploy:netlify
- Preview/draft deployment: npm run deploy:netlify:preview
- Both npx and global CLI examples provided
5. Netlify Configuration
- Build settings (Node 22, dist output)
- Deploy contexts (production, preview, branch)
- Security headers (all 5 explained)
- Cache control (1 year immutable, 1 week images)
- Redirects (404 fallback)
- Netlify plugins (4 plugins with descriptions)
- Environment variables (required and auto-configured)
- Custom domain setup
6. Netlify Dev Notes
- When to use npm run dev vs npm run preview:netlify
- Testing Netlify features locally
7. Troubleshooting Netlify Builds
- Husky devDependency issue (expected behavior)
- Import resolution errors (dependencies vs devDependencies)
- Plugin failures (cache clearing)
- Environment variable issues (scope and injection)

### netlify.toml
- Netlify configuration with build settings (Node 22, dist output)
- Local development configuration (Astro dev on port 4321, Netlify Dev on 8888)
- Production, preview, and branch deploy contexts
- Security headers:
- X-Frame-Options: DENY
- X-XSS-Protection, X-Content-Type-Options
- Referrer-Policy: strict-origin-when-cross-origin
- Permissions-Policy for camera, microphone, geolocation
- Cache control headers:
- 1 year cache for immutable assets (JS, CSS, fonts)
- 1 week cache for images (PNG, JPG, WebP)
- 404 redirect handling
- 5 Netlify plugins configured:
* netlify-plugin-cache - Cache node_modules/.astro/dist for faster builds
* @netlify/plugin-sitemap - Automatic sitemap generation
* @netlify/plugin-lighthouse - Performance audits (90% thresholds)
* netlify-plugin-checklinks - Link validation (skips 404 pages)
* netlify-plugin-submit-sitemap - Auto-submit to Google/Bing/Yandex

### package.json
- Added Netlify deployment scripts:
* deploy:netlify - Production deployment
* deploy:netlify:preview - Preview/draft deployment
* preview:netlify - Local dev with Netlify features
- Installed dependencies:
* netlify-cli@^23.9.1 - Netlify command-line interface
* netlify-plugin-cache@^1.0.3 - Build caching plugin
* prettier-plugin-toml@^2.0.6 - TOML formatting support
- Updated lint-staged to include *.toml files for formatting

### .prettierrc
- Added prettier-plugin-toml to plugins array
- Added TOML file formatting override:
* 2 spaces indentation (no tabs)
* Consistent with JSON formatting rules

Implemented image optimization with responsive breakpoints,
modern formats (WebP/AVIF), and automatic srcset generation for optimal
performance across all devices.

### Image Service Configuration (astro.config.mjs)
- Configured Sharp image processor for high-quality optimization
- Set pixel limit to 268M (~16K image max) for safety
- Added WebP and AVIF format support for modern browsers
- Set default quality to 80 (optimal quality/size balance)

### Configuration Details
```js
image: {
service: {
entrypoint: "astro/assets/services/sharp",
config: { limitInputPixels: 268402689 }
},
formats: ["webp", "avif"], // Modern formats with fallbacks
quality: 80 // Balanced compression
}

### ImageView Component (src/components/ui/ImageView.astro)

- Added responsive srcset with Tailwind breakpoints [640, 768, 1024, 1280, 1536]
- Configured sizes attribute: (max-width: 640px) 100vw, (max-width: 1024px) 80vw, 1024px
- WebP format with quality 80
- Added TypeScript interface for widths and sizes props
- Maintains lazy loading and async decoding

### Post Component (src/components/Post.astro)

- Optimized thumbnail images with widths [144, 288, 432] (1x, 2x, 3x)
- Fixed size attribute: 144px for consistent thumbnails
- WebP format with quality 80
- Responsive images for Retina displays

### PreviewImage Component (src/components/PreviewImage.astro)

- Added responsive widths [640, 768, 1024, 1280]
- Configured sizes: (max-width: 768px) 100vw, (max-width: 1024px) 80vw, 1024px
- Higher quality (85) for hero/preview images
- WebP format for better compression

### Responsive Image Sizes Strategy

- Mobile (< 640px): 100vw (full width)
- Tablet (640-1024px): 80vw (80% width)
- Desktop (> 1024px): 1024px max
- Thumbnails: Fixed 144px with 2x/3x variants

- Standard images: 80 (optimal balance)
- Hero/preview images: 85 (higher quality)
- Thumbnails: 80 (sufficient for small sizes)

All images now support these props:
- widths: Array of image widths for srcset
- sizes: CSS sizes attribute for browser selection
- quality: Compression quality (0-100)
- format: Output format (webp, avif, jpg, png)
- loading: lazy (default) or eager
- decoding: async (default) or sync

### TypeScript Configuration (tsconfig.json)
- Removed deprecated baseUrl option
- Updated path aliases to use relative paths (./src/*)
- Enhanced strict mode settings:
- Added noUnusedLocals, noUnusedParameters
- Added noFallthroughCasesInSwitch
- Enabled allowSyntheticDefaultImports
- Enforced forceConsistentCasingInFileNames

### Markdown Configuration (markdown.config.ts)
- Fixed type incompatibilities with VS Code theme imports
- Added type assertions for rehype-pretty-code theme options
- Fixed remark-slug plugin type conflicts
- Resolved rehypeAccessibleEmojis type incompatibility

### Tailwind Configuration (tailwind.config.mjs)
- Integrated with design tokens from src/config/design-tokens.mjs
- Simplified configuration using centralized token system
- Added LightningCSS for faster CSS minification

### ESLint Configuration (eslint.config.mjs)
- Migrated to ESLint v9 flat config format
- Configured @typescript-eslint parser and plugin
- Added astro-eslint-parser for .astro files
- Integrated eslint-plugin-astro with recommended rules
- Set up TypeScript-aware linting with type checking

### Prettier Configuration
- Updated .prettierrc with comprehensive formatting rules
- Added prettier-plugin-astro for Astro file support
- Configured tab width, semi-colons, and quotes preferences
- Updated .prettierignore with proper exclusion patterns

### Configuration Organization
- Moved src/config.ts → src/config/site-config.ts
- Created centralized src/config/ directory for all configuration
- Updated all imports across 4+ files (Layout, MetaTags, OpenGraphTags, RSS)

### UI Components Organization
- Created src/components/ui/ directory for generic components
- Moved reusable components:
- Card.astro
- Columns.astro
- Expand.astro
- ImageView.astro

### Styles Organization by Tailwind Layers
- Reorganized CSS into logical structure:
- src/styles/global.css: Main entry with @layer base and components
- src/styles/components/: Component-specific styles
- avatar.css (Avatar generator)
- guestbook.css (Guestbook entries)
- search.css (Pagefind search)

### Husky Setup
- Installed husky@^9.1.7 and lint-staged@^16.2.4
- Added "prepare": "husky" script for automatic setup
- Created .husky/pre-commit hook
- Configured git hooks path: core.hooksPath = .husky

### Lint-staged Configuration
- JavaScript/TypeScript/Astro files: ESLint --fix + Prettier
- JSON/Markdown/CSS/YAML files: Prettier formatting
- Runs only on staged files (performance optimized)
- Automatically stages fixed files
- Integrates with existing .prettierignore rules

### Added Dependencies
- lightningcss@^1.30.2 (Fast CSS minifier)
- husky@^9.1.7 (Git hooks)
- lint-staged@^16.2.4 (Staged file linting)

### Updated knip.json
- Added lightningcss to ignoreDependencies (used by Vite)
- Added pagefind to ignoreDependencies (used by Astro integration)

## Scripts & Tooling
- Added scripts: format, lint, lint:fix
- Pre-commit hooks now enforce quality before commits

### src/lib/api/guestbook.ts
- Guestbook API integration with Netlify Forms
- Type-safe GuestEntry interface for API responses
- Exported utilities:
- getGuestEntries(): Fetch submissions with error handling
- getInitials(): Generate avatar initials from name
- formatEntryDate(): Consistent date formatting
- Environment variable validation
- Centralized error handling

### src/components/GuestbookEntry.astro
- Dedicated component for rendering guestbook entries
- Consumes GuestEntry interface for type safety
- Handles conditional URL linking
- Separates rendering logic from page orchestration

### src/scripts/guestbookCounter.ts
- Nostalgic hit counter logic extraction
- Exported utilities:
- generateCounterValue(): Random 6-digit counter
- initGuestbookCounter(): Initialize counter display
- Follows established scripts pattern (themeManager, keyboardShortcuts)

### src/styles/guestbook.css
- 154 lines of extracted inline styles
- Theme-aware CSS with light/dark mode support
- Nostalgic web effects (blink, marquee, gradient animations)
- Entry layout and bubble styling
- Browser-cacheable separate from page logic

### src/lib/blog/utils.ts
- Shared blog post utilities to eliminate duplication
- Exported utilities:
- formatPostDate(): Consistent date formatting (long/short)
- getPostUrl(): URL generation from post ID
- sortPostsByDate(): Sort posts by pubDate (newest first)
- getAllTags(): Extract unique tags from posts
- Type-safe with CollectionEntry<"blog"> types

What We're Ignoring (and Why):

- pagefind dependency - Used by astro-pagefind integration (runs via Astro hooks)
- Demo files - public/fonts/icomoon/demo-files/ (IcoMoon preview files)
- Build scripts - scripts/ (deployment utilities like fix-rss.js, pre-deploy.js)
- Public API modules - These export functions intended for external use:
- src/scripts/blogInteractions.ts - Utilities like scrollToTop(), initBackToTop()
- src/scripts/keyboardShortcuts.ts - Public API: registerShortcut(), registerShortcuts()
- src/scripts/themeManager.ts - Theme utilities: getCurrentTheme(), isLightMode(), toggleTheme()
- src/data/navigation.ts - Configuration with public types: NavigationLink, SocialLink

Entry Points Configured:
- markdown.config.ts - Resolves rehype/remark plugin dependencies
- src/pages/**/*.{astro,mdx} - All page files
- src/layouts/**/*.astro - Layout components
- src/components/**/*.astro - Component files

Design Decisions

- All "unused" exports are intentionally part of the public API:
- Modules follow the "library pattern" - they export utilities even if not all are used internally
- Types are exported for consumer type safety
- This enables extensibility - users can import any utility they need
- Follows TypeScript best practices for module design

### Blog Layout Refactoring (BlogLayout.astro)
- Created src/scripts/blogInteractions.ts
- Extracted back-to-top button logic
- Extracted scroll progress bar functionality
- Centralized all blog interaction handlers
- Created reusable blog components:
- src/components/blog/SocialShareButtons.astro
- Supports 6 platforms:
- WhatsApp, Facebook, X, Telegram, Pinterest, Email
- src/components/blog/TableOfContents.astro
- Recursive ToC renderer with 3-level nesting support
- src/components/blog/PostNavigation.astro
- Previous/next post navigation with CollectionEntry types

### Avatar Generator Decomposition (AvatarGenerator.astro)
- Created modular TypeScript modules:
- src/scripts/avatarStateManager.ts
- State management with URL synchronization
- Shareable avatar URLs
- src/scripts/avatarRenderer.ts
- Canvas rendering with image caching
- Thumbnail generation
- Created component directory src/components/avatar/:
- GenderSelector.astro - Male/Female radio buttons
- AvatarCanvas.astro - Canvas element with loading
- LayerTabs.astro - 6 customization tabs
- LayerGrid.astro - Layer item container
- AvatarActions.astro - Randomize, Download, Share
- Created src/styles/avatar.css
- Extracted all avatar-specific styles
- Responsive design patterns

### SEO Meta Tags Extraction (Layout.astro)
- Created src/components/seo/MetaTags.astro
- Core SEO meta tags
- Created src/components/seo/OpenGraphTags.astro
- OG and Twitter Card meta tags

### Inline Styles Migration
- Migrated style="cursor: pointer;" to Tailwind cursor-pointer class
- Zero inline styles remaining in codebase

### CSS Variables Consolidation
- Organized CSS variables in src/styles/global.css with categories:
- Color Palette (9 colors)
- Layout & Spacing
- Typography
- Added 15 section comment headers for better organization:
- Custom Font Faces
- CSS Custom Properties
- Global Selections & Body
- Base Typography
- Layout Elements
- Icon Font Styles
- Responsive Typography
- Component Typography
- Lists
- Interactive Elements
- Content Blocks
- Utility Components
- Code Blocks & Syntax Highlighting
- Prose & Content
- Table of Contents
- Global Utility Styles

### Global CSS Cleanup
- Removed 3 blocks of commented-out code
- Improved documentation and organization
- Better maintainability with clear sections

### Theme Management Extraction
- Created src/scripts/themeManager.ts
- Type-safe theme management (Theme = "light" | "dark")
- Exports: getCurrentTheme(), isLightMode(), toggleTheme()
- Exports: updateThemeIcon(), initThemeSwitcher(), handleThemeToggle()
- Eliminates global function pollution
- Refactored src/components/ThemeSwitcher.astro
- Clean module imports instead of inline scripts
- Proper event handling with DOM manipulation

### Keyboard Shortcuts Extraction
- Created src/scripts/keyboardShortcuts.ts
- Reusable shortcut handler with modifier key support
- Interface: ShortcutConfig with key/modifier mapping
- Exports: registerShortcut(), initSearchShortcut(), registerShortcuts()
- Cross-platform support (Ctrl/Cmd)
- Refactored src/pages/search.astro
- Reduced from inline implementation to 2-line import
- Ctrl+K / Cmd+K search focus functionality

### Navigation Configuration
- Created src/data/navigation.ts
- Single source of truth for all site navigation
- Type-safe interfaces: NavigationLink, SocialLink
- Exported configurations:
- mainNavigation: 8 footer links
- socialLinks: 2 social media links (GitHub, LinkedIn)
- contactLinks: 3 contact/resume links
- siteMetadata: site-wide metadata
- Refactored src/components/Header.astro
- Dynamic rendering from centralized config
- Easy to maintain and update links
- Refactored src/components/Footer.astro
- Dynamic .map() rendering from config
- Animation patterns preserved

### Type Safety Improvements
- Enhanced src/types.d.ts
- Added comprehensive JSDoc documentation
- Added readonly modifiers for immutability
- Created dedicated interfaces:
- ImageMetadata - separate image data interface
- PostProps - Post component props
- ImageViewProps - ImageView component props
- PreviewImageProps - PreviewImage component props
- Improved type reusability across components
- Better IntelliSense/autocomplete support

### Zod Validation Enhancement
- Enhanced src/content/config.ts
- Comprehensive blog collection schema validation:
- Title: 1-100 characters
- Description: 10-200 characters
- Image URL: must start with "/" (relative path)
- Image alt: 5-150 characters
- PubDate: cannot be in future
- Tags: 1-10 tags, auto-lowercase, must be unique
- Optional: draft, featured fields
- Helpful error messages for content validation
- Type inference for better developer experience (DX)

### Script Loading Optimization
- Optimized src/components/SearchField.astro
- Implemented requestIdleCallback for deferred initialization
- Pagefind UI only loads during browser idle time
- Fallback with setTimeout for older browsers
- Reduces main thread blocking, improves Time to Interactive (TTI)
- Added performance documentation to src/components/AvatarGenerator.astro
- Documents Astro's automatic async script bundling
- Notes on DOMContentLoaded initialization

### Image Optimization
- Enhanced 3 components with lazy loading and async decoding:
- src/components/ImageView.astro
- src/components/PreviewImage.astro
- src/components/Post.astro
- Added attributes to all Astro Image components:
- loading="lazy" - lazy load images below fold
- decoding="async" - non-blocking image decode
- Leverages Astro's built-in optimizations:
- Automatic WebP/AVIF generation
- Responsive image sizing
- Width/height inference (prevents CLS)

• autofocus search on page load

- guestbook entries layout

• search quality of life

- update search tips
- add keyboard shortcuts to quickly access search
- add <kbd></kbd> element styles
- add matching functionality
- sort search by date descending
- update pagefind.d.ts
- add date type

• avoid data-pagefind-ignore wrapping

- dates, descriptions, tags, titles
- update search pagefind
- add Search Tips
- update footnotes layout

• update blog

- add one about realignment
- update rss generator
- add search page link to BlogLayout
- add search page link to Footer

• [feat] - add blog search

- add pagefind, astro-pagefind and pagefind default-ui
- add SearchField component
- add search page
- add search.css to override default-ui styles
- match website theme
- add a declaration file for module '@pagefind/default-ui'
- add pagefind.d.ts

• move markdown configs to markdown.config.ts

- Footer component layout
- GitHubContributions layout
- Header link depth to inline-block
- BlogLayout add optional Table of Contents
- add remark-extract-toc package
- add remark-slug package
- add exposed tableOfContents to specific blogs
- Index housekeeping
- styles
- add table-of-contents
- adjust footer
- add Knip to audit unused packages
- remove unused packages from package.json
- re-generate package.lock.json

• add share blog section

- add navigate to top
- add blog navigation section
- add permalink frontmatter to posts
- add page scroll progress indicator

• update code block layout


• update code block theme

- add rosepine theme from vscode

• update blog

- add tags to blog page
- use columns component for more flexibility

• update tags

- use columns component for more flexibility

• add prettier

- format project
- update libraries
- columns component
- projects lists to 2 columns

• blog

- add one about finding good in everyday
- redirects
- rss feed

• add section tittles to timeline

- add skills components
- update resume with skills
- update projects data
- update header view resume link

• add now page

- update icomoon pack
- add now page to Footer
- update guestbook

• update README

- update code block styling
- wrap content

• blog layout

- switch to row layout
- footer layout
- privacy policy layout
- add expand component
- update 404 content
- rss feed
- add copyright information

• file and folder persmissions

- add _headers
- add _redirects
- add robots.txt
fix:
- rss generator

• rss feed generator

- scripts
- remove rss-fix

• rss feed header images

- add astro optimized images
- add rss-fix script
- adds xml:base attribute
- reorder namespaces

• dependencies

- icomoon font with rss icon

• add:

- rss feed for our blog

update: tip #7 usage examples headers

• blog:

- Part 2:
- move saving/restore project tips to part 3
- update links to part 3
- add part 3: IcoMoon Mastery

• links to part 2 icomoon workflow

- open-graph image generation font

• blog

- part 1: add links to part 2
- add part 2: icomoon workflow
- styles/global.css
- ordered list styling within block quotes

• update astro build config

- specify our assets output directory
- remove leading slash in build output
- update components/Header.astro
- update static link generation logic
- update layouts/Layout.astro
- fix static path links
- Use collections to query blog content
- add content config.ts
- use getCollection() instead of import.meta.glob() for our blog content
- update blog/index.astro
- use use getCollection()
- update pages/tags/[tag].astro
- use getCollection()
- update pages/tags/index.astro
- use getCollection()
- update styles/global.css
- ignore timeline and footnotes in ordered list
- update build and predeploy scripts
- build script: only run build
- predeploy script: remove no longer needed mv and run pre-deploy script commands
- update blogs
- fix verses

• Libraries:

- astro: 5.9.2 > 5.12.7
- astrojs/mdx: 4.3.0 > 4.3.2
- astrojs/sitemap: 3.4.1 > 3.4.2
- add check script: "npm run check"
- blog:
- add one about how to use IcoMoon to create and integrate high quality vector icon fonts
- ImageView component:
- add support for per image width adjustment
- Global css:
- fix code block responsiveness
- add ordered list styling
- add in-line code styling
- add blockquote styling
- add our IcoMoon generated files to version control
Fix astro check Warnings
- Remove Deprecated: Astro.glob()
- use import.meta.glob() to query source files
- add Frontmatter type

• deploy script

- use gh-pages for .jekyll and CNAME options
- blog
- add one about making room for love and peace

• add one about flowing with the current of life

- update code snipet in host your own site pt.2
- update case in resume

• Header search engine optimizations

- Footer
- fonts
- pre-deploy script
- open all external links in new tabs
update blog:
- add one about authenticity

• add one about consistency

update: guestbook and success pages
- improve folder structure
- update image locations

• add success.astro

- update guestbook to use custom redirect page
- add success.png

• add guestbook.astro

- use netlify forms
- add images
- fetch guestbook entries
- style guestbook entries
- add privacy policy

• switch to deploy using netlify

• add about theming with jekyll

- update typo in pt.1 host your own site
- update resume

• add about the gift of hindsight

update ImageView component

• add ImageView component

update blog resume: include link to andela profile
- update Timeline component

• update timeline component

- add optional more information
- update variable names

update blog
- update time image
- add about trusting the process
update timeline components
- add typing

update blog page name
update footer project link
update blog and tag content grouping
open music site on a different tab

add timeline component
add motivation blog

• add blog page

- add BlogLayout component
- add post component
- add PreviewImage component
- add typing
- add first post
feat: add tags
- add tags page
- add indexed tags page
feat: add OpenGraph images for all pages
- add [..route]
- update all layouts
- update all pages

• fixes and updates

- update icon pack style and font
- update pre-deploy script
- update header
- fix missing icons in project.json
- fix icon names in project.json

• add card component

- add column component
- update index page
- add dev icons to fonts
fix: nested files accessing root assets
- update pre-deploy script

update Resume

update fonts with bootstrap icons v1.13.1 set

add link to personal music site

• update predeploy script

- create and populate CNAME with our address

• use gh-pages library to automate push and build

- add .nojekyll to prevent skipping _asset folders
- rename _astro to astro

• remove _config.yml from root directory


• update pre-deploy and deploy commands


• rename post-build scripts

• remove leading forward slash to linked generated stylesheets

- move asset links one level up on generated stylesheets
- Copy static files /dist to ../../docs/
Fix: leading slash breaking static path
Fix: generated css static file paths

• Use Astro and tailwind for styling

- use icon fonts (iconmoon)
- add light theme

Bumps ossf/scorecard-action from 2.4.0 to 2.4.2.

• Release notes


• Changelog


• Commits

---
updated-dependencies:

• dependency-name: ossf/scorecard-action

dependency-version: 2.4.2
dependency-type: direct:production
update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

• origin/main:

Create static.yml

• README

- remove reference to github
- re-order contact information
* website
- initial commit
- add index.html
- add styles and fonts