Komponentgalleriet i Journal

Det här är ingressblocket. Det sätter tonen i något större stil, och det stöder betoning inline och länkar tillbaka in i journalen via referenser.

Prosablock

Prosablocket är ren markdown. Det renderar rubriker, betoning, inline-kod, externa länkar och listor:

• Första punkten, med lite längd på sig så att radbrytningen syns.
• Andra punkten som nämner snake_case_identifierare inline.
• Tredje punkten.

1. Numrerad ett.
2. Numrerad två.
3. Numrerad tre.

Ett andra stycke följer så att styckeavståndet syns.

Det attribuerade citatet renderar en avatar med initialer och attribueringsraden under.

ALAda Lovelace · Ingenjör

Två nyckel/värde-listor

editorial_list och definitions är båda rader med nyckel och värde. De skiljer sig i hur mycket tyngd nyckeln kan bära. Läs nyckeln högt: ett ord eller en siffra är en redaktionell lista, en fras är en definitionslista. Om värdena sträcker sig förbi fyra rader, använd ingen av dem — h3-mellanrubriker med stycken, eller en riktig tabell.

Den redaktionella listan kommer först: en smal spalt med sprärrad monostil, nycklar på ett ord, en eller två rader värde. Nyckeln är ram, inte innehåll.

• TypatVarje block valideras mot schemat innan det renderas.
• HeadlessInnehållet hämtas från leverans-API:et vid byggtillfället.
• PortabeltSamma block renderas på marknadssajten och i förhandsvisningen.

Nu samma form med en fras som nyckel. Spalten på 196px ger den utrymme, nyckeln sätts i halvfet med stor begynnelsebokstav, och varje värde kan sträcka sig till ett kort stycke. Det här är en taxonomi — namngivna kategorier som läsaren jämför nedåt i spalten.

• Per åtgärdSalesforce. Flex Credits mäter agentens ansträngning — 20 krediter för en Agentforce-åtgärd, 30 för Voice. Ärligt om vad som kostar leverantören pengar, och en loop som försöker igen två gånger fakturerar dig tre gånger.
• Per verifierad lösningZendesk, till ett publicerat pris på 1,50 dollar. Två av de tre nivåerna är gratis — bara en verifierad lösning dras. Mest ingenjörsarbete någon lagt på att definiera det de fakturerar för.
• Per utfallIntercom, till 0,99 dollar, debiterat högst en gång per konversation. Försök faktureras inte, och en lösning dras av om kunden kommer tillbaka.

Två sorters betoning lever inuti ett definitionsvärde. **Dubbla asterisker** renderas som .term — bläckfärgad kursiv, för en term som definieras. *Enkla asterisker* renderas som <em> i koboltblå antikva, reserverad för den enda fras per post som bär argumentet. Koboltindexet ovanför varje nyckel är en CSS-räknare, så numrera aldrig nycklarna för hand.

export function render(blocks: Block[]) {
  return blocks.map((b) => renderers[b.type]?.(b.props));
}

Rutnätet med nyckeltal är en flexrad som bryts, så en kort sista rad sträcker sig för att fylla bredden i stället för att lämna döda celler. Fyra objekt läggs ut som 2×2 snarare än 3 + 1; fem ger tre och sedan två i halv bredd; sju ger tre, tre och sedan en i full bredd.