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_URLNUXT_PUBLIC_SAISONNUXT_STRAPI_TOKEN
Utilisation dans le code :
runtimeConfig.public.saisonruntimeConfig.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
- 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
- Se connecter au VPS
- cd /var/www/wondif_vue
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é.
<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
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
/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=*
API Instruments https://bo.orchestre-ile.com/api/parc-instruments?locale=fr-FR&populate=illustration_instrument
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 });