# Tq.HeaderFooter

Header et Footer de Télé-Québec.

## Version des logiciels

- Node : ^20.16.0
- PNPM : ^9.1.1

## Guide de démarrage rapide

### Pre-requis

    pnpm install

### Pour développer / tester

    pnpm dev

### Pour build\*

    pnpm build

Crée les fichiers js et cjs dans le dossier dist.

\*Le build est fait automatiquement au moment du déploiment.

### Pour déployer

Une fois les changements validés, faire partir la pipeline.

- Si les changements sont sur la branche master, la version sera mise à jour normalement.
- Si les changements sont sur la branche develop, la release sera marquée comme beta.
- Si les changements sont sur une branche autre, la release sera marquée comme alpha.

Dans le projet TQ.HeaderFooter dans pipelines, sélectionner TQ.HeaderFooter et Run pipeline.
Dans le panneau latéral sélectionner:

- La branche avec les derniers changements à déployer.
- Si le changement est mineur, majeur ou un simple patch.
- Puis cliquer sur Run.

## Intégration dans un site

### Ajout via un script

    <tq-header />
    <script
        src="https://lib.tele.quebec/@telequebec/headerfooter/latest/browser/tq-header.js?{DateTime.Now.ToString("yyyyMMddHH")}""></script>

et/ou

    <tq-footer />
    <script
        src="https://lib.tele.quebec/@telequebec/headerfooter/latest/browser/tq-footer.js?{DateTime.Now.ToString("yyyyMMddHH")}""></script>

### Ajout du package

Installer via la commande

    pnpm add @telequebec/tq-headerfooter

Selon le besoin, importer le module

    import "@telequebec/tq-headerfooter/tq-header";
    import "@telequebec/tq-headerfooter/tq-footer";

ou importer via require (CJS)

    require("@telequebec/tq-headerfooter/tq-header");
    require("@telequebec/tq-headerfooter/tq-footer");

Pour Next ou autre SSR

    useEffect(() => {
        import("@telequebec/tq-headerfooter/tq-header");
        import("@telequebec/tq-headerfooter/tq-footer");
    }, []);

Ajouter le web-component dans la page à l'endroit voulu

    <tq-header></tq-header>

ou

    <tq-footer></tq-footer>

### Configuration du Footer

Le footer nécessite un endpoint GraphQL pour charger les liens dynamiques. Passez l'URL de votre API GraphQL via l'attribut `graphql-endpoint`:

    <tq-footer></tq-footer>

Le composant effectuera automatiquement les requêtes suivantes:

- `footer-gauche` - Pour les liens principaux (programmation, horaire, etc.)
- `footer-centre` - Pour les liens légaux (vie privée, conditions, etc.)

Les liens sociaux restent statiques et sont inclus dans le composant.