📝 some docs improvments

apps/docs/astro.config.mjs

@@ -103,6 +103,7 @@ export default defineConfig({
 
                 items: [
                   { label: "Overview", slug: "status-page/overview" },
+                  { label: "Create your status page", slug: "status-page/create-status-page" },
                   { label: "Reports", slug: "status-page/reports" },
                   { label: "Maintenances", slug: "status-page/maintenances" },
                   { label: "Widget", slug: "status-page/widget" },
@@ -116,6 +117,11 @@ export default defineConfig({
                     autogenerate: { directory: "status-page/customization" },
                     collapsed: true,
                   },
+                  {
+                    label: "Advanced",
+                    autogenerate: { directory: "status-page/advanced" },
+                    collapsed: true,
+                  },
                 ],
               },
               { label: "Incidents", autogenerate: { directory: "incident" } },

apps/docs/src/content/docs/status-page/advanced/badge.mdx

@@ -0,0 +1,34 @@
+---
+title: Status Page Badge
+---
+
+You can embed the status page badge on your website or GitHub README to show the
+current status of your services.
+
+<a href="https://status.openstatus.dev">
+  <img src="https://status.openstatus.dev/badge" />
+</a>
+
+Copy the following code and paste it into your website or GitHub README:
+
+```html
+<img src="https://YOUR-SLUG.openstatus.dev/badge" />
+```
+
+If you want the dark version of the badge, you can use the following URL:
+
+```html
+<img src="https://YOUR-SLUG.openstatus.dev/badge?theme=dark" />
+```
+
+You can also customize the size of the badge by adding a `size` parameter:
+
+- `sm`
+- `md`
+- `lg`
+- `xl`
+
+
+```html
+<img src="https://YOUR-SLUG.openstatus.dev/badge?theme=dark&size=xl" />
+```

apps/docs/src/content/docs/status-page/create-status-page.mdx

@@ -0,0 +1,16 @@
+---
+title: How to create a status page?
+---
+
+import { Image } from 'astro:assets';
+
+import StatusPageEmpty from '../../../assets/status-page/status-page-empty.png';
+
+When you create your first status page, you will see an empty page.
+
+In order to create your status page, you need to create at least one monitor.
+
+  <Image
+    src={StatusPageEmpty}
+    alt="Create your status page"
+  />

apps/docs/src/content/docs/status-page/overview.mdx

@@ -1,60 +1,24 @@
 ---
 title: Status page
-description: "How to create your first status page 🔥"
 ---
-
 import { Image } from 'astro:assets';
 
-import StatusPageEmpty from '../../../assets/status-page/status-page-empty.png';
-
-When you create your first status page, you will see an empty page.
-
-In order to create your status page, you need to create at least one monitor.
+import StatusPage from '../../../assets/status-page/status-page.png';
 
   <Image
-    src={StatusPageEmpty}
-    alt="Create your status page"
+    src={StatusPage}
+    alt="OpenStatus status page"
   />
 
+
+
 ## What is a status page 🧑‍🏫
 
 A status page is a public page that displays the status and performance of your
 services. It shows the current status of your services and the history of
 incidents.
 
-## Status Page Badge 🏷️
-
-You can embed the status page badge on your website or GitHub README to show the
-current status of your services.
-
-<a href="https://status.openstatus.dev">
-  <img src="https://status.openstatus.dev/badge" />
-</a>
-
-Copy the following code and paste it into your website or GitHub README:
-
-```html
-<img src="https://YOUR-SLUG.openstatus.dev/badge" />
-```
-
-If you want the dark version of the badge, you can use the following URL:
-
-```html
-<img src="https://YOUR-SLUG.openstatus.dev/badge?theme=dark" />
-```
-
-You can also customize the size of the badge by adding a `size` parameter:
-
-- `sm`
-- `md`
-- `lg`
-- `xl`
-
-
-```html
-<img src="https://YOUR-SLUG.openstatus.dev/badge?theme=dark&size=xl" />
-```
+You can create a status page with OpenStatus.dev and display the status of your synthetic checks.
 
-##  Add monitors metrics 📊
+You can see our own status page at [https://status.openstatus.dev](https://status.openstatus.dev).
 
-If you make your <a href="/status-page/customization/monitors">monitor public</a>, you can display the metrics on your status page.