picocrank 1.25.1 → 1.26.0

package/vue/examples/Welcome.vue

@@ -40,31 +40,13 @@
 	<Section
 		id="start-here"
 		title="Start here"
-		subtitle="Jump into the example areas"
+		subtitle="Browse example categories — use the sidebar for direct links, or the top bar when hubs are enabled"
 	>
 		<Navigation ref="welcomeNavigation">
 			<NavigationGrid />
 		</Navigation>
 	</Section>
 
-	<Section
-		title="Popular examples"
-		subtitle="A few good places to begin"
-	>
-		<div class="grid-boxed welcome-popular-grid">
-			<router-link
-				v-for="example in popularExamples"
-				:key="example.name"
-				:to="{ name: example.name }"
-				class="stat-display welcome-popular-card"
-			>
-				<span class="subtle">{{ example.category }}</span>
-				<span class="stat">{{ example.label }}</span>
-				<span class="welcome-popular-description">{{ example.description }}</span>
-			</router-link>
-		</div>
-	</Section>
-
 	<Section
 		title="Try it"
 		subtitle="Small interactions you can trigger right now"
@@ -104,38 +86,12 @@ import Section from '../components/Section.vue'
 import Navigation from '../components/Navigation.vue'
 import NavigationGrid from '../components/NavigationGrid.vue'
 import { useNotificationPopups } from '../composables/useNotificationPopups.js'
+import { registerWelcomeHubGrid } from '../data/navSectionHubs.js'
 import logoUrl from '/logo.png'
 
 const { show: showPopup } = useNotificationPopups()
 const welcomeNavigation = ref(null)
 
-const popularExamples = [
-	{
-		name: 'ThemePreview',
-		category: 'Layouts',
-		label: 'Theme Switcher',
-		description: 'Switch drop-in themes live',
-	},
-	{
-		name: 'TableExample',
-		category: 'Data display',
-		label: 'Table',
-		description: 'Sorting, pagination, and column filters',
-	},
-	{
-		name: 'CalendarExample',
-		category: 'Data display',
-		label: 'Calendar',
-		description: 'Events, drag-and-drop, and date ranges',
-	},
-	{
-		name: 'ButtonsExample',
-		category: 'Forms & input',
-		label: 'Buttons',
-		description: 'Variants, toolbars, and form actions',
-	},
-]
-
 function showWelcomeToast() {
 	showPopup({
 		label: 'WELCOME',
@@ -147,45 +103,7 @@ function showWelcomeToast() {
 }
 
 onMounted(() => {
-	if (!welcomeNavigation.value) {
-		return
-	}
-
-	const nav = welcomeNavigation.value
-
-	nav.addRouterLink('PageStructure', 'Page structure', {
-		description: 'Sidebar, header, QuickSearch, and breadcrumbs',
-	})
-	nav.addRouterLink('ThemePreview', 'Theme Switcher', {
-		description: 'Drop-in themes on Femtocrank',
-	})
-	nav.addRouterLink('TableExample', 'Table', {
-		description: 'Lists with sorting, pagination, and filters',
-	})
-	nav.addRouterLink('TableRemoteExample', 'Remote table', {
-		description: 'Server-style fetchRows pagination and filters',
-	})
-	nav.addRouterLink('CalendarExample', 'Calendar', {
-		description: 'Month view with events',
-	})
-	nav.addRouterLink('ButtonsExample', 'Buttons', {
-		description: 'Button variants and toolbars',
-	})
-	nav.addRouterLink('FormExample', 'Forms', {
-		description: 'Labels, inputs, and fieldsets',
-	})
-	nav.addRouterLink('LoginExample', 'Login', {
-		description: 'Auth form with OAuth tabs',
-	})
-	nav.addRouterLink('StatusExample', 'Status', {
-		description: 'Notifications and inline status',
-	})
-	nav.addRouterLink('NavigationGridExample', 'Navigation grid', {
-		description: 'Icon grid for settings hubs',
-	})
-	nav.addRouterLink('TabsExample', 'Tabs', {
-		description: 'Tabbed content regions',
-	})
+	registerWelcomeHubGrid(welcomeNavigation.value)
 })
 </script>
 
@@ -212,31 +130,4 @@ onMounted(() => {
 	gap: 0.5rem;
 	margin-bottom: 0.75rem;
 }
-
-.welcome-popular-grid {
-	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
-}
-
-.welcome-popular-card {
-	display: flex;
-	flex-direction: column;
-	gap: 0.35rem;
-	text-decoration: none;
-	color: inherit;
-	transition: transform 0.15s ease, box-shadow 0.15s ease;
-}
-
-.welcome-popular-card:hover {
-	transform: translateY(-2px);
-	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
-}
-
-.welcome-popular-description {
-	font-size: 0.85rem;
-	color: #666;
-}
-
-html[data-theme="dark"] .welcome-popular-description {
-	color: #bbb;
-}
 </style>