feat: added analytics

rajnandan1 · Nov 14, 2024 · 0f5dd0f · 0f5dd0f
1 parent e45b016
commit 0f5dd0f
Show file tree

Hide file tree

Showing 35 changed files with 930 additions and 2,808 deletions.
diff --git a/build.js b/build.js
@@ -8,7 +8,7 @@ import {
 	IsValidHTTPMethod,
 	ValidateIpAddress
 } from "./src/lib/server/tool.js";
-import { API_TIMEOUT } from "./src/lib/server/constants.js";
+import { API_TIMEOUT, AnalyticsProviders } from "./src/lib/server/constants.js";
 
 const configPathFolder = "./config";
 const databaseFolder = process.argv[2] || "./database";
@@ -251,6 +251,22 @@ async function Build() {
 	if (site.github.incidentSince === undefined || site.github.incidentSince === null) {
 		site.github.incidentSince = 48;
 	}
+	if (!!site.analytics) {
+		const providers = {};
+
+		for (let i = 0; i < site.analytics.length; i++) {
+			const element = site.analytics[i];
+			if (!!AnalyticsProviders[element.type]) {
+				if (providers[element.type] === undefined) {
+					providers[element.type] = {};
+					providers[element.type].measurementIds = [];
+					providers[element.type].script = AnalyticsProviders[element.type];
+				}
+				providers[element.type].measurementIds.push(element.id);
+			}
+		}
+		site.analytics = providers;
+	}
 	if (!!!site.font || !!!site.font.cssSrc || !!!site.font.family) {
 		site.font = {
 			cssSrc: "https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,100..900;1,100..900&display=swap",

diff --git a/config/site.example.yaml b/config/site.example.yaml
@@ -41,4 +41,10 @@ i18n:
         zh-CN: "中文"
         ja: "日本語"
         vi: "Tiếng Việt"
-theme: dark
+pattern: "squares"
+font:
+  cssSrc: "https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
+  family: "\"Lato\", sans-serif"
+analytics:
+  - id: "G-Q3MLRXCBFT"
+    type: "GA"
diff --git a/docs/categorize-guide.md b/docs/categorize-guide.md
@@ -0,0 +1,45 @@
+---
+title: Categorize Monitors Guide | Kener
+description: Categorize Monitors in Kener
+---
+
+# Categorize Monitors
+
+Let us add a category to our monitors.
+
+## Sample monitors.yaml
+
+```yaml
+- name: OkBookmarks
+  description: A free bookmark manager that lets you save and search your bookmarks in the cloud.
+  tag: "okbookmarks"
+  image: "https://okbookmarks.com/assets/img/extension_icon128.png"
+  api:
+      method: GET
+      url: https://okbookmarks.com
+- name: Earth
+  description: Our blue planet
+  tag: "earth"
+  defaultStatus: "UP"
+  image: "/earth.png"
+  category: "Hello"
+- name: Frogment
+  description: A free openAPI spec editor and linter that breaks down your spec into fragments to make editing easier and more intuitive. Visit https://www.frogment.com
+  tag: "frogment"
+  image: "/frogment.png"
+  api:
+      method: GET
+      url: https://www.frogment.com
+```
+
+## Sample site.yaml
+
+```yaml
+#...
+categories:
+  - name: Hello
+	description: Say Hello to the world
+#...
+```
+
+The above will have OkBookmarks and Frogment under home. Earth will be under Hello category.
diff --git a/docs/changelogs.md b/docs/changelogs.md
@@ -0,0 +1,22 @@
+---
+title: Changelogs | Kener
+description: Changelogs for Kener
+---
+
+# Changelogs
+
+## v0.0.16
+
+Here are the changes in this release
+
+### Features
+
+-   Added support for `hideURLForGet` in monitors. Read more [here](/docs/monitors)
+-   New SVG badges for LIVE status. Read more [here](/docs/status-badges#live)
+-   `[Breaking Change]` Removed dependency on Environment variable `PUBLIC_KENER_FOLDER`. Read more [here](#migration)
+-   Simplified build and deploy process
+-   Added support for fonts. Read more [here](/docs/customize-site#font)
+-   Added support for home page pattern. Read more [here](/docs/customize-site#pattern)
+-   Added support for adding your analytics provider. Read more [here](/docs/site-analytics)
+-   New Documentation Site
+-   Redesigned the UI for better consistency
diff --git a/docs/custom-js-css-guide.md b/docs/custom-js-css-guide.md
@@ -0,0 +1,24 @@
+---
+title: Custom JS and CSS Guide | Kener
+description: Custom JS and CSS Guide for Kener
+---
+
+Here is a guide to add custom JS and CSS to your Kener instance.
+
+## Adding Custom JS
+
+Add your custom JS to `static/` file. And in the `src/app.html` file, add the following line:
+
+```html
+<script src="/your-custom-js-file.js"></script>
+```
+
+## Adding Custom CSS
+
+Add your custom CSS to `static/` file. And in the `src/app.html` file, add the following line:
+
+```html
+<link rel="stylesheet" href="/your-custom-css-file.css" />
+```
+
+Do not forget to add the base path if you are using a subpath. For example, if you are using a subpath `/kener`, then the path should be `/kener/your-custom-js-file.js`.
diff --git a/docs/customize-site.md b/docs/customize-site.md
@@ -1,6 +1,11 @@
+---
+title: Customize Site - Site.yaml - Kener
+description: Customize your Kener site using site.yaml
+---
+
 # Customize Site
 
-There is a folder called `src/lib/server/config`. Inside which there is a `site.yaml` file. You can modify this file to have your own branding and do few other things.
+There is a folder called `./config`. Inside which there is a `site.yaml` file. You can modify this file to have your own branding and do few other things.
 
 ## Sample site.yaml
 
@@ -46,6 +51,13 @@ pattern: "squares"
 font:
   cssSrc: "https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
   family: '"Lato", sans-serif'
+analytics:
+  - id: "G-QsFT"
+    type: "GA"
+  - id: "deasf0d350"
+    type: "AMPLITUDE"
+  - id: "FKOdsKener"
+    type: "MIXPANEL"
 ```
 
 ---
@@ -299,3 +311,19 @@ URL of the font css
 ### family
 
 Font family
+
+---
+
+## analytics
+
+You can add analytics to your site. You can add multiple analytics. Supported analytics are `GA`, `AMPLITUDE`, `MIXPANEL`
+
+```yaml
+analytics:
+	- id: "G-QsFT"
+	  type: "GA"
+	- id: "deasf0d350"
+	  type: "AMPLITUDE"
+	- id: "FKOdsKener"
+	  type: "MIXPANEL"
+```
diff --git a/docs/embed.md b/docs/embed.md
@@ -0,0 +1,67 @@
+---
+title: Embed Monitor | Kener
+description: Embed your monitor in your website
+---
+
+# Embed Monitor
+
+There are two ways to embed your monitor in your website
+
+## Javascript
+
+You can embed your monitor in your website using javascript. We recommend using this method as it takes care of the height of the embedded monitor.
+
+```html
+<script
+	async
+	src="http://[hostname]/embed-[tag]/js?theme=light&monitor=http://[hostname]/embed-[tag]"
+></script>
+```
+
+Here is an example
+
+```html
+<script
+	async
+	src="https://kener.ing/embed-okbookmarks/js?theme=light&monitor=http://localhost:3000/embed-okbookmarks"
+></script>
+```
+
+Replace `[hostname]` with your kener hostname and `[tag]` with your monitor tag.
+
+## Iframe
+
+This is the simplest way to embed your monitor in your website. You can use the following code to embed your monitor in your website.
+
+```html
+<iframe
+	src="http://[hostname]/embed-[tag]?theme=light"
+	width="100%"
+	height="200"
+	allowfullscreen="allowfullscreen"
+	allowpaymentrequest
+	frameborder="0"
+></iframe>
+```
+
+Here is an example
+
+```html
+<iframe
+	src="http://localhost:3000/embed-okbookmarks?theme=light"
+	width="100%"
+	height="200"
+	allowfullscreen="allowfullscreen"
+	allowpaymentrequest
+	frameborder="0"
+></iframe>
+```
+
+Replace `[hostname]` with your kener hostname and `[tag]` with your monitor tag.
+
+## Parameters
+
+You can pass the following parameters to the embed code
+
+-   `theme`: You can pass `light` or `dark` theme
+-   `monitor`: The monitor url
diff --git a/docs/environment-vars.md b/docs/environment-vars.md
@@ -1,3 +1,8 @@
+---
+title: Environment Variables | Kener
+description: Kener needs some environment variables to be set to run properly. Here are the list of environment variables that you need to set.
+---
+
 # Environment Variables
 
 Kener needs some environment variables to be set to run properly. Here are the list of environment variables that you need to set.

diff --git a/docs/gh-setup.md b/docs/gh-setup.md
@@ -1,3 +1,8 @@
+---
+title: Github Setup | Kener
+description: Kener uses github for incident management. Issues created in github using certain tags go to kener as incidents.
+---
+
 # Github Setup
 
 Kener uses github for incident management. Issues created in github using certain tags go to kener as incidents.
@@ -36,7 +41,6 @@ You can create either a classic token or personal access token
 
 ## Step 3: Set environment
 
-
 ```shell
 export GH_TOKEN=github_pat_11AD3ZA3Y0
-```
+```
diff --git a/docs/home.md b/docs/home.md
@@ -1,3 +1,8 @@
+---
+title: Kener - A Sveltekit NodeJS Status Page System
+description: Kener is an open-source Node.js status page tool, designed to make service monitoring and incident handling a breeze. It offers a sleek and user-friendly interface that simplifies tracking service outages and improves how we communicate during incidents.
+---
+
 # Kener - A Sveltekit NodeJS Status Page System
 
 <p align="center">

diff --git a/docs/how-it-works.md b/docs/how-it-works.md
@@ -1,3 +1,8 @@
+---
+title: How it works | Kener
+description: Folder structure and how Kener works
+---
+
 # How it works
 
 Kener has two parts.
@@ -27,3 +32,7 @@ This is the configuration file for your site. This is where you define the name
 ## Monitors.yaml
 
 This is the configuration file for your monitors. This is where you define the monitors you want to show on your site. Read more about it [here](/docs/monitors)
+
+## Data
+
+Kener stores its data in a folder which is `./database`. This is where all the data is stored. You can delete this folder if you want to start fresh.
diff --git a/docs/i18n.md b/docs/i18n.md
@@ -1,3 +1,8 @@
+---
+title: i18n | Kener
+description: Kener supports multiple languages. You can add translations to your site.
+---
+
 # i18n
 
 You can add translations to your site. By default it is set to `en`. Available translations are present in `/src/lib/locales/` folders in the root directory. You can add more translations by adding a new file in the `/src/lib/locales` folder.

diff --git a/docs/incident-management.md b/docs/incident-management.md
@@ -1,3 +1,8 @@
+---
+title: Incident Management | Kener
+description: Kener uses Github to power incident management using labels
+---
+
 # Incident Management
 
 Kener uses Github to power incident management using labels
@@ -22,4 +27,4 @@ Kener auto creates labels for your monitors using the `tag` parameter
 
 If you clone the repo it gives you an issue template to create incidents
 
-Here is a [sample incident](https://github.com/rajnandan1/kener/issues/15) for your reference.
+Here is a [sample incident](https://github.com/rajnandan1/kener/issues/15) for your reference.
diff --git a/docs/kener-apis.md b/docs/kener-apis.md
@@ -1,3 +1,8 @@
+---
+title: Kener APIs
+description: Kener gives APIs to push data and create incident.
+---
+
 # Kener APIs
 
 Kener also gives APIs to push data and create incident. Before you use kener apis you will have to set an authorization token called `API_TOKEN`. This also has to be set as an environment variable.

diff --git a/docs/monitor-examples.md b/docs/monitor-examples.md
@@ -1,3 +1,8 @@
+---
+title: Monitor Examples | Kener
+description: Here are some exhaustive examples for monitors
+---
+
 # Monitor Examples
 
 Here are some exhaustive examples for monitors

diff --git a/docs/monitors.md b/docs/monitors.md
@@ -1,3 +1,8 @@
+---
+title: Monitors | monitors.yaml | Kener
+description: Monitors are the heart of Kener. This is where you define the monitors you want to show on your site.
+---
+
 # Monitors
 
 Inside `config/` folder there is a file called `monitors.yaml`. We will be adding our monitors here. Please note that your yaml must be valid. It is an array.
@@ -53,7 +58,7 @@ Sample
 | api.eval                  | Optional          | Evaluator written in JS, to parse HTTP response and calculate uptime and latency                                                                                                                                    |
 | defaultStatus             | Optional          | If no API is given this will be the default status. can be UP/DOWN/DEGRADED                                                                                                                                         |
 | hidden                    | Optional          | If set to `true` will not show the monitor in the UI                                                                                                                                                                |
-| category                  | Optional          | Use this to group your monitors. Make sure you have defined category in `site.yaml` and use the `name` attribute here                                                                                               |
+| category                  | Optional          | Use this to group your monitors. Make sure you have defined category in `site.yaml` and use the `name` attribute. More about it [here](/docs/customize-site#categories).                                            |
 | dayDegradedMinimumCount   | Optional          | Default is 1. It means minimum this number of count for the day to be classified as DEGRADED(Yellow Bar) in 90 day view. Has to be `number` greater than 0                                                          |
 | dayDownMinimumCount       | Optional          | Default is 1. It means minimum this number of count for the day to be classified as DOWN(Red Bar) in 90 day view. Has to be `number` greater than 0                                                                 |
 | includeDegradedInDowntime | Optional          | By deafault uptime percentage is calculated as (UP+DEGRADED/UP+DEGRADED+DOWN). Setting it as `true` will change the calculation to (UP/UP+DEGRADED+DOWN)                                                            |

diff --git a/docs/quick-start.md b/docs/quick-start.md
@@ -1,3 +1,8 @@
+---
+title: Quick Start | Kener
+description: Get started with Kener
+---
+
 # Quick Start
 
 Please make sure you have [Node](https://nodejs.org/en) installed in your system. Minimum version required is `v16.17.0`.