Initial commit: Clean DSS implementation
Migrated from design-system-swarm with fresh git history.
Old project history preserved in /home/overbits/apps/design-system-swarm
Core components:
- MCP Server (Python FastAPI with mcp 1.23.1)
- Claude Plugin (agents, commands, skills, strategies, hooks, core)
- DSS Backend (dss-mvp1 - token translation, Figma sync)
- Admin UI (Node.js/React)
- Server (Node.js/Express)
- Storybook integration (dss-mvp1/.storybook)
Self-contained configuration:
- All paths relative or use DSS_BASE_PATH=/home/overbits/dss
- PYTHONPATH configured for dss-mvp1 and dss-claude-plugin
- .env file with all configuration
- Claude plugin uses ${CLAUDE_PLUGIN_ROOT} for portability
Migration completed: $(date)
🤖 Clean migration with full functionality preserved
This commit is contained in:
Digital Production Factory
224
admin-ui/js/core/landing-page.js
Normal file
224
admin-ui/js/core/landing-page.js
Normal file
@@ -0,0 +1,224 @@
|
||||
/**
|
||||
* admin-ui/js/core/landing-page.js
|
||||
* Manages the landing page that displays all available dashboards
|
||||
*/
|
||||
|
||||
const DASHBOARDS = [
|
||||
{
|
||||
id: 'dashboard',
|
||||
category: 'Overview',
|
||||
icon: '📊',
|
||||
title: 'Dashboard',
|
||||
description: 'System overview and key metrics',
|
||||
href: '#dashboard'
|
||||
},
|
||||
{
|
||||
id: 'projects',
|
||||
category: 'Overview',
|
||||
icon: '📁',
|
||||
title: 'Projects',
|
||||
description: 'Manage and organize projects',
|
||||
href: '#projects'
|
||||
},
|
||||
{
|
||||
id: 'services',
|
||||
category: 'Tools',
|
||||
icon: '⚙️',
|
||||
title: 'Services',
|
||||
description: 'Manage system services and endpoints',
|
||||
href: '#services'
|
||||
},
|
||||
{
|
||||
id: 'quick-wins',
|
||||
category: 'Tools',
|
||||
icon: '⭐',
|
||||
title: 'Quick Wins',
|
||||
description: 'Quick optimization opportunities',
|
||||
href: '#quick-wins'
|
||||
},
|
||||
{
|
||||
id: 'chat',
|
||||
category: 'Tools',
|
||||
icon: '💬',
|
||||
title: 'Chat',
|
||||
description: 'AI-powered chat assistant',
|
||||
href: '#chat'
|
||||
},
|
||||
{
|
||||
id: 'tokens',
|
||||
category: 'Design System',
|
||||
icon: '🎨',
|
||||
title: 'Tokens',
|
||||
description: 'Design tokens and variables',
|
||||
href: '#tokens'
|
||||
},
|
||||
{
|
||||
id: 'components',
|
||||
category: 'Design System',
|
||||
icon: '🧩',
|
||||
title: 'Components',
|
||||
description: 'Reusable component library',
|
||||
href: '#components'
|
||||
},
|
||||
{
|
||||
id: 'figma',
|
||||
category: 'Design System',
|
||||
icon: '🎭',
|
||||
title: 'Figma',
|
||||
description: 'Figma integration and sync',
|
||||
href: '#figma'
|
||||
},
|
||||
{
|
||||
id: 'storybook',
|
||||
category: 'Design System',
|
||||
icon: '📚',
|
||||
title: 'Storybook',
|
||||
description: 'Component documentation',
|
||||
href: 'http://localhost:6006',
|
||||
target: '_blank'
|
||||
},
|
||||
{
|
||||
id: 'docs',
|
||||
category: 'System',
|
||||
icon: '📖',
|
||||
title: 'Documentation',
|
||||
description: 'System documentation and guides',
|
||||
href: '#docs'
|
||||
},
|
||||
{
|
||||
id: 'teams',
|
||||
category: 'System',
|
||||
icon: '👥',
|
||||
title: 'Teams',
|
||||
description: 'Team management and permissions',
|
||||
href: '#teams'
|
||||
},
|
||||
{
|
||||
id: 'audit',
|
||||
category: 'System',
|
||||
icon: '✅',
|
||||
title: 'Audit',
|
||||
description: 'Audit logs and system events',
|
||||
href: '#audit'
|
||||
},
|
||||
{
|
||||
id: 'plugins',
|
||||
category: 'System',
|
||||
icon: '🔌',
|
||||
title: 'Plugins',
|
||||
description: 'Plugin management system',
|
||||
href: '#plugins'
|
||||
},
|
||||
{
|
||||
id: 'settings',
|
||||
category: 'System',
|
||||
icon: '⚡',
|
||||
title: 'Settings',
|
||||
description: 'System configuration and preferences',
|
||||
href: '#settings'
|
||||
}
|
||||
];
|
||||
|
||||
class LandingPage {
|
||||
constructor(appElement) {
|
||||
this.app = appElement;
|
||||
this.landingPage = null;
|
||||
this.pageContent = null;
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.landingPage = this.app.querySelector('#landing-page');
|
||||
this.pageContent = this.app.querySelector('#page-content');
|
||||
|
||||
if (this.landingPage) {
|
||||
this.render();
|
||||
this.bindEvents();
|
||||
}
|
||||
|
||||
// Listen for hash changes
|
||||
window.addEventListener('hashchange', () => this.handleRouteChange());
|
||||
this.handleRouteChange();
|
||||
}
|
||||
|
||||
handleRouteChange() {
|
||||
const hash = window.location.hash.substring(1) || '';
|
||||
const isLanding = hash === '' || hash === 'landing';
|
||||
|
||||
if (this.landingPage) {
|
||||
this.landingPage.classList.toggle('active', isLanding);
|
||||
}
|
||||
|
||||
if (this.pageContent) {
|
||||
this.pageContent.style.display = isLanding ? 'none' : 'block';
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
if (!this.landingPage) return;
|
||||
|
||||
const categories = this.groupByCategory();
|
||||
|
||||
this.landingPage.innerHTML = `
|
||||
<div class="landing-hero">
|
||||
<h1>Design System Swarm</h1>
|
||||
<p>Welcome to your design system management interface. Select a dashboard to get started.</p>
|
||||
</div>
|
||||
|
||||
<div class="landing-content">
|
||||
${Object.entries(categories)
|
||||
.map(([category, dashboards]) => `
|
||||
<div class="dashboard-category">
|
||||
<h2 class="dashboard-category__title">${category}</h2>
|
||||
<div class="dashboard-grid">
|
||||
${dashboards
|
||||
.map(d => `
|
||||
<a href="${d.href}" class="dashboard-card" ${d.target ? `target="${d.target}"` : ''} data-page="${d.id}">
|
||||
<div class="dashboard-card__icon">${d.icon}</div>
|
||||
<div class="dashboard-card__content">
|
||||
<h3 class="dashboard-card__title">${d.title}</h3>
|
||||
<p class="dashboard-card__description">${d.description}</p>
|
||||
</div>
|
||||
<div class="dashboard-card__meta">
|
||||
<span>→</span>
|
||||
</div>
|
||||
</a>
|
||||
`)
|
||||
.join('')}
|
||||
</div>
|
||||
</div>
|
||||
`)
|
||||
.join('')}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
groupByCategory() {
|
||||
const grouped = {};
|
||||
|
||||
DASHBOARDS.forEach(dashboard => {
|
||||
if (!grouped[dashboard.category]) {
|
||||
grouped[dashboard.category] = [];
|
||||
}
|
||||
grouped[dashboard.category].push(dashboard);
|
||||
});
|
||||
|
||||
return grouped;
|
||||
}
|
||||
|
||||
bindEvents() {
|
||||
const cards = this.landingPage.querySelectorAll('.dashboard-card');
|
||||
cards.forEach(card => {
|
||||
card.addEventListener('click', (e) => {
|
||||
// Allow external links (Storybook) to open normally
|
||||
if (card.target === '_blank') {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
window.location.hash = card.getAttribute('href').substring(1);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default LandingPage;
|
||||
Reference in New Issue
Block a user