generated from gitea_admin/default
artistes
This commit is contained in:
665
README.md
665
README.md
@@ -3,7 +3,7 @@
|
||||
- VueJS 3.5
|
||||
|
||||
# Dev du site en local
|
||||
# NUXT
|
||||
## NUXT
|
||||
Démarrer NUXT
|
||||
- npm run dev
|
||||
- URL : http://localhost:3000/
|
||||
@@ -12,7 +12,6 @@ Démarrer NUXT
|
||||
## URL
|
||||
https://2025.orchestre-ile.com/
|
||||
|
||||
# TODO
|
||||
## 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
|
||||
@@ -107,6 +106,10 @@ populate[liens_youtube_concert]=true
|
||||
| A| B| C|
|
||||
| A| B| C|
|
||||
|
||||
## SAISIE DU CONTENU
|
||||
### slug
|
||||
- concert
|
||||
- mettre le nom du concert avec la date
|
||||
|
||||
# CSS
|
||||
## LAYOUT
|
||||
@@ -153,655 +156,9 @@ Array.from(document.querySelectorAll('body > *')).forEach(el => {
|
||||
});
|
||||
|
||||
|
||||
1 sudo nano ~/.bashrc
|
||||
2 exit
|
||||
3 ll
|
||||
4 date
|
||||
5 sudo ln -sf /usr/share/zoneinfo/Europe/Paris /etc/localtime
|
||||
6 date
|
||||
7 cd /
|
||||
8 sudo apt update
|
||||
9 apt list --upgradable
|
||||
10 sudo apt upgrade
|
||||
11 apt list --upgradable
|
||||
12 sudo nano /etc/ssh/sshd_config
|
||||
13 sudo systemctl restart sshd
|
||||
14 exit
|
||||
15 sudo apt install fail2ban
|
||||
16 cd /etc/fail2ban/
|
||||
17 ll
|
||||
18 sudo nano /etc/fail2ban/jail.conf
|
||||
19 sudo service fail2ban reload
|
||||
20 sudo service fail2ban status
|
||||
21 sudo service fail2ban start
|
||||
22 sudo service fail2ban status
|
||||
23 fail2ban-client status
|
||||
24 ll
|
||||
25 www
|
||||
26 cd /
|
||||
27 ll
|
||||
28 www
|
||||
29 cd var
|
||||
30 ll
|
||||
31 date
|
||||
32 cd /
|
||||
33 sudo apt update
|
||||
34 apt list --upgradable
|
||||
35 sudo apt upgrade
|
||||
36 cd /etc/fail2ban/
|
||||
37 sudo service fail2ban status
|
||||
38 systemctl status nginx
|
||||
39 sudo apt install nginx
|
||||
40 systemctl status nginx
|
||||
41 sudo systemctl enable nginx
|
||||
42 sudo systemctl is-enabled nginx
|
||||
43 sudo nano /etc/nginx/nginx.conf
|
||||
44 sudo systemctl reload nginx
|
||||
45 systemctl status nginx
|
||||
46 www
|
||||
47 ll
|
||||
48 cd ..
|
||||
49 ll
|
||||
50 cd www
|
||||
51 ll
|
||||
52 cd html/
|
||||
53 ll
|
||||
54 cd www
|
||||
55 ll
|
||||
56 www
|
||||
57 ll
|
||||
58 sudo mkdir wondif_2025
|
||||
59 ll
|
||||
60 cd wondif_2025/
|
||||
61 sudo nano index.html
|
||||
62 ll
|
||||
63 more index.html
|
||||
64 cd /etc/nginx/sites-available
|
||||
65 ll
|
||||
66 de default
|
||||
67 more default
|
||||
68 sudo nano wondif_2025
|
||||
69 ll
|
||||
70 more wondif_2025
|
||||
71 cd /etc/nginx/sites-enabled
|
||||
72 ll
|
||||
73 sudo ln -s /etc/nginx/sites-available/wondif_2025 /etc/nginx/sites-enabled/
|
||||
74 ll
|
||||
75 sudo nginx -t
|
||||
76 systemctl restart nginx
|
||||
77 systemctl status nginx
|
||||
78 www
|
||||
79 ll
|
||||
80 cd wondif_2025/
|
||||
81 ll
|
||||
82 pwd
|
||||
83 cd /etc/nginx/sites-available
|
||||
84 ll
|
||||
85 more wondif_2025
|
||||
86 www
|
||||
87 ll
|
||||
88 cd wondif_2025/
|
||||
89 ll
|
||||
90 sudo nano index.html
|
||||
91 www
|
||||
92 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
|
||||
93 exit
|
||||
94 python3 --version
|
||||
95 sudo apt install certbot python3-certbot-nginx
|
||||
96 cd /etc/nginx/sites-available
|
||||
97 ll
|
||||
98 sudo nano strapi_wondif
|
||||
99 cd /etc/nginx/sites-enabled
|
||||
100 ll
|
||||
101 sudo ln -s /etc/nginx/sites-available/strapi_wondif /etc/nginx/sites-enabled/
|
||||
102 ll
|
||||
103 sudo nginx -t
|
||||
104 systemctl restart nginx
|
||||
105 systemctl status nginx
|
||||
106 cd /etc/nginx/sites-available
|
||||
107 sudo certbot --nginx -d 2025.orchestre-ile.com
|
||||
108 ll
|
||||
109 more wondif_2025
|
||||
110 sudo certbot --nginx -d bo.orchestre-ile.com
|
||||
111 ll
|
||||
112 more strapi_wondif
|
||||
113 sudo certbot certificates
|
||||
114 sudo nginx -t
|
||||
115 systemctl restart nginx
|
||||
116 systemctl status nginx
|
||||
117 ll
|
||||
118 sudo nano wondif_2025
|
||||
119 systemctl restart nginx
|
||||
120 systemctl status nginx
|
||||
121 www
|
||||
122 nvm --version
|
||||
123 nvm ls-remote
|
||||
124 nvm install 22.18.0
|
||||
125 node -v
|
||||
126 corepack enable yarn
|
||||
127 yarn -v
|
||||
128 www
|
||||
129 yarn global add pm2
|
||||
130 pm2 start
|
||||
131 pm2 list
|
||||
132 cd /
|
||||
133 pm2 list
|
||||
134 yarn global bin
|
||||
135 more ~/.bashrc
|
||||
136 sudo nano ~/.bashrc
|
||||
137 nano ~/.bashrc
|
||||
138 source ~/.bashrc
|
||||
139 pm2 start
|
||||
140 pm2 list
|
||||
141 mysql -u root -p
|
||||
142 cd /
|
||||
143 ll
|
||||
144 sudo apt install gnupg
|
||||
145 cd /home/debian
|
||||
146 wget https://dev.mysql.com/get/mysql-apt-config_0.8.34-1_all.deb // version du 04/08/2025
|
||||
147 ll
|
||||
148 sudo dpkg -i mysql-apt-config*
|
||||
149 apt update
|
||||
150 sudo apt update --allow-insecure-repositories
|
||||
151 sudo apt-get upgrade
|
||||
152 sudo apt update
|
||||
153 sudo apt install mysql-server
|
||||
154 sudo systemctl status mysql
|
||||
155 sudo nano /etc/mysql/mysql.conf.d/mysqld.cnf
|
||||
156 sudo systemctl restart mysql
|
||||
157 sudo systemctl status mysql
|
||||
158 mysql -u root -p
|
||||
159 sav
|
||||
160 ll
|
||||
161 sudo nano strapi_wondif
|
||||
162 sudo nginx -t
|
||||
163 sudo nano strapi_wondif
|
||||
164 www
|
||||
165 ll
|
||||
166 cd strapi_wondif/
|
||||
167 ll
|
||||
168 rm strapi_wondif.js
|
||||
169 ll
|
||||
170 sav
|
||||
171 ll
|
||||
172 sudo nginx -t
|
||||
173 more strapi_wondif
|
||||
174 sudo nano strapi_wondif
|
||||
175 sudo nginx -t
|
||||
176 sudo nano strapi_wondif
|
||||
177 systemctl restart nginx
|
||||
178 systemctl status nginx
|
||||
179 www
|
||||
180 ll
|
||||
181 cd strapi_wondif/
|
||||
182 ll
|
||||
183 more .env
|
||||
184 www
|
||||
185 ll
|
||||
186 cd /var
|
||||
187 ll
|
||||
188 chown debian www
|
||||
189 ll
|
||||
190 sudo chown debian www
|
||||
191 wwww
|
||||
192 www
|
||||
193 ll
|
||||
194 yarn create strapi
|
||||
195 ll
|
||||
196 cd strapi_wondif/
|
||||
197 ll
|
||||
198 sudo nano strapi_wondif.js
|
||||
199 yarn strapi_wondif start
|
||||
200 ll
|
||||
201 more package.json
|
||||
202 NODE_OPTIONS="--max-old-space-size=2048" NODE_ENV=production yarn build
|
||||
203 yarn run start
|
||||
204 ll
|
||||
205 pm2 start yarn --name strapi_wondif -- start
|
||||
206 pm2 logs strapi_wondif
|
||||
207 pm2 list
|
||||
208 pm2 logs strapi_wondif
|
||||
209 pm2 list
|
||||
210 pm2 save
|
||||
211 pm2 startup systemd
|
||||
212 sudo env PATH=$PATH:/home/debian/.nvm/versions/node/v22.18.0/bin /home/debian/.config/yarn/global/node_modules/pm2/bin/pm2 startup systemd -u debian --hp /home/debian
|
||||
213 pm2 list
|
||||
214 ll
|
||||
215 date
|
||||
216 cd /
|
||||
217 sudo apt update
|
||||
218 sudo apt list --upgradable
|
||||
219 sudo apt upgrade
|
||||
220 sudo apt update
|
||||
221 sudo iptables -L
|
||||
222 sudo apt install fail2ban
|
||||
223 cd /etc/fail2ban/
|
||||
224 ls
|
||||
225 ll
|
||||
226 cd /var/log/fail2ban.log
|
||||
227 cd /var/log/
|
||||
228 ll
|
||||
229 more fail2ban.log
|
||||
230 fail2ban-client status
|
||||
231 sudo fail2ban-client status
|
||||
232 sudo apt-get install net-tools
|
||||
233 netstat -a
|
||||
234 ls
|
||||
235 cd /
|
||||
236 ls
|
||||
237 cd var
|
||||
238 ls
|
||||
239 ll
|
||||
240 cd www
|
||||
241 ll
|
||||
242 sav
|
||||
243 ll
|
||||
244 more wondif_2025
|
||||
245 ll
|
||||
246 sudo nano wondif_media
|
||||
247 more wondif_media
|
||||
248 sudo nano wondif_media
|
||||
249 more wondif_media
|
||||
250 cd /etc/nginx/sites-enabled
|
||||
251 sudo ln -s /etc/nginx/sites-available/wondif_media /etc/nginx/sites-enabled/
|
||||
252 ll
|
||||
253 sudo certbot --nginx -d media.orchestre-ile.com
|
||||
254 sav
|
||||
255 ll
|
||||
256 more wondif_media
|
||||
257 sudo nginx -t
|
||||
258 systemctl restart nginx
|
||||
259 systemctl status nginx
|
||||
260 www
|
||||
261 ll
|
||||
262 pm2
|
||||
263 pm2 list
|
||||
264 ls
|
||||
265 cd strapi_wondif/
|
||||
266 ll
|
||||
267 pwd
|
||||
268 npm install @strapi/provider-upload-aws-s3 --save
|
||||
269 ls
|
||||
270 ll
|
||||
271 cd config/
|
||||
272 ll
|
||||
273 more plugins.js
|
||||
274 sudo nano plugins.js
|
||||
275 ll
|
||||
276 cd ;;
|
||||
277 cd..
|
||||
278 ll
|
||||
279 cd ..
|
||||
280 ll
|
||||
281 sudo nano .env
|
||||
282 npm run build
|
||||
283 npm run start
|
||||
284 ll
|
||||
285 pm2 list
|
||||
286 pm2 restart strapi_wondif
|
||||
287 ll
|
||||
288 cd config/
|
||||
289 ll
|
||||
290 more plugins.js
|
||||
291 sudo nano plugins.js
|
||||
292 pm2 restart strapi_wondif
|
||||
293 sudo nano plugins.js
|
||||
294 sav
|
||||
295 ll
|
||||
296 ls
|
||||
297 sudo nano strapi_wondif
|
||||
298 sudo nano wondif_media
|
||||
299 sudo nginx -t
|
||||
300 sudo systemctl reload nginx
|
||||
301 pm2 restart strapi_wondif
|
||||
302 www
|
||||
303 ll
|
||||
304 cd strapi_wondif/
|
||||
305 ll
|
||||
306 cd config/
|
||||
307 ll
|
||||
308 sudo nano middlewares.js
|
||||
309 pm2 restart strapi_wondif
|
||||
310 pm2 stop strapi_wondif
|
||||
311 npm run build
|
||||
312 pm2 start strapi_wondif
|
||||
313 www
|
||||
314 ll
|
||||
315 cd wondif_2025/
|
||||
316 pwd
|
||||
317 ll
|
||||
318 sav
|
||||
319 ll
|
||||
320 more wondif_2025
|
||||
321 www
|
||||
322 ll
|
||||
323 cd wondif_2025/
|
||||
324 ll
|
||||
325 cd ..
|
||||
326 ll
|
||||
327 mv wondif_2025 wondif_2025_old
|
||||
328 ll
|
||||
329 git clone git@git.parisweb.art:gitea_admin/wondif_vue.git
|
||||
330 sudo apt update
|
||||
331 sudo apt install git -y
|
||||
332 git --version
|
||||
333 git clone git@git.parisweb.art:gitea_admin/wondif_vue.git
|
||||
334 git clone https://git.parisweb.art/gitea_admin/wondif_vue
|
||||
335 ll
|
||||
336 cd wondif_vue/
|
||||
337 ll
|
||||
338 sav
|
||||
339 ll
|
||||
340 sudo nano wondif_2025
|
||||
341 sudo nginx -t
|
||||
342 sudo systemctl reload nginx
|
||||
343 www
|
||||
344 ll
|
||||
345 cd wondif_vue/
|
||||
346 ll
|
||||
347 sudo nano .env
|
||||
348 npm ci
|
||||
349 npm run build
|
||||
350 ll
|
||||
351 pm2 list
|
||||
352 pm2 start npm --name "wondif_vue" -- run start
|
||||
353 pm2 save
|
||||
354 pm2 logs wondif_vue
|
||||
355 curl http://127.0.0.1:3000
|
||||
356 sav
|
||||
357 ll
|
||||
358 sudo nano wondif_2025
|
||||
359 www
|
||||
360 ll
|
||||
361 cd wondif_vue/
|
||||
362 ll
|
||||
363 wondif_vue/
|
||||
364 cat package.json
|
||||
365 sudo nano package.json
|
||||
366 cat package.json
|
||||
367 npm run build
|
||||
368 pm2 list
|
||||
369 pm2 stop wondif_vue
|
||||
370 pm2 start wondif_vue
|
||||
371 pm2 logs wondif_vue
|
||||
372 curl http://127.0.0.1:3000
|
||||
373 sav
|
||||
374 ll
|
||||
375 more wondif_2025
|
||||
376 sudo nano wondif_2025
|
||||
377 sudo nginx -t
|
||||
378 sudo systemctl reload nginx
|
||||
379 more wondif_2025
|
||||
380 www
|
||||
381 ll
|
||||
382 cd wondif_vue/
|
||||
383 ll
|
||||
384 cd public/
|
||||
385 ll
|
||||
386 cd img/
|
||||
387 ll
|
||||
388 cd photos/
|
||||
389 ll
|
||||
390 mv zaho_2.jpg zaho.jpg
|
||||
391 ll
|
||||
392 cd /var/www/wondif_vue
|
||||
393 ll
|
||||
394 npm ci
|
||||
395 npm run build
|
||||
396 pm2 restart wondif_vue
|
||||
397 git pull origin main
|
||||
398 rm public/img/photos/zaho.jpg
|
||||
399 git pull origin main
|
||||
400 npm ci
|
||||
401 npm run build
|
||||
402 ll
|
||||
403 more .env
|
||||
404 pm2 list
|
||||
405 pm2 logs wondif_vue
|
||||
406 cd /home/debian/.pm2/logs/
|
||||
407 ll
|
||||
408 more strapi-wondif-error.log
|
||||
409 ll
|
||||
410 truncate -s 0 strapi-wondif-error.log
|
||||
411 ll
|
||||
412 more strapi-wondif-out.log
|
||||
413 ll
|
||||
414 truncate -s 0 strapi-wondif-out.log
|
||||
415 ll
|
||||
416 more wondif-vue-error.log
|
||||
417 ll
|
||||
418 truncate -s 0 wondif-vue-error.log
|
||||
419 more wondif-vue-out.log
|
||||
420 ll
|
||||
421 truncate -s 0 wondif-vue-out.log
|
||||
422 www
|
||||
423 ll
|
||||
424 cd wondif_vue/
|
||||
425 ll
|
||||
426 cd app
|
||||
427 ll
|
||||
428 cd components/
|
||||
429 ll
|
||||
430 more header_content.vue
|
||||
431 ll
|
||||
432 more header_full.vue
|
||||
433 ll
|
||||
434 cd ..
|
||||
435 ll
|
||||
436 more app.vue
|
||||
437 ll
|
||||
438 cd pages/
|
||||
439 ll
|
||||
440 more index.vue
|
||||
441 ll
|
||||
442 more agenda.vue
|
||||
443 www
|
||||
444 ll
|
||||
445 cd wondif_vue/
|
||||
446 ll
|
||||
447 cd app/
|
||||
448 ll
|
||||
449 cd pages/
|
||||
450 ll
|
||||
451 more index.vue
|
||||
452 cd ..
|
||||
453 ll
|
||||
454 cd components/
|
||||
455 ll
|
||||
456 more header_full.vue
|
||||
457 ll
|
||||
458 more header_content.vue
|
||||
459 www
|
||||
460 ll
|
||||
461 cd wondif_vue/
|
||||
462 ll
|
||||
463 sav
|
||||
464 ll
|
||||
465 more wondif_2025
|
||||
466 sudo adduser --disabled-password --gecos "" deploy
|
||||
467 sudo usermod -aG www-data deploy
|
||||
468 cd /
|
||||
469 ll
|
||||
470 cd srv
|
||||
471 ll
|
||||
472 sudo ll
|
||||
473 sudo ls
|
||||
474 ls
|
||||
475 ll
|
||||
476 cd 2025
|
||||
477 sudo mkdir -p /srv/apps/wondif_vue
|
||||
478 ll
|
||||
479 sudo chown -R deploy:deploy /srv/apps/wondif_vue
|
||||
480 ll
|
||||
481 sudo -u deploy ssh-keygen -t ed25519 -C "deploy@server" -f /home/deploy/.ssh/id_ed25519
|
||||
482 sudo -u deploy cat /home/deploy/.ssh/id_ed25519.pub
|
||||
483 sudo -u deploy ssh -T git@git.parisweb.art
|
||||
484 sudo -u deploy ssh -T gitea_admin@git.parisweb.art
|
||||
485 sudo -u deploy ssh -T git@git.parisweb.art
|
||||
486 sudo -u deploy ssh -T git@git.parisweb.art; echo "EXIT=$?"
|
||||
487 cd /home
|
||||
488 ll
|
||||
489 cd deploy/
|
||||
490 ll
|
||||
491 sudo cd deploy/
|
||||
492 sudo -u deploy rm -f /home/deploy/.ssh/id_ed25519
|
||||
493 sudo -u deploy rm -f /home/deploy/.ssh/id_ed25519.pub
|
||||
494 sudo -u deploy rm -f /home/deploy/.ssh/known_hosts
|
||||
495 sudo -u deploy ls -la /home/deploy/.ssh
|
||||
496 sudo -u deploy ls -la /home/deploy/
|
||||
497 sudo -u deploy ssh-keygen -t ed25519 -C "deploy@bookstore" -f /home/deploy/.ssh/id_ed25519
|
||||
498 sudo -u deploy cat /home/deploy/.ssh/id_ed25519.pub
|
||||
499 sudo -u deploy rm -f /home/deploy/.ssh/id_ed25519
|
||||
500 sudo -u deploy rm -f /home/deploy/.ssh/id_ed25519.pub
|
||||
501 sudo -u deploy rm -f /home/deploy/.ssh/known_hosts
|
||||
502 sudo -u deploy ls -la /home/deploy/.ssh
|
||||
503 sudo -u deploy ssh-keygen -t ed25519 -C "deploy@wondif_vue" -f /home/deploy/.ssh/id_ed25519
|
||||
504 sudo -u deploy cat /home/deploy/.ssh/id_ed25519.pub
|
||||
505 sudo -u deploy ssh -T git@git.parisweb.art
|
||||
506 sudo ss -lntp | grep -E ':22|:2222|:3000|:3022|:2200'
|
||||
507 sudo -u deploy rm -f /home/deploy/.ssh/id_ed25519
|
||||
508 sudo -u deploy rm -f /home/deploy/.ssh/id_ed25519.pub
|
||||
509 sudo -u deploy rm -f /home/deploy/.ssh/known_hosts
|
||||
510 sudo -u deploy ls -la /home/deploy/.ssh
|
||||
511 sudo -u deploy nano /home/deploy/.netrc
|
||||
512 sudo -u deploy more /home/deploy/.netr
|
||||
513 sudo chmod 600 /home/deploy/.netrc
|
||||
514 sudo chown deploy:deploy /home/deploy/.netrc
|
||||
515 sudo -u deploy git ls-remote https://git.parisweb.art/gitea_admin/wondif_vue
|
||||
516 cd /srv
|
||||
517 ll
|
||||
518 cd apps/
|
||||
519 ll
|
||||
520 cd wondif_vue/
|
||||
521 ll
|
||||
522 sudo -u deploy git clone https://git.parisweb.art/gitea_admin/wondif_vue /srv/apps/wondif_vue
|
||||
523 ll
|
||||
524 more .git
|
||||
525 more README.md
|
||||
526 cd /opt
|
||||
527 ll
|
||||
528 cd /var
|
||||
529 ll
|
||||
530 cd log/
|
||||
531 ll
|
||||
532 sudo mkdir -p /opt/deploy/wondif_vue /var/log/deploy
|
||||
533 ll
|
||||
534 sudo chown -R deploy:deploy /opt/deploy/wondif_vue /var/log/deploy
|
||||
535 sudo -u deploy nano /opt/deploy/wondif_vue/deploy.sh
|
||||
536 sudo chmod +x /opt/deploy/wondif_vue/deploy.sh
|
||||
537 cd /opt/
|
||||
538 ll
|
||||
539 cd deploy/
|
||||
540 ll
|
||||
541 cd wondif_vue/
|
||||
542 ll
|
||||
543 sudo -u nano deploy.sh
|
||||
544 sudo -u deploy nano deploy.sh
|
||||
545 pm2 list
|
||||
546 cd www
|
||||
547 ll
|
||||
548 www
|
||||
549 ll
|
||||
550 cd wondif_vue/
|
||||
551 ll
|
||||
552 more package.json
|
||||
553 cd ..
|
||||
554 ll
|
||||
555 cd wondif_vue/
|
||||
556 ll
|
||||
557 sudo chmod +x /opt/deploy/wondif_vue/deploy.sh
|
||||
558 www
|
||||
559 ll
|
||||
560 cd wondif_vue/
|
||||
561 ll
|
||||
562 git pull origin main
|
||||
563 more package.json
|
||||
564 more .gitignore
|
||||
565 sudo nano .gitignore
|
||||
566 more package.json
|
||||
567 git pull origin main
|
||||
568 git fetch origin
|
||||
569 git reset --hard origin/main
|
||||
570 git status
|
||||
571 git pull origin main
|
||||
572 npm ci
|
||||
573 npm run build
|
||||
574 ll
|
||||
575 pm2 list
|
||||
576 pm2 restart wondif_vue
|
||||
577 pm2 describe wondif_vue
|
||||
578 pm2 list
|
||||
579 cd /home/debian/.pm2/logs/
|
||||
580 ll
|
||||
581 more wondif-vue-error.log
|
||||
582 pm2 logs wondif_vue --lines 200
|
||||
583 sav
|
||||
584 ll
|
||||
585 sudo nano wondif_2025
|
||||
586 sudo nginx -t
|
||||
587 sudo systemctl reload nginx
|
||||
588 pm2 flush
|
||||
589 pm2 list
|
||||
590 pm2 logs wondif_vue --err --lines 80
|
||||
591 pm2 reset wondif_vue
|
||||
592 pm2 list
|
||||
593 pm2 describe wondif_vue
|
||||
594 pm2 logs wondif_vue
|
||||
595 www
|
||||
596 ll
|
||||
597 cd wondif_vue
|
||||
598 ll
|
||||
599 git status
|
||||
600 git pull origni main
|
||||
601 git pull origin main
|
||||
602 npm ci
|
||||
603 npm run build
|
||||
604 pm2 list
|
||||
605 pm2 restart wondif_vue
|
||||
606 git pull origin main
|
||||
607 npm ci
|
||||
608 git pull origin main
|
||||
609 npm run build
|
||||
610 pm2 restart wondif_vue
|
||||
611 npx strapi version
|
||||
612 ll
|
||||
613 cd ..
|
||||
614 ll
|
||||
615 cd strapi_wondif/
|
||||
616 ll
|
||||
617 more README.md
|
||||
618 npx strapi version
|
||||
619 pm2 list
|
||||
620 pm2 stop strapi_wondif
|
||||
621 npx @strapi/upgrade latest
|
||||
622 npx strapi version
|
||||
623 NODE_ENV=production npm run build
|
||||
624 pm2 list
|
||||
625 pm2 start strapi_wondif
|
||||
626 pm2 list
|
||||
627 mysql --version
|
||||
628 mysql -u root -p
|
||||
629 pm2 list
|
||||
630 www
|
||||
631 ll
|
||||
632 cd strapi_wondif/
|
||||
633 ll
|
||||
634 NODE_ENV=production npm run build
|
||||
635 pm2 list
|
||||
636 pm2 restart strapi_wondif
|
||||
637 pm2 list
|
||||
638 cd strapi_wondif/
|
||||
639 www
|
||||
640 cd strapi_wondif/
|
||||
641 NODE_ENV=production npm run build
|
||||
642 pm2 list
|
||||
643 pm2 restart strapi_wondif
|
||||
644 pm2 list
|
||||
645 date
|
||||
646 mysql -u root -p
|
||||
647 SHOW VARIABLES LIKE '%time_zone%';
|
||||
648 SHOW VARIABLES LIKE '%time_zone%'; SELECT @@global.time_zone, @@session.time_zone;
|
||||
649 SELECT NOW() AS now_local, UTC_TIMESTAMP() AS now_utc, TIMEDIFF(NOW(), UTC_TIMESTAMP()) AS diff;
|
||||
650 show databeses
|
||||
651 show databeses;
|
||||
652 history
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.decalage_gauche {
|
||||
margin-left: -23px;
|
||||
}
|
||||
}
|
||||
@@ -64,6 +64,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header_nav_lang {
|
||||
display: flex;
|
||||
font-family: 'brandontext_medium';
|
||||
@@ -105,7 +106,8 @@
|
||||
|
||||
}
|
||||
.header_nav_logo {
|
||||
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
@include media_queries.media_min(tablet_700) {
|
||||
margin-top: -7px;
|
||||
}
|
||||
@@ -204,6 +206,11 @@
|
||||
|
||||
list-style: none;
|
||||
|
||||
@media (min-width: 742px) and (max-width: 795px) {
|
||||
.decalage_gauche {
|
||||
margin-left: -23px;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(5) {
|
||||
margin-right: 10px;
|
||||
@@ -243,9 +250,9 @@
|
||||
/* Pour l'effet de transition */
|
||||
opacity: 0;
|
||||
transition: visibility 0.2s,opacity 0.2s cubic-bezier(0.4, 0, 1, 1);
|
||||
padding-top: 10px;
|
||||
padding-left: 20px;
|
||||
padding-right: 7px;
|
||||
padding-top: 17px;
|
||||
padding-left: 27px;
|
||||
padding-right: 12px;
|
||||
padding-bottom: 10px;
|
||||
text-align: left;
|
||||
background-color: rgba(255, 255, 255, 0.97);
|
||||
@@ -261,7 +268,7 @@
|
||||
@media (min-width: 900px) {
|
||||
font-size: 18px;
|
||||
}
|
||||
padding-bottom: 4px;
|
||||
padding-bottom: 7px;
|
||||
&:hover {
|
||||
a {
|
||||
color: var(--c-brand_rouge);
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="concert-card__actions">
|
||||
<DsButtonArrow :to="`/concerts/${id}`" variant="secondary">
|
||||
<DsButtonArrow :to="`/concerts/concert-${id}`" variant="secondary">
|
||||
Découvrir
|
||||
</DsButtonArrow>
|
||||
</div>
|
||||
|
||||
@@ -68,7 +68,7 @@
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="header_nav_item" :class="{ 'is-active': isMecenat }">
|
||||
<li class="header_nav_item decalage_gauche" :class="{ 'is-active': isMecenat }">
|
||||
Mécénat
|
||||
<ul class="header_nav_sub_menu">
|
||||
<li class="header_nav_sub_menu_item"><NuxtLink to="/mecenat/soutenir">Nous soutenir</NuxtLink></li>
|
||||
|
||||
96
app/composables/useArtistes.js
Normal file
96
app/composables/useArtistes.js
Normal file
@@ -0,0 +1,96 @@
|
||||
export function useArtistes(options = {}) {
|
||||
const queryString = computed(() => {
|
||||
const locale = unref(options.locale) ?? "fr-FR"
|
||||
const sort = unref(options.sort) ?? null
|
||||
const populate = unref(options.populate) ?? null
|
||||
const filters = unref(options.filters) ?? null
|
||||
|
||||
const query = new URLSearchParams()
|
||||
query.set("locale", locale)
|
||||
if (sort) {
|
||||
query.set("sort[0]", sort)
|
||||
}
|
||||
if (populate && typeof populate === "object") {
|
||||
appendPopulate(query, populate)
|
||||
}
|
||||
if (filters && typeof filters === "object") {
|
||||
appendFilters(query, filters)
|
||||
}
|
||||
|
||||
return query.toString()
|
||||
})
|
||||
|
||||
const { data, pending, error, refresh } = useFetch(
|
||||
() => `/api/__strapi__/artistes?${queryString.value}`,
|
||||
{
|
||||
server: true,
|
||||
key: () => `artistes:${queryString.value}`,
|
||||
watch: [queryString],
|
||||
}
|
||||
)
|
||||
|
||||
const artistes = computed(() => {
|
||||
let list = (data.value?.data || []).map(normalizeArtiste)
|
||||
|
||||
const limit = unref(options.limit)
|
||||
if (typeof limit === "number") {
|
||||
list = list.slice(0, Math.max(0, limit))
|
||||
}
|
||||
|
||||
return list
|
||||
})
|
||||
|
||||
return {
|
||||
artistes,
|
||||
concerts: artistes,
|
||||
pending,
|
||||
error,
|
||||
refresh,
|
||||
}
|
||||
}
|
||||
|
||||
function appendPopulate(query, populate, prefix = "populate") {
|
||||
Object.entries(populate).forEach(([key, value]) => {
|
||||
if (value === true) {
|
||||
query.set(`${prefix}[${key}]`, "true")
|
||||
return
|
||||
}
|
||||
if (value && typeof value === "object") {
|
||||
const entries = Object.entries(value)
|
||||
const allTrue = entries.length > 0 && entries.every(([, v]) => v === true)
|
||||
if (allTrue) {
|
||||
const list = entries.map(([k]) => k).join(",")
|
||||
query.set(`${prefix}[${key}][populate]`, list)
|
||||
return
|
||||
}
|
||||
appendPopulate(query, value, `${prefix}[${key}][populate]`)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function appendFilters(query, filters, prefix = "filters") {
|
||||
Object.entries(filters).forEach(([key, value]) => {
|
||||
if (value === null || value === undefined) return
|
||||
if (typeof value !== "object") {
|
||||
query.set(`${prefix}[${key}]`, String(value))
|
||||
return
|
||||
}
|
||||
Object.entries(value).forEach(([k, v]) => {
|
||||
if (v === null || v === undefined) return
|
||||
if (typeof v !== "object") {
|
||||
query.set(`${prefix}[${key}][${k}]`, String(v))
|
||||
return
|
||||
}
|
||||
appendFilters(query, v, `${prefix}[${key}][${k}]`)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function normalizeArtiste(item) {
|
||||
const a = item.attributes || item || {}
|
||||
|
||||
return {
|
||||
id: item.id,
|
||||
...a,
|
||||
}
|
||||
}
|
||||
@@ -20,7 +20,7 @@
|
||||
:description="c.resume_concert"
|
||||
:imageUrl="c.image_illustration_concert?.url"
|
||||
:imageAlt="c.image_illustration_concert?.alternativeText"
|
||||
:href="`${c.slug_concert}`"
|
||||
:href="`concert-${c.slug_concert}`"
|
||||
/>
|
||||
</ConcertCardList>
|
||||
</PageSection>
|
||||
|
||||
@@ -167,14 +167,12 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="description_wp">
|
||||
<section v-if="concert.description_concert" class="description_wp">
|
||||
<StrapiBlocksConvert :blocks="concert?.description_concert" />
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<section class="img-gallery_wp">
|
||||
<div v-if="imagesConcert.length" class="img-gallery">
|
||||
<section v-if="imagesConcert.length" class="img-gallery_wp">
|
||||
<div class="img-gallery">
|
||||
<DsMedia
|
||||
v-for="img in imagesConcert"
|
||||
:key="img.id || img.url"
|
||||
@@ -184,8 +182,8 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="youtube_wp">
|
||||
<div v-if="youtubeEmbeds.length" class="youtube-list">
|
||||
<section v-if="youtubeEmbeds.length" class="youtube_wp">
|
||||
<div class="youtube-list">
|
||||
<div v-for="v in youtubeEmbeds" :key="v.id" class="youtube-item">
|
||||
<iframe
|
||||
:src="v.src"
|
||||
@@ -208,9 +206,8 @@
|
||||
import DsMedia from '@root/design-system/primitives/DsMedia.vue'
|
||||
import DsHeading from '@root/design-system/primitives/DsHeading.vue'
|
||||
import DsText from '@root/design-system/primitives/DsText.vue'
|
||||
import DsButton from '@root/design-system/primitives/DsButton.vue'
|
||||
const route = useRoute()
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
//////////////////////////////////////////////////////////////
|
||||
// RÉCUPÉRATION DU CONTENU
|
||||
@@ -715,7 +712,7 @@
|
||||
column-gap: 30px;
|
||||
row-gap: 30px;
|
||||
padding-bottom: 70px;
|
||||
@media (min-width: 0px) and (max-width: 500px) {
|
||||
@media (min-width: 0px) and (max-width: 600px) {
|
||||
padding-left: 20px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
@@ -20,7 +20,7 @@
|
||||
:description="c.resume_concert"
|
||||
:imageUrl="c.image_illustration_concert?.url"
|
||||
:imageAlt="c.image_illustration_concert?.alternativeText"
|
||||
:href="`${c.slug_concert}`"
|
||||
:href="`concert-${c.slug_concert}`"
|
||||
/>
|
||||
</ConcertCardList>
|
||||
</PageSection>
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
:description="c.resume_concert"
|
||||
:imageUrl="c.image_illustration_concert?.url"
|
||||
:imageAlt="c.image_illustration_concert?.alternativeText"
|
||||
:href="`/concerts/${c.slug_concert}`"
|
||||
:href="`/concerts/concert-${c.slug_concert}`"
|
||||
/>
|
||||
</ConcertCardList>
|
||||
</PageSection>
|
||||
@@ -145,6 +145,8 @@
|
||||
|
||||
<script setup>
|
||||
import { onMounted, computed } from 'vue'
|
||||
const env_var = useRuntimeConfig()
|
||||
const config = useAppConfig()
|
||||
import { clientLog } from '~/utils/clientLog'
|
||||
import { formatDateLong } from "@/utils/dateFormat.js"
|
||||
import SectionContent from '../components/section/SectionContent.vue'
|
||||
@@ -163,13 +165,14 @@
|
||||
const STRAPI_URL = runtimeConfig.public.strapiUrl
|
||||
|
||||
// Config app (pour SEO)
|
||||
const config = useAppConfig()
|
||||
|
||||
useSeoMeta({
|
||||
title: config.title
|
||||
})
|
||||
|
||||
const appConfig = useAppConfig()
|
||||
console.log("Bienvenue : ",appConfig.title)
|
||||
|
||||
console.log("Bienvenue : ",config.title)
|
||||
|
||||
|
||||
//--------------------
|
||||
// DONNÉES POUR LES CONCERTS À VENIR …
|
||||
@@ -264,182 +267,182 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.remonter_concert_list {
|
||||
transform: translateY(-170px);
|
||||
}
|
||||
|
||||
.theme_ppt_wp {
|
||||
margin-bottom: 50px;
|
||||
// parce que le bloc du dessus à un transform: translateY(-170px); alors cela laisse un espace vide que l'on comble avec ce margin-top négatif
|
||||
margin-top: -170px;
|
||||
}
|
||||
.theme_ppt {
|
||||
display: grid;
|
||||
|
||||
&--img {
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
.remonter_concert_list {
|
||||
transform: translateY(-170px);
|
||||
}
|
||||
&--content {
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
|
||||
.theme_ppt_wp {
|
||||
margin-bottom: 50px;
|
||||
// parce que le bloc du dessus à un transform: translateY(-170px); alors cela laisse un espace vide que l'on comble avec ce margin-top négatif
|
||||
margin-top: -170px;
|
||||
}
|
||||
.theme_ppt {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
|
||||
&--img {
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
}
|
||||
&--content {
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
&--description {
|
||||
max-width: 800px;
|
||||
align-self: self-start;
|
||||
// margin-top: 35px;
|
||||
}
|
||||
&--txt {
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
}
|
||||
&--description {
|
||||
max-width: 800px;
|
||||
align-self: self-start;
|
||||
// margin-top: 35px;
|
||||
}
|
||||
&--txt {
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
.theme_tao {
|
||||
margin-bottom: 50px;
|
||||
.theme_tao {
|
||||
margin-bottom: 50px;
|
||||
|
||||
&--description {
|
||||
max-width: 800px;
|
||||
&--description {
|
||||
max-width: 800px;
|
||||
|
||||
}
|
||||
&--txt {
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
&--filters {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
column-gap: 10px;
|
||||
row-gap: 14px;
|
||||
}
|
||||
&--txt {
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
&--filters {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
column-gap: 10px;
|
||||
row-gap: 14px;
|
||||
|
||||
}
|
||||
&--cardlist {
|
||||
margin-top: 20px;
|
||||
}
|
||||
&--cardlist {
|
||||
margin-top: 20px;
|
||||
|
||||
&--card {
|
||||
background-color: var(--c-surface);
|
||||
border-radius: 10px;
|
||||
//padding: 50px;
|
||||
padding: clamp(18px, 2.4vw, 32px);
|
||||
&--card {
|
||||
background-color: var(--c-surface);
|
||||
border-radius: 10px;
|
||||
//padding: 50px;
|
||||
padding: clamp(18px, 2.4vw, 32px);
|
||||
|
||||
&--wp {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
&--img {
|
||||
max-width: 280px;
|
||||
overflow: hidden;
|
||||
img {
|
||||
max-height: 280px;
|
||||
&--wp {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
@media (min-width: 400px) {
|
||||
&--img {
|
||||
max-width: 280px;
|
||||
overflow: hidden;
|
||||
img {
|
||||
max-height: 350px;
|
||||
max-height: 280px;
|
||||
}
|
||||
@media (min-width: 400px) {
|
||||
img {
|
||||
max-height: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
&--content {
|
||||
max-width: 320px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
&--content {
|
||||
max-width: 320px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&--card {
|
||||
/* base: mobile-first */
|
||||
width: clamp(260px, 81vw, 360px);
|
||||
}
|
||||
@media (min-width: 400px) {
|
||||
&--card {
|
||||
width: clamp(260px, 80vw, 360px);
|
||||
/* base: mobile-first */
|
||||
width: clamp(260px, 81vw, 360px);
|
||||
}
|
||||
}
|
||||
@media (min-width: 500px) {
|
||||
&--card {
|
||||
width: clamp(280px, 63vw, 460px);
|
||||
@media (min-width: 400px) {
|
||||
&--card {
|
||||
width: clamp(260px, 80vw, 360px);
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: 700px) {
|
||||
&--card {
|
||||
width: clamp(280px, 60vw, 460px);
|
||||
@media (min-width: 500px) {
|
||||
&--card {
|
||||
width: clamp(280px, 63vw, 460px);
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
&--card {
|
||||
width: clamp(320px, 33vw, 520px);
|
||||
@media (min-width: 700px) {
|
||||
&--card {
|
||||
width: clamp(280px, 60vw, 460px);
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: 1440px) {
|
||||
&--card {
|
||||
width: clamp(360px, 28vw, 560px);
|
||||
@media (min-width: 1024px) {
|
||||
&--card {
|
||||
width: clamp(320px, 33vw, 520px);
|
||||
}
|
||||
}
|
||||
@media (min-width: 1440px) {
|
||||
&--card {
|
||||
width: clamp(360px, 28vw, 560px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
.theme_mag {
|
||||
|
||||
.theme_mag {
|
||||
|
||||
|
||||
@media (max-width: 499px) {
|
||||
min-height: 650px;
|
||||
}
|
||||
@media (min-width: 500px) {
|
||||
min-height: 650px;
|
||||
}
|
||||
@media (min-width: 700px) {
|
||||
min-height: 650px;
|
||||
}
|
||||
@media (min-width: 900px) {
|
||||
min-height: 650px;
|
||||
}
|
||||
@media (min-width: 1100px) {
|
||||
min-height: 650px;
|
||||
}
|
||||
@media (min-width: 1300px) {
|
||||
min-height: 650px;
|
||||
}
|
||||
@media (min-width: 1500px) {
|
||||
min-height: 650px;
|
||||
}
|
||||
|
||||
.decoration--mag {
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
|
||||
@media (max-width: 499px) {
|
||||
right: -150px;
|
||||
min-height: 650px;
|
||||
}
|
||||
@media (min-width: 500px) {
|
||||
right: -120px;
|
||||
min-height: 650px;
|
||||
}
|
||||
@media (min-width: 700px) {
|
||||
right: -100px;
|
||||
min-height: 650px;
|
||||
}
|
||||
@media (min-width: 900px) {
|
||||
right: -100px;
|
||||
min-height: 650px;
|
||||
}
|
||||
@media (min-width: 1100px) {
|
||||
right: -140px;
|
||||
min-height: 650px;
|
||||
}
|
||||
@media (min-width: 1300px) {
|
||||
right: -100px;
|
||||
min-height: 650px;
|
||||
}
|
||||
@media (min-width: 1500px) {
|
||||
right: -50px;
|
||||
min-height: 650px;
|
||||
}
|
||||
img {
|
||||
height: 600px;
|
||||
|
||||
.decoration--mag {
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
|
||||
@media (max-width: 499px) {
|
||||
right: -150px;
|
||||
}
|
||||
@media (min-width: 500px) {
|
||||
right: -120px;
|
||||
}
|
||||
@media (min-width: 700px) {
|
||||
right: -100px;
|
||||
}
|
||||
@media (min-width: 900px) {
|
||||
right: -100px;
|
||||
}
|
||||
@media (min-width: 1100px) {
|
||||
right: -140px;
|
||||
}
|
||||
@media (min-width: 1300px) {
|
||||
right: -100px;
|
||||
}
|
||||
@media (min-width: 1500px) {
|
||||
right: -50px;
|
||||
}
|
||||
img {
|
||||
height: 600px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
758
app/pages/orchestre/artiste-[id].vue
Normal file
758
app/pages/orchestre/artiste-[id].vue
Normal file
@@ -0,0 +1,758 @@
|
||||
<template>
|
||||
<div>
|
||||
<section v-if="pending" aria-busy="true" aria-live="polite">
|
||||
<p>en cours de chargement...</p>
|
||||
</section>
|
||||
<section v-else-if="error" aria-live="polite">
|
||||
<p>Impossible de charger la fiche artiste.</p>
|
||||
</section>
|
||||
|
||||
<template v-else>
|
||||
<PageSection tone="" content-size="default" class="breadcrum_wp">
|
||||
<Breadcrumb :current-label="artiste?.nom_artiste_ondif || ''" />
|
||||
</PageSection>
|
||||
|
||||
|
||||
<section class="fiche_header_wp">
|
||||
<div class="fiche_header_wp_gauche"></div>
|
||||
<div class="fiche_header_wp_gauche_carre"></div>
|
||||
<div class="fiche_header_inner">
|
||||
<div class="fiche_header_titres">
|
||||
<div>
|
||||
<DsHeading as="h1" tone="default" textcase="uppercase" class="concert-card__title">
|
||||
{{ artiste.nom_artiste_ondif }}
|
||||
</DsHeading>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fiche_header_img">
|
||||
<DsMedia
|
||||
v-if="illustration?.url"
|
||||
:src="illustration.url"
|
||||
:alt="illustration.alternativeText || artiste?.nom_artiste_ondif || ''"
|
||||
ratio="3-4"
|
||||
/>
|
||||
</div>
|
||||
<div class="fiche_header_bandeau"></div>
|
||||
<div class="fiche_header_infos">
|
||||
<div>
|
||||
<DsHeading as="h2" tone="invert" textcase="uppercase" class="fiche_header_infos_genre" v-if="postesLabel">
|
||||
{{ postesLabel }}
|
||||
</DsHeading>
|
||||
</div>
|
||||
<div v-if="artiste.url_artiste_ondif">
|
||||
<DsText as="p" tone="invert" weight="bold" spacing="space-0" class="">
|
||||
<a :href="artiste.url_artiste_ondif" target="_blank" rel="noopener noreferrer">Site internet</a>
|
||||
</DsText>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fiche_header_wp_droite"></div>
|
||||
</section>
|
||||
|
||||
|
||||
<PageSection tone="" content-size="default">
|
||||
|
||||
<section v-if="descriptionBlocks" class="description_wp">
|
||||
<StrapiBlocksConvert :blocks="descriptionBlocks" />
|
||||
</section>
|
||||
|
||||
<section v-if="imagesArtiste.length" class="img-gallery_wp">
|
||||
<div class="img-gallery">
|
||||
<DsMedia
|
||||
v-for="img in imagesArtiste"
|
||||
:key="img.id || img.url"
|
||||
:src="img.url"
|
||||
:alt="img.alternativeText || artiste?.nom_artiste_ondif || ''"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-if="youtubeEmbeds.length" class="youtube_wp">
|
||||
<div class="youtube-list">
|
||||
<div v-for="v in youtubeEmbeds" :key="v.id" class="youtube-item">
|
||||
<iframe
|
||||
:src="v.src"
|
||||
title="Vidéo YouTube"
|
||||
loading="lazy"
|
||||
referrerpolicy="strict-origin-when-cross-origin"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</PageSection>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DsMedia from '@root/design-system/primitives/DsMedia.vue'
|
||||
import DsHeading from '@root/design-system/primitives/DsHeading.vue'
|
||||
import DsText from '@root/design-system/primitives/DsText.vue'
|
||||
const route = useRoute()
|
||||
|
||||
//////////////////////////////////////////////////////////////
|
||||
// RÉCUPÉRATION DU CONTENU
|
||||
//////////////////////////////////////////////////////////////
|
||||
const artisteSlug = computed(() => String(route.params.id || ''))
|
||||
const populate = {
|
||||
image_illustration_artiste_ondif: true,
|
||||
postes_artiste_ondif: true,
|
||||
}
|
||||
|
||||
const filters = computed(() => ({
|
||||
slug_artiste_ondif: {
|
||||
$eq: artisteSlug.value,
|
||||
},
|
||||
}))
|
||||
|
||||
const { artistes, pending, error } = useArtistes({
|
||||
locale: 'fr-FR',
|
||||
populate,
|
||||
filters,
|
||||
limit: 1,
|
||||
})
|
||||
|
||||
const artiste = computed(() => artistes.value?.[0] || {})
|
||||
|
||||
|
||||
|
||||
|
||||
useSeoMeta({
|
||||
title: () => artiste.value?.nom_artiste_ondif || 'Artiste',
|
||||
})
|
||||
|
||||
const postesLabel = computed(() =>
|
||||
extractStrapiList(artiste.value?.postes_artiste_ondif)
|
||||
.map((p) => p?.nom_poste)
|
||||
.filter(Boolean)
|
||||
.join(', ')
|
||||
)
|
||||
|
||||
const illustration = computed(() => {
|
||||
const m = artiste.value?.image_illustration_artiste_ondif
|
||||
if (!m) return null
|
||||
if (m?.data?.attributes) return { id: m.data.id, ...m.data.attributes }
|
||||
if (m.url) return m
|
||||
return null
|
||||
})
|
||||
|
||||
const imagesArtiste = computed(() => {
|
||||
const value = artiste.value?.images_artiste_ondif
|
||||
return extractStrapiList(value).filter((img) => Boolean(img?.url))
|
||||
})
|
||||
|
||||
const descriptionBlocks = computed(() =>
|
||||
artiste.value?.description_artiste_ondif || artiste.value?.description_concert || null
|
||||
)
|
||||
|
||||
const youtube = computed(() => {
|
||||
const value = artiste.value?.liens_youtube_artiste_ondif
|
||||
if (!value) return []
|
||||
return extractStrapiList(value)
|
||||
})
|
||||
function getYoutubeId(url = '') {
|
||||
try {
|
||||
const u = new URL(url)
|
||||
if (u.hostname.includes('youtu.be')) return u.pathname.slice(1)
|
||||
if (u.pathname.startsWith('/shorts/')) return u.pathname.split('/')[2]
|
||||
if (u.pathname.startsWith('/embed/')) return u.pathname.split('/')[2]
|
||||
return u.searchParams.get('v')
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
const youtubeEmbeds = computed(() =>
|
||||
youtube.value
|
||||
.map((item) => {
|
||||
const id = getYoutubeId(item?.lien_youtube)
|
||||
if (!id) return null
|
||||
return {
|
||||
id: item.id || id,
|
||||
src: `https://www.youtube-nocookie.com/embed/${id}?rel=0&modestbranding=1&iv_load_policy=3&playsinline=1`,
|
||||
}
|
||||
})
|
||||
.filter(Boolean)
|
||||
)
|
||||
|
||||
function extractStrapiList(value) {
|
||||
if (!value) return []
|
||||
if (Array.isArray(value)) return value.map(normalizeStrapiItem).filter(Boolean)
|
||||
if (value?.data) {
|
||||
const rows = Array.isArray(value.data) ? value.data : [value.data]
|
||||
return rows.map(normalizeStrapiItem).filter(Boolean)
|
||||
}
|
||||
if (typeof value === 'object') return [normalizeStrapiItem(value)].filter(Boolean)
|
||||
return []
|
||||
}
|
||||
|
||||
function normalizeStrapiItem(item) {
|
||||
if (!item || typeof item !== 'object') return null
|
||||
if (item.attributes && typeof item.attributes === 'object') {
|
||||
return { id: item.id, ...item.attributes }
|
||||
}
|
||||
return item
|
||||
}
|
||||
|
||||
function appendPopulate(query, populateObj, prefix = "populate") {
|
||||
Object.entries(populateObj).forEach(([key, value]) => {
|
||||
if (value === true) {
|
||||
query.set(`${prefix}[${key}]`, "true")
|
||||
return
|
||||
}
|
||||
if (value && typeof value === "object") {
|
||||
appendPopulate(query, value, `${prefix}[${key}][populate]`)
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.breadcrum_wp {
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
.fiche_header_wp {
|
||||
display: grid;
|
||||
|
||||
|
||||
@media (min-width: 0px) and (max-width: 600px) {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto 510px 20px 200px;
|
||||
padding-top: 40px;
|
||||
}
|
||||
@media (min-width: 600px) {
|
||||
grid-template-columns: minmax(10px, 10px) 580px 0px;
|
||||
grid-template-rows: 40px 280px 20px 230px;
|
||||
}
|
||||
@media (min-width: 700px) {
|
||||
grid-template-columns: minmax(10px, 10px) 660px 0px;
|
||||
grid-template-rows: 70px 250px 90px 300px;
|
||||
}
|
||||
@media (min-width: 800px) {
|
||||
grid-template-columns: minmax(10px, 10px) 780px minmax(10px, 10px);
|
||||
grid-template-rows: 60px 280px 70px 300px;
|
||||
}
|
||||
@media (min-width: 900px) {
|
||||
grid-template-columns: minmax(10px, 10px) 860px minmax(10px, 10px);
|
||||
grid-template-rows: 90px 340px 100px 250px;
|
||||
}
|
||||
@media (min-width: 1000px) {
|
||||
grid-template-columns: minmax(20px, auto) 950px minmax(10px, auto);
|
||||
grid-template-rows: 90px 340px 120px 270px;
|
||||
}
|
||||
@media (min-width: 1100px) {
|
||||
grid-template-columns: minmax(20px, auto) 1020px minmax(20px, auto);
|
||||
grid-template-rows: 90px 340px 140px 290px;
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
grid-template-columns: minmax(20px, auto) 1100px minmax(20px, auto);
|
||||
grid-template-rows: 90px 340px 160px 330px;
|
||||
}
|
||||
@media (min-width: 1300px) {
|
||||
grid-template-columns: minmax(20px, auto) 1200px minmax(20px, auto);
|
||||
grid-template-rows: 90px 340px 160px 330px;
|
||||
}
|
||||
@media (min-width: 1400px) {
|
||||
grid-template-columns: minmax(20px, auto) 1300px minmax(20px, auto);
|
||||
grid-template-rows: 90px 340px 160px 380px;
|
||||
}
|
||||
@media (min-width: 1500px) {
|
||||
grid-template-columns: minmax(20px, auto) 1400px minmax(20px, auto);
|
||||
grid-template-rows: 90px 340px 160px 380px;
|
||||
}
|
||||
}
|
||||
.fiche_header_wp_gauche {
|
||||
|
||||
@media (min-width: 0px) and (max-width: 600px) {
|
||||
display: none;
|
||||
}
|
||||
@media (min-width: 600px) {
|
||||
grid-column: 1;
|
||||
}
|
||||
}
|
||||
.fiche_header_wp_gauche_carre {
|
||||
|
||||
@media (min-width: 0px) and (max-width: 600px) {
|
||||
display: none;
|
||||
}
|
||||
@media (min-width: 600px) {
|
||||
grid-column: 1;
|
||||
grid-row: 4;
|
||||
}
|
||||
background-color: var(--c-backgroud-black);
|
||||
}
|
||||
.fiche_header_wp_droite {
|
||||
|
||||
@media (min-width: 0px) and (max-width: 600px) {
|
||||
display: none;
|
||||
}
|
||||
@media (min-width: 600px) {
|
||||
grid-column: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.fiche_header_inner {
|
||||
|
||||
|
||||
@media (min-width: 0px) and (max-width: 600px) {
|
||||
grid-column: 1;
|
||||
grid-row: 1/5;
|
||||
}
|
||||
@media (min-width: 600px) {
|
||||
grid-column: 2;
|
||||
grid-row: 1/5;
|
||||
}
|
||||
display: grid;
|
||||
|
||||
@media (min-width: 0px) and (max-width: 600px) {
|
||||
grid-template-columns: 4fr 1fr 0.5fr;
|
||||
grid-template-rows: auto 510px 20px 200px;
|
||||
}
|
||||
@media (min-width: 600px) {
|
||||
width: 575px;
|
||||
grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
|
||||
grid-template-rows: 40px 280px 20px 230px;
|
||||
}
|
||||
@media (min-width: 700px) {
|
||||
width: 675px;
|
||||
grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
|
||||
grid-template-rows: 70px 250px 90px 300px;
|
||||
}
|
||||
@media (min-width: 800px) {
|
||||
width: 780px;
|
||||
grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
|
||||
grid-template-rows: 60px 280px 70px 300px;
|
||||
}
|
||||
@media (min-width: 900px) {
|
||||
width: 860px;
|
||||
grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
|
||||
grid-template-rows: 90px 340px 100px 250px;
|
||||
}
|
||||
@media (min-width: 1000px) {
|
||||
width: 950px;
|
||||
grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
|
||||
grid-template-rows: 90px 340px 120px 270px;
|
||||
}
|
||||
@media (min-width: 1100px) {
|
||||
width: 1020px;
|
||||
grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
|
||||
grid-template-rows: 90px 340px 140px 290px;
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
width: 1100px;
|
||||
grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
|
||||
grid-template-rows: 90px 340px 160px 330px;
|
||||
}
|
||||
@media (min-width: 1300px) {
|
||||
width: 1200px;
|
||||
grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
|
||||
grid-template-rows: 90px 340px 160px 330px;
|
||||
}
|
||||
@media (min-width: 1400px) {
|
||||
width: 1300px;
|
||||
grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
|
||||
grid-template-rows: 90px 340px 160px 380px;
|
||||
}
|
||||
@media (min-width: 1500px) {
|
||||
width: 1400px;
|
||||
grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
|
||||
grid-template-rows: 90px 340px 160px 380px;
|
||||
}
|
||||
@media (min-width: 1600px) {
|
||||
width: 1400px;
|
||||
grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
|
||||
grid-template-rows: 90px 340px 160px 380px;
|
||||
}
|
||||
@media (min-width: 1700px) {
|
||||
width: 1400px;
|
||||
grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
|
||||
grid-template-rows: 90px 340px 160px 380px;
|
||||
}
|
||||
@media (min-width: 1800px) {
|
||||
width: 1400px;
|
||||
grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
|
||||
grid-template-rows: 90px 340px 160px 380px;
|
||||
}
|
||||
}
|
||||
|
||||
.fiche_header_titres {
|
||||
|
||||
@media (min-width: 0px) and (max-width: 600px) {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
padding-bottom: 20px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
@media (min-width: 600px) {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
}
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 0.75rem;
|
||||
h1 {
|
||||
font-size: 55px;
|
||||
@media (min-width: 0px) and (max-width: 600px) {
|
||||
font-size: 25px;
|
||||
}
|
||||
@media (min-width: 600px) {
|
||||
font-size: 25px;
|
||||
}
|
||||
@media (min-width: 700px) {
|
||||
font-size: 30px;
|
||||
}
|
||||
@media (min-width: 800px) {
|
||||
font-size: 30px;
|
||||
}
|
||||
@media (min-width: 900px) {
|
||||
font-size: 40px;
|
||||
}
|
||||
@media (min-width: 1000px) {
|
||||
font-size: 40px;
|
||||
}
|
||||
@media (min-width: 1100px) {
|
||||
font-size: 40px;
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
font-size: 50px;
|
||||
}
|
||||
@media (min-width: 1300px) {
|
||||
font-size: 55px;
|
||||
}
|
||||
@media (min-width: 1400px) {
|
||||
font-size: 55px;
|
||||
}
|
||||
@media (min-width: 1500px) {
|
||||
font-size: 55px;
|
||||
}
|
||||
@media (min-width: 1600px) {
|
||||
font-size: 55px;
|
||||
}
|
||||
@media (min-width: 1700px) {
|
||||
font-size: 55px;
|
||||
}
|
||||
@media (min-width: 1800px) {
|
||||
font-size: 55px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fiche_header_img {
|
||||
|
||||
@media (min-width: 0px) and (max-width: 600px) {
|
||||
grid-column: 1 / 4;
|
||||
grid-row: 2 / 4;
|
||||
}
|
||||
@media (min-width: 600px) {
|
||||
grid-column: 3 / 5;
|
||||
grid-row: 1 / 5;
|
||||
}
|
||||
overflow: hidden;
|
||||
.ds-media {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.fiche_header_infos {
|
||||
|
||||
@media (min-width: 0px) and (max-width: 600px) {
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 4;
|
||||
margin-top: -30px;
|
||||
}
|
||||
@media (min-width: 600px) {
|
||||
grid-column: 1;
|
||||
grid-row: 4;
|
||||
}
|
||||
display: grid;
|
||||
align-content: center;
|
||||
justify-content: end;
|
||||
|
||||
@media (min-width: 0px) and (max-width: 700px) {
|
||||
gap: 7px;
|
||||
}
|
||||
@media (min-width: 700px) {
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
text-align: right;
|
||||
.fiche_header_infos_genre {
|
||||
font-weight: 900;
|
||||
|
||||
}
|
||||
}
|
||||
.fiche_header_bandeau {
|
||||
|
||||
@media (min-width: 0px) and (max-width: 600px) {
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 4;
|
||||
margin-top: -30px;
|
||||
}
|
||||
@media (min-width: 600px) {
|
||||
grid-column: 1 / 4;
|
||||
grid-row: 4;
|
||||
}
|
||||
background-color: var(--c-backgroud-black);
|
||||
}
|
||||
|
||||
/* ============================ */
|
||||
/* DISTRIBUTION / PROGRAMME */
|
||||
/* ============================ */
|
||||
.fiche_details_wp {
|
||||
.distribution_wp {
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
padding-left: 20px;
|
||||
.distribution_item {
|
||||
display: flex;
|
||||
.distribution_item_poste {
|
||||
padding-right: 10px;
|
||||
font-weight: 200;
|
||||
}
|
||||
.direction {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
.programme_wp {
|
||||
|
||||
background-color: var(--c-backgroud-brandreverse);
|
||||
margin-bottom: 70px;
|
||||
padding-top: 50px;
|
||||
padding-right: 30px;
|
||||
padding-left: 40px;
|
||||
padding-bottom: 50px;
|
||||
|
||||
/* DÉCALAGE DU BLOC VERS LA DROITE */
|
||||
position: relative;
|
||||
|
||||
@media (min-width: 0px) and (max-width: 700px) {
|
||||
width: 89vw;
|
||||
left: 5%;
|
||||
}
|
||||
@media (min-width: 700px) {
|
||||
width: 67vw;
|
||||
left: 30%;
|
||||
}
|
||||
@media (min-width: 800px) {
|
||||
width: 50vw;
|
||||
left: 49%;
|
||||
}
|
||||
transform: translateX(0px);
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
justify-content: initial;
|
||||
align-items: initial;
|
||||
|
||||
.programme_titre {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.programme_list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
column-gap: 20px;
|
||||
row-gap: 20px;
|
||||
|
||||
}
|
||||
.programme_item {
|
||||
flex: 1 0 200px;
|
||||
|
||||
background-color: var(--c-surface);
|
||||
padding-top: 14px;
|
||||
padding-right: 20px;
|
||||
padding-left: 18px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================ */
|
||||
/* REPRÉSENTATIONS */
|
||||
/* ============================ */
|
||||
.representation_wp {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
/* justify-content: center; */
|
||||
column-gap: 30px;
|
||||
row-gap: 30px;
|
||||
padding-bottom: 70px;
|
||||
@media (min-width: 0px) and (max-width: 600px) {
|
||||
padding-left: 20px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.representation_item {
|
||||
|
||||
@media (min-width: 0px) and (max-width: 500px) {
|
||||
width: 100%;
|
||||
}
|
||||
@media (min-width: 500px) {
|
||||
max-width: 215px;
|
||||
}
|
||||
@media (min-width: 600px) {
|
||||
max-width: 262px;
|
||||
}
|
||||
@media (min-width: 700px) {
|
||||
max-width: 300px;
|
||||
}
|
||||
flex: 1 1 300px;
|
||||
display: grid;
|
||||
border: 2px var(--c-brand_rouge) solid;
|
||||
padding-top: 20px;
|
||||
> * {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.representation_item_comment_wp {
|
||||
padding-top: 5px;
|
||||
}
|
||||
.representation_item_comment {
|
||||
background-color: lightgray;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
}
|
||||
.representation_cta {
|
||||
color: var(--c-surface);
|
||||
background-color: var(--c-brand_rouge);
|
||||
margin-top: 15px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
text-align: center;
|
||||
a {
|
||||
font-family: var(--font-roboto);
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================ */
|
||||
/* DESCRIPTION */
|
||||
/* ============================ */
|
||||
.description_wp {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-bottom: 70px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
> * {
|
||||
max-width: 570px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
/* ============================ */
|
||||
/* GALERIES */
|
||||
/* ============================ */
|
||||
|
||||
.img-gallery_wp {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.img-gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 520px));
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
margin-top: 1.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.img-gallery > * {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.img-gallery :deep(.ds-media) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.img-gallery :deep(.ds-media__img) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
transition: transform 0.25s ease, box-shadow 0.25s ease;
|
||||
}
|
||||
|
||||
.img-gallery :deep(.ds-media__img:hover) {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.img-gallery {
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
.img-gallery {
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.img-gallery {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.youtube_wp {
|
||||
margin-bottom: 70px;
|
||||
}
|
||||
.youtube-list {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
/* flex-wrap: wrap; */
|
||||
gap: 20px;
|
||||
}
|
||||
.youtube-item {
|
||||
@media (min-width: 0px) and (max-width: 300px) {
|
||||
min-width: 290px;
|
||||
}
|
||||
|
||||
@media (min-width: 300px) {
|
||||
min-width: 298px;
|
||||
}
|
||||
|
||||
@media (min-width: 400px) {
|
||||
min-width: 398px;
|
||||
}
|
||||
@media (min-width: 500px) {
|
||||
min-width: 480px;
|
||||
}
|
||||
@media (min-width: 600px) {
|
||||
min-width: 580px;
|
||||
}
|
||||
@media (min-width: 700px) {
|
||||
min-width: 670px;
|
||||
}
|
||||
}
|
||||
|
||||
.youtube-item iframe {
|
||||
|
||||
aspect-ratio: 16 / 9;
|
||||
border: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,13 +1,309 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- ================== -->
|
||||
<!-- Fond noir -->
|
||||
<!-- ================== -->
|
||||
<PageSection tone="dark" content-size="default" class="theme_bandeau--grid">
|
||||
<SectionContent pad="xs" class="theme_bandeau--grid--left">
|
||||
<SectionTitle tone="invert" pad="">
|
||||
LES MUSICIENS
|
||||
</SectionTitle>
|
||||
<DsHeading as="h3" tone="invert">
|
||||
95 musiciens engagés Partout et pour tous en Île-de-France !
|
||||
</DsHeading>
|
||||
</SectionContent>
|
||||
|
||||
|
||||
<SectionContent pad="xs" class="theme_bandeau--grid--right">
|
||||
<DsText tone="invert" size="lg" class="theme_bandeau--grid--right--text" >
|
||||
Les 95 musiciennes et musiciens proposent chaque saison plus de 120 concerts dans des salles et théâtres, des lieux culturels et des espaces atypiques de la région francilienne. Porté par une forte mission territoriale, l’orchestre s’engage à rendre la musique symphonique accessible à toutes et tous, en la faisant vivre au plus près des habitants grâce notamment à des actions culturelles, pédagogiques et participatives au cœur du territoire.
|
||||
</DsText>
|
||||
</SectionContent>
|
||||
</PageSection>
|
||||
|
||||
<!-- ================== -->
|
||||
<!-- Listes des musiciens -->
|
||||
<!-- ================== -->
|
||||
|
||||
<!-- ================== -->
|
||||
<!-- DIRECTION -->
|
||||
<!-- ================== -->
|
||||
|
||||
<PageSection padded_size="md" content-size="default" class="musiciens_list_section remonter_artistes_list">
|
||||
|
||||
|
||||
<section v-if="pending" aria-busy="true" aria-live="polite">
|
||||
<DsText as="p" tone="default">Chargement des artistes...</DsText>
|
||||
</section>
|
||||
|
||||
<section v-else-if="error">
|
||||
<DsText as="p" tone="default">Impossible de charger les artistes.</DsText>
|
||||
</section>
|
||||
|
||||
<section v-else-if="artistesDirection.length" class="musiciens_list">
|
||||
<article v-for="a in artistesDirection" :key="a.id" class="musicien_card">
|
||||
<DsMedia
|
||||
v-if="a.image?.url"
|
||||
:src="a.image.url"
|
||||
:alt="a.image.alternativeText || a.nom_artiste_ondif || ''"
|
||||
ratio="square"
|
||||
/>
|
||||
|
||||
<DsHeading as="h4" tone="default" class="musicien_card_nom">
|
||||
<NuxtLink :to="`/orchestre/artiste-${a.slug_artiste_ondif}`">
|
||||
{{ a.nom_artiste_ondif }}
|
||||
</NuxtLink>
|
||||
</DsHeading>
|
||||
|
||||
<DsText
|
||||
v-if="a.postesLabel"
|
||||
as="p"
|
||||
tone="default"
|
||||
size="md"
|
||||
class="musicien_card_postes"
|
||||
>
|
||||
{{ a.postesLabel }}
|
||||
</DsText>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section v-else>
|
||||
<DsText as="p" tone="default">Aucun artiste pour la direction.</DsText>
|
||||
</section>
|
||||
</PageSection>
|
||||
|
||||
<!-- ================== -->
|
||||
<!-- MUSICIENS -->
|
||||
<!-- ================== -->
|
||||
|
||||
<PageSection padded_size="md" content-size="default" class="musiciens_list_section musiciens_list_wp">
|
||||
|
||||
|
||||
<section v-if="pending" aria-busy="true" aria-live="polite">
|
||||
<DsText as="p" tone="default">Chargement des artistes...</DsText>
|
||||
</section>
|
||||
|
||||
<section v-else-if="error">
|
||||
<DsText as="p" tone="default">Impossible de charger les artistes.</DsText>
|
||||
</section>
|
||||
|
||||
<section v-else-if="artistesAutres.length" class="musiciens_list">
|
||||
<article v-for="a in artistesAutres" :key="a.id" class="musicien_card">
|
||||
<DsMedia
|
||||
v-if="a.image?.url"
|
||||
:src="a.image.url"
|
||||
:alt="a.image.alternativeText || a.nom_artiste_ondif || ''"
|
||||
ratio="square"
|
||||
/>
|
||||
|
||||
<DsHeading as="h4" tone="default" class="musicien_card_nom">
|
||||
<NuxtLink :to="`/orchestre/artiste-${a.slug_artiste_ondif}`">
|
||||
{{ a.nom_artiste_ondif }}
|
||||
</NuxtLink>
|
||||
</DsHeading>
|
||||
|
||||
<DsText
|
||||
v-if="a.postesLabel"
|
||||
as="p"
|
||||
tone="default"
|
||||
size="md"
|
||||
class="musicien_card_postes"
|
||||
>
|
||||
{{ a.postesLabel }}
|
||||
</DsText>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section v-else>
|
||||
<DsText as="p" tone="default">Aucun autre artiste trouvé.</DsText>
|
||||
</section>
|
||||
</PageSection>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
<script setup>
|
||||
import DsHeading from '@root/design-system/primitives/DsHeading.vue'
|
||||
import DsText from '@root/design-system/primitives/DsText.vue'
|
||||
import DsMedia from '@root/design-system/primitives/DsMedia.vue'
|
||||
const runtimeConfig = useRuntimeConfig()
|
||||
const saisonFiltre = computed(() => String(runtimeConfig.public.saison || '').trim())
|
||||
const artistesFilters = computed(() => {
|
||||
if (!saisonFiltre.value) return null
|
||||
return {
|
||||
saisons_artiste_ondif: {
|
||||
nom_saison: {
|
||||
$eq: saisonFiltre.value,
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
//--------------------
|
||||
// DONNÉES POUR LES ARTISTES
|
||||
//--------------------
|
||||
const { artistes, pending, error } = useArtistes({
|
||||
locale: "fr-FR",
|
||||
sort: "ordre_artiste_ondif:asc",
|
||||
populate: {
|
||||
saisons_artiste_ondif: true,
|
||||
image_illustration_artiste_ondif: true,
|
||||
postes_artiste_ondif: true,
|
||||
},
|
||||
filters: artistesFilters,
|
||||
})
|
||||
|
||||
const artistesDisplay = computed(() => {
|
||||
return (artistes.value || []).map((artiste) => ({
|
||||
...artiste,
|
||||
image: getArtisteImage(artiste),
|
||||
postesLabel: getPostesLabel(artiste),
|
||||
}))
|
||||
})
|
||||
|
||||
const postesDirection = [
|
||||
"direction",
|
||||
"cheffe assistante",
|
||||
"chef assistante",
|
||||
]
|
||||
|
||||
const artistesDirection = computed(() =>
|
||||
artistesDisplay.value.filter((a) => isDirectionArtist(a))
|
||||
)
|
||||
|
||||
const artistesAutres = computed(() =>
|
||||
artistesDisplay.value.filter((a) => !isDirectionArtist(a))
|
||||
)
|
||||
|
||||
function getArtisteImage(artiste) {
|
||||
const media = artiste?.image_illustration_artiste_ondif
|
||||
const rows = extractStrapiList(media)
|
||||
if (rows.length) return rows[0]
|
||||
if (media && typeof media === "object" && media.url) return media
|
||||
return null
|
||||
}
|
||||
|
||||
function getPostesLabel(artiste) {
|
||||
const postes = extractStrapiList(artiste?.postes_artiste_ondif)
|
||||
return postes
|
||||
.map((p) => p?.nom_poste)
|
||||
.filter(Boolean)
|
||||
.join(", ")
|
||||
}
|
||||
|
||||
function isDirectionArtist(artiste) {
|
||||
const postes = extractStrapiList(artiste?.postes_artiste_ondif)
|
||||
.map((p) => String(p?.nom_poste || "").trim().toLowerCase())
|
||||
.filter(Boolean)
|
||||
|
||||
return postes.some((poste) => postesDirection.includes(poste))
|
||||
}
|
||||
|
||||
function extractStrapiList(value) {
|
||||
if (!value) return []
|
||||
if (Array.isArray(value)) return value.map(normalizeStrapiItem).filter(Boolean)
|
||||
if (value?.data) {
|
||||
const rows = Array.isArray(value.data) ? value.data : [value.data]
|
||||
return rows.map(normalizeStrapiItem).filter(Boolean)
|
||||
}
|
||||
if (typeof value === "object") return [normalizeStrapiItem(value)].filter(Boolean)
|
||||
return []
|
||||
}
|
||||
|
||||
function normalizeStrapiItem(item) {
|
||||
if (!item || typeof item !== "object") return null
|
||||
if (item.attributes && typeof item.attributes === "object") {
|
||||
return { id: item.id, ...item.attributes }
|
||||
}
|
||||
return item
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
|
||||
|
||||
.remonter_artistes_list {
|
||||
transform: translateY(-90px);
|
||||
}
|
||||
|
||||
.theme_bandeau--grid {
|
||||
> .page-section--inner {
|
||||
padding-top: 70px;
|
||||
padding-bottom: 150px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
column-gap: 120px;
|
||||
row-gap: 30px;
|
||||
}
|
||||
&--left {
|
||||
max-width: 40%;
|
||||
h1 {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
}
|
||||
&--right {
|
||||
max-width: 60%;
|
||||
&--text {
|
||||
max-width: 500px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.musiciens_list_wp {
|
||||
// parce que le bloc du dessus à un transform: translateY(-170px); alors cela laisse un espace vide que l'on comble avec ce margin-top négatif
|
||||
margin-top: -120px;
|
||||
}
|
||||
.musiciens_list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.musicien_card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.musicien_card_nom {
|
||||
margin-top: 8px;
|
||||
margin-left: 5px;
|
||||
&:hover {
|
||||
color: var(--c-brand_rouge);
|
||||
}
|
||||
}
|
||||
.musicien_card_postes {
|
||||
margin-left: 5px;
|
||||
text-transform: lowercase;
|
||||
&::first-letter {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.musiciens_list {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.musiciens_list {
|
||||
grid-template-columns: 1fr;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.musiciens_list {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -48,6 +48,7 @@ export default defineNuxtConfig({
|
||||
// Server-side only (jamais exposé au client)
|
||||
// ceci strapiToken: process.env.NUXT_STRAPI_TOKEN || '', est remplacé par la ligne ci-dessous car la récup des variable .env est automatique si on les nomme correctement
|
||||
strapiToken: '',
|
||||
saison: process.env.SAISON || '',
|
||||
//instagramAppId: process.env.NUXT_INSTAGRAM_APP_ID,
|
||||
//instagramClientToken: process.env.NUXT_INSTAGRAM_CLIENT_TOKEN,
|
||||
|
||||
@@ -55,6 +56,7 @@ export default defineNuxtConfig({
|
||||
// lit implicitement la variables .env process.env.NUXT_PUBLIC_STRAPI_URL
|
||||
public: {
|
||||
strapiUrl: '',
|
||||
saison: process.env.SAISON || '',
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
7
server/api/__strapi__/artistes.get.js
Normal file
7
server/api/__strapi__/artistes.get.js
Normal file
@@ -0,0 +1,7 @@
|
||||
import { createStrapiProxyHandler } from "~~/server/utils/strapiEndpoint"
|
||||
|
||||
export default defineEventHandler(
|
||||
createStrapiProxyHandler({
|
||||
strapiPath: "/api/artistes-ondifs",
|
||||
})
|
||||
)
|
||||
Reference in New Issue
Block a user