generated from gitea_admin/default
244 lines
10 KiB
Markdown
244 lines
10 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/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
|
|
});
|