[{"data":1,"prerenderedAt":568},["ShallowReactive",2],{"navigation_docs":3,"-ecrire-reference-storybook":81,"-ecrire-reference-storybook-surround":563},[4,15,63],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":14},"Démarrer","i-lucide-rocket","\u002Fdemarrer","1.demarrer",[10],{"title":11,"path":12,"stem":13},"Votre première présentation","\u002Fdemarrer\u002Fpremiere-presentation","1.demarrer\u002F1.premiere-presentation",false,{"title":16,"icon":17,"path":18,"stem":19,"children":20,"page":14},"Écrire","i-lucide-pen-line","\u002Fecrire","2.ecrire",[21,25,29,33,37,41,45],{"title":22,"path":23,"stem":24},"La syntaxe","\u002Fecrire\u002Fsyntaxe","2.ecrire\u002F1.syntaxe",{"title":26,"path":27,"stem":28},"Les composants","\u002Fecrire\u002Fcomposants","2.ecrire\u002F2.composants",{"title":30,"path":31,"stem":32},"Intégrer une story Storybook","\u002Fecrire\u002Fstory-storybook","2.ecrire\u002F3.story-storybook",{"title":34,"path":35,"stem":36},"Placer une image à côté du texte","\u002Fecrire\u002Fimage-a-cote-du-texte","2.ecrire\u002F4.image-a-cote-du-texte",{"title":38,"path":39,"stem":40},"Ajouter des notes de présentation","\u002Fecrire\u002Fnotes-de-presentation","2.ecrire\u002F5.notes-de-presentation",{"title":42,"path":43,"stem":44},"Exporter en PDF","\u002Fecrire\u002Fexport-pdf","2.ecrire\u002F6.export-pdf",{"title":46,"icon":47,"path":48,"stem":49,"children":50,"page":14},"Référence","i-lucide-book-open","\u002Fecrire\u002Freference","ecrire\u002Freference",[51,55,59],{"title":52,"path":53,"stem":54},"@vignettes\u002Fnuxt","\u002Fecrire\u002Freference\u002Fnuxt","ecrire\u002Freference\u002Fnuxt\u002FREADME",{"title":56,"path":57,"stem":58},"@vignettes\u002Fschemas","\u002Fecrire\u002Freference\u002Fschemas","ecrire\u002Freference\u002Fschemas\u002FREADME",{"title":60,"path":61,"stem":62},"@vignettes\u002Fstorybook","\u002Fecrire\u002Freference\u002Fstorybook","ecrire\u002Freference\u002Fstorybook\u002FREADME",{"title":64,"icon":65,"path":66,"stem":67,"children":68,"page":14},"Studio","i-lucide-layout-grid","\u002Fstudio","3.studio",[69,73,77],{"title":70,"path":71,"stem":72},"Les rôles","\u002Fstudio\u002Froles","3.studio\u002F1.roles",{"title":74,"path":75,"stem":76},"Visibilité et partage","\u002Fstudio\u002Fvisibilite-et-partage","3.studio\u002F2.visibilite-et-partage",{"title":78,"path":79,"stem":80},"Versions et brouillon","\u002Fstudio\u002Fversions-et-brouillon","3.studio\u002F3.versions-et-brouillon",{"id":82,"title":60,"body":83,"description":93,"extension":559,"meta":560,"navigation":272,"path":61,"seo":561,"stem":62,"__hash__":562},"docs\u002Fecrire\u002Freference\u002Fstorybook\u002FREADME.md",{"type":84,"value":85,"toc":554},"minimark",[86,90,94,120,193,196,233,238,253,289,300,304,339,372,384,531,540,544,550],[87,88,60],"h1",{"id":89},"vignettesstorybook",[91,92,93],"p",{},"Embeds a live Storybook story in a slide. The deck stays in step with the design system: no screenshot to regenerate, the story renders from its own source.",[95,96,101],"pre",{"className":97,"code":98,"language":99,"meta":100,"style":100},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm add @vignettes\u002Fstorybook\n","bash","",[102,103,104],"code",{"__ignoreMap":100},[105,106,109,113,117],"span",{"class":107,"line":108},"line",1,[105,110,112],{"class":111},"sBMFI","pnpm",[105,114,116],{"class":115},"sfazB"," add",[105,118,119],{"class":115}," @vignettes\u002Fstorybook\n",[95,121,125],{"className":122,"code":123,"language":124,"meta":100,"style":100},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  modules: ['@vignettes\u002Fnuxt', '@vignettes\u002Fstorybook'],\n})\n","ts",[102,126,127,148,184],{"__ignoreMap":100},[105,128,129,133,136,140,144],{"class":107,"line":108},[105,130,132],{"class":131},"s7zQu","export",[105,134,135],{"class":131}," default",[105,137,139],{"class":138},"s2Zo4"," defineNuxtConfig",[105,141,143],{"class":142},"sTEyZ","(",[105,145,147],{"class":146},"sMK4o","{\n",[105,149,151,155,158,161,164,166,168,171,174,176,178,181],{"class":107,"line":150},2,[105,152,154],{"class":153},"swJcz","  modules",[105,156,157],{"class":146},":",[105,159,160],{"class":142}," [",[105,162,163],{"class":146},"'",[105,165,52],{"class":115},[105,167,163],{"class":146},[105,169,170],{"class":146},",",[105,172,173],{"class":146}," '",[105,175,60],{"class":115},[105,177,163],{"class":146},[105,179,180],{"class":142},"]",[105,182,183],{"class":146},",\n",[105,185,187,190],{"class":107,"line":186},3,[105,188,189],{"class":146},"}",[105,191,192],{"class":142},")\n",[91,194,195],{},"A deck names its Storybook root in the frontmatter, and each embed names a story id:",[95,197,201],{"className":198,"code":199,"language":200,"meta":100,"style":100},"language-yaml shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","---\ntitle: A deck\nstorybook: https:\u002F\u002Fstorybook.example.com\n---\n","yaml",[102,202,203,208,218,228],{"__ignoreMap":100},[105,204,205],{"class":107,"line":108},[105,206,207],{"class":111},"---\n",[105,209,210,213,215],{"class":107,"line":150},[105,211,212],{"class":153},"title",[105,214,157],{"class":146},[105,216,217],{"class":115}," A deck\n",[105,219,220,223,225],{"class":107,"line":186},[105,221,222],{"class":153},"storybook",[105,224,157],{"class":146},[105,226,227],{"class":115}," https:\u002F\u002Fstorybook.example.com\n",[105,229,231],{"class":107,"line":230},4,[105,232,207],{"class":111},[234,235,237],"h2",{"id":236},"one-story-beside-the-text","One story beside the text",[91,239,240,241,244,245,248,249,252],{},"A ",[102,242,243],{},"story"," on the ",[102,246,247],{},":layout"," annotation resolves to ",[102,250,251],{},"\u003Cstorybook>\u002Fiframe.html?id=\u003Cstory>&viewMode=story"," and renders as an iframe:",[95,254,258],{"className":255,"code":256,"language":257,"meta":100,"style":100},"language-markdown shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","### My component, live\n\n:layout{name=\"media-right-wide\" story=\"home-scenario-a--page\" lightbox=\"true\"}\n\nWhat we are testing, next to the live story.\n","markdown",[102,259,260,268,274,279,283],{"__ignoreMap":100},[105,261,262,265],{"class":107,"line":108},[105,263,264],{"class":146},"### ",[105,266,267],{"class":111},"My component, live\n",[105,269,270],{"class":107,"line":150},[105,271,273],{"emptyLinePlaceholder":272},true,"\n",[105,275,276],{"class":107,"line":186},[105,277,278],{"class":142},":layout{name=\"media-right-wide\" story=\"home-scenario-a--page\" lightbox=\"true\"}\n",[105,280,281],{"class":107,"line":230},[105,282,273],{"emptyLinePlaceholder":272},[105,284,286],{"class":107,"line":285},5,[105,287,288],{"class":142},"What we are testing, next to the live story.\n",[91,290,291,292,295,296,299],{},"The value is the Storybook story id, ",[102,293,294],{},"\u003CcomponentId>--\u003CstoryName>",". ",[102,297,298],{},"lightbox=\"true\""," lets a click open the story full-screen.",[234,301,303],{"id":302},"several-screens-side-by-side","Several screens side by side",[95,305,307],{"className":255,"code":306,"language":257,"meta":100,"style":100},":::Screens{cols=\"3\" gap=\"1rem\"}\n::StoryFrame{story=\"home-scenario-a--page\" ratio=\"portrait\" label=\"A · Landing\" lightbox}\n::\n::StoryFrame{story=\"home-scenario-b--page\" ratio=\"portrait\" label=\"B · Routing\" lightbox}\n::\n:::\n",[102,308,309,314,319,324,329,333],{"__ignoreMap":100},[105,310,311],{"class":107,"line":108},[105,312,313],{"class":142},":::Screens{cols=\"3\" gap=\"1rem\"}\n",[105,315,316],{"class":107,"line":150},[105,317,318],{"class":142},"::StoryFrame{story=\"home-scenario-a--page\" ratio=\"portrait\" label=\"A · Landing\" lightbox}\n",[105,320,321],{"class":107,"line":186},[105,322,323],{"class":142},"::\n",[105,325,326],{"class":107,"line":230},[105,327,328],{"class":142},"::StoryFrame{story=\"home-scenario-b--page\" ratio=\"portrait\" label=\"B · Routing\" lightbox}\n",[105,330,331],{"class":107,"line":285},[105,332,323],{"class":142},[105,334,336],{"class":107,"line":335},6,[105,337,338],{"class":142},":::\n",[91,340,341,344,345,348,349,352,353,356,357,360,361,364,365,364,368,371],{},[102,342,343],{},"Screens"," takes ",[102,346,347],{},"cols"," for a fixed column count, or lays an even auto-fit row when it is omitted, plus ",[102,350,351],{},"gap"," (default ",[102,354,355],{},"1.5rem",") and ",[102,358,359],{},"align"," (",[102,362,363],{},"start"," | ",[102,366,367],{},"center",[102,369,370],{},"stretch",").",[91,373,374,344,377,379,380,383],{},[102,375,376],{},"StoryFrame",[102,378,243],{},", or ",[102,381,382],{},"src"," for an explicit URL, and:",[385,386,387,400],"table",{},[388,389,390],"thead",{},[391,392,393,397],"tr",{},[394,395,396],"th",{},"prop",[394,398,399],{},"meaning",[401,402,403,421,462,478,492,502,512,522],"tbody",{},[391,404,405,411],{},[406,407,408],"td",{},[102,409,410],{},"type",[406,412,413,416,417,420],{},[102,414,415],{},"iframe"," or ",[102,418,419],{},"image","; without it, a story or a URL is a page, and a URL ending with an image extension an image",[391,422,423,428],{},[406,424,425],{},[102,426,427],{},"ratio",[406,429,430,431,434,435,438,439,442,443,446,447,450,451,454,455,458,459],{},"named (",[102,432,433],{},"desktop"," 16\u002F10, ",[102,436,437],{},"wide"," 16\u002F9, ",[102,440,441],{},"classic"," 4\u002F3, ",[102,444,445],{},"photo"," 3\u002F2, ",[102,448,449],{},"square",", ",[102,452,453],{},"mobile"," 9\u002F16, ",[102,456,457],{},"portrait"," 3\u002F4) or raw, ",[102,460,461],{},"16\u002F9",[391,463,464,469],{},[406,465,466],{},[102,467,468],{},"fit",[406,470,471,474,475],{},[102,472,473],{},"cover",", the default, or ",[102,476,477],{},"contain",[391,479,480,485],{},[406,481,482],{},[102,483,484],{},"previewWidth",[406,486,487,488,491],{},"logical iframe width before scaling, ",[102,489,490],{},"1440"," by default; raise it to show more of the page",[391,493,494,499],{},[406,495,496],{},[102,497,498],{},"raw",[406,500,501],{},"render at native size, without scaling",[391,503,504,509],{},[406,505,506],{},[102,507,508],{},"label",[406,510,511],{},"caption under the frame, or use the default slot",[391,513,514,519],{},[406,515,516],{},[102,517,518],{},"lightbox",[406,520,521],{},"click to open the screen full-screen",[391,523,524,528],{},[406,525,526],{},[102,527,212],{},[406,529,530],{},"accessible iframe title, or image alt",[91,532,533,534,536,537,539],{},"An iframe renders at its logical width and is scaled down to fit, so the whole page is visible rather than its top-left corner. ",[102,535,376],{}," also works on its own in a slide body, without ",[102,538,343],{},".",[234,541,543],{"id":542},"frozen-decks","Frozen decks",[91,545,546,549],{},[102,547,548],{},"@vignettes\u002Ffreeze"," copies a built Storybook into the bundle and rewrites the embeds to point at that copy, so a frozen deck keeps rendering its stories without the design system's server.",[551,552,553],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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);}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}",{"title":100,"searchDepth":150,"depth":150,"links":555},[556,557,558],{"id":236,"depth":150,"text":237},{"id":302,"depth":150,"text":303},{"id":542,"depth":150,"text":543},"md",{},{"title":60,"description":93},"KyM0QI3aFprHMsdhDuKPyTICqDMDeYzrGSewSy6DFJ0",[564,566],{"title":56,"path":57,"stem":58,"description":565,"children":-1},"Deck components that explain a system on a slide: pictogram steps linked by arrows, diagrams whose cards sit on a grid or are ranked automatically, and a file read beside the description of what it holds.",{"title":70,"path":71,"stem":72,"description":567,"children":-1},"Ce que chaque rôle permet de faire dans le studio.",1792517110511]