# Stack
- NUXT 4
- VueJS 3.5
- Tailwindcss pour les pages professionnels et certains styles



# Dev du site en local
## NUXT
Démarrer NUXT
- npm run dev
- URL : http://localhost:3000/

# Variables d'environnement
Elles sont **définies** dans `ecosystem.config.cjs` (PM2) et **consommées** dans `nuxt.config.js` via `runtimeConfig`.

Exemples de variables :
- `NUXT_PUBLIC_STRAPI_URL`
- `NUXT_PUBLIC_SAISON`
- `NUXT_STRAPI_TOKEN`

Utilisation dans le code :
- `runtimeConfig.public.saison`
- `runtimeConfig.public.strapiUrl`

Après modification de `ecosystem.config.cjs` :
- `pm2 reload ecosystem.config.cjs --only wondif_vue`

# Site de développement
## URL
https://2025.orchestre-ile.com/

## Serveur web
Créer un vrai /security.txt (ou /.well-known/security.txt) au lieu de le renvoyer en 404.
  dans le fichier de conf NGINX /etc/nginx/sites-available$ sudo nano wondif_2025
    # Fichier standard optionnel (si tu ne le fournis pas)
    location = /security.txt { return 404; }

# METTRE EN LIGNE LE DEV AVEC GITEA
Serveur GITEA https://git.parisweb.art/

## Du dev vers Gitea
git add .
git commit -m "Mon message de commit"
git push origin main

### Avec VCS
1. Onglet **Source Control**
2. Vérifie la liste **Changes**
3. Clique sur + (stage)
    - fichier par fichier **ou**
    - + à côté de *Changes* (tout)
4. Renseigne un **message de commit**
5. Clique sur ✔️ **Commit**
6. clique sur **Sync Changes**

## Du Gitea vers VPS
1. Se connecter au VPS
2. cd /var/www/wondif_vue
3.
git pull origin main        # récupère le dernier code
si besoin d'ajout de dépendances (ajout bibliothèques)
    npm ci                      # installe / met à jour les dépendances (à exécuter uniquement si nouvelle dépendances installées dans package json)
Si nouvelle variable d'env
    ajouter la variable dans le fichier `more ecosystem.config.cjs` manuellement
npm run build               # rebuild Nuxt
pm2 reload ecosystem.config.cjs --only wondif_vue     # redémarre le process avec les nouvelles variables d'environnement de ecosystem

# URL
/inscriptions/projet_lycee


# ICONES
Il y a un système mis en place pour mettre des icones.
Le système est celui de Google font qui a une font pour les icones.
C'est en mode CDN, je n'ai pas chargé la font.

**Pour choisir une icone** il faut aller sur la page Google font https://fonts.google.com/icons?selected=Material+Symbols+Outlined
- Choisir un icone. Quand on clique dessus on voit des infos sur l'icone. Il faut trouver "Icon name" (tout en bas), récupérer le nom de l'icone.

Ensuite pour **l'afficher sur la page web**.
- On ajoute une balise avec la classe qui appelle la Google font et à l'intérieur le nom de l'icone que l'on a récupéré.
``` javascript
<span class="material-symbols-outlined text-3xl text-outline group-hover:text-primary">download</span>
```
Dans le head de la page il faut ajouter ceci pour donner le chemin CDN
``` javascript
useHead({
    link: [
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap',
      },
    ],
  })
```


# STRAPI
## URL de PROD
bo.orchestre-ile.com

## après modifications des fichiers src/... on rebuild strapiwww
cd strapi_wondif/
NODE_ENV=production npm run build
pm2 list
pm2 restart strapi_wondif
pm2 list



## dev en local
- lancer MAMP pour activer la BD de STRAPI
- lancer : npm run develop
- URL de dev : http://localhost:1337

### vérifier le json de l'enpoint strapi

http://localhost:3000/api/__strapi__/concerts
http://localhost:3000/api/__strapi__/concerts?populate=*
http://localhost:3000/api/__strapi__/concerts?populate[artistes_ondif_concert][populate]=postes_artiste_ondif
http://localhost:3000/api/__strapi__/concerts?populate=*&populate[artistes_ondif_concert][populate]=postes_artiste_ondif
http://localhost:3000/api/__strapi__/concerts?populate[saison_concert]=true&populate[genre_concert]=true&populate[type_audience_concert]=true&populate[direction_ondif_concert][populate]=postes_artiste_ondif&populate[direction_invite_concert][populate]=postes_artiste_invite&populate[artistes_ondif_concert][populate]=postes_artiste_ondif&populate[artistes_invite_concert][populate]=postes_artiste_invite

API pour avoir tout de Concerts
http://localhost:3000/api/__strapi__/concerts?populate[saison_concert]=true&populate[genre_concert]=true&populate[type_audience_concert]=true&populate[direction_ondif_concert][populate]=postes_artiste_ondif&populate[direction_invite_concert][populate]=postes_artiste_invite&populate[artistes_ondif_concert][populate]=postes_artiste_ondif&populate[artistes_invite_concert][populate]=postes_artiste_invite&populate[image_illustration_concert]=true&populate[images_concert]=true&populate[videos_concert]=true&populate[audios_concert]=true&populate[programme_concert]=true&populate[representation_concert][populate]=lieu_representation&populate[liens_youtube_concert]=true

https://bo.orchestre-ile.com/api/concerts?populate[saison_concert]=true&populate[genre_concert]=true&populate[type_audience_concert]=true&populate[direction_ondif_concert][populate]=postes_artiste_ondif&populate[direction_invite_concert][populate]=postes_artiste_invite&populate[artistes_ondif_concert][populate]=postes_artiste_ondif&populate[artistes_invite_concert][populate]=postes_artiste_invite&populate[image_illustration_concert]=true&populate[images_concert]=true&populate[videos_concert]=true&populate[audios_concert]=true&populate[programme_concert]=true&populate[representation_concert][populate]=lieu_representation&populate[liens_youtube_concert]=true

/api/__strapi__/concerts?
populate[saison_concert]=true&
populate[genre_concert]=true&
populate[type_audience_concert]=true&
populate[direction_ondif_concert][populate]=postes_artiste_ondif&
populate[direction_invite_concert][populate]=postes_artiste_invite&
populate[artistes_ondif_concert][populate]=postes_artiste_ondif&
populate[artistes_invite_concert][populate]=postes_artiste_invite&
populate[image_illustration_concert]=true&
populate[images_concert]=true&
populate[videos_concert]=true&
populate[audios_concert]=true&
populate[programme_concert]=true&
populate[representation_concert][populate]=lieu_representation&
populate[liens_youtube_concert]=true


API pour avoir la page Les Missions
https://bo.orchestre-ile.com/api/mission?locale=fr-FR&populate=image_illustration_header
https://bo.orchestre-ile.com/api/mission?locale=fr-FR&populate=*

https://bo.orchestre-ile.com/api/pro-programmer?locale=fr-FR&populate[bios]=true&populate[logos]=true&populate[Contacts]=true&populate[photos_orchestre]=true&populate[musique_chambre][populate][images]=true&populate[musique_chambre][populate][documents]=true&populate[musique_chambre][populate][videos]=true

https://bo.orchestre-ile.com/api/pro-programmer?locale=fr-FR&populate[bios]=true&populate[logos]=true&populate[Contacts]=true&populate[photos_orchestre]=true&populate[musique_chambre][populate][images]=true&populate[musique_chambre][populate][documents]=true&populate[musique_chambre][populate][videos]=true&populate[categorie][populate][evenement][populate][images]=true&populate[categorie][populate][evenement][populate][documents]=true&populate[categorie][populate][evenement][populate][videos]=true

https://bo.orchestre-ile.com/api/pro-programmer?locale=fr-FR&populate[bios]=true&populate[logos]=true&populate[Contacts]=true&populate[photos_orchestre]=true&populate[musique_chambre][populate]=images,documents,videos&populate[categorie][populate][evenement][populate]=images,documents,videos

API Instruments
https://bo.orchestre-ile.com/api/parc-instruments?locale=fr-FR&populate=illustration_instrument


https://bo.orchestre-ile.com/api/home-partout-pour-tous?locale=fr-FR&populate[carte][populate][illustration]=true

https://bo.orchestre-ile.com/api/home-tous-orchestre?locale=fr-FR&populate[carte][populate][illustration]=true

https://bo.orchestre-ile.com/api/home-tous-orchestre?locale=fr-FR&populate[carte][populate][illustration]=true

https://bo.orchestre-ile.com/api/actualites?populate[image_illustration_actu]=true&populate[images_actu]=true&populate[liens_youtube_actu]=true
?populate[saison_concert]=true&populate[genre_concert]=true&populate[type_audience_concert]=true&populate[direction_ondif_concert][populate]=postes_artiste_ondif&populate[direction_invite_concert][populate]=postes_artiste_invite&populate[artistes_ondif_concert][populate]=postes_artiste_ondif&populate[artistes_invite_concert][populate]=postes_artiste_invite&populate[image_illustration_concert]=true&populate[images_concert]=true&populate[videos_concert]=true&populate[audios_concert]=true&populate[programme_concert]=true&populate[representation_concert][populate]=lieu_representation&populate[liens_youtube_concert]=true

j'ai créé le endpoint home-tous-orchestre strapi pour saisir le contenu de cards. Donc peux-tu le remplacer par ce contenu strapi ?

### Afficher les données récupérées ou les erreurs dans la console
  const { items: scolaires, pending, error } = useStrapi(
    endpoint,
    {
      locale: "fr-FR",
      populate,
      limit: 1,
    }
  )
  console.log("scolaires:", scolaires.value)
  watchEffect(() => {
    console.log("client ?", import.meta.client)
    console.log("server ?", import.meta.server)
    console.log("pending:", pending.value)
    console.log("error:", error.value)
    console.log("scolaires:", scolaires.value)
  })

  watchEffect(() => {
    if (!pending.value && scolaires.value?.length) {
      console.log("scolaires dans le watch effect:", scolaires.value)
    }
  })

## SAISIE DU CONTENU
### slug
- concert
    - mettre le nom du concert avec la date

# CSS
## LAYOUT

@media (min-width: 0px) {
    max-width: 100%;
}
@media (min-width: 600px) {
    max-width: 580px;
}
@media (min-width: 700px) {
    max-width: 660px;
}
@media (min-width: 800px) {
    max-width: 780px;
}   
@media (min-width: 900px) {
    max-width: 860px;
}
@media (min-width: 1000px) {
    max-width: 950px;
}
@media (min-width: 1100px) {
    max-width: 1020px;
}
@media (min-width: 1200px) {
    max-width: 1100px;
}
@media (min-width: 1300px) {
    max-width: 1200px;
}
@media (min-width: 1400px) {
    max-width: 1300px;
}
@media (min-width: 1500px) {
    max-width: 1400px;
}

## débordement = les identifier visuellement
code javascript, à coller dans la partie "console" du navigateur, pour mettre cette ligne outile rouge et le backgroud à tous les éléments de body pour voir les débordements
Array.from(document.querySelectorAll('body > *')).forEach(el => {
  el.style.outline = '1px solid red';
  el.style.backgroundColor = 'rgba(255, 0, 0, 0.3)'; // Utilisation de rgba pour une semi-transparence
});