[{"data":1,"prerenderedAt":662},["ShallowReactive",2],{"navigation_docs":3,"-ecrire-reference-schemas":81,"-ecrire-reference-schemas-surround":657},[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":56,"body":83,"description":93,"extension":289,"meta":654,"navigation":612,"path":57,"seo":655,"stem":58,"__hash__":656},"docs\u002Fecrire\u002Freference\u002Fschemas\u002FREADME.md",{"type":84,"value":85,"toc":649},"minimark",[86,90,94,120,193,200,207,212,257,309,330,334,404,445,508,535,542,566,570,634,637,645],[87,88,56],"h1",{"id":89},"vignettesschemas",[91,92,93],"p",{},"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.",[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\u002Fschemas\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\u002Fschemas\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\u002Fschemas'],\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,56],{"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,196,199],{},"The module registers its components globally and declares them to the deck contract, so ",[102,197,198],{},"::Scheme"," and the others resolve in a deck body and the parser knows their shape.",[91,201,202,203,206],{},"Pictograms come from ",[102,204,205],{},"\u002Fpictograms\u002F\u003Cfolder>\u002F\u003Cname>.svg",", served by the application from its public directory or its content space.",[208,209,211],"h2",{"id":210},"scheme-pictogram-steps-that-build-up-as-you-speak","Scheme: pictogram steps that build up as you speak",[95,213,217],{"className":214,"code":215,"language":216,"meta":100,"style":100},"language-markdown shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",":::Scheme\n::Step{n=\"1\" picto=\"buildings\u002Fcity-hall\" title=\"A rule\"}\nWritten by an administration.\n::\n::Step{n=\"2\" picto=\"digital\u002Fcoding\" title=\"Some code\"}\n::\n:::\n","markdown",[102,218,219,224,229,234,240,246,251],{"__ignoreMap":100},[105,220,221],{"class":107,"line":108},[105,222,223],{"class":142},":::Scheme\n",[105,225,226],{"class":107,"line":150},[105,227,228],{"class":142},"::Step{n=\"1\" picto=\"buildings\u002Fcity-hall\" title=\"A rule\"}\n",[105,230,231],{"class":107,"line":186},[105,232,233],{"class":142},"Written by an administration.\n",[105,235,237],{"class":107,"line":236},4,[105,238,239],{"class":142},"::\n",[105,241,243],{"class":107,"line":242},5,[105,244,245],{"class":142},"::Step{n=\"2\" picto=\"digital\u002Fcoding\" title=\"Some code\"}\n",[105,247,249],{"class":107,"line":248},6,[105,250,239],{"class":142},[105,252,254],{"class":107,"line":253},7,[105,255,256],{"class":142},":::\n",[91,258,259,262,263,266,267,270,271,274,275,278,279,282,283,286,287,286,290,293,294,282,297,300,301,304,305,308],{},[102,260,261],{},"Scheme"," lays its ",[102,264,265],{},"Step"," children in a row linked by arrows. Each step is a fragment by default, so the row builds up as the speaker talks; ",[102,268,269],{},":fragments=\"false\""," shows it whole. With ",[102,272,273],{},"dim"," (default ",[102,276,277],{},"true",") the steps already shown fade once a later one is current, and the current step takes an accent frame. ",[102,280,281],{},"size"," is ",[102,284,285],{},"sm"," | ",[102,288,289],{},"md",[102,291,292],{},"lg"," and sets the pictogram scale; ",[102,295,296],{},"tiles",[102,298,299],{},"column"," (default) or ",[102,302,303],{},"row"," to put the pictogram beside the text. ",[102,306,307],{},":arrows=\"false\""," gives a plain row of cards.",[91,310,311,313,314,317,318,321,322,325,326,329],{},[102,312,265],{}," takes ",[102,315,316],{},"picto",", ",[102,319,320],{},"title"," and ",[102,323,324],{},"n"," for its number badge, or ",[102,327,328],{},"icon"," for a Remix icon where a pictogram is too much. The default slot is the caption.",[208,331,333],{"id":332},"diagram-cards-placed-on-a-grid-or-ranked-linked-by-drawn-arrows","Diagram: cards placed on a grid or ranked, linked by drawn arrows",[95,335,337],{"className":214,"code":336,"language":216,"meta":100,"style":100},":::Diagram{layout=\"grid\" cols=\"3\"}\n::Node{id=\"src\" at=\"1,2\" picto=\"document\u002Fcontract\" title=\"Sources\"}\n::\n::Node{id=\"cat\" at=\"2,2\" picto=\"digital\u002Fdata-visualization\" title=\"Catalogue\"}\nOne entry per source\n::\n::Node{id=\"api\" at=\"3,1\" picto=\"digital\u002Fapplication\" title=\"API\" :planned=\"true\"}\n::\n::Edge{from=\"src\" to=\"cat\" label=\"feeds\"}\n::\n::Edge{from=\"cat\" to=\"api\" :dashed=\"true\"}\n::\n:::\n",[102,338,339,344,349,353,358,363,367,372,377,383,388,394,399],{"__ignoreMap":100},[105,340,341],{"class":107,"line":108},[105,342,343],{"class":142},":::Diagram{layout=\"grid\" cols=\"3\"}\n",[105,345,346],{"class":107,"line":150},[105,347,348],{"class":142},"::Node{id=\"src\" at=\"1,2\" picto=\"document\u002Fcontract\" title=\"Sources\"}\n",[105,350,351],{"class":107,"line":186},[105,352,239],{"class":142},[105,354,355],{"class":107,"line":236},[105,356,357],{"class":142},"::Node{id=\"cat\" at=\"2,2\" picto=\"digital\u002Fdata-visualization\" title=\"Catalogue\"}\n",[105,359,360],{"class":107,"line":242},[105,361,362],{"class":142},"One entry per source\n",[105,364,365],{"class":107,"line":248},[105,366,239],{"class":142},[105,368,369],{"class":107,"line":253},[105,370,371],{"class":142},"::Node{id=\"api\" at=\"3,1\" picto=\"digital\u002Fapplication\" title=\"API\" :planned=\"true\"}\n",[105,373,375],{"class":107,"line":374},8,[105,376,239],{"class":142},[105,378,380],{"class":107,"line":379},9,[105,381,382],{"class":142},"::Edge{from=\"src\" to=\"cat\" label=\"feeds\"}\n",[105,384,386],{"class":107,"line":385},10,[105,387,239],{"class":142},[105,389,391],{"class":107,"line":390},11,[105,392,393],{"class":142},"::Edge{from=\"cat\" to=\"api\" :dashed=\"true\"}\n",[105,395,397],{"class":107,"line":396},12,[105,398,239],{"class":142},[105,400,402],{"class":107,"line":401},13,[105,403,256],{"class":142},[91,405,406,409,410,413,414,417,418,421,422,425,426,429,430,433,434,437,438,321,441,444],{},[102,407,408],{},"layout=\"grid\""," places each ",[102,411,412],{},"Node"," at ",[102,415,416],{},"at=\"col,row\"",", spanning ",[102,419,420],{},"span=\"cols,rows\"",". ",[102,423,424],{},"layout=\"auto\""," ignores ",[102,427,428],{},"at"," and lets dagre rank the nodes, with ",[102,431,432],{},"direction"," as ",[102,435,436],{},"LR"," or ",[102,439,440],{},"TB",[102,442,443],{},"nodeWidth"," in pixels.",[91,446,447,313,450,453,454,457,458,461,462,465,466,469,470,461,473,465,476,479,480,461,482,437,484,486,487,317,489,321,491,494,495,421,497,500,501,504,505,507],{},[102,448,449],{},"Diagram",[102,451,452],{},"gap"," (a ",[102,455,456],{},"\"row col\""," pair of CSS lengths), ",[102,459,460],{},"route"," (",[102,463,464],{},"curve",", the default, or ",[102,467,468],{},"orthogonal"," elbows), ",[102,471,472],{},"cards",[102,474,475],{},"outlined",[102,477,478],{},"plain","), ",[102,481,296],{},[102,483,299],{},[102,485,303],{},"), plus ",[102,488,281],{},[102,490,273],{},[102,492,493],{},"fragments"," as on ",[102,496,261],{},[102,498,499],{},"size=\"xs\""," suits a stack of cards that has to leave room for the arrows and their labels; a node takes ",[102,502,503],{},"orientation"," to override the diagram's ",[102,506,296],{},".",[91,509,510,513,514,317,517,317,520,522,523,526,527,530,531,534],{},[102,511,512],{},"Edge"," draws an arrow between two node ids, with ",[102,515,516],{},"label",[102,518,519],{},"dashed",[102,521,460],{}," per edge, and ",[102,524,525],{},"anchors=\"right,top\""," to force the sides it leaves and enters by, which geometry decides otherwise. ",[102,528,529],{},"planned"," gives a node a dashed frame. ",[102,532,533],{},"variant=\"entity\""," turns a node into a left-aligned box whose caption lists attributes, one per list item, for data-model diagrams.",[91,536,537,538,541],{},"Nodes and edges are fragments in writing order, each edge appearing with the later of its nodes; ",[102,539,540],{},"step=\"2\""," on a node or an edge moves it in that order.",[91,543,544,547,548,321,550,552,553,555,556,433,558,561,562,565],{},[102,545,546],{},"Area"," draws a named region behind the cards, so an arrow leaving it reads as data going from one machine to another. It takes ",[102,549,428],{},[102,551,105],{}," like a node, a ",[102,554,316],{},", and ",[102,557,516],{},[102,559,560],{},"legend"," (the title on the top border) or ",[102,563,564],{},"header"," (a centred band above the cards). Regions are not fragments.",[208,567,569],{"id":568},"jsontour-a-file-read-beside-the-description-of-what-it-holds","JsonTour: a file read beside the description of what it holds",[95,571,573],{"className":214,"code":572,"language":216,"meta":100,"style":100},":::JsonTour{file=\"deck.json\" size=\"xs\" height=\"430px\" panel=\"46%\"}\n::Zone{lines=\"2-8\" picto=\"document\u002Fdocument\" title=\"Identity\"}\nA name, an owner, a version.\n::\n::Zone{lines=\"9-12\" picto=\"digital\u002Fcoding\" title=\"Content\"}\nThe slides the deck holds.\n::\n\n```json\n{ … }\n",[102,574,575,580,585,590,594,599,604,608,614,623],{"__ignoreMap":100},[105,576,577],{"class":107,"line":108},[105,578,579],{"class":142},":::JsonTour{file=\"deck.json\" size=\"xs\" height=\"430px\" panel=\"46%\"}\n",[105,581,582],{"class":107,"line":150},[105,583,584],{"class":142},"::Zone{lines=\"2-8\" picto=\"document\u002Fdocument\" title=\"Identity\"}\n",[105,586,587],{"class":107,"line":186},[105,588,589],{"class":142},"A name, an owner, a version.\n",[105,591,592],{"class":107,"line":236},[105,593,239],{"class":142},[105,595,596],{"class":107,"line":242},[105,597,598],{"class":142},"::Zone{lines=\"9-12\" picto=\"digital\u002Fcoding\" title=\"Content\"}\n",[105,600,601],{"class":107,"line":248},[105,602,603],{"class":142},"The slides the deck holds.\n",[105,605,606],{"class":107,"line":253},[105,607,239],{"class":142},[105,609,610],{"class":107,"line":374},[105,611,613],{"emptyLinePlaceholder":612},true,"\n",[105,615,616,619],{"class":107,"line":379},[105,617,618],{"class":115},"```",[105,620,622],{"class":621},"sJsPd","json\n",[105,624,625,628,631],{"class":107,"line":385},[105,626,627],{"class":146},"{",[105,629,630],{"class":142}," … ",[105,632,633],{"class":146},"}\n",[91,635,636],{},":::",[95,638,643],{"className":639,"code":641,"language":642},[640],"language-text","\nThe fenced code block of the default slot becomes a panel pinned to the right of the slide. Each `Zone` is a fragment that highlights the `lines` it names and scrolls the panel to them. `lines` takes `12` or `12-24`, counted from the first line of the fence.\n\n`JsonTour` takes `file` (the name shown above the panel), `height` (the panel height in slide pixels, the deck being 1280x720), `panel` (its width), `size` (`xs` | `sm` | `md`, the scale of the zone cards) and `fragments`. `Zone` takes `lines`, `picto`, `title`, `n`, and `step` to override the writing order.\n\n`mark` and `underline` name words of the file, separated by `|`, to paint or to underline wherever they occur whole. On a `Zone`, the same two props search the zone's lines only, and the words show their mark while the zone is current. A deck that spreads a tour over several slides, one zone per slide, sets `:fragments=\"false\"` and `:current=\"true\"` on the zone of each slide, which takes the accent frame of the current step.\n\n`:stack=\"true\"` puts the panel under the zones at full width, for a narrow column beside a media pane. `image` with `alt` shows a screenshot to the right of the tour, and each `Zone` then names with `spot=\"x,y,w,h\"`, in percent of the image, the area it frames while the rest dims.\n\n## Colours\n\nThe cards take their tints from the DSFR illustrative palette, by name: `palette=\"blue-france\"`, `green-emeraude`, `orange-terre-battue` and the rest of the DSFR set.\n","text",[102,644,641],{"__ignoreMap":100},[646,647,648],"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}html pre.shiki code .sJsPd, html code.shiki .sJsPd{--shiki-light:#90A4AE90;--shiki-default:#EEFFFF90;--shiki-dark:#BABED890}",{"title":100,"searchDepth":150,"depth":150,"links":650},[651,652,653],{"id":210,"depth":150,"text":211},{"id":332,"depth":150,"text":333},{"id":568,"depth":150,"text":569},{},{"title":56,"description":93},"6AWcpO7yKBalb3UUKUszD0qjQBF2-6uSP-DeqREdpS4",[658,660],{"title":52,"path":53,"stem":54,"description":659,"children":-1},"Renders a deck in a Nuxt application: the Reveal layer, the authoring components, the two slide parsers, the theme pipeline and the French orthotypography directive.",{"title":60,"path":61,"stem":62,"description":661,"children":-1},"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.",1792517110460]