enh: Introduce a landing page to scikit-learn Central

src/App.vue

@@ -35,12 +35,15 @@ const tabCounts = computed(() => ({
 
 const submitLabel = computed(() => {
   const map: Record<string, string> = {
+    home: 'Submit Package',
     catalog: 'Submit Package',
     'use-cases': 'Submit Use Case',
+    mcp: 'Submit Feedback',
+    skills: 'Submit Feedback',
     releases: 'Contribute',
     about: 'Submit Feedback',
   }
-  return map[(route.meta.tabKey as string) ?? 'catalog'] ?? 'Submit Package'
+  return map[(route.meta.tabKey as string) ?? 'home'] ?? 'Submit Package'
 })
 
 type ViewTabsExposed = ComponentPublicInstance & { tabsNavEl?: HTMLElement | null }
@@ -82,7 +85,7 @@ onBeforeUnmount(() => {
 })
 
 function onHeaderSubmit(): void {
-  const tab = (route.meta.tabKey as string) ?? 'catalog'
+  const tab = (route.meta.tabKey as string) ?? 'home'
   if (tab === 'releases') {
     window.open(
       'https://github.com/scikit-learn/scikit-learn/contribute',
@@ -92,7 +95,7 @@ function onHeaderSubmit(): void {
     return
   }
   if (tab === 'use-cases') return openModal('use-case')
-  if (tab === 'about') return openModal('feedback')
+  if (tab === 'about' || tab === 'mcp' || tab === 'skills') return openModal('feedback')
   return openModal('package')
 }
 </script>

src/components/ViewTabs.vue

@@ -7,7 +7,7 @@ const props = defineProps<{
 }>()
 
 const route = useRoute()
-const activeKey = computed(() => (route.meta.tabKey as string) ?? 'catalog')
+const activeKey = computed(() => (route.meta.tabKey as string) ?? 'home')
 
 const tabs: Array<{
   key: string
@@ -16,8 +16,11 @@ const tabs: Array<{
   label: string
   labelShort: string
 }> = [
+  { key: 'home', to: '/', icon: 'fa-train', label: 'Central', labelShort: 'Home' },
   { key: 'catalog', to: '/catalog', icon: 'fa-cubes', label: 'Ecosystem Catalog', labelShort: 'Catalog' },
   { key: 'use-cases', to: '/use-cases', icon: 'fa-lightbulb', label: 'Use Cases', labelShort: 'Use cases' },
+  { key: 'mcp', to: '/mcp', icon: 'fa-tower-broadcast', label: 'MCP Server', labelShort: 'MCP' },
+  { key: 'skills', to: '/skills', icon: 'fa-list-check', label: 'Skills', labelShort: 'Skills' },
   { key: 'releases', to: '/releases', icon: 'fa-tag', label: 'scikit-learn releases', labelShort: 'Releases' },
   { key: 'about', to: '/about', icon: 'fa-info-circle', label: 'About', labelShort: 'About' },
 ]
@@ -57,7 +60,7 @@ defineExpose({ tabsNavEl })
         class="tab"
         :class="{ 'is-active': activeKey === tab.key }"
         :aria-label="
-          tab.key !== 'about' && tab.key !== 'components'
+          tab.key === 'catalog' || tab.key === 'use-cases' || tab.key === 'releases'
             ? `${tab.label}, ${countFor(tab.key)} items`
             : tab.label
         "
@@ -66,7 +69,11 @@ defineExpose({ tabsNavEl })
         <i class="fas" :class="tab.icon" aria-hidden="true"></i>
         <span class="tab-label tab-label--full">{{ tab.label }}</span>
         <span class="tab-label tab-label--short">{{ tab.labelShort }}</span>
-        <span v-if="tab.key !== 'about' && tab.key !== 'components'" class="count" aria-hidden="true">
+        <span
+          v-if="tab.key === 'catalog' || tab.key === 'use-cases' || tab.key === 'releases'"
+          class="count"
+          aria-hidden="true"
+        >
           {{ countFor(tab.key) }}
         </span>
       </button>

src/router/index.ts

@@ -8,7 +8,9 @@ import {
 const routes: RouteRecordRaw[] = [
   {
     path: '/',
-    redirect: '/catalog',
+    name: 'home',
+    component: () => import('@/views/HomeView.vue'),
+    meta: { tabKey: 'home' },
   },
   {
     path: '/catalog',
@@ -22,6 +24,18 @@ const routes: RouteRecordRaw[] = [
     component: () => import('@/views/UseCasesView.vue'),
     meta: { tabKey: 'use-cases' },
   },
+  {
+    path: '/mcp',
+    name: 'mcp',
+    component: () => import('@/views/MCPView.vue'),
+    meta: { tabKey: 'mcp' },
+  },
+  {
+    path: '/skills',
+    name: 'skills',
+    component: () => import('@/views/SkillsView.vue'),
+    meta: { tabKey: 'skills' },
+  },
   {
     path: '/releases',
     name: 'releases',
@@ -55,6 +69,7 @@ export const router = createRouter({
     // Views scroll to the target card when a deep-link query is present.
     if (to.name === 'use-cases' && to.query.slug) return false
     if (to.name === 'catalog' && to.query.package) return false
+    if (to.hash) return { el: to.hash, top: 80 }
     return { top: 0 }
   },
 })