initial

src/hooks/useLayoutInit.js

@@ -5,34 +5,76 @@ import { injectPageCss } from './elementorCss'
 export default function useLayoutInit() {
   const { pathname } = useLocation()
 
+  // Inject page-specific CSS on route change
   useEffect(() => {
     injectPageCss(pathname)
   }, [pathname])
 
+  // Re-initialize theme JS on route change
   useEffect(() => {
-    const timer = setTimeout(() => {
-      if (typeof window.rakar_content_load_scripts === 'function') {
-        document.querySelectorAll('.th-slider').forEach(el => {
-          if (el.swiper) {
-            try { el.swiper.destroy(true, true) } catch (e) {}
-          }
-        })
-        window.rakar_content_load_scripts()
-      }
-      window.__layoutReady = true
-      window.dispatchEvent(new Event('layout-ready'))
-    }, 300)
-    return () => clearTimeout(timer)
-  }, [pathname])
+    let destroyed = false
+    let rafId = null
 
-  useEffect(() => {
-    const els = document.querySelectorAll('[data-bg-src]')
-    els.forEach(node => {
-      const src = node.getAttribute('data-bg-src')
-      if (src) {
-        node.style.backgroundImage = `url(${src})`
-        node.classList.add('background-image')
+    function tryInit() {
+      if (destroyed) return
+
+      // Apply data-bg-src to elements
+      document.querySelectorAll('[data-bg-src]').forEach(el => {
+        const src = el.getAttribute('data-bg-src')
+        if (src && !el.classList.contains('background-image')) {
+          el.style.backgroundImage = `url(${src})`
+          el.classList.add('background-image')
+        }
+      })
+
+      // Check if jQuery and theme init function are ready
+      if (typeof window.jQuery === 'function' && typeof window.rakar_content_load_scripts === 'function') {
+        try {
+          // Destroy ALL existing swiper instances to prevent duplicates
+          document.querySelectorAll('.swiper').forEach(el => {
+            if (el.swiper) {
+              try { el.swiper.destroy(true, true) } catch (e) {}
+            }
+          })
+
+          // Run theme initialization
+          window.rakar_content_load_scripts()
+
+          window.__layoutReady = true
+          window.dispatchEvent(new Event('layout-ready'))
+          return true
+        } catch (e) {
+          console.warn('Theme init error:', e)
+        }
       }
-    })
+      return false
+    }
+
+    // Immediate attempt
+    if (tryInit()) return
+
+    // Poll with requestAnimationFrame for efficiency
+    function poll() {
+      if (!destroyed && !tryInit()) {
+        rafId = requestAnimationFrame(poll)
+      }
+    }
+    rafId = requestAnimationFrame(poll)
+
+    // Fallback timeout (8 seconds)
+    const fallback = setTimeout(() => {
+      if (!destroyed) {
+        window.__layoutReady = true
+        window.dispatchEvent(new Event('layout-ready'))
+        destroyed = true
+        if (rafId) cancelAnimationFrame(rafId)
+      }
+    }, 8000)
+
+    return () => {
+      destroyed = true
+      if (rafId) cancelAnimationFrame(rafId)
+      clearTimeout(fallback)
+    }
   }, [pathname])
 }

src/hooks/useNavFix.js

@@ -1,6 +1,21 @@
 import { useNavigate } from 'react-router-dom'
 import { useEffect } from 'react'
 
+const postIdToSlug = {
+  35: 'electro-mechanical-works',
+  3159: 'landscaping-fencing-works',
+  3160: 'metal-construction-fabrications',
+  3172: 'building-contracting-works',
+  3179: 'interior-fit-out-works',
+  3186: 'chiller-hot-cool-solutions',
+  3192: 'misting-solutions',
+  3199: 'adiabatic-pre-cooling-system',
+  3206: 'building-management-system',
+}
+
+// Known SPA routes
+const spaRoutes = ['/', '/about', '/service', '/project', '/contact']
+
 export function useNavFix(ref) {
   const navigate = useNavigate()
 
@@ -13,26 +28,56 @@ export function useNavFix(ref) {
       if (!link) return
 
       let href = link.getAttribute('href')
-      if (!href) return
+      if (!href || href === '#' || href.startsWith('#')) return
 
+      // External links (http/https) — open in new tab if different host
       if (href.startsWith('http')) {
-        if (!href.includes(window.location.hostname)) {
-          e.preventDefault()
-          window.open(href, '_blank')
+        try {
+          const url = new URL(href)
+          if (url.hostname !== window.location.hostname) {
+            e.preventDefault()
+            window.open(href, '_blank', 'noopener,noreferrer')
+          }
+        } catch (_) {}
+        return
+      }
+
+      // Prevent default for ALL same-site links to use SPA routing
+      e.preventDefault()
+
+      // Normalize: remove leading /, handle relative paths
+      let route = href.replace(/^\//, '')
+
+      // Handle ?p= service links → SPA route
+      const serviceMatch = route.match(/service\?p=(\d+)/)
+      if (serviceMatch) {
+        const slug = postIdToSlug[serviceMatch[1]]
+        if (slug) {
+          navigate('/service/' + slug)
+        } else {
+          navigate('/service')
         }
         return
       }
 
-      if (href.startsWith('#')) return
+      // Handle ../ x/index.html relative paths like ../contact/index.html
+      route = route.replace(/\.\.\//g, '')
 
-      if (href.endsWith('.html') || href.startsWith('wp-')) {
-        e.preventDefault()
-        let route = href
-          .replace(/\/?index\.html$/, '')
-          .replace(/\.html$/, '')
-          .replace(/^\//, '')
-        navigate('/' + route)
+      // Strip .html and index.html
+      route = route.replace(/\/?index\.html$/, '').replace(/\.html$/, '')
+
+      // Strip wp- prefix (for wp-content links that aren't really pages)
+      if (route.startsWith('wp-')) return
+
+      // If route matches known SPA routes or starts with /service/, navigate
+      const normalizedRoute = '/' + route
+      if (spaRoutes.includes(normalizedRoute) || normalizedRoute.startsWith('/service/')) {
+        navigate(normalizedRoute)
+        return
       }
+
+      // Fallback: just navigate to the cleaned route
+      navigate(normalizedRoute || '/')
     }
 
     el.addEventListener('click', handler)

src/hooks/useThemeAssets.js

@@ -1,41 +1,5 @@
 import { useEffect } from 'react'
 
-const cssLinks = [
-  'https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&family=Inter:wght@100..900&display=swap',
-  '/wp-content/themes/rakar/assets/css/fontawesome.min.css',
-  '/wp-content/themes/rakar/assets/css/bootstrap.min.css',
-  '/wp-content/themes/rakar/assets/css/magnific-popup.min.css',
-  '/wp-content/themes/rakar/assets/css/swiper-bundle.min.css',
-  '/wp-content/themes/rakar/assets/css/th-wl.css',
-  '/wp-content/themes/rakar/style.css',
-  '/wp-content/themes/rakar/assets/css/style.css',
-  '/wp-content/themes/rakar/assets/css/color.schemes.css',
-  '/wp-content/plugins/elementor/assets/css/frontend.min.css',
-  '/wp-content/plugins/elementor/assets/css/widget-heading.min.css',
-  '/wp-content/plugins/elementor/assets/css/widget-image.min.css',
-  '/wp-content/plugins/elementor/assets/lib/swiper/v8/css/swiper.min.css',
-  '/wp-content/plugins/elementor/assets/css/conditionals/e-swiper.min.css',
-  '/wp-content/plugins/elementor/assets/css/widget-image-carousel.min.css',
-]
-
-const headScripts = [
-  '/wp-includes/js/jquery/jquery.min.js',
-  '/wp-includes/js/jquery/jquery-migrate.min.js',
-]
-
-const bodyScripts = [
-  '/wp-includes/js/jquery/ui/core.min.js',
-  '/wp-includes/js/jquery/ui/mouse.min.js',
-  '/wp-includes/js/jquery/ui/slider.min.js',
-  '/wp-includes/js/imagesloaded.min.js',
-  '/wp-content/themes/rakar/assets/js/bootstrap.min.js',
-  '/wp-content/themes/rakar/assets/js/swiper-bundle.min.js',
-  '/wp-content/themes/rakar/assets/js/jquery.magnific-popup.min.js',
-  '/wp-content/themes/rakar/assets/js/jquery.counterup.min.js',
-  '/wp-content/themes/rakar/assets/js/isotope.pkgd.min.js',
-  '/wp-content/themes/rakar/assets/js/main.js',
-]
-
 const metaTags = [
   { name: 'description', content: 'Welcome To Profen' },
   { name: 'robots', content: 'max-image-preview:large' },
@@ -57,41 +21,11 @@ const linkTags = [
   { rel: 'apple-touch-icon', href: '/wp-content/uploads/2024/07/favicon-lp-300x300.png' },
 ]
 
-let cssLoadCount = 0
-let totalCSS = 0
-
-function checkAllCSSLoaded() {
-  cssLoadCount++
-  if (cssLoadCount >= totalCSS) {
-    window.__cssReady = true
-    document.dispatchEvent(new Event('css-ready'))
-  }
-}
-
-function injectCSS(href) {
-  if (document.querySelector(`link[href="${href}"]`)) {
-    checkAllCSSLoaded()
-    return
-  }
-  const link = document.createElement('link')
-  link.rel = 'stylesheet'
-  link.href = href
-  link.onload = checkAllCSSLoaded
-  link.onerror = checkAllCSSLoaded
-  document.head.appendChild(link)
-}
-
-function injectScript(src) {
-  if (document.querySelector(`script[src="${src}"]`)) return
-  const script = document.createElement('script')
-  script.src = src
-  script.async = false
-  script.defer = false
-  document.body.appendChild(script)
-}
-
 export default function useThemeAssets() {
   useEffect(() => {
+    window.__cssReady = true
+    document.dispatchEvent(new Event('css-ready'))
+
     metaTags.forEach(({ name, property, content }) => {
       const attr = name ? 'name' : 'property'
       const val = name || property
@@ -101,6 +35,7 @@ export default function useThemeAssets() {
       meta.content = content
       document.head.appendChild(meta)
     })
+
     linkTags.forEach(({ rel, href, sizes }) => {
       if (document.querySelector(`link[rel="${rel}"][href="${href}"]`)) return
       const link = document.createElement('link')
@@ -109,9 +44,5 @@ export default function useThemeAssets() {
       if (sizes) link.sizes = sizes
       document.head.appendChild(link)
     })
-    totalCSS = cssLinks.length
-    cssLinks.forEach(injectCSS)
-    headScripts.forEach(injectScript)
-    bodyScripts.forEach(injectScript)
   }, [])
 }