feat(docs): use latest vitepress theme

docs/.vitepress/theme/MyLayout.vue

@@ -1,6 +1,9 @@
 <script setup>
 import DefaultTheme from 'vitepress/theme'
+import { useRoute } from 'vitepress'
+
 const { Layout } = DefaultTheme
+const route = useRoute()
 </script>
 
 <template>
@@ -19,6 +22,7 @@ const { Layout } = DefaultTheme
   </template>
 </SchemaOrgWebSite>
 <SchemaOrgWebPage />
+<div :class="[route.data.frontmatter.home ? 'home' : '']">
 <Layout>
   <template #page-bottom>
   <div style="margin-top: 50px;">
@@ -27,4 +31,5 @@ const { Layout } = DefaultTheme
   </div>
   </template>
 </Layout>
+</div>
 </template>

docs/components.d.ts

@@ -11,19 +11,16 @@ declare module '@vue/runtime-core' {
     BtnBasic: typeof import('./src/components/Btn/BtnBasic.vue')['default']
     BtnIcon: typeof import('./src/components/Btn/BtnIcon.vue')['default']
     Contributors: typeof import('./src/components/Contributors.vue')['default']
-    DevelopmentWarning: typeof import('./src/components/DevelopmentWarning.vue')['default']
     FeaturesList: typeof import('./src/components/FeaturesList.vue')['default']
     Home: typeof import('./src/components/Home.vue')['default']
     ICarbonCheckmarkOutline: typeof import('~icons/carbon/checkmark-outline')['default']
     ICarbonFavoriteFilled: typeof import('~icons/carbon/favorite-filled')['default']
     ICarbonLogoGithub: typeof import('~icons/carbon/logo-github')['default']
     ICarbonLogoTwitter: typeof import('~icons/carbon/logo-twitter')['default']
-    ILogosNuxtIcon: typeof import('~icons/logos/nuxt-icon')['default']
+    ILogosVitejs: typeof import('~icons/logos/vitejs')['default']
     Links: typeof import('./src/components/Links.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    SchemaOrgArticle: typeof import('@vueuse/schema-org')['SchemaOrgArticle']
-    SchemaOrgBreadcrumb: typeof import('@vueuse/schema-org')['SchemaOrgBreadcrumb']
     SchemaOrgInspector: typeof import('@vueuse/schema-org')['SchemaOrgInspector']
     SchemaOrgPerson: typeof import('@vueuse/schema-org')['SchemaOrgPerson']
     SchemaOrgWebPage: typeof import('@vueuse/schema-org')['SchemaOrgWebPage']

docs/main.css

@@ -1,30 +1,10 @@
 :root {
-  --c-brand: #047857;
-  --c-accent: #b45309;
-  --c-text: #151c23;
-  --font-family-base: DM Sans, ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont, sans-serif;
-  --font-family-mono: DM Mono, source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
-  --bg-gradient: 255,255,255;
-}
-/*
-@media (prefers-color-scheme: dark) {
-  :root {
-    --c-bg: rgb(20,20,20) !important;
-    --c-text: rgb(255,255,255,87%) !important;
-    --c-text-light: #fdd888 !important;
-    --c-brand: #fdd888 !important;
-    --c-accent: #90C321 !important;
-    --bg-gradient: 20,20,20 !important;
-    --code-inline-bg-color: #282c34aa !important;
-  }
-
-  tr:nth-child(2n) {
-    background-color: var(--c-bg) !important;
-  }
-  tr {
-    border-top: 1px solid var(--code-inline-bg-color) !important;
-  }
-} */
+  --vp-c-accent: #b45309;
+  --vp-c-text: #151c23;
+  --vp-font-family-base: DM Sans, ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont, sans-serif;
+  --vp-font-family-mono: DM Mono, source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+  --vp-bg-gradient: 255,255,255;
+}
 
 .mono, .nav-bar-title {
   font-family: var(--font-family-mono);
@@ -39,40 +19,14 @@ ul {
 }
 
 main.home {
-
   position: relative;
   overflow-x: hidden;
 }
 
-main.home::before {
-  content: '';
-  inset: 0;
-  position: absolute;
-  z-index: -1;
-  background-image: url("/bg.png");
-  background-repeat: repeat;
-  background-size: 50%;
-}
-
 main {
   @apply text-gray-700 dark:text-gray-200 overflow-y-hidden;
 }
 
-@media screen and (max-width: 768px) {
-  main.home {
-    background-size: 100%;
-  }
-}
-
-main.home {
-  background:
-    radial-gradient(ellipse, rgba(var(--bg-gradient),1) 50%, rgba(var(--bg-gradient),0.4) 120%),
-    radial-gradient(ellipse at top, rgba(var(--bg-gradient),0.8) 20%, rgba(var(--bg-gradient),0) 100%),
-    radial-gradient(ellipse at left, rgba(var(--bg-gradient),0.6) 20%, rgba(var(--bg-gradient),0) 100%),
-    radial-gradient(ellipse at right, rgba(var(--bg-gradient),0.6) 20%, rgba(var(--bg-gradient),0) 100%);
-}
-
-
 .custom-block.tip {
   background-color: rgba(255, 229, 100, 0.1)
 }
@@ -123,3 +77,23 @@ a[href="http://Schema.org"] {
 .highlight-lines .highlighted {
   background-color: rgb(0 0 0 / 20%);
 }
+
+.home .content-container, .home .content, .home .VPDoc > .container {
+  max-width: 100% !important;
+}
+
+.home .aside {
+  display: none !important;
+}
+
+.vp-doc p {
+  line-height: inherit !important;
+}
+
+.vp-doc a {
+  transition: inherit !important;
+}
+
+a:hover {
+  text-decoration: underline;
+}

docs/package.json

@@ -9,25 +9,25 @@
   },
   "dependencies": {
     "@panelbear/panelbear-js": "^1.3.3",
-    "@vueuse/core": "^8.4.1",
+    "@vueuse/core": "^8.5.0",
     "@vueuse/schema-org": "workspace:*",
     "@vueuse/schema-org-vite": "workspace:*",
     "change-case": "^4.1.2",
     "typewriter-effect": "^2.18.2",
-    "unplugin-auto-import": "^0.7.1",
+    "unplugin-auto-import": "^0.7.2",
     "unplugin-icons": "^0.14.3",
-    "vite": "^2.9.8",
+    "vite": "^2.9.9",
     "vite-plugin-windicss": "^1.8.4",
-    "vue": "^3.2.31"
+    "vue": "^3.2.36"
   },
   "devDependencies": {
     "@iconify-json/carbon": "latest",
     "@iconify-json/logos": "^1.1.5",
-    "@unocss/reset": "^0.32.12",
-    "@vitejs/plugin-vue": "^2.3.2",
+    "@unocss/reset": "^0.34.0",
+    "@vitejs/plugin-vue": "^2.3.3",
     "markdown-it": "^13.0.1",
-    "unocss": "^0.32.12",
-    "unplugin-vue-components": "^0.19.3",
-    "vitepress": "^0.22.3"
+    "unocss": "^0.34.0",
+    "unplugin-vue-components": "^0.19.5",
+    "vitepress": "^1.0.0-draft.4"
   }
 }

docs/src/components/Avatar.vue

@@ -39,7 +39,7 @@ defineProps<{
     <br>
     <btn-basic
       v-if="sponsors"
-      class="text-white inline-flex items-center mt-1 bg-pink-500 hover:bg-pink-600"
+      class="!text-white inline-flex items-center mt-1 bg-pink-500 hover:bg-pink-600"
       target="_blank"
       :href="`https://github.com/sponsors/${github}`"
     >

docs/src/components/Home.vue

@@ -72,11 +72,11 @@ useSchemaOrg([
           <span class="border-b-5 border-green-400 mr-3">Schema.org <span class="border-b-5 border-white">for</span> Vue</span>
           <div class="md:(leading-22 text-5xl text-left) mt-5">
             Supports typed and automated
-            <span class="whitespace-nowrap"><img src="/google-logo.svg" height="55" class="md:h-60px h-40px inline mr-4 mb-1 md:mb-2"><a href="https://developers.google.com/search/docs/advanced/structured-data/search-gallery" target="_blank" class="text-inherit">Rich Results</a></span>
+            <span class="whitespace-nowrap"><img src="/google-logo.svg" height="55" class="md:h-60px h-40px inline mr-4 mb-1 md:mb-2"><a href="https://developers.google.com/search/docs/advanced/structured-data/search-gallery" target="_blank" class="!text-inherit">Rich Results</a></span>
           </div>
         </h1>
         <div class="mb-5">
-          <div v-for="(f, i) in ['Minimal Config', '20+ definitions', 'Composition and Components API']" :key="i" class="md:(mr-5 pl-3 pr-4 p-1 text-lg mb-10) opacity-90 mb-5 text-sm rounded-xl mr-2 inline-flex items-center border-1 border-green-500  bg-green-50 pl-2 pr-3 py-1">
+          <div v-for="(f, i) in ['Minimal Config', '20+ definitions', 'Three APIs']" :key="i" class="md:(mr-5 pl-3 pr-4 p-1 text-lg mb-10) opacity-90 mb-5 text-sm rounded-xl mr-2 inline-flex items-center border-1 border-green-500  bg-green-50 pl-2 pr-3 py-1 dark:bg-green-700 dark:text-green-200">
             <i-carbon-checkmark-outline class="mr-2 text-green-500" />
             {{ f }}
           </div>
@@ -94,7 +94,7 @@ useSchemaOrg([
         >
           <a
             href="/guide/"
-            class="md:(px-7 py-3 text-2xl) px-4 py-2 text-xl font-bold hover:no-underline font-medium rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 flex items-center p-10 bg-gradient-to-t from-emerald-600 to-green-500 text-white  hover:(bg-green-700 scale-105) transform transition children:hover:text-white"
+            class="md:(px-7 py-2 text-2xl) px-4 py-2 text-xl font-bold hover:no-underline font-medium rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 flex items-center p-10 dark:(from-emerald-800 to-green-700) bg-gradient-to-t from-emerald-600 to-green-500 !text-white  hover:(bg-green-700 scale-105) transform transition children:hover:text-white"
           >
             <p class="break-none m-0 ">
               Get Started
@@ -113,7 +113,7 @@ useSchemaOrg([
 
     <div class="md:py-15 py-10 w-full">
       <div class="container px-7 md:px-15  mx-auto flex flex-col  items-center">
-        <h2 id="meet-the-team" class="md:text-4xl mt-0 text-3xl mb-10 text-center ">
+        <h2 id="meet-the-team" class="md:text-4xl !mt-0 text-3xl mb-10 text-center ">
           Made with <span class="text-green-500">❤</span>
         </h2>
         <Avatar