@sherpahow/sherpa-sdk
Version:
Sherpa JavaScript SDK for in-app help and product tours. Built with TypeScript, Lit web components, and Nano Stores.
186 lines (164 loc) • 4.72 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sherpa SDK - Development Environment</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
margin: 0;
padding: 40px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
max-width: 800px;
background: white;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.header {
background: linear-gradient(135deg, #22c55e, #16a34a);
color: white;
padding: 40px;
text-align: center;
}
.header h1 {
margin: 0;
font-size: 32px;
font-weight: 700;
letter-spacing: -0.5px;
}
.header p {
margin: 12px 0 0 0;
opacity: 0.9;
font-size: 18px;
}
.content {
padding: 40px;
}
.demo-links {
display: grid;
gap: 20px;
margin-bottom: 30px;
}
.demo-link {
display: block;
padding: 20px 24px;
background: #f8fafc;
border: 2px solid #e2e8f0;
border-radius: 8px;
text-decoration: none;
color: #1e293b;
transition: all 0.2s ease;
position: relative;
overflow: hidden;
}
.demo-link:hover {
border-color: #3b82f6;
background: #eff6ff;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}
.demo-link h3 {
margin: 0 0 8px 0;
font-size: 18px;
font-weight: 600;
color: #1e293b;
}
.demo-link p {
margin: 0;
color: #64748b;
font-size: 14px;
line-height: 1.5;
}
.demo-link .arrow {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
opacity: 0.5;
transition: all 0.2s ease;
}
.demo-link:hover .arrow {
opacity: 1;
transform: translateY(-50%) translateX(4px);
}
.info {
background: #f1f5f9;
border-left: 4px solid #3b82f6;
padding: 16px 20px;
border-radius: 4px;
margin-top: 24px;
}
.info h4 {
margin: 0 0 8px 0;
color: #1e293b;
font-size: 16px;
font-weight: 600;
}
.info p {
margin: 0;
color: #64748b;
font-size: 14px;
line-height: 1.5;
}
.code {
background: #1e293b;
color: #e2e8f0;
padding: 12px 16px;
border-radius: 6px;
font-family:
'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
font-size: 13px;
margin: 8px 0;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🧭 Sherpa SDK</h1>
<p>Development Environment</p>
</div>
<div class="content">
<div class="demo-links">
<a href="/dev/demos/components/" class="demo-link">
<h3>Components Demo</h3>
<p>Interactive showcase of all Sherpa components with live controls</p>
<span class="arrow">→</span>
</a>
<a href="/dev/demos/features/" class="demo-link">
<h3>Features Demo</h3>
<p>Comprehensive demonstration of SDK features, tours, and integrations</p>
<span class="arrow">→</span>
</a>
<a href="/dev/demos/search/" class="demo-link">
<h3>Search Demo</h3>
<p>Search functionality showcase with various scenarios and configurations</p>
<span class="arrow">→</span>
</a>
</div>
<div class="info">
<h4>📁 Improved Structure</h4>
<p>
The project now follows a better organized structure with co-located tests, separated
development environment, and modular components.
</p>
</div>
<div class="info">
<h4>🛠️ Available Commands</h4>
<div class="code">pnpm dev # Start development server</div>
<div class="code">pnpm dev:components # Components demo</div>
<div class="code">pnpm dev:demo # Features demo</div>
<div class="code">pnpm dev:search # Search demo</div>
</div>
</div>
</div>
</body>
</html>