BaseLayout.astro

---
import Header from '../components/Header.tsx';
import Footer from '../components/Footer.tsx';
// import Sidebar from '../components/Sidebar';
import { ThemeProvider } from '../components/theme/ThemeContext.tsx';
import ToastProvider from '../components/ToastProvider.tsx';
import { GoogleTagManager } from 'astro-gtm';
import '../styles/global.css';
import SearchPage from '../components/SearchPage';

// Rest of imports and props remain the same

export interface Props {
  // Basic SEO
  name: string;
  title: string;
  path: string;
  description?: string;
  canonical?: string;
  themeColor?: string;
  keywords?: string[];
  ogImage?: string;
  twitterImage?: string;
  
  // Layout
  showSidebar?: boolean;
  showHeader?: boolean;
  
  // Content metadata
  datePublished?: string;
  dateModified?: string;
  softwareVersion?: string;
  features?: string[];
  author?: string;
  license?: string;
  category?: string;
  
  // Image/Media
  imgWidth?: number;
  imgHeight?: number;
  thumbnailUrl?: string;
  encodingFormat?: string;
  
  // Hierarchical structure
  partOf?: string;
  partOfUrl?: string;
  
  // Schema type override
  pageType?: string;
  
  // Collection/List specific
  totalItems?: number;
  itemsPerPage?: number;
  currentPage?: number;
  
  // Tool specific
  toolType?: string;
  toolCategory?: string;
  
  // Icon specific
  iconName?: string;
  iconCategory?: string;
  iconTags?: string[];
  
  // Emoji specific
  emojiCode?: string;
  emojiCategory?: string;
  
  // Command/Cheatsheet specific
  commandName?: string;
  platform?: string;
  commandCategory?: string;
  
  // MCP Repository specific
  githubUrl?: string;
}

const { 
  // Basic SEO
  name,
  title, 
  description, 
  canonical, 
  themeColor = "#1e40af", 
  keywords = [],
  ogImage = "https://hexmos.com/freedevtools/site-banner.png",
  twitterImage = "https://hexmos.com/freedevtools/site-banner.png",
  
  // Layout
  showHeader = true,
  showSidebar = false,
  
  // Content metadata
  datePublished,
  dateModified,
  softwareVersion = "1.0.0",
  features = [],
  author = "Free DevTools by Hexmos",
  license = "MIT",
  category,
  
  // Image/Media
  imgWidth = 1136,
  imgHeight = 768,
  thumbnailUrl,
  encodingFormat = "text/html",
  
  // Hierarchical structure
  partOf = "Free DevTools",
  partOfUrl = "https://hexmos.com/freedevtools/",
  
  // Schema type override
  pageType: customPageType,
  
  // Collection/List specific
  totalItems,
  itemsPerPage,
  currentPage = 1,
  
  // Tool specific
  toolType,
  toolCategory,
  
  // Icon specific
  iconName,
  iconCategory,
  iconTags = [],
  
  // Emoji specific
  emojiCode,
  emojiCategory,
  
  // Command/Cheatsheet specific
  commandName,
  platform,
  commandCategory,
  
  // MCP Repository specific
  githubUrl,
} = Astro.props;

const currentUrl = canonical || Astro.url.href;
const keywordsString = keywords.length > 0 ? keywords.join(', ') : '';

// Determine page type based on path and props
function determinePageType(path: string, props: any): string {
  if (props.pageType) return props.pageType;
  
  // SVG Icon pages
  if (path.includes('/svg_icons/')) {
    if (path.match(/\/svg_icons\/[^\/]+\/[^\/]+$/)) {
      return 'ImageObject'; // Individual icon page
    } else if (path.match(/\/svg_icons\/[^\/]+$/)) {
      return 'CollectionPage'; // Category page
    } else {
      return 'CollectionPage'; // Main SVG icons page
    }
  }
  
  // Tool pages
  if (path.match(/\/t\/[^\/]+$/) || path.match(/\/t\/[^\/]+\/[^\/]+$/)) {
    return 'SoftwareApplication';
  }
  
  // Cheatsheet pages
  if (path.includes('/c/')) {
    if (path.match(/\/c\/[^\/]+\/[^\/]+$/)) {
      return 'TechArticle'; // Individual cheatsheet
    } else if (path.match(/\/c\/[^\/]+$/)) {
      return 'CollectionPage'; // Category page
    } else {
      return 'CollectionPage'; // Main cheatsheets page
    }
  }
  
  // TLDR pages
  if (path.includes('/tldr/')) {
    if (path.match(/\/tldr\/[^\/]+\/[^\/]+$/)) {
      return 'TechArticle'; // Individual command page
    } else if (path.match(/\/tldr\/[^\/]+$/)) {
      return 'CollectionPage'; // Platform page
    } else {
      return 'CollectionPage'; // Main TLDR page
    }
  }
  
  // MCP pages
  if (path.includes('/mcp/')) {
    if (path.match(/\/mcp\/[^\/]+\/[^\/]+$/)) {
      return 'SoftwareApplication'; // Individual MCP repository page
    } else if (path.match(/\/mcp\/[^\/]+$/)) {
      return 'CollectionPage'; // MCP category page
    } else {
      return 'CollectionPage'; // Main MCP page
    }
  }
  
  // Emoji pages
  if (path.includes('/emojis/')) {
    if (path.match(/\/emojis\/[^\/]+$/)) {
      return 'CollectionPage'; // Category page
    } else {
      return 'CollectionPage'; // Main emojis page
    }
  }
  
  // Default
  return 'WebPage';
}

// Generate base schema properties
function getBaseSchema(props: any) {
  const currentDate = new Date().toISOString();
  
  return {
    "@context": "https://schema.org",
    "url": props.canonical || currentUrl,
    "inLanguage": "en",
    "datePublished": props.datePublished || currentDate,
    "dateModified": props.dateModified || currentDate,
    "author": {
      "@type": "Organization",
      "name": props.author || "Free DevTools by Hexmos",
      "url": "https://hexmos.com/freedevtools/"
    },
    "publisher": {
      "@type": "Organization",
      "name": "Free DevTools by Hexmos",
      "url": "https://hexmos.com/freedevtools/"
    },
    "isPartOf": {
      "@type": "Collection",
      "name": props.partOf || "Free DevTools",
      "url": props.partOfUrl || "https://hexmos.com/freedevtools/"
    },
    "license": props.license === "MIT" ? "https://opensource.org/licenses/MIT" : (props.license || "https://opensource.org/licenses/MIT"),
    "mainEntityOfPage": {
      "@type": "WebPage",
      "@id": props.canonical || currentUrl
    }
  };
}

// Generate specific schema based on page type
function generatePageSpecificSchema(pageType: string, props: any) {
  const baseSchema = getBaseSchema(props);
  
  switch (pageType) {
    case 'ImageObject': // Individual SVG icon
      return {
        ...baseSchema,
        "@type": "ImageObject",
        "name": props.iconName || props.name,
        "description": props.description,
        "contentUrl": props.thumbnailUrl || props.ogImage,
        "thumbnailUrl": props.thumbnailUrl || props.ogImage,
        "image": props.thumbnailUrl || props.ogImage,
        "encodingFormat": props.encodingFormat || "image/svg+xml",
        "width": props.imgWidth,
        "height": props.imgHeight,
        "keywords": [...(props.keywords || []), ...(props.iconTags || [])].join(", "),
        "about": {
          "@type": "Thing",
          "name": props.iconCategory || props.category
        },
        "offers": {
          "@type": "Offer",
          "price": "0",
          "priceCurrency": "USD",
          "availability": "https://schema.org/InStock"
        },
        "license": props.license === "MIT" ? "https://opensource.org/licenses/MIT" : (props.license || "https://opensource.org/licenses/MIT"),
        "creator": {
          "@type": "Organization",
          "name": props.author || "Free DevTools by Hexmos",
          "url": "https://hexmos.com/freedevtools/"
        },
        "copyrightHolder": {
          "@type": "Organization", 
          "name": props.author || "Free DevTools by Hexmos"
        },
        "copyrightYear": new Date().getFullYear(),
        "isAccessibleForFree": true,
        "usageInfo": {
          "@type": "CreativeWork",
          "text": "Free to use under MIT license. No attribution required but appreciated."
        }
      };
      
    case 'SoftwareApplication': // Tool page or MCP repository
      const isMcpRepository = props.path?.includes('/mcp/');
      
      if (isMcpRepository) {
        return {
          ...baseSchema,
          "@type": "SoftwareApplication",
          "name": props.name,
          "description": props.description,
          "applicationCategory": "DeveloperTool",
          "operatingSystem": "Any",
          "browserRequirements": "Requires Node.js, MCP Client",
          "softwareVersion": props.softwareVersion,
          "featureList": props.features || [],
          "keywords": props.keywords?.join(", ") || "",
          "screenshot": props.ogImage,
          "programmingLanguage": "TypeScript",
          "runtimePlatform": "Node.js",
          "softwareRequirements": "Model Context Protocol (MCP) compatible client",
          "category": "Model Context Protocol Server",
          "offers": {
            "@type": "Offer",
            "price": "0",
            "priceCurrency": "USD",
            "availability": "https://schema.org/InStock"
          },
          "codeRepository": {
            "@type": "SoftwareSourceCode",
            "url": props.githubUrl || props.url,
            "programmingLanguage": "TypeScript",
            "license": props.license === "MIT" ? "https://opensource.org/licenses/MIT" : (props.license || "https://opensource.org/licenses/MIT")
          }
        };
      } else {
        return {
          ...baseSchema,
          "@type": "SoftwareApplication",
          "name": props.name,
          "description": props.description,
          "applicationCategory": "DeveloperTool",
          "operatingSystem": "Any",
          "browserRequirements": "Requires JavaScript. Requires HTML5.",
          "softwareVersion": props.softwareVersion,
          "featureList": props.features || [],
          "keywords": props.keywords?.join(", ") || "",
          "screenshot": props.ogImage,
          "offers": {
            "@type": "Offer",
            "price": "0",
            "priceCurrency": "USD",
            "availability": "https://schema.org/InStock"
          }
        };
      }
      
    case 'TechArticle': // Command/Cheatsheet page
      return {
        ...baseSchema,
        "@type": "TechArticle",
        "headline": props.name,
        "description": props.description,
        "articleBody": props.description,
        "keywords": props.keywords?.join(", ") || "",
        "about": {
          "@type": "Thing",
          "name": props.commandName || props.name
        },
        "mentions": props.platform ? {
          "@type": "Thing",
          "name": props.platform
        } : undefined,
        "articleSection": props.commandCategory || props.category
      };
      
    case 'CollectionPage': // Category/List pages
      const collectionSchema: any = {
        ...baseSchema,
        "@type": "CollectionPage",
        "name": props.name,
        "description": props.description,
        "keywords": props.keywords?.join(", ") || "",
        "mainEntity": {
          "@type": "ItemList",
          "numberOfItems": props.totalItems || 0,
          "itemListElement": [] // This would be populated with actual items
        }
      };
      
      // Add pagination info if available
      if (props.totalItems && props.itemsPerPage) {
        collectionSchema.mainEntity.numberOfItems = props.totalItems;
        collectionSchema.mainEntity.numberOfPages = Math.ceil(props.totalItems / props.itemsPerPage);
        collectionSchema.mainEntity.currentPage = props.currentPage;
      }
      
      return collectionSchema;
      
    default: // WebPage
      return {
        ...baseSchema,
        "@type": "WebPage",
        "name": props.name,
        "description": props.description,
        "keywords": props.keywords?.join(", ") || ""
      };
  }
}

// Generate the final schema
const detectedPageType = determinePageType(Astro.props.path, Astro.props);
const schema = generatePageSpecificSchema(detectedPageType, Astro.props);

// Debug: Print the final schema
// console.log('🔍 JSON-LD Schema for:', Astro.props.path);
// console.log('📄 Page Type:', detectedPageType);
// console.log('📋 Generated Schema:', JSON.stringify(schema, null, 2));

const GA_MEASUREMENT_ID = 'G-WXSDF484XZ';
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <!-- Basic SEO Meta Tags -->
    <title>{title}</title>
    {description && <meta name="description" content={description} />}
    {keywordsString && <meta name="keywords" content={keywordsString} />}
    <meta name="theme-color" content={themeColor} />
    {canonical && <link rel="canonical" href={canonical} />}
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:title" content={title} />
    {description && <meta property="og:description" content={description} />}
    <meta property="og:url" content={currentUrl} />
    <meta property="og:image" content={thumbnailUrl || ogImage} />
    <meta property="og:site_name" content="Free DevTools by Hexmos" />
    
    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content={title} />
    {description && <meta name="twitter:description" content={description} />}
    <meta name="twitter:image" content={thumbnailUrl || twitterImage} />
    
    <!-- JSON-LD Structured Data -->
    {schema && (
      <script type="application/ld+json" set:html={JSON.stringify(schema)} />
    )}
    
    <!-- Additional SEO Meta Tags -->
    <meta name="robots" content="index, follow" />
    <meta name="author" content="Free DevTools by Hexmos" />
    <meta name="generator" content="Astro" />
    
    <!-- Image-specific meta tags for better SEO -->
    {thumbnailUrl && (
      <>
        <meta name="image" content={thumbnailUrl} />
        <meta property="og:image:width" content={imgWidth.toString()} />
        <meta property="og:image:height" content={imgHeight.toString()} />
        <meta property="og:image:type" content={encodingFormat} />
        <meta property="og:image:alt" content={name} />
        <meta name="twitter:image:alt" content={name} />
      </>
    )}
    
    <!-- Favicon -->
    <link rel="icon" type="image/png" href="/freedevtools/t/favicon.webp" />
    
    <!-- Fonts -->
    <!-- Preload critical fonts for faster loading -->
    <link rel="preload" href="/freedevtools/fonts/Cal_Sans/CalSans-Regular.ttf" as="font" type="font/ttf" crossorigin>
    <!-- <link rel="preload" href="/freedevtools/fonts/EB_Garamond/EBGaramond-VariableFont_wght.ttf" as="font" type="font/ttf" crossorigin> -->
    
    <!-- Load local fonts CSS -->
    <link rel="stylesheet" href="/freedevtools/fonts/fonts.css">

    
    <!-- Critical CSS for Theme Switcher to prevent FOUC -->
    <style>
      /* Prevent theme toggle FOUC by inlining critical styles */
      #theme-switcher-container {
        display: grid;
        grid-template-columns: 1fr;
      }
      
      #theme-switcher-container > div {
        position: relative;
        z-index: 0;
        display: inline-grid;
        gap: 0.125rem;
        border-radius: 9999px;
        background-color: rgba(0, 0, 0, 0.05);
        padding: 0.125rem;
        color: rgb(9, 9, 11);
      }
      
      .dark #theme-switcher-container > div {
        background-color: rgba(255, 255, 255, 0.1);
        color: rgb(255, 255, 255);
      }
      
      #theme-switcher-container button,
      #theme-switcher-container > div > div {
        position: relative;
        border-radius: 9999px;
        cursor: pointer;
        transition: all 0.2s;
        padding: 0.125rem;
      }
      
      #theme-switcher-container svg {
        width: 1rem;
        height: 1rem;
      }
      
      @media (min-width: 640px) {
        #theme-switcher-container > div {
          padding: 0.1875rem;
        }
        
        #theme-switcher-container button,
        #theme-switcher-container > div > div {
          padding: 0.25rem;
        }
        
        #theme-switcher-container svg {
          width: 1.25rem;
          height: 1.25rem;
        }
      }
      
      @media (min-width: 1024px) {
        #theme-switcher-container svg {
          width: 1.5rem;
          height: 1.5rem;
        }
      }
      
      #theme-switcher-container .theme-active {
        background-color: rgb(255, 255, 255);
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
      }
      
      .dark #theme-switcher-container .theme-active {
        background-color: rgb(75, 85, 99);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
      }
    </style>
    
    <!-- Theme initialization script -->
    <script>
      (function() {
        const theme = localStorage.getItem('theme') || 'dark';
        if (theme === 'dark') {
          document.documentElement.classList.add('dark');
        } else {
          document.documentElement.classList.remove('dark');
        }
      })();
    </script>
    
    
    <!-- Add global search state -->
    <script>
      // Add type definition for window
      interface SearchState {
        query: string;
        setQuery: (query: string) => void;
        getQuery: () => string;
      }
      
      // Extend Window interface
      interface Window {
        searchState?: SearchState;
      }
      
      // Initialize global search state
      window.searchState = {
        query: '',
        setQuery: function(query) {
          this.query = query;
          // Dispatch an event when query changes
          window.dispatchEvent(new CustomEvent('searchQueryChanged', { 
            detail: { query } 
          }));
        },
        getQuery: function() {
          return this.query;
        }
      };
    </script>
  </head>
  <body class="m-0 p-0 font-sans bg-slate-50 text-slate-800 leading-relaxed dark:bg-slate-900 dark:text-slate-200 min-h-screen flex flex-col">
    <GoogleTagManager gtmId={GA_MEASUREMENT_ID} enableInDevMode={false} />
    <div class="flex flex-1">
      {showHeader && (
        <ThemeProvider client:load>
          <Header client:load />
        </ThemeProvider>
      )}
      
      <main class="flex-1 overflow-auto bg-background" class:list={[
        showHeader ? "pt-16 md:pt-16" : "pt-0 lg:pt-0"
      ]}>
        <ThemeProvider client:load>
          <ToastProvider client:load>
           <div id="main-page" >
              <div id="search-container" style="display: none;" class="max-w-6xl mx-auto px-2 md:px-6">
                <SearchPage client:load />
              </div>
              <div id="slot-container">
                <slot />
              </div>
            </div>

            <script>
              // Function to toggle visibility based on search query
              function toggleSearchView() {
                const searchContainer = document.getElementById('search-container');
                const slotContainer = document.getElementById('slot-container');
                
                // Handle the case where elements aren't found
                if (!searchContainer || !slotContainer) return;
                
                // Safely access window.searchState
                const searchQuery = window.searchState?.getQuery?.() || '';
                
                if (searchQuery.trim()) {
                  searchContainer.style.display = 'block';
                  slotContainer.style.display = 'none';
                } else {
                  searchContainer.style.display = 'none';
                  slotContainer.style.display = 'block';
                }
              }

              // Initialize and set up listener
              document.addEventListener('DOMContentLoaded', function() {
                // Initial toggle based on search state
                toggleSearchView();
                
                // Listen for search query changes
                window.addEventListener('searchQueryChanged', toggleSearchView);
              });
            </script>
          </ToastProvider>
    <!-- Footer -->
      <Footer client:load />
    </ThemeProvider>
  </main>
</div>
  </body>
</html>