Skip to content

Commit ceb5bde

Browse files
debabindebabin
committed
main 🧊 rework home page
1 parent ca5e974 commit ceb5bde

File tree

11 files changed

+212
-21
lines changed

11 files changed

+212
-21
lines changed

‎packages/core/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ npm install @siberiacancode/reactuse
2525
```
2626

2727
```tsx
28-
import { useCounter } from '@reactuses/core';
28+
import { useCounter } from '@siberiacancode/reactuse';
2929

3030
function App() {
3131
const counter = useCounter(0);

‎packages/docs/app/.vitepress/config.mts‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -27,16 +27,11 @@ export default async () => {
2727
[]
2828
);
2929

30-
const homePageFeatures = contentItems.map((item) => ({
31-
title: item.text,
32-
details: item.description,
33-
link: item.link
34-
}));
35-
3630
return defineConfig({
3731
base: '/reactuse/',
3832
title: 'reactuse',
39-
description: '🚀 the largest and most useful hook library',
33+
description:
34+
'Improve your react applications with our library 📦 designed for comfort and speed',
4035
markdown: {
4136
codeTransformers: [transformerTwoslash()],
4237
languages: ['js', 'jsx', 'ts', 'tsx']
@@ -62,10 +57,6 @@ export default async () => {
6257
}
6358
]);
6459

65-
if (pageData.relativePath === 'index.md') {
66-
pageData.frontmatter.features = homePageFeatures;
67-
}
68-
6960
if (pageData.relativePath.includes('hooks')) {
7061
pageData.title = pageData.params?.name;
7162
}
@@ -158,8 +149,7 @@ export default async () => {
158149
{
159150
icon: 'npm',
160151
link: 'https://www.npmjs.com/package/@siberiacancode/reactuse'
161-
},
162-
{ icon: 'youtube', link: 'https://www.youtube.com/@siberiacancode' }
152+
}
163153
]
164154
}
165155
});

‎packages/docs/app/.vitepress/sections/HomeContainer/HomeContainer.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<template>
2+
<div
3+
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"
4+
>
5+
<slot />
6+
</div>
7+
</template>

‎packages/docs/app/.vitepress/sections/HomeHeroBefore/HomeHeroBefore.data.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { getContent } from '../../../../src/utils';
2+
3+
export default {
4+
async load() {
5+
const hooks = await getContent('hook');
6+
7+
return {
8+
count: hooks.length
9+
};
10+
}
11+
};

‎packages/docs/app/.vitepress/sections/HomeHeroBefore/HomeHeroBefore.vue‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<script setup lang="ts">
2+
import HomeContainer from '../HomeContainer/HomeContainer.vue';
3+
import { data } from './HomeHeroBefore.data';
4+
</script>
5+
6+
<template>
7+
<HomeContainer
8+
class="mt-[37px]! -mb-24! sm:-mb-[131px]! hidden justify-center md:flex lg:justify-start"
9+
>
10+
<a
11+
href="/reactuse/introduction.html"
12+
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)]"
13+
>
14+
<span class="text-md font-medium">{{ data.count }} hooks ready to use</span>
15+
</a>
16+
</HomeContainer>
17+
</template>

‎packages/docs/app/.vitepress/sections/HomeHooks/HomeHooks.data.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { getContent } from '../../../../src/utils';
2+
3+
export default {
4+
async load() {
5+
const hooks = await getContent('hook');
6+
7+
return {
8+
hooks
9+
};
10+
}
11+
};

‎packages/docs/app/.vitepress/sections/HomeHooks/HomeHooks.vue‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<script setup lang="ts">
2+
import { computed, ref } from 'vue';
3+
4+
import { data } from './HomeHooks.data';
5+
6+
const searchQuery = ref('');
7+
8+
const filteredHooks = computed(() =>
9+
data.hooks
10+
.map((hook) => {
11+
if (hook.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
12+
return {
13+
name: hook.name,
14+
disabled: false
15+
};
16+
17+
return {
18+
name: hook.name,
19+
disabled: true
20+
};
21+
})
22+
.sort((a, b) => Number(a.disabled) - Number(b.disabled))
23+
);
24+
</script>
25+
26+
<template>
27+
<div
28+
class="py-4! px-2! relative mt-10 h-[325px] overflow-hidden rounded-lg bg-[var(--vp-c-bg-soft)]"
29+
>
30+
<div>
31+
<div class="flex w-fit items-center gap-3 rounded-lg bg-[var(--vp-c-bg)] p-2 px-4 text-2xl">
32+
<svg
33+
class="stroke-[var(--vp-c-brand-1)]"
34+
xmlns="http://www.w3.org/2000/svg"
35+
width="20"
36+
height="20"
37+
viewBox="0 0 22 22"
38+
fill="none"
39+
stroke="currentColor"
40+
stroke-width="2"
41+
stroke-linecap="round"
42+
stroke-linejoin="round"
43+
>
44+
<path d="m21 21-4.34-4.34" />
45+
<circle cx="11" cy="11" r="8" />
46+
</svg>
47+
<input v-model="searchQuery" type="text" placeholder="search hook" />
48+
</div>
49+
</div>
50+
51+
<div class="absolute left-2 top-20 flex w-[120%] flex-wrap justify-start gap-3">
52+
<div v-for="hook in filteredHooks.slice(0, 40)" :key="hook.name">
53+
<a
54+
:href="`/reactuse/functions/hooks/${hook.name}`"
55+
class="no-underline! text-[var(--vp-c-text-1)]! text-2xl"
56+
>
57+
<div
58+
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)]"
59+
:class="{
60+
'opacity-50': hook.disabled
61+
}"
62+
>
63+
{{ hook.name }}
64+
</div>
65+
</a>
66+
</div>
67+
</div>
68+
</div>
69+
</template>

‎packages/docs/app/.vitepress/sections/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { default as HomeHeroBefore } from './HomeHeroBefore/HomeHeroBefore.vue';
2+
export { default as HomeHooks } from './HomeHooks/HomeHooks.vue';

‎packages/docs/app/.vitepress/theme/index.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,20 @@ import type { EnhanceAppContext } from 'vitepress';
22

33
import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client';
44
import Theme from 'vitepress/theme';
5+
import { h } from 'vue';
6+
7+
import { HomeHeroBefore } from '../sections';
58

69
import '@shikijs/vitepress-twoslash/style.css';
710
import './global.css';
811

912
export default {
1013
extends: Theme,
14+
Layout() {
15+
return h(Theme.Layout, null, {
16+
'home-hero-before': () => h(HomeHeroBefore)
17+
});
18+
},
1119
enhanceApp({ app }: EnhanceAppContext) {
1220
app.use(TwoslashFloatingVue);
1321
}

‎packages/docs/app/index.md‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
---
2-
# https://vitepress.dev/reference/default-theme-home-page
32
layout: home
43

54
hero:
@@ -16,4 +15,35 @@ hero:
1615
- theme: alt
1716
text: View on GitHub
1817
link: https://github.com/siberiacancode/reactuse
18+
features:
19+
- title: Lightweight & Scalable
20+
details: Hooks are lightweight and easy to use, making it simple to integrate into any project.
21+
icon: |
22+
<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>
23+
- title: Clean & consistent
24+
details: Hooks follow a unified approach for consistency and maintainability.
25+
icon: |
26+
<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>
27+
- title: Customizable
28+
details: Install and customize hooks effortlessly using our CLI
29+
icon: |
30+
<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>
31+
- title: Large collection
32+
details: Extensive collection of hooks for all your needs, from state management to browser APIs.
33+
icon: |
34+
<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>
35+
- title: Tree shakable
36+
details: The hooks are tree shakable, so you only import the hooks you need in your application.
37+
icon: |
38+
<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>
39+
- title: Active community
40+
details: Join our active community on Github and help make reactuse even better.
41+
icon: |
42+
<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>
1943
---
44+
45+
<script setup>
46+
import { HomeHooks } from './.vitepress/sections'
47+
</script>
48+
49+
<HomeHooks />

0 commit comments

Comments
 (0)