foxguard 0.6.3

Security scanner as fast as a linter. 170+ built-in rules, 10 languages, sub-second scans.
Documentation
---
import { ruleGroups, totalRules } from '../../data/rules';
---

<section class="py-24" id="rules">
  <div class="max-w-5xl mx-auto px-6">

    <h2 class="font-heading text-noir-50 text-3xl sm:text-4xl mb-4">Rules</h2>
    <p class="text-noir-500 text-base mb-12">{totalRules} built-in rules, each mapped to a CWE.</p>

    <div class="flex flex-col gap-px bg-noir-800 rounded-xl overflow-hidden">
      {ruleGroups.map((group) => (
        <details class="group bg-noir-950">
          <summary class="flex items-center justify-between px-5 py-3.5 cursor-pointer select-none list-none hover:bg-noir-900/50 transition-colors">
            <span class="flex items-center gap-3">
              <svg class="w-2 h-2 text-noir-600 transition-transform duration-200 group-open:rotate-90" viewBox="0 0 12 12" fill="currentColor"><path d="M4 1l6 5-6 5V1z"/></svg>
              <span class="text-noir-100 text-sm">{group.name}</span>
            </span>
            <span class="text-noir-600 text-sm">{group.rules.length}</span>
          </summary>
          <div class="border-t border-noir-800/50">
            {group.rules.map((rule) => (
              <div class="px-5 py-2 border-b border-noir-800/20 last:border-b-0">
                <div class="flex items-center gap-3">
                  <code class="font-mono text-fox text-xs">{rule.id}</code>
                  <span class:list={[
                    'text-[10px]',
                    rule.severity === 'critical' ? 'text-purple-400' :
                    rule.severity === 'high' ? 'text-red-400' :
                    rule.severity === 'medium' ? 'text-yellow-500' : 'text-noir-600'
                  ]}>{rule.severity}</span>
                  <span class="text-noir-600 text-[10px]">{rule.cwe}</span>
                </div>
                <div class="text-noir-500 text-xs mt-0.5 hidden sm:block">{rule.desc}</div>
              </div>
            ))}
          </div>
        </details>
      ))}
    </div>
  </div>
</section>