Docs Revamp and Astro Upgrade v6

[aggmoulik]

No description provided.

[vercel]

@aggmoulik is attempting to deploy a commit to the OpenStatus Team on Vercel.

A member of the Team first needs to authorize it.

[cubic-dev-ai]

25 issues found across 47 files

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="apps/docs/src/components/override-components/Header.astro">

<violation number="1" location="apps/docs/src/components/override-components/Header.astro:39">
P2: Use `window.addEventListener("scroll", ...)` instead of assigning to `window.onscroll`. Direct property assignment silently overwrites any other scroll handler, which is fragile as the codebase grows.</violation>
</file>

<file name="apps/docs/src/components/SidebarNav.astro">

<violation number="1" location="apps/docs/src/components/SidebarNav.astro:48">
P1: `getFirstHref(item)` can return `null`, which is passed directly as the `href` attribute. This renders a non-functional `<a>` without an `href`. Either filter out items where `href` is `null`, or provide a fallback like `"#"`.</violation>
</file>

<file name="apps/docs/src/components/ImageMod.astro">

<violation number="1" location="apps/docs/src/components/ImageMod.astro:37">
P2: Glob pattern only matches top-level files in `/src/assets/`. Images in subdirectories (e.g. `/src/assets/guides/img.png`) won't resolve, and the component will silently render nothing. Use `**/*` to match at any depth.</violation>
</file>

<file name="apps/docs/astro.config.mjs">

<violation number="1" location="apps/docs/astro.config.mjs:55">
P3: Use `@ts-expect-error` instead of `@ts-ignore`. With `// @ts-check` enabled, `@ts-expect-error` will alert you when the suppressed type error is resolved, preventing stale suppressions.</violation>
</file>

<file name="apps/docs/src/components/Breadcrumb.astro">

<violation number="1" location="apps/docs/src/components/Breadcrumb.astro:13">
P1: `item.href` is computed but never used — breadcrumb items render as plain text instead of links. Preceding items should be wrapped in `<a>` tags so users can navigate back.</violation>
</file>

<file name="apps/docs/package.json">

<violation number="1" location="apps/docs/package.json:21">
P2: All dependency versions in this file were changed from exact pins to caret (`^`) ranges. The rest of the monorepo pins exact versions to ensure reproducible builds and intentional upgrades. Remove the `^` prefixes to align with the project convention (e.g., `"astro": "6.0.8"` instead of `"^6.0.8"`).

(Based on your team's feedback about pinning dependency versions instead of using ranges.) [FEEDBACK_USED]</violation>
</file>

<file name="apps/docs/src/components/override-components/PageFrame.astro">

<violation number="1" location="apps/docs/src/components/override-components/PageFrame.astro:61">
P1: This selector targets a hardcoded Astro scoped-class hash (`.astro-jif73yzw`), which is auto-generated and will change whenever the referenced component's content is modified. Use a `:global()` selector targeting a stable class or data attribute instead, so the rule doesn't silently stop matching after the next rebuild.</violation>
</file>

<file name="apps/docs/src/components/override-components/TwoColumnContent.astro">

<violation number="1" location="apps/docs/src/components/override-components/TwoColumnContent.astro:33">
P1: Content is permanently invisible when JavaScript is unavailable. The `.content-container` starts at `opacity: 0` and only becomes visible via the inline script. Add a `<noscript>` style fallback so the content is still readable without JS:

```html
<noscript><style>.content-container { opacity: 1 !important; }</style></noscript>

Alternatively, set opacity: 1 as the default and let JS add the fade-in transition.

P2: Duplicate `.top-level > li` rule overrides the padding from the earlier rule. The first rule sets `padding-bottom: 1.6rem` and `padding-top: 1rem`, but these are immediately overridden by the second rule's `10px` values. Consolidate into a single rule to avoid confusion about which values actually apply. P2: Duplicate `align-items` property in the `a` rule — `align-items: center` on line 49 is overridden by `align-items: end` on line 58 and has no effect. Remove one of them to clarify the intended alignment. P2: `border-color` on hover has no visible effect because the `border` declaration on `a` is commented out. Either restore the border or remove this dead hover rule. P2: Hardcoded `#A3A3A3` stroke won't adapt to dark mode. Use `currentColor` (inheriting from the text/heading color) or a CSS custom property so the icon remains visible in both light and dark themes. P2: When `className` is not passed, the template literal renders `"theme-switcher undefined"` as the class string. Use a fallback to avoid injecting a literal `"undefined"` class. P1: `themeSwitcher` is guarded with `?.` for `addEventListener` but accessed without a null check inside `DOMContentLoaded`. If the element isn't in the DOM, `themeSwitcher.checked` will throw a TypeError. P2: `CommitMono` is a monospace font, but `primary_type` is `"sans-serif"`. This should be `"monospace"` so the correct generic font family is used as a CSS fallback. P2: The comment says "dark vars on .dark" but `darkVars` are merged into `baseVars` and applied to `:root` alongside everything else — no `.dark` selector exists. If dark-mode overrides are intended, they should be scoped under a `.dark` (or `@media (prefers-color-scheme: dark)`) rule via a separate `addBase` call. P2: Hardcoded `z-index: 200` bypasses the design token system used elsewhere in this file (`var(--sl-z-index-toc)`) and in neighboring components. This can cause z-index stacking issues if the token values change. Also, this line uses spaces instead of tabs, inconsistent with the rest of the file. P2: `href` can be `null` here since `getFirstHref` returns `string | null`. This renders an `` without an `href` attribute — visually it looks clickable (`cursor-pointer`) but won't navigate. Either filter out items with no resolvable href or provide a fallback. P2: The `|| ""` fallback is unreachable — template literals always produce a string, so if `iconPath` is `null`, `img.src` silently becomes `"/null"`. Guard against null before interpolation. P2: The `community`, `help_links`, and `company` sections are structurally identical. Extract them into a loop to reduce duplication and make it easier to add/remove footer sections. P1: This form defaults to `method="GET"`, which will expose the submitted email address in the URL query string. Add `method="POST"` to prevent the email from appearing in browser history, server logs, and referrer headers. P2: The `image` selector doesn't match HTML `` elements — it only matches the SVG `` element. This should almost certainly be `img`. P1: The button's `aria-expanded` is set to `"false"` in the template but never updated by `setExpanded()`, which only sets it on the custom element wrapper (`this`). Screen readers will always report the menu as collapsed. Update the button's attribute as well. P2: Generic font family `sans-serif` must not be quoted. Quoted `"sans-serif"` is treated as a literal named font lookup, not a generic family fallback. If `calsans` fails to load, the browser won't fall back to the system sans-serif. P1: Monospace font `CommitMono` falls back to quoted `'sans-serif'` instead of unquoted `monospace`. If the font fails to load, code will render proportionally. Use the `monospace` generic family (unquoted) as the fallback. ```

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

P1: Content is permanently invisible when JavaScript is unavailable. The .content-container starts at opacity: 0 and only becomes visible via the inline script. Add a <noscript> style fallback so the content is still readable without JS:

<noscript><style>.content-container { opacity: 1 !important; }</style></noscript>

Alternatively, set opacity: 1 as the default and let JS add the fade-in transition.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At apps/docs/src/components/override-components/TwoColumnContent.astro, line 33:

<comment>Content is permanently invisible when JavaScript is unavailable. The `.content-container` starts at `opacity: 0` and only becomes visible via the inline script. Add a `<noscript>` style fallback so the content is still readable without JS:

```html
<noscript><style>.content-container { opacity: 1 !important; }</style></noscript>

Alternatively, set opacity: 1 as the default and let JS add the fade-in transition.

@@ -0,0 +1,87 @@ + .content-container { + width: 100%; + overflow: hidden; + opacity: 0; + transition: opacity 0.3s ease-in-out; + } ```

[cubic-dev-ai]

P1: themeSwitcher is guarded with ?. for addEventListener but accessed without a null check inside DOMContentLoaded. If the element isn't in the DOM, themeSwitcher.checked will throw a TypeError.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At apps/docs/src/components/override-components/ThemeSwitch.astro, line 91:

<comment>`themeSwitcher` is guarded with `?.` for `addEventListener` but accessed without a null check inside `DOMContentLoaded`. If the element isn't in the DOM, `themeSwitcher.checked` will throw a TypeError.</comment>

<file context>
@@ -0,0 +1,100 @@
+  });
+
+  document.addEventListener("DOMContentLoaded", () => {
+    const savedTheme = localStorage.getItem("starlight-theme");
+    if (savedTheme === "light") {
+      themeSwitcher.checked = false;
</file context>

[cubic-dev-ai]

P2: The image selector doesn't match HTML <img> elements — it only matches the SVG <image> element. This should almost certainly be img.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At apps/docs/src/styles/navigation.css, line 38:

<comment>The `image` selector doesn't match HTML `<img>` elements — it only matches the SVG `<image>` element. This should almost certainly be `img`.</comment>

<file context>
@@ -0,0 +1,120 @@
+.navbar-brand {
+  @apply  text-xl font-semibold flex items-center select-none;
+  image {
+    @apply max-h-full max-w-full;
+  }
+}
</file context>

[cubic-dev-ai]

P2: Generic font family sans-serif must not be quoted. Quoted "sans-serif" is treated as a literal named font lookup, not a generic family fallback. If calsans fails to load, the browser won't fall back to the system sans-serif.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At apps/docs/src/styles/global.css, line 17:

<comment>Generic font family `sans-serif` must not be quoted. Quoted `"sans-serif"` is treated as a literal named font lookup, not a generic family fallback. If `calsans` fails to load, the browser won't fall back to the system sans-serif.</comment>

<file context>
@@ -0,0 +1,219 @@
+}
+
+@theme {
+  --font-cal: "calsans", "sans-serif";
+  --font-mono: 'CommitMono', 'sans-serif';
+  --font-sans: 'Inter', 'sans-serif';
</file context>

Suggested change

	--font-cal: "calsans", "sans-serif";
	--font-cal: "calsans", sans-serif;

[cubic-dev-ai]

P3: Use @ts-expect-error instead of @ts-ignore. With // @ts-check enabled, @ts-expect-error will alert you when the suppressed type error is resolved, preventing stale suppressions.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At apps/docs/astro.config.mjs, line 55:

<comment>Use `@ts-expect-error` instead of `@ts-ignore`. With `// @ts-check` enabled, `@ts-expect-error` will alert you when the suppressed type error is resolved, preventing stale suppressions.</comment>

<file context>
@@ -28,217 +45,34 @@ export default defineConfig({
+        dark: logo_darkmode,
+        alt: "OpenStatus Logo",
+      },
+      // @ts-ignore
+      social: social.main || [],
+      sidebar: sidebar.main || [],
</file context>

Suggested change

	// @ts-ignore
	// @ts-expect-error - social config shape may differ from Starlight's expected type

[cubic-dev-ai]

1 issue found across 8 files (changes from recent commits).

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="apps/docs/astro.config.mjs">

<violation number="1" location="apps/docs/astro.config.mjs:1">
P2: `// @ts-check` is no longer the first line of the file, so TypeScript will silently ignore it and skip type checking. Move the import below the directive to restore type checking.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

1 issue found across 2 files (changes from recent commits).

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="apps/docs/src/components/override-components/Header.astro">

<violation number="1" location="apps/docs/src/components/override-components/Header.astro:35">
P2: `as any` on the icon name bypasses Starlight's `Icon` type checking, hiding invalid icon names until runtime. Consider typing the JSON values against Starlight's supported icon names (e.g., importing the icon name type) or at minimum using a more specific assertion so build-time validation catches typos.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

P2: as any on the icon name bypasses Starlight's Icon type checking, hiding invalid icon names until runtime. Consider typing the JSON values against Starlight's supported icon names (e.g., importing the icon name type) or at minimum using a more specific assertion so build-time validation catches typos.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At apps/docs/src/components/override-components/Header.astro, line 35:

<comment>`as any` on the icon name bypasses Starlight's `Icon` type checking, hiding invalid icon names until runtime. Consider typing the JSON values against Starlight's supported icon names (e.g., importing the icon name type) or at minimum using a more specific assertion so build-time validation catches typos.</comment>

<file context>
@@ -27,10 +29,31 @@ const hasSidebar = Astro.locals.starlightRoute.hasSidebar;
+     <div class="social-icons hidden md:flex items-center gap-3">
+      {social.main.map((item) => (
+        <a href={item.href} target="_blank" rel="noopener noreferrer" aria-label={item.label}>
+          <Icon name={item.icon as any} size="1.25rem" />
+        </a>
+      ))}
</file context>