chore(docs): update vitepress to latest (#1468)

* chore(docs): update vitepress to latest

* chore(docs): cleanup styles

Author: bcakmakoglu

docs/components/home/Acknowledgement.vue

@@ -3,8 +3,8 @@ import Heart from '~icons/mdi/heart'
 </script>
 
 <template>
-  <div id="acknowledgement">
-    <div class="border-t-1 border-secondary pt-6">
+  <section id="acknowledgement">
+    <div class="border-t-1 border-secondary py-6">
       <div class="max-w-3/4 md:max-w-4xl mx-auto py-4 md:py-12 lg:py-12 text-center">
         <h1 class="md:(!mb-8) flex justify-center items-center gap-2"><Heart class="text-red-500 min-w-8" /> Acknowledgement</h1>
 
@@ -33,5 +33,5 @@ import Heart from '~icons/mdi/heart'
         </p>
       </div>
     </div>
-  </div>
+  </section>
 </template>

docs/components/home/Banner.vue

@@ -35,7 +35,7 @@ Promise.all([
 </script>
 
 <template>
-  <div class="w-full dark:(border-white) border-black border-y-1 min-h-44">
+  <section id="banner" class="w-full dark:(border-white) border-black border-y-1 min-h-44">
     <div class="max-w-full md:max-w-11/12 m-auto py-4 md:py-12 <md:(dark:border-t-1 border-white)">
       <div class="grid md:grid-cols-3 gap-3 text-center <md:divide-y md:divide-x dark:divide-white divide-black">
         <div class="grid grid-rows-auto gap-2 py-4 md:py-0">
@@ -56,5 +56,5 @@ Promise.all([
         </div>
       </div>
     </div>
-  </div>
+  </section>
 </template>

docs/components/home/Features.vue

@@ -25,7 +25,7 @@ onBeforeUnmount(stop)
 </script>
 
 <template>
-  <div ref="el" class="w-full">
+  <section id="features" ref="el" class="w-full">
     <div
       class="flex flex-col divide-y divide-secondary md:divide-y-0 gap-12 md:gap-24 lg:gap-36 max-w-5/6 2xl:max-w-7xl m-auto py-12 md:py-24 text-center md:text-left"
     >
@@ -45,5 +45,5 @@ onBeforeUnmount(stop)
         <Additional @pane="onLoad" />
       </div>
     </div>
-  </div>
+  </section>
 </template>

docs/components/home/Home.vue

@@ -17,9 +17,12 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="relative min-h-250 h-[calc(100vh-var(--vp-nav-height))] lg:min-h-100 lg:h-[calc(100vh-var(--vp-nav-height)-176px)]">
+  <section
+    id="hero"
+    class="relative min-h-250 h-[calc(100vh-var(--vp-nav-height))] lg:min-h-100 lg:h-[calc(100vh-var(--vp-nav-height)-176px)]"
+  >
     <Intro />
-  </div>
+  </section>
 </template>
 
 <style lang="scss">

docs/components/home/Showcase.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup></script>
 
 <template>
-  <div
+  <section
+    id="showcase"
     class="border-t-1 border-secondary w-full text-white bg-gradient-to-br from-secondary-500 to-secondary-100 dark:(!bg-none)"
   >
     <div class="max-w-5/6 2xl:max-w-7xl mx-auto py-12 md:py-16">
@@ -52,5 +53,5 @@
         </div>
       </div>
     </div>
-  </div>
+  </section>
 </template>

docs/components/home/flows/Intro.vue

@@ -200,7 +200,7 @@ function scrollTo() {
             <div class="font-mono flex flex-col gap-4 p-4 items-center text-center">
               <h1 class="text-2xl lg:text-4xl !my-0 !pt-0 font-bold">Vue Flow</h1>
 
-              <h2 class="text-lg lg:text-xl font-normal !border-0">
+              <h2 class="!text-lg !lg:text-xl !tracking-normal !font-normal !p-0 !m-0 !border-0 !mb-4">
                 The customizable Vue 3 component bringing interactivity to flowcharts and graphs.
               </h2>
             </div>
@@ -292,8 +292,9 @@ function scrollTo() {
   transition-colors
   ease-in-out
   rounded-lg
-  text-white
-  font-semibold
+  !text-white
+  !font-semibold
+  !no-underline
   text-lg;
 }
 </style>

docs/package.json

@@ -40,7 +40,7 @@
     "unplugin-icons": "^0.19.0",
     "unplugin-vue-components": "^0.27.0",
     "vite-plugin-windicss": "^1.9.3",
-    "vitepress": "1.0.0-rc.40",
+    "vitepress": "1.2.3",
     "windicss": "^3.5.6"
   }
 }

docs/src/.vitepress/theme/style.css

@@ -149,7 +149,11 @@
 }
 
 .VPHome {
-  padding-bottom: 0 !important;
+  @apply !mb-0;
+}
+
+.vp-doc.container {
+  @apply !p-0 !w-full !max-w-full;
 }
 
 .VPFooter {
@@ -186,7 +190,7 @@ ul li {
 }
 
 .docs-button {
-  @apply mt-4 z-1 shadow-lg transition-colors duration-200 text-white font-semibold text-lg px-4 py-3 rounded-lg bg-accent dark:shadow-white/10;
+  @apply mt-4 z-1 shadow-lg transition-colors duration-200 !text-white !font-semibold !no-underline text-lg px-4 py-3 rounded-lg bg-accent dark:shadow-white/10;
 }
 
 .examples-button {