A napi munkám során már jó ideje a Claude Code-dal dolgozom. Így tudtam, hogy a saját blogomnál is sokat tud segíteni majd. Én kérdeztem, döntöttem és ellenőriztem, „ő” olvasta a dokumentációt, írta a kód nagy részét és mindketten teszteltünk. Minden téma saját Git branch-et kapott, így külön-külön tudtam átnézni (és ha kell, eldobni) a változásokat.
Kezdjük a frissítéssel!
Az első lépés a 7.0-s verzióról a 7.3-asra való frissítés volt. Ez önmagában simán ment, de szerettem volna biztosra menni, ezért a frissítés előtt és után is legeneráltuk az oldalt, és az eredményeket összevetettük.
Ennek meg is lett az eredménye: felfedeztük, hogy a bejegyzések nagyjából harmadánál rossz időpont jelent meg. Kiderült, hogy a hibát a Dante témától örökölt RSS szkript okozta, amely módosította a bejegyzések dátumát. Az új Astro más sorrendben építi fel az oldalt, ezért ez most előjött. A javítás után a dátumok újra helyesek. (És a Dante jelenlegi változata sem tartalmazza már a hibát, így hibajegyet nem kellett nekik küldeni.)
A feed vizsgálata közben az is kiderült, hogy a linkjei az Astrora váltáskor általam törölt /blog/… útvonalakra mutattak, vagyis az RSS olvasók törött linkeket kaptak. Javítva.
Minden MDX bejegyzésnél megjelent egy új figyelmeztetés is a buildben. Ez egy ismert Astro hiba, a javítás már úton van, addig csak ezt az egy figyelmeztetést rejtettem el.
Magyarul vagy angolul?
A bejegyzéseim nagy része magyar, a rendszer mégis mindent angolnak jelölt. Ez főleg képernyőolvasó esetén okozhatott gondot, hiszen a gép angol kiejtéssel olvasta fel a magyar szöveget.
Mostantól minden bejegyzés a saját nyelvének megfelelő azonosítót kap, így a keresők és a segítő technológiák is a helyes információhoz jutnak. Azonban a magyar nyelvű tartalmak is angol „keretezéssel” (pl. a lábléc) jelennek meg, ezért ezeket külön kezeli a kód.
Mivel a beállítás ugyanott található, egyúttal a még WordPress-ből áthozott bejegyzések adatait is kitakarítottam: nagyjából 2000 sornyi felesleges infó tűnt el.
S ha nem elég: eddig a canonical URL-ek minden oldalhoz hibásan generálódtak (felesleges .html végződéssel) – most már ez a probléma is megszűnt.
Képek, ahogy az Astro szereti
Az Astro már jó ideje képes optimalizálni a feltöltött képeket – ha hagyjuk neki. A (nekem) megfelelő konfigurálás eddig nem sikerült (egy korábbi AI modellel próbálkoztam már egyszer), ezért eddig én optimalizáltam egyenként a képeket, feltöltés előtt. De ez azt jelentette, hogy minden eszköz ugyanazt a képet kapta, kijelző mérettől és felbontástól függetlenül. Mostantól viszont az Astro több méretet generál és minden eszköz az ideális verziót kaphatja.
Azért egy kis tuning is kellett, mivel a sima Markdown képek nagy kijelzőn feleslegesen nagy fájlt töltöttek le, mert a böngésző nem tudta, milyen széles a szöveghasáb. Ezt most egy kis Markdown plugin árulja el neki. Az esetleges képaláírásokat pedig egy új Figure komponens kezeli, így az MDX bejegyzések is egyszerűek maradnak.
Bekerült az Astro típusellenőrzője is (npm run check), ami rögtön az első futásnál talált egy valódi hibát a friss képkezelő kódban – amit azon melegében javítottunk is, természetesen!
Végre egy admin felület
Régóta kerestem a módját annak is, hogy legyen egy (opcionális) admin felületem, ami kényelmesebbé teszi a bejegyzések létrehozását. Azonban a jól ismert, elterjedt megoldások mindegyikénél találtam valamit, ami nem tetszett. Végül a Sveltia CMS mellett tettem le a voksomat, amire véletlenül akadtam rá.
Kicsit aggasztott, hogy a Sveltiát egyetlen ember fejleszti. De mivel egy kiegészítő, ami nélkül a blog ugyanúgy működik, a kockázat kicsi. (A verzióját azért rögzítettük, mert még béta.)
Egy kis takarítást a Sveltia előkészítése is eredményezett azért. A bejegyzéseim külön description és teaser mezőit összevontam, mert mindössze a megjelenítésükben különböztek. Most már csak egy mező és egy kapcsoló van.
Új ruha
A leglátványosabb változás: a blog új megjelenést kapott. Az előzőt már kezdtem régiesnek érezni, szerettem volna egy kicsit modernebb külsőt. Viszont továbbra sem akartam látványos grafikákra, képekre, videókra alapozni. Így maradt, ami számomra egyébként is fontos: a szép tipográfia – kiegészítve az átgondolt térkezeléssel és színhasználattal.
Mielőtt bármi a kódba került volna, látványterveken próbáltunk ki több irányt. Hatszor kellett módosítani az elképzeléseket, mire elégedett lettem az eredménnyel.
Néhány újdonság:
- Piros vonal felül és alul, piros iniciálé, (majdnem teljesen) fehér háttér és egy meleg, enyhén bézs „Read next” sáv (a bejegyzéseknél). Vagyis az előzőnél kontrasztosabb, kicsit „harsányabb” megjelenés.
- A korábbi emojit egy új, egyszerűsített, de továbbra is rám utaló arc grafika váltotta a fejlécben és faviconként.
- A címekhez Fraunces, a szöveghez Source Serif 4, a kisebb elemekhez pedig IBM Plex betűcsalád.
- Sokkal nagyobb, „bátrabb” betűméret a címsorokban.
- Piros sorszámok a címlapon minden bejegyzés mellett. Kértem „fűszer” ötleteket a Claude-tól, mert azt éreztem, hiába igazgatjuk a dolgokat, a címlap egyszerűen unalmas. Öt javaslatot adott, ez nyert.
Folyt. köv.
Egyelőre ennyi, de maradt még ötlet a tarsolyban. Azok is érkeznek majd, ahogy időm engedi. Köszönöm az érdeklődést, várlak vissza legközelebb is!