Skip to content

Card de partajare 1200×630, og:locale și apple-touch-icon

Vitalie requested to merge 8_share-card into main

Rezolvă primele șapte puncte din #8 (closed). Al optulea — câmpul shareImage pentru produs, colecție și articol — vine în MR separat: e migrare de bază plus ecran de admin, și n-are efect până nu alege Vitalie pozele.

Ce era

Previzualizarea oricărei pagini fără poză proprie era banda de logo 700×95, cu fundal transparent. E sub minimul acceptat de platforme, deci pe cele mai multe cardul apărea fără nicio imagine, iar unde apărea, transparența se turna pe negru și se vedea un wordmark negru pe un dreptunghi negru. Acoperea 54 de pagini, printre ele prima pagină în toate cele trei limbi.

Ce s-a schimbat

og-default.jpg — 1200×630, opac, wordmarkul centrat, generat din hyperice-logo.svg. Fundalul negru e ales de Vitalie dintre două variante randate. 11 KB.

og:image:width / og:image:height — doar pentru card. O pagină de produs își folosește propria poză (800×869) și a-i pune eticheta 1200×630 ar strica prima randare, exact invers decât e rostul celor două tag-uri. Am semnalat abaterea față de litera issue-ului; motivul e în comentariul din cod.

og:image:alt — numele site-ului pentru card, titlul paginii pentru o poză proprie.

og:localero_MD / ru_RU / en_US, plus câte un og:locale:alternate pentru celelalte două limbi, reciproc între cele trei versiuni ale aceleiași pagini.

apple-touch-icon.png — 180×180, opac (iOS ignoră transparența și o umple cu negru), referit din index.html cu ?v=1, aceeași regulă de adresă fixă ca la favicon.

tools/image-optimizer — comit separat. Unealta citea iconița ca „PNG care ar trebui să fie JPEG" și îi schimba numele, adică exact adresa pe care o caută iOS. Numele impuse de platformă sunt acum protejate; bugetul și fratele WebP rămân obligatorii și pentru ele.

Verificare

  • npx tsc curat pe ambele; oxlint cu singurul avertisment preexistent; 196 de teste frontend, 431 backend, ambele build-uri trec.
  • Randat local, pe cele trei limbi: cardul, dimensiunile și og:image:alt apar doar unde trebuie; pe /products/hypervolt-3 se folosește poza produsului, fără dimensiuni, cu alt = numele produsului. og:locale iese ro_MD, ru_RU, en_US, fiecare cu exact celelalte două ca alternate.
  • sips: og-default.jpg 1200×630 hasAlpha: no; apple-touch-icon.png 180×180 hasAlpha: no.
  • Unealta rulată din nou: 622 de imagini, toate în formă, iconița nu s-a redenumit, npm run check curat.

Teste noi (24). Fiecare a fost verificat prin mutație — se strică implementarea, se confirmă că testul pică, se repară. Printre ele: două teste care țin cele două copii ale constantelor (cardul și maparea de limbi) egale între server și aplicație, pentru că o schimbare într-un singur fișier ar trece altfel nedetectată; un test care verifică octeții reali ai iconiței, inclusiv absența chunk-ului tRNS (un PNG cu paletă poate fi transparent fără să aibă canal alfa); și unul care prinde dimensiunile rămase în urmă când vizitatorul trece de la o pagină cu card la una cu poză proprie.

Reparat pe drum

Construiam lista de limbi cu alternatesFor(path), dar path are deja prefixul de limbă pus, deci ar fi produs /ru/ru/... dacă cineva ar fi folosit și căile de acolo. Azi se citea doar limba, deci nu se vedea. Ambele fișiere merg acum direct pe lista de limbi, care e oricum sursa din care derivă alternatesFor.

Ce nu se poate verifica de aici

Facebook Sharing Debugger cere ca pagina să fie live, deci criteriul acela se confirmă după deploy.

Merge request reports