openstatus.dev
Openstatus
www.openstatus.dev
📝 Docs few improvements (#1106)
* few improvements
* ci: apply automated fixes
* 📝 some docs improvments
* ci: apply automated fixes
---------
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
authored by
Thibault Le Ouay
autofix-ci[bot]
and committed by
GitHub
42e6ad12
cadbbc2f
+141
-82
+11
-1
apps/docs/astro.config.mjs
+11
-1
apps/docs/astro.config.mjs
···
15
15
integrations: [
16
16
sitemap(),
17
17
starlight({
18
-
title: "OpenStatus Docs",
18
+
title: "OpenStatus Documentation",
19
19
favicon: "/favicon.ico",
20
20
social: {
21
21
github: "https://github.com/openstatusHQ/openstatus",
···
103
103
104
104
items: [
105
105
{ label: "Overview", slug: "status-page/overview" },
106
+
{
107
+
label: "Create your status page",
108
+
slug: "status-page/create-status-page",
109
+
},
106
110
{ label: "Reports", slug: "status-page/reports" },
107
111
{ label: "Maintenances", slug: "status-page/maintenances" },
108
112
{ label: "Widget", slug: "status-page/widget" },
···
114
118
{
115
119
label: "Customization",
116
120
autogenerate: { directory: "status-page/customization" },
121
+
collapsed: true,
122
+
},
123
+
{
124
+
label: "Advanced",
125
+
autogenerate: { directory: "status-page/advanced" },
117
126
collapsed: true,
118
127
},
119
128
],
···
142
151
{
143
152
label: "Help",
144
153
slug: "help/support",
154
+
collapsed: true,
145
155
},
146
156
],
147
157
},
apps/docs/src/assets/status-page/status-page.png
apps/docs/src/assets/status-page/status-page.png
This is a binary file and will not be displayed.
+11
-5
apps/docs/src/content/docs/getting-started/introduction.mdx
+11
-5
apps/docs/src/content/docs/getting-started/introduction.mdx
···
1
1
---
2
2
title: Getting Started
3
-
description: "What is OpenStatus.dev and how to get started"
3
+
description: "How to get started with OpenStatus?"
4
4
topic: docs
5
5
next: 'Start Monitoring'
6
6
---
···
8
8
import { Aside } from '@astrojs/starlight/components';
9
9
10
10
11
-
## What is OpenStatus 🧑🏫
11
+
## How to get started with OpenStatus?
12
12
13
-
[OpenStatus](https://www.openstatus.dev) is an open-source synthetic monitoring platform. It allows you to monitor your services and get notified when they are down.
13
+
You can either use the cloud version of OpenStatus or self-host it.
14
14
15
15
16
-
## How to get started 🚀
16
+
### Cloud version
17
17
18
-
You can either use the hosted version of OpenStatus or self-host it.
18
+
You can (sign up)[https://www.openstatus.dev/app/login?ref=docs] for a free account and start monitoring your services in seconds.
19
+
20
+
### Hosted version
21
+
22
+
All our code is open-source and you can host it on your own infrastructure.
23
+
24
+
We are working on a lightweight version of OpenStatus that you can self-host easily.
19
25
20
26
<Aside>
21
27
It is not easy to self-host OpenStatus on your own at the moment. We will be working on making it easier in the future.
+12
-3
apps/docs/src/content/docs/index.mdx
+12
-3
apps/docs/src/content/docs/index.mdx
···
1
1
---
2
-
title: Welcome
2
+
title: Documentation
3
3
description: Explore our documentation to get started with OpenStatus.
4
4
template: doc
5
5
topic: docs
6
6
next: false
7
7
hero:
8
-
title: Welcome to OpenStatus Documentation
8
+
title: Welcome to OpenStatus
9
9
tagline: Explore our documentation to get started with OpenStatus
10
10
---
11
11
12
12
import { Card, CardGrid, LinkCard } from '@astrojs/starlight/components';
13
13
import "../../custom.css"
14
14
15
+
### What is OpenStatus?
16
+
17
+
[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.
18
+
19
+
We also provide beautiful status pages to keep your users informed about the status of your services.
20
+
21
+
### New to OpenStatus?
22
+
23
+
15
24
<CardGrid >
16
25
<Card title="Synthetic Monitoring" icon="open-book">
17
26
Learn how to <a href="/monitoring/create-monitor">create</a> your first monitor with OpenStatus.
···
31
40
</CardGrid>
32
41
33
42
34
-
## Join the community
43
+
### Join the community
35
44
36
45
Join the commmunity to get help, share your ideas or just to say hi.
37
46
+35
-6
apps/docs/src/content/docs/monitoring/create-monitor.mdx
+35
-6
apps/docs/src/content/docs/monitoring/create-monitor.mdx
···
4
4
---
5
5
6
6
import { Image } from 'astro:assets';
7
-
import { Aside } from '@astrojs/starlight/components';
7
+
import { Aside, CardGrid, LinkCard } from '@astrojs/starlight/components';
8
8
import monitorDetail from '../../../assets/monitor/monitor-detail.png';
9
9
import { ShowcaseYouTube } from 'starlight-showcases'
10
+
10
11
11
12
Go to the **Monitors** page and click on the **Create Monitor** button.
12
13
13
-
## Configure your monitor 🛠
14
+
## Configure your monitor
14
15
15
16
Your endpoint check requires:
16
17
···
26
27
/>
27
28
28
29
29
-
### HTTP Request 📤
30
+
### HTTP Request
30
31
31
32
Customize the request sent to your endpoint.
32
33
···
45
46
request.
46
47
47
48
48
-
### Limitations ⚠️
49
+
50
+
51
+
## Customization
52
+
53
+
You can customize your monitor with the following options:
54
+
55
+
<CardGrid>
56
+
<LinkCard
57
+
title="Assertions"
58
+
href="/monitoring/customization/assertions"
59
+
/>
60
+
<LinkCard
61
+
title="Frequency"
62
+
href="/monitoring/customization/frequency"
63
+
/>
64
+
<LinkCard
65
+
title="Regions"
66
+
href="/monitoring/customization/regions"
67
+
/>
68
+
<LinkCard
69
+
title="Timing"
70
+
href="/monitoring/customization/timing"
71
+
/>
72
+
</CardGrid>
73
+
74
+
75
+
76
+
## Known Limitations
49
77
50
78
<Aside>If you are monitoring an endpoint you don't own (e.g google.com), your request might be blocked by the remote server.</Aside>
51
79
52
80
53
-
## Video Tutorial 📺
81
+
82
+
## Video Tutorial
54
83
55
84
<ShowcaseYouTube
56
85
entries={[
···
60
89
},
61
90
62
91
]}
63
-
/>
92
+
/>
+8
-16
apps/docs/src/content/docs/monitoring/overview.mdx
+8
-16
apps/docs/src/content/docs/monitoring/overview.mdx
···
13
13
14
14
We will alert you if your website or API is down, is timing out or does not return the expected response.
15
15
16
-
You can create monitors in our dashboard, with the [API](https://api.openstatus.dev/v1#tag/monitor/POST/monitor) or with [Terraform](/tools/terraform).
16
+
You can create monitors in our dashboard, with the [API](https://api.openstatus.dev/v1#tag/monitor/POST/monitor) or with our [Terraform provider](/tools/terraform).
17
17
18
18
19
-
### What is a monitor? 🧑🏫
19
+
### What is a monitor?
20
20
21
21
A monitor is a job that runs periodically or on-demand and checks the status of a service. It
22
22
can be a website, an API, or anything else that can be checked automatically.
23
23
24
-
We will make a request to your endpoint on a regular schedule, or on-demand and record the results.
24
+
We will make a request to your endpoint and record the results.
25
25
26
-
### Quick Links
26
+
### Monitor types
27
27
28
28
<CardGrid>
29
29
<LinkCard
30
-
title="Assertions"
31
-
href="/monitoring/customization/assertions"
32
-
/>
33
-
<LinkCard
34
-
title="Frequency"
35
-
href="/monitoring/customization/frequency"
36
-
/>
37
-
<LinkCard
38
-
title="Regions"
39
-
href="/monitoring/customization/regions"
30
+
title="HTTP Monitor"
31
+
href="/type/http"
40
32
/>
41
33
<LinkCard
42
-
title="Timing"
43
-
href="/monitoring/customization/timing"
34
+
title="TCP Monitor"
35
+
href="/type/tcp"
44
36
/>
45
37
</CardGrid>
46
38
+34
apps/docs/src/content/docs/status-page/advanced/badge.mdx
+34
apps/docs/src/content/docs/status-page/advanced/badge.mdx
···
1
+
---
2
+
title: Status Page Badge
3
+
---
4
+
5
+
You can embed the status page badge on your website or GitHub README to show the
6
+
current status of your services.
7
+
8
+
<a href="https://status.openstatus.dev">
9
+
<img src="https://status.openstatus.dev/badge" />
10
+
</a>
11
+
12
+
Copy the following code and paste it into your website or GitHub README:
13
+
14
+
```html
15
+
<img src="https://YOUR-SLUG.openstatus.dev/badge" />
16
+
```
17
+
18
+
If you want the dark version of the badge, you can use the following URL:
19
+
20
+
```html
21
+
<img src="https://YOUR-SLUG.openstatus.dev/badge?theme=dark" />
22
+
```
23
+
24
+
You can also customize the size of the badge by adding a `size` parameter:
25
+
26
+
- `sm`
27
+
- `md`
28
+
- `lg`
29
+
- `xl`
30
+
31
+
32
+
```html
33
+
<img src="https://YOUR-SLUG.openstatus.dev/badge?theme=dark&size=xl" />
34
+
```
+16
apps/docs/src/content/docs/status-page/create-status-page.mdx
+16
apps/docs/src/content/docs/status-page/create-status-page.mdx
···
1
+
---
2
+
title: How to create a status page?
3
+
---
4
+
5
+
import { Image } from 'astro:assets';
6
+
7
+
import StatusPageEmpty from '../../../assets/status-page/status-page-empty.png';
8
+
9
+
When you create your first status page, you will see an empty page.
10
+
11
+
In order to create your status page, you need to create at least one monitor.
12
+
13
+
<Image
14
+
src={StatusPageEmpty}
15
+
alt="Create your status page"
16
+
/>
+7
-43
apps/docs/src/content/docs/status-page/overview.mdx
+7
-43
apps/docs/src/content/docs/status-page/overview.mdx
···
1
1
---
2
2
title: Status page
3
-
description: "How to create your first status page 🔥"
4
3
---
5
-
6
4
import { Image } from 'astro:assets';
7
5
8
-
import StatusPageEmpty from '../../../assets/status-page/status-page-empty.png';
6
+
import StatusPage from '../../../assets/status-page/status-page.png';
9
7
10
-
When you create your first status page, you will see an empty page.
8
+
<Image
9
+
src={StatusPage}
10
+
alt="OpenStatus status page"
11
+
/>
11
12
12
-
In order to create your status page, you need to create at least one monitor.
13
13
14
-
<Image
15
-
src={StatusPageEmpty}
16
-
alt="Create your status page"
17
-
/>
18
14
19
15
## What is a status page 🧑🏫
20
16
···
22
18
services. It shows the current status of your services and the history of
23
19
incidents.
24
20
25
-
## Status Page Badge 🏷️
26
-
27
-
You can embed the status page badge on your website or GitHub README to show the
28
-
current status of your services.
29
-
30
-
<a href="https://status.openstatus.dev">
31
-
<img src="https://status.openstatus.dev/badge" />
32
-
</a>
33
-
34
-
Copy the following code and paste it into your website or GitHub README:
35
-
36
-
```html
37
-
<img src="https://YOUR-SLUG.openstatus.dev/badge" />
38
-
```
21
+
You can create a status page with OpenStatus.dev and display the status of your synthetic checks.
39
22
40
-
If you want the dark version of the badge, you can use the following URL:
23
+
You can see our own status page at [https://status.openstatus.dev](https://status.openstatus.dev).
41
24
42
-
```html
43
-
<img src="https://YOUR-SLUG.openstatus.dev/badge?theme=dark" />
44
-
```
45
-
46
-
You can also customize the size of the badge by adding a `size` parameter:
47
-
48
-
- `sm`
49
-
- `md`
50
-
- `lg`
51
-
- `xl`
52
-
53
-
54
-
```html
55
-
<img src="https://YOUR-SLUG.openstatus.dev/badge?theme=dark&size=xl" />
56
-
```
57
-
58
-
## Add monitors metrics 📊
59
-
60
-
If you make your <a href="/status-page/customization/monitors">monitor public</a>, you can display the metrics on your status page.
+1
-1
apps/docs/src/content/docs/tools/status-widget.mdx
+1
-1
apps/docs/src/content/docs/tools/status-widget.mdx
···
17
17
<Aside>
18
18
We have released an `@openstatus/react` npm package that allows you to easily
19
19
integrate the pre-typed status into your React projects or use the default
20
-
widget. Read more [here](/packages/react).
20
+
widget. Read more [here](/tools/react).
21
21
</Aside>
22
22
23
23
The response is a JSON object with the following structure:
+6
-7
packages/emails/emails/welcome.tsx
+6
-7
packages/emails/emails/welcome.tsx
···
21
21
<br />
22
22
Here are a few things you can do with OpenStatus:
23
23
<br />- Use our{" "}
24
-
<a href="https://docs.openstatus.dev/packages/terraform">
25
-
Terraform providers
24
+
<a href="https://docs.openstatus.dev/tools/terraform">
25
+
Terraform provider
26
26
</a>{" "}
27
27
to manage your monitors
28
28
<br />- Integrate your status within your application with our{" "}
29
-
<a href="https://docs.openstatus.dev/packages/status-widget">API</a>{" "}
30
-
and{" "}
31
-
<a href="https://docs.openstatus.dev/packages/react">React Widget</a>
29
+
<a href="https://docs.openstatus.dev/tools/status-widget">API</a> and{" "}
30
+
<a href="https://docs.openstatus.dev/tools/react/">React Widget</a>
32
31
<br />- Build your own status page with our{" "}
33
-
<a href="https://docs.openstatus.dev/api-reference">API</a> and host
34
-
it where you want. Here's our{" "}
32
+
<a href="https://api.openstatus.dev/v1">API</a> and host it where you
33
+
want. Here's our{" "}
35
34
<a href="https://github.com/openstatusHQ/astro-status-page">
36
35
Astro template
37
36
</a>{" "}