redesign hpme page

Author: saeedvaziry

docs/.vitepress/theme/MyLayout.vue

@@ -1,19 +1,30 @@
 <script setup>
+import { useData } from 'vitepress'
 import Theme from 'vitepress/theme'
-import Contributors from "./components/Contributors.vue";
+import HomePage from "./components/HomePage.vue";
 
 const { Layout } = Theme
+const { frontmatter } = useData()
 </script>
 
 <template>
   <Layout>
-    <template #home-features-after>
-      <div
-        class="flex flex-col justify-center items-center w-full mt-10"
-      >
-        <h3 class="text-4xl! font-semibold! text-center mb-4">Contributors</h3>
-        <Contributors />
-      </div>
+    <template #home-hero-before>
+      <HomePage v-if="frontmatter.customHome" />
     </template>
   </Layout>
-</template>
+</template>
+
+<style>
+/* Hide default VitePress home content when using custom homepage */
+.VPHome:has(+ .home-page),
+.VPHome .VPHero,
+.VPHome .VPFeatures {
+  display: none !important;
+}
+
+/* When custom home is active, hide the default home layout elements */
+[data-custom-home="true"] .VPHome > *:not(.home-page) {
+  display: none !important;
+}
+</style>

docs/.vitepress/theme/components/Contributors.vue

@@ -3,20 +3,64 @@ import { ref, onMounted } from 'vue'
 
 const contributors = ref<any[]>([])
 
+const CACHE_KEY = 'tweakphp_contributors'
+const CACHE_DURATION = 60 * 60 * 1000 // 1 hour in milliseconds
+
 const fromRepo = (repo: string) =>
     fetch(`https://api.github.com/repos/tweakphp/${repo}/contributors`)
         .then((res) => res.json())
         .catch(() => [])
 
+const getCachedData = () => {
+  if (typeof localStorage === 'undefined') return null
+
+  try {
+    const cached = localStorage.getItem(CACHE_KEY)
+    if (!cached) return null
+
+    const { data, timestamp } = JSON.parse(cached)
+    const now = Date.now()
+
+    if (now - timestamp < CACHE_DURATION) {
+      return data
+    }
+
+    localStorage.removeItem(CACHE_KEY)
+    return null
+  } catch {
+    return null
+  }
+}
+
+const setCachedData = (data: any[]) => {
+  if (typeof localStorage === 'undefined') return
+
+  try {
+    localStorage.setItem(CACHE_KEY, JSON.stringify({
+      data,
+      timestamp: Date.now()
+    }))
+  } catch {
+    // Ignore storage errors
+  }
+}
+
 const getContributors = async () => {
+  const cached = getCachedData()
+
+  if (cached) {
+    contributors.value = cached
+    return
+  }
+
   const users = await Promise.all([
     fromRepo('tweakphp'),
     fromRepo('docs'),
     fromRepo('client'),
     fromRepo('.github'),
   ])
 
-  contributors.value = users
+  const result = users
       .reduce((acc, data = []) => {
         if (!Array.isArray(data)) return acc
         return [...acc, ...data.filter(i => i.login)]
@@ -34,6 +78,9 @@ const getContributors = async () => {
           avatar_url: user.avatar_url
         }]
       }, [])
+
+  contributors.value = result
+  setCachedData(result)
 }
 
 onMounted(() => {