Globals

Globals

Globals represent site-wide settings and reusable content that appears across multiple pages, such as headers, footers, contact information, and SEO settings.

Global Types

Header

Navigation menus, logo, and branding elements

• Site logo and branding
• Main navigation structure
• Language switcher
• Call-to-action buttons

Footer

Footer content and links

• Company information
• Footer navigation
• Social media links
• Copyright information

SEO Settings

Default meta tags and analytics

• Default meta description
• Social media defaults
• Analytics tracking codes
• Structured data

Contact Information

Reusable contact details

• Phone numbers
• Email addresses
• Physical addresses
• Business hours

Global Schema

model Global {
  id        String   @id @default(cuid())
  key       String   @unique // header, footer, seo, contact
  title     Json     // Localized titles
  content   Json     // Localized content/settings
  metadata  Json?    // Additional configuration

  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

Example Global Configurations

Header Configuration

{
  key: "header",
  title: {
    en: "Header Settings",
    fr: "Paramètres d'en-tête"
  },
  content: {
    logo: {
      url: "https://storage.com/logo.png",
      alt: { en: "Company Logo", fr: "Logo de l'entreprise" }
    },
    navigation: [
      {
        title: { en: "Home", fr: "Accueil" },
        href: { en: "/", fr: "/fr" }
      },
      {
        title: { en: "Services", fr: "Services" },
        href: { en: "/services", fr: "/fr/services" },
        children: [
          {
            title: { en: "Web Development", fr: "Développement Web" },
            href: { en: "/services/web-development", fr: "/fr/services/developpement-web" }
          }
        ]
      }
    ],
    cta: {
      text: { en: "Get Started", fr: "Commencer" },
      href: { en: "/contact", fr: "/fr/contact" }
    }
  }
}

Footer Configuration

{
  key: "footer",
  title: {
    en: "Footer Settings",
    fr: "Paramètres de pied de page"
  },
  content: {
    columns: [
      {
        title: { en: "Company", fr: "Entreprise" },
        links: [
          {
            title: { en: "About", fr: "À propos" },
            href: { en: "/about", fr: "/fr/about" }
          },
          {
            title: { en: "Contact", fr: "Contact" },
            href: { en: "/contact", fr: "/fr/contact" }
          }
        ]
      },
      {
        title: { en: "Services", fr: "Services" },
        links: [
          {
            title: { en: "Web Design", fr: "Conception Web" },
            href: { en: "/services/web-design", fr: "/fr/services/conception-web" }
          }
        ]
      }
    ],
    social: [
      {
        platform: "linkedin",
        url: "https://linkedin.com/company/yourcompany"
      },
      {
        platform: "twitter",
        url: "https://twitter.com/yourcompany"
      }
    ],
    copyright: {
      en: "© 2024 Your Company. All rights reserved.",
      fr: "© 2024 Votre Entreprise. Tous droits réservés."
    }
  }
}

SEO Global Settings

{
  key: "seo",
  title: {
    en: "SEO Settings",
    fr: "Paramètres SEO"
  },
  content: {
    defaultMeta: {
      title: {
        en: "Your Company - Professional Services",
        fr: "Votre Entreprise - Services Professionnels"
      },
      description: {
        en: "We provide professional web development and design services.",
        fr: "Nous fournissons des services professionnels de développement et de conception web."
      }
    },
    social: {
      ogImage: "https://storage.com/og-default.jpg",
      twitterHandle: "@yourcompany"
    },
    analytics: {
      googleAnalytics: "G-XXXXXXXXXX",
      googleTagManager: "GTM-XXXXXXX"
    },
    verification: {
      google: "google-site-verification-code",
      bing: "bing-verification-code"
    }
  }
}

Contact Information

{
  key: "contact",
  title: {
    en: "Contact Information",
    fr: "Informations de Contact"
  },
  content: {
    phone: "+1 (555) 123-4567",
    email: "hello@yourcompany.com",
    address: {
      street: "123 Business St",
      city: "New York",
      state: "NY",
      zip: "10001",
      country: "USA"
    },
    hours: {
      en: "Monday - Friday: 9:00 AM - 6:00 PM",
      fr: "Lundi - Vendredi: 9h00 - 18h00"
    },
    social: {
      linkedin: "https://linkedin.com/company/yourcompany",
      twitter: "https://twitter.com/yourcompany",
      facebook: "https://facebook.com/yourcompany"
    }
  }
}

Global Management

Querying Globals

// Get header configuration
const header = await trpc.globals.getByKey.query({ key: "header" });

// Get all globals
const allGlobals = await trpc.globals.getAll.query();

// Get multiple globals by keys
const navigation = await trpc.globals.getByKeys.query({
  keys: ["header", "footer"]
});

Updating Globals

// Update header settings
await trpc.globals.update.mutate({
  key: "header",
  content: {
    ...existingContent,
    navigation: updatedNavigation
  }
});

Frontend Integration

Globals are typically loaded once and shared across the application:

// Layout component
export default function Layout({ children }: { children: React.ReactNode }) {
  const header = useGlobal("header");
  const footer = useGlobal("footer");
  const seo = useGlobal("seo");

  return (
    <>
      <SEOHead defaults={seo.content.defaultMeta} />
      <Header config={header.content} />
      <main>{children}</main>
      <Footer config={footer.content} />
    </>
  );
}

Caching Strategy

Globals are heavily cached since they change infrequently:

• Browser Cache: 24-hour cache headers
• CDN Cache: Global CDN caching
• Application Cache: In-memory caching
• Static Generation: Pre-built at build time

Globals provide a centralized way to manage site-wide content and settings, ensuring consistency across your entire website while supporting full localization.