Docs Revamp and Astro Upgrade v6

apps/docs/.gitignore

@@ -2,6 +2,8 @@
 dist/
 # generated types
 .astro/
+# wrangler
+.wrangler/
 
 # dependencies
 node_modules/

apps/docs/astro.config.mjs

@@ -1,21 +1,38 @@
+import { fileURLToPath } from "node:url";
+// @ts-check
 import sitemap from "@astrojs/sitemap";
 import starlight from "@astrojs/starlight";
 import tailwindcss from "@tailwindcss/vite";
 import { defineConfig, envField } from "astro/config";
 import starlightImageZoom from "starlight-image-zoom";
 import starlightLinksValidator from "starlight-links-validator";
 import starlightLlmsTxt from "starlight-llms-txt";
-
 import Icons from "unplugin-icons/vite";
 
+import config from "./src/config/config.json";
+import sidebar from "./src/config/sidebar.json";
+import social from "./src/config/social.json";
+
+const { site } = config;
+const { title, logo, logo_darkmode } = site;
+
 // https://astro.build/config
 export default defineConfig({
   site: "https://docs.openstatus.dev",
   vite: {
-    plugins: [Icons({ compiler: "astro" }), tailwindcss()],
+    plugins: /** @type {any} */ ([Icons({ compiler: "astro" }), tailwindcss()]),
     ssr: {
       noExternal: ["zod"],
     },
+    resolve: {
+      alias: {
+        "@": fileURLToPath(new URL("./src", import.meta.url)),
+        "~": fileURLToPath(new URL("./src", import.meta.url)),
+      },
+    },
+  },
+  image: {
+    service: { entrypoint: "astro/assets/services/noop" },
   },
   env: {
     schema: {
@@ -28,229 +45,33 @@ export default defineConfig({
   integrations: [
     sitemap(),
     starlight({
-      title: "openstatus docs",
+      title,
       favicon: "/favicon.ico",
-      social: [
-        {
-          icon: "github",
-          label: "GitHub",
-          href: "https://github.com/openstatusHQ/openstatus",
-        },
-        {
-          icon: "discord",
-          label: "Discord",
-          href: "https://www.openstatus.dev/discord",
-        },
-        {
-          icon: "blueSky",
-          label: "BlueSky",
-          href: "https://bsky.app/profile/openstatus.dev",
-        },
-      ],
+      logo: {
+        light: logo,
+        dark: logo_darkmode,
+        alt: "OpenStatus Logo",
+      },
+      // @ts-ignore
+      social: social.main || [],
+      sidebar: sidebar.main || [],
+      customCss: ["./src/styles/global.css"],
       components: {
-        SiteTitle: "./src/components/SiteTitle.astro",
-        Head: "./src/components/Head.astro",
-        Hero: "./src/components/Hero.astro",
+        Head: "./src/components/override-components/Head.astro",
+        Header: "./src/components/override-components/Header.astro",
+        Hero: "./src/components/override-components/Hero.astro",
+        PageFrame: "./src/components/override-components/PageFrame.astro",
+        PageSidebar: "./src/components/override-components/PageSidebar.astro",
+        TwoColumnContent:
+          "./src/components/override-components/TwoColumnContent.astro",
+        ContentPanel: "./src/components/override-components/ContentPanel.astro",
+        Pagination: "./src/components/override-components/Pagination.astro",
+        Sidebar: "./src/components/override-components/Sidebar.astro",
         Footer: "./src/components/Footer.astro",
       },
       editLink: {
         baseUrl: "https://github.com/openstatusHQ/openstatus/app/docs",
       },
-      customCss: [
-        // Path to your Tailwind base styles:
-        "./src/global.css",
-        "./src/custom.css",
-        "@fontsource-variable/inter",
-      ],
-      sidebar: [
-        {
-          label: "Concepts",
-          items: [
-            {
-              label: "About Uptime monitoring",
-              slug: "concept/uptime-monitoring",
-            },
-            {
-              label: "Best Practices for Status Pages",
-              slug: "concept/best-practices-status-page",
-            },
-            {
-              label: "Uptime Calculation and Values",
-              slug: "concept/uptime-calculation-and-values",
-            },
-            {
-              label: "Uptime Monitoring as Code",
-              slug: "concept/uptime-monitoring-as-code",
-            },
-            {
-              label: "Latency vs Response Time",
-              slug: "concept/latency-vs-response-time",
-            },
-          ],
-        },
-        {
-          label: "Tutorials",
-          items: [
-            {
-              label: "How to create a monitor",
-              slug: "tutorial/how-to-create-monitor",
-            },
-            {
-              label: "How to create a status page",
-              slug: "tutorial/how-to-create-status-page",
-            },
-            {
-              label: "How to configure a status page",
-              slug: "tutorial/how-to-configure-status-page",
-            },
-            {
-              label: "How to create a private location (beta)",
-              slug: "tutorial/how-to-create-private-location",
-            },
-            {
-              label: "Get Started with OpenStatus CLI",
-              slug: "tutorial/get-started-with-openstatus-cli",
-            },
-            {
-              label: "How to set up the Slack Agent",
-              slug: "tutorial/how-to-setup-slack-agent",
-            },
-            {
-              label: "Manage Your Stack with Terraform and CLI",
-              slug: "tutorial/how-to-manage-openstatus-with-terraform-cli",
-            },
-            {
-              label: "Import a Status Page from Another Provider",
-              slug: "tutorial/how-to-import-status-page",
-            },
-          ],
-        },
-
-        {
-          label: "Guides",
-          items: [
-            {
-              label: "Monitor your MCP Server",
-              slug: "guides/how-to-monitor-mcp-server",
-            },
-            {
-              label: "Run check in GitHub Actions",
-              slug: "guides/how-to-run-synthetic-test-github-action",
-            },
-            {
-              label: "Export Metrics to your OTLP Endpoint",
-              slug: "guides/how-to-export-metrics-to-otlp-endpoint",
-            },
-            {
-              label: "How to Add an SVG Status Badge to your GitHub README",
-              slug: "guides/how-to-add-svg-status-badge",
-            },
-            {
-              label: "How to use React Status Widget",
-              slug: "guides/how-to-use-react-widget",
-            },
-            {
-              label: "How to deploy probes on Cloudflare Containers ",
-              slug: "guides/how-to-deploy-probes-cloudflare-containers",
-            },
-            {
-              label: "How to self-host openstatus",
-              slug: "guides/self-hosting-openstatus",
-            },
-            {
-              label: "Self host Status Page only",
-              slug: "guides/self-host-status-page-only",
-            },
-            {
-              label: "How to translate your status page",
-              slug: "guides/how-to-translate-status-page",
-            },
-          ],
-        },
-        {
-          label: "SDK",
-          items: [
-            {
-              label: "Node SDK",
-              autogenerate: { directory: "sdk/nodejs" },
-              collapsed: true,
-            },
-          ],
-        },
-        {
-          label: "Reference",
-          items: [
-            {
-              label: "CLI Reference",
-              slug: "reference/cli-reference",
-            },
-            {
-              label: "API Reference V1 - Deprecated",
-              link: "https://api.openstatus.dev/v1",
-              // badge: { text: 'External' },
-              attrs: {
-                target: "_blank",
-              },
-            },
-            {
-              label: "API Reference V2",
-              link: "https://api.openstatus.dev/openapi",
-              // badge: { text: 'External' },
-              attrs: {
-                target: "_blank",
-              },
-            },
-            {
-              label: "DNS Monitor",
-              slug: "reference/dns-monitor",
-            },
-            {
-              label: "HTTP Monitor",
-              slug: "reference/http-monitor",
-            },
-            {
-              label: "Incident",
-              slug: "reference/incident",
-            },
-            {
-              label: "TCP Monitor",
-              slug: "reference/tcp-monitor",
-            },
-            {
-              label: "Notification",
-              slug: "reference/notification",
-            },
-            {
-              label: "Location",
-              slug: "reference/location",
-            },
-            {
-              label: "Private location",
-              slug: "reference/private-location",
-            },
-            {
-              label: "Status Page",
-              slug: "reference/status-page",
-            },
-            {
-              label: "Page Components",
-              slug: "reference/page-components",
-            },
-            {
-              label: "Status Report",
-              slug: "reference/status-report",
-            },
-            {
-              label: "Subscriber",
-              slug: "reference/subscriber",
-            },
-            {
-              label: "Terraform Provider",
-              slug: "reference/terraform",
-            },
-          ],
-        },
-      ],
       plugins: [
         starlightLinksValidator({
           errorOnLocalLinks: false,

apps/docs/package.json

@@ -6,31 +6,34 @@
     "dev": "astro dev",
     "start": "astro dev",
     "build": "astro check && astro build",
-    "preview": "astro preview",
+    "preview": "wrangler dev",
+    "deploy": "wrangler deploy",
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/check": "0.9.6",
-    "@astrojs/react": "4.4.2",
-    "@astrojs/sitemap": "3.6.0",
-    "@astrojs/starlight": "0.37.1",
-    "@astrojs/starlight-tailwind": "4.0.2",
+    "@astrojs/check": "0.9.8",
+    "@astrojs/react": "5.0.1",
+    "@astrojs/sitemap": "3.7.1",
+    "@astrojs/starlight": "0.38.2",
+    "@astrojs/starlight-tailwind": "5.0.0",
     "@fontsource-variable/inter": "5.2.8",
-    "@openpanel/astro": "1.0.1",
-    "@tailwindcss/vite": "4.1.8",
-    "astro": "5.16.6",
-    "shiki": "3.23.0",
-    "sharp": "0.33.5",
-    "starlight-image-zoom": "0.13.2",
-    "starlight-links-validator": "0.19.2",
-    "starlight-llms-txt": "0.7.0",
-    "starlight-showcases": "0.3.1",
-    "starlight-sidebar-topics": "0.6.2",
-    "tailwindcss": "4.1.11",
-    "unplugin-icons": "22.1.0"
+    "@openpanel/astro": "1.3.0",
+    "@tailwindcss/vite": "4.2.2",
+    "astro": "6.0.8",
+    "astro-font": "1.1.0",
+    "marked": "17.0.1",
+    "shiki": "4.0.2",
+    "starlight-image-zoom": "0.14.1",
+    "starlight-links-validator": "0.20.1",
+    "starlight-llms-txt": "0.8.0",
+    "starlight-showcases": "0.3.2",
+    "starlight-sidebar-topics": "0.7.1",
+    "tailwindcss": "4.2.2",
+    "unplugin-icons": "23.0.1",
+    "wrangler": "^4.78.0"
   },
   "devDependencies": {
-    "@iconify-json/lucide": "1.2.26",
+    "@iconify-json/lucide": "1.2.98",
     "typescript": "5.9.3"
   }
 }