1"use strict";(self.rspackChunkvext_website=self.rspackChunkvext_website||[]).push([[659],{8218(s,e,n){n.r(e);var r=n(4848),i=n(8453);function o(s){let e={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",span:"span",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,i.R)(),...s.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(e.h1,{id:"static-assets-and-cdn",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#static-assets-and-cdn",children:"#"}),"Static Assets and CDN"]}),"\n",(0,r.jsx)(e.p,{children:"Vext has two static asset locations with different behavior."}),"\n",(0,r.jsxs)(e.h2,{id:"asset-locations",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#asset-locations",children:"#"}),"Asset Locations"]}),"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",(0,r.jsxs)(e.table,{children:[(0,r.jsx)(e.thead,{children:(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.th,{children:"Location"}),(0,r.jsx)(e.th,{children:"Behavior"})]})}),(0,r.jsxs)(e.tbody,{children:[(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"src/frontend/assets/**"})}),(0,r.jsx)(e.td,{children:"Imported by TSX/CSS and processed through the frontend asset graph."})]}),(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"public/**"})}),(0,r.jsx)(e.td,{children:"Copied as public files and addressed by URL."})]})]})]}),"\n",(0,r.jsxs)(e.p,{children:["Use imported assets when a component owns the image, font, or media file. Use ",(0,r.jsx)(e.code,{children:"public/**"})," for files that need fixed URLs such as ",(0,r.jsx)(e.code,{children:"favicon.svg"}),", ",(0,r.jsx)(e.code,{children:"robots.txt"}),", or externally referenced files."]}),"\n",(0,r.jsxs)(e.h2,{id:"imported-assets",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#imported-assets",children:"#"}),"Imported Assets"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" logoUrl "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:' "@assets/logo.png"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Logo"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"() {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"img"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" src"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{logoUrl} "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"alt"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Logo"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />;"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,r.jsx)(e.p,{children:"Production builds use content-hashed output so browsers and CDNs can cache aggressively. Content-hashed bundle assets are served with long-lived immutable cache headers."}),"\n",(0,r.jsxs)(e.p,{children:["The frontend static mount sends ",(0,r.jsx)(e.code,{children:"ETag"})," and ",(0,r.jsx)(e.code,{children:"Last-Modified"})," validators. Conditional ",(0,r.jsx)(e.code,{children:"If-None-Match"})," and ",(0,r.jsx)(e.code,{children:"If-Modified-Since"})," requests can return ",(0,r.jsx)(e.code,{children:"304"})," without an entity body."]}),"\n",(0,r.jsx)(e.p,{children:"Static request paths are canonicalized before filesystem access. Absolute or encoded traversal paths are rejected, and a symbolic link that resolves outside the configured static root is never served."}),"\n",(0,r.jsxs)(e.h2,{id:"public-files",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#public-files",children:"#"}),"Public Files"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"text",children:(0,r.jsxs)(e.code,{children:[(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{children:"public/favicon.svg -> /favicon.svg"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{children:"public/docs/openapi.json -> /docs/openapi.json"})})]})})}),"\n",(0,r.jsx)(e.p,{children:"Public files are included in the deploy manifest so release tooling can upload them with the rest of the frontend assets."}),"\n",(0,r.jsx)(e.p,{children:"Public files keep stable URLs, so the runtime serves them with revalidation headers by default:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"http",children:(0,r.jsx)(e.code,{children:(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"Cache-Control"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:" no-cache, max-age=0, must-revalidate"})]})})})}),"\n",(0,r.jsx)(e.p,{children:"Use imported assets for files that should receive immutable long-cache headers after content hashing. Source maps and non-hashed files are also served with revalidation headers."}),"\n",(0,r.jsxs)(e.h2,{id:"cdn-url",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#cdn-url",children:"#"}),"CDN URL"]}),"\n",(0,r.jsxs)(e.p,{children:["Set ",(0,r.jsx)(e.code,{children:"frontend.deploy.assetBaseUrl"})," when production assets are served from a CDN:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"frontend"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" deploy"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" assetBaseUrl"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:' "https://cdn.example.com/my-app/"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["This changes generated asset URLs. Upload is controlled separately by ",(0,r.jsx)(e.code,{children:"frontend.deploy.upload"}),", ",(0,r.jsx)(e.code,{children:"vext build --upload-assets"}),", or ",(0,r.jsx)(e.code,{children:"vext deploy assets"}),"."]}),"\n",(0,r.jsxs)(e.h2,{id:"incremental-upload",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#incremental-upload",children:"#"}),"Incremental Upload"]}),"\n",(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:"deploy-manifest.json"})," plus sha256 state lets Vext skip unchanged images, fonts, JS, CSS, and public files. This is the default path for enterprise releases where large media files should not be re-uploaded every build."]}),"\n",(0,r.jsx)(e.p,{children:"The deploy manifest is treated as untrusted input. Every asset path must be normalized, relative, unique, and contained by the frontend output in both lexical and realpath terms. Absolute/traversal entries, escaping symbolic links, duplicate upload keys, or size/sha256 drift stop planning and upload before any asset is transferred."}),"\n",(0,r.jsxs)(e.h2,{id:"local-media-pipeline",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#local-media-pipeline",children:"#"}),"Local Media Pipeline"]}),"\n",(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:"config.frontend.media"})," compiles only local raster files found under\n",(0,r.jsx)(e.code,{children:"src/frontend/assets/**"}),". It writes content-addressed image variants and a\nmedia manifest into the normal frontend output, so those files participate in\nSRI and incremental deploy closure."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" default"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" frontend"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" media"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" maxBytes"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 20"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" *"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 1024"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" *"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 1024"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" images"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" widths"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"320"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 640"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 960"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 1280"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 1600"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"]"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" formats"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"original"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:' "webp"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:' "avif"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"]"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" quality"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 75"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" maxInputPixels"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 40_000_000"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" maxVariants"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 24"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" fonts"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" maxBytes"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 5"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" *"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 1024"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"}
1,children:" *"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 1024"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["All limits are positive and build-time enforced. ",(0,r.jsx)(e.code,{children:"media.maxBytes"})," bounds the\ncomplete generated closure. Vext refuses an unreadable source, oversized\ndecoded input, too many variants, or a media closure that exceeds the\nconfigured byte budget."]}),"\n",(0,r.jsxs)(e.h3,{id:"images",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#images",children:"#"}),"Images"]}),"\n",(0,r.jsxs)(e.p,{children:["Use ",(0,r.jsx)(e.code,{children:"Image"})," with the local source path relative to ",(0,r.jsx)(e.code,{children:"src/frontend"}),"; it reads\nthe document media manifest and emits width/height, responsive ",(0,r.jsx)(e.code,{children:"srcSet"}),",\n",(0,r.jsx)(e.code,{children:"sizes"}),", format sources, and a placeholder. ",(0,r.jsx)(e.code,{children:"priority"})," produces an eager,\nhigh-priority image and the corresponding document preload."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { Image } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:' "vextjs/frontend"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Hero"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"() {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Image"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" src"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"assets/hero.png"'})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" alt"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Product overview"'})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" width"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"960"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" height"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"540"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" sizes"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"(max-width: 768px) 100vw, 960px"'})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" priority"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Vext never fetches or proxies a remote image. A remote ",(0,r.jsx)(e.code,{children:"src"})," requires an\nexplicit ",(0,r.jsx)(e.code,{children:"defineImageLoader({ allowlist, load })"}),"; the loader owns the remote\nURL and must return an absolute HTTP(S) URL."]}),"\n",(0,r.jsxs)(e.h3,{id:"fonts",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#fonts",children:"#"}),"Fonts"]}),"\n",(0,r.jsxs)(e.p,{children:["Declare a local font descriptor in a frontend source file. ",(0,r.jsx)(e.code,{children:"defineFont"}),"\nrequires a local ",(0,r.jsx)(e.code,{children:"src"}),", a family, and a license identifier or application\nlicense reference. The compiler emits a local WOFF2 subset and deterministic\n",(0,r.jsx)(e.code,{children:"@font-face"})," CSS; equivalent descriptors are deduplicated."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { defineFont } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:' "vextjs/frontend"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" brandFont"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" defineFont"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"({"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" src"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:' "./assets/BrandSans.ttf"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" family"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:' "Brand Sans"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" weight"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 400"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" display"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:' "swap"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" preload"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" true"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" fallback"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:' "system-ui"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" license"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:' "OFL-1.1"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(e.p,{children:"Remote font URLs are rejected. The local media worker has no CDN SDK, remote\nfont downloader, or bundler plugin layer."})]})}function l(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}={...(0,i.R)(),...s.components};return e?(0,r.jsx)(e,{...s,children:(0,r.jsx)(o,{...s})}):o(s)}l.__RSPRESS_PAGE_META={},l.__RSPRESS_PAGE_META["en%2Ffrontend%2Fstatic-assets-and-cdn.md"]={toc:[{id:"asset-locations",text:"Asset Locations",depth:2},{id:"imported-assets",text:"Imported Assets",depth:2},{id:"public-files",text:"Public Files",depth:2},{id:"cdn-url",text:"CDN URL",depth:2},{id:"incremental-upload",text:"Incremental Upload",depth:2},{id:"local-media-pipeline",text:"Local Media Pipeline",depth:2},{id:"images",text:"Images",depth:3},{id:"fonts",text:"Fonts",depth:3}],title:"Static Assets and CDN",headingTitle:"Static Assets and CDN",frontmatter:{}},n.d(e,{default:()=>l})}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.