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
··· 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

This is a binary file and will not be displayed.

+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
··· 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
··· 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
··· 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
··· 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
··· 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
··· 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
··· 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
··· 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>{" "}