Add automatic browser language detection and remove Tempo script error

[Copilot]

Summary

This PR adds automatic browser language detection to provide a better user experience by loading the site in the user's preferred language, and removes the Tempo script that was causing ERR_ADDRESS_INVALID console errors.

Changes

1. Browser Language Detection (src/hooks/useLanguage.ts)

Added intelligent language detection that prioritizes user preference while respecting browser settings:

• First-time visitors: Site automatically loads in English for English browsers, French for all others
• Returning users: Previously saved language preference takes priority
• Manual override: Users can toggle language, and the choice is persisted to localStorage

The implementation uses a getBrowserLanguage() helper that checks if navigator.language starts with "en" to detect English speakers, defaulting to French otherwise.

const getBrowserLanguage = (): 'fr' | 'en' => {
  const browserLang = navigator.language.toLowerCase();
  if (browserLang.startsWith('en')) {
    return 'en';
  }
  return 'fr';
};

2. Removed Tempo Script (index.html)

Removed the problematic Tempo error-handling script that was causing ERR_ADDRESS_INVALID errors in the browser console:

- <script src="https://api.tempolabs.ai/proxy-asset?url=https://storage.googleapis.com/tempo-public-assets/error-handling.js"></script>

Testing

✅ Browser language detection: Verified site loads in English for English browsers
✅ User preference persistence: Language toggle choice persists across sessions
✅ Fallback behavior: Clearing localStorage correctly falls back to browser detection
✅ Console errors: No more ERR_ADDRESS_INVALID errors
✅ Build & lint: All checks pass successfully
✅ Security: No vulnerabilities detected by CodeQL

Screenshots

English (automatically detected from browser):

French (after manual toggle):

Impact

This provides a significantly improved user experience:

• English-speaking visitors immediately see content in their language
• French-speaking visitors see French by default
• All users can manually override and have their preference remembered
• Clean console with no extraneous errors

Original prompt

Add Automatic Browser Language Detection + Fix Tempo Script

Objectives

1. Add automatic browser language detection so the site loads in English if the user's browser is set to English, otherwise French
2. Remove the Tempo script from index.html that's still causing the ERR_ADDRESS_INVALID error

Changes Needed

1. Update useLanguage.ts - Add Browser Language Detection

File: src/hooks/useLanguage.ts

Replace entire file with:

import { useState, useCallback, useEffect } from 'react';
import { translations } from '../config/i18n';

// Detect browser language on first load
const getBrowserLanguage = (): 'fr' | 'en' => {
  const browserLang = navigator.language.toLowerCase();
  
  // Check if English (en, en-US, en-GB, etc.)
  if (browserLang.startsWith('en')) {
    return 'en';
  }
  
  // Default to French for all other languages
  return 'fr';
};

export const useLanguage = () => {
  // Initialize with browser language or saved preference
  const [language, setLanguage] = useState<'fr' | 'en'>(() => {
    // Check localStorage first (user's manual choice)
    const savedLang = localStorage.getItem('preferredLanguage');
    if (savedLang === 'fr' || savedLang === 'en') {
      return savedLang;
    }
    
    // Otherwise use browser language
    return getBrowserLanguage();
  });
  
  const [isTransitioning, setIsTransitioning] = useState(false);
  const [direction, setDirection] = useState<'up' | 'down'>('up');

  const toggleLanguage = useCallback(() => {
    setIsTransitioning(true);
    setDirection(prev => prev === 'up' ? 'down' : 'up');
    
    setTimeout(() => {
      setLanguage(prev => {
        const newLang = prev === 'fr' ? 'en' : 'fr';
        // Save user's manual choice to localStorage
        localStorage.setItem('preferredLanguage', newLang);
        return newLang;
      });
    }, 400);
  }, []);

  useEffect(() => {
    if (isTransitioning) {
      const timer = setTimeout(() => {
        setIsTransitioning(false);
      }, 400);
      return () => clearTimeout(timer);
    }
  }, [isTransitioning]);

  return {
    language,
    toggleLanguage,
    isTransitioning,
    direction,
    t: translations[language]
  };
};

2. Remove Tempo Script from index.html

File: index.html (line 17)

Current code:

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="Carte de visite numérique de Hubert Larose-Surprenant - Technicien Informatique"
    />
    <meta name="theme-color" content="#1d4ed8" />
    <title>Hubert Larose-Surprenant | Technicien Informatique</title>
  </head>
  <body class="overflow-hidden">
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
    <script src="https://api.tempolabs.ai/proxy-asset?url=https://storage.googleapis.com/tempo-public-assets/error-handling.js"></script>
  </body>
</html>

Remove line 17 entirely:

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="Carte de visite numérique de Hubert Larose-Surprenant - Technicien Informatique"
    />
    <meta name="theme-color" content="#1d4ed8" />
    <title>Hubert Larose-Surprenant | Technicien Informatique</title>
  </head>
  <body class="overflow-hidden">
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

How Language Detection Works

First Visit:

• Browser language = English → Site loads in English
• Browser language = French → Site loads in French
• Browser language = any other → Site loads in French (default)

User Toggles Language:

• Choice saved to localStorage
• Preference persists across sessions

Next Visit:

• If user has toggled before → Uses saved preference
• Otherwise → Detects browser language again

Expected Results

✅ Automatic language detection based on browser settings
✅ No Tempo errors in console (ERR_ADDRESS_INVALID fixed)
✅ User preference saved when manually toggling
✅ Smooth language transitions maintained
✅ English speakers see English automatically
✅ French speakers see French automatically

Testing

After deployment:

1. English browser: Open site → Should load in English
2. French browser: Open site → Should load in French
3. Toggle language: Choice should persist on refresh
4. Console: No Tempo errors
5. LocalStorage: Check for preferredLanguage key after toggle

Files Changed (2 total)

• src/hooks/useLanguage.ts - Add browser language detection
• index.html - Remove Tempo script causing error

This pull request was created as a result of the following prompt from Copilot chat.

Add Automatic Browser Language Detection + Fix Tempo Script

Objectives

1. Add automatic browser language detection so the site loads in English if the user's browser is set to English, otherwise French
2. Remove the Tempo script from index.html that's still causing the ERR_ADDRESS_INVALID error

Changes Needed

1. Update useLanguage.ts - Add Browser Language Detection

File: src/hooks/useLanguage.ts

Replace entire file with:

import { useState, useCallback, useEffect } from 'react';
import { translations } from '../config/i18n';

// Detect browser language on first load
const getBrowserLanguage = (): 'fr' | 'en' => {
  const browserLang = navigator.language.toLowerCase();
  
  // Check if English (en, en-US, en-GB, etc.)
  if (browserLang.startsWith('en')) {
    return 'en';
  }
  
  // Default to French for all other languages
  return 'fr';
};

export const useLanguage = () => {
  // Initialize with browser language or saved preference
  const [language, setLanguage] = useState<'fr' | 'en'>(() => {
    // Check localStorage first (user's manual choice)
    const savedLang = localStorage.getItem('preferredLanguage');
    if (savedLang === 'fr' || savedLang === 'en') {
      return savedLang;
    }
    
    // Otherwise use browser language
    return getBrowserLanguage();
  });
  
  const [isTransitioning, setIsTransitioning] = useState(false);
  const [direction, setDirection] = useState<'up' | 'down'>('up');

  const toggleLanguage = useCallback(() => {
    setIsTransitioning(true);
    setDirection(prev => prev === 'up' ? 'down' : 'up');
    
    setTimeout(() => {
      setLanguage(prev => {
        const newLang = prev === 'fr' ? 'en' : 'fr';
        // Save user's manual choice to localStorage
        localStorage.setItem('preferredLanguage', newLang);
        return newLang;
      });
    }, 400);
  }, []);

  useEffect(() => {
    if (isTransitioning) {
      const timer = setTimeout(() => {
        setIsTransitioning(false);
      }, 400);
      return () => clearTimeout(timer);
    }
  }, [isTransitioning]);

  return {
    language,
    toggleLanguage,
    isTransitioning,
    direction,
    t: translations[language]
  };
};

2. Remove Tempo Script from index.html

File: index.html (line 17)

Current code:

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="Carte de visite numérique de Hubert Larose-Surprenant - Technicien Informatique"
    />
    <meta name="theme-color" content="#1d4ed8" />
    <title>Hubert Larose-Surprenant | Technicien Informatique</title>
  </head>
  <body class="overflow-hidden">
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
    <script src="https://api.tempolabs.ai/proxy-asset?url=https://storage.googleapis.com/tempo-public-assets/error-handling.js"></script>
  </body>
</html>

Remove line 17 entirely:

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="Carte de visite numérique de Hubert Larose-Surprenant - Technicien Informatique"
    />
    <meta name="theme-color" content="#1d4ed8" />
    <title>Hubert Larose-Surprenant | Technicien Informatique</title>
  </head>
  <body class="overflow-hidden">
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

How Language Detection Works

First Visit:

• Browser language = English → Site loads in English
• Browser language = French → Site loads in French
• Browser language = any other → Site loads in French (default)

User Toggles Language:

• Choice saved to localStorage
• Preference persists across sessions

Next Visit:

• If user has toggled before → Uses saved preference
• Otherwise → Detects browser language again

Expected Results

✅ Automatic language detection based on browser settings
✅ No Tempo errors in console (ERR_ADDRESS_INVALID fixed)
✅ User preference saved when manually toggling
✅ Smooth language transitions maintained
✅ English speakers see English automatically
✅ French speakers see French automatically

Testing

After deployment:

1. English browser: Open site → Should load in English
2. French browser: Open site → Should load in French
3. Toggle language: Choice should persist on refresh
4. Console: No Tempo errors
5. LocalStorage: Check for preferredLanguage key after toggle

Files Changed (2 total)

• src/hooks/useLanguage.ts - Add browser language detection
• index.html - Remove Tempo script causing error

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[docs-page]

To view this pull requests documentation preview, visit the following URL:

docs.page/hlsitechio/hlsitech.com~21

Documentation is deployed and generated using docs.page.

[netlify]

✅ Deploy Preview for hlsitech ready!

Name	Link
🔨 Latest commit	6d7ecef
🔍 Latest deploy log	https://app.netlify.com/projects/hlsitech/deploys/68fa4bd091e8a300082525e6
😎 Deploy Preview	https://deploy-preview-21.hlsitech.com
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.