chore: update faq (#617) · openstatus.dev/openstatus@ecade01

+10 -70

apps/web/src/app/play/page.tsx

··· 1 1 import type { Metadata } from "next"; 2 - import Link from "next/link"; 3 - import type { LucideIcon } from "lucide-react"; 4 2 import { Clock, FileCode, Gauge, Palette, PanelTop } from "lucide-react"; 5 3 6 - import { Button } from "@openstatus/ui"; 7 - 8 - import { Shell } from "@/components/dashboard/shell"; 9 4 import { BackButton } from "@/components/layout/back-button"; 10 - import { cn } from "@/lib/utils"; 5 + import type { CardProps } from "@/components/play/card"; 6 + import { Card } from "@/components/play/card"; 11 7 import { 12 8 defaultMetadata, 13 9 ogMetadata, ··· 19 15 title: "Free Tools ", 20 16 openGraph: { 21 17 ...ogMetadata, 22 - title: "Free Tools | OpenStatus", 18 + title: "Free Tools", 23 19 url: "https://www.openstatus.dev/play", 24 20 }, 25 21 twitter: { 26 22 ...twitterMetadata, 27 - title: "Free Tools | OpenStatus", 23 + title: "Free Tools", 28 24 }, 29 25 }; 30 26 ··· 48 44 ); 49 45 } 50 46 51 - interface CardProps extends React.HTMLAttributes<HTMLDivElement>, Playground {} 52 - 53 - function Card({ 54 - label, 55 - description, 56 - href, 57 - variant = "default", 58 - icon, 59 - className, 60 - ...props 61 - }: CardProps) { 62 - const buttonVariant = variant === "default" ? "outline" : "default"; 63 - const shellClassName = 64 - variant === "default" ? "" : "bg-accent text-accent-foreground"; 65 - const Icon = icon; 66 - 67 - const isExternal = href.startsWith("http"); 68 - const externalProps = isExternal 69 - ? { target: "_blank", rel: "noreferrer" } 70 - : {}; 71 - 72 - return ( 73 - <Shell 74 - className={cn( 75 - "group flex flex-col gap-3 hover:shadow", 76 - shellClassName, 77 - className, 78 - )} 79 - {...props} 80 - > 81 - <div className="flex-1 space-y-2"> 82 - <h2 className={cn("font-cal text-xl")}>{label}</h2> 83 - <p className="text-muted-foreground">{description}</p> 84 - </div> 85 - <div className="flex items-center justify-between"> 86 - <Button variant={buttonVariant} className="rounded-full" asChild> 87 - <Link href={href} {...externalProps}> 88 - Learn more 89 - </Link> 90 - </Button> 91 - <div className="border-border bg-background rounded-full border p-2 transition-transform duration-200 group-hover:-rotate-12"> 92 - <Icon className="text-muted-foreground h-5 w-5" /> 93 - </div> 94 - </div> 95 - </Shell> 96 - ); 97 - } 98 - 99 - type Playground = { 100 - href: string; 101 - label: string; 102 - description: string; 103 - icon: LucideIcon; 104 - variant?: "default" | "primary"; 105 - }; 106 - 107 - const playgrounds: Playground[] = [ 47 + const playgrounds: CardProps[] = [ 108 48 { 109 49 href: "/play/checker", 110 - label: "Speed Checker", 50 + title: "Speed Checker", 111 51 description: 112 52 "Get speed insights for your api, website from multiple regions. No account needed.", 113 53 icon: Gauge, ··· 115 55 }, 116 56 { 117 57 href: "/play/status", 118 - label: "Status Page", 58 + title: "Status Page", 119 59 description: 120 60 "Get a status page for your website or api, supporting timezones.", 121 61 icon: PanelTop, 122 62 }, 123 63 { 124 64 href: "https://astro.openstat.us", 125 - label: "Custom Astro Status Page", 65 + title: "Custom Astro Status Page", 126 66 description: 127 67 "Grab your API key and create a custom status page with our Astro starter.", 128 68 icon: Palette, 129 69 }, 130 70 { 131 71 href: "https://time.openstatus.dev", 132 - label: "Shadcn UI Time Picker", 72 + title: "Shadcn UI Time Picker", 133 73 description: 134 74 "The missing time picker for your next project. Supports 12 hour and 24 hour formats. Fully accessible.", 135 75 icon: Clock, 136 76 }, 137 77 { 138 78 href: "https://openstat.us", 139 - label: "All Status Codes", 79 + title: "All Status Codes", 140 80 description: 141 81 "Use the endpoint to return the desired error code for testing purposes.", 142 82 icon: FileCode,

+6 -6

apps/web/src/components/play/card.tsx

··· 6 6 import { Shell } from "@/components/dashboard/shell"; 7 7 import { cn } from "@/lib/utils"; 8 8 9 - interface CardProps extends React.HTMLAttributes<HTMLDivElement> { 9 + export interface CardProps extends React.HTMLAttributes<HTMLDivElement> { 10 10 href: string; 11 11 title: string; 12 12 description: string; ··· 14 14 variant?: "default" | "primary"; 15 15 } 16 16 17 - // TODO: unify the cards of playground, oss-friends and external monitors 18 - 19 - function Card({ 17 + export function Card({ 20 18 title, 21 19 description, 22 20 href, ··· 34 32 ? { target: "_blank", rel: "noreferrer" } 35 33 : {}; 36 34 35 + const Icon = icon; 36 + 37 37 return ( 38 38 <Shell 39 39 className={cn( 40 - "group flex flex-col gap-3 hover:shadow", 40 + "hover:dark:border-card-foreground/30 group flex flex-col gap-3 hover:shadow", 41 41 shellClassName, 42 42 className, 43 43 )} ··· 54 54 </Link> 55 55 </Button> 56 56 <div className="border-border bg-background rounded-full border p-2 transition-transform duration-200 group-hover:-rotate-12"> 57 - {icon ? icon({ className: "text-muted-foreground h-5 w-5" }) : null} 57 + {Icon && <Icon className="text-muted-foreground h-5 w-5" />} 58 58 </div> 59 59 </div> 60 60 </Shell>

+3 -3

apps/web/src/content/faq/about-us.mdx

··· 3 3 order: 2 4 4 --- 5 5 6 - {/* TODO: write markdown */} 6 + We are [Thibault](https://twitter.com/thibaultleouay) and 7 + [Max](https://twitter.com/mxkaske). 7 8 8 - We are <a href='https://twitter.com/thibaultleouay' target='_blank'>Thibault</a> 9 - and <a href='https://twitter.com/mxkaske' target='_blank'>Max</a>. 9 + > An about us page is coming soon where we will share our values and history.

+5 -2

apps/web/src/content/faq/functioning.mdx

··· 3 3 order: 3 4 4 --- 5 5 6 - We ping your endpoints from multiple regions to calculate uptime. We display the 7 - status on your status page. 6 + We ping your endpoints from multiple regions to calculate uptime and display the 7 + current status on your status page. We also collect response time data like 8 + `headers` and `timing` phases and display it on your dashboard. 9 + 10 + Try out the [Speed Checker](/play/checker).

+10 -4

apps/web/src/content/faq/help.mdx

··· 3 3 order: 5 4 4 --- 5 5 6 - {/* TODO: write markdown */} 6 + There are many ways you can help us: 7 7 8 - You can star our project on 9 - <a href="https://github.com/openstatusHQ/openstatus">GitHub</a>, or contribute 10 - to it. Or you can also become a <strong>Pro</strong> user. 8 + - **Spread the word**: Tell your friends and colleagues about OpenStatus. The 9 + more people use it, the more we can improve it. 10 + - **Report bugs**: If you find a bug, please report it. 11 + - **Suggest features**: If you have an idea for a new feature, please let us 12 + know. 13 + - **Contribute**: If you are a developer, you can contribute to the project. 14 + - **Become a paid user**: If you are a business, you can become a paid user. 15 + - **Star our project**: If you like our project, you can star it on 16 + [GitHub](https://github.com/openstatusHQ/openstatus).

+4 -5

apps/web/src/content/faq/limits.mdx

··· 3 3 order: 1 4 4 --- 5 5 6 - {/* TODO: write markdown */} 6 + As free user you will start with a total of **3 monitors** and **1 status page** 7 + as well as cron jobs of min. `10m`. You can upgrade to a paid plan at any time. 8 + Check the pricing table for more details. 7 9 8 - You will start with a free plan by default which includes a total of <strong>3 9 - monitors</strong> and <strong>1 status</strong> page as well as cron jobs of 10 - either <code>10m</code>, <code>30m</code> or <code>1h</code>.<br />Learn more 11 - about our <a href='/pricing'>pricing</a>. 10 + **No credit card** is required to sign up and you can cancel at any time.

+11 -1

apps/web/src/content/faq/supported-regions.mdx

··· 3 3 order: 4 4 4 --- 5 5 6 - We support one region for each continent to allow multi-regions monitoring. 6 + We support one region for each continent to allow multi-regions monitoring: 7 + 8 + - America: `iad` (Virginia) 9 + - Europe: `ams` (Amsterdam) 10 + - Asia: `hkg` (Hong-Kong) 11 + - Oceania: `syd` (Sydney) 12 + - Africa: `jnb` (Johannesburg) 13 + - South America: `gru` (Sao Paulo) 14 + 15 + Feel free to [contact us](mailto:ping@openstatus.dev) if you need a specific 16 + region.