+4

apps/docs/astro.config.mjs

··· 93 93 slug: "tutorial/how-to-create-status-page", 94 94 }, 95 95 { 96 96 + label: "How to configure a status page (beta)", 97 97 + slug: "tutorial/how-to-configure-status-page", 98 98 + }, 99 99 + { 96 100 label: "Get Started with OpenStatus CLI", 97 101 slug: "tutorial/get-started-with-openstatus-cli", 98 102 },

apps/docs/src/assets/tutorial/configure-status-page/configure-status-page-1.png

This is a binary file and will not be displayed.

apps/docs/src/assets/tutorial/configure-status-page/status-page-beta-1.png

This is a binary file and will not be displayed.

apps/docs/src/assets/tutorial/configure-status-page/status-page-beta-2.png

This is a binary file and will not be displayed.

apps/docs/src/assets/tutorial/configure-status-page/status-page-beta-3.png

This is a binary file and will not be displayed.

apps/docs/src/assets/tutorial/configure-status-page/status-page-beta-4.png

This is a binary file and will not be displayed.

apps/docs/src/assets/tutorial/configure-status-page/status-page-floating.png

This is a binary file and will not be displayed.

+109

apps/docs/src/content/docs/tutorial/how-to-configure-status-page.mdx

··· 1 1 + --- 2 2 + title: How to configure a status page? (beta) 3 3 + description: "How to configure a status page (beta)" 4 4 + --- 5 5 + 6 6 + import { Image } from 'astro:assets'; 7 7 + import { Aside } from '@astrojs/starlight/components'; 8 8 + import ConfigureStatusPage1 from '../../../assets/tutorial/configure-status-page/configure-status-page-1.png'; 9 9 + import StatusPageFloating from '../../../assets/tutorial/configure-status-page/status-page-floating.png'; 10 10 + import StatusPageBeta1 from '../../../assets/tutorial/configure-status-page/status-page-beta-1.png'; 11 11 + import StatusPageBeta2 from '../../../assets/tutorial/configure-status-page/status-page-beta-2.png'; 12 12 + import StatusPageBeta3 from '../../../assets/tutorial/configure-status-page/status-page-beta-3.png'; 13 13 + import StatusPageBeta4 from '../../../assets/tutorial/configure-status-page/status-page-beta-4.png'; 14 14 + 15 15 + We are releasing a new version of our status pages. 16 16 + 17 17 + <Aside>This is an **opt-in toggle**. We will keep the current status page until next year to allow you migrate or provide any feedback.</Aside> 18 18 + 19 19 + You can always have a look how your status page will look like via `https://[slug].stpg.dev`. 20 20 + 21 21 + Example: https://status.stpg.dev 22 22 + 23 23 + ## Get started 24 24 + 25 25 + Go to the **Status Page Redesign (beta)** section in your status page settings. Toggle the `Enable New Version` to support it. Once enabled, you'll see two subsections: 26 26 + 27 27 + 1. **Tracker Configuration** 28 28 + 2. **Theme Explorer** 29 29 + 2. **Links** 30 30 + 31 31 + <Image 32 32 + src={ConfigureStatusPage1} 33 33 + alt="Create your status page" 34 34 + /> 35 35 + 36 36 + ### View and configure status page 37 37 + 38 38 + Before choosing to enable the new page, we provide you with a way to check the configuration first. Click on the **View and configure status page** and you'll get forwarded to your status page and a bottom right floating button will appear. Once you're done, click on the **Dashboard** and you'll be forwarded to your page where you get asked to save the config before continuing. 39 39 + 40 40 + <Image 41 41 + src={StatusPageFloating} 42 42 + alt="Status page floating configuration popover" 43 43 + /> 44 44 + 45 45 + 46 46 + --- 47 47 + 48 48 + <Aside>Once enabled, the subdomain will have a rewrite to the new project. We are adding a `maxAge: 600` request cookie to improve the page load. **If you decide to deactivate the new version, it might take up to 10 minutes for the user to see the old page.**</Aside> 49 49 + 50 50 + ### 1. Tracker Configuration 51 51 + 52 52 + We have three new status tracker configurations to provide you with a maximum choice of displaying the collected data. 53 53 + 54 54 + **Bar Type**: How every 'day' is displayed in for a status tracker. Either **absolute** or **manual**. 55 55 + 56 56 + **Card Type**: The card type is only configurable if the bar type is **absolute**. You'll then be able to choose between **duration**, which will show the duration of "success", "error", "degraded" or "maintenance" reports or **requests** where we will share the number of request status itself. If **manual** bar type is chosen, we will only show the most significant status of the day. 57 57 + 58 58 + **Show Uptime**: The uptime is calculated by ither the **duration** of the different reports _or_ the **request** values depending on what you've chosen for the **absolute** value (incl. incidents). If you've chosen **manual**, it only gets calculated by the duration of your status reports. 59 59 + 60 60 + A few examples to understand it: 61 61 + 62 62 + Example of **absolute bar** with **duration card** and **showing uptime** 63 63 + 64 64 + <Image 65 65 + src={StatusPageBeta3} 66 66 + alt="absolute bar type with duration card and showing uptime" 67 67 + /> 68 68 + 69 69 + Example of **absolute bar** with **request card** and **hiding uptime** 70 70 + 71 71 + <Image 72 72 + src={StatusPageBeta4} 73 73 + alt="absolute bar type with request card and hiding uptime" 74 74 + /> 75 75 + 76 76 + Example of **manual bar** with **simple card** and **hiding uptime** 77 77 + 78 78 + <Image 79 79 + src={StatusPageBeta2} 80 80 + alt="manual bar type and hiding uptime" 81 81 + /> 82 82 + 83 83 + ### 2. Theme Explorer 84 84 + 85 85 + You can choose between different themes. We start with the following three: 86 86 + 87 87 + - `default` (openstatus) 88 88 + - `supabase` 89 89 + - `github-high-contrast` 90 90 + 91 91 + Visit [themes.openstatus.dev](https://themes.openstatus.dev) to see the list of supported themes. If you want, you can contribute your own to the list. 92 92 + 93 93 + ### 3. Links 94 94 + 95 95 + Let's have a closer look to your status page header navigation: 96 96 + 97 97 + <Image 98 98 + src={StatusPageBeta1} 99 99 + alt="Header navigation of your status page" 100 100 + /> 101 101 + 102 102 + **Homepage URL**: Your logo will support linking to your own website. 103 103 + 104 104 + **Contact URL**: If filled out, you will see a `Message` icon that users can click to forward them to a contact page. This can also be an email client by starting the input with `mailto:` (e.g. `mailto:support@openstatus.dev`). 105 105 + 106 106 + 107 107 + --- 108 108 + 109 109 + We are adding some additional features. Feel free to let us know what's missing!