147 lines
7.8 KiB
JavaScript
147 lines
7.8 KiB
JavaScript
/**
|
|
* Documentation Engine for Intaleq Dashboard
|
|
*/
|
|
|
|
const docs = {
|
|
init: () => {
|
|
console.log('📚 Initializing Documentation...');
|
|
docs.bindEvents();
|
|
docs.renderSection('getting-started');
|
|
},
|
|
|
|
bindEvents: () => {
|
|
// Handle side-nav clicks
|
|
document.querySelectorAll('.docs-nav-link').forEach(link => {
|
|
link.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
const section = e.currentTarget.getAttribute('data-section');
|
|
docs.renderSection(section);
|
|
|
|
// Active state
|
|
document.querySelectorAll('.docs-nav-link').forEach(l => l.classList.remove('active', 'bg-blue-500/10', 'text-blue-400'));
|
|
e.currentTarget.classList.add('active', 'bg-blue-500/10', 'text-blue-400');
|
|
});
|
|
});
|
|
},
|
|
|
|
renderSection: (id) => {
|
|
const container = document.getElementById('docs-content');
|
|
if (!container) return;
|
|
|
|
// Content repository
|
|
const content = {
|
|
'getting-started': `
|
|
<div class="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
|
|
<div>
|
|
<h3 class="text-3xl font-black mb-4">Getting Started</h3>
|
|
<p class="text-slate-400 leading-relaxed">Welcome to the Intaleq Map Platform. Our APIs allow you to integrate high-quality vector maps, geocoding, and routing into your web and mobile applications with ease.</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="glass p-6 rounded-2xl border-white/5">
|
|
<h4 class="font-bold mb-2 flex items-center gap-2">
|
|
<i data-lucide="key" class="w-4 h-4 text-blue-400"></i>
|
|
1. Get an API Key
|
|
</h4>
|
|
<p class="text-xs text-slate-500">Go to the Credentials page and create your first API key.</p>
|
|
</div>
|
|
<div class="glass p-6 rounded-2xl border-white/5">
|
|
<h4 class="font-bold mb-2 flex items-center gap-2">
|
|
<i data-lucide="code" class="w-4 h-4 text-emerald-400"></i>
|
|
2. Install SDK
|
|
</h4>
|
|
<p class="text-xs text-slate-500">Use our MapLibre wrappers for JavaScript or Flutter.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<h4 class="text-lg font-bold">Base URL</h4>
|
|
<div class="bg-slate-900 rounded-xl p-4 font-mono text-sm border border-slate-800 text-blue-400">
|
|
https://map-dashbord.intaleqapp.com/api
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
'tiles-api': `
|
|
<div class="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
|
|
<div>
|
|
<h3 class="text-3xl font-black mb-2">Vector Tiles API</h3>
|
|
<p class="text-slate-400">Render high-performance vector maps from our global database.</p>
|
|
</div>
|
|
|
|
<div class="space-y-6">
|
|
<div class="endpoint-card glass rounded-2xl border-white/5 overflow-hidden">
|
|
<div class="p-4 bg-white/[0.02] border-b border-white/5 flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<span class="px-2 py-1 bg-green-500/20 text-green-400 text-[10px] font-black rounded uppercase">GET</span>
|
|
<code class="text-xs font-bold">/maps/style.json</code>
|
|
</div>
|
|
</div>
|
|
<div class="p-6">
|
|
<p class="text-sm text-slate-400 mb-6">Returns the MapLibre-compatible style configuration. Use the <code>theme</code> parameter to switch between 'light' and 'obsidian'.</p>
|
|
|
|
<h5 class="text-xs font-black uppercase tracking-widest text-slate-500 mb-4">Code Example</h5>
|
|
<div class="relative group">
|
|
<pre class="bg-slate-950 p-4 rounded-xl text-xs font-mono text-slate-300 leading-relaxed overflow-x-auto">
|
|
// Initialize MapLibre with Intaleq Style
|
|
const map = new maplibregl.Map({
|
|
container: 'map',
|
|
style: 'https://map-dashbord.intaleqapp.com/api/maps/style.json?theme=obsidian',
|
|
center: [35.9106, 31.9539], // Amman
|
|
zoom: 12
|
|
});</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
'geocoding-api': `
|
|
<div class="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
|
|
<div>
|
|
<h3 class="text-3xl font-black mb-2">Geocoding API</h3>
|
|
<p class="text-slate-400">Convert addresses to coordinates (Forward) or coordinates to addresses (Reverse).</p>
|
|
</div>
|
|
|
|
<div class="endpoint-card glass rounded-2xl border-white/5 overflow-hidden">
|
|
<div class="p-4 bg-white/[0.02] border-b border-white/5 flex items-center gap-3">
|
|
<span class="px-2 py-1 bg-green-500/20 text-green-400 text-[10px] font-black rounded uppercase">GET</span>
|
|
<code class="text-xs font-bold">/geocoding/search</code>
|
|
</div>
|
|
<div class="p-6">
|
|
<table class="w-full text-left text-xs mb-6">
|
|
<thead>
|
|
<tr class="text-slate-500 uppercase tracking-widest font-black border-b border-white/5">
|
|
<th class="pb-3">Parameter</th>
|
|
<th class="pb-3">Type</th>
|
|
<th class="pb-3">Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-white/[0.02]">
|
|
<tr>
|
|
<td class="py-3 font-bold text-blue-400 font-mono">q</td>
|
|
<td class="py-3 text-slate-500">string</td>
|
|
<td class="py-3">Search query (address, place, coordinates)</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-3 font-bold text-blue-400 font-mono">limit</td>
|
|
<td class="py-3 text-slate-500">number</td>
|
|
<td class="py-3">Max results (default: 5)</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h5 class="text-xs font-black uppercase tracking-widest text-slate-500 mb-4">Request</h5>
|
|
<pre class="bg-slate-950 p-4 rounded-xl text-xs font-mono text-blue-400 mb-4">curl "https://map-dashbord.intaleqapp.com/api/geocoding/search?q=Amman&limit=1" \\
|
|
-H "x-api-key: YOUR_API_KEY"</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`
|
|
};
|
|
|
|
container.innerHTML = content[id] || '<p class="text-slate-500">Documentation section coming soon...</p>';
|
|
lucide.createIcons();
|
|
}
|
|
};
|