Files
pbakaus_impeccable/site/components/SlopRuleCard.astro
T
Paul Bakaus bbed6eef08 Refresh the Impeccable product experience
Rework the landing page proof, steering demo, feature grid, slop catalog, detector coverage, theming, Live workflow, and responsive behavior.\n\nAI-assisted implementation by OpenAI Codex.
2026-07-15 23:29:47 -07:00

34 lines
1.4 KiB
Plaintext

---
const {
rule,
visual,
layer = 'cli',
description = rule.description,
categoryLabel = rule.category === 'slop' ? 'AI slop' : 'Quality',
category = rule.category,
skillHref = rule.skillSection ? `/docs/impeccable#section-${rule.skillSection.toLowerCase().replace(/\s*&\s*/g, '-').replace(/\s+/g, '-')}` : '/detector',
linkLabel = rule.skillSection ? 'See in /impeccable' : 'Inspect the detector',
} = Astro.props;
const layerLabel = layer === 'browser' ? 'Browser' : 'CLI';
const layerTitle = layer === 'browser'
? 'Deterministic, but requires rendered browser layout.'
: 'Deterministic. Runs from npx impeccable detect on source files.';
---
<article class="rule-card" id={`rule-${rule.id}`} data-layer={layer}>
<div class="rule-card-visual" aria-hidden="true">
<div class="rule-card-visual-inner" set:html={visual} />
</div>
<div class="rule-card-body">
<div class="rule-card-head">
<span class="rule-card-category" data-category={category}>{categoryLabel}</span>
<span class="rule-card-layer" data-layer={layer} title={layerTitle}>{layerLabel}</span>
{rule.gated && <span class="rule-card-layer" data-layer="optin" title={`Off by default. Enable with --${rule.gated}.`}>opt-in</span>}
</div>
<h3 class="rule-card-name">{rule.name}</h3>
<p class="rule-card-desc">{description}</p>
<a class="rule-card-skill-link" href={skillHref}>{linkLabel}</a>
</div>
</article>