diff --git a/.agents/skills/README.md b/.agents/skills/README.md new file mode 100644 index 000000000..9db4d8db4 --- /dev/null +++ b/.agents/skills/README.md @@ -0,0 +1,24 @@ +# Agent skills + +Reusable skills for AI agents working in the aspire.dev repository. Each skill lives in its own +folder as a `SKILL.md` with YAML frontmatter (`name`, `description`) and is discovered automatically — +there's no central registry to update. Add a new skill by creating `.agents/skills//SKILL.md`. + +> These are **internal** skills for contributors and agents working *on* this repo. They are separate +> from the public skills served under `src/frontend/public/.well-known/agent-skills/`. + +## Skills at a glance + +| Skill | What it's for | +|-------|---------------| +| [`aspire`](./aspire/SKILL.md) | Run, debug, and manage the repo's distributed app via the Aspire CLI. | +| [`container-images`](./container-images/SKILL.md) | Extract container image references from Aspire source into the site's JSON data. | +| [`doc-pr-reviewer`](./doc-pr-reviewer/SKILL.md) | Review a single docs PR for factual accuracy against Aspire's source of truth. | +| [`doc-tester`](./doc-tester/SKILL.md) | Validate documentation against Aspire's actual behavior. | +| [`doc-writer`](./doc-writer/SKILL.md) | Write and maintain accurate documentation pages. | +| [`hex1b`](./hex1b/SKILL.md) | Automate any terminal app in a headless virtual terminal. | +| [`playwright-cli`](./playwright-cli/SKILL.md) | Drive a browser for web testing, screenshots, and data extraction. | +| [`code-review`](./code-review/SKILL.md) | Review code changes (C#, TypeScript, Astro, HTML, CSS) for bugs and test coverage — no nits. | +| [`twoslash-validator`](./twoslash-validator/SKILL.md) | Validate and fix two-slash TypeScript code samples. | +| [`update-integrations`](./update-integrations/SKILL.md) | Sync integration docs links and API reference data. | +| [`update-samples`](./update-samples/SKILL.md) | Refresh the samples data file from `microsoft/aspire-samples`. | diff --git a/.agents/skills/code-review/SKILL.md b/.agents/skills/code-review/SKILL.md new file mode 100644 index 000000000..a781c6175 --- /dev/null +++ b/.agents/skills/code-review/SKILL.md @@ -0,0 +1,272 @@ +--- +name: code-review +description: "Reviews new or changed CODE on aspire.dev for correctness, safety, and adequate test coverage — not documentation prose. USE FOR: reviewing a PR supplied as a number or URL (or the current branch's diff), checking C#/TypeScript/Astro/HTML/CSS changes for bugs, catching correctness/security/data-loss/accessibility regressions, verifying that important scenarios have unit tests, e2e tests (desktop/tablet/mobile), and axe-core accessibility tests. DO NOT USE FOR: validating documentation content or examples (use doc-tester), reviewing a documentation PR for factual accuracy (use doc-pr-reviewer), writing or fixing docs pages (use doc-writer), two-slash TypeScript blocks (use twoslash-validator), or nitpicking style/formatting (ESLint and Prettier own that). INVOKES: git (read-only diff inspection), gh (to resolve and fetch a PR by number or URL), and optionally the repo's existing test commands for verification. FOR SINGLE OPERATIONS: read the diff with git or gh pr diff and apply the relevant language checklist directly." +--- + +# Code Review Skill + +Use this skill to review **code** changes on aspire.dev and produce a high-signal review. The bar is +the highest possible code quality: correct, safe, tested, and accessible. This skill mirrors the +[microsoft/aspire](https://github.com/microsoft/aspire) PR-review flow — **do not nitpick**. Report +only real, high-confidence problems and gaps that a maintainer must act on. + +This skill reviews code (C#, TypeScript, Astro, HTML, CSS). It does **not** validate documentation +accuracy or prose — that belongs to `doc-tester`, `doc-writer`, and (for reviewing a docs PR) +`doc-pr-reviewer`. + +## Input + +This skill reviews **one change set**, supplied in any of these forms: + +- a **PR number** (e.g. `1422`), +- a **full PR URL** (e.g. `https://github.com/microsoft/aspire.dev/pull/1422`), or +- **nothing** — review the current local branch's diff against its base branch. + +Unless the caller says otherwise, a PR belongs to this `aspire.dev` repository. Review exactly the PR +you are given — there is no eligibility filter or selection step; do not go looking for other PRs. +Before reviewing, resolve the PR's **base branch**, **head SHA**, and **changed files** (see below). + +### Resolve a PR with `gh` (read-only) + +Prefer inspecting the diff without switching branches; check the PR out only when you need to run +something (tests/build). A PR URL can be passed directly; for a bare number, pass `--repo` so `gh` +targets the right repository rather than a fork remote. + +```powershell +# Metadata: base branch, head SHA, and the list of changed files +gh pr view --repo microsoft/aspire.dev --json number,baseRefName,headRefName,headRefOid,files + +# The full unified diff to review +gh pr diff --repo microsoft/aspire.dev + +# Check it out locally — only needed to run the optional verification commands +gh pr checkout --repo microsoft/aspire.dev +``` + +Use the resolved **base branch** wherever the workflow below references a base ref. + +## ⚠️ Core rule: signal over noise + +**Only report issues you are confident are real and worth a maintainer's time.** If you would preface +a comment with "nit", "consider", "maybe", or "personal preference", do not write it. + +- ✅ **Report:** bugs, incorrect logic, unhandled failures, race conditions, resource leaks, security + holes (XSS, injection, secret leakage), data loss, breaking API/behavior changes, broken + accessibility, responsive/layout breakage, and **missing tests for important scenarios**. +- ❌ **Do not report:** formatting, import order, naming preferences, whitespace, "could be more + idiomatic", subjective refactors, or anything ESLint/Prettier/`dotnet format` already enforces. + +If a change is correct and adequately tested, say so plainly. A clean review is a valid outcome. + +## Severity and confidence model + +Classify every finding. Only surface **high-confidence** findings. + +| Severity | Meaning | Examples | +|----------|---------|----------| +| **Critical** | Ships a bug, breaks users, or is unsafe. Must fix before merge. | Null deref, XSS, data loss, wrong output, broken build/route, secret committed. | +| **High** | Likely defect or a real gap that should be fixed before merge. | Unhandled error path, race, missing e2e/axe coverage for a user-facing scenario, accessibility regression. | +| **Medium** | Legitimate concern worth addressing; not necessarily blocking. | Fragile logic with no unit test, edge case not handled, unclear failure mode. | + +**Confidence gate:** verify the claim against the actual code before writing it. Trace the value, +read the surrounding function, and confirm the code path is reachable. If you cannot confirm it, +either dig until you can or phrase it as an explicit question — do not assert a bug you haven't +verified. When in doubt, leave it out. + +## Scope + +**In scope (review these):** + +- **C#** — `src/statichost/**`, `src/tools/**`, `src/apphost/**`, and their tests under `tests/**`. +- **Frontend TypeScript** — `src/frontend/src/**/*.ts`, scripts under `src/frontend/scripts/**`, + and tests under `src/frontend/tests/**`. +- **Astro components/pages** — `src/frontend/src/**/*.astro`. +- **HTML** and **CSS/styles** — markup and `src/frontend/src/styles/**`, component-level styles, + and anything affecting layout, theming, or responsiveness. + +**Out of scope (defer, do not review here):** + +- Documentation prose and examples in `src/frontend/src/content/docs/**` (`.md`/`.mdx` body content) + → route to `doc-tester` / `doc-writer`. +- Two-slash TypeScript code fences → route to `twoslash-validator`. +- Generated data files (e.g. `src/frontend/src/data/*.json`) unless the generator logic changed. +- Pure formatting/lint concerns → owned by ESLint, Prettier, and `dotnet format`. + +> Note: CSS/HTML embedded in or emitted by components **is** in scope when it affects behavior, +> layout, responsiveness, or accessibility, even if it lives near docs. + +## Per-language review checklists + +Apply only the checklists for languages that actually changed. Keep findings high-signal. + +### C# (`StaticHost`, tools, AppHost — xUnit, `net10.0`, nullable enabled) + +- **Correctness:** middleware ordering and short-circuiting; request/response paths; header and + content-negotiation parsing (`AcceptHeaderParser`, path mapping) handle malformed/edge input. +- **Nullability:** honor the enabled nullable context — no unjustified `!`, no ignored possible-null. +- **Async:** no `async void` (except handlers), no sync-over-async (`.Result`/`.Wait()`), pass + `CancellationToken` where the surrounding APIs do. +- **Resource safety:** `using`/`await using` for streams, `HttpClient`/handlers, temp files/dirs; + no leaked `IDisposable`. +- **DI lifetimes:** singletons must not capture scoped/transient state; no captive dependencies. +- **Exceptions:** no swallowed exceptions that hide failures; failures surface as correct status/logs. +- **Security:** validate/normalize any path derived from input (path traversal); never log secrets. + +### TypeScript (frontend `src`, `scripts`, tests) + +- **Type safety:** no `any` that erases a real contract; no unsafe casts hiding a mismatch; narrow + before use. Prefer failing types over `@ts-expect-error`/`eslint-disable` unless justified. +- **Null/undefined:** guard optional DOM lookups (`querySelector`, `getElementById`) and API/JSON + fields before dereferencing. +- **DOM/browser:** event listeners are removed when appropriate; no leaks in long-lived scripts; + correct handling of `localStorage`/`sessionStorage` access (can throw) — see existing `try/catch` + patterns in `tests/e2e/helpers`. +- **Async:** every `await`/promise has an error path; no unhandled rejections; no floating promises. +- **Security:** never build DOM from untrusted strings via `innerHTML`; escape/encode user or + external data; no secrets or tokens embedded client-side. + +### Astro components/pages (`*.astro`) + +- **Server vs client:** frontmatter runs at build/SSR — keep browser-only APIs inside ` diff --git a/src/frontend/src/components/AppHostBuilder.client.ts b/src/frontend/src/components/AppHostBuilder.client.ts new file mode 100644 index 000000000..757ffab63 --- /dev/null +++ b/src/frontend/src/components/AppHostBuilder.client.ts @@ -0,0 +1,676 @@ +type AppHostLanguage = 'csharp' | 'typescript'; +type EditorState = 'idle' | 'navigating' | 'selecting' | 'typing' | 'switching'; + +interface DiffHunk { + startOld: number; + deleteCount: number; + insertIndices: number[]; +} + +const REDUCED_MOTION_QUERY = '(prefers-reduced-motion: reduce)'; +const LINE_SELECTOR = 'pre > code > .ec-line'; + +function isAppHostLanguage(value: string | undefined): value is AppHostLanguage { + return value === 'csharp' || value === 'typescript'; +} + +function wait(duration: number): Promise { + return new Promise((resolve) => window.setTimeout(resolve, duration)); +} + +function getTextNodes(root: Node): Text[] { + const nodes: Text[] = []; + const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT); + + while (walker.nextNode()) { + nodes.push(walker.currentNode as Text); + } + + return nodes; +} + +function normalizeLineText(value: string | null): string { + return (value ?? '').replace(/[\r\n]/g, ''); +} + +function getLineText(line: Element): string { + return normalizeLineText(line.querySelector('.code')?.textContent ?? line.textContent); +} + +function getLines(root: ParentNode): HTMLElement[] { + return Array.from(root.querySelectorAll(LINE_SELECTOR)); +} + +function createDiffHunks(oldLines: string[], newLines: string[]): DiffHunk[] { + const table = Array.from({ length: oldLines.length + 1 }, () => + Array(newLines.length + 1).fill(0) + ); + + for (let oldIndex = oldLines.length - 1; oldIndex >= 0; oldIndex -= 1) { + for (let newIndex = newLines.length - 1; newIndex >= 0; newIndex -= 1) { + table[oldIndex][newIndex] = + oldLines[oldIndex] === newLines[newIndex] + ? table[oldIndex + 1][newIndex + 1] + 1 + : Math.max(table[oldIndex + 1][newIndex], table[oldIndex][newIndex + 1]); + } + } + + const hunks: DiffHunk[] = []; + let oldIndex = 0; + let newIndex = 0; + let currentHunk: DiffHunk | undefined; + + const flushHunk = () => { + if (currentHunk) { + hunks.push(currentHunk); + currentHunk = undefined; + } + }; + + while (oldIndex < oldLines.length || newIndex < newLines.length) { + if ( + oldIndex < oldLines.length && + newIndex < newLines.length && + oldLines[oldIndex] === newLines[newIndex] + ) { + flushHunk(); + oldIndex += 1; + newIndex += 1; + continue; + } + + currentHunk ??= { + startOld: oldIndex, + deleteCount: 0, + insertIndices: [], + }; + + const insertionKeepsMoreLines = + newIndex < newLines.length && + (oldIndex === oldLines.length || + table[oldIndex][newIndex + 1] >= table[oldIndex + 1][newIndex]); + + if (insertionKeepsMoreLines) { + currentHunk.insertIndices.push(newIndex); + newIndex += 1; + } else { + currentHunk.deleteCount += 1; + oldIndex += 1; + } + } + + flushHunk(); + return hunks; +} + +function initializeAppHostBuilder(root: HTMLElement): void { + if (root.dataset.editorEnhanced === 'true') return; + + const codeDisplay = root.querySelector('[data-apphost-code-display]'); + const stage = root.querySelector('[data-code-stage]'); + const caret = root.querySelector('[data-editor-caret]'); + const status = root.querySelector('[data-code-status]'); + const motionToggle = root.querySelector('[data-editor-motion-toggle]'); + const toggleButtons = Array.from(root.querySelectorAll('.toggle')); + const languageButtons = Array.from(root.querySelectorAll('.lang-toggle')); + const languageGroups = Array.from( + root.querySelectorAll('.code-lang-group[data-code-lang]') + ); + + if ( + !codeDisplay || + !stage || + !caret || + !status || + !motionToggle || + toggleButtons.length === 0 || + languageButtons.length === 0 + ) { + return; + } + + const selectedLanguage = languageButtons.find( + (button) => button.getAttribute('aria-pressed') === 'true' + )?.dataset.lang; + if (!isAppHostLanguage(selectedLanguage)) return; + + const reducedMotion = window.matchMedia(REDUCED_MOTION_QUERY); + const isEditorMotionAllowed = () => + motionToggle.checked && + !reducedMotion.matches && + !document.hidden && + typeof Element.prototype.animate === 'function'; + let currentLanguage = selectedLanguage; + let desiredLanguage = selectedLanguage; + let currentVariant = getVariantKey(); + let desiredVariant = currentVariant; + let pendingAnnouncement = 'TypeScript AppHost code showing Front end.'; + let processing = false; + let caretLineIndex = 0; + let caretColumn = 0; + + const getTemplate = (language: AppHostLanguage, variant: string): HTMLElement | undefined => + root.querySelector( + `.code-lang-group[data-code-lang="${language}"] .code-variant[data-variant="${variant}"]` + ) ?? undefined; + + const setEditorState = (state: EditorState) => { + stage.dataset.editorState = state; + codeDisplay.dataset.editorState = state; + }; + + const cloneFrame = (template: HTMLElement): HTMLElement | undefined => { + const sourceFrame = template.querySelector('.expressive-code'); + const frame = sourceFrame?.cloneNode(true); + if (!(frame instanceof HTMLElement)) return undefined; + + frame.dataset.editorFrame = ''; + frame.querySelectorAll('.copy').forEach((copyButton) => copyButton.remove()); + + const title = normalizeLineText(frame.querySelector('.title')?.textContent).trim(); + const codeRegion = frame.querySelector('pre'); + if (title && codeRegion) { + codeRegion.setAttribute('aria-label', `${title} preview in Build your AppHost`); + } + + return frame; + }; + + const mountFrame = (language: AppHostLanguage, variant: string): HTMLElement | undefined => { + const template = getTemplate(language, variant); + if (!template) return undefined; + + const frame = cloneFrame(template); + if (!frame) return undefined; + + stage.querySelector('[data-editor-frame]')?.remove(); + stage.insertBefore(frame, caret); + stage.dataset.codeLang = language; + stage.dataset.codeVariant = variant; + return frame; + }; + + const updateCaretPosition = ( + line: HTMLElement, + column: number, + travelDuration = 0 + ): Promise => { + if (!line.isConnected) return Promise.resolve(); + + const lineElements = getLines(stage); + const nextLineIndex = lineElements.indexOf(line); + if (nextLineIndex >= 0) { + caretLineIndex = nextLineIndex; + caretColumn = column; + } + + const code = line.querySelector('.code'); + if (!code) return Promise.resolve(); + + const lineRect = line.getBoundingClientRect(); + const codeRect = code.getBoundingClientRect(); + const stageRect = stage.getBoundingClientRect(); + // Empty/blank lines have no text node to anchor to, so the caret falls back to + // the code element's box left. That box includes Expressive Code's inline + // padding, so start from the content edge (after the left padding) to keep the + // caret aligned with the first glyph column instead of hugging the frame edge. + const codePaddingLeft = parseFloat(getComputedStyle(code).paddingLeft) || 0; + let caretX = codeRect.left + codePaddingLeft; + let caretTextRect: DOMRect | undefined; + let remainingCharacters = Math.max(0, column); + let foundTextPosition = false; + + for (const textNode of getTextNodes(code)) { + const textLength = normalizeLineText(textNode.data).length; + if (remainingCharacters > textLength) { + remainingCharacters -= textLength; + continue; + } + + const range = document.createRange(); + const offset = Math.min(remainingCharacters, textNode.data.length); + range.setStart(textNode, offset); + range.collapse(true); + const rangeRect = Array.from(range.getClientRects()).at(-1) ?? range.getBoundingClientRect(); + caretX = rangeRect.left || caretX; + caretTextRect = rangeRect; + foundTextPosition = true; + break; + } + + if (!foundTextPosition && column > 0) { + const textNodes = getTextNodes(code); + let lastTextNode: Text | undefined; + for (let index = textNodes.length - 1; index >= 0; index -= 1) { + if (normalizeLineText(textNodes[index].data).length > 0) { + lastTextNode = textNodes[index]; + break; + } + } + if (lastTextNode) { + const range = document.createRange(); + range.setStart(lastTextNode, Math.max(0, lastTextNode.length - 1)); + range.setEnd(lastTextNode, lastTextNode.length); + const rangeRect = + Array.from(range.getClientRects()).at(-1) ?? range.getBoundingClientRect(); + caretX = rangeRect.right || caretX; + caretTextRect = rangeRect; + } + } + + const caretLineHeight = caretTextRect?.height || lineRect.height; + const caretHeight = Math.max(14, Math.min(24, caretLineHeight)); + const caretTop = (caretTextRect?.top || lineRect.top) + (caretLineHeight - caretHeight) / 2; + const effectiveDuration = isEditorMotionAllowed() ? travelDuration : 0; + // Snap to the device-pixel grid so the thin caret renders crisp instead of + // smeared across sub-pixels, keeping it pixel-perfect against the glyphs. + // Snap the absolute viewport coordinate (not the stage-relative offset) so it + // stays aligned even when the stage itself sits on a fractional pixel. + const dpr = window.devicePixelRatio || 1; + const snap = (value: number) => Math.round(value * dpr) / dpr; + caret.style.height = `${snap(caretHeight)}px`; + caret.style.transitionDuration = `${effectiveDuration}ms`; + caret.style.transform = `translate3d(${snap(caretX) - stageRect.left}px, ${ + snap(caretTop) - stageRect.top + }px, 0)`; + + return effectiveDuration > 0 ? wait(effectiveDuration) : Promise.resolve(); + }; + + const placeCaretAtEnd = async (travelDuration = 0) => { + const lines = getLines(stage); + const line = lines.at(-1); + if (line) { + await updateCaretPosition(line, getLineText(line).length, travelDuration); + } + }; + + const repositionCaret = () => { + const lines = getLines(stage); + const line = lines[Math.min(caretLineIndex, Math.max(0, lines.length - 1))]; + if (line) { + void updateCaretPosition(line, Math.min(caretColumn, getLineText(line).length)); + } + }; + + const selectAndDeleteLines = async ( + startIndex: number, + deleteCount: number + ): Promise => { + const lines = getLines(stage); + const selectedLines = lines.slice(startIndex, startIndex + deleteCount); + const firstLine = selectedLines[0]; + const lastLine = selectedLines.at(-1); + if (!firstLine || !lastLine) return true; + + setEditorState('navigating'); + await updateCaretPosition(lastLine, getLineText(lastLine).length, 220); + if (!isEditorMotionAllowed()) return false; + + selectedLines.forEach((line) => line.setAttribute('data-editor-selection', '')); + setEditorState('selecting'); + await updateCaretPosition(firstLine, 0, 160); + await wait(260); + if (!isEditorMotionAllowed()) return false; + + const removals = selectedLines.map( + (line) => + line.animate( + [ + { opacity: 1, transform: 'translateX(0)' }, + { opacity: 0, transform: 'translateX(-0.35rem)' }, + ], + { + duration: 110, + easing: 'cubic-bezier(0.4, 0, 1, 1)', + fill: 'forwards', + } + ).finished + ); + await Promise.all(removals); + if (!isEditorMotionAllowed()) return false; + selectedLines.forEach((line) => line.remove()); + return true; + }; + + const typeLine = async ( + sourceLine: HTMLElement, + outputLine: HTMLElement, + charactersPerStep: number + ): Promise => { + const sourceCode = sourceLine.querySelector('.code'); + const outputCode = outputLine.querySelector('.code'); + if (!sourceCode || !outputCode) return true; + + const sourceNodes = getTextNodes(sourceCode); + const outputNodes = getTextNodes(outputCode); + const segments = sourceNodes.map((node, index) => ({ + output: outputNodes[index], + value: normalizeLineText(node.data), + })); + + outputNodes.forEach((node) => { + node.data = ''; + }); + + let typedCharacters = 0; + for (const segment of segments) { + if (!segment.output) continue; + + for (let offset = 0; offset < segment.value.length; offset += charactersPerStep) { + if (!isEditorMotionAllowed()) return false; + const nextOffset = Math.min(segment.value.length, offset + charactersPerStep); + segment.output.data = segment.value.slice(0, nextOffset); + typedCharacters += nextOffset - offset; + await updateCaretPosition(outputLine, typedCharacters); + + const lastCharacter = segment.value[nextOffset - 1] ?? ''; + await wait(/[;{}()[\]]/.test(lastCharacter) ? 22 : lastCharacter === ' ' ? 7 : 12); + } + } + + outputLine.innerHTML = sourceLine.innerHTML; + await updateCaretPosition(outputLine, getLineText(outputLine).length); + return true; + }; + + const insertLines = async ( + code: HTMLElement, + startIndex: number, + sourceLines: HTMLElement[] + ): Promise => { + const totalCharacters = sourceLines.reduce( + (total, line) => total + getLineText(line).length, + 0 + ); + const charactersPerStep = Math.max(1, Math.ceil(totalCharacters / 120)); + + setEditorState('typing'); + for (let index = 0; index < sourceLines.length; index += 1) { + if (!isEditorMotionAllowed()) return false; + const sourceLine = sourceLines[index]; + const outputLine = sourceLine.cloneNode(true); + if (!(outputLine instanceof HTMLElement)) continue; + + outputLine.dataset.editorInserting = ''; + const outputCode = outputLine.querySelector('.code'); + if (outputCode) { + getTextNodes(outputCode).forEach((node) => { + node.data = ''; + }); + } + const referenceLine = getLines(code)[startIndex + index] ?? null; + code.insertBefore(outputLine, referenceLine); + + await updateCaretPosition(outputLine, 0, index === 0 ? 180 : 55); + if (!(await typeLine(sourceLine, outputLine, charactersPerStep))) return false; + delete outputLine.dataset.editorInserting; + await wait(34); + } + return true; + }; + + const animateVariantChange = async (language: AppHostLanguage, targetVariant: string) => { + const frame = stage.querySelector('[data-editor-frame]'); + const code = frame?.querySelector('pre > code'); + const template = getTemplate(language, targetVariant); + if (!frame || !code || !template) { + mountFrame(language, targetVariant); + return; + } + + const oldLines = getLines(frame); + const targetLines = getLines(template); + const targetTexts = targetLines.map(getLineText); + const hunks = createDiffHunks(oldLines.map(getLineText), targetTexts); + let lineOffset = 0; + + for (const hunk of hunks) { + const editIndex = hunk.startOld + lineOffset; + + if (hunk.deleteCount > 0) { + if (!(await selectAndDeleteLines(editIndex, hunk.deleteCount))) { + mountFrame(language, targetVariant); + await placeCaretAtEnd(); + return; + } + } + + const insertedLines = hunk.insertIndices + .map((lineIndex) => targetLines[lineIndex]) + .filter((line): line is HTMLElement => line !== undefined); + if (insertedLines.length > 0) { + if (!(await insertLines(code, editIndex, insertedLines))) { + mountFrame(language, targetVariant); + await placeCaretAtEnd(); + return; + } + } else { + const remainingLines = getLines(stage); + const nextLine = + remainingLines[editIndex] ?? + remainingLines[Math.max(0, Math.min(editIndex - 1, remainingLines.length - 1))]; + if (nextLine) { + const column = remainingLines[editIndex] ? 0 : getLineText(nextLine).length; + await updateCaretPosition(nextLine, column, 80); + } + } + + lineOffset += insertedLines.length - hunk.deleteCount; + } + + const finalLines = getLines(stage); + const finalMatchesTarget = + finalLines.length === targetTexts.length && + finalLines.every((line, index) => getLineText(line) === targetTexts[index]); + + if (!finalMatchesTarget) { + mountFrame(language, targetVariant); + await placeCaretAtEnd(); + } else { + stage.dataset.codeVariant = targetVariant; + } + }; + + const switchLanguage = async (language: AppHostLanguage, variant: string) => { + const currentFrame = stage.querySelector('[data-editor-frame]'); + setEditorState('switching'); + + if (currentFrame) { + await currentFrame.animate( + [ + { opacity: 1, transform: 'translateY(0)' }, + { opacity: 0, transform: 'translateY(-0.25rem)' }, + ], + { + duration: 130, + easing: 'cubic-bezier(0.4, 0, 1, 1)', + fill: 'forwards', + } + ).finished; + if (!isEditorMotionAllowed()) { + mountFrame(language, variant); + await placeCaretAtEnd(); + return; + } + } + + const nextFrame = mountFrame(language, variant); + if (nextFrame) { + await nextFrame.animate( + [ + { opacity: 0, transform: 'translateY(0.25rem)' }, + { opacity: 1, transform: 'translateY(0)' }, + ], + { + duration: 180, + easing: 'cubic-bezier(0.16, 1, 0.3, 1)', + fill: 'both', + } + ).finished; + } + + await placeCaretAtEnd(); + }; + + const processRequestedState = async () => { + if (processing) return; + processing = true; + codeDisplay.setAttribute('aria-busy', 'true'); + + try { + while ( + root.isConnected && + (currentLanguage !== desiredLanguage || currentVariant !== desiredVariant) + ) { + const nextLanguage = desiredLanguage; + const nextVariant = desiredVariant; + const shouldAnimate = isEditorMotionAllowed(); + + codeDisplay.dataset.editorMotion = shouldAnimate ? 'animated' : 'reduced'; + if (!shouldAnimate) { + mountFrame(nextLanguage, nextVariant); + await placeCaretAtEnd(); + } else if (currentLanguage !== nextLanguage) { + await switchLanguage(nextLanguage, nextVariant); + } else { + await animateVariantChange(nextLanguage, nextVariant); + } + + currentLanguage = nextLanguage; + currentVariant = nextVariant; + } + } catch (error) { + console.error('AppHost editor animation failed.', error); + mountFrame(desiredLanguage, desiredVariant); + currentLanguage = desiredLanguage; + currentVariant = desiredVariant; + await placeCaretAtEnd(); + } finally { + setEditorState('idle'); + codeDisplay.setAttribute('aria-busy', 'false'); + status.textContent = `${pendingAnnouncement} Code preview updated.`; + processing = false; + + if (currentLanguage !== desiredLanguage || currentVariant !== desiredVariant) { + void processRequestedState(); + } + } + }; + + function getVariantKey(): string { + const isSelected = (name: string) => + root.querySelector(`.toggle[data-toggle="${name}"]`)?.classList.contains('active') ?? false; + const hasFrontend = isSelected('frontend'); + const hasDatabase = isSelected('database'); + const hasApi = isSelected('api'); + const hasContainer = isSelected('container'); + const hasDeployment = isSelected('deployment'); + + if (!hasFrontend && !hasDatabase && !hasApi && !hasContainer) { + return 'empty'; + } + + let variant = ''; + if (hasDatabase && hasApi && hasFrontend) { + variant = 'databaseApiFrontend'; + } else if (hasDatabase && hasApi) { + variant = 'databaseApi'; + } else if (hasDatabase && hasFrontend) { + variant = 'databaseFrontend'; + } else if (hasDatabase) { + variant = 'database'; + } else if (hasApi && hasFrontend) { + variant = 'apiFrontend'; + } else if (hasApi) { + variant = 'api'; + } else if (hasFrontend) { + variant = 'frontend'; + } else if (hasContainer) { + variant = 'container'; + } + + if (hasContainer && variant !== 'container') { + variant += 'Container'; + } + if (hasDeployment) { + variant += 'Deployment'; + } + + return variant; + } + + motionToggle.addEventListener('change', () => { + const enabled = motionToggle.checked; + root.dataset.editorMotionEnabled = String(enabled); + codeDisplay.dataset.editorMotion = enabled + ? reducedMotion.matches + ? 'reduced' + : 'animated' + : 'disabled'; + + if (enabled) { + void placeCaretAtEnd(); + } + }); + + languageButtons.forEach((button) => { + button.addEventListener('click', () => { + const language = button.dataset.lang; + if (!isAppHostLanguage(language) || desiredLanguage === language) return; + + languageButtons.forEach((candidate) => { + const isSelected = candidate === button; + candidate.classList.toggle('active', isSelected); + candidate.setAttribute('aria-pressed', String(isSelected)); + }); + + desiredLanguage = language; + desiredVariant = getVariantKey(); + pendingAnnouncement = `AppHost code language changed to ${button.textContent?.trim() ?? language}.`; + root.dispatchEvent( + new CustomEvent('aspire:apphost-language-change', { + bubbles: true, + detail: { language }, + }) + ); + void processRequestedState(); + }); + }); + + toggleButtons.forEach((button) => { + button.addEventListener('click', () => { + const isSelected = button.classList.toggle('active'); + button.setAttribute('aria-pressed', String(isSelected)); + desiredVariant = getVariantKey(); + + const label = button.textContent?.trim() ?? 'Option'; + pendingAnnouncement = `${label} ${isSelected ? 'added to' : 'removed from'} the AppHost.`; + void processRequestedState(); + }); + }); + + const initialFrame = mountFrame(currentLanguage, currentVariant); + if (!initialFrame) return; + + root.dataset.editorEnhanced = 'true'; + root.dataset.editorMotionEnabled = String(motionToggle.checked); + codeDisplay.dataset.editorEnhanced = 'true'; + stage.hidden = false; + languageGroups.forEach((group) => { + group.hidden = true; + }); + setEditorState('idle'); + + window.requestAnimationFrame(() => { + void placeCaretAtEnd(); + }); + void document.fonts?.ready.then(repositionCaret); + stage.addEventListener('scroll', repositionCaret, true); +} + +export function initializeAppHostBuilders(): void { + document + .querySelectorAll('[data-apphost-builder]') + .forEach(initializeAppHostBuilder); +} diff --git a/src/frontend/src/components/CustomSelect.astro b/src/frontend/src/components/CustomSelect.astro new file mode 100644 index 000000000..cb718b68f --- /dev/null +++ b/src/frontend/src/components/CustomSelect.astro @@ -0,0 +1,640 @@ +--- +import { Icon } from '@astrojs/starlight/components'; + +export interface CustomSelectOption { + value: string; + label: string; + description?: string; + detector?: string; + disabled?: boolean; + selected?: boolean; +} + +interface Props { + id: string; + label: string; + options: CustomSelectOption[]; + class?: string; + menuWidth?: 'trigger' | 'content'; + placement?: 'auto' | 'up' | 'down'; +} + +const { + id, + label, + options, + class: className, + menuWidth = 'trigger', + placement = 'auto', +} = Astro.props; +const selectedOption = options.find((option) => option.selected && !option.disabled) ?? options[0]; +const listboxId = `${id}-listbox`; +const hasIcon = Astro.slots.has('icon'); +--- + +
+ + + + + +
+ + + + diff --git a/src/frontend/src/components/DashboardCarousel.astro b/src/frontend/src/components/DashboardCarousel.astro index f8d45fc77..9d7be700c 100644 --- a/src/frontend/src/components/DashboardCarousel.astro +++ b/src/frontend/src/components/DashboardCarousel.astro @@ -3,6 +3,9 @@ import { Icon } from '@astrojs/starlight/components'; import ThemeImage from '@components/ThemeImage.astro'; import type { ImageMetadata } from 'astro'; +import PauseIcon from '@assets/icons/pause.svg'; +import PlayIcon from '@assets/icons/play.svg'; + import resourcesGraphLight from '@assets/dashboard/landing/resources-graph-light.png'; import resourcesGraphDark from '@assets/dashboard/landing/resources-graph-dark.png'; import resourcesTableLight from '@assets/dashboard/landing/resources-table-light.png'; @@ -26,6 +29,13 @@ interface Slide { dark: ImageMetadata; } +interface Props { + autoplay?: boolean; + presentation?: 'coverflow' | 'stage'; +} + +const { autoplay = true, presentation = 'coverflow' } = Astro.props as Props; + const slides: Slide[] = [ { id: 'resources-graph', @@ -93,6 +103,8 @@ const carouselLabel = tt('landing.dashboardCarousel.label', 'Aspire dashboard vi const chooseViewLabel = tt('landing.dashboardCarousel.chooseView', 'Choose a dashboard view'); const previousLabel = tt('landing.dashboardCarousel.previous', 'Previous view'); const nextLabel = tt('landing.dashboardCarousel.next', 'Next view'); +const playLabel = tt('landing.dashboardCarousel.play', 'Play dashboard tour'); +const pauseLabel = tt('landing.dashboardCarousel.pause', 'Pause dashboard tour'); const formatSlideLabel = (index: number, count: number, label: string) => tt('landing.dashboardCarousel.slideLabel', '{{index}} of {{count}}: {{label}}', { index, @@ -107,6 +119,8 @@ const formatSlideLabel = (index: number, count: number, label: string) => role="group" aria-roledescription="carousel" aria-label={carouselLabel} + data-autoplay={autoplay ? 'true' : 'false'} + data-presentation={presentation} >
{ @@ -132,8 +146,24 @@ const formatSlideLabel = (index: number, count: number, label: string) => }
+ +
-

{localizedSlides[0].label}

+
- -
-
- Connect with us -
- + diff --git a/src/frontend/src/components/FreeAndOpenSourceAside.astro b/src/frontend/src/components/FreeAndOpenSourceAside.astro deleted file mode 100644 index f94d8ab66..000000000 --- a/src/frontend/src/components/FreeAndOpenSourceAside.astro +++ /dev/null @@ -1,737 +0,0 @@ ---- -import { Icon } from '@astrojs/starlight/components'; -import PauseIcon from '@assets/icons/pause.svg'; -import PlayIcon from '@assets/icons/play.svg'; -import LearnMore from '@components/LearnMore.astro'; -import { addLocaleToPath, getLocaleFromPath } from '@utils/locale-routes'; -import { aspireQuoteDefinitions, englishStatementPlayer } from './FreeAndOpenSourceAside.quotes'; - -/** - * Displays a localized, interactive collection of Aspire statements. - */ -type TranslationValues = Record; - -const isLlmsRoute = Astro.url.pathname.startsWith('/llms'); -const locale = getLocaleFromPath(Astro.url.pathname); - -function interpolate(template: string, values: TranslationValues = {}) { - return Object.entries(values).reduce( - (result, [key, value]) => result.replaceAll(`{{${key}}}`, String(value)), - template - ); -} - -function translate(key: string, fallback: string, values?: TranslationValues) { - return isLlmsRoute ? interpolate(fallback, values) : Astro.locals.t(key as any, values as any); -} - -const announcementValues = { - index: '__INDEX__', - total: '__TOTAL__', - heading: '__HEADING__', - text: '__TEXT__', -}; - -const playerText = { - regionLabel: translate('landing.statementPlayer.regionLabel', englishStatementPlayer.regionLabel), - controlsLabel: translate( - 'landing.statementPlayer.controlsLabel', - englishStatementPlayer.controlsLabel - ), - pauseLabel: translate('landing.statementPlayer.pauseLabel', englishStatementPlayer.pauseLabel), - playLabel: translate('landing.statementPlayer.playLabel', englishStatementPlayer.playLabel), - randomLabel: translate('landing.statementPlayer.randomLabel', englishStatementPlayer.randomLabel), - learnMoreLabel: translate( - 'landing.statementPlayer.learnMoreLabel', - englishStatementPlayer.learnMoreLabel - ), - announcementTemplate: translate( - 'landing.statementPlayer.announcement', - englishStatementPlayer.announcement, - announcementValues - ), -}; - -const aspireQuotes = aspireQuoteDefinitions.map(({ id, heading, text, href }) => ({ - heading: translate(`landing.statementPlayer.quotes.${id}.heading`, heading), - text: translate(`landing.statementPlayer.quotes.${id}.text`, text), - href: addLocaleToPath(href, locale), -})); - -const firstQuote = aspireQuotes[0]; -const total = aspireQuotes.length; -const firstAnnouncement = playerText.announcementTemplate - .replaceAll(announcementValues.index, '1') - .replaceAll(announcementValues.total, String(total)) - .replaceAll(announcementValues.heading, firstQuote.heading) - .replaceAll(announcementValues.text, firstQuote.text); ---- - -
- - -
- - { - aspireQuotes.map((quote) => ( - - )) - } -
- -

- {firstAnnouncement} -

- - - -
-
- - -
- -
- - - {playerText.learnMoreLabel} - - -
-
-
- - - - diff --git a/src/frontend/src/components/FreeAndOpenSourceAside.quotes.ts b/src/frontend/src/components/FreeAndOpenSourceAside.quotes.ts deleted file mode 100644 index b57ad15b6..000000000 --- a/src/frontend/src/components/FreeAndOpenSourceAside.quotes.ts +++ /dev/null @@ -1,60 +0,0 @@ -import englishTranslations from '../content/i18n/en.json'; - -export interface AspireQuote { - heading: string; - text: string; - href: string; -} - -export interface AspireQuoteDefinition extends AspireQuote { - id: string; -} - -const quoteLinks: Record = { - '01': '/get-started/ai-coding-agents/', - '02': '/get-started/what-is-aspire/', - '03': '/get-started/app-host/', - '04': '/get-started/first-app/', - '05': '/languages-and-runtimes/', - '06': '/architecture/resource-model/', - '07': '/fundamentals/telemetry/', - '08': '/deployment/', - '09': '/integrations/', - '10': '/get-started/app-host/', - '11': '/get-started/what-is-aspire/', - '12': '/deployment/app-lifecycle/', - '13': '/community/', - '14': '/deployment/', - '15': '/architecture/resource-model/', - '16': '/get-started/what-is-aspire/', - '17': '/fundamentals/service-discovery/', - '18': '/deployment/environments/', - '19': '/get-started/first-app/', - '20': '/get-started/what-is-aspire/', - '21': '/languages-and-runtimes/', - '22': '/dashboard/overview/', - '23': '/deployment/', - '24': '/architecture/resource-model/', - '25': '/get-started/what-is-aspire/', - '26': '/get-started/what-is-aspire/', - '27': '/get-started/app-host/', - '28': '/architecture/overview/', - '29': '/get-started/what-is-aspire/', -}; - -export const englishStatementPlayer = englishTranslations.landing.statementPlayer; - -export const aspireQuoteDefinitions: readonly AspireQuoteDefinition[] = Object.entries( - englishStatementPlayer.quotes -) - .sort(([leftId], [rightId]) => Number(leftId) - Number(rightId)) - .map(([id, quote]) => { - const href = quoteLinks[id]; - if (!href) { - throw new Error(`Aspire statement ${id} is missing its Learn more destination.`); - } - - return { id, ...quote, href }; - }); - -export const aspireQuotes: readonly AspireQuote[] = aspireQuoteDefinitions; diff --git a/src/frontend/src/components/InstallCliModal.astro b/src/frontend/src/components/InstallCliModal.astro index 43840301f..b69be4701 100644 --- a/src/frontend/src/components/InstallCliModal.astro +++ b/src/frontend/src/components/InstallCliModal.astro @@ -1,11 +1,30 @@ --- import { Code, Icon, Aside } from '@astrojs/starlight/components'; +import CustomSelect, { type CustomSelectOption } from '@components/CustomSelect.astro'; interface Props { id?: string; } const { id = 'install-cli-modal' } = Astro.props; +const channelOptions: CustomSelectOption[] = [ + { + value: 'release', + label: 'Stable', + description: 'Latest stable release for production use', + selected: true, + }, + { + value: 'staging', + label: 'Staging', + description: 'Prerelease builds from the current release branch', + }, + { + value: 'dev', + label: 'Dev', + description: 'Latest builds from main, frequently built and not fully tested', + }, +]; --- @@ -107,25 +126,14 @@ const { id = 'install-cli-modal' } = Astro.props;
- -
- - -
+ Channel: + @@ -172,7 +180,6 @@ const { id = 'install-cli-modal' } = Astro.props; if (!modal) return; const versionSelect = modal.querySelector('#version-select') as HTMLSelectElement; - const selectIcon = modal.querySelector('.select-icon') as HTMLElement; const openBtns = document.querySelectorAll('[data-open-install-modal]'); const closeBtn = modal.querySelector('[data-close-modal]'); @@ -210,6 +217,7 @@ const { id = 'install-cli-modal' } = Astro.props; if (versionSelect) { const storedQuality = getStoredQuality(); versionSelect.value = storedQuality; + versionSelect.dispatchEvent(new Event('aspire:custom-select-sync')); updateVersionDisplay(storedQuality); } }; @@ -219,12 +227,7 @@ const { id = 'install-cli-modal' } = Astro.props; versionSelect.addEventListener('change', (e) => { const quality = (e.target as HTMLSelectElement).value as 'release' | 'staging' | 'dev'; updateVersionDisplay(quality); - selectIcon?.classList.remove('rotated'); }); - - // Dropdown visual feedback - versionSelect.addEventListener('mousedown', () => selectIcon?.classList.add('rotated')); - versionSelect.addEventListener('blur', () => selectIcon?.classList.remove('rotated')); } // Open modal and position it @@ -419,53 +422,21 @@ const { id = 'install-cli-modal' } = Astro.props; justify-content: flex-end; } - .version-selector label { + .version-label { font-size: var(--sl-text-sm); font-weight: 500; color: var(--sl-color-text); } - .select-wrapper { - position: relative; - display: inline-block; - } - - .version-dropdown { - padding: 0.375rem 2rem 0.375rem 0.75rem; - border: 1px solid var(--sl-color-gray-5); - border-radius: 0.375rem; - background-color: var(--sl-color-bg); - color: var(--sl-color-text); - font-size: var(--sl-text-sm); - cursor: pointer; - transition: border-color 0.2s; - appearance: none; - } - - .select-icon { - position: absolute; - right: 0.5rem; - top: 50%; - transform: translateY(-50%); - pointer-events: none; - color: var(--sl-color-text); - width: 1rem; - height: 1rem; - transition: transform 0.2s ease; - } - - .select-icon.rotated { - transform: translateY(-50%) rotate(180deg); - } - - .version-dropdown:hover { - border-color: var(--sl-color-text-accent); - } - - .version-dropdown:focus { - outline: 2px solid var(--sl-color-text-accent); - outline-offset: 2px; - border-color: var(--sl-color-text-accent); + :global(.channel-custom-select) { + width: 8.5rem; + --custom-select-height: 2.375rem; + --custom-select-font-size: var(--sl-text-sm); + --custom-select-bg: color-mix(in srgb, var(--sl-color-bg) 92%, var(--sl-color-gray-6)); + --custom-select-hover-bg: color-mix(in srgb, var(--sl-color-gray-6) 74%, var(--sl-color-bg)); + --custom-select-menu-bg: var(--sl-color-bg-nav); + --custom-select-menu-text: var(--sl-color-text); + --custom-select-selected-text: var(--sl-color-text); } .info-icon { diff --git a/src/frontend/src/components/IntegrationGrid.astro b/src/frontend/src/components/IntegrationGrid.astro deleted file mode 100644 index fb7b3c7f8..000000000 --- a/src/frontend/src/components/IntegrationGrid.astro +++ /dev/null @@ -1,683 +0,0 @@ ---- -import { Image } from 'astro:assets'; -import PauseIcon from '@assets/icons/pause.svg'; -import PlayIcon from '@assets/icons/play.svg'; - -import adminerIcon from '@assets/icons/adminer-icon.png'; -import activeMqIcon from '@assets/icons/activemq-icon.png'; -import activeMqLightIcon from '@assets/icons/activemq-light-icon.png'; -import awsIcon from '@assets/icons/aws-icon.png'; -import awsLightIcon from '@assets/icons/aws-light-icon.png'; -import azureAppServicesIcon from '@assets/icons/azure-app-services.svg'; -import azureContainerAppsEnvironmentsIcon from '@assets/icons/azure-container-apps-environments.svg'; -import azureAiFoundryIcon from '@assets/icons/azure-ai-foundry-icon.png'; -import azureAppconfigIcon from '@assets/icons/azure-appconfig-icon.png'; -import azureAppinsightsIcon from '@assets/icons/azure-appinsights-icon.png'; -import azureBlobpagestorageIcon from '@assets/icons/azure-blobpagestorage-icon.png'; -import azureCacheredisIcon from '@assets/icons/azure-cacheredis-icon.png'; -import azureCosmosdbIcon from '@assets/icons/azure-cosmosdb-icon.png'; -import azureEventhubsIcon from '@assets/icons/azure-eventhubs-icon.png'; -import azureFunctionappsIcon from '@assets/icons/azure-functionapps-icon.png'; -import azureIcon from '@assets/icons/azure-icon.png'; -import azureKeyvaultIcon from '@assets/icons/azure-keyvault-icon.png'; -import azureLoganalyticsIcon from '@assets/icons/azure-loganalytics-icon.png'; -import azureOpenaiIcon from '@assets/icons/azure-openai-icon.png'; -import azurePostgresqlIcon from '@assets/icons/azure-postgresql-icon.png'; -import azureSearchIcon from '@assets/icons/azure-search-icon.png'; -import azureServicebusIcon from '@assets/icons/azure-servicebus-icon.png'; -import azureSignalrIcon from '@assets/icons/azure-signalr-icon.png'; -import azureSqlserverIcon from '@assets/icons/azure-sqlserver-icon.png'; -import azureStoragecontainerIcon from '@assets/icons/azure-storagecontainer-icon.png'; -import azureStoragequeueIcon from '@assets/icons/azure-storagequeue-icon.png'; -import azureTableIcon from '@assets/icons/azure-table-icon.png'; -import azureWebpubsubIcon from '@assets/icons/azure-webpubsub-icon.png'; -import bunIcon from '@assets/icons/bun-icon.png'; -import dataApiBuilderIcon from '@assets/icons/data-api-builder-icon.png'; -import daprIcon from '@assets/icons/dapr-icon.png'; -import daprLightIcon from '@assets/icons/dapr-light-icon.png'; -import dbGateIcon from '@assets/icons/dbgate-icon.svg'; -import dbGateLightIcon from '@assets/icons/dbgate-light-icon.svg'; -import denoIcon from '@assets/icons/deno-icon.png'; -import denoLightIcon from '@assets/icons/deno-light-icon.png'; -import devTunnelsIcon from '@assets/icons/dev-tunnels-icon.svg'; -import dockerIcon from '@assets/icons/docker.svg'; -import elasticIcon from '@assets/icons/elastic-icon.png'; -import flagDIcon from '@assets/icons/flagd-icon.svg'; -import flagDLightIcon from '@assets/icons/flagd-light-icon.svg'; -import garnetIcon from '@assets/icons/garnet-icon.png'; -import goIcon from '@assets/icons/go-icon.png'; -import goLightIcon from '@assets/icons/go-light-icon.png'; -import goffIcon from '@assets/icons/go-feature-flag.png'; -import gitHubIcon from '@assets/icons/github-icon.png'; -import gitHubLightIcon from '@assets/icons/github-light-icon.png'; -import javaIcon from '@assets/icons/java-icon.png'; -import javascriptIcon from '@assets/icons/javascript.svg'; -import k3sIcon from '@assets/icons/k3s-icon.svg'; -import k6Icon from '@assets/icons/k6-icon.svg'; -import keycloakIcon from '@assets/icons/keycloak-icon.svg'; -import kubernetesIcon from '@assets/icons/kubernetes.svg'; -import kurrentDbIcon from '@assets/icons/kurrent-icon.png'; -import kurrentDbLightIcon from '@assets/icons/kurrent-light-icon.png'; -import fastApiIcon from '@assets/icons/fastapi-icon.svg'; -import lavinMqIcon from '@assets/icons/lavinmq-icon.png'; -import mailpitIcon from '@assets/icons/mailpit-icon.svg'; -import mailpitLightIcon from '@assets/icons/mailpit-light-icon.svg'; -import mauiIcon from '@assets/icons/maui-icon.png'; -import meilisearchIcon from '@assets/icons/meilisearch-icon.png'; -import mcpInspectorIcon from '@assets/icons/mcp-inspector-icon.png'; -import mcpInspectorLightIcon from '@assets/icons/mcp-inspector-light-icon.png'; -import milvusIcon from '@assets/icons/milvus-icon.png'; -import minioIcon from '@assets/icons/minio-icon.png'; -import mongodbIcon from '@assets/icons/mongodb-icon.png'; -import mysqlconnectorIcon from '@assets/icons/mysqlconnector-icon.png'; -import natsIcon from '@assets/icons/nats-icon.png'; -import ngrokIcon from '@assets/icons/ngrok-icon.png'; -import ngrokLightIcon from '@assets/icons/ngrok-light-icon.png'; -import nodeJsIcon from '@assets/icons/nodejs-icon.png'; -import nodeJsLightIcon from '@assets/icons/nodejs-light-icon.png'; -import ollamaIcon from '@assets/icons/ollama-icon.png'; -import oracleIcon from '@assets/icons/oracle-icon.svg'; -import openAiIcon from '@assets/icons/openai-icon.png'; -import openAiLightIcon from '@assets/icons/openai-light-icon.png'; -import papercutIcon from '@assets/icons/papercut-icon.png'; -import papercutLightIcon from '@assets/icons/papercut-light-icon.png'; -import postgresqlIcon from '@assets/icons/postgresql-icon.png'; -import powershellIcon from '@assets/icons/powershell-icon.png'; -import pythonIcon from '@assets/icons/python.svg'; -import qdrantIcon from '@assets/icons/qdrant-icon.svg'; -import rabbitmqIcon from '@assets/icons/rabbitmq-icon.svg'; -import ravenDbIcon from '@assets/icons/ravendb-icon.png'; -import ravenDbLightIcon from '@assets/icons/ravendb-light-icon.png'; -import reactIcon from '@assets/icons/react-icon.svg'; -import redisIcon from '@assets/icons/redis-icon.png'; -import rustIcon from '@assets/icons/rust-icon.png'; -import seqIcon from '@assets/icons/seq-icon.png'; -import sqlDatabaseProjectsIcon from '@assets/icons/sql-database-projects-icon.png'; -import surrealDbIcon from '@assets/icons/surrealdb-icon.png'; -import surrealDbLightIcon from '@assets/icons/surrealdb-light-icon.png'; -import sqlIcon from '@assets/icons/sql-icon.png'; -import sqliteIcon from '@assets/icons/sqlite-icon.png'; -import typescriptIcon from '@assets/icons/typescript.svg'; -import uvIcon from '@assets/icons/uv-icon.svg'; -import valkeyIcon from '@assets/icons/valkey-icon.png'; - -const icons = [ - { - meta: activeMqIcon, - alt: 'ActiveMQ', - search: 'activemq', - light: activeMqLightIcon, - }, - { meta: adminerIcon, alt: 'Adminer', search: 'adminer' }, - { meta: awsIcon, alt: 'AWS', search: 'aws', light: awsLightIcon }, - { meta: azureAiFoundryIcon, alt: 'Microsoft Foundry', search: 'foundry' }, - { - meta: azureAppconfigIcon, - alt: 'Azure App Configuration', - search: 'appconfig', - }, - { - meta: azureAppinsightsIcon, - alt: 'Azure Application Insights', - search: 'applicationinsights', - }, - { - meta: azureAppServicesIcon, - alt: 'Azure App Services', - search: 'appservice', - }, - { - meta: azureBlobpagestorageIcon, - alt: 'Azure Blob/Page Storage', - search: 'blob', - }, - { meta: azureCacheredisIcon, alt: 'Azure Cache for Redis', search: 'redis' }, - { - meta: azureContainerAppsEnvironmentsIcon, - alt: 'Azure Container Apps Environments', - search: 'container apps', - }, - { meta: azureCosmosdbIcon, alt: 'Azure Cosmos DB', search: 'cosmos' }, - { meta: azureEventhubsIcon, alt: 'Azure Event Hubs', search: 'eventhubs' }, - { - meta: azureFunctionappsIcon, - alt: 'Azure Function Apps', - search: 'functions', - }, - { meta: azureIcon, alt: 'Microsoft Azure', search: 'azure' }, - { meta: azureKeyvaultIcon, alt: 'Azure Key Vault', search: 'keyvault' }, - { - meta: azureLoganalyticsIcon, - alt: 'Azure Log Analytics', - search: 'operationalinsights', - }, - { meta: azureOpenaiIcon, alt: 'Azure OpenAI', search: 'openai' }, - { - meta: azurePostgresqlIcon, - alt: 'Azure Database for PostgreSQL', - search: 'postgresql', - }, - { meta: azureSearchIcon, alt: 'Azure Cognitive Search', search: 'search' }, - { meta: azureServicebusIcon, alt: 'Azure Service Bus', search: 'servicebus' }, - { meta: azureSignalrIcon, alt: 'Azure SignalR', search: 'signalr' }, - { meta: azureSqlserverIcon, alt: 'Azure SQL Server', search: 'sql' }, - { - meta: azureStoragecontainerIcon, - alt: 'Azure Storage Container', - search: 'storage', - }, - { meta: azureStoragequeueIcon, alt: 'Azure Storage Queue', search: 'queue' }, - { meta: azureTableIcon, alt: 'Azure Table Storage', search: 'table' }, - { meta: azureWebpubsubIcon, alt: 'Azure Web PubSub', search: 'pubsub' }, - { meta: bunIcon, alt: 'Bun', search: 'bun' }, - { - meta: dataApiBuilderIcon, - alt: 'Data API Builder', - search: 'dataapibuilder', - }, - { meta: fastApiIcon, alt: 'FastAPI', search: 'python' }, - { meta: daprIcon, alt: 'Dapr', search: 'dapr', light: daprLightIcon }, - { meta: dbGateIcon, alt: 'DbGate', search: 'dbgate', light: dbGateLightIcon }, - { meta: denoIcon, alt: 'Deno', search: 'deno', light: denoLightIcon }, - { meta: devTunnelsIcon, alt: 'Dev Tunnels', search: 'devtunnels' }, - { meta: dockerIcon, alt: 'Docker', search: 'docker' }, - { meta: elasticIcon, alt: 'Elasticsearch', search: 'elasticsearch' }, - { meta: flagDIcon, alt: 'flagd', search: 'flagd', light: flagDLightIcon }, - { meta: garnetIcon, alt: 'Garnet', search: 'garnet' }, - { meta: goIcon, alt: 'Go', search: 'golang gofeature', light: goLightIcon }, - { meta: goffIcon, alt: 'GO Feature Flag', search: 'golang feature-flags' }, - { meta: gitHubIcon, alt: 'GitHub', search: 'github', light: gitHubLightIcon }, - { meta: javaIcon, alt: 'Java', search: 'java' }, - { meta: javascriptIcon, alt: 'JavaScript', search: 'javascript' }, - { meta: k3sIcon, alt: 'k3s', search: 'k3s' }, - { meta: k6Icon, alt: 'k6', search: 'k6' }, - { meta: keycloakIcon, alt: 'Keycloak', search: 'keycloak' }, - { meta: kubernetesIcon, alt: 'Kubernetes', search: 'kubernetes' }, - { - meta: kurrentDbIcon, - alt: 'KurrentDB', - search: 'kurrentdb', - light: kurrentDbLightIcon, - }, - { meta: lavinMqIcon, alt: 'LavinMQ', search: 'lavinmq' }, - { - meta: mailpitIcon, - alt: 'Mailpit', - search: 'mailpit', - light: mailpitLightIcon, - }, - { meta: mauiIcon, alt: '.NET MAUI', search: 'maui' }, - { meta: meilisearchIcon, alt: 'Meilisearch', search: 'meilisearch' }, - { - meta: mcpInspectorIcon, - alt: 'MCP Inspector', - search: 'mcpinspector', - light: mcpInspectorLightIcon, - }, - { meta: milvusIcon, alt: 'Milvus Vector Database', search: 'milvus' }, - { meta: minioIcon, alt: 'MinIO', search: 'minio' }, - { meta: mongodbIcon, alt: 'MongoDB', search: 'mongodb' }, - { meta: mysqlconnectorIcon, alt: 'MySQL Connector', search: 'mysql' }, - { meta: natsIcon, alt: 'NATS Messaging', search: 'nats' }, - { meta: ngrokIcon, alt: 'ngrok', search: 'ngrok', light: ngrokLightIcon }, - { - meta: nodeJsIcon, - alt: 'Node.js', - search: 'nodejs', - light: nodeJsLightIcon, - }, - { meta: ollamaIcon, alt: 'Ollama', search: 'ollama' }, - { meta: oracleIcon, alt: 'Oracle', search: 'oracle' }, - { meta: openAiIcon, alt: 'OpenAI', search: 'openai', light: openAiLightIcon }, - { - meta: papercutIcon, - alt: 'Papercut', - search: 'papercut', - light: papercutLightIcon, - }, - { meta: postgresqlIcon, alt: 'PostgreSQL', search: 'postgresql' }, - { meta: powershellIcon, alt: 'PowerShell', search: 'powershell' }, - { meta: pythonIcon, alt: 'Python', search: 'python' }, - { meta: qdrantIcon, alt: 'Qdrant Vector Database', search: 'qdrant' }, - { meta: rabbitmqIcon, alt: 'RabbitMQ', search: 'rabbitmq' }, - { - meta: ravenDbIcon, - alt: 'RavenDB', - search: 'ravendb', - light: ravenDbLightIcon, - }, - { meta: redisIcon, alt: 'Redis', search: 'redis' }, - { meta: reactIcon, alt: 'React', search: 'nodejs' }, - { meta: rustIcon, alt: 'Rust', search: 'rust' }, - { meta: seqIcon, alt: 'Seq Log Server', search: 'seq' }, - { meta: sqlDatabaseProjectsIcon, alt: 'SQL Database Projects', search: 'sqlprojects' }, - { - meta: surrealDbIcon, - alt: 'SurrealDB', - search: 'surrealdb', - light: surrealDbLightIcon, - }, - { meta: sqlIcon, alt: 'SQL Database', search: 'sql' }, - { meta: sqliteIcon, alt: 'SQLite', search: 'sqlite' }, - { meta: typescriptIcon, alt: 'TypeScript', search: 'typescript' }, - { meta: uvIcon, alt: 'Uv', search: 'python' }, - { meta: valkeyIcon, alt: 'Valkey', search: 'valkey' }, -]; - -// Shuffle icons and split into 3 rows -import { shuffle } from '@utils/helpers'; - -const shuffledIcons = shuffle(icons); -const iconsPerRow = Math.ceil(shuffledIcons.length / 3); -const row1 = shuffledIcons.slice(0, iconsPerRow); -const row2 = shuffledIcons.slice(iconsPerRow, iconsPerRow * 2); -const row3 = shuffledIcons.slice(iconsPerRow * 2); - -const infiniteIconsRow1 = [...row1, ...row1]; -const infiniteIconsRow2 = [...row2, ...row2]; -const infiniteIconsRow3 = [...row3, ...row3]; ---- - -
- -
-
- { - infiniteIconsRow1.map((icon) => ( - - {icon.light ? ( - <> - {icon.alt} - {icon.alt} - - ) : ( - {icon.alt} - )} - - )) - } -
-
- - -
-
- { - infiniteIconsRow2.map((icon) => ( - - {icon.light ? ( - <> - {icon.alt} - {icon.alt} - - ) : ( - {icon.alt} - )} - - )) - } -
-
- - -
-
- { - infiniteIconsRow3.map((icon) => ( - - {icon.light ? ( - <> - {icon.alt} - {icon.alt} - - ) : ( - {icon.alt} - )} - - )) - } -
-
-
- -
-
- - - - diff --git a/src/frontend/src/components/LanguagesSupported.astro b/src/frontend/src/components/LanguagesSupported.astro deleted file mode 100644 index fc87e4c32..000000000 --- a/src/frontend/src/components/LanguagesSupported.astro +++ /dev/null @@ -1,196 +0,0 @@ ---- -import { Image } from 'astro:assets'; - -import go from '@assets/icons/go.svg'; -import python from '@assets/icons/python.svg'; -import javascript from '@assets/icons/javascript.svg'; -import typescript from '@assets/icons/typescript.svg'; -import java from '@assets/icons/java.svg'; -import csharp from '@assets/icons/csharp.svg'; - -const languages = [ - { name: 'Go', icon: go, search: 'golang gofeature' }, - { name: 'Python', icon: python, search: 'python' }, - { name: 'JavaScript', icon: javascript, search: 'javascript nodejs' }, - { name: 'TypeScript', icon: typescript, search: 'javascript nodejs' }, - { name: 'Java', icon: java, search: 'java' }, - { name: 'C#', icon: csharp, search: '' }, -]; - -const getSearchParam = (lang: { name: string; search?: string; icon?: any }) => { - return lang.search !== undefined ? lang.search : encodeURIComponent(lang.name.toLowerCase()); -}; ---- - -
-
- { - languages.map((lang) => ( - - {'icon' in lang && lang.icon ? ( - - ) : ( - - - - - -
diff --git a/src/frontend/src/components/LocalVsProdEnvironments.astro b/src/frontend/src/components/LocalVsProdEnvironments.astro deleted file mode 100644 index de347d5d8..000000000 --- a/src/frontend/src/components/LocalVsProdEnvironments.astro +++ /dev/null @@ -1,593 +0,0 @@ ---- -import { Code } from '@astrojs/starlight/components'; ---- - -
-
-
- - - -
-
- {Astro.locals.t('landing.environments.localText')} -
-
- {Astro.locals.t('landing.environments.testText')} -
-
- {Astro.locals.t('landing.environments.prodText')} -
-
- -
-
-
-
- -
-
-
- -
-
- -
-
- -
-
-
- -
-
Redis
-
AWS ElastiCache
-
-
-
Redis
-
Shortlived container
-
-
-
Redis
-
Local container
-
- -
-
PostgreSQL
-
Azure Database for PostgreSQL
-
-
-
PostgreSQL
-
Staged DB
-
-
-
PostgreSQL
-
Local container
-
- -
-
Frontend
-
Azure Static Web Apps
-
-
-
Frontend
-
Dev tunnel
-
-
-
Frontend
-
Local process
-
- -
-
API
-
Azure Container Apps
-
-
-
API
-
Staging environment
-
-
-
API
-
Local process
-
-
-
- - - - diff --git a/src/frontend/src/components/SimpleCard.astro b/src/frontend/src/components/SimpleCard.astro deleted file mode 100644 index a7c65fc79..000000000 --- a/src/frontend/src/components/SimpleCard.astro +++ /dev/null @@ -1,92 +0,0 @@ ---- -import { Icon } from '@astrojs/starlight/components'; -import type { StarlightIcon } from '@astrojs/starlight/types'; - -interface Props { - icon?: StarlightIcon; - title: string; - link?: string; -} - -const { icon, title, link } = Astro.props as Props; ---- - -
-
-

- { - icon ? ( - - ) : ( - - ) - } - {link ? {title} : title} -

-
- -
-
-
- - diff --git a/src/frontend/src/components/TestimonialCarousel.astro b/src/frontend/src/components/TestimonialCarousel.astro deleted file mode 100644 index 67077d74a..000000000 --- a/src/frontend/src/components/TestimonialCarousel.astro +++ /dev/null @@ -1,392 +0,0 @@ ---- -import { Image } from 'astro:assets'; -import { Icon } from '@astrojs/starlight/components'; -import testimonialsData from '@data/testimonials.json'; -import { processAvatars } from '@utils/imageImporter'; - -import type { ImageMetadata } from 'astro'; - -export interface Testimonial { - name: string; - text: string; - avatar: ImageMetadata; - company?: string | null; - role?: string | null; - link?: string | null; -} - -export type Testimonials = Testimonial[]; -const testimonials = processAvatars(testimonialsData) as unknown as Testimonials; - -// Helper function to get initials from name -function getInitials(name: string): string { - const parts = name.split(/\s+/).filter(Boolean); - if (parts.length === 0) return '?'; - if (parts.length === 1) return parts[0].substring(0, 2).toUpperCase(); - return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase(); -} - -// Deterministic unique color generator based on index (no repeats up to large N) -// Uses golden-angle hue stepping to evenly distribute distinct hues. -// Ensures backgrounds are dark enough for AAA contrast with white text; for high-luminance hues (yellow range) -// we clamp lightness lower. This lets us safely return white as the foreground for all generated colors. -function getColorForIndex(index: number): { bg: string; fg: string } { - const GOLDEN_ANGLE = 137.508; // degrees - const hue = (index * GOLDEN_ANGLE) % 360; // distributed hue - // Base saturation / lightness - const saturation = 55; // balanced vibrancy - // Adjust lightness to guarantee contrast; yellows need to be darker - let lightness = 28; // default dark-ish - if (hue > 40 && hue < 85) { - lightness = 22; // yellow / yellow-green zone -> darken more - } else if (hue >= 85 && hue < 140) { - lightness = 24; // greens slightly darkened - } - const bg = `hsl(${hue.toFixed(0)} ${saturation}% ${lightness}%)`; - return { bg, fg: '#ffffff' }; -} ---- - -
-
- { - testimonials.map((t, i) => { - const endsWithParen = (name: string) => /\)\s*$/.test(name); - const extraInfo = [t.role, t.company].filter(Boolean).join(', '); - const displayName = - !endsWithParen(t.name) && extraInfo ? `${t.name} (${extraInfo})` : t.name; - const initials = getInitials(t.name); - const colors = getColorForIndex(i); - - return ( -
-
-
- {initials} -
- {t.name} -
-
{t.text}
-
- {t.link ? ( - - {displayName} - - ) : ( - displayName - )} -
-
- ); - }) - } -
-
- - -
-
- - - - diff --git a/src/frontend/src/components/ThreeTierAspire.astro b/src/frontend/src/components/ThreeTierAspire.astro index 020b73178..35314c459 100644 --- a/src/frontend/src/components/ThreeTierAspire.astro +++ b/src/frontend/src/components/ThreeTierAspire.astro @@ -61,7 +61,6 @@ var api = builder.AddProject("api", "../api/ApiService.csproj") // Add frontend service and reference the API var frontend = builder.AddNpmApp("frontend", "../frontend") .WithHttpEndpoint(env: "PORT", targetPort: 3000) - .WithNpmPackageInstallation() .WithReference(api); builder.Build().Run(); diff --git a/src/frontend/src/components/api-reference/MemberCard.astro b/src/frontend/src/components/api-reference/MemberCard.astro index ab100ec76..1ca934d3d 100644 --- a/src/frontend/src/components/api-reference/MemberCard.astro +++ b/src/frontend/src/components/api-reference/MemberCard.astro @@ -31,6 +31,8 @@ interface Props { parentType?: ParentTypeInfo; sourceBaseUrl?: string; diagnosticSlugs?: Set; + anchorAliases?: string[]; + exactAnchor?: string; } const { @@ -40,6 +42,8 @@ const { parentType, sourceBaseUrl, diagnosticSlugs, + anchorAliases = [], + exactAnchor, } = Astro.props; const base = import.meta.env.BASE_URL.replace(/\/$/, ''); @@ -95,7 +99,12 @@ const returnLink = member.returnType const rawDisplayName = memberDisplayName(member); const displayName = member.name === '.ctor' ? rawDisplayName.replace('.ctor', 'Constructor') : rawDisplayName; -const anchorSlug = memberSlug(member); +const anchorSlug = exactAnchor ?? memberSlug(member); +const aliases = anchorAliases.filter((alias) => alias !== anchorSlug); +const primaryAnchorSlug = aliases[0] ?? anchorSlug; +const hiddenAnchorSlugs = primaryAnchorSlug === anchorSlug + ? [] + : [anchorSlug, ...aliases.slice(1)]; const isCtor = member.name === '.ctor'; const returnShort = member.returnType ? shortTypeName(member.returnType) : member.returnType; const returnColorClass = returnShort ? `mc-param-type-${typeColorIndex(returnShort)}` : ''; @@ -152,7 +161,10 @@ if (formattedSigRaw && (member.kind === 'property' || member.kind === 'indexer') } --- -
+
+ {hiddenAnchorSlugs.map((slug) => ( +