chore: docs (#1111)

* chore: meta image

* chore: clone monitor docs

apps/docs/astro.config.mjs

@@ -1,7 +1,6 @@
 import sitemap from "@astrojs/sitemap";
 import starlight from "@astrojs/starlight";
 import tailwind from "@astrojs/tailwind";
-// @ts-check
 import { defineConfig } from "astro/config";
 import starlightSidebarTopics from "starlight-sidebar-topics";
 import Icons from "unplugin-icons/vite";
@@ -69,6 +68,10 @@ export default defineConfig({
                     label: "Group your monitors",
                     slug: "monitoring/group-monitor-tag",
                   },
+                  {
+                    label: "Clone a monitor",
+                    slug: "monitoring/clone-monitor",
+                  },
                   {
                     label: "Monitor Types",
                     collapsed: true,

apps/docs/src/components/Head.astro

@@ -10,6 +10,7 @@ const url = `https://openstatus.dev/api/og?title=${siteTitle}&description=${titl
 <Default {...Astro.props}><slot /></Default>
 
 <meta property="og:image" content={url} />
+<meta name="twitter:image" content={url} />
 
 
 <script is:inline defer data-domain="docs.openstatus.dev" src="https://plausible.io/js/script.js" />

apps/docs/src/content/docs/monitoring/clone-monitor.mdx

@@ -0,0 +1,18 @@
+---
+title: How to clone a monitor?
+description: "How to clone your first monitor with OpenStatus.dev"
+---
+
+import { Image } from 'astro:assets';
+import monitorDetail from '../../../assets/monitor/clone-monitor.png';
+
+
+Go to the **Monitors** page, click on three dots and the select the **Clone** button. This will create a new monitor with the same settings as the original monitor (including Status Page, Notifications and Tags).
+
+By default, the cloned monitor will be in the **inactive** state to allow you to review the settings before activating it.
+
+  <Image
+    src={monitorDetail}
+    alt="Charts with status code and response time"
+  />
+