Štítekvzhled¹³

Tenhle web má nový vzhled. Jmenuje se Minimal Terminal a je to stránka tak, jak by ji vytiskl terminál: dvě písma, slova v hranatých závorkách místo tlačítek, mřížka před štítkem, nic kulatého a nic vyplněného kromě toho jednoho, co je zrovna vybrané.

Není ušitý jen pro tenhle web. Minimal Terminal je jeden ze šesti vzhledů rodiny Minimal, které přijdou s chystanou verzí 1.11, vedle samotného Minimalu, Literalu, Journalu, Manualu a Pictorialu. Web na kterýkoli z nich přepne jeden řádek, site.skin:, a každý si bere barvy z webu, takže tahle modrá je prostě vlastní modrá blogsh.app.

1.11 ještě nevyšla; tenhle web běží o kus napřed, aby se ukázalo, jak vzhled obstojí na skutečných stránkách. Jestli ti něco nesedí, řádek se láme, kde nemá, nebo se stránka špatně čte na telefonu, odpověz na tenhle příspěvek na Mastodonu.

Šest dílů pokrylo, o čem 1.10 je: archiv, který promlouvá, ikona místo terminálu, dveře pro programy, co teď výpis říká, uloženo beze změny a druhý jazyk, o vydání později. Tohle je zbytek, v pořadí, v jakém ho potká ten, kdo web provozuje. Většina z toho přišla ze dvou webů, které běžely na předběžné verzi od konce září, a od čtenářů, kteří si četli opravy oprav.

Výpis je stránka, kterou engine staví nejčastěji a kterou nikdo nepíše. Úvodní stránka, stránka štítku, rok archivu, díly série, výsledky hledání – všechno jsou karty příspěvků za sebou, a to, co karta říká, rozhoduje engine, ne autor. 1.10 na výpisech mění několik věcí najednou, a jedna z nich se změní, aniž by někdo cokoli nastavil. Na tu je dobré se připravit.

Karta obrázkového příspěvku nese obrázek

Karta se řeže na výšku a první blok si nechá, ať váží cokoli. Fotografie pod jedním řádkem slov tak z karty vypadla přesně u příspěvku, který je tou fotografií: na jednom archivu ukazovala první stránka obrázků tři obrázky ve třinácti kartách. Příspěvek druhu obrázek nebo video má teď na kartě napřed své médium a týž řez běží přes to, co následuje. Obrázek na výšku je držený na 22rem místo celé obrazovky a karta si tu výšku účtuje, takže popisek pod fotkou na výšku je na kartě také.

Tohle je ta změna, která se stane sama: každý web s takovými příspěvky ukáže po aktualizaci na výpisech víc obrázků. Článek s fotografií uvnitř zůstává článkem. A kdo chce, aby první karta úvodní stránky vedla obrázkem i u článku, zapne layout.lead_card. Je vypnuté: mění jen jednu kartu a jen na úvodní stránce, a to je rozhodnutí o vzhledu, které engine nedělá za autora.

Někdo přeloží své příspěvky, otevře českou polovinu webu – a menu pořád říká Writing, patička Links a na každé pilulce stojí anglický štítek. Příspěvky byly vždycky jen polovina toho, co čtenář čte. Zbytek je to, co web říká sám o sobě, a v 1.9 to má jazyk taky.

Dva skutečné weby nosí vzhled, který tento engine nikdy nedodával. sh.cynicky.blog je oblečený jako Ghost — úvodní karta přes celou šířku, tečkovaný rámeček, dlaždice místo prostého seznamu. arch-linux.cz je oblečený jako téma pro Hugo, konkrétně Blowfish — kompaktní lišta, blok s profilem, karty rozložené jako úplně jiná domovská stránka. Ani jeden nevytvořil fork enginu. Ani jeden neupravil šablonu. Oba dál přijímají obyčejný git pull.

Jeden stylesheet, načtený jako poslední

site.extra_css v config/site.yml udává cestu nebo seznam cest, které se načtou po vlastních colors.css a site.css enginu. To je celý mechanismus — skin je jeden tvůj soubor, který překresluje, co už na stránce je, a engine do něj nikdy nezapisuje, takže s ním aktualizace nikdy nemůže být v konfliktu.

Jen místní cesty: každá stránka nese style-src 'self' a stylesheet z jiného hostitele by prohlížeč prostě zahodil bez jediné chyby, kterou by kdokoli uviděl — sestavení proto vzdálenou cestu odmítne nahlas, dřív než to ticho nastane.

Čtenář změnil jednu barvu okraje v site.css, spustil nové sestavení a čekal, zatímco sestavení vytvořilo, bajt po bajtu, každou stránku, která už existovala. Zeptal se proč. Odpovědí bylo jedno slovo v jednom seznamu a 1.7 ho odstraňuje.

Co si sestavení zapisuje

Od 1.6 si sestavení vede záznam o tom, co vstoupilo do každé stránky, kterou zapsalo – příspěvek, příspěvky kolem něj, štítky, čísla, která stránka počítá. Při dalším sestavení se stránka, jejíž záznam se nezměnil, vůbec nevykresluje. Ne že by se vykreslila a pak shledala shodnou – nevykreslí se. Souhrn na konci říká, kolik stránek zůstalo netknutých; to je první číslo, na které se podívat, když je sestavení pomalé.

Záznam platí jen po dobu, kdy engine, který ho zapsal, je týž engine, a proto visí na otisku toho, z čeho se engine skládá – souborů v templates/, lib/, build/, locales/ a config/, hašovaných podle obsahu, ne podle času změny. Změň cokoli z toho a záznam se zahodí celý, protože cokoli z toho může změnit každou stránku.

Proč barva stála celý archiv

Ukázková konfigurace, kterou tento engine dodává, nese kolo: štítek jménem kolo a pod ním ručně vypsané <svg>. Je tam proto, že tam nebylo co jiného dát. tag_icons bral jméno ikony, kterou engine dodává, nebo vlastní kresbu, a dodával jen osm typů obsahu – text, obrázek, video, odkaz, zvuk, citát, dokument, chat. Štítek o cyklistice mohl nosit znak pro „zvuk", nebo někdo mohl strávit večer nad souřadnicovou mřížkou.

1.7 mezi to vkládá pětapadesát kreseb a každé dává jméno.

Pětapadesát podstatných jmen

Spočítáno v lib/icons.rb: osm typů obsahu, pětapadesát dalších, třiašedesát jmen, o která si štítek může říci. Seskupeno podle toho, o čem blogy bývají.

Každý příspěvek nosí odznak s datem a v něm ikonu, a ta ikona říká, o jaký druh příspěvku jde: text, obrázek, video, citát. Na blogu, kde je skoro všechno text, je ta ikona na skoro každé kartě stejná. Někdo, kdo tento engine provozuje, to v issue #45 řekl přímo: obecnou ikonu člověk vidí tak často, že se stane neviditelnou, nebo nepořádkem.

1.6 dovoluje, aby ikonu nesl místo toho štítek.

tag_icons:
  - tag: "build"
    icon_svg: '<svg viewBox="0 0 24 24" …>…</svg>'
  - tag: "comments"
    icon: "chat"

Nahrazuje, nepřidává

Na odznaku s datem u příspěvku zaujme ikona štítku místo ikony typu obsahu; v nadpisu /tag/<jméno>/ zaujme místo obecné ikony štítku. To byl první bod žadatele a ten, na který stálo za to se zeptat, místo hádat: dvě ikony vedle sebe na šedesátipixelovém odznaku nejsou odznak, ale hádanka. Štítek bez záznamu nemění nic, takže obecná ikona zůstává u všeho, co jsi nepojmenoval.

Příspěvek se přečte, a pak někam jde: do tootu, do zprávy, do e-mailu jednomu člověku. Dosud to čtenář dělal tak, že adresu opsal z řádku prohlížeče. 1.6 pod příspěvek dává řadu ovládacích prvků – vypnutou, dokud share: nejmenuje, co chceš, kreslenou v pořadí, v jakém to jmenuješ.

share:
  - mastodon
  - bluesky
  - email
  - copy
  - system

Co se předvyplní a co ne

Jméno příspěvku a jeho adresa tam, kde cíl bere obojí. Facebook a LinkedIn berou jen adresu a jméno si přečtou ze stránky. Čtenář píše tu část, která je jeho. bluesky, email, facebook, linkedin, threads a x jsou prosté odkazy, každý jedna adresa, žádný skript za nimi.

Tři, které nejsou odkazy

Postranní panel má kartu commitů. Až dosud četla GitHub, tečka – což je zvláštní výchozí volba u enginu, jehož přirozeným prostředím je Fediverse, kde kód bydlí na Codebergu nebo na něčím vlastním Forgejo a GitHub je zrcadlo, které si držíš kvůli jednomu widgetu.

Jeden z prvních lidí mimo tento projekt, kdo engine provozuje, položil tu zjevnou otázku a odpověď vyšla: widgets.commits.instance bere adresu serveru, a to je celá konfigurace.

Jeden klíč, ne dva

Vedle něj není žádný forge_type. Adresa už odpovídá na to, jaký druh hostitele to je – Gitea a Forgejo mluví týmž API, a klíč, který se musí shodovat s jiným klíčem, je chyba v konfiguraci čekající na svou chvíli. Vynech instance a karta čte GitHub, přesně jako dřív.

Levnější než originál

Obléci web jinak dřív znamenalo upravit soubor, který vlastní engine. Fungovalo to, přesně do příštího git pull, což je chvíle, kdy zjistíš, že přizpůsobení a aktualizace byly celou dobu týž soubor.

Čtyři věci, které potřebovaly upravenou šablonu, jsou teď nastavení.

Oba tyhle weby jsou tento engine, sestavený z téhož commitu téhož večera:

Dřívější příspěvek tady vysvětluje, že každá barva na tomto webu pochází ze sedmi klíčů v konfiguračním souboru. Ta část se nezměnila. Změnilo se to, že si už nemusíš představovat, jak těch sedm hodnot bude vypadat, než se k nim zavážeš.

Vybírat mezi čtrnácti hexadecimálními hodnotami je v průvodci přesně tak slepé jako v YAML. Takže ./style.sh ti to ukáže.

Sedm palet, jeden stisk klávesy

Celé palety teď přicházejí v config/palettes.yml, světlé i tmavé:

• Výchozí modrá, teplá, monochromatická a vysoký kontrast – čtyři z galerie na tomto webu, jejichž světlé režimy jsou přesně to, co ta stránka ukazovala. Jejich tmavé režimy jsou nové; galerie měla vždy jen světlé titulní strany.
• Slunečnice, krémová a zlatá s olivovými odkazy – zlatavá žlutá zůstává na pilulkách štítků, protože žlutý text na krémové se číst nedá a zvýrazňovací barva je tu především barvou textu.
• Zahrada, zelené a khaki.
• Oceán, ocelová modř nad námořnickou.