docs: Update depencies & fix small display errors

docs/app.config.ts

@@ -15,7 +15,8 @@ export default defineAppConfig({
       collapsed: true,
     },
     header: {
-      logo: true
+      logo: true,
+      navigation: true
     },
     footer: {
       credits: {

docs/components/content/BackgroundLogo.vue

@@ -6,7 +6,6 @@
         <img height="220" width="220" src="/logo.svg">
       </div>
     </div>
-    <div class="hero-background absolute bottom-0 blur-[72px] w-96 h-96 rounded-[50%]" />
   </div>
   <div class="w-full h-full xl:hidden">
     <div class="flex items-center top-16 right-[24%] absolute justify-center z-[-20]">
@@ -15,7 +14,6 @@
         <img height="50" width="50" src="/logo.svg">
       </div>
     </div>
-    <div class="hero-background absolute bottom-0 blur-[40px] w-32 h-32 rounded-[50%]" />
   </div>
 </template>
 

docs/components/content/app/AgoliaDocSearch.client.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+const { element } = useDocSearch()
+
+console.log(element)
+
+const onClick = () => element.value.querySelector('button').click()
+</script>
+
+<template>
+  <button
+    type="button"
+    aria-label="Search"
+    @click="onClick"
+  >
+    <span class="content">
+      <Icon name="heroicons-outline:search" />
+      <span>Search</span>
+      <span>
+        <kbd>⌘</kbd>
+        <kbd>K</kbd>
+      </span>
+    </span>
+  </button>
+</template>
+
+<style scoped lang="ts">
+css({
+  button: {
+    padding: '{space.2} {space.2}',
+    '.content': {
+      borderRadius: '{radii.md}',
+      display: 'flex',
+      alignItems: 'center',
+      color: '{color.gray.500}',
+      borderStyle: 'solid',
+      borderWidth: '1px',
+      borderColor: '{color.gray.100}',
+      fontSize: '{fontSize.xs}',
+      gap: '{space.2}',
+      padding: '{space.rem.375}',
+      '@dark': {
+        color: '{color.gray.400}',
+        borderColor: '{color.gray.900}',
+      },
+      '&:hover': {
+        color: '{color.gray.700}',
+        borderColor: '{color.gray.400}',
+        '@dark': {
+          color: '{color.gray.200}',
+          borderColor: '{color.gray.700}',
+        }
+      },
+      span: {
+        flex: 'none',
+        display: 'none',
+        fontSize: '{fontSize.xs}',
+        '@lg': {
+          display: 'block'
+        }
+      }
+    }
+  },
+})
+</style>

docs/components/content/app/AppHeader.vue

@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import { useMagicKeys } from '@vueuse/core'
+
+const { config } = useDocus()
+const { navigation } = useContent()
+const { y } = useWindowScroll()
+const route = useRoute()
+
+const showDocsSearch = ref(false)
+
+const hasDrawer = computed(() => navigation.value?.length > 1 || navigation.value?.[0]?.children?.length)
+
+const isBasicLayout = computed(() => route.meta.layout === 'basic')
+
+const { meta_K, Escape } = useMagicKeys()
+
+watch(meta_K, (v) => {
+  if (v) {
+    showDocsSearch.value = !showDocsSearch.value
+  }
+})
+
+watch(Escape, () => {
+  if (showDocsSearch.value)
+    showDocsSearch.value = false
+})
+</script>
+
+<template>
+  <header :class="{ 'has-drawer': hasDrawer, 'is-basic-layout': isBasicLayout, 'on-top': y === 0 }">
+    <Container>
+      <div class="header-layout">
+        <div class="section left">
+          <AppHeaderDrawer v-if="hasDrawer" />
+          <AppHeaderLogo />
+        </div>
+
+        <div class="section center">
+          <AppHeaderLogo />
+          <AppNavigation v-if="config.header.navigation" />
+          <DocsSearch v-model="showDocsSearch" />
+        </div>
+
+        <div class="section right">
+          <!-- <AppTextDirection /> -->
+          <DocsSearchButton
+            class="docs-search-button-mobile"
+            @click="showDocsSearch = true"
+          />
+          <DocsSearchButton
+            class="docs-search-button-desktop !w-auto"
+            @click="showDocsSearch = true"
+          />
+          <AppColorMode />
+          <div class="social-icons">
+            <AppSocialIcons />
+          </div>
+        </div>
+      </div>
+    </Container>
+  </header>
+</template>
+
+<style scoped lang="ts">
+css({
+  ':deep(.icon)': {
+    width: '{docus.app.header.icon.size}',
+    height: '{docus.app.header.icon.size}'
+  },
+
+  '.header-logo': {
+    '.left &': {
+      '.has-drawer &': {
+        display: 'none',
+        '@lg': {
+          display: 'block'
+        }
+      },
+    },
+
+    '.center &': {
+      display: 'none',
+      '.has-drawer &': {
+        display: 'block',
+        '@lg': {
+          display: 'none'
+        },
+      },
+    }
+  },
+
+  header: {
+    backdropFilter: '{docus.app.header.backdropFilter}',
+    position: 'sticky',
+    top: 0,
+    zIndex: 10,
+    width: '100%',
+    borderBottomWidth: '{docus.app.header.borderBottomWidth}',
+    borderBottomStyle: '{docus.app.header.borderBottomStyle}',
+    borderBottomColor: '{docus.app.header.borderBottomColor}',
+    backgroundColor: '{docus.app.header.backgroundColor}',
+    height: '{docus.app.header.height}',
+
+    '&.is-basic-layout.on-top': {
+      background: 'transparent',
+      borderColor: 'transparent',
+      backdropFilter: 'none',
+    },
+
+    '.docs-search-button-desktop': {
+      display: 'none',
+      '@lg': {
+        display: 'flex'
+      }
+    },
+
+    '.docs-search-button-mobile': {
+      display: 'flex',
+      '@lg': {
+        display: 'none'
+      }
+    },
+
+    '.header-layout': {
+      display: 'grid',
+      height: '100%',
+      gridTemplateColumns: '{docus.app.header.layout.gridTemplateColumns}',
+      gap: '{docus.app.header.layout.gap}',
+    },
+
+    '.section': {
+      display: 'flex',
+      alignItems: 'center',
+      flex: 'none',
+
+      '&.left': {
+        gridColumn: '{docus.app.header.layout.left.gridColumn}',
+        '@lg': {
+          marginInlineStart: 0
+        },
+      },
+
+      '&.center': {
+        gridColumn: '{docus.app.header.layout.center.gridColumn}',
+        justifyContent: 'center',
+        flex: '1',
+        zIndex: '1'
+      },
+
+      '&.right': {
+        display: 'flex',
+        gridColumn: '{docus.app.header.layout.right.gridColumn}',
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+        flex: 'none',
+        marginInlineEnd: 'calc(0px - {space.4})',
+
+        '.social-icons': {
+          display: 'none',
+          '@md': {
+            display: 'flex',
+            alignItems: 'center',
+          }
+        }
+      }
+    }
+  }
+})
+</style>

docs/components/content/landing/CardGrid.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+defineProps({
+  cols: {
+    type: [String, Number, Object],
+    default: 3
+  },
+  gap: {
+    type: [String, Object],
+    default: () => ({
+      initial: '{space.4}',
+      '2xl': '{space.6}'
+    })
+  }
+})
+</script>
+
+<template>
+  <div class="card-grid">
+    <ContentSlot :use="$slots.root" />
+
+    <div class="card-grid-layout" :class='[`lg:grid-cols-${cols}`]'>
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="ts">
+css({
+'.card-grid': {
+'--gap': props => props.gap,
+position: 'relative',
+width: '100%',
+
+'.card-grid-layout': {
+  display: 'grid',
+  gap: '{gap}',
+  gridAutoRows: 'minmax({docus.landing.card.minHeight}, auto)',
+  gridAutoFlow: 'dense',
+},
+}
+})
+</style>

docs/components/content/layout/BasicLayout.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="basic-layout">
+    <slot />
+  </div>
+</template>
+
+<style lang="ts" scoped>
+css({
+'.basic-layout': {
+  paddingLeft: '0.5rem',
+  paddingRight: '0.5rem',
+  display: 'flex',
+  flexDirection: 'column',
+  position: 'relative'
+}
+})
+</style>
+<script setup lang='ts'>
+</script>

docs/content/1.guide/1.getting-started/1.quick-start.md

@@ -30,6 +30,9 @@ description: ''
   ```bash [NPM]
   npm install pinia-orm --save
   ```
+  ```bash [PNPM]
+  pnpm add pinia-orm
+  ```
   ::
 
   ### Adding the plugin to your pinia store

docs/content/1.index.md

@@ -1,36 +1,49 @@
 ---
 title: 'Get Started'
 navigation: false
-layout: page
+layout: basic
 ---
 
-::background-logo
+::hero-visuals
 ::
 
-::block-hero
----
-cta:
-- Get Started
-- /guide/getting-started/quick-start
-secondary:
-- Open on GitHub and give a star →
-- https://github.com/CodeDredd/pinia-orm
----
+::hero{.mx-auto .container .max-w-7xl}
 
 #title
-Pinia [ORM]{.text-cyan-500}
+Pinia [ORM]{.text-cyan-500 .text-stroke-thin}
 
 #description
 The Pinia plugin to enable Object-Relational Mapping access to the Pinia Store.
 
+#extra
+::list
+- Relation support
+- Single Table Inheritance support
+- Works with all pinia plugins
+- Query cache & hydration cache
+- Helper functions for collections
+::
+
+#actions
+::ButtonLink{href=/guide/getting-started/quick-start icon=icon-park-solid:doc-detail}
+Get Started
+::
+
+::Announce{href=https://github.com/CodeDredd/pinia-orm}
+Open on GitHub and give a star
+::
+
 ::
 
-::card-grid
+::card-grid{.container .mx-auto .relative .max-w-7xl}
 #title
 Powerful Features
 
 #default
-  ::card{icon=simple-icons:vuejs}
+  ::glow{gardient='radial-gradient(circle at 10% 50%, #06b6d4 7%, #e5b30073 35%, #06b6d463 45%, #e5b300e6 82%)' height=100%}
+  ::
+
+  ::card{icon=carbon:logo-vue}
   #title
   Based on vuex-orm-next
   #description