1import{o as d,a as h}from"../chunks/chunk-DWvXIf5L.js";import{j as e}from"../chunks/chunk-BAmQoYZW.js";import{L as n}from"../chunks/chunk-BqLs1iV-.js";/* empty css *//* empty css *//* empty css *//* empty css *//* empty css *//* empty css *//* empty css *//* empty css */import{a as o}from"../chunks/chunk-DvU3kzTA.js";import{U as i}from"../chunks/chunk-ZK4B5vk0.js";/* empty css */import"../chunks/chunk-BReiOgvl.js";import{C as p}from"../chunks/chunk-BONPc_lX.js";/* empty css *//* empty css *//* empty css *//* empty css */const x=[{pageSectionId:"pagecontext",pageSectionLevel:2,pageSectionTitle:"`pageContext`"},{pageSectionId:"without-vike-react-vue-solid",pageSectionLevel:2,pageSectionTitle:"Without `vike-{react,vue,solid}`"},{pageSectionId:"see-also",pageSectionLevel:2,pageSectionTitle:"See also"}];function r(s){const l={a:"a",blockquote:"blockquote",code:"code",div:"div",figure:"figure",li:"li",p:"p",pre:"pre",span:"span",ul:"ul",...o(),...s.components},{ChoiceGroup:a,ChoiceGroupContainer:t}=l;return a||c("ChoiceGroup"),t||c("ChoiceGroupContainer"),e.jsxs(e.Fragment,{children:[e.jsx(p,{env:e.jsxs(e.Fragment,{children:["client, and server if ",e.jsx(n,{href:"/ssr",children:e.jsx(l.code,{children:"ssr: true"})})]}),global:null}),` 2`,e.jsxs(l.p,{children:["The ",e.jsx(l.code,{children:"+Page"})," setting determines the root component of the page."]}),` 3`,e.jsx(l.p,{children:"With JSX (React/Solid):"}),` 4`,e.jsx(t,{choiceGroupAll:[{name:"codeLang",choices:[{name:"JavaScript",icon:"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 130 130' preserveAspectRatio='xMidYMid meet'%3E%3Cpath fill='%23F0DB4F' d='M1.408 1.408h125.184v125.185H1.408z'/%3E%3Cpath fill='%23323330' d='M116.347 96.736c-.917-5.711-4.641-10.508-15.672-14.981-3.832-1.761-8.104-3.022-9.377-5.926-.452-1.69-.512-2.642-.226-3.665.821-3.32 4.784-4.355 7.925-3.403 2.023.678 3.938 2.237 5.093 4.724 5.402-3.498 5.391-3.475 9.163-5.879-1.381-2.141-2.118-3.129-3.022-4.045-3.249-3.629-7.676-5.498-14.756-5.355l-3.688.477c-3.534.893-6.902 2.748-8.877 5.235-5.926 6.724-4.236 18.492 2.975 23.335 7.104 5.332 17.54 6.545 18.873 11.531 1.297 6.104-4.486 8.08-10.234 7.378-4.236-.881-6.592-3.034-9.139-6.949-4.688 2.713-4.688 2.713-9.508 5.485 1.143 2.499 2.344 3.63 4.26 5.795 9.068 9.198 31.76 8.746 35.83-5.176.165-.478 1.261-3.666.38-8.581zM69.462 58.943H57.753l-.048 30.272c0 6.438.333 12.34-.714 14.149-1.713 3.558-6.152 3.117-8.175 2.427-2.059-1.012-3.106-2.451-4.319-4.485-.333-.584-.583-1.036-.667-1.071l-9.52 5.83c1.583 3.249 3.915 6.069 6.902 7.901 4.462 2.678 10.459 3.499 16.731 2.059 4.082-1.189 7.604-3.652 9.448-7.401 2.666-4.915 2.094-10.864 2.07-17.444.06-10.735.001-21.468.001-32.237z'/%3E%3C/svg%3E",iconStyle:{marginBottom:"0.5px",height:"11.5px"}},{name:"TypeScript",icon:"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 130 130' preserveAspectRatio='xMidYMid meet'%3E%3Cpath fill='%23fff' d='M22.67 47h99.67v73.67H22.67z'/%3E%3Cpath data-name='original' fill='%23007acc' d='M1.5 63.91v62.5h125v-125H1.5zm100.73-5a15.56 15.56 0 017.82 4.5 20.58 20.58 0 013 4c0 .16-5.4 3.81-8.69 5.85-.12.08-.6-.44-1.13-1.23a7.09 7.09 0 00-5.87-3.53c-3.79-.26-6.23 1.73-6.21 5a4.58 4.58 0 00.54 2.34c.83 1.73 2.38 2.76 7.24 4.86 8.95 3.85 12.78 6.39 15.16 10 2.66 4 3.25 10.46 1.45 15.24-2 5.2-6.9 8.73-13.83 9.9a38.32 38.32 0 01-9.52-.1 23 23 0 01-12.72-6.63c-1.15-1.27-3.39-4.58-3.25-4.82a9.34 9.34 0 011.15-.73L82 101l3.59-2.08.75 1.11a16.78 16.78 0 004.74 4.54c4 2.1 9.46 1.81 12.16-.62a5.43 5.43 0 00.69-6.92c-1-1.39-3-2.56-8.59-5-6.45-2.78-9.23-4.5-11.77-7.24a16.48 16.48 0 01-3.43-6.25 25 25 0 01-.22-8c1.33-6.23 6-10.58 12.82-11.87a31.66 31.66 0 019.49.26zm-29.34 5.24v5.12H56.66v46.23H45.15V69.26H28.88v-5a49.19 49.19 0 01.12-5.17C29.08 59 39 59 51 59h21.83z'/%3E%3C/svg%3E",iconStyle:{marginBottom:"0.5px",height:"11.5px"}}],default:"JavaScript",emptyChoices:[],alwaysShow:!1,hidden:!0,lvl:0,isBuiltIn:!0,absentChoices:[]}],children:e.jsxs(a,{choiceGroup:{name:"codeLang",choices:[{name:"JavaScript",icon:"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 130 130' preserveAspectRatio='xMidYMid meet'%3E%3Cpath fill='%23F0DB4F' d='M1.408 1.408h125.184v125.185H1.408z'/%3E%3Cpath fill='%23323330' d='M116.347 96.736c-.917-5.711-4.641-10.508-15.672-14.981-3.832-1.761-8.104-3.022-9.377-5.926-.452-1.69-.512-2.642-.226-3.665.821-3.32 4.784-4.355 7.925-3.403 2.023.678 3.938 2.237 5.093 4.724 5.402-3.498 5.391-3.475 9.163-5.879-1.381-2.141-2.118-3.129-3.022-4.045-3.249-3.629-7.676-5.498-14.756-5.355l-3.688.477c-3.534.893-6.902 2.748-8.877 5.235-5.926 6.724-4.236 18.492 2.975 23.335 7.104 5.332 17.54 6.545 18.873 11.531 1.297 6.104-4.486 8.08
4-10.234 7.378-4.236-.881-6.592-3.034-9.139-6.949-4.688 2.713-4.688 2.713-9.508 5.485 1.143 2.499 2.344 3.63 4.26 5.795 9.068 9.198 31.76 8.746 35.83-5.176.165-.478 1.261-3.666.38-8.581zM69.462 58.943H57.753l-.048 30.272c0 6.438.333 12.34-.714 14.149-1.713 3.558-6.152 3.117-8.175 2.427-2.059-1.012-3.106-2.451-4.319-4.485-.333-.584-.583-1.036-.667-1.071l-9.52 5.83c1.583 3.249 3.915 6.069 6.902 7.901 4.462 2.678 10.459 3.499 16.731 2.059 4.082-1.189 7.604-3.652 9.448-7.401 2.666-4.915 2.094-10.864 2.07-17.444.06-10.735.001-21.468.001-32.237z'/%3E%3C/svg%3E",iconStyle:{marginBottom:"0.5px",height:"11.5px"}},{name:"TypeScript",icon:"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 130 130' preserveAspectRatio='xMidYMid meet'%3E%3Cpath fill='%23fff' d='M22.67 47h99.67v73.67H22.67z'/%3E%3Cpath data-name='original' fill='%23007acc' d='M1.5 63.91v62.5h125v-125H1.5zm100.73-5a15.56 15.56 0 017.82 4.5 20.58 20.58 0 013 4c0 .16-5.4 3.81-8.69 5.85-.12.08-.6-.44-1.13-1.23a7.09 7.09 0 00-5.87-3.53c-3.79-.26-6.23 1.73-6.21 5a4.58 4.58 0 00.54 2.34c.83 1.73 2.38 2.76 7.24 4.86 8.95 3.85 12.78 6.39 15.16 10 2.66 4 3.25 10.46 1.45 15.24-2 5.2-6.9 8.73-13.83 9.9a38.32 38.32 0 01-9.52-.1 23 23 0 01-12.72-6.63c-1.15-1.27-3.39-4.58-3.25-4.82a9.34 9.34 0 011.15-.73L82 101l3.59-2.08.75 1.11a16.78 16.78 0 004.74 4.54c4 2.1 9.46 1.81 12.16-.62a5.43 5.43 0 00.69-6.92c-1-1.39-3-2.56-8.59-5-6.45-2.78-9.23-4.5-11.77-7.24a16.48 16.48 0 01-3.43-6.25 25 25 0 01-.22-8c1.33-6.23 6-10.58 12.82-11.87a31.66 31.66 0 019.49.26zm-29.34 5.24v5.12H56.66v46.23H45.15V69.26H28.88v-5a49.19 49.19 0 01.12-5.17C29.08 59 39 59 51 59h21.83z'/%3E%3C/svg%3E",iconStyle:{marginBottom:"0.5px",height:"11.5px"}}],default:"JavaScript",emptyChoices:[],alwaysShow:!1,hidden:!0,lvl:0,isBuiltIn:!0,absentChoices:[]},children:[e.jsx(l.div,{"data-choice-value":"JavaScript",className:"choice",children:e.jsx(l.figure,{"data-rehype-pretty-code-figure":"",children:e.jsx(l.pre,{tabIndex:"0","data-language":"jsx","data-theme":"github-light",children:e.jsxs(l.code,{"data-language":"jsx","data-theme":"github-light",style:{display:"grid"},children:[e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#6A737D"},children:"// /pages/index/+Page.jsx"})}),` 5`,e.jsx(l.span,{"data-line":"",children:" "}),` 6`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:"export"}),e.jsx(l.span,{style:{color:"#24292E"},children:" { Page }"})]}),` 7`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#6A737D"},children:"/* Or:"})}),` 8`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#6A737D"},children:"export default Page"})}),` 9`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#6A737D"},children:"*/"})}),` 10`,e.jsx(l.span,{"data-line":"",children:" "}),` 11`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:"function"}),e.jsx(l.span,{style:{color:"#6F42C1"},children:" Page"}),e.jsx(l.span,{style:{color:"#24292E"},children:"() {"})]}),` 12`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:" return"}),e.jsx(l.span,{style:{color:"#24292E"},children:" ("})]}),` 13`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#24292E"},children:" <>"})}),` 14`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#24292E"},children:" <"}),e.jsx(l.span,{style:{color:"#22863A"},children:"h1"}),e.jsx(l.span,{style:{color:"#24292E"},children:">Hi</"}),e.jsx(l.span,{style:{color:"#22863A"},children:"h1"}),e.jsx(l.span,{style:{color:"#24292E"},children:">"})]}),` 15`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#24292E"},children:" <"}),e.jsx(l.span,{style:{color:"#22863A"},children:"p"}),e.jsx(l.span,{style:{color:"#24292E"},children:">Hello World</"}),e.jsx(l.span,{style:{color:"#22863A"},children:"p"}),e.jsx(l.span,{style:{color:"#24292E"},children:">"})]}),` 16`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#24292E"},children:" </>"})}),` 17`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#24292E"},children:" )"})}),` 18`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#24292E"},children:"}"})})]})})})}),e.jsx(l.div,{"data-choice-value":"TypeScript",className:"choice",children:e.jsx(l.figure,{"data-rehype-pretty-code-figure":"",children:e.jsx(l.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-light",children:e.jsxs(l.code,{"data-language":"tsx","data-theme":"github-light",style:{display:"grid"},children:[e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#6A737D"},children:"// /pages/index/+Page.tsx"})}),` 19`,e.jsx(l.span,{"data-line":"",children:" "}),` 20`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:"export"}),e.jsx(l.span,{style:{color:"#24292E"},children:" { Page }"})]}),` 21`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#6A737D"},children:"/* Or:"})}),` 22`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#6A737D"},children:"export default Page"})}),` 23`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#6A737D"},children:"*/"})}),` 24`,e.jsx(l.span,{"data-line":"",children:" "}),` 25`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:"function"}),e.jsx(l.span,{style:{color:"#6F42C1"},children:" Page"}),e.jsx(l.span,{style:{color:"#24292E"}
25,children:"() {"})]}),` 26`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:" return"}),e.jsx(l.span,{style:{color:"#24292E"},children:" ("})]}),` 27`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#24292E"},children:" <>"})}),` 28`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#24292E"},children:" <"}),e.jsx(l.span,{style:{color:"#22863A"},children:"h1"}),e.jsx(l.span,{style:{color:"#24292E"},children:">Hi</"}),e.jsx(l.span,{style:{color:"#22863A"},children:"h1"}),e.jsx(l.span,{style:{color:"#24292E"},children:">"})]}),` 29`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#24292E"},children:" <"}),e.jsx(l.span,{style:{color:"#22863A"},children:"p"}),e.jsx(l.span,{style:{color:"#24292E"},children:">Hello World</"}),e.jsx(l.span,{style:{color:"#22863A"},children:"p"}),e.jsx(l.span,{style:{color:"#24292E"},children:">"})]}),` 30`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#24292E"},children:" </>"})}),` 31`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#24292E"},children:" )"})}),` 32`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#24292E"},children:"}"})})]})})})})]})}),` 33`,e.jsx(l.p,{children:"With Vue:"}),` 34`,e.jsx(l.figure,{"data-rehype-pretty-code-figure":"",children:e.jsx(l.pre,{tabIndex:"0","data-language":"vue","data-theme":"github-light",children:e.jsxs(l.code,{"data-language":"vue","data-theme":"github-light",style:{display:"grid"},children:[e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#6A737D"},children:"<!-- /pages/index/+Page.vue -->"})}),` 35`,e.jsx(l.span,{"data-line":"",children:" "}),` 36`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#24292E"},children:"<"}),e.jsx(l.span,{style:{color:"#22863A"},children:"template"}),e.jsx(l.span,{style:{color:"#24292E"},children:">"})]}),` 37`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#24292E"},children:" <"}),e.jsx(l.span,{style:{color:"#22863A"},children:"h1"}),e.jsx(l.span,{style:{color:"#24292E"},children:">Hi</"}),e.jsx(l.span,{style:{color:"#22863A"},children:"h1"}),e.jsx(l.span,{style:{color:"#24292E"},children:">"})]}),` 38`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#24292E"},children:" <"}),e.jsx(l.span,{style:{color:"#22863A"},children:"p"}),e.jsx(l.span,{style:{color:"#24292E"},children:">Hello World</"}),e.jsx(l.span,{style:{color:"#22863A"},children:"p"}),e.jsx(l.span,{style:{color:"#24292E"},children:">"})]}),` 39`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#24292E"},children:"</"}),e.jsx(l.span,{style:{color:"#22863A"},children:"template"}),e.jsx(l.span,{style:{color:"#24292E"},children:">"})]})]})})}),` 40`,e.jsxs(l.p,{children:["What happens with the ",e.jsx(l.code,{children:"Page"})," value is determined by the ",e.jsx(i,{}),"."]}),` 41`,e.jsxs(l.blockquote,{children:[` 42`,e.jsxs(l.p,{children:["Instead of using ",e.jsx(i,{name:!0,noLink:!0}),", you can also manually integrate the ",e.jsx(n,{href:"/ui-frameworks",children:"UI framework"})," yourself, see ",e.jsx(n,{href:"#without-vike-react-vue-solid"}),"."]}),` 43`]}),` 44`,e.jsx("h2",{id:"pagecontext",children:e.jsx("code",{children:"pageContext"})}),` 45`,e.jsxs(l.p,{children:["You can access ",e.jsxs(n,{href:"/pageContext",children:["the ",e.jsx(l.code,{children:"pageContext"})," object"]})," by using ",e.jsx(n,{href:"/usePageContext",children:e.jsx(l.code,{children:"usePageContext()"})}),"."]}),` 46`,e.jsx(t,{choiceGroupAll:[{name:"codeLang",choices:[{name:"JavaScript",icon:"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 130 130' preserveAspectRatio='xMidYMid meet'%3E%3Cpath fill='%23F0DB4F' d='M1.408 1.408h125.184v125.185H1.408z'/%3E%3Cpath fill='%23323330' d='M116.347 96.736c-.917-5.711-4.641-10.508-15.672-14.981-3.832-1.761-8.104-3.022-9.377-5.926-.452-1.69-.512-2.642-.226-3.665.821-3.32 4.784-4.355 7.925-3.403 2.023.678 3.938 2.237 5.093 4.724 5.402-3.498 5.391-3.475 9.163-5.879-1.381-2.141-2.118-3.129-3.022-4.045-3.249-3.629-7.676-5.498-14.756-5.355l-3.688.477c-3.534.893-6.902 2.748-8.877 5.235-5.926 6.724-4.236 18.492 2.975 23.335 7.104 5.332 17.54 6.545 18.873 11.531 1.297 6.104-4.486 8.08
46-10.234 7.378-4.236-.881-6.592-3.034-9.139-6.949-4.688 2.713-4.688 2.713-9.508 5.485 1.143 2.499 2.344 3.63 4.26 5.795 9.068 9.198 31.76 8.746 35.83-5.176.165-.478 1.261-3.666.38-8.581zM69.462 58.943H57.753l-.048 30.272c0 6.438.333 12.34-.714 14.149-1.713 3.558-6.152 3.117-8.175 2.427-2.059-1.012-3.106-2.451-4.319-4.485-.333-.584-.583-1.036-.667-1.071l-9.52 5.83c1.583 3.249 3.915 6.069 6.902 7.901 4.462 2.678 10.459 3.499 16.731 2.059 4.082-1.189 7.604-3.652 9.448-7.401 2.666-4.915 2.094-10.864 2.07-17.444.06-10.735.001-21.468.001-32.237z'/%3E%3C/svg%3E",iconStyle:{marginBottom:"0.5px",height:"11.5px"}},{name:"TypeScript",icon:"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 130 130' preserveAspectRatio='xMidYMid meet'%3E%3Cpath fill='%23fff' d='M22.67 47h99.67v73.67H22.67z'/%3E%3Cpath data-name='original' fill='%23007acc' d='M1.5 63.91v62.5h125v-125H1.5zm100.73-5a15.56 15.56 0 017.82 4.5 20.58 20.58 0 013 4c0 .16-5.4 3.81-8.69 5.85-.12.08-.6-.44-1.13-1.23a7.09 7.09 0 00-5.87-3.53c-3.79-.26-6.23 1.73-6.21 5a4.58 4.58 0 00.54 2.34c.83 1.73 2.38 2.76 7.24 4.86 8.95 3.85 12.78 6.39 15.16 10 2.66 4 3.25 10.46 1.45 15.24-2 5.2-6.9 8.73-13.83 9.9a38.32 38.32 0 01-9.52-.1 23 23 0 01-12.72-6.63c-1.15-1.27-3.39-4.58-3.25-4.82a9.34 9.34 0 011.15-.73L82 101l3.59-2.08.75 1.11a16.78 16.78 0 004.74 4.54c4 2.1 9.46 1.81 12.16-.62a5.43 5.43 0 00.69-6.92c-1-1.39-3-2.56-8.59-5-6.45-2.78-9.23-4.5-11.77-7.24a16.48 16.48 0 01-3.43-6.25 25 25 0 01-.22-8c1.33-6.23 6-10.58 12.82-11.87a31.66 31.66 0 019.49.26zm-29.34 5.24v5.12H56.66v46.23H45.15V69.26H28.88v-5a49.19 49.19 0 01.12-5.17C29.08 59 39 59 51 59h21.83z'/%3E%3C/svg%3E",iconStyle:{marginBottom:"0.5px",height:"11.5px"}}],default:"JavaScript",emptyChoices:[],alwaysShow:!1,hidden:!0,lvl:0,isBuiltIn:!0,absentChoices:[]}],children:e.jsxs(a,{choiceGroup:{name:"codeLang",choices:[{name:"JavaScript",icon:"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 130 130' preserveAspectRatio='xMidYMid meet'%3E%3Cpath fill='%23F0DB4F' d='M1.408 1.408h125.184v125.185H1.408z'/%3E%3Cpath fill='%23323330' d='M116.347 96.736c-.917-5.711-4.641-10.508-15.672-14.981-3.832-1.761-8.104-3.022-9.377-5.926-.452-1.69-.512-2.642-.226-3.665.821-3.32 4.784-4.355 7.925-3.403 2.023.678 3.938 2.237 5.093 4.724 5.402-3.498 5.391-3.475 9.163-5.879-1.381-2.141-2.118-3.129-3.022-4.045-3.249-3.629-7.676-5.498-14.756-5.355l-3.688.477c-3.534.893-6.902 2.748-8.877 5.235-5.926 6.724-4.236 18.492 2.975 23.335 7.104 5.332 17.54 6.545 18.873 11.531 1.297 6.104-4.486 8.08-10.234 7.378-4.236-.881-6.592-3.034-9.139-6.949-4.688 2.713-4.688 2.713-9.508 5.485 1.143 2.499 2.344 3.63 4.26 5.795 9.068 9.198 31.76 8.746 35.83-5.176.165-.478 1.261-3.666.38-8.581zM69.462 58.943H57.753l-.048 30.272c0 6.438.333 12.34-.714 14.149-1.713 3.558-6.152 3.117-8.175 2.427-2.059-1.012-3.106-2.451-4.319-4.485-.333-.584-.583-1.036-.667-1.071l-9.52 5.83c1.583 3.249 3.915 6.069 6.902 7.901 4.462 2.678 10.459 3.499 16.731 2.059 4.082-1.189 7.604-3.652 9.448-7.401 2.666-4.915 2.094-10.864 2.07-17.444.06-10.735.001-21.468.001-32.237z'/%3E%3C/svg%3E",iconStyle:{marginBottom:"0.5px",height:"11.5px"}},{name:"TypeScript",icon:"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 130 130' preserveAspectRatio='xMidYMid meet'%3E%3Cpath fill='%23fff' d='M22.67 47h99.67v73.67H22.67z'/%3E%3Cpath data-name='original' fill='%23007acc' d='M1.5 63.91v62.5h125v-125H1.5zm100.73-5a15.56 15.56 0 017.82 4.5 20.58 20.58 0 013 4c0 .16-5.4 3.81-8.69 5.85-.12.08-.6-.44-1.13-1.23a7.09 7.09 0 00-5.87-3.53c-3.79-.26-6.23 1.73-6.21 5a4.58 4.58 0 00.54 2.34c.83 1.73 2.38 2.76 7.24 4.86 8.95 3.85 12.78 6.39 15.16 10 2.66 4 3.25 10.46 1.45 15.24-2 5.2-6.9 8.73-13.83 9.9a38.32 38.32 0 01-9.52-.1 23 23 0 01-12.72-6.63c-1.15-1.27-3.39-4.58-3.25-4.82a9.34 9.34 0 011.15-.73L82 101l3.59-2.08.75 1.11a16.78 16.78 0 004.74 4.54c4 2.1 9.46 1.81 12.16-.62a5.43 5.43 0 00.69-6.92c-1-1.39-3-2.56-8.59-5-6.45-2.78-9.23-4.5-11.77-7.24a16.48 16.48 0 01-3.43-6.25 25 25 0 01-.22-8c1.33-6.23 6-10.58 12.82-11.87a31.66 31.66 0 019.49.26zm-29.34 5.24v5.12H56.66v46.23H45.15V69.26H28.88v-5a49.19 49.19 0 01.12-5.17C29.08 59 39 59 51 59h21.83z'/%3E%3C/svg%3E",iconStyle:{marginBottom:"0.5px",height:"11.5px"}}],default:"JavaScript",emptyChoices:[],alwaysShow:!1,hidden:!0,lvl:0,isBuiltIn:!0,absentChoices:[]},children:[e.jsx(l.div,{"data-choice-value":"JavaScript",className:"choice",children:e.jsx(l.figure,{"data-rehype-pretty-code-figure":"",children:e.jsx(l.pre,{tabIndex:"0","data-language":"jsx","data-theme":"github-light",children:e.jsxs(l.code,{"data-language":"jsx","data-theme":"github-light",style:{display:"grid"},children:[e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#6A737D"},children:"// /pages/+Page.jsx"})}),` 47`,e.jsx(l.span,{"data-line":"",children:" "}),` 48`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:"import"}),e.jsx(l.span,{style:{color:"#24292E"},children:" { usePageContext } "}),e.jsx(l.span,{style:{color:"#D73A49"},children:"from"}),e.jsx(l.span,{style:{color:"#032F62"},children:" 'vike-react/usePageContext'"}),e.jsx(l.span,{style:{color:"#6A737D"},children:" // or vike-{vue,solid}"})]}),` 49`,e.jsx(l.span,{"data-line":"",children:" "}),` 50`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:"export"}),e.jsx(l.span,{style:{color:"#D73A49"},children:" function"}),e.jsx(l.span,{style:{color:"#6F42C1"},children:" Page"}),e.jsx(l.span,{style:{color:"#24292E"}
50,children:"() {"})]}),` 51`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:" const"}),e.jsx(l.span,{style:{color:"#005CC5"},children:" pageContext"}),e.jsx(l.span,{style:{color:"#D73A49"},children:" ="}),e.jsx(l.span,{style:{color:"#6F42C1"},children:" usePageContext"}),e.jsx(l.span,{style:{color:"#24292E"},children:"()"})]}),` 52`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#6A737D"},children:" // ..."})}),` 53`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#24292E"},children:"}"})})]})})})}),e.jsx(l.div,{"data-choice-value":"TypeScript",className:"choice",children:e.jsx(l.figure,{"data-rehype-pretty-code-figure":"",children:e.jsx(l.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-light",children:e.jsxs(l.code,{"data-language":"tsx","data-theme":"github-light",style:{display:"grid"},children:[e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#6A737D"},children:"// /pages/+Page.tsx"})}),` 54`,e.jsx(l.span,{"data-line":"",children:" "}),` 55`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:"import"}),e.jsx(l.span,{style:{color:"#24292E"},children:" { usePageContext } "}),e.jsx(l.span,{style:{color:"#D73A49"},children:"from"}),e.jsx(l.span,{style:{color:"#032F62"},children:" 'vike-react/usePageContext'"}),e.jsx(l.span,{style:{color:"#6A737D"},children:" // or vike-{vue,solid}"})]}),` 56`,e.jsx(l.span,{"data-line":"",children:" "}),` 57`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:"export"}),e.jsx(l.span,{style:{color:"#D73A49"},children:" function"}),e.jsx(l.span,{style:{color:"#6F42C1"},children:" Page"}),e.jsx(l.span,{style:{color:"#24292E"},children:"() {"})]}),` 58`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:" const"}),e.jsx(l.span,{style:{color:"#005CC5"},children:" pageContext"}),e.jsx(l.span,{style:{color:"#D73A49"},children:" ="}),e.jsx(l.span,{style:{color:"#6F42C1"},children:" usePageContext"}),e.jsx(l.span,{style:{color:"#24292E"},children:"()"})]}),` 59`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#6A737D"},children:" // ..."})}),` 60`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#24292E"},children:"}"})})]})})})})]})}),` 61`,e.jsxs("h2",{id:"without-vike-react-vue-solid",children:["Without ",e.jsx("code",{children:"vike-{react,vue,solid}"})]}),` 62`,e.jsxs(l.p,{children:["Vike itself never uses the ",e.jsx(l.code,{children:"Page"})," value: it just makes the value available at ",e.jsx(l.code,{children:"pageContext.Page"}),`. 63The `,e.jsx(l.code,{children:"pageContext.Page"})," value is typically used by the ",e.jsx(n,{href:"/onRenderHtml",children:e.jsx(l.code,{children:"onRenderHtml()"})})," and ",e.jsx(n,{href:"/onRenderClient",children:e.jsx(l.code,{children:"onRenderClient()"})})," hooks: these two hooks essentially determine how the ",e.jsx(l.code,{children:"Page"})," value is rendered to HTML and the ",e.jsx(l.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model",children:"DOM"}),"."]}),` 64`,e.jsxs(l.p,{children:["The ",e.jsx(i,{})," implements the ",e.jsx(l.code,{children:"onRenderHtml()"})," and ",e.jsx(l.code,{children:"onRenderClient()"})," hooks, so that you don't have to implement them: everything just works like a regular frontend framework such as Next.js or Nuxt."]}),` 65`,e.jsxs(l.p,{children:["Instead of using ",e.jsx(i,{name:!0,noLink:!0}),", you can integrate your favorite UI framework yourself: you then have complete control over the UI framework integration."]}),` 66`,e.jsx(l.p,{children:"Here is a minimal example of manually integrating a UI framework:"}),` 67`,e.jsx(t,{choiceGroupAll:[{name:"codeLang",choices:[{name:"JavaScript",icon:"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 130 130' preserveAspectRatio='xMidYMid meet'%3E%3Cpath fill='%23F0DB4F' d='M1.408 1.408h125.184v125.185H1.408z'/%3E%3Cpath fill='%23323330' d='M116.347 96.736c-.917-5.711-4.641-10.508-15.672-14.981-3.832-1.761-8.104-3.022-9.377-5.926-.452-1.69-.512-2.642-.226-3.665.821-3.32 4.784-4.355 7.925-3.403 2.023.678 3.938 2.237 5.093 4.724 5.402-3.498 5.391-3.475 9.163-5.879-1.381-2.141-2.118-3.129-3.022-4.045-3.249-3.629-7.676-5.498-14.756-5.355l-3.688.477c-3.534.893-6.902 2.748-8.877 5.235-5.926 6.724-4.236 18.492 2.975 23.335 7.104 5.332 17.54 6.545 18.873 11.531 1.297 6.104-4.486 8.08
67-10.234 7.378-4.236-.881-6.592-3.034-9.139-6.949-4.688 2.713-4.688 2.713-9.508 5.485 1.143 2.499 2.344 3.63 4.26 5.795 9.068 9.198 31.76 8.746 35.83-5.176.165-.478 1.261-3.666.38-8.581zM69.462 58.943H57.753l-.048 30.272c0 6.438.333 12.34-.714 14.149-1.713 3.558-6.152 3.117-8.175 2.427-2.059-1.012-3.106-2.451-4.319-4.485-.333-.584-.583-1.036-.667-1.071l-9.52 5.83c1.583 3.249 3.915 6.069 6.902 7.901 4.462 2.678 10.459 3.499 16.731 2.059 4.082-1.189 7.604-3.652 9.448-7.401 2.666-4.915 2.094-10.864 2.07-17.444.06-10.735.001-21.468.001-32.237z'/%3E%3C/svg%3E",iconStyle:{marginBottom:"0.5px",height:"11.5px"}},{name:"TypeScript",icon:"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 130 130' preserveAspectRatio='xMidYMid meet'%3E%3Cpath fill='%23fff' d='M22.67 47h99.67v73.67H22.67z'/%3E%3Cpath data-name='original' fill='%23007acc' d='M1.5 63.91v62.5h125v-125H1.5zm100.73-5a15.56 15.56 0 017.82 4.5 20.58 20.58 0 013 4c0 .16-5.4 3.81-8.69 5.85-.12.08-.6-.44-1.13-1.23a7.09 7.09 0 00-5.87-3.53c-3.79-.26-6.23 1.73-6.21 5a4.58 4.58 0 00.54 2.34c.83 1.73 2.38 2.76 7.24 4.86 8.95 3.85 12.78 6.39 15.16 10 2.66 4 3.25 10.46 1.45 15.24-2 5.2-6.9 8.73-13.83 9.9a38.32 38.32 0 01-9.52-.1 23 23 0 01-12.72-6.63c-1.15-1.27-3.39-4.58-3.25-4.82a9.34 9.34 0 011.15-.73L82 101l3.59-2.08.75 1.11a16.78 16.78 0 004.74 4.54c4 2.1 9.46 1.81 12.16-.62a5.43 5.43 0 00.69-6.92c-1-1.39-3-2.56-8.59-5-6.45-2.78-9.23-4.5-11.77-7.24a16.48 16.48 0 01-3.43-6.25 25 25 0 01-.22-8c1.33-6.23 6-10.58 12.82-11.87a31.66 31.66 0 019.49.26zm-29.34 5.24v5.12H56.66v46.23H45.15V69.26H28.88v-5a49.19 49.19 0 01.12-5.17C29.08 59 39 59 51 59h21.83z'/%3E%3C/svg%3E",iconStyle:{marginBottom:"0.5px",height:"11.5px"}}],default:"JavaScript",emptyChoices:[],alwaysShow:!1,hidden:!0,lvl:0,isBuiltIn:!0,absentChoices:[]}],children:e.jsxs(a,{choiceGroup:{name:"codeLang",choices:[{name:"JavaScript",icon:"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 130 130' preserveAspectRatio='xMidYMid meet'%3E%3Cpath fill='%23F0DB4F' d='M1.408 1.408h125.184v125.185H1.408z'/%3E%3Cpath fill='%23323330' d='M116.347 96.736c-.917-5.711-4.641-10.508-15.672-14.981-3.832-1.761-8.104-3.022-9.377-5.926-.452-1.69-.512-2.642-.226-3.665.821-3.32 4.784-4.355 7.925-3.403 2.023.678 3.938 2.237 5.093 4.724 5.402-3.498 5.391-3.475 9.163-5.879-1.381-2.141-2.118-3.129-3.022-4.045-3.249-3.629-7.676-5.498-14.756-5.355l-3.688.477c-3.534.893-6.902 2.748-8.877 5.235-5.926 6.724-4.236 18.492 2.975 23.335 7.104 5.332 17.54 6.545 18.873 11.531 1.297 6.104-4.486 8.08-10.234 7.378-4.236-.881-6.592-3.034-9.139-6.949-4.688 2.713-4.688 2.713-9.508 5.485 1.143 2.499 2.344 3.63 4.26 5.795 9.068 9.198 31.76 8.746 35.83-5.176.165-.478 1.261-3.666.38-8.581zM69.462 58.943H57.753l-.048 30.272c0 6.438.333 12.34-.714 14.149-1.713 3.558-6.152 3.117-8.175 2.427-2.059-1.012-3.106-2.451-4.319-4.485-.333-.584-.583-1.036-.667-1.071l-9.52 5.83c1.583 3.249 3.915 6.069 6.902 7.901 4.462 2.678 10.459 3.499 16.731 2.059 4.082-1.189 7.604-3.652 9.448-7.401 2.666-4.915 2.094-10.864 2.07-17.444.06-10.735.001-21.468.001-32.237z'/%3E%3C/svg%3E",iconStyle:{marginBottom:"0.5px",height:"11.5px"}},{name:"TypeScript",icon:"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 130 130' preserveAspectRatio='xMidYMid meet'%3E%3Cpath fill='%23fff' d='M22.67 47h99.67v73.67H22.67z'/%3E%3Cpath data-name='original' fill='%23007acc' d='M1.5 63.91v62.5h125v-125H1.5zm100.73-5a15.56 15.56 0 017.82 4.5 20.58 20.58 0 013 4c0 .16-5.4 3.81-8.69 5.85-.12.08-.6-.44-1.13-1.23a7.09 7.09 0 00-5.87-3.53c-3.79-.26-6.23 1.73-6.21 5a4.58 4.58 0 00.54 2.34c.83 1.73 2.38 2.76 7.24 4.86 8.95 3.85 12.78 6.39 15.16 10 2.66 4 3.25 10.46 1.45 15.24-2 5.2-6.9 8.73-13.83 9.9a38.32 38.32 0 01-9.52-.1 23 23 0 01-12.72-6.63c-1.15-1.27-3.39-4.58-3.25-4.82a9.34 9.34 0 011.15-.73L82 101l3.59-2.08.75 1.11a16.78 16.78 0 004.74 4.54c4 2.1 9.46 1.81 12.16-.62a5.43 5.43 0 00.69-6.92c-1-1.39-3-2.56-8.59-5-6.45-2.78-9.23-4.5-11.77-7.24a16.48 16.48 0 01-3.43-6.25 25 25 0 01-.22-8c1.33-6.23 6-10.58 12.82-11.87a31.66 31.66 0 019.49.26zm-29.34 5.24v5.12H56.66v46.23H45.15V69.26H28.88v-5a49.19 49.19 0 01.12-5.17C29.08 59 39 59 51 59h21.83z'/%3E%3C/svg%3E",iconStyle:{marginBottom:"0.5px",height:"11.5px"}}],default:"JavaScript",emptyChoices:[],alwaysShow:!1,hidden:!0,lvl:0,isBuiltIn:!0,absentChoices:[]},children:[e.jsx(l.div,{"data-choice-value":"JavaScript",className:"choice",children:e.jsx(l.figure,{"data-rehype-pretty-code-figure":"",children:e.jsx(l.pre,{tabIndex:"0","data-language":"jsx","data-theme":"github-light",children:e.jsxs(l.code,{"data-language":"jsx","data-theme":"github-light",style:{display:"grid"},children:[e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#6A737D"},children:"// /pages/hello/+Page.js"})}),` 68`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#6A737D"},children:"// Environment: client and server (configurable)"})}),` 69`,e.jsx(l.span,{"data-line":"",children:" "}),` 70`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:"export"}),e.jsx(l.span,{style:{color:"#24292E"},children:" { Page }"})]}),` 71`,e.jsx(l.span,{"data-line":"",children:" "}),` 72`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:"function"}),e.jsx(l.span,{style:{color:"#6F42C1"},children:" Page"}),e.jsx(l.span,{style:{color:"#24292E"}
72,children:"() {"})]}),` 73`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#6A737D"},children:" // Here we export a JSX component, but we can export anything we want since Vike doesn't"})}),` 74`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#6A737D"},children:" // do anything with `Page`: it just makes it available at `pageContext.Page`."})}),` 75`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:" return"}),e.jsx(l.span,{style:{color:"#24292E"},children:" <>Hello World</>"})]}),` 76`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#24292E"},children:"}"})})]})})})}),e.jsx(l.div,{"data-choice-value":"TypeScript",className:"choice",children:e.jsx(l.figure,{"data-rehype-pretty-code-figure":"",children:e.jsx(l.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-light",children:e.jsxs(l.code,{"data-language":"tsx","data-theme":"github-light",style:{display:"grid"},children:[e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#6A737D"},children:"// /pages/hello/+Page.ts"})}),` 77`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#6A737D"},children:"// Environment: client and server (configurable)"})}),` 78`,e.jsx(l.span,{"data-line":"",children:" "}),` 79`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:"export"}),e.jsx(l.span,{style:{color:"#24292E"},children:" { Page }"})]}),` 80`,e.jsx(l.span,{"data-line":"",children:" "}),` 81`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:"function"}),e.jsx(l.span,{style:{color:"#6F42C1"},children:" Page"}),e.jsx(l.span,{style:{color:"#24292E"},children:"() {"})]}),` 82`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#6A737D"},children:" // Here we export a JSX component, but we can export anything we want since Vike doesn't"})}),` 83`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#6A737D"},children:" // do anything with `Page`: it just makes it available at `pageContext.Page`."})}),` 84`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:" return"}),e.jsx(l.span,{style:{color:"#24292E"},children:" <>Hello World</>"})]}),` 85`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#24292E"},children:"}"})})]})})})})]})}),` 86`,e.jsxs(l.blockquote,{children:[` 87`,e.jsxs(l.p,{children:["You can configure in which environment the ",e.jsx(l.code,{children:"Page"})," value is loaded by using ",e.jsx(n,{href:"/meta",children:e.jsx(l.code,{children:"meta"})}),"."]}),` 88`]}),` 89`,e.jsx(t,{choiceGroupAll:[{name:"codeLang",choices:[{name:"JavaScript",icon:"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 130 130' preserveAspectRatio='xMidYMid meet'%3E%3Cpath fill='%23F0DB4F' d='M1.408 1.408h125.184v125.185H1.408z'/%3E%3Cpath fill='%23323330' d='M116.347 96.736c-.917-5.711-4.641-10.508-15.672-14.981-3.832-1.761-8.104-3.022-9.377-5.926-.452-1.69-.512-2.642-.226-3.665.821-3.32 4.784-4.355 7.925-3.403 2.023.678 3.938 2.237 5.093 4.724 5.402-3.498 5.391-3.475 9.163-5.879-1.381-2.141-2.118-3.129-3.022-4.045-3.249-3.629-7.676-5.498-14.756-5.355l-3.688.477c-3.534.893-6.902 2.748-8.877 5.235-5.926 6.724-4.236 18.492 2.975 23.335 7.104 5.332 17.54 6.545 18.873 11.531 1.297 6.104-4.486 8.08-10.234 7.378-4.236-.881-6.592-3.034-9.139-6.949-4.688 2.713-4.688 2.713-9.508 5.485 1.143 2.499 2.344 3.63 4.26 5.795 9.068 9.198 31.76 8.746 35.83-5.176.165-.478 1.261-3.666.38-8.581zM69.462 58.943H57.753l-.048 30.272c0 6.438.333 12.34-.714 14.149-1.713 3.558-6.152 3.117-8.175 2.427-2.059-1.012-3.106-2.451-4.319-4.485-.333-.584-.583-1.036-.667-1.071l-9.52 5.83c1.583 3.249 3.915 6.069 6.902 7.901 4.462 2.678 10.459 3.499 16.731 2.059 4.082-1.189 7.604-3.652 9.448-7.401 2.666-4.915 2.094-10.864 2.07-17.444.06-10.735.001-21.468.001-32.237z'/%3E%3C/svg%3E",iconStyle:{marginBottom:"0.5px",height:"11.5px"}},{name:"TypeScript",icon:"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 130 130' preserveAspectRatio='xMidYMid meet'%3E%3Cpath fill='%23fff' d='M22.67 47h99.67v73.67H22.67z'/%3E%3Cpath data-name='original' fill='%23007acc' d='M1.5 63.91v62.5h125v-125H1.5zm100.73-5a15.56 15.56 0 017.82 4.5 20.58 20.58 0 013 4c0 .16-5.4 3.81-8.69 5.85-.12.08-.6-.44-1.13-1.23a7.09 7.09 0 00-5.87-3.53c-3.79-.26-6.23 1.73-6.21 5a4.58 4.58 0 00.54 2.34c.83 1.73 2.38 2.76 7.24 4.86 8.95 3.85 12.78 6.39 15.16 10 2.66 4 3.25 10.46 1.45 15.24-2 5.2-6.9 8.73-13.83 9.9a38.32 38.32 0 01-9.52-.1 23 23 0 01-12.72-6.63c-1.15-1.27-3.39-4.58-3.25-4.82a9.34 9.34 0 011.15-.73L82 101l3.59-2.08.75 1.11a16.78 16.78 0 004.74 4.54c4 2.1 9.46 1.81 12.16-.62a5.43 5.43 0 00.69-6.92c-1-1.39-3-2.56-8.59-5-6.45-2.78-9.23-4.5-11.77-7.24a16.48 16.48 0 01-3.43-6.25 25 25 0 01-.22-8c1.33-6.23 6-10.58 12.82-11.87a31.66 31.66 0 019.49.26zm-29.34 5.24v5.12H56.66v46.23H45.15V69.26H28.88v-5a49.19 49.19 0 01.12-5.17C29.08 59 39 59 51 59h21.83z'/%3E%3C/svg%3E",iconStyle:{marginBottom:"0.5px",height:"11.5px"}}],default:"JavaScript",emptyChoices:[],alwaysShow:!1,hidden:!1,lvl:0,isBuiltIn:!0,absentChoices:[]}],children:e.jsxs(a,{choiceGroup:{name:"codeLang",choices:[{name:"JavaScript",icon:"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 130 130' preserveAspectRatio='xMidYMid meet'%3E%3Cpath fill='%23F0DB4F' d='M1.408 1.408h125.184v125.185H1.408z'/%3E%3Cpath fill='%23323330' d='M116.347 96.736c-.917-5.711-4.641-10.508-15.672-14.981-3.832-1.761-8.104-3.022-9.377-5.926-.452-1.69-.512-2.642-.226-3.665.821-3.32 4.784-4.355 7.925-3.403 2.023.678 3.938 2.237 5.093 4.724 5.402-3.498 5.391-3.475 9.163-5.879-1.381-2.141-2.118-3.129-3.022-4.045-3.249-3.629-7.676-5.498-14.756-5.355l-3.688.477c-3.534.893-6.902 2.748-8.877 5.235-5.926 6.724-4.236 18.492 2.975 23.335 7.104 5.332 17.54 6.545 18.873 11.531 1.297 6.104-4.486 8.08
89-10.234 7.378-4.236-.881-6.592-3.034-9.139-6.949-4.688 2.713-4.688 2.713-9.508 5.485 1.143 2.499 2.344 3.63 4.26 5.795 9.068 9.198 31.76 8.746 35.83-5.176.165-.478 1.261-3.666.38-8.581zM69.462 58.943H57.753l-.048 30.272c0 6.438.333 12.34-.714 14.149-1.713 3.558-6.152 3.117-8.175 2.427-2.059-1.012-3.106-2.451-4.319-4.485-.333-.584-.583-1.036-.667-1.071l-9.52 5.83c1.583 3.249 3.915 6.069 6.902 7.901 4.462 2.678 10.459 3.499 16.731 2.059 4.082-1.189 7.604-3.652 9.448-7.401 2.666-4.915 2.094-10.864 2.07-17.444.06-10.735.001-21.468.001-32.237z'/%3E%3C/svg%3E",iconStyle:{marginBottom:"0.5px",height:"11.5px"}},{name:"TypeScript",icon:"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 130 130' preserveAspectRatio='xMidYMid meet'%3E%3Cpath fill='%23fff' d='M22.67 47h99.67v73.67H22.67z'/%3E%3Cpath data-name='original' fill='%23007acc' d='M1.5 63.91v62.5h125v-125H1.5zm100.73-5a15.56 15.56 0 017.82 4.5 20.58 20.58 0 013 4c0 .16-5.4 3.81-8.69 5.85-.12.08-.6-.44-1.13-1.23a7.09 7.09 0 00-5.87-3.53c-3.79-.26-6.23 1.73-6.21 5a4.58 4.58 0 00.54 2.34c.83 1.73 2.38 2.76 7.24 4.86 8.95 3.85 12.78 6.39 15.16 10 2.66 4 3.25 10.46 1.45 15.24-2 5.2-6.9 8.73-13.83 9.9a38.32 38.32 0 01-9.52-.1 23 23 0 01-12.72-6.63c-1.15-1.27-3.39-4.58-3.25-4.82a9.34 9.34 0 011.15-.73L82 101l3.59-2.08.75 1.11a16.78 16.78 0 004.74 4.54c4 2.1 9.46 1.81 12.16-.62a5.43 5.43 0 00.69-6.92c-1-1.39-3-2.56-8.59-5-6.45-2.78-9.23-4.5-11.77-7.24a16.48 16.48 0 01-3.43-6.25 25 25 0 01-.22-8c1.33-6.23 6-10.58 12.82-11.87a31.66 31.66 0 019.49.26zm-29.34 5.24v5.12H56.66v46.23H45.15V69.26H28.88v-5a49.19 49.19 0 01.12-5.17C29.08 59 39 59 51 59h21.83z'/%3E%3C/svg%3E",iconStyle:{marginBottom:"0.5px",height:"11.5px"}}],default:"JavaScript",emptyChoices:[],alwaysShow:!1,hidden:!1,lvl:0,isBuiltIn:!0,absentChoices:[]},children:[e.jsx(l.div,{"data-choice-value":"JavaScript",className:"choice",children:e.jsx(l.figure,{"data-rehype-pretty-code-figure":"",children:e.jsx(l.pre,{tabIndex:"0","data-language":"js","data-theme":"github-light",children:e.jsxs(l.code,{"data-language":"js","data-theme":"github-light",style:{display:"grid"},children:[e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#6A737D"},children:"// /renderer/+onRenderHtml.js"})}),` 90`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#6A737D"},children:"// Environment: server"})}),` 91`,e.jsx(l.span,{"data-line":"",children:" "}),` 92`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:"export"}),e.jsx(l.span,{style:{color:"#24292E"},children:" { onRenderHtml }"})]}),` 93`,e.jsx(l.span,{"data-line":"",children:" "}),` 94`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:"import"}),e.jsx(l.span,{style:{color:"#24292E"},children:" { escapeInject, dangerouslySkipEscape } "}),e.jsx(l.span,{style:{color:"#D73A49"},children:"from"}),e.jsx(l.span,{style:{color:"#032F62"},children:" 'vike/server'"})]}),` 95`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:"import"}),e.jsx(l.span,{style:{color:"#24292E"},children:" { renderToHtml } "}),e.jsx(l.span,{style:{color:"#D73A49"},children:"from"}),e.jsx(l.span,{style:{color:"#032F62"},children:" 'my-favorite-ui-framework/server'"})]}),` 96`,e.jsx(l.span,{"data-line":"",children:" "}),` 97`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:"async"}),e.jsx(l.span,{style:{color:"#D73A49"},children:" function"}),e.jsx(l.span,{style:{color:"#6F42C1"},children:" onRenderHtml"}),e.jsx(l.span,{style:{color:"#24292E"},children:"("}),e.jsx(l.span,{style:{color:"#E36209"},children:"pageContext"}),e.jsx(l.span,{style:{color:"#24292E"},children:") {"})]}),` 98`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#6A737D"},children:" // The Page value is available at pageContext.Page"})}),` 99`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:" const"}),e.jsx(l.span,{style:{color:"#24292E"},children:" { "}),e.jsx(l.span,{style:{color:"#005CC5"},children:"Page"}),e.jsx(l.span,{style:{color:"#24292E"},children:" } "}),e.jsx(l.span,{style:{color:"#D73A49"},children:"="}),e.jsx(l.span,{style:{color:"#24292E"},children:" pageContext"})]}),` 100`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:" const"}),e.jsx(l.span,{style:{color:"#005CC5"},children:" pageHtml"}),e.jsx(l.span,{style:{color:"#D73A49"},children:" ="}),e.jsx(l.span,{style:{color:"#D73A49"},children:" await"}),e.jsx(l.span,{style:{color:"#6F42C1"},children:" renderToHtml"}),e.jsx(l.span,{style:{color:"#24292E"},children:"(Page)"})]}),` 101`,e.jsx(l.span,{"data-line":"",children:" "}),` 102`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:" return"}),e.jsx(l.span,{style:{color:"#6F42C1"},children:" escapeInject"}),e.jsx(l.span,{style:{color:"#032F62"},children:"`<html>"})]}),` 103`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#032F62"},children:" <body>"})}),` 104`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#032F62"},children:' <div id="root">'})}),` 105`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#032F62"},children:" ${"}),e.jsx(l.span,{style:{color:"#6F42C1"},children:"dangerouslySkipEscape"}),e.jsx(l.span,{style:{color:"#032F62"},children:"("}),e.jsx(l.span,{style:{color:"#24292E"},children:"pageHtml"}),e.jsx(l.span,{style:{color:"#032F62"},children:")"}),e.jsx(l.span,{style:{color:"#032F62"},children:"}"})]}),` 106`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#032F62"},children:" </div>"})}),` 107`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#032F62"},children:" </body>"})}),` 108`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#032F62"},children:" </html>`"})}),` 109`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#24292E"},children:"}"})})]})})})}),e.jsx(l.div,{"data-choice-value":"TypeScript",className:"choice",children:e.jsx(l.figure,{"data-rehype-pretty-code-figure":"",children:e.jsx(l.pre,{tabIndex:"0","data-language":"ts","data-theme":"github-light",children:e.jsxs(l.code,{"data-language":"ts","data-theme":"github-light",style:{display:"grid"},children:[e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#6A737D"},children:"// /renderer/+onRenderHtml.ts"})}),` 110`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#6A737D"},children:"// Environment: server"})}),` 111`,e.jsx(l.span,{"data-line":"",children:" "}),` 112`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:"export"}),e.jsx(l.span,{style:{color:"#24292E"},children:" { onRenderHtml }"})]}),` 113`,e.jsx(l.span,{"data-line":"",children:" "}),` 114`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:"import"}),e.jsx(l.span,{style:{color:"#D73A49"},children:" type"}),e.jsx(l.span,{style:{color:"#24292E"},children:" { PageContextServer } "}),e.jsx(l.span,{style:{color:"#D73A49"},children:"from"}),e.jsx(l.span,{style:{color:"#032F62"},children:" 'vike/types'"})]}),` 115`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:"import"}),e.jsx(l.span,{style:{color:"#24292E"},children:" { escapeInject, dangerouslySkipEscape } "}),e.jsx(l.span,{style:{color:"#D73A49"},children:"from"}),e.jsx(l.span,{style:{color:"#032F62"},children:" 'vike/server'"})]}),` 116`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:"import"}),e.jsx(l.span,{style:{color:"#24292E"},children:" { renderToHtml } "}),e.jsx(l.span,{style:{color:"#D73A49"},children:"from"}),e.jsx(l.span,{style:{color:"#032F62"},children:" 'my-favorite-ui-framework/server'"})]}),` 117`,e.jsx(l.span,{"data-line":"",children:" "}),` 118`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:"async"}),e.jsx(l.span,{style:{color:"#D73A49"},children:" function"}),e.jsx(l.span,{style:{color:"#6F42C1"},children:" onRenderHtml"}),e.jsx(l.span,{style:{color:"#24292E"},children:"("}),e.jsx(l.span,{style:{color:"#E36209"},children:"pageContext"}),e.jsx(l.span,{style:{color:"#D73A49"},children:":"}),e.jsx(l.span,{style:{color:"#6F42C1"},children:" PageContextServer"}),e.jsx(l.span,{style:{color:"#24292E"},children:") {"})]}),` 119`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#6A737D"},children:" // The Page value is available at pageContext.Page"})}),` 120`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:" const"}),e.jsx(l.span,{style:{color:"#24292E"},children:" { "}),e.jsx(l.span,{style:{color:"#005CC5"},children:"Page"}),e.jsx(l.span,{style:{color:"#24292E"},children:" } "}),e.jsx(l.span,{style:{color:"#D73A49"},children:"="}),e.jsx(l.span,{style:{color:"#24292E"},children:" pageContext"})]}),` 121`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:" const"}),e.jsx(l.span,{style:{color:"#005CC5"},children:" pageHtml"}),e.jsx(l.span,{style:{color:"#D73A49"},children:" ="}),e.jsx(l.span,{style:{color:"#D73A49"},children:" await"}),e.jsx(l.span,{style:{color:"#6F42C1"},children:" renderToHtml"}),e.jsx(l.span,{style:{color:"#24292E"},children:"(Page)"})]}),` 122`,e.jsx(l.span,{"data-line":"",children:" "}),` 123`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:" return"}),e.jsx(l.span,{style:{color:"#6F42C1"},children:" escapeInject"}),e.jsx(l.span,{style:{color:"#032F62"},children:"`<html>"})]}),` 124`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#032F62"},children:" <body>"})}),` 125`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#032F62"},children:' <div id="root">'})}),` 126`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#032F62"},children:" ${"}),e.jsx(l.span,{style:{color:"#6F42C1"},children:"dangerouslySkipEscape"}),e.jsx(l.span,{style:{color:"#032F62"},children:"("}),e.jsx(l.span,{style:{color:"#24292E"},children:"pageHtml"}),e.jsx(l.span,{style:{color:"#032F62"},children:")"}),e.jsx(l.span,{style:{color:"#032F62"},children:"}"})]}),` 127`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#032F62"},children:" </div>"})}),` 128`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#032F62"},children:" </body>"})}),` 129`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#032F62"},children:" </html>`"})}),` 130`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#24292E"},children:"}"})})]})})})})]})}),` 131`,e.jsx(t,{choiceGroupAll:[{name:"codeLang",choices:[{name:"JavaScript",icon:"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 130 130' preserveAspectRatio='xMidYMid meet'%3E%3Cpath fill='%23F0DB4F' d='M1.408 1.408h125.184v125.185H1.408z'/%3E%3Cpath fill='%23323330' d='M116.347 96.736c-.917-5.711-4.641-10.508-15.672-14.981-3.832-1.761-8.104-3.022-9.377-5.926-.452-1.69-.512-2.642-.226-3.665.821-3.32 4.784-4.355 7.925-3.403 2.023.678 3.938 2.237 5.093 4.724 5.402-3.498 5.391-3.475 9.163-5.879-1.381-2.141-2.118-3.129-3.022-4.045-3.249-3.629-7.676-5.498-14.756-5.355l-3.688.477c-3.534.893-6.902 2.748-8.877 5.235-5.926 6.724-4.236 18.492 2.975 23.335 7.104 5.332 17.54 6.545 18.873 11.531 1.297 6.104-4.486 8.08
131-10.234 7.378-4.236-.881-6.592-3.034-9.139-6.949-4.688 2.713-4.688 2.713-9.508 5.485 1.143 2.499 2.344 3.63 4.26 5.795 9.068 9.198 31.76 8.746 35.83-5.176.165-.478 1.261-3.666.38-8.581zM69.462 58.943H57.753l-.048 30.272c0 6.438.333 12.34-.714 14.149-1.713 3.558-6.152 3.117-8.175 2.427-2.059-1.012-3.106-2.451-4.319-4.485-.333-.584-.583-1.036-.667-1.071l-9.52 5.83c1.583 3.249 3.915 6.069 6.902 7.901 4.462 2.678 10.459 3.499 16.731 2.059 4.082-1.189 7.604-3.652 9.448-7.401 2.666-4.915 2.094-10.864 2.07-17.444.06-10.735.001-21.468.001-32.237z'/%3E%3C/svg%3E",iconStyle:{marginBottom:"0.5px",height:"11.5px"}},{name:"TypeScript",icon:"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 130 130' preserveAspectRatio='xMidYMid meet'%3E%3Cpath fill='%23fff' d='M22.67 47h99.67v73.67H22.67z'/%3E%3Cpath data-name='original' fill='%23007acc' d='M1.5 63.91v62.5h125v-125H1.5zm100.73-5a15.56 15.56 0 017.82 4.5 20.58 20.58 0 013 4c0 .16-5.4 3.81-8.69 5.85-.12.08-.6-.44-1.13-1.23a7.09 7.09 0 00-5.87-3.53c-3.79-.26-6.23 1.73-6.21 5a4.58 4.58 0 00.54 2.34c.83 1.73 2.38 2.76 7.24 4.86 8.95 3.85 12.78 6.39 15.16 10 2.66 4 3.25 10.46 1.45 15.24-2 5.2-6.9 8.73-13.83 9.9a38.32 38.32 0 01-9.52-.1 23 23 0 01-12.72-6.63c-1.15-1.27-3.39-4.58-3.25-4.82a9.34 9.34 0 011.15-.73L82 101l3.59-2.08.75 1.11a16.78 16.78 0 004.74 4.54c4 2.1 9.46 1.81 12.16-.62a5.43 5.43 0 00.69-6.92c-1-1.39-3-2.56-8.59-5-6.45-2.78-9.23-4.5-11.77-7.24a16.48 16.48 0 01-3.43-6.25 25 25 0 01-.22-8c1.33-6.23 6-10.58 12.82-11.87a31.66 31.66 0 019.49.26zm-29.34 5.24v5.12H56.66v46.23H45.15V69.26H28.88v-5a49.19 49.19 0 01.12-5.17C29.08 59 39 59 51 59h21.83z'/%3E%3C/svg%3E",iconStyle:{marginBottom:"0.5px",height:"11.5px"}}],default:"JavaScript",emptyChoices:[],alwaysShow:!1,hidden:!1,lvl:0,isBuiltIn:!0,absentChoices:[]}],children:e.jsxs(a,{choiceGroup:{name:"codeLang",choices:[{name:"JavaScript",icon:"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 130 130' preserveAspectRatio='xMidYMid meet'%3E%3Cpath fill='%23F0DB4F' d='M1.408 1.408h125.184v125.185H1.408z'/%3E%3Cpath fill='%23323330' d='M116.347 96.736c-.917-5.711-4.641-10.508-15.672-14.981-3.832-1.761-8.104-3.022-9.377-5.926-.452-1.69-.512-2.642-.226-3.665.821-3.32 4.784-4.355 7.925-3.403 2.023.678 3.938 2.237 5.093 4.724 5.402-3.498 5.391-3.475 9.163-5.879-1.381-2.141-2.118-3.129-3.022-4.045-3.249-3.629-7.676-5.498-14.756-5.355l-3.688.477c-3.534.893-6.902 2.748-8.877 5.235-5.926 6.724-4.236 18.492 2.975 23.335 7.104 5.332 17.54 6.545 18.873 11.531 1.297 6.104-4.486 8.08-10.234 7.378-4.236-.881-6.592-3.034-9.139-6.949-4.688 2.713-4.688 2.713-9.508 5.485 1.143 2.499 2.344 3.63 4.26 5.795 9.068 9.198 31.76 8.746 35.83-5.176.165-.478 1.261-3.666.38-8.581zM69.462 58.943H57.753l-.048 30.272c0 6.438.333 12.34-.714 14.149-1.713 3.558-6.152 3.117-8.175 2.427-2.059-1.012-3.106-2.451-4.319-4.485-.333-.584-.583-1.036-.667-1.071l-9.52 5.83c1.583 3.249 3.915 6.069 6.902 7.901 4.462 2.678 10.459 3.499 16.731 2.059 4.082-1.189 7.604-3.652 9.448-7.401 2.666-4.915 2.094-10.864 2.07-17.444.06-10.735.001-21.468.001-32.237z'/%3E%3C/svg%3E",iconStyle:{marginBottom:"0.5px",height:"11.5px"}},{name:"TypeScript",icon:"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 130 130' preserveAspectRatio='xMidYMid meet'%3E%3Cpath fill='%23fff' d='M22.67 47h99.67v73.67H22.67z'/%3E%3Cpath data-name='original' fill='%23007acc' d='M1.5 63.91v62.5h125v-125H1.5zm100.73-5a15.56 15.56 0 017.82 4.5 20.58 20.58 0 013 4c0 .16-5.4 3.81-8.69 5.85-.12.08-.6-.44-1.13-1.23a7.09 7.09 0 00-5.87-3.53c-3.79-.26-6.23 1.73-6.21 5a4.58 4.58 0 00.54 2.34c.83 1.73 2.38 2.76 7.24 4.86 8.95 3.85 12.78 6.39 15.16 10 2.66 4 3.25 10.46 1.45 15.24-2 5.2-6.9 8.73-13.83 9.9a38.32 38.32 0 01-9.52-.1 23 23 0 01-12.72-6.63c-1.15-1.27-3.39-4.58-3.25-4.82a9.34 9.34 0 011.15-.73L82 101l3.59-2.08.75 1.11a16.78 16.78 0 004.74 4.54c4 2.1 9.46 1.81 12.16-.62a5.43 5.43 0 00.69-6.92c-1-1.39-3-2.56-8.59-5-6.45-2.78-9.23-4.5-11.77-7.24a16.48 16.48 0 01-3.43-6.25 25 25 0 01-.22-8c1.33-6.23 6-10.58 12.82-11.87a31.66 31.66 0 019.49.26zm-29.34 5.24v5.12H56.66v46.23H45.15V69.26H28.88v-5a49.19 49.19 0 01.12-5.17C29.08 59 39 59 51 59h21.83z'/%3E%3C/svg%3E",iconStyle:{marginBottom:"0.5px",height:"11.5px"}}],default:"JavaScript",emptyChoices:[],alwaysShow:!1,hidden:!1,lvl:0,isBuiltIn:!0,absentChoices:[]},children:[e.jsx(l.div,{"data-choice-value":"JavaScript",className:"choice",children:e.jsx(l.figure,{"data-rehype-pretty-code-figure":"",children:e.jsx(l.pre,{tabIndex:"0","data-language":"js","data-theme":"github-light",children:e.jsxs(l.code,{"data-language":"js","data-theme":"github-light",style:{display:"grid"},children:[e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#6A737D"},children:"// /renderer/+onRenderClient.js"})}),` 132`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#6A737D"},children:"// Environment: client"})}),` 133`,e.jsx(l.span,{"data-line":"",children:" "}),` 134`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:"export"}),e.jsx(l.span,{style:{color:"#24292E"},children:" { onRenderClient }"})]}),` 135`,e.jsx(l.span,{"data-line":"",children:" "}),` 136`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:"import"}),e.jsx(l.span,{style:{color:"#24292E"},children:" { hydrateDom } "}),e.jsx(l.span,{style:{color:"#D73A49"},children:"from"}),e.jsx(l.span,{style:{color:"#032F62"},children:" 'my-favorite-ui-framework/client'"})]}),` 137`,e.jsx(l.span,{"data-line":"",children:" "}),` 138`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:"async"}),e.jsx(l.span,{style:{color:"#D73A49"},children:" function"}),e.jsx(l.span,{style:{color:"#6F42C1"},children:" onRenderClient"}),e.jsx(l.span,{style:{color:"#24292E"},children:"("}),e.jsx(l.span,{style:{color:"#E36209"},children:"pageContext"}),e.jsx(l.span,{style:{color:"#24292E"},children:") {"})]}),` 139`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#6A737D"},children:" // pageContext.Page is also available in the browser"})}),` 140`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:" const"}),e.jsx(l.span,{style:{color:"#24292E"},children:" { "}),e.jsx(l.span,{style:{color:"#005CC5"},children:"Page"}),e.jsx(l.span,{style:{color:"#24292E"},children:" } "}),e.jsx(l.span,{style:{color:"#D73A49"},children:"="}),e.jsx(l.span,{style:{color:"#24292E"},children:" pageContext"})]}),` 141`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:" await"}),e.jsx(l.span,{style:{color:"#6F42C1"},children:" hydrateDom"}),e.jsx(l.span,{style:{color:"#24292E"},children:"(Page, document."}),e.jsx(l.span,{style:{color:"#6F42C1"},children:"getElementById"}),e.jsx(l.span,{style:{color:"#24292E"},children:"("}),e.jsx(l.span,{style:{color:"#032F62"},children:"'root'"}),e.jsx(l.span,{style:{color:"#24292E"},children:"))"})]}),` 142`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#24292E"},children:"}"})})]})})})}),e.jsx(l.div,{"data-choice-value":"TypeScript",className:"choice",children:e.jsx(l.figure,{"data-rehype-pretty-code-figure":"",children:e.jsx(l.pre,{tabIndex:"0","data-language":"ts","data-theme":"github-light",children:e.jsxs(l.code,{"data-language":"ts","data-theme":"github-light",style:{display:"grid"},children:[e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#6A737D"},children:"// /renderer/+onRenderClient.ts"})}),` 143`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#6A737D"},children:"// Environment: client"})}),` 144`,e.jsx(l.span,{"data-line":"",children:" "}),` 145`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:"export"}),e.jsx(l.span,{style:{color:"#24292E"},children:" { onRenderClient }"})]}),` 146`,e.jsx(l.span,{"data-line":"",children:" "}),` 147`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:"import"}),e.jsx(l.span,{style:{color:"#24292E"},children:" { hydrateDom } "}),e.jsx(l.span,{style:{color:"#D73A49"},children:"from"}),e.jsx(l.span,{style:{color:"#032F62"},children:" 'my-favorite-ui-framework/client'"})]}),` 148`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:"import"}),e.jsx(l.span,{style:{color:"#D73A49"},children:" type"}),e.jsx(l.span,{style:{color:"#24292E"},children:" { PageContextClient } "}),e.jsx(l.span,{style:{color:"#D73A49"},children:"from"}),e.jsx(l.span,{style:{color:"#032F62"},children:" 'vike/types'"})]}),` 149`,e.jsx(l.span,{"data-line":"",children:" "}),` 150`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:"async"}),e.jsx(l.span,{style:{color:"#D73A49"},children:" function"}),e.jsx(l.span,{style:{color:"#6F42C1"},children:" onRenderClient"}),e.jsx(l.span,{style:{color:"#24292E"},children:"("}),e.jsx(l.span,{style:{color:"#E36209"},children:"pageContext"}),e.jsx(l.span,{style:{color:"#D73A49"},children:":"}),e.jsx(l.span,{style:{color:"#6F42C1"},children:" PageContextClient"}),e.jsx(l.span,{style:{color:"#24292E"},children:") {"})]}),` 151`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#6A737D"},children:" // pageContext.Page is also available in the browser"})}),` 152`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:" const"}),e.jsx(l.span,{style:{color:"#24292E"},children:" { "}),e.jsx(l.span,{style:{color:"#005CC5"},children:"Page"}),e.jsx(l.span,{style:{color:"#24292E"},children:" } "}),e.jsx(l.span,{style:{color:"#D73A49"},children:"="}),e.jsx(l.span,{style:{color:"#24292E"},children:" pageContext"})]}),` 153`,e.jsxs(l.span,{"data-line":"",children:[e.jsx(l.span,{style:{color:"#D73A49"},children:" await"}),e.jsx(l.span,{style:{color:"#6F42C1"},children:" hydrateDom"}),e.jsx(l.span,{style:{color:"#24292E"},children:"(Page, document."}),e.jsx(l.span,{style:{color:"#6F42C1"},children:"getElementById"}),e.jsx(l.span,{style:{color:"#24292E"},children:"("}),e.jsx(l.span,{style:{color:"#032F62"},children:"'root'"}),e.jsx(l.span,{style:{color:"#24292E"},children:"))"})]}),` 154`,e.jsx(l.span,{"data-line":"",children:e.jsx(l.span,{style:{color:"#24292E"},children:"}"})})]})})})})]})}),` 155`,e.jsx("h2",{id:"see-also",children:"See also"}),` 156`,e.jsxs(l.ul,{children:[` 157`,e.jsxs(l.li,{children:[` 158`,e.jsx(n,{href:"/Layout"}),` 159`]}),` 160`,e.jsxs(l.li,{children:[` 161`,e.jsx(n,{href:"/Wrapper"}),` 162`]}),` 163`,e.jsxs(l.li,{children:[` 164`,e.jsx(n,{href:"/settings"}),` 165`]}),` 166`]})]})}function j(s={}){const{wrapper:l}={...o(),...s.components};return l?e.jsx(l,{...s,children:e.jsx(r,{...s})}):r(s)}function c(s,l){throw new Error("Expected component `"+s+"` to be defined: you likely forgot to import, pass, or provide it.")}const y=Object.freeze(Object.defineProperty({__proto__:null,default:j,pageSectionsExport:x},Symbol.toStringTag,{value:"Module"})),T={hasServerOnlyHook:{type:"computed",definedAtData:null,valueSerialized:{type:"js-serialized",value:!1}},isClientRuntimeLoaded:{type:"computed",definedAtData:null,valueSerialized:{type:"js-serialized",value:!0}},onBeforeRenderEnv:{type:"computed",definedAtData:null,valueSerialized:{type:"js-serialized",value:null}},dataEnv:{type:"computed",definedAtData:null,valueSerialized:{type:"js-serialized",value:null}},guardEnv:{type:"computed",definedAtData:null,valueSerialized:{type:"js-serialized",value:null}},onRenderClient:{type:"standard",definedAtData:{filePathToShowToUser:"@brillout/docpress/renderer/onRenderClient",fileExportPathToShowToUser:[]},valueSerialized:{type:"pointer-import",value:h}},onCreatePageContext:{type:"cumulative",definedAtData:[{filePathToShowToUser:"@brillout/docpress/renderer/onCreatePageContext",fileExportPathToShowToUser:[]}],valueSerialized:[{type:"pointer-import",value:d}]},Page:{type:"standard",definedAtData:{filePathToShowToUser:"/pages/Page/+Page.mdx",fileExportPathToShowToUser:[]},valueSerialized:{type:"plus-file",exportValues:y}},hydrationCanBeAborted:{type:"standard",definedAtData:{filePathToShowToUser:"@brillout/docpress/config",fileExportPathToShowToUser:["default","hydrationCanBeAborted"]},valueSerialized:{type:"js-serialized",value:!0}}};export{T as configValuesSerialized};
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.