main 🧊 rework home page

debabin · debabin · commit ceb5bde73485 · 2025-06-19T01:37:43.000+07:00
diff --git a/packages/core/README.md b/packages/core/README.md
@@ -25,7 +25,7 @@ npm install @siberiacancode/reactuse
 ```
 
 ```tsx
-import { useCounter } from '@reactuses/core';
+import { useCounter } from '@siberiacancode/reactuse';
 
 function App() {
   const counter = useCounter(0);
diff --git a/packages/docs/app/.vitepress/config.mts b/packages/docs/app/.vitepress/config.mts
@@ -27,16 +27,11 @@ export default async () => {
     []
   );
 
-  const homePageFeatures = contentItems.map((item) => ({
-    title: item.text,
-    details: item.description,
-    link: item.link
-  }));
-
   return defineConfig({
     base: '/reactuse/',
     title: 'reactuse',
-    description: '🚀 the largest and most useful hook library',
+    description:
+      'Improve your react applications with our library 📦 designed for comfort and speed',
     markdown: {
       codeTransformers: [transformerTwoslash()],
       languages: ['js', 'jsx', 'ts', 'tsx']
@@ -62,10 +57,6 @@ export default async () => {
         }
       ]);
 
-      if (pageData.relativePath === 'index.md') {
-        pageData.frontmatter.features = homePageFeatures;
-      }
-
       if (pageData.relativePath.includes('hooks')) {
         pageData.title = pageData.params?.name;
       }
@@ -158,8 +149,7 @@ export default async () => {
         {
           icon: 'npm',
           link: 'https://www.npmjs.com/package/@siberiacancode/reactuse'
-        },
-        { icon: 'youtube', link: 'https://www.youtube.com/@siberiacancode' }
+        }
       ]
     }
   });
diff --git a/packages/docs/app/.vitepress/sections/HomeContainer/HomeContainer.vue b/packages/docs/app/.vitepress/sections/HomeContainer/HomeContainer.vue
@@ -0,0 +1,7 @@
+<template>
+  <div
+    class="relative my-[24px] px-[24px] sm:my-[48px] sm:px-[48px] lg:my-[64px] lg:px-[64px] xl:mx-auto xl:my-[64px] xl:max-w-[1152px] xl:p-0"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/packages/docs/app/.vitepress/sections/HomeHeroBefore/HomeHeroBefore.data.ts b/packages/docs/app/.vitepress/sections/HomeHeroBefore/HomeHeroBefore.data.ts
@@ -0,0 +1,11 @@
+import { getContent } from '../../../../src/utils';
+
+export default {
+  async load() {
+    const hooks = await getContent('hook');
+
+    return {
+      count: hooks.length
+    };
+  }
+};
diff --git a/packages/docs/app/.vitepress/sections/HomeHeroBefore/HomeHeroBefore.vue b/packages/docs/app/.vitepress/sections/HomeHeroBefore/HomeHeroBefore.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import HomeContainer from '../HomeContainer/HomeContainer.vue';
+import { data } from './HomeHeroBefore.data';
+</script>
+
+<template>
+  <HomeContainer
+    class="mt-[37px]! -mb-24! sm:-mb-[131px]! hidden justify-center md:flex lg:justify-start"
+  >
+    <a
+      href="/reactuse/introduction.html"
+      class="flex items-center rounded-lg border-[var(--vp-c-brand-1)] bg-[var(--vp-c-bg-soft)] px-3 py-2 text-sm hover:bg-[var(--vp-c-bg-alt)]"
+    >
+      <span class="text-md font-medium">{{ data.count }} hooks ready to use</span>
+    </a>
+  </HomeContainer>
+</template>
diff --git a/packages/docs/app/.vitepress/sections/HomeHooks/HomeHooks.data.ts b/packages/docs/app/.vitepress/sections/HomeHooks/HomeHooks.data.ts
@@ -0,0 +1,11 @@
+import { getContent } from '../../../../src/utils';
+
+export default {
+  async load() {
+    const hooks = await getContent('hook');
+
+    return {
+      hooks
+    };
+  }
+};
diff --git a/packages/docs/app/.vitepress/sections/HomeHooks/HomeHooks.vue b/packages/docs/app/.vitepress/sections/HomeHooks/HomeHooks.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { data } from './HomeHooks.data';
+
+const searchQuery = ref('');
+
+const filteredHooks = computed(() =>
+  data.hooks
+    .map((hook) => {
+      if (hook.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
+        return {
+          name: hook.name,
+          disabled: false
+        };
+
+      return {
+        name: hook.name,
+        disabled: true
+      };
+    })
+    .sort((a, b) => Number(a.disabled) - Number(b.disabled))
+);
+</script>
+
+<template>
+  <div
+    class="py-4! px-2! relative mt-10 h-[325px] overflow-hidden rounded-lg bg-[var(--vp-c-bg-soft)]"
+  >
+    <div>
+      <div class="flex w-fit items-center gap-3 rounded-lg bg-[var(--vp-c-bg)] p-2 px-4 text-2xl">
+        <svg
+          class="stroke-[var(--vp-c-brand-1)]"
+          xmlns="http://www.w3.org/2000/svg"
+          width="20"
+          height="20"
+          viewBox="0 0 22 22"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="m21 21-4.34-4.34" />
+          <circle cx="11" cy="11" r="8" />
+        </svg>
+        <input v-model="searchQuery" type="text" placeholder="search hook" />
+      </div>
+    </div>
+
+    <div class="absolute left-2 top-20 flex w-[120%] flex-wrap justify-start gap-3">
+      <div v-for="hook in filteredHooks.slice(0, 40)" :key="hook.name">
+        <a
+          :href="`/reactuse/functions/hooks/${hook.name}`"
+          class="no-underline! text-[var(--vp-c-text-1)]! text-2xl"
+        >
+          <div
+            class="items-center rounded-lg border-[1px] border-[var(--vp-c-bg)] bg-[var(--vp-c-bg)] px-6 py-2 hover:border-[var(--vp-c-brand-1)] hover:bg-[var(--vp-c-bg-alt)]"
+            :class="{
+              'opacity-50': hook.disabled
+            }"
+          >
+            {{ hook.name }}
+          </div>
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/docs/app/.vitepress/sections/index.ts b/packages/docs/app/.vitepress/sections/index.ts
@@ -0,0 +1,2 @@
+export { default as HomeHeroBefore } from './HomeHeroBefore/HomeHeroBefore.vue';
+export { default as HomeHooks } from './HomeHooks/HomeHooks.vue';
diff --git a/packages/docs/app/.vitepress/theme/index.ts b/packages/docs/app/.vitepress/theme/index.ts
@@ -2,12 +2,20 @@ import type { EnhanceAppContext } from 'vitepress';
 
 import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client';
 import Theme from 'vitepress/theme';
+import { h } from 'vue';
+
+import { HomeHeroBefore } from '../sections';
 
 import '@shikijs/vitepress-twoslash/style.css';
 import './global.css';
 
 export default {
   extends: Theme,
+  Layout() {
+    return h(Theme.Layout, null, {
+      'home-hero-before': () => h(HomeHeroBefore)
+    });
+  },
   enhanceApp({ app }: EnhanceAppContext) {
     app.use(TwoslashFloatingVue);
   }
diff --git a/packages/docs/app/index.md b/packages/docs/app/index.md
@@ -1,5 +1,4 @@
 ---
-# https://vitepress.dev/reference/default-theme-home-page
 layout: home
 
 hero:
@@ -16,4 +15,35 @@ hero:
     - theme: alt
       text: View on GitHub
       link: https://github.com/siberiacancode/reactuse
+features:
+  - title: Lightweight & Scalable
+    details: Hooks are lightweight and easy to use, making it simple to integrate into any project.
+    icon: |
+      <svg xmlns="http://www.w3.org/2000/svg" class="stroke-[var(--vp-c-brand-1)]" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-expand"><path d="m21 21-6-6m6 6v-4.8m0 4.8h-4.8"></path><path d="M3 16.2V21m0 0h4.8M3 21l6-6"></path><path d="M21 7.8V3m0 0h-4.8M21 3l-6 6"></path><path d="M3 7.8V3m0 0h4.8M3 3l6 6"></path></svg>
+  - title: Clean & consistent
+    details: Hooks follow a unified approach for consistency and maintainability.
+    icon: |
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="stroke-[var(--vp-c-brand-1)]" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-aperture"><circle cx="12" cy="12" r="10"></circle><line x1="14.31" x2="20.05" y1="8" y2="17.94"></line><line x1="9.69" x2="21.17" y1="8" y2="8"></line><line x1="7.38" x2="13.12" y1="12" y2="2.06"></line><line x1="9.69" x2="3.95" y1="16" y2="6.06"></line><line x1="14.31" x2="2.83" y1="16" y2="16"></line><line x1="16.62" x2="10.88" y1="12" y2="21.94"></line></svg>
+  - title: Customizable
+    details: Install and customize hooks effortlessly using our CLI
+    icon: |
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="stroke-[var(--vp-c-brand-1)]" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-palette"><circle cx="13.5" cy="6.5" r=".5"></circle><circle cx="17.5" cy="10.5" r=".5"></circle><circle cx="8.5" cy="7.5" r=".5"></circle><circle cx="6.5" cy="12.5" r=".5"></circle><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"></path></svg>
+  - title: Large collection
+    details: Extensive collection of hooks for all your needs, from state management to browser APIs.
+    icon: |
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="stroke-[var(--vp-c-brand-1)]" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-package-check"><path d="m16 16 2 2 4-4"></path><path d="M21 10V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l2-1.14"></path><path d="M16.5 9.4 7.55 4.24"></path><polyline points="3.29 7 12 12 20.71 7"></polyline><line x1="12" x2="12" y1="22" y2="12"></line></svg>
+  - title: Tree shakable
+    details: The hooks are tree shakable, so you only import the hooks you need in your application.
+    icon: |
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="stroke-[var(--vp-c-brand-1)]" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-tree-deciduous"><path d="M8 19h8a4 4 0 0 0 3.8-2.8 4 4 0 0 0-1.6-4.5c1-1.1 1-2.7.4-4-.7-1.2-2.2-2-3.6-1.7a3 3 0 0 0-3-3 3 3 0 0 0-3 3c-1.4-.2-2.9.5-3.6 1.7-.7 1.3-.5 2.9.4 4a4 4 0 0 0-1.6 4.5A4 4 0 0 0 8 19Z"></path><path d="M12 19v3"></path></svg>
+  - title: Active community
+    details: Join our active community on Github and help make reactuse even better.
+    icon: |
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" width="24" height="24" viewBox="0 0 24 24" class="stroke-[var(--vp-c-brand-1)]" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
 ---
+
+<script setup> 
+import { HomeHooks } from './.vitepress/sections' 
+</script>
+
+<HomeHooks />
diff --git a/packages/docs/app/introduction.md b/packages/docs/app/introduction.md
@@ -1,11 +1,57 @@
-# Getting started
+# Introduction
 
-## 🦉 Philosophy
+React Use delivers **production-ready hooks** that solve real-world problems. Built with **TypeScript-first** approach, **SSR compatibility**, and **tree-shaking optimization** - everything you need to build modern React applications. Improve your react applications with our library 📦 designed for comfort and speed.
 
-🚀 React Use this is a library that will allow you to easy and simple to use React hooks. Unlike its competitors, this package takes into account the features of React and also contains a huge number of useful hooks.
+## Getting Started
 
-## Usage
+```bash
+npm install @siberiacancode/reactuse
+```
 
-You can use this library either as an npm package or by injecting the code directly into your project, giving you the flexibility to integrate it in a way that best suits your workflow.
+After installation, you can use any of our hooks in your components:
 
-Designed with ease of use in mind, it allows you to quickly access its features without unnecessary setup, making development smoother and more efficient. Whether you prefer managing dependencies through npm or simply copying the necessary code, this approach ensures that you can start using it with minimal effort while maintaining full control over how it fits into your project.
+```tsx
+import { useCounter } from '@siberiacancode/reactuse';
+
+const App = () => {
+  const counter = useCounter(0);
+
+  return (
+    <div>
+      <h1>Count: {counter.value}</h1>
+      <button onClick={() => counter.inc()}>+1</button>
+      <button onClick={() => counter.dec()}>-1</button>
+    </div>
+  );
+};
+```
+
+## CLI Installation
+
+Use the CLI to add hooks to your project with [useverse](https://www.npmjs.com/package/useverse).
+
+```bash
+npx useverse@latest init
+```
+
+```bash
+npx useverse@latest add [hook]
+```
+
+You will be presented with a list of hooks to choose from:
+
+```bash
+Which hooks would you like to add? › Space to select. A to toggle all.
+Enter to submit.
+
+◯  useActiveElement
+◯  useAsync
+◯  useBattery
+◯  useBluetooth
+◯  useBoolean
+◯  useBreakpoints
+◯  useBrowserLanguage
+◯  useClickOutside
+◯  useClipboard
+◯  useConst
+```

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export { default as HomeHeroBefore } from './HomeHeroBefore/HomeHeroBefore.vue';`
	`2`	`+export { default as HomeHooks } from './HomeHooks/HomeHooks.vue';`