nuxt-og-image 1.0.0-beta.1 → 1.0.0-beta.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -0
- package/dist/client/200.html +2 -2
- package/dist/client/404.html +2 -2
- package/dist/client/_nuxt/{Icon.4a9650c6.js → Icon.a3c98859.js} +1 -1
- package/dist/client/_nuxt/entry.2a315a2c.js +4 -0
- package/dist/client/_nuxt/{entry.0827acf4.css → entry.dc5450bf.css} +1 -1
- package/dist/client/_nuxt/{error-404.556d8899.js → error-404.0c49154a.js} +1 -1
- package/dist/client/_nuxt/{error-500.70731718.js → error-500.f3eec0bb.js} +1 -1
- package/dist/client/_nuxt/{error-component.418ebd67.js → error-component.7c753c74.js} +2 -2
- package/dist/client/index.html +2 -2
- package/dist/module.d.ts +8 -8
- package/dist/module.json +1 -1
- package/dist/module.mjs +45 -29
- package/dist/runtime/components/{OgImageTemplate.island.vue → OgImageBasic.island.vue} +2 -2
- package/dist/runtime/components/OgImageDynamic.d.ts +2 -2
- package/dist/runtime/components/OgImageScreenshot.d.ts +2 -2
- package/dist/runtime/components/OgImageStatic.d.ts +2 -2
- package/dist/runtime/composables/defineOgImage.d.ts +5 -5
- package/dist/runtime/composables/defineOgImage.mjs +11 -6
- package/dist/runtime/nitro/providers/browser.mjs +7 -8
- package/dist/runtime/nitro/providers/{satori.d.ts → satori/index.d.ts} +1 -1
- package/dist/runtime/nitro/providers/satori/index.mjs +48 -0
- package/dist/runtime/nitro/providers/satori/plugins/emojis.d.ts +2 -0
- package/dist/runtime/nitro/providers/satori/plugins/emojis.mjs +13 -0
- package/dist/runtime/nitro/providers/satori/plugins/flex.d.ts +2 -0
- package/dist/runtime/nitro/providers/satori/plugins/flex.mjs +11 -0
- package/dist/runtime/nitro/providers/satori/plugins/imageSrc.d.ts +2 -0
- package/dist/runtime/nitro/providers/satori/plugins/imageSrc.mjs +24 -0
- package/dist/runtime/nitro/providers/satori/plugins/twClasses.d.ts +2 -0
- package/dist/runtime/nitro/providers/satori/plugins/twClasses.mjs +9 -0
- package/dist/runtime/nitro/providers/satori/utils.d.ts +10 -0
- package/dist/runtime/nitro/providers/satori/utils.mjs +33 -0
- package/dist/runtime/nitro/routes/__og_image__/html.mjs +42 -12
- package/dist/runtime/nitro/routes/__og_image__/index.mjs +4 -4
- package/dist/runtime/nitro/routes/__og_image__/og.png.mjs +8 -12
- package/dist/runtime/nitro/routes/__og_image__/options.d.ts +5 -0
- package/dist/runtime/nitro/routes/__og_image__/{payload.mjs → options.mjs} +21 -28
- package/dist/runtime/nitro/routes/__og_image__/svg.mjs +5 -5
- package/dist/runtime/nitro/routes/__og_image__/vnode.d.ts +2 -0
- package/dist/runtime/nitro/routes/__og_image__/vnode.mjs +16 -0
- package/dist/runtime/nitro/utils.d.ts +3 -3
- package/dist/runtime/nitro/utils.mjs +4 -4
- package/package.json +3 -2
- package/dist/client/_nuxt/entry.ce848650.js +0 -4
- package/dist/runtime/nitro/providers/satori.mjs +0 -48
- package/dist/runtime/nitro/routes/__og_image__/payload.d.ts +0 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--nui-c-context:125,125,125}html{background-color:#fff}html.dark{background-color:#222;color:#fff;color-scheme:dark}*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}*,:after,:before{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 transparent;--un-ring-shadow:0 0 transparent;--un-shadow-inset: ;--un-shadow:0 0 transparent;--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 transparent;--un-ring-shadow:0 0 transparent;--un-shadow-inset: ;--un-shadow:0 0 transparent;--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }.carbon-sun{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' display='inline-block' vertical-align='middle' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6ZM5.394 6.813L6.81 5.399l3.505 3.506L8.9 10.319zM2 15.005h5v2H2zm3.394 10.193L8.9 21.692l1.414 1.414l-3.505 3.506zM15 25.005h2v5h-2zm6.687-1.9l1.414-1.414l3.506 3.506l-1.414 1.414zm3.313-8.1h5v2h-5zm-3.313-6.101l3.506-3.506l1.414 1.414l-3.506 3.506zM15 2.005h2v5h-2z'/%3E%3C/svg%3E");background-color:currentColor;color:inherit;display:inline-block;height:1.2em;-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;vertical-align:middle;width:1.2em}.dark .dark\:carbon-moon{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' display='inline-block' vertical-align='middle' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3Z'/%3E%3C/svg%3E");background-color:currentColor;color:inherit;display:inline-block;height:1.2em;-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;vertical-align:middle;width:1.2em}.logos-chrome{background:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 257' display='inline-block' vertical-align='middle' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cdefs%3E%3ClinearGradient id='logosChrome0' x1='49.998%25' x2='49.998%25' y1='.706%25' y2='96.99%25'%3E%3Cstop offset='0%25' stop-color='%2386BBE5'/%3E%3Cstop offset='100%25' stop-color='%231072BA'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='%23EF3F36' d='M127.789.035s75.32-3.38 115.253 72.328H121.38s-22.96-.74-42.573 27.114c-5.634 11.691-11.69 23.734-4.894 47.468c-9.79-16.586-51.975-90.04-51.975-90.04S51.693 3.028 127.788.035Z'/%3E%3Cpath fill='%23FCD900' d='M239.133 192.229s-34.756 66.94-120.253 63.63c10.564-18.276 60.848-105.358 60.848-105.358s12.149-19.508-2.183-50.425c-7.29-10.74-14.72-21.973-38.664-27.96c19.262-.175 103.95 0 103.95 0s31.726 52.715-3.698 120.113Z'/%3E%3Cpath fill='%2361BC5B' d='M16.973 192.757s-40.601-63.56 5.035-135.958c10.529 18.276 60.813 105.358 60.813 105.358s10.846 20.283 44.756 23.31c12.924-.95 26.375-1.76 43.56-19.472C161.663 182.757 119.16 256 119.16 256s-61.552 1.127-102.188-63.243Z'/%3E%3Cpath fill='%235AB055' d='m118.845 256.493l17.113-71.412s18.804-1.48 34.58-18.769c-9.79 17.22-51.693 90.181-51.693 90.181Z'/%3E%3Cpath fill='%23FFF' d='M70.462 129.056c0-31.48 25.53-57.01 57.01-57.01c31.48 0 57.01 25.53 57.01 57.01c0 31.481-25.53 57.01-57.01 57.01c-31.48-.035-57.01-25.529-57.01-57.01Z'/%3E%3Cpath fill='url(%23logosChrome0)' d='M80.004 129.056c0-26.198 21.234-47.467 47.468-47.467c26.198 0 47.467 21.234 47.467 47.467c0 26.199-21.233 47.468-47.467 47.468c-26.199 0-47.468-21.269-47.468-47.468Z'/%3E%3Cpath fill='%23EACA05' d='m242.795 72.152l-70.462 20.67s-10.634-15.6-33.487-20.67c19.825-.106 103.949 0 103.949 0Z'/%3E%3Cpath fill='%23DF3A32' d='M72.54 144.339c-9.896-17.149-50.602-87.434-50.602-87.434l52.186 51.622s-5.353 11.022-3.345 26.797l1.76 9.015Z'/%3E%3C/svg%3E") no-repeat;background-color:transparent;background-size:100% 100%;display:inline-block;height:1.2em;vertical-align:middle;width:1.2em}.logos-vercel-icon{background:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 222' display='inline-block' vertical-align='middle' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='m128 0l128 221.705H0z'/%3E%3C/svg%3E") no-repeat;background-color:transparent;background-size:100% 100%;display:inline-block;height:1.2em;vertical-align:middle;width:1.2em}.logos-vue{background:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 221' display='inline-block' vertical-align='middle' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%2341B883' d='M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z'/%3E%3Cpath fill='%2341B883' d='m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z'/%3E%3Cpath fill='%2335495E' d='M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z'/%3E%3C/svg%3E") no-repeat;background-color:transparent;background-size:100% 100%;display:inline-block;height:1.2em;vertical-align:middle;width:1.2em}.n-button-icon{font-size:1.1em;margin-left:-.2em;margin-right:.2em}.n-button-base{grid-gap:.25rem;--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color,rgba(0,0,0,.05));align-items:center;border-color:#9ca3af80;border-radius:.25rem;border-width:1px;box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow);display:inline-flex;gap:.25rem;opacity:.8;outline:2px solid transparent!important;outline-offset:2px!important;padding:.25em 1em}.hover\:n-button-hover:hover{border-color:rgba(var(--nui-c-context),1)!important;color:rgba(var(--nui-c-context),1);opacity:1}[n~=borderless]{--un-shadow:0 0 var(--un-shadow-color,transparent)!important;border-style:none!important;box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)!important}.active\:n-button-active:active{--un-ring-width:3px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);--un-ring-color:rgba(var(--nui-c-context),.1);background-color:rgba(var(--nui-c-context),.05);box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.focus-visible\:n-focus-base:focus-visible{--un-ring-width:2px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);--un-ring-color:rgba(var(--nui-c-context),.5);box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.n-transition{transition-duration:.15s;transition-duration:.2s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.fixed{position:fixed}.-bottom-1\/2{bottom:-50%}.left-0{left:0}.right-0{right:0}.z-10{z-index:10}.z-20{z-index:20}.grid{display:grid}.m-0{margin:0}.mx-3{margin-left:.75rem;margin-right:.75rem}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-16{margin-bottom:4rem}.mb-2,[mb-2=""]{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mr-2,[mr-2=""]{margin-right:.5rem}.mt-2{margin-top:.5rem}.block,[block=""]{display:block}.inline-block{display:inline-block}.hidden{display:none}.h-1\/2{height:50%}.h-7,[h-7=""]{height:1.75rem}.h-auto{height:auto}.h-screen{height:100vh}.h1,[h1=""]{height:.25rem}.max-h-full{max-height:100%}.max-w-520px{max-width:520px}.min-h-screen{min-height:100vh}.w-7,[w-7=""]{width:1.75rem}.w-full{width:100%}.flex,[flex=""]{display:flex}.flex-1{flex:1 1 0%}.flex-col,[flex-col=""]{flex-direction:column}.cursor-pointer{cursor:pointer}.place-content-center{place-content:center}.items-start{align-items:flex-start}.items-center,[items-center=""]{align-items:center}.justify-center,[justify-center=""]{justify-content:center}.justify-between{justify-content:space-between}.space-x-1>:not([hidden])~:not([hidden]){--un-space-x-reverse:0;margin-left:calc(.25rem*(1 - var(--un-space-x-reverse)));margin-right:calc(.25rem*var(--un-space-x-reverse))}.space-x-5>:not([hidden])~:not([hidden]),[space-x-5=""]>:not([hidden])~:not([hidden]){--un-space-x-reverse:0;margin-left:calc(1.25rem*(1 - var(--un-space-x-reverse)));margin-right:calc(1.25rem*var(--un-space-x-reverse))}.space-x-6>:not([hidden])~:not([hidden]){--un-space-x-reverse:0;margin-left:calc(1.5rem*(1 - var(--un-space-x-reverse)));margin-right:calc(1.5rem*var(--un-space-x-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.border-2{border-width:2px}.border-dark-900\/30{border-color:#0f0f0f4d}.border-light-700{--un-border-opacity:1;border-color:rgba(233,236,239,var(--un-border-opacity))}.dark .dark\:border-dark-800{--un-border-opacity:1;border-color:rgba(24,24,24,var(--un-border-opacity))}.rounded{border-radius:.25rem}.rounded-full,[rounded-full=""]{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.rounded-t-md{border-top-left-radius:.375rem;border-top-right-radius:.375rem}.dark .dark\:border-none{border-style:none}.bg-black\/5{background-color:#0000000d}.bg-light-200{--un-bg-opacity:1;background-color:rgba(250,250,250,var(--un-bg-opacity))}.bg-light-500{--un-bg-opacity:1;background-color:rgba(242,242,242,var(--un-bg-opacity))}.bg-light-900{--un-bg-opacity:1;background-color:rgba(221,225,227,var(--un-bg-opacity))}.bg-white{--un-bg-opacity:1;background-color:rgba(255,255,255,var(--un-bg-opacity))}.dark .dark\:bg-black{--un-bg-opacity:1;background-color:rgba(0,0,0,var(--un-bg-opacity))}.dark .dark\:bg-dark-200{--un-bg-opacity:1;background-color:rgba(50,50,50,var(--un-bg-opacity))}.dark .dark\:bg-dark-300{--un-bg-opacity:1;background-color:rgba(45,45,45,var(--un-bg-opacity))}.dark .dark\:bg-dark-800{--un-bg-opacity:1;background-color:rgba(24,24,24,var(--un-bg-opacity))}.dark .dark\:bg-dark-900{--un-bg-opacity:1;background-color:rgba(15,15,15,var(--un-bg-opacity))}.dark .dark\:bg-dark-900\/20{background-color:#0f0f0f33}.dark .dark\:bg-white\/10{background-color:#ffffff1a}.hover\:bg-blue-200:hover{--un-bg-opacity:1;background-color:rgba(191,219,254,var(--un-bg-opacity))}.p-0,[p-0=""]{padding:0}.p-1{padding:.25rem}.p-8{padding:2rem}.px,.px-4{padding-left:1rem;padding-right:1rem}.px-10{padding-left:2.5rem;padding-right:2.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-8{padding-left:2rem;padding-right:2rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-2\.5{padding-bottom:.625rem;padding-top:.625rem}.py-5{padding-bottom:1.25rem;padding-top:1.25rem}.py-7{padding-bottom:1.75rem;padding-top:1.75rem}.pb-1{padding-bottom:.25rem}.pb-7,[pb-7=""]{padding-bottom:1.75rem}.pt-14{padding-top:3.5rem}.pt-2{padding-top:.5rem}.text-center{text-align:center}.font-sans{font-family:Avenir,Helvetica,Arial,sans-serif}.text-6xl{font-size:3.75rem;line-height:1}.text-8xl{font-size:6rem;line-height:1}.text-decoration\:inherit{line-height:inherit}.text-sm,[text-sm=""]{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs,[text-xs=""]{font-size:.75rem;line-height:1rem}.font-light{font-weight:300}.font-medium{font-weight:500}.leading-5{line-height:1.25rem}.leading-tight{line-height:1.25}.dark .dark\:text-light{--un-text-opacity:1;color:rgba(246,246,246,var(--un-text-opacity))}.dark .dark\:text-light-100{--un-text-opacity:1;color:rgba(252,252,252,var(--un-text-opacity))}.dark .dark\:text-light-900{--un-text-opacity:1;color:rgba(221,225,227,var(--un-text-opacity))}.dark .dark\:text-white{--un-text-opacity:1;color:rgba(255,255,255,var(--un-text-opacity))}.text-black{--un-text-opacity:1;color:rgba(0,0,0,var(--un-text-opacity))}.text-blue-900\/70{color:#1e3a8ab3}.text-dark-200{--un-text-opacity:1;color:rgba(50,50,50,var(--un-text-opacity))}.text-dark-700{--un-text-opacity:1;color:rgba(27,27,27,var(--un-text-opacity))}.text-dark-800{--un-text-opacity:1;color:rgba(24,24,24,var(--un-text-opacity))}.underline{text-decoration-line:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:grayscale}.op50,.op50\:,.opacity-50,[op50=""]{opacity:.5}.opacity-60,[opacity-60=""]{opacity:.6}.opacity-80,[opacity-80=""]{opacity:.8}.shadow{--un-shadow:var(--un-shadow-inset) 0 1px 3px 0 var(--un-shadow-color,rgba(0,0,0,.1)),var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color,rgba(0,0,0,.1));box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--un-ring-width:2px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.ring-offset-2{--un-ring-offset-width:2px}.ring-white{--un-ring-opacity:1;--un-ring-color:rgba(255,255,255,var(--un-ring-opacity))}.ring-opacity-60{--un-ring-opacity:.6}.ring-offset-blue-400{--un-ring-offset-opacity:1;--un-ring-offset-color:rgba(96,165,250,var(--un-ring-offset-opacity))}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}[n~=lg]{font-size:1.125rem;line-height:1.75rem}.n-disabled\:n-disabled[disabled],[disabled] .n-disabled\:n-disabled{filter:saturate(0);opacity:.4;pointer-events:none}@media (min-width:640px){.sm\:px-0{padding-left:0;padding-right:0}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:py-3{padding-bottom:.75rem;padding-top:.75rem}.sm\:text-2xl{font-size:1.5rem;line-height:2rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-8xl{font-size:6rem;line-height:1}.sm\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:1280px){[xl\:hidden=""]{display:none}}@media (min-width:1536px){.\32xl\:mx-auto{margin-left:auto;margin-right:auto}.\32xl\:mb-8{margin-bottom:2rem}.\32xl\:block{display:block}.\32xl\:hidden{display:none}.\32xl\:h-full{height:100%}.\32xl\:w-1205px{width:1205px}.\32xl\:flex{display:flex}.\32xl\:flex-row{flex-direction:row}.\32xl\:space-x-0>:not([hidden])~:not([hidden]){--un-space-x-reverse:0;margin-left:calc(0rem*(1 - var(--un-space-x-reverse)));margin-right:calc(0rem*var(--un-space-x-reverse))}.\32xl\:space-y-4>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-bottom:calc(1rem*var(--un-space-y-reverse));margin-top:calc(1rem*(1 - var(--un-space-y-reverse)))}.\32xl\:px-10{padding-left:2.5rem;padding-right:2.5rem}.\32xl\:py-7{padding-bottom:1.75rem;padding-top:1.75rem}}iframe[data-v-aa5b40b2]{aspect-ratio:40/21;max-width:1200px;transition:.4s;width:100%}img[data-v-e284dbf4]{aspect-ratio:40/21;max-width:1200px;transition:.4s ease-in-out}.tab-panels{width:100%}div[role=tabpanel]{display:flex;width:100%}
|
|
1
|
+
:root{--nui-c-context:125,125,125}html{background-color:#fff}html.dark{background-color:#222;color:#fff;color-scheme:dark}*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}*,:after,:before{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 transparent;--un-ring-shadow:0 0 transparent;--un-shadow-inset: ;--un-shadow:0 0 transparent;--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 transparent;--un-ring-shadow:0 0 transparent;--un-shadow-inset: ;--un-shadow:0 0 transparent;--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }.carbon-sun{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' display='inline-block' vertical-align='middle' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6ZM5.394 6.813L6.81 5.399l3.505 3.506L8.9 10.319zM2 15.005h5v2H2zm3.394 10.193L8.9 21.692l1.414 1.414l-3.505 3.506zM15 25.005h2v5h-2zm6.687-1.9l1.414-1.414l3.506 3.506l-1.414 1.414zm3.313-8.1h5v2h-5zm-3.313-6.101l3.506-3.506l1.414 1.414l-3.506 3.506zM15 2.005h2v5h-2z'/%3E%3C/svg%3E");background-color:currentColor;color:inherit;display:inline-block;height:1.2em;-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;vertical-align:middle;width:1.2em}.dark .dark\:carbon-moon{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' display='inline-block' vertical-align='middle' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3Z'/%3E%3C/svg%3E");background-color:currentColor;color:inherit;display:inline-block;height:1.2em;-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;vertical-align:middle;width:1.2em}.logos-chrome{background:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 257' display='inline-block' vertical-align='middle' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cdefs%3E%3ClinearGradient id='logosChrome0' x1='49.998%25' x2='49.998%25' y1='.706%25' y2='96.99%25'%3E%3Cstop offset='0%25' stop-color='%2386BBE5'/%3E%3Cstop offset='100%25' stop-color='%231072BA'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='%23EF3F36' d='M127.789.035s75.32-3.38 115.253 72.328H121.38s-22.96-.74-42.573 27.114c-5.634 11.691-11.69 23.734-4.894 47.468c-9.79-16.586-51.975-90.04-51.975-90.04S51.693 3.028 127.788.035Z'/%3E%3Cpath fill='%23FCD900' d='M239.133 192.229s-34.756 66.94-120.253 63.63c10.564-18.276 60.848-105.358 60.848-105.358s12.149-19.508-2.183-50.425c-7.29-10.74-14.72-21.973-38.664-27.96c19.262-.175 103.95 0 103.95 0s31.726 52.715-3.698 120.113Z'/%3E%3Cpath fill='%2361BC5B' d='M16.973 192.757s-40.601-63.56 5.035-135.958c10.529 18.276 60.813 105.358 60.813 105.358s10.846 20.283 44.756 23.31c12.924-.95 26.375-1.76 43.56-19.472C161.663 182.757 119.16 256 119.16 256s-61.552 1.127-102.188-63.243Z'/%3E%3Cpath fill='%235AB055' d='m118.845 256.493l17.113-71.412s18.804-1.48 34.58-18.769c-9.79 17.22-51.693 90.181-51.693 90.181Z'/%3E%3Cpath fill='%23FFF' d='M70.462 129.056c0-31.48 25.53-57.01 57.01-57.01c31.48 0 57.01 25.53 57.01 57.01c0 31.481-25.53 57.01-57.01 57.01c-31.48-.035-57.01-25.529-57.01-57.01Z'/%3E%3Cpath fill='url(%23logosChrome0)' d='M80.004 129.056c0-26.198 21.234-47.467 47.468-47.467c26.198 0 47.467 21.234 47.467 47.467c0 26.199-21.233 47.468-47.467 47.468c-26.199 0-47.468-21.269-47.468-47.468Z'/%3E%3Cpath fill='%23EACA05' d='m242.795 72.152l-70.462 20.67s-10.634-15.6-33.487-20.67c19.825-.106 103.949 0 103.949 0Z'/%3E%3Cpath fill='%23DF3A32' d='M72.54 144.339c-9.896-17.149-50.602-87.434-50.602-87.434l52.186 51.622s-5.353 11.022-3.345 26.797l1.76 9.015Z'/%3E%3C/svg%3E") no-repeat;background-color:transparent;background-size:100% 100%;display:inline-block;height:1.2em;vertical-align:middle;width:1.2em}.logos-vercel-icon{background:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 222' display='inline-block' vertical-align='middle' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='m128 0l128 221.705H0z'/%3E%3C/svg%3E") no-repeat;background-color:transparent;background-size:100% 100%;display:inline-block;height:1.2em;vertical-align:middle;width:1.2em}.logos-vue{background:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 221' display='inline-block' vertical-align='middle' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%2341B883' d='M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z'/%3E%3Cpath fill='%2341B883' d='m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z'/%3E%3Cpath fill='%2335495E' d='M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z'/%3E%3C/svg%3E") no-repeat;background-color:transparent;background-size:100% 100%;display:inline-block;height:1.2em;vertical-align:middle;width:1.2em}.n-button-icon{font-size:1.1em;margin-left:-.2em;margin-right:.2em}.n-button-base{grid-gap:.25rem;--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color,rgba(0,0,0,.05));align-items:center;border-color:#9ca3af80;border-radius:.25rem;border-width:1px;box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow);display:inline-flex;gap:.25rem;opacity:.8;outline:2px solid transparent!important;outline-offset:2px!important;padding:.25em 1em}.hover\:n-button-hover:hover{border-color:rgba(var(--nui-c-context),1)!important;color:rgba(var(--nui-c-context),1);opacity:1}[n~=borderless]{--un-shadow:0 0 var(--un-shadow-color,transparent)!important;border-style:none!important;box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)!important}.active\:n-button-active:active{--un-ring-width:3px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);--un-ring-color:rgba(var(--nui-c-context),.1);background-color:rgba(var(--nui-c-context),.05);box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.focus-visible\:n-focus-base:focus-visible{--un-ring-width:2px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);--un-ring-color:rgba(var(--nui-c-context),.5);box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.n-transition{transition-duration:.15s;transition-duration:.2s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.fixed{position:fixed}.-bottom-1\/2{bottom:-50%}.left-0{left:0}.right-0{right:0}.z-10{z-index:10}.z-20{z-index:20}.grid{display:grid}.m-0{margin:0}.mx-3{margin-left:.75rem;margin-right:.75rem}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-16{margin-bottom:4rem}.mb-2,[mb-2=""]{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mr-2,[mr-2=""]{margin-right:.5rem}.mt-2{margin-top:.5rem}.mt-5{margin-top:1.25rem}.block,[block=""]{display:block}.inline-block{display:inline-block}.hidden{display:none}.h-1\/2{height:50%}.h-7,[h-7=""]{height:1.75rem}.h-auto{height:auto}.h-screen{height:100vh}.h1,[h1=""]{height:.25rem}.max-h-full{max-height:100%}.max-w-520px{max-width:520px}.min-h-screen{min-height:100vh}.w-7,[w-7=""]{width:1.75rem}.w-full{width:100%}.flex,[flex=""]{display:flex}.flex-1{flex:1 1 0%}.flex-col,[flex-col=""]{flex-direction:column}.cursor-pointer{cursor:pointer}.place-content-center{place-content:center}.items-start{align-items:flex-start}.items-center,[items-center=""]{align-items:center}.justify-center,[justify-center=""]{justify-content:center}.justify-between{justify-content:space-between}.space-x-1>:not([hidden])~:not([hidden]){--un-space-x-reverse:0;margin-left:calc(.25rem*(1 - var(--un-space-x-reverse)));margin-right:calc(.25rem*var(--un-space-x-reverse))}.space-x-5>:not([hidden])~:not([hidden]),[space-x-5=""]>:not([hidden])~:not([hidden]){--un-space-x-reverse:0;margin-left:calc(1.25rem*(1 - var(--un-space-x-reverse)));margin-right:calc(1.25rem*var(--un-space-x-reverse))}.space-x-6>:not([hidden])~:not([hidden]){--un-space-x-reverse:0;margin-left:calc(1.5rem*(1 - var(--un-space-x-reverse)));margin-right:calc(1.5rem*var(--un-space-x-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.border-2{border-width:2px}.border-dark-900\/30{border-color:#0f0f0f4d}.border-light-700{--un-border-opacity:1;border-color:rgba(233,236,239,var(--un-border-opacity))}.dark .dark\:border-dark-800{--un-border-opacity:1;border-color:rgba(24,24,24,var(--un-border-opacity))}.rounded{border-radius:.25rem}.rounded-full,[rounded-full=""]{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.rounded-t-md{border-top-left-radius:.375rem;border-top-right-radius:.375rem}.dark .dark\:border-none{border-style:none}.bg-black\/5{background-color:#0000000d}.bg-light-200{--un-bg-opacity:1;background-color:rgba(250,250,250,var(--un-bg-opacity))}.bg-light-500{--un-bg-opacity:1;background-color:rgba(242,242,242,var(--un-bg-opacity))}.bg-light-900{--un-bg-opacity:1;background-color:rgba(221,225,227,var(--un-bg-opacity))}.bg-white{--un-bg-opacity:1;background-color:rgba(255,255,255,var(--un-bg-opacity))}.dark .dark\:bg-black{--un-bg-opacity:1;background-color:rgba(0,0,0,var(--un-bg-opacity))}.dark .dark\:bg-dark-200{--un-bg-opacity:1;background-color:rgba(50,50,50,var(--un-bg-opacity))}.dark .dark\:bg-dark-300{--un-bg-opacity:1;background-color:rgba(45,45,45,var(--un-bg-opacity))}.dark .dark\:bg-dark-800{--un-bg-opacity:1;background-color:rgba(24,24,24,var(--un-bg-opacity))}.dark .dark\:bg-dark-900{--un-bg-opacity:1;background-color:rgba(15,15,15,var(--un-bg-opacity))}.dark .dark\:bg-dark-900\/20{background-color:#0f0f0f33}.dark .dark\:bg-white\/10{background-color:#ffffff1a}.hover\:bg-blue-200:hover{--un-bg-opacity:1;background-color:rgba(191,219,254,var(--un-bg-opacity))}.p-0,[p-0=""]{padding:0}.p-1{padding:.25rem}.p-8{padding:2rem}.px,.px-4{padding-left:1rem;padding-right:1rem}.px-10{padding-left:2.5rem;padding-right:2.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-8{padding-left:2rem;padding-right:2rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-2\.5{padding-bottom:.625rem;padding-top:.625rem}.py-5{padding-bottom:1.25rem;padding-top:1.25rem}.py-7{padding-bottom:1.75rem;padding-top:1.75rem}.pb-1{padding-bottom:.25rem}.pb-7,[pb-7=""]{padding-bottom:1.75rem}.pt-14{padding-top:3.5rem}.pt-2{padding-top:.5rem}.text-center{text-align:center}.font-sans{font-family:Avenir,Helvetica,Arial,sans-serif}.text-6xl{font-size:3.75rem;line-height:1}.text-8xl{font-size:6rem;line-height:1}.text-decoration\:inherit{line-height:inherit}.text-sm,[text-sm=""]{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs,[text-xs=""]{font-size:.75rem;line-height:1rem}.font-light{font-weight:300}.font-medium{font-weight:500}.leading-5{line-height:1.25rem}.leading-tight{line-height:1.25}.dark .dark\:text-light{--un-text-opacity:1;color:rgba(246,246,246,var(--un-text-opacity))}.dark .dark\:text-light-100{--un-text-opacity:1;color:rgba(252,252,252,var(--un-text-opacity))}.dark .dark\:text-light-900{--un-text-opacity:1;color:rgba(221,225,227,var(--un-text-opacity))}.dark .dark\:text-white{--un-text-opacity:1;color:rgba(255,255,255,var(--un-text-opacity))}.text-black{--un-text-opacity:1;color:rgba(0,0,0,var(--un-text-opacity))}.text-blue-900\/70{color:#1e3a8ab3}.text-dark-200{--un-text-opacity:1;color:rgba(50,50,50,var(--un-text-opacity))}.text-dark-700{--un-text-opacity:1;color:rgba(27,27,27,var(--un-text-opacity))}.text-dark-800{--un-text-opacity:1;color:rgba(24,24,24,var(--un-text-opacity))}.underline{text-decoration-line:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:grayscale}.op50,.op50\:,.opacity-50,[op50=""]{opacity:.5}.opacity-60,[opacity-60=""]{opacity:.6}.opacity-80,[opacity-80=""]{opacity:.8}.shadow{--un-shadow:var(--un-shadow-inset) 0 1px 3px 0 var(--un-shadow-color,rgba(0,0,0,.1)),var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color,rgba(0,0,0,.1));box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--un-ring-width:2px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.ring-offset-2{--un-ring-offset-width:2px}.ring-white{--un-ring-opacity:1;--un-ring-color:rgba(255,255,255,var(--un-ring-opacity))}.ring-opacity-60{--un-ring-opacity:.6}.ring-offset-blue-400{--un-ring-offset-opacity:1;--un-ring-offset-color:rgba(96,165,250,var(--un-ring-offset-opacity))}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}[n~=lg]{font-size:1.125rem;line-height:1.75rem}.n-disabled\:n-disabled[disabled],[disabled] .n-disabled\:n-disabled{filter:saturate(0);opacity:.4;pointer-events:none}@media (min-width:640px){.sm\:px-0{padding-left:0;padding-right:0}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:py-3{padding-bottom:.75rem;padding-top:.75rem}.sm\:text-2xl{font-size:1.5rem;line-height:2rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-8xl{font-size:6rem;line-height:1}.sm\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:1280px){[xl\:hidden=""]{display:none}}@media (min-width:1536px){.\32xl\:mx-auto{margin-left:auto;margin-right:auto}.\32xl\:mb-8{margin-bottom:2rem}.\32xl\:block{display:block}.\32xl\:hidden{display:none}.\32xl\:h-full{height:100%}.\32xl\:w-1205px{width:1205px}.\32xl\:flex{display:flex}.\32xl\:flex-row{flex-direction:row}.\32xl\:space-x-0>:not([hidden])~:not([hidden]){--un-space-x-reverse:0;margin-left:calc(0rem*(1 - var(--un-space-x-reverse)));margin-right:calc(0rem*var(--un-space-x-reverse))}.\32xl\:space-y-4>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-bottom:calc(1rem*var(--un-space-y-reverse));margin-top:calc(1rem*(1 - var(--un-space-y-reverse)))}.\32xl\:px-10{padding-left:2.5rem;padding-right:2.5rem}.\32xl\:py-7{padding-bottom:1.75rem;padding-top:1.75rem}}iframe[data-v-aa5b40b2]{aspect-ratio:40/21;max-width:1200px;transition:.4s;width:100%}img[data-v-e284dbf4]{aspect-ratio:40/21;max-width:1200px;transition:.4s ease-in-out}.tab-panels{width:100%}div[role=tabpanel]{display:flex;width:100%}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{s as n,v as a,o as r,l,x as e,t as s,y as d,z as c,A as p,B as f,C as x,D as h}from"./entry.
|
|
1
|
+
import{s as n,v as a,o as r,l,x as e,t as s,y as d,z as c,A as p,B as f,C as x,D as h}from"./entry.2a315a2c.js";const m=t=>(x("data-v-18337f8d"),t=t(),h(),t),u={class:"font-sans antialiased bg-white dark:bg-black text-black dark:text-white grid min-h-screen place-content-center overflow-hidden"},g=m(()=>e("div",{class:"fixed left-0 right-0 spotlight z-10"},null,-1)),_={class:"max-w-520px text-center z-20"},b=["textContent"],y=["textContent"],w={class:"w-full flex items-center justify-center"},S={__name:"error-404",props:{appName:{type:String,default:"Nuxt"},version:{type:String,default:""},statusCode:{type:Number,default:404},statusMessage:{type:String,default:"Not Found"},description:{type:String,default:"Sorry, the page you are looking for could not be found."},backHome:{type:String,default:"Go back home"}},setup(t){const o=t;return a({title:`${o.statusCode} - ${o.statusMessage} | ${o.appName}`,script:[],style:[{children:'*,:before,:after{-webkit-box-sizing:border-box;box-sizing:border-box;border-width:0;border-style:solid;border-color:#e0e0e0}*{--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(14, 165, 233, .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}a{color:inherit;text-decoration:inherit}body{margin:0;font-family:inherit;line-height:inherit}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";line-height:1.5}h1,p{margin:0}h1{font-size:inherit;font-weight:inherit}'}]}),(k,v)=>{const i=p;return r(),l("div",u,[g,e("div",_,[e("h1",{class:"text-8xl sm:text-10xl font-medium mb-8",textContent:s(t.statusCode)},null,8,b),e("p",{class:"text-xl px-8 sm:px-0 sm:text-4xl font-light mb-16 leading-tight",textContent:s(t.description)},null,8,y),e("div",w,[d(i,{to:"/",class:"gradient-border text-md sm:text-xl py-2 px-4 sm:py-3 sm:px-6 cursor-pointer"},{default:c(()=>[f(s(t.backHome),1)]),_:1})])])])}}},z=n(S,[["__scopeId","data-v-18337f8d"]]);export{z as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{s as i,v as a,o as r,l as n,x as e,t as s,C as l,D as d}from"./entry.
|
|
1
|
+
import{s as i,v as a,o as r,l as n,x as e,t as s,C as l,D as d}from"./entry.2a315a2c.js";const c=t=>(l("data-v-428e244b"),t=t(),d(),t),p={class:"font-sans antialiased bg-white dark:bg-black text-black dark:text-white grid min-h-screen place-content-center overflow-hidden"},h=c(()=>e("div",{class:"fixed -bottom-1/2 left-0 right-0 h-1/2 spotlight"},null,-1)),f={class:"max-w-520px text-center"},g=["textContent"],m=["textContent"],x={__name:"error-500",props:{appName:{type:String,default:"Nuxt"},version:{type:String,default:""},statusCode:{type:Number,default:500},statusMessage:{type:String,default:"Server error"},description:{type:String,default:"This page is temporarily unavailable."}},setup(t){const o=t;return a({title:`${o.statusCode} - ${o.statusMessage} | ${o.appName}`,script:[],style:[{children:'*,:before,:after{-webkit-box-sizing:border-box;box-sizing:border-box;border-width:0;border-style:solid;border-color:#e0e0e0}*{--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(14, 165, 233, .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{margin:0;font-family:inherit;line-height:inherit}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";line-height:1.5}h1,p{margin:0}h1{font-size:inherit;font-weight:inherit}'}]}),(b,u)=>(r(),n("div",p,[h,e("div",f,[e("h1",{class:"text-8xl sm:text-10xl font-medium mb-8",textContent:s(t.statusCode)},null,8,g),e("p",{class:"text-xl px-8 sm:px-0 sm:text-4xl font-light mb-16 leading-tight",textContent:s(t.description)},null,8,m)])]))}},w=i(x,[["__scopeId","data-v-428e244b"]]);export{w as default};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import{d as n,_ as o,o as _,c as f,n as g,g as E,u as r}from"./entry.
|
|
1
|
+
import{d as n,_ as o,o as _,c as f,n as g,g as E,u as r}from"./entry.2a315a2c.js";const k={__name:"nuxt-error-page",props:{error:Object},setup(t){(t.error.stack||"").split(`
|
|
2
2
|
`).splice(1).map(e=>({text:e.replace("webpack:/","").replace(".vue",".js").trim(),internal:e.includes("node_modules")&&!e.includes(".cache")||e.includes("internal")||e.includes("new Promise")})).map(e=>`<span class="stack${e.internal?" internal":""}">${e.text}</span>`).join(`
|
|
3
|
-
`);const s=Number(t.error.statusCode||500),a=s===404,c=t.error.statusMessage??(a?"Page Not Found":"Internal Server Error"),u=t.error.message||t.error.toString(),i=void 0,d=n(()=>o(()=>import("./error-404.
|
|
3
|
+
`);const s=Number(t.error.statusCode||500),a=s===404,c=t.error.statusMessage??(a?"Page Not Found":"Internal Server Error"),u=t.error.message||t.error.toString(),i=void 0,d=n(()=>o(()=>import("./error-404.0c49154a.js"),["./error-404.0c49154a.js","./entry.2a315a2c.js","./entry.dc5450bf.css","./error-404.68aa58b4.css"],import.meta.url).then(e=>e.default||e)),l=n(()=>o(()=>import("./error-500.f3eec0bb.js"),["./error-500.f3eec0bb.js","./entry.2a315a2c.js","./entry.dc5450bf.css","./error-500.dc5710d1.css"],import.meta.url).then(e=>e.default||e)),m=a?d:l;return(e,p)=>(_(),f(r(m),g(E({statusCode:r(s),statusMessage:r(c),description:r(u),stack:r(i)})),null,16))}},v=k;export{v as default};
|
package/dist/client/index.html
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html >
|
|
3
3
|
<head><meta charset="utf-8">
|
|
4
|
-
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="modulepreload" as="script" crossorigin href="/__nuxt_og_image__/client/_nuxt/entry.
|
|
4
|
+
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="modulepreload" as="script" crossorigin href="/__nuxt_og_image__/client/_nuxt/entry.2a315a2c.js"><link rel="preload" as="style" href="/__nuxt_og_image__/client/_nuxt/entry.dc5450bf.css"><link rel="prefetch" as="script" crossorigin href="/__nuxt_og_image__/client/_nuxt/error-component.7c753c74.js"><link rel="stylesheet" href="/__nuxt_og_image__/client/_nuxt/entry.dc5450bf.css"><script>"use strict";const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"system";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
|
|
5
5
|
</script></head>
|
|
6
|
-
<body ><div id="__nuxt"></div><script>window.__NUXT__={serverRendered:false,config:{public:{},app:{baseURL:"\u002F__nuxt_og_image__\u002Fclient",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:""}},data:{},state:{}}</script><script type="module" src="/__nuxt_og_image__/client/_nuxt/entry.
|
|
6
|
+
<body ><div id="__nuxt"></div><script>window.__NUXT__={serverRendered:false,config:{public:{},app:{baseURL:"\u002F__nuxt_og_image__\u002Fclient",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:""}},data:{},state:{}}</script><script type="module" src="/__nuxt_og_image__/client/_nuxt/entry.2a315a2c.js" crossorigin></script></body>
|
|
7
7
|
</html>
|
package/dist/module.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as _nuxt_schema from '@nuxt/schema';
|
|
2
|
+
import { SatoriOptions } from 'satori';
|
|
2
3
|
|
|
3
4
|
interface ScreenshotOptions {
|
|
4
5
|
colorScheme?: 'dark' | 'light';
|
|
@@ -21,7 +22,7 @@ interface ScreenshotOptions {
|
|
|
21
22
|
*/
|
|
22
23
|
delay?: number;
|
|
23
24
|
}
|
|
24
|
-
interface
|
|
25
|
+
interface OgImageOptions extends Partial<ScreenshotOptions> {
|
|
25
26
|
provider?: 'browser' | 'satori';
|
|
26
27
|
prerender?: boolean;
|
|
27
28
|
title?: string;
|
|
@@ -30,19 +31,18 @@ interface OgImagePayload extends Partial<ScreenshotOptions> {
|
|
|
30
31
|
alt?: string;
|
|
31
32
|
[key: string]: any;
|
|
32
33
|
}
|
|
33
|
-
type OgImageScreenshotPayload = Omit<OgImagePayload, 'component'>;
|
|
34
|
-
declare module 'nitropack' {
|
|
35
|
-
interface NitroRouteRules {
|
|
36
|
-
ogImage?: false | OgImageScreenshotPayload | OgImagePayload;
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
34
|
|
|
40
|
-
interface ModuleOptions
|
|
35
|
+
interface ModuleOptions {
|
|
41
36
|
/**
|
|
42
37
|
* The hostname of your website.
|
|
43
38
|
*/
|
|
44
39
|
host: string;
|
|
40
|
+
defaults: OgImageOptions;
|
|
45
41
|
experimentalNitroBrowser: boolean;
|
|
42
|
+
satoriFonts: Array<Partial<SatoriOptions['fonts'][number]> & {
|
|
43
|
+
publicPath: string;
|
|
44
|
+
}>;
|
|
45
|
+
satoriOptions: Partial<SatoriOptions>;
|
|
46
46
|
forcePrerender: boolean;
|
|
47
47
|
}
|
|
48
48
|
declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
|
package/dist/module.json
CHANGED
package/dist/module.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { mkdir, writeFile } from 'node:fs/promises';
|
|
2
2
|
import { existsSync } from 'fs';
|
|
3
|
-
import { useNuxt, addTemplate, defineNuxtModule, createResolver, addServerHandler, addImports, addComponent } from '@nuxt/kit';
|
|
3
|
+
import { useNuxt, addTemplate, defineNuxtModule, createResolver, getNuxtVersion, useLogger, addServerHandler, addImports, addComponent } from '@nuxt/kit';
|
|
4
4
|
import { execa } from 'execa';
|
|
5
5
|
import chalk from 'chalk';
|
|
6
6
|
import defu from 'defu';
|
|
@@ -57,13 +57,8 @@ async function screenshot(browser, url, options) {
|
|
|
57
57
|
return await page.screenshot();
|
|
58
58
|
}
|
|
59
59
|
|
|
60
|
-
const PayloadScriptId = "nuxt-og-image-payload";
|
|
61
|
-
const Constants = {
|
|
62
|
-
PayloadScriptId
|
|
63
|
-
};
|
|
64
|
-
|
|
65
60
|
function exposeConfig(alias, filename, config) {
|
|
66
|
-
const exports = Object.entries(config).map(([k, v]) => `export const ${k} =
|
|
61
|
+
const exports = Object.entries(config).map(([k, v]) => `export const ${k} = ${JSON.stringify(v)}`).join("\n");
|
|
67
62
|
useNuxt().options.alias[alias] = addTemplate({
|
|
68
63
|
filename,
|
|
69
64
|
getContents: () => exports
|
|
@@ -72,6 +67,13 @@ function exposeConfig(alias, filename, config) {
|
|
|
72
67
|
nitroConfig.virtual[alias] = exports;
|
|
73
68
|
});
|
|
74
69
|
}
|
|
70
|
+
function extractOgImageOptions(html) {
|
|
71
|
+
const options = html.match(/<script id="nuxt-og-image-options" type="application\/json">(.+?)<\/script>/)?.[1];
|
|
72
|
+
return options ? JSON.parse(options) : false;
|
|
73
|
+
}
|
|
74
|
+
function stripOgImageOptions(html) {
|
|
75
|
+
return html.replace(/<script id="nuxt-og-image-options" type="application\/json">(.*?)<\/script>/, "");
|
|
76
|
+
}
|
|
75
77
|
|
|
76
78
|
function setupPlaygroundRPC(nuxt, config) {
|
|
77
79
|
const serverFunctions = {
|
|
@@ -155,13 +157,6 @@ function getBodyJson(req) {
|
|
|
155
157
|
});
|
|
156
158
|
}
|
|
157
159
|
|
|
158
|
-
function extractOgPayload(html) {
|
|
159
|
-
const payload = html.match(new RegExp(`<script id="${PayloadScriptId}" type="application/json">(.+?)<\/script>`))?.[1];
|
|
160
|
-
if (payload) {
|
|
161
|
-
return JSON.parse(payload);
|
|
162
|
-
}
|
|
163
|
-
return false;
|
|
164
|
-
}
|
|
165
160
|
const PATH = "/__nuxt_og_image__";
|
|
166
161
|
const PATH_ENTRY = `${PATH}/entry`;
|
|
167
162
|
const PATH_PLAYGROUND = `${PATH}/client`;
|
|
@@ -179,8 +174,26 @@ const module = defineNuxtModule({
|
|
|
179
174
|
experimentalNitroBrowser: false,
|
|
180
175
|
forcePrerender: !nuxt.options.dev && nuxt.options._generate,
|
|
181
176
|
host: nuxt.options.runtimeConfig.public?.siteUrl,
|
|
182
|
-
|
|
183
|
-
|
|
177
|
+
defaults: {
|
|
178
|
+
component: "OgImageBasic",
|
|
179
|
+
width: 1200,
|
|
180
|
+
height: 630
|
|
181
|
+
},
|
|
182
|
+
satoriFonts: [
|
|
183
|
+
{
|
|
184
|
+
name: "Inter",
|
|
185
|
+
weight: 400,
|
|
186
|
+
style: "normal",
|
|
187
|
+
publicPath: "/inter-latin-ext-400-normal.woff"
|
|
188
|
+
},
|
|
189
|
+
{
|
|
190
|
+
name: "Inter",
|
|
191
|
+
weight: 700,
|
|
192
|
+
style: "normal",
|
|
193
|
+
publicPath: "/inter-latin-ext-700-normal.woff"
|
|
194
|
+
}
|
|
195
|
+
],
|
|
196
|
+
satoriOptions: {}
|
|
184
197
|
};
|
|
185
198
|
},
|
|
186
199
|
async setup(config, nuxt) {
|
|
@@ -193,6 +206,10 @@ const module = defineNuxtModule({
|
|
|
193
206
|
};
|
|
194
207
|
nuxt.options.experimental.componentIslands = true;
|
|
195
208
|
const isEdge = (process.env.NITRO_PRESET || "").includes("edge");
|
|
209
|
+
const hasIslandSupport = getNuxtVersion(nuxt) !== "3.0.0";
|
|
210
|
+
const logger = useLogger("nuxt-og-image");
|
|
211
|
+
if (!hasIslandSupport)
|
|
212
|
+
logger.warn("You are using Nuxt 3.0.0 with `nuxt-og-image`, which only supports screenshots.\nPlease upgrade to Nuxt 3.0.1 or the edge channel: https://nuxt.com/docs/guide/going-further/edge-channel.");
|
|
196
213
|
addTemplate({
|
|
197
214
|
filename: "nuxt-og-image.d.ts",
|
|
198
215
|
getContents: () => {
|
|
@@ -211,7 +228,7 @@ export {}
|
|
|
211
228
|
nuxt.hooks.hook("prepare:types", ({ references }) => {
|
|
212
229
|
references.push({ path: resolve(nuxt.options.buildDir, "nuxt-og-image.d.ts") });
|
|
213
230
|
});
|
|
214
|
-
["html", "
|
|
231
|
+
["html", "options", "svg", "vnode", "og.png"].forEach((type) => {
|
|
215
232
|
addServerHandler({
|
|
216
233
|
handler: resolve(`./runtime/nitro/routes/__og_image__/${type}`)
|
|
217
234
|
});
|
|
@@ -238,8 +255,8 @@ export {}
|
|
|
238
255
|
});
|
|
239
256
|
});
|
|
240
257
|
await addComponent({
|
|
241
|
-
name: "
|
|
242
|
-
filePath: resolve("./runtime/components/
|
|
258
|
+
name: "OgImageBasic",
|
|
259
|
+
filePath: resolve("./runtime/components/OgImageBasic.island.vue"),
|
|
243
260
|
global: true,
|
|
244
261
|
island: true
|
|
245
262
|
});
|
|
@@ -252,7 +269,6 @@ export {}
|
|
|
252
269
|
});
|
|
253
270
|
const runtimeDir = resolve("./runtime");
|
|
254
271
|
nuxt.options.build.transpile.push(runtimeDir);
|
|
255
|
-
exposeConfig("#nuxt-og-image/constants", "nuxt-og-image-constants.mjs", Constants);
|
|
256
272
|
exposeConfig("#nuxt-og-image/config", "nuxt-og-image-config.mjs", config);
|
|
257
273
|
nuxt.hooks.hook("nitro:config", (nitroConfig) => {
|
|
258
274
|
nitroConfig.externals = defu(nitroConfig.externals || {}, {
|
|
@@ -292,19 +308,19 @@ export {}
|
|
|
292
308
|
const html = ctx.contents;
|
|
293
309
|
if (!html)
|
|
294
310
|
return;
|
|
295
|
-
const
|
|
296
|
-
ctx.contents = html
|
|
311
|
+
const extractedOptions = extractOgImageOptions(html);
|
|
312
|
+
ctx.contents = stripOgImageOptions(html);
|
|
297
313
|
const routeRules = defu({}, ..._routeRulesMatcher.matchAll(ctx.route).reverse());
|
|
298
|
-
if (!
|
|
314
|
+
if (!extractedOptions || routeRules.ogImage === false)
|
|
299
315
|
return;
|
|
300
|
-
const
|
|
316
|
+
const options = {
|
|
301
317
|
path: ctx.route,
|
|
302
|
-
...
|
|
318
|
+
...extractedOptions,
|
|
303
319
|
...routeRules.ogImage || {},
|
|
304
320
|
ctx
|
|
305
321
|
};
|
|
306
|
-
if ((nuxt.options._generate ||
|
|
307
|
-
screenshotQueue.push(
|
|
322
|
+
if ((nuxt.options._generate || options.prerender) && options.provider === "browser")
|
|
323
|
+
screenshotQueue.push(options);
|
|
308
324
|
});
|
|
309
325
|
if (nuxt.options.dev)
|
|
310
326
|
return;
|
|
@@ -333,8 +349,8 @@ export {}
|
|
|
333
349
|
const filename = joinURL(dirname, "/og.png");
|
|
334
350
|
try {
|
|
335
351
|
const imgBuffer = await screenshot(browser, `${host}${entry.path}`, {
|
|
336
|
-
...config,
|
|
337
|
-
...entry
|
|
352
|
+
...config.defaults || {},
|
|
353
|
+
...entry || {}
|
|
338
354
|
});
|
|
339
355
|
try {
|
|
340
356
|
await mkdir(dirname, { recursive: true });
|
|
@@ -10,10 +10,10 @@ const props = defineProps({
|
|
|
10
10
|
<div :style="{ padding: '0 60px', width: '100%', height: '100%', backgroundColor: '#0c0c0c', backgroundImage: 'linear-gradient(to bottom, #dbf4ff, #fff1f1)', display: 'flex', alignItems: 'center' }">
|
|
11
11
|
<div :style="{ padding: '0 30px', display: 'flex', flexDirection: 'column' }">
|
|
12
12
|
<p :style="{ fontSize: '60px', fontWeight: 'bold', marginBottom: '20px' }">
|
|
13
|
-
{{ title }}
|
|
13
|
+
{{ title || 'Og Image Template' }}
|
|
14
14
|
</p>
|
|
15
15
|
<p :style="{ fontSize: '26px' }">
|
|
16
|
-
{{ description }}
|
|
16
|
+
{{ description || 'Set a description to change me.' }}
|
|
17
17
|
</p>
|
|
18
18
|
</div>
|
|
19
19
|
</div>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
declare const _default: import("vue").DefineComponent<
|
|
1
|
+
import type { OgImageOptions } from '../../types';
|
|
2
|
+
declare const _default: import("vue").DefineComponent<OgImageOptions, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<OgImageOptions>>, {
|
|
3
3
|
[x: string]: any;
|
|
4
4
|
}>;
|
|
5
5
|
export default _default;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
declare const _default: import("vue").DefineComponent<
|
|
1
|
+
import type { OgImageScreenshotOptions } from '../../types';
|
|
2
|
+
declare const _default: import("vue").DefineComponent<OgImageScreenshotOptions, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<OgImageScreenshotOptions>>, {
|
|
3
3
|
[x: string]: any;
|
|
4
4
|
[x: number]: any;
|
|
5
5
|
}>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
declare const _default: import("vue").DefineComponent<
|
|
1
|
+
import type { OgImageOptions } from '../../types';
|
|
2
|
+
declare const _default: import("vue").DefineComponent<OgImageOptions, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<OgImageOptions>>, {
|
|
3
3
|
[x: string]: any;
|
|
4
4
|
}>;
|
|
5
5
|
export default _default;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
export declare function defineOgImageScreenshot(options?:
|
|
3
|
-
export declare function defineOgImageDynamic(options?:
|
|
4
|
-
export declare function defineOgImageStatic(options?:
|
|
5
|
-
export declare function defineOgImage(options?:
|
|
1
|
+
import type { OgImageOptions, OgImageScreenshotOptions } from '../../types';
|
|
2
|
+
export declare function defineOgImageScreenshot(options?: OgImageScreenshotOptions): void;
|
|
3
|
+
export declare function defineOgImageDynamic(options?: OgImageOptions): void;
|
|
4
|
+
export declare function defineOgImageStatic(options?: OgImageOptions): void;
|
|
5
|
+
export declare function defineOgImage(options?: OgImageOptions): void;
|
|
@@ -2,8 +2,7 @@ import { useServerHead } from "@vueuse/head";
|
|
|
2
2
|
import { withBase } from "ufo";
|
|
3
3
|
import { useRequestEvent } from "#app";
|
|
4
4
|
import { useRouter } from "#imports";
|
|
5
|
-
import {
|
|
6
|
-
import { forcePrerender, height, host, width } from "#nuxt-og-image/config";
|
|
5
|
+
import { defaults, forcePrerender, host } from "#nuxt-og-image/config";
|
|
7
6
|
export function defineOgImageScreenshot(options = {}) {
|
|
8
7
|
const router = useRouter();
|
|
9
8
|
const route = router?.currentRoute?.value?.path || "";
|
|
@@ -45,11 +44,11 @@ export function defineOgImage(options = {}) {
|
|
|
45
44
|
},
|
|
46
45
|
{
|
|
47
46
|
property: "og:image:width",
|
|
48
|
-
content: width
|
|
47
|
+
content: options.width || defaults.width
|
|
49
48
|
},
|
|
50
49
|
{
|
|
51
50
|
property: "og:image:height",
|
|
52
|
-
content: height
|
|
51
|
+
content: options.height || defaults.height
|
|
53
52
|
}
|
|
54
53
|
];
|
|
55
54
|
if (options.alt) {
|
|
@@ -62,9 +61,15 @@ export function defineOgImage(options = {}) {
|
|
|
62
61
|
meta,
|
|
63
62
|
script: [
|
|
64
63
|
{
|
|
65
|
-
id:
|
|
64
|
+
id: "nuxt-og-image-options",
|
|
66
65
|
type: "application/json",
|
|
67
|
-
children: () =>
|
|
66
|
+
children: () => {
|
|
67
|
+
const payload = {};
|
|
68
|
+
Object.entries(options).forEach(([key, val]) => {
|
|
69
|
+
payload[key.replace(/-([a-z])/g, (g) => g[1].toUpperCase())] = val;
|
|
70
|
+
});
|
|
71
|
+
return payload;
|
|
72
|
+
}
|
|
68
73
|
}
|
|
69
74
|
]
|
|
70
75
|
});
|
|
@@ -1,16 +1,15 @@
|
|
|
1
1
|
import { screenshot } from "../../browserUtil.mjs";
|
|
2
|
-
import { height, width } from "#nuxt-og-image/config";
|
|
3
2
|
import { createBrowser } from "#nuxt-og-image/browser";
|
|
4
3
|
export default {
|
|
5
4
|
name: "browser",
|
|
6
|
-
createSvg: function createSvg() {
|
|
7
|
-
throw new Error("Browser provider
|
|
5
|
+
createSvg: async function createSvg() {
|
|
6
|
+
throw new Error("Browser provider can't create SVGs.");
|
|
8
7
|
},
|
|
9
|
-
|
|
8
|
+
createVNode: async function createVNode() {
|
|
9
|
+
throw new Error("Browser provider can't create VNodes.");
|
|
10
|
+
},
|
|
11
|
+
createPng: async function createPng(basePath, options) {
|
|
10
12
|
const browser = await createBrowser();
|
|
11
|
-
return screenshot(browser, basePath,
|
|
12
|
-
width: Number(width),
|
|
13
|
-
height: Number(height)
|
|
14
|
-
});
|
|
13
|
+
return screenshot(browser, basePath, options);
|
|
15
14
|
}
|
|
16
15
|
};
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { html as convertHtmlToSatori } from "satori-html";
|
|
2
|
+
import satori from "satori";
|
|
3
|
+
import { parseURL } from "ufo";
|
|
4
|
+
import { Resvg } from "@resvg/resvg-js";
|
|
5
|
+
import twemoji from "twemoji";
|
|
6
|
+
import { parseFont, walkSatoriTree } from "./utils.mjs";
|
|
7
|
+
import imageSrc from "./plugins/imageSrc.mjs";
|
|
8
|
+
import twClasses from "./plugins/twClasses.mjs";
|
|
9
|
+
import flex from "./plugins/flex.mjs";
|
|
10
|
+
import emojis from "./plugins/emojis.mjs";
|
|
11
|
+
import { satoriFonts, satoriOptions } from "#nuxt-og-image/config";
|
|
12
|
+
export default {
|
|
13
|
+
name: "satori",
|
|
14
|
+
createPng: async function createPng(baseUrl, options) {
|
|
15
|
+
const svg = await this.createSvg(baseUrl, options);
|
|
16
|
+
const resvg = new Resvg(svg, {});
|
|
17
|
+
const pngData = resvg.render();
|
|
18
|
+
return pngData.asPng();
|
|
19
|
+
},
|
|
20
|
+
createVNode: async function createVNode(baseUrl, options) {
|
|
21
|
+
const url = parseURL(baseUrl);
|
|
22
|
+
const html = await $fetch(url.pathname);
|
|
23
|
+
const body = html.match(/<body[^>]*>([\s\S]*)<\/body>/)?.[1];
|
|
24
|
+
const emojiedFont = twemoji.parse(body, {
|
|
25
|
+
folder: "svg",
|
|
26
|
+
ext: ".svg"
|
|
27
|
+
});
|
|
28
|
+
satoriOptions.fonts = satoriOptions.fonts || [];
|
|
29
|
+
for (const font of satoriFonts)
|
|
30
|
+
satoriOptions.fonts.push(await parseFont(url, font));
|
|
31
|
+
const satoriTree = convertHtmlToSatori(emojiedFont);
|
|
32
|
+
await walkSatoriTree(url, satoriTree, [
|
|
33
|
+
emojis(url),
|
|
34
|
+
twClasses(url),
|
|
35
|
+
imageSrc(url),
|
|
36
|
+
flex(url)
|
|
37
|
+
]);
|
|
38
|
+
return satoriTree;
|
|
39
|
+
},
|
|
40
|
+
createSvg: async function createSvg(baseUrl, options) {
|
|
41
|
+
const vnodes = await this.createVNode(baseUrl, options);
|
|
42
|
+
return await satori(vnodes, {
|
|
43
|
+
...satoriOptions,
|
|
44
|
+
width: options.width,
|
|
45
|
+
height: options.height
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { defineSatoriTransformer } from "../utils.mjs";
|
|
2
|
+
export default defineSatoriTransformer(() => {
|
|
3
|
+
return {
|
|
4
|
+
filter: (node) => node.type === "img" && node.props?.class.includes("emoji"),
|
|
5
|
+
transform: async (node) => {
|
|
6
|
+
node.props.style = node.props.style || {};
|
|
7
|
+
node.props.style.height = "1em";
|
|
8
|
+
node.props.style.width = "1em";
|
|
9
|
+
node.props.style.margin = "0 .05em 0 .1em";
|
|
10
|
+
node.props.style.verticalAlign = "0.1em";
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
|
+
});
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { defineSatoriTransformer } from "../utils.mjs";
|
|
2
|
+
export default defineSatoriTransformer(() => {
|
|
3
|
+
return {
|
|
4
|
+
filter: (node) => node.type === "div" && (Array.isArray(node.props?.children) && node.props?.children.length >= 1) && (!node.props.style?.display && !node.props?.class?.includes("flex")),
|
|
5
|
+
transform: async (node) => {
|
|
6
|
+
node.props.style = node.props.style || {};
|
|
7
|
+
node.props.style.display = "flex";
|
|
8
|
+
node.props.style.flexDirection = "column";
|
|
9
|
+
}
|
|
10
|
+
};
|
|
11
|
+
});
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { fileURLToPath } from "node:url";
|
|
2
|
+
import { promises as fsp } from "node:fs";
|
|
3
|
+
import { withBase } from "ufo";
|
|
4
|
+
import { dirname, resolve } from "pathe";
|
|
5
|
+
import { defineSatoriTransformer } from "../utils.mjs";
|
|
6
|
+
import { getAsset } from "#internal/nitro/virtual/public-assets";
|
|
7
|
+
export default defineSatoriTransformer((url) => {
|
|
8
|
+
return {
|
|
9
|
+
filter: (node) => node.type === "img",
|
|
10
|
+
transform: async (node) => {
|
|
11
|
+
const src = node.props?.src;
|
|
12
|
+
if (src && src.startsWith("/")) {
|
|
13
|
+
const file = getAsset(src);
|
|
14
|
+
if (file) {
|
|
15
|
+
const serverDir = dirname(fileURLToPath(import.meta.url));
|
|
16
|
+
const path = resolve(serverDir, file.path);
|
|
17
|
+
node.props.src = `data:${file.type};base64,${await fsp.readFile(path, { encoding: "base64" })}`;
|
|
18
|
+
} else {
|
|
19
|
+
node.props.src = withBase(src, `${url.protocol}//${url.host}`);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
});
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { SatoriOptions } from 'satori';
|
|
2
|
+
import type { ParsedURL } from 'ufo';
|
|
3
|
+
import type { SatoriTransformer, VNode } from '../../../../types';
|
|
4
|
+
export declare function parseFont(url: ParsedURL, font: SatoriOptions['fonts'][number] & {
|
|
5
|
+
publicPath?: string;
|
|
6
|
+
}): Promise<import("satori").Font & {
|
|
7
|
+
publicPath?: string | undefined;
|
|
8
|
+
}>;
|
|
9
|
+
export declare function walkSatoriTree(url: ParsedURL, node: VNode, plugins: SatoriTransformer[]): Promise<void>;
|
|
10
|
+
export declare function defineSatoriTransformer(transformer: (url: ParsedURL) => SatoriTransformer): (url: ParsedURL) => SatoriTransformer;
|