📝 more content (#1109)

* 📝 more content

* 📝 more content

apps/docs/astro.config.mjs

@@ -59,6 +59,10 @@ export default defineConfig({
                     label: "Create you first monitor",
                     slug: "monitoring/create-monitor",
                   },
+                  {
+                    label: "View your monitor data",
+                    slug: "monitoring/monitor-data-collected",
+                  },
                   {
                     label: "Monitor Types",
                     collapsed: true,

apps/docs/src/components/Head.astro

@@ -1,10 +1,16 @@
 ---
 import Default from "@astrojs/starlight/components/Head.astro";
 import type { Props } from "@astrojs/starlight/props";
----
 
+const { title } = Astro.props.entry.data;
+const { siteTitle } = Astro.props;
+
+const url = `https://openstatus.dev/api/og?title=${siteTitle}&description=${title}`;
+---
 <Default {...Astro.props}><slot /></Default>
 
+<meta property="og:image" content={url} />
+
 
 <script is:inline defer data-domain="docs.openstatus.dev" src="https://plausible.io/js/script.js" />
 

apps/docs/src/content/docs/index.mdx

@@ -16,7 +16,7 @@ import "../../custom.css"
 
 [OpenStatus](https://www.openstatus.dev) is an open-source synthetic monitoring tool that helps you monitor the availability and performance of your website, API, servers from various locations around the world.
 
-We also provide beautiful status pages to keep your users informed about the status of your services.
+We also provide beautiful [status pages](/status-page/overview) to keep your users informed about the status of your services.
 
 ### New to OpenStatus?
 

apps/docs/src/content/docs/monitoring/monitor-data-collected.mdx

@@ -0,0 +1,62 @@
+---
+title: Monitor Data Points
+description: "Monitor metrics are the data points that are collected by the monitor during the check."
+---
+
+import { Image } from 'astro:assets';
+
+import ResponseLog from '../../../assets/monitor/response-log.png';
+import ResponseLogHeader from '../../../assets/monitor/response-log-header.png';
+import ResponseLogTiming from '../../../assets/monitor/response-log-timing.png';
+
+
+## Access Monitor Data Points
+
+To view your monitor data points, navigate to the monitor details page and click on the `Response` tab.
+
+
+
+  <Image
+    src={ResponseLog}
+    alt="OpenStatus response log"
+  />
+
+
+## Monitor Data Points
+
+These are the data points that are collected by the monitor during the check.
+
+
+
+
+### HTTP Monitor Metrics
+
+  <Image
+    src={ResponseLogHeader}
+    alt="OpenStatus response log"
+  />
+
+
+For an HTTP monitor, the following metrics are collected:
+- **Status Code**: The HTTP status code returned by the server.
+- **Response Time**: The time taken by the server to respond to the request.
+- **Response Size**: The size of the response body.
+- **Response Headers**: The headers returned by the server.
+- **Response Body**: The body of the response in case of error
+- **DNS timing**: The time taken to resolve the domain name.
+- **TCP timing**: The time taken to establish a TCP connection.
+- **TLS timing**: The time taken to establish a TLS connection.
+- **TTFB timing**: Time to first byte, the time taken to receive the first byte of the response.
+- **Transfer timing**: The time taken to download the response body.
+
+
+  <Image
+    src={ResponseLogTiming}
+    alt="OpenStatus response log timing"
+  />
+
+### TCP Monitor Metrics
+
+For a TCP monitor, the following metrics are collected:
+- **Response Time**: The time taken by the server to respond to the request.
+- **TCP timing**: The time taken to establish a TCP connection.

apps/docs/src/content/docs/monitoring/overview.mdx

@@ -6,7 +6,7 @@ description: "How to create your first monitor with OpenStatus.dev"
 import { CardGrid, LinkCard } from '@astrojs/starlight/components';
 
 With synthetic monitoring, you can simulated requests to monitor the availability and performance of
-your website or API from various locations around the world.
+your website, API, or server from various locations around the world.
 
 We will make a request to your website or API on a regular schedule and record the
 responses.

apps/docs/src/content/docs/monitoring/type/http.mdx

@@ -2,6 +2,16 @@
 title: HTTP
 description: "How to monitor your HTTP services with OpenStatus.dev"
 ---
+import { Image } from 'astro:assets';
+
+import HttpMonitor from '../../../../assets/monitor/http-monitor.png';
+
+  <Image
+    src={HttpMonitor}
+    alt="Http Monitor"
+  />
+
+
 
 ### URL
 

apps/docs/src/content/docs/monitoring/type/tcp.mdx

@@ -3,4 +3,16 @@ title: TCP
 description: "How to monitor your TCP services with OpenStatus.dev"
 ---
 
+import { Image } from 'astro:assets';
+
+import TCPMonitor from '../../../../assets/monitor/tcp-monitor.png';
+
+  <Image
+    src={TCPMonitor}
+    alt="TCP Monitor"
+  />
+
+
+
+### URI (Host:Port)
 Provide your Host and Port to monitor your TCP service. Could be a domain or IPv4/IPv6 address.

apps/docs/src/content/docs/status-page/work/color-status-bar.mdx

@@ -0,0 +1,11 @@
+---
+title: Understand the color of the status bar
+---
+
+On your status page, each status bar can have a different color based on the status of the service.
+
+- **Green**: The service is up and running.
+- **Orange**: The service is slow or degraded.
+- **Red**: The service is down or unreachable.
+- **Gray**: The service is paused or disabled or there is no data.
+- **Blue**: The service is in maintenance or scheduled downtime.