docs: update contribute style

Author: hunghg255

docs/.vitepress/components/HomeContributors.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { contributors } from '../../../scripts/contributors';
+</script>
+
+<template>
+  <div class="vp-doc">
+    <h2 class="op50 font-normal pt-5 pb-2">
+      Contributors
+    </h2>
+  </div>
+  <div class="text-lg max-w-200 text-center leading-7 p-10">
+    <div class="flex flex-wrap gap-1 justify-center">
+      <a v-for="{ name, avatar } of contributors" :key="name" :href="`https://github.com/${name}`" class="m-0" rel="noopener noreferrer" :aria-label="`${name} on GitHub`">
+        <img loading="lazy" :src="avatar" width="40" height="40" class="rounded-full min-w-10 min-h-10 h-10 w-10" :alt="`${name}'s avatar`">
+      </a>
+    </div>
+    <br>
+  </div>
+</template>

docs/.vitepress/components/HomePage.vue

@@ -3,6 +3,8 @@ import { VPTeamMembers } from 'vitepress/theme'
 import { computed } from 'vue'
 import { useTranslate } from '../i18n/composable'
 
+import HomeContributors from './HomeContributors.vue'
+
 const t = useTranslate()
 
 const members = computed(() => [
@@ -23,10 +25,6 @@ const members = computed(() => [
   <div flex="~ col wrap" mt8 items-center>
     <VPTeamMembers size="small" :members="members" />
 
-    <br />
-
-    <a href="https://github.com/agiletech-web-dev/js-utils-es/graphs/contributors">
-      <img src="https://contrib.rocks/image?repo=agiletech-web-dev/js-utils-es" />
-    </a>
+    <HomeContributors />
   </div>
 </template>

docs/.vitepress/locale.ts

@@ -51,6 +51,7 @@ export function getLocaleConfig(lang: string) {
       items: [
         {
           text: t('Array Utilities'),
+          collapsed: false,
           items: [
             { text: 'chunk', link: '/reference/array/chunk' },
             { text: 'countBy', link: '/reference/array/countBy' },
@@ -109,6 +110,7 @@ export function getLocaleConfig(lang: string) {
         },
         {
           text: t('Function Utilities'),
+          collapsed: false,
           items: [
             { text: 'debounce', link: '/reference/function/debounce' },
             { text: 'throttle', link: '/reference/function/throttle' },
@@ -119,6 +121,7 @@ export function getLocaleConfig(lang: string) {
         },
         {
           text: t('Math Utilities'),
+          collapsed: false,
           items: [
             { text: 'clamp', link: '/reference/math/clamp' },
             { text: 'inRange', link: '/reference/math/inRange' },
@@ -136,6 +139,7 @@ export function getLocaleConfig(lang: string) {
         },
         {
           text: t('Object Utilities'),
+          collapsed: false,
           items: [
             { text: 'clone', link: '/reference/object/clone' },
             { text: 'omit', link: '/reference/object/omit' },
@@ -147,6 +151,7 @@ export function getLocaleConfig(lang: string) {
         },
         {
           text: t('Predicates'),
+          collapsed: false,
           items: [
             { text: 'isBoolean', link: '/reference/predicate/isBoolean' },
             { text: 'isDate', link: '/reference/predicate/isDate' },
@@ -165,13 +170,15 @@ export function getLocaleConfig(lang: string) {
         },
         {
           text: t('Promise Utilities'),
+          collapsed: false,
           items: [
             { text: 'delay', link: '/reference/promise/delay' },
             { text: 'pChain', link: '/reference/promise/pChain' },
           ],
         },
         {
           text: t('String Utilities'),
+          collapsed: false,
           items: [
             { text: 'snakeCase', link: '/reference/string/snakeCase' },
             { text: 'kebabCase', link: '/reference/string/kebabCase' },

docs/.vitepress/theme/index.ts

@@ -1,13 +1,13 @@
 import Theme from 'vitepress/theme'
 import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client'
 import type { EnhanceAppContext } from 'vitepress'
-import 'uno.css'
 import './style.css'
 // import '@nolebase/vitepress-plugin-git-changelog/client/style.css'
 import '@shikijs/vitepress-twoslash/style.css'
 import Contributors from '../components/Contributors.vue'
 import Changelog from '../components/Changelog.vue'
 import Layout from './Layout.vue'
+import 'uno.css'
 
 export default {
   ...Theme,

docs/.vitepress/theme/style.css

@@ -191,3 +191,12 @@
   border-radius: 12px;
   background: var(--vp-c-bg-soft);
 }
+
+.vp-doc h2 {
+  margin: 48px 0 16px;
+  border-top: 1px solid var(--vp-c-divider);
+  padding-top: 24px;
+  letter-spacing: -.02em;
+  line-height: 32px;
+  font-size: 24px;
+}

scripts/contributors.json

@@ -0,0 +1,3 @@
+[
+  "hunghg255"
+]

scripts/contributors.ts

@@ -0,0 +1,31 @@
+import contributors from './contributors.json'
+
+export interface Contributor {
+  name: string
+  avatar: string
+}
+
+export interface CoreTeam {
+  avatar: string
+  name: string
+  github: string
+  twitter?: string
+  sponsors?: boolean
+  description: string
+  packages?: string[]
+  functions?: string[]
+}
+
+const contributorsAvatars: Record<string, string> = {}
+
+function getAvatarUrl(name: string) {
+  return `https://avatars.githubusercontent.com/${name}?v=4`
+}
+
+const contributorList = (contributors as string[]).reduce((acc, name) => {
+  contributorsAvatars[name] = getAvatarUrl(name)
+  acc.push({ name, avatar: contributorsAvatars[name] })
+  return acc
+}, [] as Contributor[])
+
+export { contributorList as contributors }