# Stack
- NUXT 4
- VueJS 3.5

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

# 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
cd /var/www/wondif_vue

git pull origin main        # récupère le dernier code
npm ci                      # installe / met à jour les dépendances
npm run build               # rebuild Nuxt
pm2 restart wondif_vue     # redémarre le process

# 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

/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

| Niveau 1 | Niveau 2 | Niveau 3 |
|----------|----------|----------|
| saison_concert| | |
| genre_concert| | |
| type_audience_concert| | |
| direction_ondif_concert| postes_artiste_ondif| |
| direction_invite_concert|postes_artiste_invite| |
| artistes_ondif_concert| postes_artiste_ondif| |
| artistes_invite_concert| postes_artiste_invite| |
| A| B| C|
| A| B| C|
| A| B| C|
| A| B| C|
| A| B| C|
| A| B| C|
| A| B| C|

## 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
});



  @media (max-width: 980px) {
    .decalage_gauche {
      margin-left: -23px;
    }
  }