Kategorien
Projekte Webentwicklung

Astro, Netlify und falsche Annahmen

Gestern habe ich endlich herausgefunden, warum Netlify in meinem Preview-Build keine Bilder in bestimmten Seiten anzeigt. In meinem Fall war das eine Gallery, die einen Ordner übergeben bekommt.

Danach habe ich alle Bilder, die in Astro gefunden werden über diesen Filter gejagt. Lokal und im statischen Build war alles wunderbar.

Erster Gedanke war, dass bei Netlify die Bilder-Ausgabe einen Timeout hat, da ich am Anfang noch recht große Bilder verwendet habe. Allerdings hat der Resize der Bilder nichts bewirkt. Das war’s dann nicht.

Dann war die nächste Vermutung es läge an der fehlenden Netlify Integration, aber die ist für den static Build völlig unerheblich, wichtig ist die hauptsächlich für den Betrieb einer SSR Anwendung. Das Image-CDN und die Bearbeitung der Bilder ist davon (im static Build) nicht betroffen.

Am Ende habe ich in meiner Verzweiflung angefangen, in der Anwendung an verschiedenen Stellen zu debuggen, unter anderem an dem Mechanismus, mit dem ich die Bilder zusammensuche. Tatsächlich war das nur als Übergang gedacht, da ich damit ja den Bildern auch keine alt-Texte und Co. übergeben konnte, aber die Galeriemodule funktional schon mal testen konnte.

Spannenderweise hat die obige Debug-Ausgabe lokal das erwartete Ergebnis gezeigt.

Im Netlify-Build-Log war allerdings trotz gefundenen Images das filteredImages-Log leer, bzw. ein leeres Array:

Und wie man sieht: Netlify findet Bilder scheinbar nur – in schon bearbeiteter Form – in dem _astro-Ordner, wenn die Components gebaut werden. Blöd, aber genau der Grund, warum der Filter nicht funktioniert und damit keine Bilder zurückgegeben werden. Leider unterscheided sich das von der Lokalen Bauweise, wo die Bilder noch in den korrekten Ordnern liegen.

Verlinkt man die Bilder normal, z.B. aus der Content-Collection, dann geht natürlich alles korrekt und auch der Preview Build bei Netlify funktioniert korrekt. Jetzt sogar schon mit Alt-Texten, zumindest bei den Contents, in denen ich das ganze schon gepflegt habe. Wird der nächste Schritt mit SEO-und Accessibility-Screening halt schon etwas schneller möglich.

Kategorien
Wochenbericht

Wochenbericht 2022.48

  1. Wie man Portainer für die Docker-Verwaltung mit dem Nginx Proxy Manager installiert und nutzt
  2. Github releases two new open source fonts – Mona Sans and Hubot Sans
  3. Fancy frames with CSS
  4. Deno Is “Blazing Fast” For Humans
  5. Speeding up the JavaScript ecosystem – one library at a time
Kategorien
Wochenbericht

Wochenbericht 2022.46

  1. Automatisierte Scans: Microsoft sperrt Kunden unangekündigt für immer aus
  2. Announcing Nuxt 3.0
  3. Ryan Dahl talks about Deno and JavaScript in general
  4. Mozilla to begin signing Mv3 extensions for Firefox
  5. Interactive CSS Flex Tutorial / Flexible Box
Kategorien
Wochenbericht

Wochenbericht 2022.45

  1. Domaininhaber müssen künftig Adressdaten hinterlegen
  2. Nuxt 3 is coming in a week.
  3. Kennst Du diese unbekannten CSS-Attribute?
  4. Announcing the Astro Tutorial
  5. Alternativen zu Mailhog
Kategorien
Wochenbericht

Wochenbericht 2022.29

  1. Vite 3.0 is out!
  2. Reject omitting “Reject All”
  3. [PSA] Abmahnungen wegen Google Fonts
  4. Storybook 7.0 design sneak peek
  5. Humbleicons – A pack of 223 simple, neutral, carefully crafted icons can be used in personal and commercial projects for free.

Was zum Lachen: Complexity