[{"data":1,"prerenderedAt":615},["ShallowReactive",2],{"navigation_docs":3,"-features-thumbnails":85,"-features-thumbnails-surround":610},[4,26,55,76],{"title":5,"path":6,"stem":7,"children":8,"page":25},"Getting Started","\u002Fgetting-started","1.getting-started",[9,13,17,21],{"title":10,"path":11,"stem":12},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction",{"title":14,"path":15,"stem":16},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation",{"title":18,"path":19,"stem":20},"Quick Start","\u002Fgetting-started\u002Fquick-start","1.getting-started\u002F3.quick-start",{"title":22,"path":23,"stem":24},"Project Structure","\u002Fgetting-started\u002Fproject-structure","1.getting-started\u002F4.project-structure",false,{"title":27,"path":28,"stem":29,"children":30,"page":25},"Features","\u002Ffeatures","2.features",[31,35,39,43,47,51],{"title":32,"path":33,"stem":34},"Dashboard","\u002Ffeatures\u002Fdashboard","2.features\u002F1.dashboard",{"title":36,"path":37,"stem":38},"Command Palette","\u002Ffeatures\u002Fcommand-palette","2.features\u002F2.command-palette",{"title":40,"path":41,"stem":42},"Import","\u002Ffeatures\u002Fimport","2.features\u002F3.import",{"title":44,"path":45,"stem":46},"Export & Deploy","\u002Ffeatures\u002Fexport-deploy","2.features\u002F4.export-deploy",{"title":48,"path":49,"stem":50},"Shared Package","\u002Ffeatures\u002Fshared-package","2.features\u002F5.shared-package",{"title":52,"path":53,"stem":54},"Thumbnails","\u002Ffeatures\u002Fthumbnails","2.features\u002F6.thumbnails",{"title":56,"path":57,"stem":58,"children":59,"page":25},"Concepts","\u002Fconcepts","3.concepts",[60,64,68,72],{"title":61,"path":62,"stem":63},"Monorepo Management","\u002Fconcepts\u002Fmonorepo","3.concepts\u002F1.monorepo",{"title":65,"path":66,"stem":67},"Dashboard Overview","\u002Fconcepts\u002Fdashboard","3.concepts\u002F2.dashboard",{"title":69,"path":70,"stem":71},"Migrations","\u002Fconcepts\u002Fmigrations","3.concepts\u002F3.migrations",{"title":73,"path":74,"stem":75},"Version Management","\u002Fconcepts\u002Fversion-management","3.concepts\u002F4.version-management",{"title":77,"path":78,"stem":79,"children":80,"page":25},"Reference","\u002Freference","4.reference",[81],{"title":82,"path":83,"stem":84},"CLI Commands","\u002Freference\u002Fcli-commands","4.reference\u002F1.cli-commands",{"id":86,"title":52,"body":87,"description":603,"extension":604,"links":605,"meta":606,"navigation":607,"path":53,"seo":608,"stem":54,"__hash__":609},"docs\u002F2.features\u002F6.thumbnails.md",{"type":88,"value":89,"toc":584},"minimark",[90,95,99,103,106,135,142,147,154,176,179,192,196,200,212,215,226,235,239,242,250,254,295,302,306,313,341,345,348,354,357,387,391,397,401,507,518,522,536,547,550,555,559,580],[91,92,94],"h2",{"id":93},"overview","Overview",[96,97,98],"p",{},"Generate a PNG screenshot of the first slide of any presentation. Thumbnails are useful for sharing previews on social media, embedding in documentation, or using as cover images.",[91,100,102],{"id":101},"cli-usage","CLI Usage",[96,104,105],{},"Generate a thumbnail from the command line:",[107,108,113],"pre",{"className":109,"code":110,"language":111,"meta":112,"style":112},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm supaslidev thumbnail my-presentation\n","bash","",[114,115,116],"code",{"__ignoreMap":112},[117,118,121,125,129,132],"span",{"class":119,"line":120},"line",1,[117,122,124],{"class":123},"sBMFI","pnpm",[117,126,128],{"class":127},"sfazB"," supaslidev",[117,130,131],{"class":127}," thumbnail",[117,133,134],{"class":127}," my-presentation\n",[96,136,137,138,141],{},"The thumbnail is automatically optimized to WebP format and saved to ",[114,139,140],{},"thumbnails\u002Fmy-presentation.webp",".",[143,144,146],"h3",{"id":145},"custom-output-path","Custom Output Path",[96,148,149,150,153],{},"Specify a custom output path with the ",[114,151,152],{},"--output"," flag:",[107,155,157],{"className":109,"code":156,"language":111,"meta":112,"style":112},"pnpm supaslidev thumbnail my-presentation --output .\u002Fimages\u002Fcover\n",[114,158,159],{"__ignoreMap":112},[117,160,161,163,165,167,170,173],{"class":119,"line":120},[117,162,124],{"class":123},[117,164,128],{"class":127},[117,166,131],{"class":127},[117,168,169],{"class":127}," my-presentation",[117,171,172],{"class":127}," --output",[117,174,175],{"class":127}," .\u002Fimages\u002Fcover\n",[96,177,178],{},"The output directory is created automatically if it doesn't exist.",[180,181,184,185,187,188,191],"callout",{"icon":182,"type":183},"i-heroicons-information-circle","info","The ",[114,186,152],{}," flag specifies the base path without the ",[114,189,190],{},".png"," extension. The extension is added automatically.",[91,193,195],{"id":194},"dashboard-usage","Dashboard Usage",[143,197,199],{"id":198},"thumbnail-button","Thumbnail Button",[96,201,202,203,207,208,211],{},"Each presentation card and list item includes a ",[204,205,206],"strong",{},"thumbnail"," button. Click it to generate the thumbnail in the background. A toast notification appears when the thumbnail is ready, with an ",[204,209,210],{},"Open"," action to view it in a new tab.",[143,213,36],{"id":214},"command-palette",[96,216,217,218,221,222,225],{},"Open the command palette with ",[114,219,220],{},"⌘K"," (macOS) or ",[114,223,224],{},"Ctrl+K"," (Windows\u002FLinux) and search for:",[227,228,229],"ul",{},[230,231,232],"li",{},[114,233,234],{},"Thumbnail > [presentation-name]",[143,236,238],{"id":237},"header-input","Header Input",[96,240,241],{},"Type a thumbnail command directly in the terminal-style header input:",[107,243,248],{"className":244,"code":246,"language":247},[245],"language-text","thumbnail my-presentation\n","text",[114,249,246],{"__ignoreMap":112},[91,251,253],{"id":252},"output-location","Output Location",[255,256,257,270],"table",{},[258,259,260],"thead",{},[261,262,263,267],"tr",{},[264,265,266],"th",{},"Method",[264,268,269],{},"Default Output",[271,272,273,286],"tbody",{},[261,274,275,281],{},[276,277,278],"td",{},[114,279,280],{},"pnpm supaslidev thumbnail \u003Cname>",[276,282,283],{},[114,284,285],{},"thumbnails\u002F\u003Cname>.webp",[261,287,288,291],{},[276,289,290],{},"Dashboard thumbnail button",[276,292,293],{},[114,294,285],{},[96,296,297,298,301],{},"Thumbnails are served from the dashboard at ",[114,299,300],{},"\u002Fthumbnails\u002F\u003Cname>.webp"," while the dev server is running.",[91,303,305],{"id":304},"thumbnails-in-deployed-sites","Thumbnails in Deployed Sites",[96,307,308,309,312],{},"When you run ",[114,310,311],{},"pnpm supaslidev deploy",", thumbnails are automatically generated for every presentation as part of the build pipeline. The deploy command:",[314,315,316,322,325,331],"ol",{},[230,317,318,319],{},"Builds each presentation with ",[114,320,321],{},"slidev build",[230,323,324],{},"Generates a PNG thumbnail of the first slide for each presentation",[230,326,327,328],{},"Includes optimized thumbnails in the deploy output at ",[114,329,330],{},"deploy\u002Fthumbnails\u002F\u003Cname>.webp",[230,332,333,334,336,337,340],{},"Adds a ",[114,335,206],{}," field to ",[114,338,339],{},"presentations.json"," with the URL path",[143,342,344],{"id":343},"referenceable-urls","Referenceable URLs",[96,346,347],{},"Each thumbnail is available at a predictable, static URL on your deployed site:",[107,349,352],{"className":350,"code":351,"language":247},[245],"https:\u002F\u002Fyour-site.com\u002Fthumbnails\u002Fmy-presentation.webp\n",[114,353,351],{"__ignoreMap":112},[96,355,356],{},"You can use these URLs for:",[227,358,359,369,375,381],{},[230,360,361,364,365,368],{},[204,362,363],{},"Social sharing"," — use as ",[114,366,367],{},"og:image"," meta tags",[230,370,371,374],{},[204,372,373],{},"Documentation"," — embed in READMEs or wikis",[230,376,377,380],{},[204,378,379],{},"External previews"," — link from other sites or tools",[230,382,383,386],{},[204,384,385],{},"Dashboard display"," — presentation cards show thumbnail previews automatically",[143,388,390],{"id":389},"deploy-output-structure","Deploy Output Structure",[107,392,395],{"className":393,"code":394,"language":247},[245],"deploy\u002F\n├── presentations.json          ← includes thumbnail paths\n├── thumbnails\u002F\n│   ├── quarterly-review.webp\n│   ├── product-launch.webp\n│   └── team-onboarding.webp\n├── presentations\u002F\n│   └── ...\n└── ...\n",[114,396,394],{"__ignoreMap":112},[143,398,400],{"id":399},"presentationsjson-example","presentations.json Example",[107,402,406],{"className":403,"code":404,"language":405,"meta":112,"style":112},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","[\n  {\n    \"id\": \"quarterly-review\",\n    \"title\": \"Q4 Review\",\n    \"thumbnail\": \"\u002Fthumbnails\u002Fquarterly-review.webp\",\n    ...\n  }\n]\n","json",[114,407,408,414,420,447,468,488,495,501],{"__ignoreMap":112},[117,409,410],{"class":119,"line":120},[117,411,413],{"class":412},"sMK4o","[\n",[117,415,417],{"class":119,"line":416},2,[117,418,419],{"class":412},"  {\n",[117,421,423,426,430,433,436,439,442,444],{"class":119,"line":422},3,[117,424,425],{"class":412},"    \"",[117,427,429],{"class":428},"spNyl","id",[117,431,432],{"class":412},"\"",[117,434,435],{"class":412},":",[117,437,438],{"class":412}," \"",[117,440,441],{"class":127},"quarterly-review",[117,443,432],{"class":412},[117,445,446],{"class":412},",\n",[117,448,450,452,455,457,459,461,464,466],{"class":119,"line":449},4,[117,451,425],{"class":412},[117,453,454],{"class":428},"title",[117,456,432],{"class":412},[117,458,435],{"class":412},[117,460,438],{"class":412},[117,462,463],{"class":127},"Q4 Review",[117,465,432],{"class":412},[117,467,446],{"class":412},[117,469,471,473,475,477,479,481,484,486],{"class":119,"line":470},5,[117,472,425],{"class":412},[117,474,206],{"class":428},[117,476,432],{"class":412},[117,478,435],{"class":412},[117,480,438],{"class":412},[117,482,483],{"class":127},"\u002Fthumbnails\u002Fquarterly-review.webp",[117,485,432],{"class":412},[117,487,446],{"class":412},[117,489,491],{"class":119,"line":490},6,[117,492,494],{"class":493},"sTEyZ","    ...\n",[117,496,498],{"class":119,"line":497},7,[117,499,500],{"class":412},"  }\n",[117,502,504],{"class":119,"line":503},8,[117,505,506],{"class":412},"]\n",[180,508,509,510,513,514,517],{"icon":182,"type":183},"If you set a custom ",[114,511,512],{},"--base"," path during deploy, thumbnail URLs are prefixed accordingly (e.g., ",[114,515,516],{},"\u002Fslides\u002Fthumbnails\u002Fmy-deck.webp",").",[91,519,521],{"id":520},"how-it-works","How It Works",[96,523,524,525,528,529,435],{},"Supaslidev uses Slidev's built-in export command under the hood with ",[114,526,527],{},"--format png --range 1"," to render only the first slide. This uses Playwright to launch a headless browser, render the slide, and capture a screenshot. The resulting PNG is then optimized with ",[530,531,535],"a",{"href":532,"rel":533},"https:\u002F\u002Fsharp.pixelplumbing.com\u002F",[534],"nofollow","sharp",[227,537,538,541,544],{},[230,539,540],{},"Resized to 1280px width (maintaining aspect ratio)",[230,542,543],{},"Converted to WebP format at quality 80",[230,545,546],{},"The original PNG is removed",[96,548,549],{},"This typically reduces file size by ~95% (e.g., 3.2MB PNG → ~160KB WebP).",[180,551,554],{"icon":552,"type":553},"i-heroicons-light-bulb","tip","Thumbnails are regenerated each time you run the command or deploy, so they always reflect the latest version of your first slide.",[91,556,558],{"id":557},"next-steps","Next Steps",[560,561,562,572],"card-group",{},[563,564,566,569],"card",{"icon":565,"to":45},"i-heroicons-arrow-down-tray",[567,568,44],"template",{"v-slot:title":112},[567,570,571],{"v-slot:description":112},"Export full presentations to PDF or deploy as static sites",[563,573,575,577],{"icon":574,"to":83},"i-heroicons-command-line",[567,576,82],{"v-slot:title":112},[567,578,579],{"v-slot:description":112},"Full reference for all CLI commands",[581,582,583],"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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}",{"title":112,"searchDepth":416,"depth":416,"links":585},[586,587,590,595,596,601,602],{"id":93,"depth":416,"text":94},{"id":101,"depth":416,"text":102,"children":588},[589],{"id":145,"depth":422,"text":146},{"id":194,"depth":416,"text":195,"children":591},[592,593,594],{"id":198,"depth":422,"text":199},{"id":214,"depth":422,"text":36},{"id":237,"depth":422,"text":238},{"id":252,"depth":416,"text":253},{"id":304,"depth":416,"text":305,"children":597},[598,599,600],{"id":343,"depth":422,"text":344},{"id":389,"depth":422,"text":390},{"id":399,"depth":422,"text":400},{"id":520,"depth":416,"text":521},{"id":557,"depth":416,"text":558},"Generate PNG images of presentation first slides for sharing and previewing.","md",null,{},true,{"title":52,"description":603},"hYtzvCb_0geZW5TGBDmr_b5JRdEPTBJaC49drJ1NFUo",[611,613],{"title":48,"path":49,"stem":50,"description":612,"children":-1},"Share components, layouts, and styles across all your Slidev presentations.",{"title":61,"path":62,"stem":63,"description":614,"children":-1},"How Supaslidev uses pnpm workspaces to manage multiple presentations efficiently.",1776858071694]