Hugo blogunda Mermaid çizimleri Pele kütüphanesine taşındı
Öne çıkanlar
- Mevcut Markdown Mermaid blokları değiştirilmeden sadece istemci tarafındaki işleyici güncellendi.
- Pele betiği harici bir derleme adımı yerine doğrudan jsDelivr CDN üzerinden asenkron olarak yüklendi.
- CSS değişkenleri kullanılarak tema değişikliklerinde SVG çizimleri yeniden derlenmeden renk güncellendi.
Statik site üreticisi Hugo altyapısını kullanan bir yazılımcı, blogundaki Mermaid diyagramlarını işlemek için kepano tarafından duyurulan Pele adlı yeni kütüphaneyi entegre etti. Entegrasyon sürecinde Markdown içindeki mevcut Mermaid kod blokları korunurken, istemci tarafında çalışan geleneksel Mermaid işleyicisi doğrudan CDN üzerinden çağrılan Pele betiğiyle değiştirildi. Çalışma, herhangi bir npm derleme adımı eklenmeden tamamlandı.
Yapılan teknik düzenlemeler kapsamında Hugo tema şablonlarına yeni bir kod bloğu kancası ve altbilgi yükleyicisi eklendi. Diyagram kaynak metinlerinin HTML etiketleriyle çakışmaması amacıyla metin kaçırma kuralları uygulandı ve JavaScript kapalı olduğunda ham kodun okunabilmesi için pre etiketleri kullanıldı. Sayfa yüklendiğinde yalnızca diyagram içeren sayfalarda asenkron olarak çalışan betik, SVG formatındaki çizimleri dinamik biçimde tarayıcıya yerleştirdi.
Pele kütüphanesinin CSS değişkenleri desteği sayesinde blogun Catppuccin temaları diyagram renklerine doğrudan bağlandı. Bu yöntemle tema değiştiğinde SVG öğelerini yeniden oluşturmaya gerek kalmadan renk geçişleri sağlandı. Yeni sistem ayrıca dar ekranlarda yatay akış şemalarını dikey düzene çeviren duyarlı yerleşimleri ve yakınlaştırma ile kaydırma özelliklerini de blog sayfalarına kazandırdı.
Bu özet yapay zekâ ile hazırlanmıştır; ayrıntılar ve doğrulama için orijinal kaynağa başvurun.