fix

Author: elv1s42

components/PageMetadata.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useLayoutEffect } from 'react';
 import { useMatches, useLocation } from 'react-router-dom';
 import { Cssville } from "cssville-generators/build/cssville";
 
@@ -13,62 +13,74 @@ export const PageMetadata: React.FC<MetadataProps> = ({
 }) => {
   const matches = useMatches();
   const location = useLocation();
-  
-  useEffect(() => {
-    // Get the last match which contains the current route's handle
+
+  // Function to get metadata from current route
+  const getMetadata = () => {
     const match = matches[matches.length - 1];
     let title = defaultTitle;
     let description = defaultDescription;
-    
-    // Extract metadata from the route's handle
+
     if (match && match.handle) {
       const handle = match.handle as any;
-      
-      // For CSS Classes pages, we need to handle the dynamic title
+
       if (handle.category === "CSS Classes" && handle.title === "") {
         const parts = location.pathname.split("/");
         const className = parts[parts.length - 1];
         const generator = Cssville.generators.find(g => g.name === className);
-        
+
         if (generator) {
           title = `${generator.name} - Cssville CSS Classes`;
           description = `Learn about Cssville's ${generator.name} utility classes.`;
         }
       } else if (handle.title) {
-        // For other pages, use the title from the handle
         title = handle.title;
         if (handle.category !== "Home") {
           title += " - Cssville";
         }
-        
+
         if (handle.description) {
           description = handle.description;
         }
       }
     }
-    
+
+    return { title, description };
+  };
+
+  // Update metadata immediately during render
+  const { title, description } = getMetadata();
+
+  // Synchronously update the title as soon as possible
+  if (typeof document !== 'undefined') {
+    document.title = title;
+  }
+
+  // Use useLayoutEffect for DOM mutations before browser paint
+  useLayoutEffect(() => {
+    const { title, description } = getMetadata();
+
     // Update document head
     document.title = title;
-    
+
     // Update meta description
     let metaDescription = document.querySelector('meta[name="description"]');
     if (metaDescription) {
       metaDescription.setAttribute('content', description);
     }
-    
+
     // Update Open Graph and Twitter meta tags
     const ogTitle = document.querySelector('meta[property="og:title"]');
     const ogDescription = document.querySelector('meta[property="og:description"]');
     const twitterTitle = document.querySelector('meta[name="twitter:title"]');
     const twitterDescription = document.querySelector('meta[name="twitter:description"]');
-    
+
     if (ogTitle) ogTitle.setAttribute('content', title);
     if (ogDescription) ogDescription.setAttribute('content', description);
     if (twitterTitle) twitterTitle.setAttribute('content', title);
     if (twitterDescription) twitterDescription.setAttribute('content', description);
-    
+
   }, [matches, location.pathname, defaultTitle, defaultDescription]);
-  
+
   // This component doesn't render anything
   return null;
-};
+};

index.tsx

@@ -4,20 +4,76 @@ import hljs from 'highlight.js';
 import "cssville-ui/cssville-ui.bundle.css"
 import "cssville/cssville.css";
 import "./site.css";
-import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import { createBrowserRouter, RouterProvider, matchRoutes } from "react-router-dom";
 import { Routes } from "./data/pagesData";
 import { PageMetadata } from "./components/PageMetadata";
+import { Cssville } from "cssville-generators/build/cssville";
 
+// Initialize metadata as early as possible based on current URL
+function initializeMetadata() {
+  const pathname = window.location.pathname;
+
+  // Find matching route
+  const matches = matchRoutes(Routes, pathname);
+
+  if (matches && matches.length > 0) {
+    const match = matches[matches.length - 1];
+    const handle = match.route.handle as any;
+
+    if (handle) {
+      let title = handle.title || "Cssville - The most simple utility-first CSS framework";
+      let description = handle.description || "Enhance your UI with ready-to-use CSS utility classes";
+
+      // Handle CSS Classes pages with dynamic titles
+      if (handle.category === "CSS Classes" && handle.title === "") {
+        const parts = pathname.split("/");
+        const className = parts[parts.length - 1];
+        const generator = Cssville.generators.find(g => g.name === className);
+
+        if (generator) {
+          title = `${generator.name} - Cssville CSS Classes`;
+          description = `Learn about Cssville's ${generator.name} utility classes.`;
+        }
+      } else if (handle.title && handle.category !== "Home") {
+        title += " - Cssville";
+      }
+
+      // Update document head immediately
+      document.title = title;
+
+      // Update meta tags
+      const metaDescription = document.querySelector('meta[name="description"]');
+      if (metaDescription) {
+        metaDescription.setAttribute('content', description);
+      }
+
+      const ogTitle = document.querySelector('meta[property="og:title"]');
+      const ogDescription = document.querySelector('meta[property="og:description"]');
+      const twitterTitle = document.querySelector('meta[name="twitter:title"]');
+      const twitterDescription = document.querySelector('meta[name="twitter:description"]');
+
+      if (ogTitle) ogTitle.setAttribute('content', title);
+      if (ogDescription) ogDescription.setAttribute('content', description);
+      if (twitterTitle) twitterTitle.setAttribute('content', title);
+      if (twitterDescription) twitterDescription.setAttribute('content', description);
+    }
+  }
+}
 
 const router = createBrowserRouter(Routes);
 
 function docReady(fn: () => void) {
   // see if DOM is already available
   if (document.readyState === "complete" || document.readyState === "interactive") {
+    // Initialize metadata before rendering React app
+    initializeMetadata();
     // call on next available tick
     setTimeout(fn, 1);
   } else {
-    document.addEventListener("DOMContentLoaded", fn);
+    document.addEventListener("DOMContentLoaded", () => {
+      initializeMetadata();
+      fn();
+    });
   }
 }