Skip to content

Add shared SectionActions component for section CTA groups #393

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zz-plant merged 1 commit into from
Jan 13, 2026
Merged

Add shared SectionActions component for section CTA groups #393

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
13 changes: 13 additions & 0 deletions src/components/SectionActions.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
---
interface Props {
className?: string;
ariaLabel?: string;
}

const { className, ariaLabel } = Astro.props as Props;

@gemini-code-assist gemini-code-assist Bot Jan 13, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

medium

The explicit type cast as Props is not necessary here. Astro's compiler can infer the types of Astro.props from the Props interface defined in the component script. Removing the cast makes the code more idiomatic and aligns with modern Astro practices.

const { className, ariaLabel } = Astro.props;

const classes = ["section__actions", className].filter(Boolean).join(" ");
---

<div class={classes} aria-label={ariaLabel}>

@gemini-code-assist gemini-code-assist Bot Jan 13, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

medium

For better accessibility, I suggest a couple of improvements here:

  1. Add role="group": This will semantically group the actions for assistive technologies. A group should have an accessible name, so it's best to apply this role conditionally only when ariaLabel is provided.
  2. Make aria-label more robust: Using aria-label={ariaLabel || undefined} prevents rendering an empty aria-label="" attribute if an empty string is passed as the prop.

These changes will make the component more accessible and robust.

<div class={classes} role={ariaLabel ? 'group' : undefined} aria-label={ariaLabel || undefined}>

<slot />
</div>
5 changes: 3 additions & 2 deletions src/pages/agent-toolkit/agent-contract.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
---
import BaseLayout from "../../layouts/BaseLayout.astro";
import PageIntro from "../../components/PageIntro.astro";
import SectionActions from "../../components/SectionActions.astro";
import SectionBlock from "../../components/SectionBlock.astro";

const pageTitle = "Using Ethotechnics as an AI Agent";
Expand Down Expand Up @@ -240,11 +241,11 @@ const ontologyTerms = [
<li>{prompt}</li>
))}
</ul>
<div class="section__actions">
<SectionActions>
<a class="button ghost" href="/agent-toolkit/prompt-packs">
Go to prompt packs
</a>
</div>
</SectionActions>
</SectionBlock>

<SectionBlock
Expand Down
5 changes: 3 additions & 2 deletions src/pages/agent-toolkit/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import CardGrid from "../../components/CardGrid.astro";
import CardItem from "../../components/CardItem.astro";
import PageIntro from "../../components/PageIntro.astro";
import SectionActions from "../../components/SectionActions.astro";
import SectionBlock from "../../components/SectionBlock.astro";
import BaseLayout from "../../layouts/BaseLayout.astro";

Expand Down Expand Up @@ -159,11 +160,11 @@ const resources = [
Need shared vocabulary? The glossary offers stable definitions and cross-links for every
principle.
</p>
<div class="section__actions">
<SectionActions>
<a class="button ghost" href="/glossary">
Visit the glossary
</a>
</div>
</SectionActions>
</SectionBlock>

<SectionBlock
Expand Down
5 changes: 3 additions & 2 deletions src/pages/agent-toolkit/prompt-packs.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import CardGrid from "../../components/CardGrid.astro";
import CardItem from "../../components/CardItem.astro";
import PageIntro from "../../components/PageIntro.astro";
import SectionActions from "../../components/SectionActions.astro";
import SectionBlock from "../../components/SectionBlock.astro";
import BaseLayout from "../../layouts/BaseLayout.astro";

Expand Down Expand Up @@ -192,11 +193,11 @@ const diagnosticFailureModes = [
<p class="muted small">
Pair these prompts with the glossary to keep terms consistent across teams.
</p>
<div class="section__actions">
<SectionActions>
<a class="button ghost" href="/glossary">
Reference the glossary
</a>
</div>
</SectionActions>
</SectionBlock>

<SectionBlock
Expand Down
5 changes: 3 additions & 2 deletions src/pages/agent-toolkit/quick-answers.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import CardGrid from "../../components/CardGrid.astro";
import CardItem from "../../components/CardItem.astro";
import PageIntro from "../../components/PageIntro.astro";
import SectionActions from "../../components/SectionActions.astro";
import SectionBlock from "../../components/SectionBlock.astro";
import BaseLayout from "../../layouts/BaseLayout.astro";

Expand Down Expand Up @@ -113,13 +114,13 @@ const quickAnswers = [
title="Invite deeper learning"
description="Offer a path to explore the full mechanisms catalog or principle definitions."
>
<div class="section__actions">
<SectionActions>
<a class="button ghost" href="/mechanisms">
Explore the mechanisms
</a>
<a class="button ghost" href="/glossary">
Review the glossary
</a>
</div>
</SectionActions>
</SectionBlock>
</BaseLayout>
9 changes: 5 additions & 4 deletions src/pages/diagnostics/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import CardItem from '../../components/CardItem.astro';
import CitationBlock from '../../components/CitationBlock.astro';
import PageIntro from '../../components/PageIntro.astro';
import ScholarlyMeta from '../../components/ScholarlyMeta.astro';
import SectionActions from '../../components/SectionActions.astro';
import SectionBlock from '../../components/SectionBlock.astro';
import StudioBadge from '../../components/StudioBadge.astro';
import { diagnosticsContent } from '../../content/diagnostics';
Expand Down Expand Up @@ -65,9 +66,9 @@ const quickTriagePrompts = [
},
}}
/>
<div class="section__actions">
<SectionActions>
<StudioBadge />
</div>
</SectionActions>
<ScholarlyMeta publication={publication} permalink={permalink} />
<CitationBlock
title={pageTitle}
Expand Down Expand Up @@ -274,7 +275,7 @@ const quickTriagePrompts = [
</ul>
</div>
<div class="diagnostics__card-footer">
<div class="section__actions">
<SectionActions>
<a class="button primary" href={tool.ctaHref} aria-label={tool.ctaAriaLabel ?? tool.ctaLabel}>
{tool.ctaLabel}
</a>
Expand All @@ -288,7 +289,7 @@ const quickTriagePrompts = [
>
{tool.exampleLabel}
</a>
</div>
</SectionActions>
</div>
</CardItem>
))}
Expand Down
5 changes: 3 additions & 2 deletions src/pages/institute/how-studio-fits.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
---
import BaseLayout from "../../layouts/BaseLayout.astro";
import PageIntro from "../../components/PageIntro.astro";
import SectionActions from "../../components/SectionActions.astro";
import SectionBlock from "../../components/SectionBlock.astro";
import InstituteStudioComparison from "../../components/InstituteStudioComparison.astro";
import StudioBadge from "../../components/StudioBadge.astro";
Expand Down Expand Up @@ -34,9 +35,9 @@ const anchorLinks = [
}}
/>

<div class="section__actions">
<SectionActions>
<StudioBadge />
</div>
</SectionActions>

<SectionBlock
id="positioning"
Expand Down
13 changes: 7 additions & 6 deletions src/pages/start-here/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { getEntry } from "astro:content";
import CardGrid from "../../components/CardGrid.astro";
import CardItem from "../../components/CardItem.astro";
import PageIntro from "../../components/PageIntro.astro";
import SectionActions from "../../components/SectionActions.astro";
import SectionBlock from "../../components/SectionBlock.astro";
import BaseLayout from "../../layouts/BaseLayout.astro";
import StudioBadge from "../../components/StudioBadge.astro";
Expand Down Expand Up @@ -51,7 +52,7 @@ const recommendedDetails = recommendedCard
{recommendedDetails.map((detail) => (
<p class={detail.className}>{detail.text}</p>
))}
<div class="section__actions">
<SectionActions>
{hero.actions.map((action) => (
<a
class={`button ${action.variant}`}
Expand All @@ -61,13 +62,13 @@ const recommendedDetails = recommendedCard
{action.label}
</a>
))}
</div>
</SectionActions>
</div>
)
}
<div class="section__actions">
<SectionActions>
<StudioBadge />
</div>
</SectionActions>
<p class="muted small">{hero.quickNote}</p>
<p class="muted">{hero.quickSummary}</p>
<ul class="muted">
Expand Down Expand Up @@ -257,13 +258,13 @@ const recommendedDetails = recommendedCard
description={footerCta.description}
variant="alt"
>
<div class="section__actions">
<SectionActions>
<a class="button primary" href={footerCta.primaryHref}>
{footerCta.primaryLabel}
</a>
<a class="button ghost" href={footerCta.secondaryHref}>
{footerCta.secondaryLabel}
</a>
</div>
</SectionActions>
</SectionBlock>
</BaseLayout>