[{"data":1,"prerenderedAt":1545},["ShallowReactive",2],{"$f2uoduqmx4f39t":3},{"slug":4,"title":5,"description":6,"tags":7,"tree":8},"site-design-system","Site Design System","Small design system built with Nuxt and Comark",[],{"frontmatter":9,"meta":10,"nodes":11},{"title":5,"description":6},{},[12,15,19,24,31,37,44,48,76,79,127,131,134,140,467,471,478,485,537,541,556,832,836,843,1072,1076,1083,1086,1310,1317,1324,1329,1344,1360,1364,1367,1371,1375,1382,1386,1390,1401,1414,1418,1438,1487,1491,1500,1507,1511,1521,1540],[13,14,5],"h1",{"id":4},[16,17,18],"p",{},"A small set of components for writing about code or documentation, built with Vue and Comark.",[20,21,23],"h2",{"id":22},"inline-code","Inline Code",[16,25,26,27],{},"This is some inline code ",[28,29,30],"code",{},"const x = 1",[16,32,33,34,36],{},"Inline code is a prose override of the native ",[28,35,28],{}," element, so ordinary backticks in markdown render through it with no component syntax.",[16,38,39,40,43],{},"It works anywhere inline markdown does, including headings, code block captions, file tree captions, and the ",[28,41,42],{},"JsonFlow"," prefix and suffix around an embedded JSON view. Long tokens break at word boundaries rather than overflowing the line.",[20,45,47],{"id":46},"file-tree","File Tree",[16,49,50,51,54,55,58,59,62,63,66,67,58,70,62,72,75],{},"Three components make up a tree. ",[28,52,53],{},"Tree"," is the card and optional caption. ",[28,56,57],{},"Folder"," takes a ",[28,60,61],{},"name"," and an optional ",[28,64,65],{},"defaultOpen"," flag, and clicking its row toggles the children. ",[28,68,69],{},"File",[28,71,61],{},[28,73,74],{},"href",", and external links open in a new tab.",[16,77,78],{},"Each component reads its depth from its parent, and the vertical guide lines are drawn per level from that depth rather than from any markup the author writes.",[80,81,82,91],"tree",{},[83,84,86,87,90],"template",{"name":85},"caption","Supports inline code ",[28,88,89],{},"const x = 'foo'"," in captions",[83,92,94,116],{"name":93},"default",[95,96,99],"folder",{"name":97,":defaultOpen":98},".vercel","true",[95,100,102],{"name":101,":defaultOpen":98},"output",[95,103,105],{"name":104,":defaultOpen":98},"functions",[95,106,108,113],{"name":107,":defaultOpen":98},"edge.func",[109,110],"file",{"name":111,"href":112},".vc-config.json","\u002F",[109,114],{"name":115},"index.js",[95,117,119,122,125],{"name":118},"app",[109,120],{"name":121},"main.tsx",[109,123],{"name":124},"dashboard.tsx",[109,126],{"name":124},[20,128,130],{"id":129},"code-block","Code Block",[16,132,133],{},"Code is highlighted with Shiki when the post is parsed on the server, so no highlighter ships to the browser. The theme is a custom monochrome theme using Tailwind css variables.",[16,135,136,137,139],{},"Using the ",[28,138,85],{}," slot turns the block into a figure.",[129,141,142,464],{},[143,144,147],"pre",{"language":145,"class":146},"vue-html","shiki shiki-themes geist-light geist-dark dark:geist-dark",[28,148,150,174,175,174,216,174,249,174,282,174,288,174,326,174,379,174,388,174,426,174,439,174,452],{"class":149},"language-vue-html",[151,152,156,163,167,171],"span",{"class":153,"id":154,"style":155},"line","Cf56c2379-L1","display: inline",[157,158,162],"button",{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},"-1","Add line anchor to the URL","line-number","1",[151,164,166],{"style":165},"color:var(--color-neutral-600);--shiki-dark:var(--color-neutral-400)","\u003C",[151,168,170],{"style":169},"color:var(--color-neutral-500);--shiki-dark:var(--color-neutral-500)","div",[151,172,173],{"style":165},">","\n",[151,176,178,181,184,186,190,193,196,199,202,204,206,209,212,214],{"class":153,"id":177,"style":155},"Cf56c2379-L2",[157,179,180],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},"2",[151,182,183],{"style":165},"  \u003C",[151,185,157],{"style":169},[151,187,189],{"style":188},"color:var(--color-neutral-950);--shiki-dark:#FFF"," @",[151,191,192],{"style":165},"click",[151,194,195],{"style":188},"=",[151,197,198],{"style":188},"\"",[151,200,201],{"style":188},"insert",[151,203,198],{"style":188},[151,205,173],{"style":165},[151,207,208],{"style":188},"insert at random index",[151,210,211],{"style":165},"\u003C\u002F",[151,213,157],{"style":169},[151,215,173],{"style":165},[151,217,219,222,224,226,228,230,232,234,237,239,241,243,245,247],{"class":153,"id":218,"style":155},"Cf56c2379-L3",[157,220,221],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},"3",[151,223,183],{"style":165},[151,225,157],{"style":169},[151,227,189],{"style":188},[151,229,192],{"style":165},[151,231,195],{"style":188},[151,233,198],{"style":188},[151,235,236],{"style":188},"reset",[151,238,198],{"style":188},[151,240,173],{"style":165},[151,242,236],{"style":188},[151,244,211],{"style":165},[151,246,157],{"style":169},[151,248,173],{"style":165},[151,250,252,255,257,259,261,263,265,267,270,272,274,276,278,280],{"class":153,"id":251,"style":155},"Cf56c2379-L4",[157,253,254],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},"4",[151,256,183],{"style":165},[151,258,157],{"style":169},[151,260,189],{"style":188},[151,262,192],{"style":165},[151,264,195],{"style":188},[151,266,198],{"style":188},[151,268,269],{"style":188},"shuffle",[151,271,198],{"style":188},[151,273,173],{"style":165},[151,275,269],{"style":188},[151,277,211],{"style":165},[151,279,157],{"style":169},[151,281,173],{"style":165},[151,283,285],{"class":153,"id":284,"style":155},"Cf56c2379-L5",[157,286,287],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},"5",[151,289,291,294,296,299,302,304,308,311,313,316,319,321,324],{"class":153,"id":290,"style":155},"Cf56c2379-L6",[157,292,293],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},"6",[151,295,183],{"style":165},[151,297,298],{"style":169},"TransitionGroup",[151,300,301],{"style":165}," tag",[151,303,195],{"style":188},[151,305,307],{"style":306},"color:var(--color-neutral-700);--shiki-dark:var(--color-neutral-300)","\"ul\"",[151,309,310],{"style":165}," name",[151,312,195],{"style":188},[151,314,315],{"style":306},"\"fade\"",[151,317,318],{"style":165}," class",[151,320,195],{"style":188},[151,322,323],{"style":306},"\"container\"",[151,325,173],{"style":165},[151,327,329,332,335,337,340,342,344,347,350,353,355,357,359,362,365,368,370,372,375,377],{"class":153,"id":328,"style":155},"Cf56c2379-L7",[157,330,331],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},"7",[151,333,334],{"style":165},"    \u003C",[151,336,170],{"style":169},[151,338,339],{"style":165}," v-for",[151,341,195],{"style":188},[151,343,198],{"style":188},[151,345,346],{"style":188},"item ",[151,348,349],{"style":165},"in",[151,351,352],{"style":188}," items",[151,354,198],{"style":188},[151,356,318],{"style":165},[151,358,195],{"style":188},[151,360,361],{"style":306},"\"item\"",[151,363,364],{"style":188}," :",[151,366,367],{"style":165},"key",[151,369,195],{"style":188},[151,371,198],{"style":188},[151,373,374],{"style":188},"item",[151,376,198],{"style":188},[151,378,173],{"style":165},[151,380,382,385],{"class":153,"id":381,"style":155},"Cf56c2379-L8",[157,383,384],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},"8",[151,386,387],{"style":188},"      {{ item }}",[151,389,391,394,397,399,401,403,405,407,410,413,415,417,420,422,424],{"class":153,"id":390,"style":155},"Cf56c2379-L9",[157,392,393],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},"9",[151,395,396],{"style":165},"      \u003C",[151,398,157],{"style":169},[151,400,189],{"style":188},[151,402,192],{"style":165},[151,404,195],{"style":188},[151,406,198],{"style":188},[151,408,409],{"style":169},"remove",[151,411,412],{"style":188},"(item)",[151,414,198],{"style":188},[151,416,173],{"style":165},[151,418,419],{"style":188},"x",[151,421,211],{"style":165},[151,423,157],{"style":169},[151,425,173],{"style":165},[151,427,429,432,435,437],{"class":153,"id":428,"style":155},"Cf56c2379-L10",[157,430,431],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},"10",[151,433,434],{"style":165},"    \u003C\u002F",[151,436,170],{"style":169},[151,438,173],{"style":165},[151,440,442,445,448,450],{"class":153,"id":441,"style":155},"Cf56c2379-L11",[157,443,444],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},"11",[151,446,447],{"style":165},"  \u003C\u002F",[151,449,298],{"style":169},[151,451,173],{"style":165},[151,453,455,458,460,462],{"class":153,"id":454,"style":155},"Cf56c2379-L12",[157,456,457],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},"12",[151,459,211],{"style":165},[151,461,170],{"style":169},[151,463,173],{"style":165},[83,465,466],{"name":85},"Default code block with clickable line numbers for sharing like GitHub",[20,468,470],{"id":469},"code-block-with-tabs","Code Block with Tabs",[16,472,473,474,477],{},"Every fenced block inside a ",[28,475,476],{},"CodeBlock"," becomes a tab, so there is no separate list of languages to keep in sync with the code.",[16,479,480,481,484],{},"The header only appears once at least one block carries a filename in square brackets after the language, i.e. ",[28,482,483],{},"```js [app.js]",". A single named block shows the filename as a label, and two or more show a tab strip.",[129,486,487,516],{},[143,488,491],{"language":489,"filename":490,"class":146},"ts","app.ts",[28,492,494],{"class":493},"language-ts",[151,495,497,499,502,504,507,510,513],{"class":153,"id":496,"style":155},"C695a2f76-L1",[157,498,162],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,500,501],{"style":165},"const",[151,503,310],{"style":188},[151,505,506],{"style":165},":",[151,508,509],{"style":169}," string",[151,511,512],{"style":165}," =",[151,514,515],{"style":306}," 'david'",[143,517,520],{"language":518,"filename":519,"class":146},"js","app.js",[28,521,523],{"class":522},"language-js",[151,524,526,528,530,533,535],{"class":153,"id":525,"style":155},"C2f3eea52-L1",[157,527,162],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,529,501],{"style":165},[151,531,532],{"style":188}," name ",[151,534,195],{"style":165},[151,536,515],{"style":306},[20,538,540],{"id":539},"git-diffs","Git Diffs",[16,542,543,544,547,548,551,552,555],{},"Diff markup uses Shiki's notation transformer. A trailing ",[28,545,546],{},"[!code --]"," or ",[28,549,550],{},"[!code ++]"," comment marks a line as removed or added, and the comment itself is stripped from the output.  The ",[28,553,554],{},"hide-line-numbers"," prop suppresses the line numbers.",[129,557,558],{":hide-line-numbers":98},[143,559,561],{"language":489,"class":560},"shiki shiki-themes geist-light geist-dark has-diff dark:geist-dark",[28,562,563,174,583,174,588,174,603,174,611,174,640,174,661,174,680,174,695,174,709,174,728,174,736,174,744,174,764,174,782,174,790,174,805,174,814,174,823],{"class":493},[151,564,566,568,571,574,577,580],{"class":153,"id":565,"style":155},"C687942e8-L1",[157,567,162],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,569,570],{"style":165},"import",[151,572,573],{"style":188}," { getHostFunctionContext } ",[151,575,576],{"style":165},"from",[151,578,579],{"style":306}," 'run'",[151,581,582],{"style":188},";",[151,584,586],{"class":153,"id":585,"style":155},"C687942e8-L2",[157,587,180],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,589,591,593,595,598,600],{"class":153,"id":590,"style":155},"C687942e8-L3",[157,592,221],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,594,501],{"style":165},[151,596,597],{"style":188}," hostFunctions ",[151,599,195],{"style":165},[151,601,602],{"style":188}," {",[151,604,606,608],{"class":153,"id":605,"style":155},"C687942e8-L4",[157,607,254],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,609,610],{"style":188},"  documents: {",[151,612,614,616,619,622,625,628,630,632,635,638],{"class":153,"id":613,"style":155},"C687942e8-L5",[157,615,287],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,617,618],{"style":169},"    publish",[151,620,621],{"style":188},": ",[151,623,624],{"style":165},"async",[151,626,627],{"style":188}," (draftId",[151,629,506],{"style":165},[151,631,509],{"style":169},[151,633,634],{"style":188},") ",[151,636,637],{"style":165},"=>",[151,639,602],{"style":188},[151,641,645,647,650,653,655,658],{"class":642,"id":644,"style":155},[153,643,409],"diff","C687942e8-L6",[157,646,293],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,648,649],{"style":165},"      const",[151,651,652],{"style":188}," context ",[151,654,195],{"style":165},[151,656,657],{"style":169}," getHostFunctionContext",[151,659,660],{"style":188},"(); ",[151,662,666,668,671,674,677],{"class":663,"id":665,"style":155},[153,643,664],"add","C687942e8-L7",[157,667,331],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,669,670],{"style":165},"      if",[151,672,673],{"style":188}," (context.resume ",[151,675,676],{"style":165},"===",[151,678,679],{"style":188}," undefined) { ",[151,681,684,686,689,692],{"class":682,"id":683,"style":155},[153,643,664],"C687942e8-L8",[157,685,384],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,687,688],{"style":188},"        context.",[151,690,691],{"style":169},"interrupt",[151,693,694],{"style":188},"({ ",[151,696,698,700,703,706],{"class":153,"id":697,"style":155},"C687942e8-L9",[157,699,393],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,701,702],{"style":188},"          kind: ",[151,704,705],{"style":306},"'approval'",[151,707,708],{"style":188},",",[151,710,712,714,717,720,723,726],{"class":153,"id":711,"style":155},"C687942e8-L10",[157,713,431],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,715,716],{"style":188},"          message: ",[151,718,719],{"style":306},"`Publish ${",[151,721,722],{"style":188},"draftId",[151,724,725],{"style":306},"}?`",[151,727,708],{"style":188},[151,729,731,733],{"class":153,"id":730,"style":155},"C687942e8-L11",[157,732,444],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,734,735],{"style":188},"        });",[151,737,739,741],{"class":153,"id":738,"style":155},"C687942e8-L12",[157,740,457],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,742,743],{"style":188},"      }",[151,745,747,750,752,755,758,761],{"class":153,"id":746,"style":155},"C687942e8-L13",[157,748,749],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},"13",[151,751,670],{"style":165},[151,753,754],{"style":188}," (context.resume.resolution ",[151,756,757],{"style":165},"!==",[151,759,760],{"style":169}," true",[151,762,763],{"style":188},") {",[151,765,767,770,773,776,779],{"class":153,"id":766,"style":155},"C687942e8-L14",[157,768,769],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},"14",[151,771,772],{"style":165},"        return",[151,774,775],{"style":188}," { published: ",[151,777,778],{"style":169},"false",[151,780,781],{"style":188}," };",[151,783,785,788],{"class":153,"id":784,"style":155},"C687942e8-L15",[157,786,787],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},"15",[151,789,743],{"style":188},[151,791,793,796,799,802],{"class":153,"id":792,"style":155},"C687942e8-L16",[157,794,795],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},"16",[151,797,798],{"style":165},"      return",[151,800,801],{"style":169}," publishDraft",[151,803,804],{"style":188},"(draftId);",[151,806,808,811],{"class":153,"id":807,"style":155},"C687942e8-L17",[157,809,810],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},"17",[151,812,813],{"style":188},"    },",[151,815,817,820],{"class":153,"id":816,"style":155},"C687942e8-L18",[157,818,819],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},"18",[151,821,822],{"style":188},"  },",[151,824,826,829],{"class":153,"id":825,"style":155},"C687942e8-L19",[157,827,828],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},"19",[151,830,831],{"style":188},"};",[20,833,835],{"id":834},"highlighted-code-block","Highlighted Code Block",[16,837,838,839,842],{},"Line ranges in braces after the language, such as ",[28,840,841],{},"{7-12, 16}",", mark those lines as highlighted. Single lines and ranges can be mixed, in any order, and the filename can come before or after them.",[129,844,845],{":hide-line-numbers":98},[143,846,856],{"language":489,"filename":847,"highlights":848,"class":146},"nuxt.config.ts",[849,850,851,852,853,854,855],7,8,9,10,11,12,16,[28,857,858,174,873,174,878,174,891,174,898,174,921,174,937,174,953,174,965,174,976,174,991,174,998,174,1005,174,1020,174,1033,174,1040,174,1051,174,1058,174,1065],{"class":493},[151,859,861,863,865,867,869,871],{"class":153,"id":860,"style":155},"Ce86410de-L1",[157,862,162],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,864,570],{"style":165},[151,866,573],{"style":188},[151,868,576],{"style":165},[151,870,579],{"style":306},[151,872,582],{"style":188},[151,874,876],{"class":153,"id":875,"style":155},"Ce86410de-L2",[157,877,180],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,879,881,883,885,887,889],{"class":153,"id":880,"style":155},"Ce86410de-L3",[157,882,221],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,884,501],{"style":165},[151,886,597],{"style":188},[151,888,195],{"style":165},[151,890,602],{"style":188},[151,892,894,896],{"class":153,"id":893,"style":155},"Ce86410de-L4",[157,895,254],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,897,610],{"style":188},[151,899,901,903,905,907,909,911,913,915,917,919],{"class":153,"id":900,"style":155},"Ce86410de-L5",[157,902,287],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,904,618],{"style":169},[151,906,621],{"style":188},[151,908,624],{"style":165},[151,910,627],{"style":188},[151,912,506],{"style":165},[151,914,509],{"style":169},[151,916,634],{"style":188},[151,918,637],{"style":165},[151,920,602],{"style":188},[151,922,924,926,928,930,932,934],{"class":153,"id":923,"style":155},"Ce86410de-L6",[157,925,293],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,927,649],{"style":165},[151,929,652],{"style":188},[151,931,195],{"style":165},[151,933,657],{"style":169},[151,935,936],{"style":188},"();",[151,938,942,944,946,948,950],{"class":939,"id":940,"style":941},"line highlight","Ce86410de-L7","display: inline-block",[157,943,331],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,945,670],{"style":165},[151,947,673],{"style":188},[151,949,676],{"style":165},[151,951,952],{"style":188}," undefined) {",[151,954,956,958,960,962],{"class":939,"id":955,"style":941},"Ce86410de-L8",[157,957,384],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,959,688],{"style":188},[151,961,691],{"style":169},[151,963,964],{"style":188},"({",[151,966,968,970,972,974],{"class":939,"id":967,"style":941},"Ce86410de-L9",[157,969,393],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,971,702],{"style":188},[151,973,705],{"style":306},[151,975,708],{"style":188},[151,977,979,981,983,985,987,989],{"class":939,"id":978,"style":941},"Ce86410de-L10",[157,980,431],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,982,716],{"style":188},[151,984,719],{"style":306},[151,986,722],{"style":188},[151,988,725],{"style":306},[151,990,708],{"style":188},[151,992,994,996],{"class":939,"id":993,"style":941},"Ce86410de-L11",[157,995,444],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,997,735],{"style":188},[151,999,1001,1003],{"class":939,"id":1000,"style":941},"Ce86410de-L12",[157,1002,457],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,1004,743],{"style":188},[151,1006,1008,1010,1012,1014,1016,1018],{"class":153,"id":1007,"style":155},"Ce86410de-L13",[157,1009,749],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,1011,670],{"style":165},[151,1013,754],{"style":188},[151,1015,757],{"style":165},[151,1017,760],{"style":169},[151,1019,763],{"style":188},[151,1021,1023,1025,1027,1029,1031],{"class":153,"id":1022,"style":155},"Ce86410de-L14",[157,1024,769],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,1026,772],{"style":165},[151,1028,775],{"style":188},[151,1030,778],{"style":169},[151,1032,781],{"style":188},[151,1034,1036,1038],{"class":153,"id":1035,"style":155},"Ce86410de-L15",[157,1037,787],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,1039,743],{"style":188},[151,1041,1043,1045,1047,1049],{"class":939,"id":1042,"style":941},"Ce86410de-L16",[157,1044,795],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,1046,798],{"style":165},[151,1048,801],{"style":169},[151,1050,804],{"style":188},[151,1052,1054,1056],{"class":153,"id":1053,"style":155},"Ce86410de-L17",[157,1055,810],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,1057,813],{"style":188},[151,1059,1061,1063],{"class":153,"id":1060,"style":155},"Ce86410de-L18",[157,1062,819],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,1064,822],{"style":188},[151,1066,1068,1070],{"class":153,"id":1067,"style":155},"Ce86410de-L19",[157,1069,828],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,1071,831],{"style":188},[20,1073,1075],{"id":1074},"with-clickable-line-numbers","With clickable line numbers",[16,1077,1078,1079,1082],{},"Line numbers are buttons, added by a Shiki transformer at parse time. Clicking one writes the line's ",[28,1080,1081],{},"id"," into the URL hash and marks the line in amber, the same way GitHub anchors a line.",[16,1084,1085],{},"Loading a URL with such a hash scrolls the line into view and marks it, and browser back and forward restore it. Ids are derived from a hash of the block's content, so they stay stable across builds and are unique across every block on the page. Here the line numbers are combined with a highlighted range.",[129,1087,1088,1299],{},[143,1089,1094],{"language":489,"highlights":1090,"class":146},[1091,1092,1093,849],2,5,6,[28,1095,1096,174,1113,174,1130,174,1138,174,1165,174,1186,174,1209,174,1227,174,1234,174,1248,174,1270,174,1291],{"class":493},[151,1097,1099,1101,1103,1106,1108,1111],{"class":153,"id":1098,"style":155},"Cc5da40f6-L1",[157,1100,162],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,1102,570],{"style":165},[151,1104,1105],{"style":188}," { effect, frame, init, surface } ",[151,1107,576],{"style":165},[151,1109,1110],{"style":306}," \"vgpu\"",[151,1112,582],{"style":188},[151,1114,1116,1118,1120,1123,1125,1128],{"class":939,"id":1115,"style":941},"Cc5da40f6-L2",[157,1117,180],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,1119,570],{"style":165},[151,1121,1122],{"style":188}," shaderSource ",[151,1124,576],{"style":165},[151,1126,1127],{"style":306}," \".\u002Fmain.wgsl\"",[151,1129,582],{"style":188},[151,1131,1133,1135],{"class":153,"id":1132,"style":155},"Cc5da40f6-L3",[157,1134,221],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,1136,1137],{"style":188}," ",[151,1139,1141,1143,1146,1149,1152,1155,1158,1160,1163],{"class":153,"id":1140,"style":155},"Cc5da40f6-L4",[157,1142,254],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,1144,1145],{"style":165},"export",[151,1147,1148],{"style":165}," async",[151,1150,1151],{"style":165}," function",[151,1153,1154],{"style":169}," render",[151,1156,1157],{"style":188},"(canvas",[151,1159,506],{"style":165},[151,1161,1162],{"style":169}," HTMLCanvasElement",[151,1164,763],{"style":188},[151,1166,1168,1170,1173,1176,1178,1181,1184],{"class":939,"id":1167,"style":941},"Cc5da40f6-L5",[157,1169,287],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,1171,1172],{"style":165},"  const",[151,1174,1175],{"style":188}," gpu ",[151,1177,195],{"style":165},[151,1179,1180],{"style":165}," await",[151,1182,1183],{"style":169}," init",[151,1185,936],{"style":188},[151,1187,1189,1191,1193,1196,1198,1201,1204,1206],{"class":939,"id":1188,"style":941},"Cc5da40f6-L6",[157,1190,293],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,1192,1172],{"style":165},[151,1194,1195],{"style":188}," output ",[151,1197,195],{"style":165},[151,1199,1200],{"style":169}," surface",[151,1202,1203],{"style":188},"(gpu, canvas, { dpr: ",[151,1205,162],{"style":169},[151,1207,1208],{"style":188}," });",[151,1210,1212,1214,1216,1219,1221,1224],{"class":939,"id":1211,"style":941},"Cc5da40f6-L7",[157,1213,331],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,1215,1172],{"style":165},[151,1217,1218],{"style":188}," shader ",[151,1220,195],{"style":165},[151,1222,1223],{"style":169}," effect",[151,1225,1226],{"style":188},"(gpu, shaderSource);",[151,1228,1230,1232],{"class":153,"id":1229,"style":155},"Cc5da40f6-L8",[157,1231,384],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,1233,1137],{"style":188},[151,1235,1237,1239,1242,1245],{"class":153,"id":1236,"style":155},"Cc5da40f6-L9",[157,1238,393],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,1240,1241],{"style":188},"  shader.",[151,1243,1244],{"style":169},"set",[151,1246,1247],{"style":188},"({ uniforms: { resolution: output.size } });",[151,1249,1251,1253,1256,1259,1261,1264,1267],{"class":153,"id":1250,"style":155},"Cc5da40f6-L10",[157,1252,431],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,1254,1255],{"style":169},"  frame",[151,1257,1258],{"style":188},"(gpu, (f) ",[151,1260,637],{"style":165},[151,1262,1263],{"style":188}," f.",[151,1265,1266],{"style":169},"pass",[151,1268,1269],{"style":188},"(output, shader));",[151,1271,1273,1275,1278,1281,1283,1286,1289],{"class":153,"id":1272,"style":155},"Cc5da40f6-L11",[157,1274,444],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,1276,1277],{"style":165},"  return",[151,1279,1280],{"style":188}," () ",[151,1282,637],{"style":165},[151,1284,1285],{"style":188}," gpu.",[151,1287,1288],{"style":169},"dispose",[151,1290,936],{"style":188},[151,1292,1294,1296],{"class":153,"id":1293,"style":155},"Cc5da40f6-L12",[157,1295,457],{"type":157,"tabindex":159,"aria-hidden":98,"aria-label":160,"class":161},[151,1297,1298],{"style":188},"}",[83,1300,1301,1302],{"name":85},"Example code from ",[1303,1304,1307],"a",{"href":1305,"target":1306},"https:\u002F\u002Fvgpu.sh\u002F","_blank",[28,1308,1309],{},"vgpu.sh",[20,1311,1313,1314],{"id":1312},"expandable-json","Expandable ",[28,1315,1316],{},"JSON",[16,1318,1319,1320,1323],{},"A Vue port of Vercel's Geist design system ",[28,1321,1322],{},"\u003CJsonView \u002F>"," component: a collapsible tree for structured data with the same DOM, ARIA tree semantics, and keyboard model as the original. The data is passed as a prop rather than a fenced code block. In markdown that is a YAML block inside the component, which Comark parses into a real object, so no syntax highlighter is involved.",[1325,1326,1328],"h3",{"id":1327},"expandable-json-default","Default",[16,1330,1331,1332,1335,1336,1339,1340,1343],{},"Objects and arrays render as tree items with a chevron toggle. Click a row, or press Enter, Space, or the arrow keys, to expand and collapse it. Up and Down move between rows, Home and End jump to the first and last, and typing a letter jumps to the next key starting with it. ",[28,1333,1334],{},"defaultExpandDepth"," controls how many levels start open and defaults to 3, matching Geist. Here it is 1, so the root is open and ",[28,1337,1338],{},"deployment"," and ",[28,1341,1342],{},"request"," start collapsed.",[1345,1346],"json-view",{":default-expand-depth":162,"data":1347},{"deployment":1348,"request":1353,"cached":1358,"error":1359},{"id":1349,"project":1350,"target":1351,"state":1352},"dpl_9WjH8QFQySx7","docs","production","ready",{"method":1354,"path":1355,"status":1356,"durationMs":1357},"GET","\u002Fapi\u002Fsearch",200,42,false,null,[1325,1361,1363],{"id":1362},"expandable-json-single-line","Single line",[16,1365,1366],{},"An object with a single primitive value collapses onto one line when the whole line, key and value included, fits within 50 characters. The entry is still a focusable tree item, so keyboard navigation works the same as in the expanded form. This is Geist's heuristic and applies at any depth, not only at the root.",[1345,1368],{"data":1369},{"foo":1370},"bar",[1325,1372,1374],{"id":1373},"expandable-json-wrapped","Wrapped",[16,1376,1377,1378,1381],{},"Long values wrap inside the card instead of forcing a horizontal scroll. The tree uses ",[28,1379,1380],{},"overflow-wrap: anywhere",", so a URL with no natural break points still wraps, and the continuation lines align with the key rather than the left edge. The single-line rule does not apply here because the line is far over 50 characters.",[1345,1383],{"data":1384},{"browserApiUrl":1385},"https:\u002F\u002Fbrowser-api.vercel.sh\u002Fscreenshot?url=https%3A%2F%2Fprocore-com-prod-f5vem4o6u-marketing-web-dev.vercel.app&width=1440&height=900&fullPage=true",[1325,1387,1389],{"id":1388},"expandable-json-collapsed","Collapsed",[16,1391,1392,1393,1396,1397,1400],{},"A depth of ",[28,1394,1395],{},"0"," collapses the root itself, so the whole tree starts as ",[28,1398,1399],{},"{…}"," with a single chevron. Expanding it reveals the first level, and each nested container stays collapsed until toggled on its own. Useful for large payloads where the shape matters more than the contents.",[1345,1402],{":default-expand-depth":1395,"data":1403},{"trace":1404,"request":1408,"flags":1411},{"spanId":1405,"parentId":1406,"service":1407},"span_7Qk9b4","span_root","api",{"id":1409,"path":1410,"method":1354},"req_00042","\u002Fapi\u002Fprojects",[1412,1413],"enable-logs-json-rendering","observability-panel",[1325,1415,1417],{"id":1416},"expandable-json-embedded","Embedded",[16,1419,1420,1421,1424,1425,1427,1428,1339,1431,1434,1435,1437],{},"The ",[28,1422,1423],{},"flow"," prop renders the bare tree with no card, so it can sit inside a sentence. ",[28,1426,42],{}," provides the surrounding card and ",[28,1429,1430],{},"prefix",[28,1432,1433],{},"suffix"," slots for the text on either side. Collapsed, the tree reads inline as ",[28,1436,1399],{},". Expanded, its rows break onto their own lines and the suffix continues on the same line as the closing bracket.",[1439,1440,1441,1447,1481],"json-flow",{},[83,1442,1443,1444,506],{"name":1430},"Storefront API response for ",[28,1445,1446],{},"query products(first: 1)",[83,1448,1449],{"name":93},[1345,1450],{":flow":98,":default-expand-depth":1395,"data":1451},{"data":1452,"extensions":1474},{"products":1453},{"edges":1454,"pageInfo":1473},[1455,1465],{"node":1456},{"id":1457,"title":1458,"handle":1459,"availableForSale":1460,"priceRange":1461},"gid:\u002F\u002Fshopify\u002FProduct\u002F7857043243130","Basic T-Shirt","basic-t-shirt",true,{"minVariantPrice":1462},{"amount":1463,"currencyCode":1464},"24.95","USD",{"node":1466},{"id":1467,"title":1468,"handle":1469,"availableForSale":1460,"priceRange":1470},"gid:\u002F\u002Fshopify\u002FProduct\u002F7857043275898","Long Sleeve","long-sleeve",{"minVariantPrice":1471},{"amount":1472,"currencyCode":1464},"29.95",{"hasNextPage":1460,"hasPreviousPage":1358},{"cost":1475},{"requestedQueryCost":1092,"actualQueryCost":1476,"throttleStatus":1477},4,{"maximumAvailable":1478,"currentlyAvailable":1479,"restoreRate":1480},1000,996,50,[83,1482,1483,1484],{"name":1433},", endpoint: ",[28,1485,1486],{},"POST \u002Fapi\u002F2024-10\u002Fgraphql.json",[1325,1488,1490],{"id":1489},"expandable-json-empty-containers","Empty containers",[16,1492,1493,1494,547,1496,1499],{},"An empty object or array past the expand depth shows ",[28,1495,1399],{},[28,1497,1498],{},"[…]"," like any other collapsed container, but has no chevron and is not a toggle since there is nothing to reveal.",[1345,1501],{":default-expand-depth":162,"data":1502},{"id":1349,"meta":1503,"tags":1504,"labels":1505},{},[],{"env":1506},{},[1325,1508,1510],{"id":1509},"expandable-json-indentation-and-closing-brackets","Indentation and closing brackets",[16,1512,1513,1514,1517,1518,1520],{},"An intentional departure from Geist. There, the root tree item is inline and its children sit in a block group that snaps to the left edge, so first-level keys land in the same column as the root ",[28,1515,1516],{},"{",", the root ",[28,1519,1298],{}," sits under the chevron, and each nested level steps in by a single character.",[16,1522,1523,1524,1526,1527,1529,1530,1532,1533,1339,1536,1539],{},"Here every level steps in by two characters relative to its enclosing bracket, and every closing bracket lines up with the line that opened it: the root ",[28,1525,1298],{}," under the root ",[28,1528,1516],{},", and each nested ",[28,1531,1298],{}," under ",[28,1534,1535],{},"deployment:",[28,1537,1538],{},"request:",".",[1345,1541],{":default-expand-depth":180,"data":1542},{"deployment":1543,"request":1544},{"id":1349,"project":1350,"target":1351},{"method":1354,"path":1355,"status":1356},1788810000391]