open-design/apps/landing-page/app/pages/skills/scenario/[scenario].astro

---
/*
 * /skills/scenario/<slug>/ — every skill targeting a given use-case
 * scenario (marketing, engineering, design, research, ...).
 *
 * Mirrors the mode page but facets on `od.scenario`. One page per
 * distinct scenario value found across all SKILL.md files.
 */
import Layout from '../../../_components/sub-page-layout.astro';
import SkillRow from '../../../_components/skill-row.astro';
import {
  getSkillScenarioIndex,
  getSkillsForScenario,
  type TagDescriptor,
} from '../../../_lib/catalog';
import { getLandingUiCopy, localeFromPath, localizedHref } from '../../../i18n';

export async function getStaticPaths() {
  const tags = await getSkillScenarioIndex();
  return tags.map((tag) => ({
    params: { scenario: tag.slug },
    props: { tag },
  }));
}

interface Props {
  tag: TagDescriptor;
}

const { tag } = Astro.props as Props;
const locale = localeFromPath(Astro.url.pathname);
const ui = getLandingUiCopy(locale);
const href = (path: string) => localizedHref(path, locale);
const { records, label } = await getSkillsForScenario(tag.slug, locale);
const heading = label ?? tag.label;

const title = ui.catalog.skills.filterTitle(heading, records.length);
const description = ui.catalog.skills.scenarioDescription(heading, records.length);

const url = new URL(`/skills/scenario/${tag.slug}/`, Astro.site).toString();
const jsonLd = {
  '@context': 'https://schema.org',
  '@type': 'CollectionPage',
  name: title,
  description,
  url,
  numberOfItems: records.length,
};
---

<Layout title={title} description={description} active="skills" jsonLd={jsonLd}>
  <header class="catalog-head">
    <nav class="breadcrumb" aria-label={ui.catalog.breadcrumbLabel}>
      <a href={href('/skills/')}>{ui.catalog.skills.detailLabel}</a>
      <span aria-hidden="true">/</span>
      <span>{ui.catalog.skills.scenario}</span>
      <span aria-hidden="true">/</span>
      <span class="crumb-active">{heading}</span>
    </nav>
    <span class="label">{ui.catalog.skills.label}</span>
    <h1 class="display">
      {ui.catalog.skills.scenarioHeading(heading, records.length)}
    </h1>
    <p class="lead">
      {ui.catalog.skills.scenarioLead(label ?? tag.label)}
    </p>
    <p class="filter-clear">
      <a href={href('/skills/')}>{ui.catalog.skills.allSkills()}</a>
    </p>
  </header>

  <section class="catalog-grid catalog-grid-skills" aria-label={ui.catalog.skills.allAria}>
    <ol>
      {records.map((s, idx) => <SkillRow skill={s} index={idx} />)}
    </ol>
  </section>
</Layout>