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
- Onglet Source Control
- Vérifie la liste Changes
- Clique sur + (stage)
- fichier par fichier ou
-
- à côté de Changes (tout)
- Renseigne un message de commit
- Clique sur ✔️ Commit
- 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; } }