generated from gitea_admin/default
402 lines
16 KiB
Markdown
402 lines
16 KiB
Markdown
# 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
|
|
- Lycée
|
|
- /inscriptions/projet_lycee
|
|
- pour arrêter les inscriptions renommer le fichier "projet_lycee.vue" en "projet_lycee_termine.vue"
|
|
- pour démarrer les inscriptions renommer le fichier "projet_lycee_termine.vue" en "projet_lycee.vue"
|
|
|
|
|
|
# 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
|
|
|
|
https://bo.orchestre-ile.com/api/ressources-pedagogiques?populate[illustration_ressource]=true&populate[document_ressource]=true
|
|
|
|
https://bo.orchestre-ile.com/api/disques?populate[illustration_disque]=true
|
|
|
|
https://bo.orchestre-ile.com/api/home-cards?populate[illustration]=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
|
|
});
|
|
|
|
## Export Excel des inscriptions Académie
|
|
|
|
Le script `scripts/export-academie-excel.js` génère un fichier `.xlsx` depuis la table MySQL `academie_orchestre_candidatures`, puis l'envoie dans Microsoft 365 via Microsoft Graph.
|
|
|
|
### Migration SQL
|
|
|
|
À exécuter une fois sur la base :
|
|
|
|
```sql
|
|
source server/database/2026-06-15_academie_excel_export.sql;
|
|
source server/database/2026-06-15_rename_academie_current_fields.sql;
|
|
```
|
|
|
|
### Variables d'environnement
|
|
|
|
Variables MySQL déjà utilisées par Nuxt :
|
|
|
|
```env
|
|
NUXT_MYSQL_HOST=...
|
|
NUXT_MYSQL_PORT=3306
|
|
NUXT_MYSQL_DATABASE=...
|
|
NUXT_MYSQL_USER=...
|
|
NUXT_MYSQL_PASSWORD=...
|
|
```
|
|
|
|
Variables Microsoft Graph à ajouter :
|
|
|
|
```env
|
|
MICROSOFT_TENANT_ID=...
|
|
MICROSOFT_CLIENT_ID=...
|
|
MICROSOFT_CLIENT_SECRET=...
|
|
GRAPH_DRIVE_ID=...
|
|
GRAPH_EXCEL_UPLOAD_PATH=Académie d'orchestre/Candidatures/inscriptions-academie-{date}.xlsx
|
|
ACADEMIE_EXCEL_REPORT_EMAIL=...
|
|
```
|
|
|
|
Optionnel :
|
|
|
|
```env
|
|
GRAPH_EXCEL_ITEM_ID=...
|
|
ACADEMIE_EXCEL_EXPORT_MODE=all
|
|
ACADEMIE_EXCEL_LOCAL_OUTPUT=tmp/inscriptions-academie-{date}.xlsx
|
|
ACADEMIE_EXCEL_SKIP_UPLOAD=1
|
|
```
|
|
|
|
Modes :
|
|
|
|
- `ACADEMIE_EXCEL_EXPORT_MODE=all` : exporte toutes les inscriptions dans un fichier complet. Mode recommandé pour commencer.
|
|
- `ACADEMIE_EXCEL_EXPORT_MODE=pending` : exporte seulement les lignes non exportées, puis les marque comme exportées.
|
|
- `{date}` dans `GRAPH_EXCEL_UPLOAD_PATH` ou `ACADEMIE_EXCEL_LOCAL_OUTPUT` est remplacé par la date du jour au format `YYYY-MM-DD`, par exemple `inscriptions-academie-2026-06-15.xlsx`.
|
|
- Ne renseigne pas `GRAPH_EXCEL_ITEM_ID` si tu veux créer un nouveau fichier daté chaque jour : cette variable sert à remplacer un fichier SharePoint existant.
|
|
- `ACADEMIE_EXCEL_REPORT_EMAIL` reçoit un email de compte rendu après chaque export, ou un email d'erreur si le traitement échoue.
|
|
|
|
### Test local sans upload
|
|
|
|
```bash
|
|
ACADEMIE_EXCEL_SKIP_UPLOAD=1 ACADEMIE_EXCEL_LOCAL_OUTPUT=tmp/inscriptions-academie-{date}.xlsx npm run export:academie-excel
|
|
```
|
|
|
|
### Cron nocturne
|
|
|
|
Exemple pour un export tous les jours à 02:00 :
|
|
|
|
```bash
|
|
0 2 * * * cd /var/www/ton-projet && npm run export:academie-excel >> /var/log/academy-export.log 2>&1
|
|
```
|
|
|
|
## Export Excel des demandes projet lycée
|
|
|
|
Le script `scripts/export-lycee-excel.js` génère un fichier `.xlsx` depuis la table MySQL `projet_lycee_demandes`, puis l'envoie dans Microsoft 365 via Microsoft Graph.
|
|
|
|
### Migration SQL
|
|
|
|
À exécuter une fois sur la base si tu veux utiliser le mode `pending` :
|
|
|
|
```sql
|
|
source server/database/2026-06-16_lycee_excel_export.sql;
|
|
```
|
|
|
|
### Variables d'environnement
|
|
|
|
Les variables MySQL et Microsoft Graph communes sont les mêmes que pour l'export Académie :
|
|
|
|
```env
|
|
NUXT_MYSQL_HOST=...
|
|
NUXT_MYSQL_PORT=3306
|
|
NUXT_MYSQL_DATABASE=...
|
|
NUXT_MYSQL_USER=...
|
|
NUXT_MYSQL_PASSWORD=...
|
|
MICROSOFT_TENANT_ID=...
|
|
MICROSOFT_CLIENT_ID=...
|
|
MICROSOFT_CLIENT_SECRET=...
|
|
GRAPH_DRIVE_ID=...
|
|
```
|
|
|
|
Variables lycée à ajouter :
|
|
|
|
```env
|
|
LYCEE_GRAPH_EXCEL_UPLOAD_PATH=Projets lycee/Demandes/inscriptions-lycee-{date}.xlsx
|
|
LYCEE_EXCEL_REPORT_EMAIL=...
|
|
```
|
|
|
|
Optionnel :
|
|
|
|
```env
|
|
LYCEE_GRAPH_EXCEL_ITEM_ID=...
|
|
LYCEE_EXCEL_EXPORT_MODE=all
|
|
LYCEE_EXCEL_LOCAL_OUTPUT=tmp/inscriptions-lycee-{date}.xlsx
|
|
LYCEE_EXCEL_SKIP_UPLOAD=1
|
|
```
|
|
|
|
Modes :
|
|
|
|
- `LYCEE_EXCEL_EXPORT_MODE=all` : exporte toutes les demandes dans un fichier complet, puis met à jour `exported_to_excel_at` et `export_error`.
|
|
- `LYCEE_EXCEL_EXPORT_MODE=pending` : exporte seulement les lignes non exportées, puis met aussi `exported_to_excel` à `1`. Nécessite la migration SQL ci-dessus.
|
|
- En cas d'échec après lecture des demandes, `export_error` est renseigné sur les lignes concernées.
|
|
- `{date}` dans `LYCEE_GRAPH_EXCEL_UPLOAD_PATH` ou `LYCEE_EXCEL_LOCAL_OUTPUT` est remplacé par la date du jour au format `YYYY-MM-DD`.
|
|
- `LYCEE_EXCEL_REPORT_EMAIL` reçoit un email de compte rendu après chaque export, ou un email d'erreur si le traitement échoue.
|
|
|
|
### Test local sans upload
|
|
|
|
```bash
|
|
LYCEE_EXCEL_SKIP_UPLOAD=1 LYCEE_EXCEL_LOCAL_OUTPUT=tmp/inscriptions-lycee-{date}.xlsx npm run export:lycee-excel
|
|
```
|
|
|
|
### Cron nocturne
|
|
|
|
Exemple pour un export tous les jours à 02:15 :
|
|
|
|
```bash
|
|
15 2 * * * cd /var/www/ton-projet && npm run export:lycee-excel >> /var/log/lycee-export.log 2>&1
|
|
```
|
|
|
|
### nouveau type de fichier Excel qui inclut un tableau
|
|
```bash
|
|
ACADEMIE_EXCEL_SKIP_UPLOAD=1 \
|
|
ACADEMIE_EXCEL_LOCAL_OUTPUT=exports/test-academie.xlsx \
|
|
node scripts/export-academie-excel.js
|
|
```
|
|
|
|
|
|
|
|
# Couleurs
|
|
Ajouter de la couleur dans du texte blocks strapi
|
|
dire à la personne qui saisie de mettre ceci<span data-color="brand_rouge">95</span> et le configurer VueJS
|