প্রকল্প সম্পর্কে

goatdash হলো [GoatCounter](https://www.goatcounter.com/) অ্যানালিটিক্সের জন্য একটি হালকা, গোপনীয়তা-কেন্দ্রিক ড্যাশবোর্ড। এটি প্ল্যাগিন বা নির্ভরতা ছাড়াই সম্পূর্ণ ক্লায়েন্ট-সাইডে ভ্যানিলা জাভাস্ক্রিপ্ট হিসেবে চলে এবং এর নিজস্ব কোনো ব্যাকএন্ড সার্ভার নেই। শুধুমাত্র কয়েকটি স্ট্যাটিক ফাইল যেকোনো ওয়েব হোস্টে কপি করলেই ডিপ্লয় করা যায়। ## এটি কী করে ড্যাশবোর্ডটি HTTPS এর মাধ্যমে পাবলিক v0 API ব্যবহার করে একটি বা একাধিক GoatCounter ইনস্ট্যান্সের সাথে সংযোগ স্থাপন করে। এটি নিম্নলিখিত অ্যানালিটিক্স ডেটা প্রদর্শন করে: - **পাঁচটি KPI কার্ড**: ইউনিক ভিজিটর (প্রবণতা সহ), পেজভিউ, শীর্ষ পৃষ্ঠা, ট্র্যাকড পাথ এবং মোট ইভেন্ট। - **রেফেরার বিশ্লেষণ**: ট্র্যাফিক চ্যানেল অনুযায়ী (ডিরেক্ট, সার্চ ইঞ্জিন, ক্যাম্পেইন, অন্যান্য সাইট) গোষ্ঠীবদ্ধ, যেখানে প্রতিটি রেফেরার এবং তাদের আনা পৃষ্ঠাগুলিতে ড্রিল-ডাউন করা যায়। - **ক্রোপ্লெথ বিশ্বমানচিত্র**: স্কয়ার-রুট স্কেল ব্যবহার করে ভিজিট সংখ্যা অনুযায়ী দেশগুলো রঙ করা, হোভার টুলটিপ, জুম, প্যান এবং রিসেট সুবিধা সহ। - **সর্বত্র ড্রিল-ডাউন**: যেকোনো পৃষ্ঠা ক্লিক করে তার রেফেরার দেখুন, যেকোনো রেফেরার ক্লিক করে সেই পৃষ্ঠা দেখুন যা তৈরি করেছে, ব্রাউজার/সিস্টেম/ডিভাইস সংস্করণ, দেশ থেকে অঞ্চল, এবং ক্যাম্পেইন থেকে সোর্স URL। - **নমনীয় তারিখ পরিসর**: আজ, ৭ দিন, ৩০ দিন, ৯০ দিন বা কাস্টম শুরু/শেষ সময়কাল। ## মাল্টি-সাইট সমর্থন goatdash এমন মাল্টি-সাইট সেটআপের জন্য ডিজাইন করা হয়েছে যেখানে প্রতিটি সাইট নিজস্ব ডোমেইনে থাকে কিন্তু একটি মাত্র GoatCounter অ্যাকাউন্ট ভাগ করে। GoatCounter `Host` হেডার থেকে সঠিক সাইট চিহ্নিত করে, তাই ড্যাশবোর্ডটি প্রতিটি সাইটকে এর নিজস্ব ডোমেইনে ক্রস-অরিজিনভাবে কুয়েরি করে। সাইডবার `/api/v0/sites` থেকে API key-এর অনুমতির স্কোপে সকল সাইট তালিকাভুক্ত করে। অক্ষম সাইটগুলোর ব্যাকগ্রাউন্ড প্রিক্যাশিংয়ের কারণে সাইট পরিবর্তন দ্রুত হয়। ## আর্কিটেকচার এবং স্ট্যাক - **শুধুমাত্র ভ্যানিলা JS**: কোনো React, bundler বা CDN কল নেই। মোট সাতটি স্ট্যাটিক ফাইল। - **কোনো ব্যাকএন্ড নেই**: ব্রাউজার সরাসরি GoatCounter API-এর সাথে কথা বলে। প্যাচ করার কোনো সার্ভার, ব্যাকআপ নেওয়ার কোনো ডেটাবেস বা alive রাখার কোনো সার্ভিস নেই। - **Service worker**: অ্যাপ শেল এবং ভার্সনযুক্ত অ্যাসেট ক্যাশে করে তাৎক্ষণিক রিলোডের জন্য; API রেসপন্স stale-while-revalidate কৌশলে ক্যাশে করা হয়। - **থিম**: ডার্ক, লাইট অথবা অটো মোড, topbar বোতাম দ্বারা স্পর্শকাতরভাবে প্রয়োগ করা হয়। `theme.js` স্ক্রিপ্ট কঠোর CSP-এর সাথে সামঞ্জস্যপূর্ণ (`default-src 'self'`)। - **ভাষা**: স্প্যানিশ, ইংরেজি অথবা অটো-ডিটেক্ট, `localStorage`-এ সংরক্ষিত। - **ডেমো মোড**: API কী ছাড়াই বাস্তবসম্মত নমুনা ডেটা লোড করে অন্বেষণের সুযোগ দেয়। ## ইনস্টলেশন কোনো ইনস্টল স্ক্রিপ্ট নেই, কোনও কিছু কম্পাইল করতে হবে না। যেকোনো HTTP সার্ভার থেকে স্ট্যাটিক ফাইল পরিবেশন করুন: ```sh python3 -m http.server 8000 ``` প্রয়োজনীয়তা: একটি স্ট্যাটিক ওয়েব সার্ভার এবং একটি GoatCounter ইনস্ট্যান্স যার v0 API ব্রাউজার থেকে HTTPS এর মাধ্যমে সাবরাধে। Docker, Node বা বিল্ড টুলস প্রয়োজন নেই। প্রোডাকশন মাল্টি-সাইট ডিপ্লয়মেন্টের জন্য, আপনার ওয়েব সার্ভারকে একটি সমর্পিত ডোমেইন (যেমন `stats.example.com`) থেকে ফাইল পরিবেশনের জন্য কনফিগার করুন এবং ইনডেক্স HTML-এ `Cache-Control: no-store` সেট করুন। অ্যাসেট ফাইলে ভার্সন কোয়েরি স্ট্রিং (যেমন `app.js?v=3`) ব্যবহৃত হয় এবং প্রতিটি ডিপ্লয়মেন্টে স্ট্যাল ক্যাশ সমস্যা এড়াতে এটি বান্‌প করতে হবে। একটি ঐচ্ছিক systemd-ভিত্তিক সাপ্তাহিক স্বয়ংক্রিয় আপডেটার সরবরাহ করা হয়েছে (`deploy/goatdash-update.sh`) যা সর্বশেষ GitHub রিলিজ ডাউনলোড করে, এর SHA256 চেকসাম যাচাই করে, বর্তমান ইনস্টলেশন ব্যাকআপ করে এবং নতুন সংস্করণ স্থাপন করে। ## কনফিগারেশন প্রথম লোডে সংযোগ স্ক্রিনে আবশ্যক: - আপনার সাইটের(গুলি) **GoatCounter URL** (যেমন `https://stats.cloudless.club`)。 - **API কী** যা GoatCounter-এ Settings > API অংশে তৈরি করতে হবে, যেখানে অন্তত Count এবং Read স্ট্যাটিসটিক্স পারমিশন থাকতে হবে। উভয় মান ব্রাউজারের `localStorage`-এ সংরক্ষিত হয় এবং শুধুমাত্র HTTPS এর মাধ্যমে আপনার GoatCounter ইনস্ট্যান্সে পাঠানো হয়। থিম, ভাষা, নির্বাচিত সাইট এবং তারিখ পরিসরও স্থানীয়ভাবে সংরক্ষিত হয়। মাল্টি-সাইট সেটআপের জন্য, প্রতিটি সাইটের নিজস্ব ডোমেইন থাকতে হবে যা একই GoatCounter ইনস্টলেশনের দিকে নির্দেশ করে। GoatCounter `Access-Control-Allow-Origin: *` পাঠায়, যা কোনো প্রক্সি ছাড়াই ক্রস-অরিজিন অনুরোধ সক্ষম করে। নোট করুন যে প্রতিটি স্ব authenticated অনুরোধে একটি `OPTIONS` প্রিফ্লাইট ট্রিগার হয়, যা প্রতিটি API কলের জন্য দুটি রাউন্ড ট্রিপ তৈরি করে। ## ব্যবহার পেজটি খুলুন এবং আপনার GoatCounter URL ও API কী প্রবেশ করান, অথবা নমুনা ডেটা দিয়ে অন্বেষণ করতে **Try Demo** ক্লিক করুন। বিভাজিত নিয়ন্ত্রণ দিয়ে তারিখ পরিসর পরিবর্তন করুন, গিয়ার মেনু থেকে থিম/ভাষা পরিবর্তন বা ডিসকানেক্ট করুন এবং যেকোনো মেরিক কার্ড ক্লিক করে সম্পর্কিত ডেটায় ড্রিল-ডাউন করুন। রিফ্রেশ মেনু ক্যাশে মুছে সবকিছু পুনরায় আনতে সাহায্য করে। ## ডেভেলপমেন্ট প্রকল্পটি `index.html`, `styles.css`, `theme.js`, `app.js`, `fixtures.js` এবং `sw.js` জুড়ে সাধারণ HTML, CSS এবং JavaScript নিয়ে গঠিত। কোনো `package.json`, bundler বা টেস্ট হার্ness নেই। স্থানীয় ডেভেলপমেন্ট: ```sh python3 -m http.server 8000 ``` `fixtures.js`-এর ডেমো ফিক্সচার ডেটা আসল API রেসপন্স আকৃতি অনুকরণ করে। ## লাইসেন্স AGPL-3.0। বিশ্বমানচিত্র অ্যাসেট (`assets/world-map.js`) Abhishekh Singh-এর MIT-লাইসেন্সপ্রাপ্ত goatcounter-dashboard থেকে অবিকল সংরক্ষিত এবং এটি MIT রয়েছে।