[{"data":1,"prerenderedAt":220},["ShallowReactive",2],{"post-designing-a-reusable-editorial-system-it":3,"related-posts-designing-a-reusable-editorial-system-it":185,"related-categories-designing-a-reusable-editorial-system-it":209},{"id":4,"title":5,"author":6,"authorImageUrl":7,"authorUrl":8,"body":9,"categorySlug":161,"categoryText":162,"dateModified":163,"datePublished":164,"description":165,"extension":166,"faqs":167,"image":85,"language":174,"meta":175,"navigation":176,"path":177,"seo":178,"stem":179,"tags":180,"__hash__":184},"blog\u002Fit\u002Fblog\u002Fdesigning-a-reusable-editorial-system.md","Progettare un sistema editoriale riutilizzabile","Bruma","\u002Fimages\u002Fauthors\u002Fbruma.jpg","https:\u002F\u002Fbrumaombra.com",{"type":10,"value":11,"toc":151},"minimark",[12,17,21,24,36,41,46,49,52,59,65,68,72,75,78,87,91,124,130,134,137,141,144,147],[13,14,16],"h2",{"id":15},"parti-dal-ritmo-editoriale","Parti dal ritmo editoriale",[18,19,20],"p",{},"Un'interfaccia blog riutilizzabile funziona meglio quando tipografia e spaziatura sono stabili prima di pensare al branding del prodotto. Quando ogni progetto deve reinterpretare titoli, card o metadati, il livello condiviso dei componenti smette di far risparmiare tempo.",[18,22,23],{},"In questa demo l'obiettivo non è simulare un CMS con dati infiniti. È dimostrare che i componenti condivisi per i contenuti possono visualizzare un articolo credibile, un flusso di categorie e un'esperienza di navigazione coerente tra le route.",[18,25,26,27,31,32,35],{},"Il renderer mantiene leggibili nel testo riferimenti come ",[28,29,30],"code",{},"BlogContentRenderer"," e ",[28,33,34],{},"sm:my-8",", senza trasformarli in blocchi di codice completi.",[37,38],"blog-list",{":items":39,"variant":40},"[\"Tipografia e spaziatura stabili rendono portabile la pagina dell'articolo\",\"I blocchi condivisi riducono la duplicazione tra app basate sui contenuti\",\"I wrapper preservano la compatibilità a livello di app mentre spostano la UI reale nella libreria\"]","checkmark",[42,43,45],"h3",{"id":44},"un-sistema-riutilizzabile-ha-bisogno-di-confini-chiari","Un sistema riutilizzabile ha bisogno di confini chiari",[18,47,48],{},"La libreria possiede gli elementi di interfaccia riutilizzabili: card hero, carousel, griglie di categorie, FAQ, informazioni sull'autore e comportamento dell'indice dei contenuti. La demo app possiede la sorgente dei contenuti e la composizione delle route.",[18,50,51],{},"È questo confine a rendere il setup portabile. Un altro progetto può cambiare l'inventario degli articoli, le informazioni sull'autore o la frequenza di pubblicazione senza riscrivere i blocchi condivisi.",[53,54],"flow",{":items":55,"description":56,"orientation":57,"title":58},"[\"Entry markdown\",\"Collezione dei contenuti\",\"Componente condiviso\",\"Route localizzata\"]","Ogni livello mantiene la propria responsabilità mentre l'articolo resta riutilizzabile.","horizontal","Dal contenuto alla route",[60,61],"code-block",{"code":62,"language":63,"title":64},"{\n  \"title\": \"Progettare un sistema editoriale riutilizzabile\",\n  \"category\": \"Sistemi di design\",\n  \"tags\": [\"Contenuti\", \"Vue\"]\n}\n","json","Un contenuto editoriale",[66,67],"hr",{},[13,69,71],{"id":70},"i-contenuti-reali-sono-un-test-migliore-degli-array-statici","I contenuti reali sono un test migliore degli array statici",[18,73,74],{},"Gli array simulati sono utili all'inizio, ma nascondono la forma reale di una pagina editoriale. Quando i contenuti vivono nel markdown, puoi verificare subito la gestione dei percorsi, i campi del frontmatter, le query dei contenuti correlati e il rendering del corpo dell'articolo.",[18,76,77],{},"È qui che il comportamento simile alla produzione diventa importante. Una pagina articolo funzionante non è solo un'immagine hero con qualche paragrafo. Include:",[18,79,80],{},[81,82],"img",{"alt":83,"height":84,"src":85,"width":86},"Spazio di lavoro per la pianificazione editoriale",933,"\u002Fimages\u002Fblog\u002Fdesigning-a-reusable-editorial-system\u002Fcover.jpg",1400,[37,88],{":items":89,"variant":90},"[\"Metadati della categoria\",\"Informazioni sull'autore e sulla pubblicazione\",\"Un indice dei contenuti basato sui dati\",\"Link agli articoli correlati\",\"Link alle categorie correlate\"]","circle",[92,93,98],"pre",{"className":94,"code":95,"language":96,"meta":97,"style":97},"language-bash shiki shiki-themes github-light github-dark","npm install\nnpm run dev\n","bash","",[28,99,100,113],{"__ignoreMap":97},[101,102,105,109],"span",{"class":103,"line":104},"line",1,[101,106,108],{"class":107},"sScJk","npm",[101,110,112],{"class":111},"sZZnC"," install\n",[101,114,116,118,121],{"class":103,"line":115},2,[101,117,108],{"class":107},[101,119,120],{"class":111}," run",[101,122,123],{"class":111}," dev\n",[125,126],"blog-table",{":headers":127,":highlightCol":128,":rows":129},"[\"Responsabilità\",\"Libreria\",\"App\"]","1","[[\"Blocchi UI editoriali\",\"Card, liste, tabelle, divisori, indice, FAQ, informazioni autore\",\"Li utilizza tramite wrapper o import diretti\"],[\"Sorgente dei contenuti\",\"Nessun contenuto di prodotto hardcoded\",\"Entry markdown e query delle route\"],[\"Blocchi di conversione specifici\",\"Opzionali\",\"Gestisce card CTA come GiveItATryCard\"]]",[42,131,133],{"id":132},"il-markdown-fa-emergere-le-ipotesi-sui-contenuti","Il markdown fa emergere le ipotesi sui contenuti",[18,135,136],{},"Con il markdown nel flusso, la pagina deve gestire prosa lunga e titoli annidati in modo naturale. Se spaziatura, stili della prosa o dati dell'indice si rompono, il problema diventa subito evidente.",[13,138,140],{"id":139},"la-demo-app-dovrebbe-comportarsi-come-un-consumer","La demo app dovrebbe comportarsi come un consumer",[18,142,143],{},"La demo app è più utile quando esercita la libreria come farebbe un prodotto reale. Questo significa importare i subpath pubblicati, affidarsi ai moduli Nuxt usati in produzione e interrogare i contenuti tramite le stesse API invece di aggirarle.",[18,145,146],{},"Questo approccio mantiene la demo onesta. Se qualcosa è complicato qui, sarà complicato anche per la prossima app che utilizzerà la libreria.",[148,149,150],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":97,"searchDepth":115,"depth":115,"links":152},[153,157,160],{"id":15,"depth":115,"text":16,"children":154},[155],{"id":44,"depth":156,"text":45},3,{"id":70,"depth":115,"text":71,"children":158},[159],{"id":132,"depth":156,"text":133},{"id":139,"depth":115,"text":140},"design-systems","Sistemi di design","2026-06-12T00:00:00Z","2026-06-10T00:00:00Z","Come abbiamo trasformato un'interfaccia blog usata una sola volta in una superficie editoriale riutilizzabile, capace di mantenere la propria identità anche fuori dal prodotto originale.","md",[168,171],{"question":169,"answer":170},"Perché spostare l'interfaccia blog in una libreria condivisa?","Perché permette a più progetti di riutilizzare le stesse superfici editoriali, le scelte di spaziatura e i pattern di interazione senza ricostruirli ogni volta.",{"question":172,"answer":173},"Cosa dovrebbe restare specifico dell'app?","Le query dei contenuti, la strategia SEO e i blocchi di conversione specifici del prodotto appartengono all'app, mentre card, liste, sidebar e pannelli informativi riutilizzabili appartengono alla libreria.","it",{},true,"\u002Fit\u002Fblog\u002Fdesigning-a-reusable-editorial-system",{"title":5,"description":165},"it\u002Fblog\u002Fdesigning-a-reusable-editorial-system",[181,182,183],"Design Systems","Content","Vue","rb7GND02s4Ce13HcA_ht0IHkZfaCcRGNjmwhA_gCiNo",[186,191,197,203],{"title":187,"description":188,"image":189,"categoryText":162,"path":190},"La modalità scura è un secondo design, non un filtro","Invertire i colori produce un tema scuro che funziona ma sembra leggermente sbagliato ovunque. I token semantici risolvono quasi tutto. Ombre e accenti richiedono più attenzione.","\u002Fimages\u002Fblog\u002Fdark-mode-is-a-second-design\u002Fcover.jpg","\u002Fit\u002Fblog\u002Fdark-mode-is-a-second-design",{"title":192,"description":193,"image":194,"categoryText":195,"path":196},"Progettare stati di focus che le persone notano davvero","Chi naviga con la tastiera si affida all'anello di focus per sapere dove si trova. Molti design lo nascondono o lo rendono sbiadito. Poche regole lo rendono visibile ed elegante.","\u002Fimages\u002Fblog\u002Ffocus-states-people-notice\u002Fcover.jpg","Accessibilità","\u002Fit\u002Fblog\u002Ffocus-states-people-notice",{"title":198,"description":199,"image":200,"categoryText":201,"path":202},"Pubblicare una libreria Vue senza passaggio di build","UI Vintage pubblica il proprio codice sorgente e lascia che ogni app Nuxt lo compili. Questa scelta elimina un'intera categoria di problemi e ne introduce un paio di nuovi.","\u002Fimages\u002Fblog\u002Fsource-published-packages\u002Fcover.jpg","Sviluppo","\u002Fit\u002Fblog\u002Fsource-published-packages",{"title":204,"description":205,"image":206,"categoryText":207,"path":208},"Perché le animazioni a molla sembrano più veloci di quanto siano","Una molla che supera di poco il bersaglio può durare più di una semplice dissolvenza e sembrare comunque più rapida. Ecco perché, e dove il trucco smette di funzionare.","\u002Fimages\u002Fblog\u002Fwhy-spring-animations-feel-faster\u002Fcover.jpg","Motion design","\u002Fit\u002Fblog\u002Fwhy-spring-animations-feel-faster",[210,212,214,216],{"name":201,"slug":211,"count":104,"image":200},"engineering",{"name":207,"slug":213,"count":104,"image":206},"motion-design",{"name":195,"slug":215,"count":104,"image":194},"accessibility",{"name":217,"slug":218,"count":104,"image":219},"Aggiornamenti prodotto","product-updates","\u002Fimages\u002Fblog\u002Fshipping-the-blog-migration\u002Fcover.jpg",1792259222403]