Štítekvzhled¹⁰

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.

Ve stylesheetu tohoto webu není jediná hodnota barvy.

Každá barva, na kterou se právě díváš – pozadí, text, odkazy, navigace, malé pilulky štítků – pochází ze sedmi klíčů v config/site.yml. Sestavení je zkompiluje do souboru colors.css a site.css jen používá proměnné. Změň sedm řádků, sestav znovu, a web je někdo úplně jiný.

Tady je úplná paleta světlého režimu:

colors:
  light:
    bg: "#f5f8fa"
    text: "#444a5a"
    meta_text: "#657784"
    accent: "#1da1f2"
    nav_bg: "#eaf5fd"
    border: "#e1e8ed"
    pill_bg: "#d6ecfc"

A tady je táž titulní strana v pěti paletách – mezi těmito snímky se nezměnilo nic než sedm řádků YAML a nové sestavení: