gatsby-browser.js

// Import global styles
import "./src/style.css"

// Import fonts
import "@fontsource/merriweather/400.css"
import "@fontsource/merriweather/700.css"
import "@fontsource-variable/montserrat"

// Dark mode initialization
export const onClientEntry = () => {
    // Initialize theme from localStorage
    const savedTheme = localStorage.getItem('theme')
    if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        document.body.classList.add('dark-mode')
    }
}

// Service Worker registration for PWA
export const onServiceWorkerUpdateReady = () => {
    const answer = window.confirm(
        `This application has been updated. ` +
        `Reload to display the latest version?`
    )
    if (answer === true) {
        window.location.reload()
    }
}

// Smooth scrolling for anchor links
export const shouldUpdateScroll = ({
    routerProps: { location },
    getSavedScrollPosition
}) => {
    const { pathname, hash } = location

    // If there's a hash, scroll to that element
    if (hash) {
        const element = document.querySelector(hash)
        if (element) {
            element.scrollIntoView({ behavior: 'smooth' })
            return false
        }
    }

    // Otherwise, use default scroll behavior
    return true
}

// Add structured data for website
export const onRouteUpdate = ({ location }) => {
    // Add website structured data to every page
    const websiteStructuredData = {
        "@context": "https://schema.org",
        "@type": "WebSite",
        "name": "DevHub",
        "description": "The ultimate developer community platform featuring the latest programming articles, tutorials, and discussions.",
        "url": "https://devhub.dev",
        "potentialAction": {
            "@type": "SearchAction",
            "target": {
                "@type": "EntryPoint",
                "urlTemplate": "https://devhub.dev/search?q={search_term_string}"
            },
            "query-input": "required name=search_term_string"
        },
        "publisher": {
            "@type": "Organization",
            "name": "DevHub",
            "logo": {
                "@type": "ImageObject",
                "url": "https://devhub.dev/images/logo.png"
            }
        }
    }

    // Remove existing structured data script if it exists
    const existingScript = document.querySelector('script[data-type="website-structured-data"]')
    if (existingScript) {
        existingScript.remove()
    }

    // Add new structured data script
    const script = document.createElement('script')
    script.type = 'application/ld+json'
    script.setAttribute('data-type', 'website-structured-data')
    script.textContent = JSON.stringify(websiteStructuredData)
    document.head.appendChild(script)
}

// Performance monitoring
export const onInitialClientRender = () => {
    // Log Core Web Vitals
    if (typeof window !== 'undefined' && 'performance' in window) {
        // Largest Contentful Paint
        new PerformanceObserver((entryList) => {
            const entries = entryList.getEntries()
            const lastEntry = entries[entries.length - 1]
            console.log('LCP:', lastEntry.startTime)
        }).observe({ entryTypes: ['largest-contentful-paint'] })

        // First Input Delay
        new PerformanceObserver((entryList) => {
            const entries = entryList.getEntries()
            entries.forEach((entry) => {
                console.log('FID:', entry.processingStart - entry.startTime)
            })
        }).observe({ entryTypes: ['first-input'] })

        // Cumulative Layout Shift
        let clsValue = 0
        new PerformanceObserver((entryList) => {
            const entries = entryList.getEntries()
            entries.forEach((entry) => {
                if (!entry.hadRecentInput) {
                    clsValue += entry.value
                    console.log('CLS:', clsValue)
                }
            })
        }).observe({ entryTypes: ['layout-shift'] })
    }
}

// Add search functionality
export const wrapPageElement = ({ element, props }) => {
    // Add global search functionality
    if (typeof window !== 'undefined') {
        window.addEventListener('keydown', (e) => {
            // Ctrl/Cmd + K to open search
            if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
                e.preventDefault()
                const searchInput = document.querySelector('.search-input')
                if (searchInput) {
                    searchInput.focus()
                } else {
                    // Navigate to search page
                    window.location.href = '/search'
                }
            }
        })
    }

    return element
}