docs: adding docs for 3.0.0

docs/alerts.md

@@ -0,0 +1,36 @@
+---
+title: View Alerts | Kener
+description: Learn how to view alerts in kener.
+---
+
+# View Alerts
+
+Alerts are used to notify you when a monitor goes down or up. You can view alerts in the Kener dashboard.
+
+## ID
+
+The unique ID of the alert.
+
+## Type
+
+The type of status that the alert is for. Example DOWN, DEGRADED
+
+## Monitor
+
+The monitor for which the alert is triggered.
+
+## Status
+
+The status of the alert. TRIGGERED, RESOLVED
+
+## Checks
+
+The number of checks that have been done.
+
+## Incident
+
+The incident that the alert is part of.
+
+## Created At
+
+The time when the alert was created.

docs/apikeys.md

@@ -0,0 +1,16 @@
+---
+title: API Keys | Kener
+description: Learn how to set up and work with API keys in kener.
+---
+
+# API Keys
+
+API keys can be used to call the [APIs of kener](/docs/kener-apis). You can create multiple API keys and use them to call the APIs.
+
+API keys once generated cannot be viewed again so please keep them safe and secure.
+
+## Create API Key
+
+1. To create an API key click on the `Create API Key` button in the API Keys page.
+2. Add a name for the key so that it is easy for you to remember
+3. Click on Create.

docs/environment-vars.md

@@ -67,20 +67,11 @@ KENER_BASE_PATH=/status
 
 ## Secrets
 
-Kener supports secrets in monitors. Let us say you have a monitor that is API based and you want to keep the API key secret. You can use the `secrets` key in the monitor to keep the API key secret.
+Kener supports secrets in monitors. Let us say you have a monitor that is API based and you want to keep the API key secret.
 
-```yaml
-- name: Example Secret Monitor
-  description: Monitor to show how to use secrets
-  tag: "secret"
-  api:
-      method: GET
-      url: https://api.example.com/users
-      headers:
-          Authorization: Bearer $CLIENT_SECRET
-```
+Example: `https://api.example.com/users` with a header `Authorization: Bearer $CLIENT_SECRET`
 
-In the above example, the `CLIENT_SECRET` is a secret that you can set in the monitor. To properly make this work you will have to set up environment variables like below
+You should set the `CLIENT_SECRET` in the your environment variables.
 
 ```bash
 export CLIENT_SECRET=your-api-key

docs/home-page.md

@@ -0,0 +1,70 @@
+---
+title: Home Page Setup | Kener
+description: Learn how to set up and work with the home page in kener.
+---
+
+# Home Page
+
+Home page is the first page that the user sees when they visit your status page. You can customize the home page to show the information that you want to show.
+
+---
+
+## Hero Section
+
+### Title
+
+A big text that will be shown on the hero section.
+
+### Subtitle
+
+A small text that will be shown below the title.
+
+<div class="border rounded-md">
+
+![Hero Section](/home_1.png)
+
+</div>
+
+---
+
+## Navigation
+
+You can navigation links to other urls. You can add as many as you want.
+
+![Nav Section](/home_2.png)
+
+### Icon
+
+A small image to be shown along with the link. Icon is optional
+
+### Title
+
+The title of the link.
+
+### URL
+
+The URL to redirect to when the link is clicked.
+
+![Nav Section](/home_3.png)
+
+---
+
+## Internationalization
+
+Add multiple languages to your status page. Currently, Kener supports English, हिन्दी, 中文, 日本語, Tiếng Việt. More will be added. If you want to add your own language please create a PR.
+
+### Default Language
+
+The default language of the status page.
+
+---
+
+## Site Categories
+
+Use this to group monitors. Byh default a readonly home category is created. You can add more categories and move monitors to those categories.
+
+---
+
+## Site Footer
+
+Add footer text or html to the status page. You can add any text that you want to show in the footer. Make sure if you are adding html it is safe and valid.

docs/monitors.md

@@ -7,6 +7,10 @@ description: Monitors are the heart of Kener. This is where you define the monit
 
 Monitors are the heart of Kener. This is where you define the monitors you want to show on your site.
 
+## Add Monitors
+
+Click on the ➕ to add a monitor.
+
 <div class="border rounded-md">
 
 ![Monitors Main](/m_main.png)
@@ -98,3 +102,38 @@ To monitor the DNS records, you need to provide the domain name and the record t
 ### PING
 
 To monitor the ping, you need to provide the IP address or the domain name. If the ping is not successful, the monitor will be marked as down. You can read more about PING monitoring [here](/docs/monitors-ping).
+
+---
+
+## Triggers
+
+To add a trigger to a monitor make sure you have created a trigger. You can read more about triggers [here](/docs/triggers).
+
+-   Click on the 🔔 icon on the top right corner of the monitor.
+-   Add details for either DOWN or DEGRADED.
+    -   Failure Threshold(Required): The number of consecutive failures before the trigger is activated.
+    -   Success Threshold(Required): The number of consecutive successes before the trigger is deactivated.
+    -   Create Incident: Chose whether to create an incident or not when the trigger is activated. The incident will be created in Github. So make sure you have set up the Github token in the environment variables. The incident will be closed when the monitor is back to UP.
+    -   Custom Message (Required): Add your owner alert message.
+    -   Choose Triggers: Choose the triggers you want to activate the trigger. You can choose multiple triggers.
+    -   It will take upto 1 minute for the trigger to be activated.
+
+---
+
+## Edit Monitors
+
+Click on the ⚙️ to edit the monitor.
+
+### Deactivate Monitor
+
+You can deactivate the monitor by switching the toggle to off. Deactivation a monitor will stop the monitor from running. It will take one minute to deactivate.
+
+### Activate Monitor
+
+You can activate the monitor by switching the toggle to on. Activation a monitor will start the monitor. It will take one minute to activate.
+
+<div class="border px-2 rounded-md">
+
+Any changes in the a live monitor will take one minute to reflect.
+
+</div>

docs/seo.md

@@ -0,0 +1,38 @@
+---
+title: SEO Setup | Kener
+description: Learn how to set up and work with SEO in kener.
+---
+
+# SEO
+
+SEO is important for your status page to be found on the internet. Kener provides you with the ability to set up SEO for your status page.
+
+## Analytics
+
+You can add Google Analytics, Amplitude, Mixpanel. Basic events and page tracking are supported.
+
+### Google Analytics
+
+ADD ID. It is the measurement ID that you get from Google Analytics. You can find it in the admin section of your Google Analytics account.
+
+### Amplitude
+
+Add API key of your Amplitude account
+
+### Mixpanel
+
+Add token of your Mixpanel account.
+
+## Search Engine Optimization
+
+You can add meta tags for SEO. You can add any `meta` that you want to add to the head of the page. Example: `og:image`, `og:title`, `og:description`, `twitter:image`, `twitter:title`, `twitter:description`.
+
+Once added it will become
+
+```html
+<meta property="og:image" content="https://example.com/image.png" />
+```
+
+## Sitemap
+
+Kener auto generates a sitemap for your status page. You can view it at `/sitemap.xml`

docs/site.md

@@ -0,0 +1,52 @@
+---
+title: Site Info Setup | Kener
+description: Learn how to set up and work with site info in kener.
+---
+
+# Site
+
+Site info is used to define the site information that will be shown on the status page.
+
+## Site Title
+
+<span class="text-red-500 text-xs font-semibold">
+	REQUIRED
+</span>
+
+The site title is used to define the title of the site. It is required and has to be a string. It what will be shown on the browser tab. This will become
+
+Example: `Kener - Open-Source and Modern looking Node.js Status Page for Effortless Incident Management`
+
+```html
+<title>
+	Kener - Open-Source and Modern looking Node.js Status Page for Effortless Incident Management
+</title>
+```
+
+![Site Title](/ms_1.png)
+
+## Site Name
+
+<span class="text-red-500 text-xs font-semibold">
+	REQUIRED
+</span>
+
+This will be shown as a brand name on the status page on the nav bar top left.
+
+![Site Name](/s_2.png)
+
+## Home Location
+
+<span class="text-red-500 text-xs font-semibold">
+	REQUIRED
+</span>
+
+Link to redirect to when Site Name or logo is clicked. Can be your main website. or it can be `/` to be current page. If you are using a base path it should be `/base-path` to keep the the user on the same page.
+
+## Logo
+
+Same as Site Name, it is placed left of Site Name as shown in image above
+
+## Favicon
+
+Favicon to be shown in browser tab.

docs/structure.json

@@ -33,11 +33,6 @@
 		{
 			"sectionTitle": "Guides",
 			"children": [
-				{
-					"title": "Setup Github",
-					"link": "/docs/gh-setup",
-					"file": "/gh-setup.md"
-				},
 				{
 					"title": "Setup Environment",
 					"link": "/docs/environment-vars",
@@ -74,14 +69,39 @@
 					"file": "/triggers.md"
 				},
 				{
-					"title": "Alerting (server.yaml)",
-					"link": "/docs/alerting",
-					"file": "/alerting.md"
+					"title": "Setup Site",
+					"link": "/docs/site",
+					"file": "/site.md"
 				},
 				{
-					"title": "Database (server.yaml)",
-					"link": "/docs/database",
-					"file": "/database.md"
+					"title": "Setup Github",
+					"link": "/docs/gh-setup",
+					"file": "/gh-setup.md"
+				},
+				{
+					"title": "Setup SEO",
+					"link": "/docs/seo",
+					"file": "/seo.md"
+				},
+				{
+					"title": "Setup Home",
+					"link": "/docs/home-page",
+					"file": "/home-page.md"
+				},
+				{
+					"title": "Setup Theme",
+					"link": "/docs/theme",
+					"file": "/theme.md"
+				},
+				{
+					"title": "View Alerts",
+					"link": "/docs/alerts",
+					"file": "/alerts.md"
+				},
+				{
+					"title": "API Keys",
+					"link": "/docs/apikeys",
+					"file": "/apikeys.md"
 				},
 				{
 					"title": "Monitors Examples",

docs/theme.md

@@ -0,0 +1,92 @@
+---
+title: Theme Customization | Kener
+description: Learn how to customize the theme of your status page in kener.
+---
+
+# Theme Customization
+
+Kener provides you with the ability to customize the theme of your status page. You can change the colors, fonts, and other styles of the status page.
+
+---
+
+## Home Page Pattern
+
+Kener can show a subtle pattern in all your pages. It is either sqaure or dots. Right now you cannot modify the color of the pattern. However, you can disable it by choosing none
+
+---
+
+## Default Theme
+
+Kener comes with both dark and light theme. You can set a default theme that will be used every time the user visits.
+
+Setting it to light or dark will make the theme light or dark respectively. Setting it to none will make the theme change based on the user's system preference. Setting it to system will make the theme change based on the user's system preference.
+
+If you want to force a theme to be light or dark you can set it to light or dark and uncheck `Let Users toggle theme between light and dark`
+
+---
+
+## Monitor Style
+
+You can change how the bars and summary of a monitor looks like.
+
+### Status Bar
+
+#### Partial
+
+The status bar will be a gradient from green to red/yellow based on the status of the monitor.
+
+![Trigger API](/x1.png)
+
+#### Full
+
+The status bar will be a solid color based on the status of the monitor.
+
+![Trigger API](/x2.png)
+
+---
+
+### Roundness
+
+Adjust the roundness of the status bar.
+
+#### SHARP
+
+![Trigger API](/x4.png)
+
+#### ROUNDED
+
+![Trigger API](/x3.png)
+
+---
+
+### Summary Type
+
+Control how the summary of the monitor looks like.
+
+#### Current
+
+Shows the current live value of the monitor. Example: If it is DOWN currently it will say `DOWN for x minutes`, if it is UP it will say `Status Ok`
+
+#### DAY
+
+Shows the day's impact. Example: If it was down at 10:00 AM and it is 11:00 AM, it will say `DOWN for 1 hour`. If there was no DOWN or DEGRADED state it will say `Status Ok`
+
+---
+
+## Colors
+
+You can change the colors of UP/DEGRADED/DOWN states of the monitor. You show have a shade of green, yellow, and red respectively.
+
+---
+
+## Font
+
+You can change the font of the status page. You can choose from a list of google fonts.
+
+### Font URL
+
+Add font url
+
+### Font Family
+
+Add font family name

docs/triggers.md

@@ -105,5 +105,148 @@ Body of the webhook will be sent as below:
 | details               | Details of the alert.                                       |
 | details.metric        | Name of the monitor                                         |
 | details.current_value | Current value of the monitor                                |
-| details.threshold     | Alert trigger hreshold of the monitor                       |
+| details.threshold     | Alert trigger threshold of the monitor                      |
 | actions               | Actions to be taken. Link to view the monitor.              |
+
+## Discord
+
+Discord triggers are used to send a message to a discord channel when a monitor goes down or up.
+
+<div class="border rounded-md">
+
+![Trigger API](/trig_2.png)
+
+</div>
+
+### Discord URL
+
+<span class="text-red-500 text-xs font-semibold">
+	REQUIRED
+</span>
+
+The Discord URL is used to define the URL of the discord webhook. It is required and has to be a valid URL.
+
+#### How to get the Discord URL?
+
+1.  Go to your discord server
+2.  Right-click on the channel you want to send the messages
+3.  Click on `Edit Channel`
+4.  Go to `Integrations`
+5.  Click on `Create Webhook`
+6.  Copy the URL
+
+#### Discord Message
+
+The discord message when alert is `TRIGGERED` will look like this
+
+![Discord](/discord.png)
+
+The discord message when alert is `RESOLVED` will look like this
+
+![Discord](/discord_resolved.png)
+
+## Slack
+
+Slack triggers are used to send a message to a slack channel when a monitor goes down or up.
+
+<div class="border rounded-md">
+
+![Trigger API](/trig_3.png)
+
+</div>
+
+### Slack URL
+
+<span class="text-red-500 text-xs font-semibold">
+	REQUIRED
+</span>
+
+The Slack URL is used to define the URL of the slack webhook. It is required and has to be a valid URL.
+
+#### How to get the Slack URL?
+
+1.  Go to your slack workspace
+2.  Click on `Apps` on the left sidebar
+3.  Search for `Incoming Webhooks`
+4.  Click on `Add to Slack`
+5.  Select the channel you want to send the messages
+6.  Click on `Add Incoming Webhook Integration`
+7.  Copy the URL
+
+#### Slack Message
+
+The slack message when alert is `TRIGGERED` will look like this
+
+![Slack](/slack.png)
+
+The slack message when alert is `RESOLVED` will look like this
+
+![Slack](/slack_resolved.png)
+
+## Email
+
+Email triggers are used to send an email when a monitor goes down or up.
+
+<div class="border rounded-md">
+
+![Trigger API](/trig_4.png)
+
+</div>
+
+<div class="border px-2 rounded-md mt-4">
+
+#### Note
+
+Please make sure you have set the `RESEND_API_KEY` in the environment variables.
+
+</div>
+
+### To
+
+<span class="text-red-500 text-xs font-semibold">
+	REQUIRED
+</span>
+
+The email addresses to which the email should be sent. It is required and has to be a valid email addresses. You can pass multiple email addresses separated by a comma.
+
+### Sender
+
+The email address from which the email should be sent.
+
+It should be in the format `Name <email@address.com>`
+
+If you have not connected your domain with resend, then use `Some Name <onboarding@resend.dev>`
+
+### Subject
+
+Subject of the email when `TRIGGERED`
+
+```text
+[TRIGGERED] Mockoon DOWN at 2024-12-27T04:42:01.430Z
+```
+
+Subject of the email when `RESOLVED`
+
+```text
+[RESOLVED] Mockoon DOWN at 2024-12-27T04:42:01.430Z
+```
+
+### Body
+
+The emaik message when alert is `TRIGGERED` will look like this
+
+![Slack](/em_t.png)
+
+The emaik message when alert is `RESOLVED` will look like this
+
+![Slack](/em_r.png)
+
+---
+
+## Edit Triggers
+
+Click on the ⚙️ to edit the trigger.
+
+### Deactivate Trigger
+
+You can deactivate the trigger by switching the toggle to off. You cannot send message to a deactivated trigger. Any monitor with this trigger will not send any notifications.

src/lib/components/manage/monitorsAdd.svelte

@@ -293,7 +293,7 @@
 
 {#if shareMenusToggle}
 	<div
-		class="moldal-container fixed left-0 top-0 z-30 h-screen w-full bg-card bg-opacity-30 backdrop-blur-sm"
+		class="moldal-container fixed left-0 top-0 z-50 h-screen w-full bg-card bg-opacity-30 backdrop-blur-sm"
 	>
 		<div
 			class="absolute left-1/2 top-1/2 h-fit w-full max-w-2xl -translate-x-1/2 -translate-y-1/2 rounded-md border bg-background shadow-lg backdrop-blur-lg"
@@ -357,7 +357,7 @@
 						<div class="col-span-1">
 							<div class="col-span-1">
 								<Label for="{key}successThreshold">
-									Failure Threshold
+									Success Threshold
 									<span class="text-red-500">*</span>
 								</Label>
 								<Input
@@ -415,14 +415,15 @@
 								type="text"
 							/>
 						</div>
+						<p class="col-span-4 mt-2 text-sm font-medium">Choose Triggers</p>
 						{#each triggers as trigger}
 							<div
-								class="col-span-1 mt-2 overflow-hidden overflow-ellipsis whitespace-nowrap"
+								class="col-span-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
 							>
 								<label class="cursor-pointer">
 									<input
 										type="checkbox"
-										class=""
+										class="text-sm"
 										checked={data.triggers.indexOf(trigger.id) > -1}
 										on:change={() => {
 											data.triggers = data.triggers.includes(trigger.id)

src/lib/components/manage/seoInfo.svelte

@@ -97,7 +97,9 @@
 <Card.Root class="mt-4">
 	<Card.Header class="border-b">
 		<Card.Title>Analytics</Card.Title>
-		<Card.Description>Deploy your new project in one-click.</Card.Description>
+		<Card.Description>
+			Add your analytics ID/Key here. You can add multiple analytics providers.
+		</Card.Description>
 	</Card.Header>
 	<Card.Content>
 		<form class="mx-auto mt-4 space-y-4" on:submit|preventDefault={formSubmitAnalytics}>
@@ -144,7 +146,9 @@
 <Card.Root class="mt-4">
 	<Card.Header class="border-b">
 		<Card.Title>Search Engine Optimization</Card.Title>
-		<Card.Description>Deploy your new project in one-click.</Card.Description>
+		<Card.Description>
+			Add your meta tags here. You can add multiple meta tags.
+		</Card.Description>
 	</Card.Header>
 	<Card.Content>
 		<form class="mx-auto mt-4 space-y-4" use:autoAnimate on:submit|preventDefault={formSubmit}>

src/lib/components/nav.svelte

@@ -10,8 +10,8 @@
 
 <div class="{defaultPattern}-pattern"></div>
 
-<header class="blurry-bg sticky top-0 z-50 mx-auto mt-2">
-	<div class="container flex h-14 max-w-[820px] items-center rounded-md border bg-card px-3">
+<header class="blurry-bg sticky top-0 z-50 mx-auto md:mt-2">
+	<div class="container flex h-14 max-w-[820px] items-center border bg-card px-3 md:rounded-md">
 		<a href={data.site.home ? data.site.home : base} class="mr-6 flex items-center space-x-2">
 			{#if data.site.logo}
 				<img

src/manage.css

@@ -36,3 +36,7 @@ input[type="file"] {
 .image-upload .has-bg:hover .invisible {
 	visibility: visible !important;
 }
+
+[aria-label="color picker"] input {
+	color: rgba(0, 0, 0, 0.5) !important;
+}