340 lines
24 KiB
JavaScript
340 lines
24 KiB
JavaScript
/**
|
|
* Documentation Engine for Intaleq Dashboard
|
|
* Comprehensive API Reference (EN/AR)
|
|
* Updated with Premium Visuals, High-Performance Examples, and Official SDKs
|
|
*/
|
|
|
|
const docs = {
|
|
init: () => {
|
|
console.log('📚 Intaleq Documentation Module Init');
|
|
docs.bindEvents();
|
|
|
|
// Initial render based on existing active links or default
|
|
const activeLink = document.querySelector('.docs-nav-link.active');
|
|
const section = activeLink ? activeLink.getAttribute('data-section') : 'getting-started';
|
|
docs.renderSection(section);
|
|
},
|
|
|
|
bindEvents: () => {
|
|
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 management
|
|
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;
|
|
|
|
const lang = i18n.currentLang || 'en';
|
|
const isAr = lang === 'ar';
|
|
|
|
const content = {
|
|
'getting-started': `
|
|
<div class="space-y-12 animate-in fade-in slide-in-from-bottom-6 duration-700">
|
|
<div class="relative overflow-hidden rounded-[3rem] p-12 bg-gradient-to-br from-blue-600/20 via-blue-500/5 to-transparent border border-white/10 group">
|
|
<div class="absolute -top-24 -right-24 w-96 h-96 bg-blue-500/10 blur-[120px] rounded-full group-hover:bg-blue-500/20 transition-all duration-700"></div>
|
|
<div class="relative z-10">
|
|
<h3 class="text-5xl font-black mb-6 text-gradient">${isAr ? 'انطلق في ثوانٍ' : 'Launch in Seconds'}</h3>
|
|
<p class="text-slate-300 text-xl leading-relaxed max-w-2xl">
|
|
${isAr ? 'مرحباً بك في مستقبل الخرائط في المنطقة. توفر لك منصة "انطلاق" واجهات برمجية ذكية، خرائط Vector فائقة الدقة، ومباني ثلاثية الأبعاد متكاملة.' : 'Welcome to the future of regional mapping. Intaleq provides high-fidelity vector tiles, intelligent geocoding, and native 3D building support for Jordan & Syria.'}
|
|
</p>
|
|
<div class="flex gap-4 mt-8">
|
|
<a href="https://pub.dev/packages/intaleq_maps" target="_blank" class="px-6 py-3 bg-blue-600 text-white rounded-2xl font-black text-sm flex items-center gap-2 hover:bg-blue-500 transition-all">
|
|
<i data-lucide="package"></i> Flutter SDK
|
|
</a>
|
|
<a href="https://www.npmjs.com/package/intaleq-maps-gl" target="_blank" class="px-6 py-3 bg-white text-slate-950 rounded-2xl font-black text-sm flex items-center gap-2 hover:bg-slate-100 transition-all">
|
|
<i data-lucide="package"></i> JS SDK
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<div class="glass p-10 rounded-[2.5rem] border-white/5 bg-gradient-to-b from-white/[0.02] to-transparent hover:border-blue-500/30 transition-all group">
|
|
<div class="w-16 h-16 rounded-2xl bg-blue-500/10 flex items-center justify-center text-blue-400 mb-8 font-black text-2xl group-hover:scale-110 transition-transform">01</div>
|
|
<h4 class="font-black text-2xl mb-4">${isAr ? 'مفتاح الوصول' : 'Access Key'}</h4>
|
|
<p class="text-slate-400 leading-relaxed">${isAr ? 'قم بإنشاء مفتاح API من لوحة التحكم لتفعيل طلباتك.' : 'Generate your secure API key from the dashboard to authenticate requests.'}</p>
|
|
</div>
|
|
<div class="glass p-10 rounded-[2.5rem] border-white/5 bg-gradient-to-b from-white/[0.02] to-transparent hover:border-emerald-500/30 transition-all group">
|
|
<div class="w-16 h-16 rounded-2xl bg-emerald-500/10 flex items-center justify-center text-emerald-400 mb-8 font-black text-2xl group-hover:scale-110 transition-transform">02</div>
|
|
<h4 class="font-black text-2xl mb-4">${isAr ? 'تكامل الخريطة' : 'Map Integration'}</h4>
|
|
<p class="text-slate-400 leading-relaxed">${isAr ? 'اختر النمط (Obsidian أو Light) وادمج الخريطة في تطبيقك.' : 'Select a theme and integrate the vector tiles using our GL styles.'}</p>
|
|
</div>
|
|
<div class="glass p-10 rounded-[2.5rem] border-white/5 bg-gradient-to-b from-white/[0.02] to-transparent hover:border-violet-500/30 transition-all group">
|
|
<div class="w-16 h-16 rounded-2xl bg-violet-500/10 flex items-center justify-center text-violet-400 mb-8 font-black text-2xl group-hover:scale-110 transition-transform">03</div>
|
|
<h4 class="font-black text-2xl mb-4">${isAr ? 'بيانات ذكية' : 'Smart Data'}</h4>
|
|
<p class="text-slate-400 leading-relaxed">${isAr ? 'استخدم خدمات البحث والتوجيه لإضافة ذكاء مكاني لتطبيقك.' : 'Leverage Geocoding and Routing APIs for advanced spatial intelligence.'}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-8 pt-6">
|
|
<div class="flex items-center gap-4">
|
|
<div class="h-8 w-1.5 bg-blue-500 rounded-full"></div>
|
|
<h4 class="text-3xl font-black">${isAr ? 'بيانات الوصول والمصادقة' : 'Domain & Authentication'}</h4>
|
|
</div>
|
|
|
|
<div class="bg-slate-950 rounded-[3rem] p-10 border border-slate-800 relative group overflow-hidden shadow-2xl">
|
|
<div class="absolute top-0 right-0 p-6 opacity-20 group-hover:opacity-100 transition-opacity">
|
|
<span class="bg-blue-500/10 text-blue-400 px-4 py-1.5 rounded-full text-xs font-black uppercase tracking-widest">Production URL</span>
|
|
</div>
|
|
<code class="text-blue-400 font-mono text-2xl block mb-6 select-all">https://map-saas.intaleq.com/api</code>
|
|
<div class="flex flex-col md:flex-row gap-8 text-slate-400">
|
|
<div class="flex-1 space-y-2">
|
|
<p class="text-sm font-bold uppercase text-slate-500 tracking-widest italic">${isAr ? 'طريقة المصادقة' : 'Auth Method'}</p>
|
|
<p class="text-lg">${isAr ? 'يتم إرسال المفتاح عبر الـ HTTP Header التالي:' : 'Pass your API key in the following HTTP header:'}</p>
|
|
<code class="text-blue-300 font-mono font-black text-xl">x-api-key</code>
|
|
</div>
|
|
<div class="flex-1 space-y-2 border-slate-800 md:border-l md:pl-8">
|
|
<p class="text-sm font-bold uppercase text-slate-500 tracking-widest italic">${isAr ? 'نطاق الوصول' : 'Allowed Origins'}</p>
|
|
<p class="text-lg">${isAr ? 'تأكد من إضافة النطاق الخاص بك في إعدادات المفتاح.' : 'Ensure your request origin is listed in the key restrictions.'}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
'sdks': `
|
|
<div class="space-y-12 animate-in fade-in slide-in-from-bottom-6 duration-700">
|
|
<header>
|
|
<h3 class="text-5xl font-black mb-4 text-gradient">${isAr ? 'المكتبات البرمجية (SDKs)' : 'SDKs & Client Libraries'}</h3>
|
|
<p class="text-slate-400 text-xl max-w-xl">${isAr ? 'استخدم مكتباتنا الجاهزة لدمج الخرائط والخدمات في ثوانٍ.' : 'Accelerate your development with our official enterprise-grade client libraries.'}</p>
|
|
</header>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
|
|
<!-- Flutter SDK Card -->
|
|
<div class="glass p-10 rounded-[3rem] border-white/5 flex flex-col hover:border-blue-500/30 transition-all">
|
|
<div class="flex items-center gap-4 mb-8">
|
|
<div class="w-12 h-12 rounded-xl bg-blue-500/10 flex items-center justify-center text-blue-400">
|
|
<i data-lucide="smartphone"></i>
|
|
</div>
|
|
<h4 class="text-2xl font-black text-white">Flutter SDK</h4>
|
|
</div>
|
|
<p class="text-slate-400 mb-8 flex-1 leading-relaxed">
|
|
${isAr ? 'مكتبة متكاملة لنظام Flutter تدعم أندرويد و iOS والويب.' : 'A robust Flutter wrapper for MapLibre with native Intaleq services integrated.'}
|
|
</p>
|
|
<div class="bg-slate-950 p-6 rounded-2xl border border-slate-800 font-mono text-xs mb-8">
|
|
<span class="text-slate-500"># pubspec.yaml</span><br>
|
|
<span class="text-blue-400">intaleq_maps:</span> <span class="text-emerald-400">^1.0.0</span>
|
|
</div>
|
|
<a href="https://pub.dev/packages/intaleq_maps" target="_blank" class="btn btn-primary w-full justify-center">View on pub.dev</a>
|
|
</div>
|
|
|
|
<!-- JS SDK Card -->
|
|
<div class="glass p-10 rounded-[3rem] border-white/5 flex flex-col hover:border-emerald-500/30 transition-all">
|
|
<div class="flex items-center gap-4 mb-8">
|
|
<div class="w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center text-emerald-400">
|
|
<i data-lucide="globe"></i>
|
|
</div>
|
|
<h4 class="text-2xl font-black text-white">JavaScript SDK</h4>
|
|
</div>
|
|
<p class="text-slate-400 mb-8 flex-1 leading-relaxed">
|
|
${isAr ? 'مكتبة JavaScript حديثة مدعومة بـ TypeScript لتطبيقات الويب.' : 'Modern TypeScript-ready SDK for seamless web map integration and routing.'}
|
|
</p>
|
|
<div class="bg-slate-950 p-6 rounded-2xl border border-slate-800 font-mono text-xs mb-8">
|
|
<span class="text-slate-500"># Install via NPM</span><br>
|
|
<span class="text-emerald-400">npm i intaleq-maps-gl</span>
|
|
</div>
|
|
<a href="https://www.npmjs.com/package/intaleq-maps-gl" target="_blank" class="btn btn-primary w-full justify-center">View on NPM</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-indigo-900/10 p-12 rounded-[3.5rem] border border-indigo-500/20">
|
|
<h4 class="text-2xl font-black mb-6 text-indigo-400">${isAr ? 'مثال: إضافة مؤشر (JS SDK)' : 'Example: Adding a Marker (JS SDK)'}</h4>
|
|
<pre class="bg-slate-950 p-10 rounded-[2.5rem] border border-slate-800 text-xs font-mono text-slate-300 leading-loose overflow-x-auto">
|
|
import { IntaleqMap } from 'intaleq-maps-gl';
|
|
|
|
const map = new IntaleqMap({
|
|
container: 'map',
|
|
apiKey: 'YOUR_KEY',
|
|
styleType: 'obsidian'
|
|
});
|
|
|
|
map.addIntaleqMarker({
|
|
position: [35.91, 31.95], // [lng, lat]
|
|
color: '#0D47A1'
|
|
});</pre>
|
|
</div>
|
|
</div>
|
|
`,
|
|
'tiles-api': `
|
|
<div class="space-y-12 animate-in fade-in slide-in-from-bottom-6 duration-700">
|
|
<header class="flex flex-col md:flex-row md:items-end justify-between gap-6">
|
|
<div>
|
|
<h3 class="text-5xl font-black mb-4 text-gradient">${isAr ? 'خرائط الـ Vector' : 'Vector Tiles API'}</h3>
|
|
<p class="text-slate-400 text-xl max-w-xl">${isAr ? 'خرائط تفاعلية فائقة السرعة تدعم العرض ثلاثي الأبعاد والتحكم الكامل في الخصائص.' : 'High-performance interactive maps with native 3D buildings and custom GL styles.'}</p>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="endpoint-card glass rounded-[3.5rem] border-white/5 overflow-hidden shadow-2xl bg-gradient-to-b from-white/[0.03] to-transparent">
|
|
<div class="p-8 bg-white/[0.04] border-b border-white/5 flex items-center justify-between">
|
|
<div class="flex items-center gap-6">
|
|
<div class="px-4 py-2 bg-emerald-500 text-white text-sm font-black rounded-xl shadow-lg shadow-emerald-500/20 uppercase tracking-tighter">GET</div>
|
|
<code class="text-lg font-bold text-slate-100 font-mono">/v1/maps/style.json</code>
|
|
</div>
|
|
</div>
|
|
<div class="p-12">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
|
<div class="space-y-8">
|
|
<div>
|
|
<h5 class="text-[10px] font-black uppercase tracking-[0.2em] text-blue-400 mb-6">${isAr ? 'المعاملات المدعومة' : 'Query Parameters'}</h5>
|
|
<div class="space-y-4">
|
|
<div class="flex items-center justify-between p-4 bg-white/5 rounded-2xl border border-white/5">
|
|
<code class="text-blue-300 font-bold">theme</code>
|
|
<span class="text-[10px] font-mono text-slate-600 uppercase">Optional (obsidian | light)</span>
|
|
</div>
|
|
<div class="flex items-center justify-between p-4 bg-white/5 rounded-2xl border border-white/5">
|
|
<code class="text-blue-300 font-bold">key</code>
|
|
<span class="text-[10px] font-mono text-rose-500 uppercase">Required</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-slate-950 rounded-[2.5rem] p-10 border border-slate-800 shadow-inner">
|
|
<h5 class="text-[10px] font-black uppercase tracking-[0.2em] text-slate-500 mb-6">${isAr ? 'رابط النمط المباشر' : 'Direct Style URL'}</h5>
|
|
<code class="text-xs text-blue-400 break-all select-all font-mono leading-relaxed">
|
|
https://map-saas.intaleq.com/api/v1/maps/style.json?theme=obsidian&key=YOUR_API_KEY
|
|
</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
'geocoding-api': `
|
|
<div class="space-y-12 animate-in fade-in slide-in-from-bottom-6 duration-700">
|
|
<header>
|
|
<h3 class="text-5xl font-black mb-4 text-gradient">${isAr ? 'البحث المكاني (Geocoding)' : 'Geocoding API'}</h3>
|
|
<p class="text-slate-400 text-xl max-w-2xl">${isAr ? 'حوّل العناوين إلى إحداثيات أو العكس بدقة غير مسبوقة في الأردن وسوريا.' : 'Transform addresses into coordinates or reverse resolve locations with extreme accuracy in the Levant region.'}</p>
|
|
</header>
|
|
|
|
<div class="endpoint-card glass rounded-[3.5rem] border-white/5 overflow-hidden shadow-2xl">
|
|
<div class="p-8 bg-blue-500/5 border-b border-white/5 flex items-center justify-between">
|
|
<div class="flex items-center gap-4">
|
|
<div class="px-4 py-2 bg-blue-600 text-white text-xs font-black rounded-xl shadow-lg shadow-blue-500/20 uppercase tracking-widest">SEARCH</div>
|
|
<code class="text-base font-bold text-slate-200">/v1/geocoding/search</code>
|
|
</div>
|
|
</div>
|
|
<div class="p-12">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
|
<div class="space-y-8">
|
|
<table class="w-full text-sm">
|
|
<thead class="text-[10px] text-slate-500 font-black uppercase tracking-[0.2em]">
|
|
<tr class="border-b border-white/5"><th class="pb-4">Param</th><th class="pb-4 text-right">Description</th></tr>
|
|
</thead>
|
|
<tbody class="text-slate-400 divide-y divide-white/[0.02]">
|
|
<tr><td class="py-4 font-bold text-blue-300 font-mono">q</td><td class="py-4 text-right">Query (e.g. "Masjid Hashem")</td></tr>
|
|
<tr><td class="py-4 font-bold text-blue-300 font-mono">limit</td><td class="py-4 text-right">Max results (Default: 5)</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="bg-slate-950 rounded-[3rem] p-8 border border-slate-800 shadow-inner">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<span class="text-[10px] font-black uppercase text-emerald-400 tracking-widest flex items-center gap-2">
|
|
<i data-lucide="layers" class="w-3 h-3"></i> Real-World Response
|
|
</span>
|
|
</div>
|
|
<pre class="text-[10px] font-mono text-emerald-300/80 leading-relaxed overflow-y-auto h-64">
|
|
{
|
|
"results": [
|
|
{
|
|
"id": 5843,
|
|
"name": "مسجد هاشم",
|
|
"name_ar": "مسجد هاشم",
|
|
"category": "building",
|
|
"governorate": "الزرقاء",
|
|
"location": { "lat": 32.10659, "lng": 36.18301 },
|
|
"full_address": "لواء قصبة الزرقاء، الزرقاء",
|
|
"distance_km": "12.68",
|
|
"source": "user_place"
|
|
}
|
|
],
|
|
"source": "cache_hit"
|
|
}</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
'routing-api': `
|
|
<div class="space-y-12 animate-in fade-in slide-in-from-bottom-6 duration-700">
|
|
<header class="relative p-12 overflow-hidden rounded-[3.5rem] bg-slate-900 border border-white/5 md:flex md:items-center md:justify-between shadow-2xl">
|
|
<div class="absolute -top-24 -left-24 w-64 h-64 bg-violet-600/10 blur-[100px] rounded-full"></div>
|
|
<div class="relative z-10">
|
|
<h3 class="text-5xl font-black mb-4 text-gradient">${isAr ? 'محرك التوجيه (Routing)' : 'Routing Engine'}</h3>
|
|
<p class="text-slate-400 text-xl max-w-xl">${isAr ? 'حساب أسرع المسارات مع تحليلات لحظية لحركة المرور.' : 'Fast pathfinding with traffic-aware duration metrics.'}</p>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="endpoint-card glass rounded-[3.5rem] border-white/5 overflow-hidden shadow-2xl">
|
|
<div class="p-8 bg-violet-500/5 border-b border-white/5 flex items-center justify-between">
|
|
<div class="flex items-center gap-4">
|
|
<div class="px-4 py-2 bg-violet-600 text-white text-xs font-black rounded-xl shadow-lg shadow-violet-500/20 uppercase tracking-widest">ROUTE</div>
|
|
<code class="text-base font-bold text-slate-200">/v1/routing/route</code>
|
|
</div>
|
|
</div>
|
|
<div class="p-12">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
|
<div class="space-y-8">
|
|
<div class="p-6 bg-slate-900/40 rounded-3xl border border-white/5">
|
|
<h5 class="text-[10px] font-black uppercase tracking-widest text-violet-400 mb-4">Required Parameters</h5>
|
|
<ul class="text-xs text-slate-400 space-y-4">
|
|
<li class="flex justify-between border-b border-white/5 pb-2"><span>start</span> <span class="text-violet-300 font-mono italic">"35.91,31.95"</span></li>
|
|
<li class="flex justify-between border-b border-white/5 pb-2"><span>end</span> <span class="text-violet-300 font-mono italic">"35.85,31.82"</span></li>
|
|
<li class="flex justify-between"><span>profile</span> <span class="text-slate-500">car | bike | foot</span></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-slate-950 rounded-[3rem] p-10 border border-slate-800 shadow-inner">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<span class="text-[10px] font-black uppercase text-violet-400 tracking-widest flex items-center gap-2">
|
|
<i data-lucide="activity" class="w-3.5 h-3.5"></i> Production Response
|
|
</span>
|
|
</div>
|
|
<pre class="text-[10px] font-mono text-violet-300/80 leading-loose overflow-x-auto h-64">
|
|
{
|
|
"distance": 30313.8,
|
|
"duration": 1975,
|
|
"trafficAwareDuration": 1975,
|
|
"points": "_cvbE_th{Ev@iJpHtDLEJKz@^XJn@...",
|
|
"instructions": [
|
|
{
|
|
"text": "Continue onto شارع الأمير الحسن",
|
|
"distance": 172.8,
|
|
"street_name": "شارع الأمير الحسن"
|
|
},
|
|
{
|
|
"text": "اتجه قليلاً لليمين خلال شارع الجيش",
|
|
"distance": 190.1,
|
|
"street_name": "شارع الجيش"
|
|
}
|
|
]
|
|
}</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`
|
|
};
|
|
|
|
container.innerHTML = content[id] || '<div class="h-64 flex items-center justify-center italic text-slate-600">Documentation section coming soon...</div>';
|
|
|
|
// Re-initialize icons
|
|
if (window.lucide) lucide.createIcons();
|
|
}
|
|
};
|
|
|
|
// Global initializer
|
|
window.docs = docs;
|