Hamza/maps-saas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2026-04-15-4

Browse Source
This commit is contained in:
Hamza-Ayed
2026-04-15 19:56:49 +03:00
parent 9cd1ac4c1d
commit 3d61362602
54 changed files with 12659 additions and 436 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/dashboard/js/docs.js
+146
View File
@@ -0,0 +1,146 @@
/**
* 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();
}
};