You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
164 lines
2.6 KiB
164 lines
2.6 KiB
<script lang="ts">
|
|
export interface AiAgentInstruction {
|
|
readonly step: string;
|
|
readonly where: string;
|
|
readonly rule: string;
|
|
}
|
|
|
|
let {
|
|
intro = 'Checklist for coding assistants before changing this module.',
|
|
rows
|
|
}: {
|
|
readonly intro?: string;
|
|
readonly rows: readonly AiAgentInstruction[];
|
|
} = $props();
|
|
</script>
|
|
|
|
<section class="ia-agents-box" aria-labelledby="ia-agents-title">
|
|
<h2 id="ia-agents-title">IA Agents</h2>
|
|
<p>{intro}</p>
|
|
|
|
<div class="table-wrap">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Step</th>
|
|
<th>Where to look</th>
|
|
<th>Rule</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{#each rows as row (row.step)}
|
|
<tr>
|
|
<td data-label="Step">{row.step}</td>
|
|
<td data-label="Where to look"><code>{row.where}</code></td>
|
|
<td data-label="Rule">{row.rule}</td>
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.ia-agents-box {
|
|
margin: 3rem 0 0;
|
|
padding: 1rem;
|
|
border: 1px solid var(--c-border);
|
|
border-radius: var(--r-lg);
|
|
background: var(--c-bg-subtle);
|
|
}
|
|
|
|
h2 {
|
|
margin: 0 0 0.5rem;
|
|
padding-top: 0;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
color: var(--c-fg);
|
|
}
|
|
|
|
p {
|
|
margin: 0 0 0.85rem;
|
|
font-size: 0.9rem;
|
|
color: var(--c-fg-muted);
|
|
}
|
|
|
|
.table-wrap {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
table {
|
|
margin: 0;
|
|
background: var(--c-bg);
|
|
}
|
|
|
|
td:first-child {
|
|
width: 8.5rem;
|
|
font-weight: 600;
|
|
color: var(--c-fg);
|
|
}
|
|
|
|
td,
|
|
th {
|
|
vertical-align: top;
|
|
}
|
|
|
|
td :global(code) {
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
@media (max-width: 680px) {
|
|
.ia-agents-box {
|
|
padding: 0.85rem;
|
|
}
|
|
|
|
.table-wrap {
|
|
overflow-x: visible;
|
|
}
|
|
|
|
table,
|
|
thead,
|
|
tbody,
|
|
tr,
|
|
th,
|
|
td {
|
|
display: block;
|
|
}
|
|
|
|
table {
|
|
border: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
thead {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
|
|
tr {
|
|
margin: 0.75rem 0 0;
|
|
border: 1px solid var(--c-border);
|
|
border-radius: var(--r-md);
|
|
background: var(--c-bg);
|
|
overflow: hidden;
|
|
}
|
|
|
|
td,
|
|
td:first-child {
|
|
width: auto;
|
|
padding: 0.65rem 0.75rem;
|
|
border-bottom: 1px solid var(--c-border);
|
|
font-weight: 400;
|
|
}
|
|
|
|
td:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
td::before {
|
|
content: attr(data-label);
|
|
display: block;
|
|
margin-bottom: 0.2rem;
|
|
color: var(--c-fg-subtle);
|
|
font-size: 0.7rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
td:first-child {
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
</style>
|