[{"data":1,"prerenderedAt":241},["ShallowReactive",2],{"post-shipping-the-blog-migration-it":3,"related-posts-shipping-the-blog-migration-it":206,"related-categories-shipping-the-blog-migration-it":230},{"id":4,"title":5,"author":6,"authorImageUrl":7,"authorUrl":8,"body":9,"categorySlug":182,"categoryText":183,"dateModified":184,"datePublished":184,"description":185,"extension":186,"faqs":187,"image":194,"language":195,"meta":196,"navigation":197,"path":198,"seo":199,"stem":200,"tags":201,"__hash__":205},"blog\u002Fit\u002Fblog\u002Fshipping-the-blog-migration.md","Pubblicare la migrazione del blog nella libreria","Bruma","\u002Fimages\u002Fauthors\u002Fbruma.jpg","https:\u002F\u002Fbrumaombra.com",{"type":10,"value":11,"toc":173},"minimark",[12,17,21,24,36,41,46,49,52,56,59,62,65,72,78,83,87,90,93,159,163,166,169],[13,14,16],"h2",{"id":15},"la-migrazione-cambia-ciò-che-la-demo-deve-dimostrare","La migrazione cambia ciò che la demo deve dimostrare",[18,19,20],"p",{},"Quando l'interfaccia del blog viene spostata nella libreria, la demo app smette di essere una galleria statica e diventa una vera superficie di integrazione. Deve dimostrare che i componenti funzionano con collezioni di contenuti, parametri di route e rendering markdown, non solo con array fissi.",[18,22,23],{},"È un test più significativo perché rispecchia il modo in cui un prodotto consumer utilizza davvero la libreria.",[18,25,26,27,31,32,35],{},"In pratica, l'integrazione resta facile da leggere quando nomi come ",[28,29,30],"code",{},"queryCollection"," e ",[28,33,34],{},"@brumaombra\u002Fui-vintage\u002Fcontent"," rimangono riferimenti inline compatti.",[37,38],"blog-list",{":items":39,"variant":40},"[\"La pagina interroga entry markdown reali invece di visualizzare array hardcoded\",\"I componenti condivisi dell'articolo passano attraverso import dedicati dai subpath della libreria\",\"La demo verifica insieme wrapper, rendering dei contenuti e composizione delle route\"]","numbered",[42,43,45],"h3",{"id":44},"un-comportamento-simile-alla-produzione-non-significa-essere-specifici-del-prodotto","Un comportamento simile alla produzione non significa essere specifici del prodotto",[18,47,48],{},"La demo non ha bisogno di ogni card di conversione o helper SEO dell'app originale. Ha bisogno del flusso dati reale: collezione dei contenuti, schema del frontmatter, renderer dei contenuti, logica degli articoli correlati e navigazione delle categorie.",[50,51],"hr",{},[13,53,55],{"id":54},"pochi-articoli-di-esempio-bastano-per-verificare-il-grafo-delle-route","Pochi articoli di esempio bastano per verificare il grafo delle route",[18,57,58],{},"Con una manciata di articoli, la demo può verificare l'intero grafo delle route del blog:",[37,60],{":items":61},"[\"L'indice \u002Fblog\",\"La pagina articolo \u002Fblog\u002F[slug]\",\"La panoramica \u002Fblog\u002Fcategories\",\"La lista \u002Fblog\u002Fcategories\u002F[slug]\"]",[18,63,64],{},"È il minimo utile per verificare che i componenti migrati continuino a comporsi correttamente intorno a contenuti reali.",[66,67],"flow",{":items":68,"description":69,"orientation":70,"title":71},"[\"Entry markdown\",\"Query della collezione\",\"Route localizzata\",\"Articolo renderizzato\"]","La demo segue lo stesso percorso di un'applicazione consumer.","horizontal","Dal markdown alla route",[73,74],"code-block",{"code":75,"language":76,"title":77},"L'articolo viene caricato dal markdown e renderizzato nella superficie blog condivisa.\n","text","Output testuale",[79,80],"blog-table",{":headers":81,":rows":82},"[\"Route\",\"Cosa verifica\"]","[[\"\u002Fblog\",\"Composizione dell'indice, articoli in evidenza e liste paginate\"],[\"\u002Fblog\u002F[slug]\",\"Contenuto dell'articolo, informazioni autore, indice e blocchi correlati\"],[\"\u002Fblog\u002Fcategories\",\"Aggregazione e navigazione delle categorie\"],[\"\u002Fblog\u002Fcategories\u002F[slug]\",\"Liste di articoli filtrate con paginazione\"]]",[42,84,86],{"id":85},"lo-schema-dei-contenuti-è-importante-quanto-i-componenti","Lo schema dei contenuti è importante quanto i componenti",[18,88,89],{},"La pagina articolo funziona bene perché lo schema dei contenuti include gli stessi metadati che l'interfaccia si aspetta: titolo, descrizione, immagine, autore, date di pubblicazione, informazioni sulla categoria, lingua e FAQ.",[18,91,92],{},"Se questi campi cambiano, la pagina diventa fragile. Mantenere lo schema esplicito fa parte del rendere la libreria utilizzabile.",[94,95,100],"pre",{"className":96,"code":97,"language":98,"meta":99,"style":99},"language-ts shiki shiki-themes github-light github-dark","const post = await queryCollection('blog')\n  .path(route.path)\n  .first();\n","ts","",[28,101,102,136,148],{"__ignoreMap":99},[103,104,107,111,115,118,121,125,129,133],"span",{"class":105,"line":106},"line",1,[103,108,110],{"class":109},"szBVR","const",[103,112,114],{"class":113},"sj4cs"," post",[103,116,117],{"class":109}," =",[103,119,120],{"class":109}," await",[103,122,124],{"class":123},"sScJk"," queryCollection",[103,126,128],{"class":127},"sVt8B","(",[103,130,132],{"class":131},"sZZnC","'blog'",[103,134,135],{"class":127},")\n",[103,137,139,142,145],{"class":105,"line":138},2,[103,140,141],{"class":127},"  .",[103,143,144],{"class":123},"path",[103,146,147],{"class":127},"(route.path)\n",[103,149,151,153,156],{"class":105,"line":150},3,[103,152,141],{"class":127},[103,154,155],{"class":123},"first",[103,157,158],{"class":127},"();\n",[13,160,162],{"id":161},"i-contenuti-correlati-dovrebbero-essere-deterministici","I contenuti correlati dovrebbero essere deterministici",[18,164,165],{},"Anche in una demo piccola, i contenuti correlati non dovrebbero sembrare casuali. Dare priorità agli articoli della stessa categoria rende il comportamento comprensibile e più vicino a quello di un prodotto reale.",[18,167,168],{},"Per questa app è sufficiente così. L'obiettivo non è ricreare un motore completo di raccomandazione editoriale, ma verificare che layout, link e componenti di supporto funzionino quando i contenuti sono reali.",[170,171,172],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}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":99,"searchDepth":138,"depth":138,"links":174},[175,178,181],{"id":15,"depth":138,"text":16,"children":176},[177],{"id":44,"depth":150,"text":45},{"id":54,"depth":138,"text":55,"children":179},[180],{"id":85,"depth":150,"text":86},{"id":161,"depth":138,"text":162},"product-updates","Aggiornamenti prodotto","2026-06-14T00:00:00Z","Una sintesi pratica di ciò che è cambiato quando l'implementazione originale del blog è stata spostata in una libreria di componenti compatibile con Nuxt.","md",[188,191],{"question":189,"answer":190},"Perché mantenere Nuxt Content nella demo app?","Perché la demo deve verificare lo stesso percorso di query e rendering dei contenuti che userebbe un consumer in produzione, non solo i componenti visivi in isolamento.",{"question":192,"answer":193},"Quanti articoli di esempio include la demo?","Sei articoli per lingua. Bastano per riempire l'indice, dare agli articoli e alle categorie correlate una scelta reale, avere più di un articolo nella stessa categoria e condividere i tag tra articoli, restando abbastanza pochi da leggerli tutti in una volta.","\u002Fimages\u002Fblog\u002Fshipping-the-blog-migration\u002Fcover.jpg","it",{},true,"\u002Fit\u002Fblog\u002Fshipping-the-blog-migration",{"title":5,"description":185},"it\u002Fblog\u002Fshipping-the-blog-migration",[202,203,204],"Nuxt","Content","Component Libraries","zpJvpANnKeCOrzlG-MElz4ORhFJ9QLqHtuUfx73GpuI",[207,213,219,224],{"title":208,"description":209,"image":210,"categoryText":211,"path":212},"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":214,"description":215,"image":216,"categoryText":217,"path":218},"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","Sistemi di design","\u002Fit\u002Fblog\u002Fdark-mode-is-a-second-design",{"title":220,"description":221,"image":222,"categoryText":217,"path":223},"Progettare un sistema editoriale riutilizzabile","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.","\u002Fimages\u002Fblog\u002Fdesigning-a-reusable-editorial-system\u002Fcover.jpg","\u002Fit\u002Fblog\u002Fdesigning-a-reusable-editorial-system",{"title":225,"description":226,"image":227,"categoryText":228,"path":229},"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",[231,233,237,239],{"name":211,"slug":232,"count":106,"image":210},"accessibility",{"name":234,"slug":235,"count":106,"image":236},"Motion design","motion-design","\u002Fimages\u002Fblog\u002Fwhy-spring-animations-feel-faster\u002Fcover.jpg",{"name":217,"slug":238,"count":138,"image":216},"design-systems",{"name":228,"slug":240,"count":106,"image":227},"engineering",1792259223177]