Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/frontend/src/components/AppHostBuilder.astro
Original file line number Diff line number Diff line change
Expand Up @@ -631,7 +631,7 @@ for (const language of appHostLanguageConfig.languages) {
padding: 0.18rem 0.35rem;
border: 1px solid color-mix(in srgb, var(--sl-color-orange) 55%, transparent);
border-radius: 999px;
color: var(--sl-color-orange-high);
color: inherit;
background: color-mix(in srgb, var(--sl-color-orange-low) 70%, transparent);
font-size: 0.62rem;
font-weight: 700;
Expand Down
5 changes: 5 additions & 0 deletions src/frontend/src/components/PivotSelector.astro
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,8 @@ const renderedOptions =

<style define:vars={{ marginTop: marginTop !== null && marginTop !== undefined ? `${marginTop}rem` : '0rem' }}>
.pivot-container {
box-sizing: border-box;
max-width: 100%;
background: var(--sl-color-bg-nav);
border: 1px solid var(--sl-color-gray-5);
border-radius: 0.5rem;
Expand Down Expand Up @@ -141,8 +143,11 @@ const renderedOptions =
}

.pivot-selector {
box-sizing: border-box;
display: inline-flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 100%;
background: var(--sl-color-bg);
border: 1px solid var(--sl-color-gray-4);
border-radius: 0.5rem;
Expand Down
61 changes: 32 additions & 29 deletions src/frontend/src/components/SimpleAppHostCode.astro
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
---
import { Code } from '@astrojs/starlight/components';
import AppHostTabs from './AppHostTabs.astro';
import {
appHostLanguageConfig,
type AppHostLanguageId,
} from '@utils/apphost-languages';
import {
getSimpleAppHostCode,
shiftCollapseValue,
Expand All @@ -21,11 +25,22 @@ const { lang = 'csharp', mark, collapse }: Props = Astro.props;
const { csharpCode, typescriptCode } = getSimpleAppHostCode(lang);
const typescriptMark = shiftMarkerValue(mark, typescriptLineOffset);
const typescriptCollapse = shiftCollapseValue(collapse, typescriptLineOffset);
const limitations = Object.fromEntries(
appHostLanguageConfig.languages
.filter(
(language) =>
language.id !== 'csharp' && (language.id !== 'typescript' || !typescriptCode)
)
.map((language) => [
language.id,
`This example does not include a ${language.label} AppHost variant.`,
])
) as Partial<Record<AppHostLanguageId, string>>;
---

{
typescriptCode ? (
<AppHostTabs>
<AppHostTabs {limitations}>
{
typescriptCode && (
<Fragment slot="typescript">
<Code

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please make the TypeScript slot genuinely absent when typescriptCode is undefined. Astro still registers this conditional named slot, so AppHostTabs sees Astro.slots.has('typescript') === true, emits data-supports-typescript, and ignores the supplied TypeScript limitation.

Reproduced at /ja/get-started/app-host/?lang=go&aspire-lang=typescript and /ja/get-started/app-host/?lang=java&aspire-lang=typescript: the selected TypeScript tabpanel is visible but empty, the C# example is hidden, and no TypeScript limitation is rendered.

Branch outside AppHostTabs so the C#-only branch does not declare a TypeScript slot, and add Go/Java regression tests asserting that the limitation appears rather than an empty tabpanel.

code={typescriptCode}
Expand All @@ -37,31 +52,19 @@ const typescriptCollapse = shiftCollapseValue(collapse, typescriptLineOffset);
/>
<slot name="typescript-content" />
</Fragment>
<Fragment slot="csharp">
<Code
code={csharpCode}
lang="cs"
title="AppHost.cs"
mark={mark}
collapse={collapse}
collapseStyle={'collapsible-auto'}
/>
<slot name="csharp-content" />
</Fragment>
</AppHostTabs>
) : (
<>
<Code
code={csharpCode}
lang="cs"
title="AppHost.cs"
mark={mark}
collapse={collapse}
collapseStyle={'collapsible-auto'}
/>
<slot />
</>
)
}
)
}
<Fragment slot="csharp">
<Code
code={csharpCode}
lang="cs"
title="AppHost.cs"
mark={mark}
collapse={collapse}
collapseStyle={'collapsible-auto'}
/>
{typescriptCode ? <slot name="csharp-content" /> : <slot />}
</Fragment>
</AppHostTabs>

{typescriptCode && <slot />}
8 changes: 4 additions & 4 deletions src/frontend/src/data/apphost-languages.json
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
{
"id": "python",
"label": "Python",
"enabled": false,
"enabled": true,
"experimental": true,
"aliases": ["py"],
"cliLanguage": "python",
Expand All @@ -46,7 +46,7 @@
{
"id": "go",
"label": "Go",
"enabled": false,
"enabled": true,
"experimental": true,
"aliases": ["golang"],
"cliLanguage": "go",
Expand All @@ -60,7 +60,7 @@
{
"id": "java",
"label": "Java",
"enabled": false,
"enabled": true,
"experimental": true,
"aliases": [],
"cliLanguage": "java",
Expand All @@ -74,7 +74,7 @@
{
"id": "rust",
"label": "Rust",
"enabled": false,
"enabled": true,
"experimental": true,
"aliases": ["rs"],
"cliLanguage": "rust",
Expand Down
Loading
Loading