51 lines
98 KiB
Vue
51 lines
98 KiB
Vue
|
<script setup>
|
||
|
|
import { useHead } from "#imports";
|
||
|
|
const props = defineProps({
|
||
|
|
appName: {
|
||
|
|
type: String,
|
||
|
|
default: "Nuxt"
|
||
|
|
},
|
||
|
|
version: {
|
||
|
|
type: String,
|
||
|
|
default: ""
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
type: String,
|
||
|
|
default: "Welcome to Nuxt!"
|
||
|
|
},
|
||
|
|
readDocs: {
|
||
|
|
type: String,
|
||
|
|
default: "We highly recommend you take a look at the Nuxt documentation, whether you are new or have previous experience with the framework."
|
||
|
|
},
|
||
|
|
followTwitter: {
|
||
|
|
type: String,
|
||
|
|
default: "Follow the Nuxt Twitter account to get latest news about releases, new modules, tutorials and tips."
|
||
|
|
},
|
||
|
|
starGitHub: {
|
||
|
|
type: String,
|
||
|
|
default: "Nuxt is open source and the code is available on GitHub, feel free to star it, participate in discussions or dive into the source."
|
||
|
|
}
|
||
|
|
});
|
||
|
|
useHead({
|
||
|
|
title: `${props.title}`,
|
||
|
|
script: [
|
||
|
|
{
|
||
|
|
innerHTML: `!function(){const e=document.createElement("link").relList;if(!(e&&e.supports&&e.supports("modulepreload"))){for(const e of document.querySelectorAll('link[rel="modulepreload"]'))r(e);new MutationObserver((e=>{for(const o of e)if("childList"===o.type)for(const e of o.addedNodes)"LINK"===e.tagName&&"modulepreload"===e.rel&&r(e)})).observe(document,{childList:!0,subtree:!0})}function r(e){if(e.ep)return;e.ep=!0;const r=function(e){const r={};return e.integrity&&(r.integrity=e.integrity),e.referrerPolicy&&(r.referrerPolicy=e.referrerPolicy),"use-credentials"===e.crossOrigin?r.credentials="include":"anonymous"===e.crossOrigin?r.credentials="omit":r.credentials="same-origin",r}(e);fetch(e.href,r)}}();`
|
||
|
|
}
|
||
|
|
],
|
||
|
|
style: [
|
||
|
|
{
|
||
|
|
innerHTML: `@property --gradient-angle{syntax:"<angle>";inherits:false;initial-value:180deg}@keyframes gradient-rotate{0%{--gradient-angle:0deg}to{--gradient-angle:360deg}}*,:after,:before{border-color:var(--un-default-border-color,#e5e7eb);border-style:solid;border-width:0;box-sizing:border-box}:after,:before{--un-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-moz-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent}body{line-height:inherit;margin:0}h1,h2,h3{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}h1,h2,h3,p,ul{margin:0}ul{list-style:none;padding:0}img,svg{display:block;vertical-align:middle}img{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: }`
|
||
|
|
}
|
||
|
|
]
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="antialiased bg-white dark:bg-black dark:text-white flex flex-col items-center justify-center min-h-screen place-content-center sm:text-base text-black text-sm"><div class="flex flex-1 flex-col gap-y-16 py-14"><div class="flex flex-col gap-y-4 items-center justify-center"><a href="https://nuxt.com" target="_blank" aria-label="Nuxt"> <svg xmlns="http://www.w3.org/2000/svg" width="61" height="42" fill="none" viewBox="0 0 61 42"><path fill="#00dc82" d="M33.987 41.221h22.425a4.054 4.054 0 0 0 4.057-4.06 4.06 4.06 0 0 0-.545-2.03l-15.06-26.1a4.057 4.057 0 0 0-5.541-1.486 4.06 4.06 0 0 0-1.485 1.486l-3.851 6.678-7.529-13.058a4.06 4.06 0 0 0-7.028 0L.69 35.13a4.06 4.06 0 0 0 3.511 6.09h14.077c5.577 0 9.69-2.451 12.52-7.233L37.67 22.08l3.68-6.372 11.046 19.14H37.67zm-15.939-6.378-9.823-.003L22.95 9.322l7.348 12.76-4.92 8.527c-1.88 3.103-4.014 4.234-7.33 4.234"/></svg> </a><h1 class="dark:text-white font-semibold sm:text-5xl text-4xl text-black text-center">Welcome to Nuxt!</h1></div><div class="gap-6 grid grid-cols-2 lg:grid-cols-10 max-w-[960px] px-4"><div class="col-span-2 get-started-gradient-border lg:col-span-10 relative"><div class="absolute bg-gradient-to-r duration-300 from-green-400 get-started-gradient-left inset-y-0 left-0 rounded-xl to-transparent transition-opacity w-[20%] z-1"></div><div class="absolute bg-gradient-to-l duration-300 from-blue-400 get-started-gradient-right inset-y-0 right-0 rounded-xl to-transparent transition-opacity w-[20%] z-1"></div><div class="-top-[58px] absolute flex inset-x-0 justify-center w-full"><img alt src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22105%22%20height%3D%22116%22%20fill%3D%22none%22%3E%3Cg%20filter%3D%22url(%23a)%22%20shape-rendering%3D%22geometricPrecision%22%3E%3Cpath%20fill%3D%22%2318181B%22%20d%3D%22M17.203%2033.223%2046.9%2014.286a8.416%208.416%200%200%201%208.64-.18L87.38%2031.97c2.68%201.527%204.365%204.409%204.428%207.571l.191%2034.944c.063%203.151-1.491%206.104-4.091%207.776l-30.143%2019.383a8.417%208.417%200%200%201-8.75.251l-31.126-17.73C15.135%2082.595%2012.98%2079.6%2013%2076.35V40.828c.02-3.111%201.614-5.994%204.203-7.605Z%22%2F%3E%3Cpath%20stroke%3D%22url(%23b)%22%20stroke-width%3D%222%22%20d%3D%22M46.9%2014.286%2017.202%2033.223c-2.59%201.61-4.183%204.494-4.203%207.605V76.35m33.9-62.064a8.416%208.416%200%200%201%208.64-.18m-8.64.18a8.435%208.435%200%200%201%208.64-.18M13%2076.35c-.02%203.25%202.135%206.246%204.888%207.814M13%2076.35c-.02%203.233%202.136%206.247%204.888%207.814m0%200%2031.126%2017.731m0%200a8.417%208.417%200%200%200%208.75-.251m-8.75.251a8.438%208.438%200%200%200%208.75-.251m0%200%2030.143-19.383m0%200c2.598-1.67%204.154-4.627%204.091-7.776m-4.091%207.776c2.6-1.672%204.154-4.625%204.091-7.776m0%200-.19-34.944m0%200c-.064-3.162-1.75-6.044-4.43-7.571m4.43%207.571c-.063-3.147-1.75-6.045-4.43-7.571m0%200L55.54%2014.105%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22url(%23c)%22%20d%3D%22M48.669%2067.696c-.886%202.69-3.02%204.659-6.153%205.709-1.41.465-2.88.72-4.364.755a1.313%201.313%200%200%201-1.312-1.313c.035-1.484.29-2.954.754-4.364%201.05-3.133%203.02-5.266%205.71-6.152a1.312%201.312%200%201%201%20.836%202.477c-3.232%201.083-4.232%204.577-4.544%206.595%202.018-.311%205.512-1.312%206.595-4.544a1.313%201.313%200%200%201%202.477.837Zm16.39-12.486-1.46%201.477v10.057a2.657%202.657%200%200%201-.772%201.854l-5.316%205.3a2.559%202.559%200%200%201-1.853.77%202.413%202.413%200%200%201-.755-.115%202.624%202.624%200%200%201-1.821-2.001l-1.296-6.48-6.858-6.858-6.48-1.297a2.625%202.625%200%200%201-2.002-1.82%202.609%202.609%200%200%201%20.656-2.61l5.3-5.315a2.658%202.658%200%200%201%201.853-.771h10.057l1.477-1.46c4.692-4.692%209.499-4.561%2011.353-4.282a2.576%202.576%200%200%201%202.198%202.198c.28%201.854.41%206.661-4.282%2011.353Zm-26.103.132%206.185%201.23%206.546-6.546h-7.432l-5.299%205.316Zm8.482%202.657L53%2063.561l10.205-10.205c1.28-1.28%204.2-4.724%203.543-9.105-4.38-.656-7.826%202.264-9.105%203.544L47.438%2057.999Zm13.535%201.313-6.546%206.546%201.23%206.185%205.316-5.299v-7.432Z
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
@media (prefers-color-scheme:light){.get-started-gradient-border{background:linear-gradient(90deg,#fff,#fff),linear-gradient(90deg,#00dc82,#1de0b1,#36e4da)}.gradient-border-modules{background:linear-gradient(var(--gradient-angle),#f7d14c,rgba(247,209,76,.6),hsla(0,0%,100%,.8),#f7d14c)}.gradient-border-examples{background:linear-gradient(var(--gradient-angle),#8deaff,rgba(141,234,255,.6),hsla(0,0%,100%,.8),#8deaff)}.gradient-border-documentation{background:linear-gradient(var(--gradient-angle),#00dc82,rgba(0,220,130,.6),hsla(0,0%,100%,.8),#00dc82)}}@media (prefers-color-scheme:dark){.get-started-gradient-border{background:linear-gradient(90deg,#18181b,#18181b),linear-gradient(90deg,#00dc82,#1de0b1,#36e4da)}.gradient-border-modules{background:linear-gradient(var(--gradient-angle),#f7d14c,#a38108,hsla(0,0%,100%,.3),#a38108)}.gradient-border-examples{background:linear-gradient(var(--gradient-angle),#8deaff,#008aa9,hsla(0,0%,100%,.3),#008aa9)}.gradient-border-documentation{background:linear-gradient(var(--gradient-angle),#00dc82,#003f25,hsla(0,0%,100%,.2),#003f25)}}.get-started-gradient-border{background-clip:padding-box,border-box;background-origin:padding-box,border-box;border-color:transparent;border-radius:12px;border-width:1px}.get-started-gradient-border:hover>:is(.get-started-gradient-left,.get-started-gradient-right){opacity:.2}.get-started-gradient-left,.get-started-gradient-right{opacity:0}.gradient-border{border-radius:12px;left:0;opacity:0;position:absolute;top:0;transform:translate(-1px,-1px);width:calc(100% + 2px);z-index:-1}.gradient-border-rect{height:calc(100% + 2px)}@media (min-width:1024px){.gradient-border-rect{height:calc(100% + 1px)}}.gradient-border-square{height:calc(100% + 2px)}.modules-gradient-right{opacity:0}.documentation-container:hover>.gradient-border,.examples-container:hover>.gradient-border,.modules-container:hover>.gradient-border{animation:gradient-rotate 5s linear 0s infinite reverse;opacity:1;transition:all .3s linear}.examples-container:hover>.examples-gradient-right,.modules-container:hover>.modules-gradient-right{opacity:.2}.examples-gradient-right{opacity:0}.documentation-image-color-dark,.documentation-image-color-light,.examples-image-color-dark,.examples-image-color-light,.modules-image-color-dark,.modules-image-color-light{display:none}@media (prefers-color-scheme:light){.modules-image-light{display:block}.modules-container:hover>a>.modules-image-light,.modules-image-dark{display:none}.examples-image-light,.modules-container:hover>a>.modules-image-color-light{display:block}.examples-container:hover>a>.examples-image-light,.examples-image-dark{display:none}.documentation-image-light,.examples-container:hover>a>.examples-image-color-light{display:block}.documentation-container:hover>a>div>.documentation-image-light,.documentation-image-dark{display:none}.documentation-container:hover>a>div>.documentation-image-color-light{display:block}}@media (prefers-color-scheme:dark){.modules-image-dark{display:block}.modules-image-light{display:none}.modules-container:hover>a>.modules-image-color-dark{display:block}.modules-container:hover>a>.modules-image-dark{display:none}.examples-image-dark{display:block}.examples-image-light{display:none}.examples-container:hover>a>.examples-image-color-dark{display:block}.examples-container:hover>a>.examples-image-dark{display:none}.documentation-image-dark{display:block}.documentation-image-light{display:none}.documentation-container:hover>a>div>.documentation-image-color-dark{display:block}.documentation-container:hover>a>div>.documentation-image-dark{display:none}}.sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.absolute,.sr-only{position:absolute}.relative{position:relative}.inset-x-0{left:0;right:0}.inset-y-0{bottom:0;top:0}.-top-\[58px\]{top:-58px}.-top-3{top:-.75rem}.left-0{left:0}.right-0{right:0}.z-1{z-index:1}.z-10{z-index:10}.order-last{order:9999}.grid{display:grid}.col-span-2{grid-column:span 2/span 2}.row-span-2{grid-row:span 2/span 2}.grid-cols-2{grid-template-column
|
||
|
|
</style>
|