feat: add support for .all-contributors

.all-contributorsrc

@@ -0,0 +1,62 @@
+{
+  "projectName": "astro-contributors",
+  "projectOwner": "trueberryless-org",
+  "repoType": "github",
+  "repoHost": "https://github.com",
+  "files": ["README.md"],
+  "imageSize": 100,
+  "commit": false,
+  "commitConvention": "angular",
+  "contributors": [
+    {
+      "login": "trueberryless",
+      "name": "trueberryless",
+      "avatar_url": "https://github.com/trueberryless.png",
+      "profile": "https://github.com/trueberryless",
+      "contributions": ["code", "maintenance"]
+    },
+    {
+      "login": "github-actions[bot]",
+      "name": "github-actions[bot]",
+      "avatar_url": "https://avatars.githubusercontent.com/in/15368?s=60&v=4",
+      "profile": "https://github.com/apps/github-actions",
+      "contributions": ["maintenance", "infra"]
+    },
+    {
+      "login": "trueberryless-org[bot]",
+      "name": "trueberryless-org[bot]",
+      "avatar_url": "https://avatars.githubusercontent.com/in/1100768?s=60&v=4",
+      "profile": "https://github.com/trueberryless-org",
+      "contributions": ["maintenance"]
+    },
+    {
+      "login": "renovate[bot]",
+      "name": "renovate[bot]",
+      "avatar_url": "https://avatars.githubusercontent.com/in/2740?s=60&v=4",
+      "profile": "https://github.com/apps/renovate",
+      "contributions": ["maintenance"]
+    },
+    {
+      "login": "autofix-ci[bot]",
+      "name": "autofix-ci[bot]",
+      "avatar_url": "https://avatars.githubusercontent.com/in/243519?s=60&v=4",
+      "profile": "https://github.com/apps/autofix-ci",
+      "contributions": ["maintenance"]
+    },
+    {
+      "login": "coderabbitai[bot]",
+      "name": "coderabbitai[bot]",
+      "avatar_url": "https://avatars.githubusercontent.com/in/347564?s=60&v=4",
+      "profile": "https://github.com/apps/coderabbitai",
+      "contributions": ["review"]
+    },
+    {
+      "login": "IEvangelist",
+      "name": "IEvangelist",
+      "avatar_url": "https://github.com/IEvangelist.png",
+      "profile": "https://github.com/IEvangelist",
+      "contributions": ["code"]
+    }
+  ],
+  "contributorsPerLine": 7
+}

docs/astro.config.ts

@@ -15,7 +15,11 @@ export default defineConfig({
       sidebar: [
         {
           label: "Start Here",
-          items: [{ slug: "getting-started" }, { slug: "parameters" }],
+          items: [
+            { slug: "getting-started" },
+            { slug: "parameters" },
+            { slug: "all-contributors" },
+          ],
         },
       ],
       social: [

docs/src/content/docs/all-contributors.mdx

@@ -0,0 +1,111 @@
+---
+title: AllContributors
+description: Display contributors automatically from your .all-contributorsrc file.
+---
+
+import Preview from "../../components/component-preview.astro";
+import { AllContributors } from "astro-contributors"
+
+The `AllContributors` component automatically finds and parses the `.all-contributorsrc` file in your project directory and renders a responsive, accessible grid of contributor cards.
+
+Unlike the `ContributorList` component, `AllContributors` **requires no parameters**. It acts as a plug-and-play solution that inherits all configuration directly from your existing [All Contributors](https://allcontributors.org/en/) setup.
+
+## Usage
+
+Simply import the component and place it in your MDX file.
+
+```mdx
+import { AllContributors } from "astro-contributors"
+
+<AllContributors />
+```
+
+<Preview>
+
+<AllContributors />
+
+</Preview>
+
+## Requirements
+
+For this component to render successfully, you must have a valid `.all-contributorsrc` file located in your project root (or any parent directory relative to where Astro is running).
+
+The component automatically crawls up the directory tree to locate this file, so it works seamlessly even in monorepos. If the file is missing or contains no contributors, it will render a fallback message.
+
+## Styling
+
+The component outputs a CSS Grid that automatically adjusts the number of columns based on the screen width (minimum `140px` per card).
+
+Out of the box, the component automatically inherits your [Starlight](https://starlight.astro.build) theme variables for a native look and feel. However, you can override any of these colors using optional props. This is especially useful if you are using the component in a vanilla Astro project or want a completely custom look.
+
+All color props accept any valid CSS color value (Hex, RGB, HSL, etc.).
+
+### `bgColor`
+
+**Type**: `string` <br />
+**Optional**
+
+Overrides the background color of the individual contributor cards.
+
+### `borderColor`
+
+**Type**: `string` <br />
+**Optional**
+
+Overrides the border color of the contributor cards, the avatar background, and the badge borders.
+
+### `textColor`
+
+**Type**: `string` <br />
+**Optional**
+
+Overrides the primary text color used for the contributor's name.
+
+### `badgeBgColor`
+
+**Type**: `string` <br />
+**Optional**
+
+Overrides the background color of the contribution type badges.
+
+### `badgeTextColor`
+
+**Type**: `string` <br />
+**Optional**
+
+Overrides the text and emoji color inside the contribution type badges.
+
+### `focusColor`
+
+**Type**: `string` <br />
+**Optional**
+
+Overrides the accent color used for the hover state outline and focus rings.
+
+### Example with Custom Colors
+
+```mdx wrap
+import { AllContributors } from "astro-contributors"
+
+<AllContributors
+    bgColor="#1e1e1e"
+    borderColor="#333333"
+    textColor="#ffffff"
+    badgeBgColor="#ff5733"
+    badgeTextColor="#111111"
+    focusColor="#ff5733"
+/>
+````
+
+<Preview>
+
+<AllContributors
+    bgColor="#1e1e1e"
+    borderColor="#333333"
+    textColor="#ffffff"
+    badgeBgColor="#ff5733"
+    badgeTextColor="#111111"
+    focusColor="#ff5733"
+/>
+
+</Preview>

docs/src/content/docs/parameters.mdx

@@ -53,7 +53,7 @@ import { ContributorList } from "astro-contributors"
 
 The accent color used for the avatar background and focus outlines. This can be any valid CSS color value (Hex, RGB, HSL, etc.).
 
-If not provided, the component will first check for a global CSS variable named `--avatar-focus-color`, then fall back to Starlight's `--sl-color-accent`, and finally default to a standard blue.
+If not provided, the component will first check for a global CSS variable named `--avatar-focus-color`, then fall back to [Starlight](https://starlight.astro.build)'s `--sl-color-accent`, and finally default to a standard blue.
 
 ```mdx
 import { ContributorList } from "astro-contributors"

packages/astro-contributors/components/AllContributors.astro

@@ -0,0 +1,183 @@
+---
+import { getAllContributorsFromRc } from "../libs/getAllContributorsRc";
+
+export interface Props {
+  focusColor?: string;
+  bgColor?: string;
+  borderColor?: string;
+  textColor?: string;
+  badgeBgColor?: string;
+  badgeTextColor?: string;
+}
+
+const {
+  focusColor,
+  bgColor,
+  borderColor,
+  textColor,
+  badgeBgColor,
+  badgeTextColor,
+} = Astro.props as Props;
+
+const styleOverride = {
+  ...(focusColor && { "--ac-focus-color": focusColor }),
+  ...(bgColor && { "--ac-bg-color": bgColor }),
+  ...(borderColor && { "--ac-border-color": borderColor }),
+  ...(textColor && { "--ac-text-color": textColor }),
+  ...(badgeBgColor && { "--ac-badge-bg-color": badgeBgColor }),
+  ...(badgeTextColor && { "--ac-badge-text-color": badgeTextColor }),
+};
+
+const contributors = getAllContributorsFromRc();
+
+const emojiMap: Record<string, string> = {
+  audio: "🔊",
+  a11y: "♿️",
+  bug: "🐛",
+  blog: "📝",
+  business: "💼",
+  code: "💻",
+  content: "🖋",
+  data: "🔣",
+  design: "🎨",
+  doc: "📖",
+  eventOrganizing: "📋",
+  example: "💡",
+  financial: "💵",
+  fundingFinding: "🔍",
+  ideas: "🤔",
+  infra: "🚇",
+  maintenance: "🚧",
+  mentoring: "🧑‍🏫",
+  platform: "📦",
+  plugin: "🔌",
+  projectManagement: "📆",
+  question: "💬",
+  research: "🔬",
+  review: "👀",
+  security: "🛡️",
+  tool: "🔧",
+  translation: "🌍",
+  test: "⚠️",
+  tutorial: "✅",
+  talk: "📢",
+  userTesting: "📓",
+  video: "📹",
+};
+---
+
+{
+  contributors.length > 0 ? (
+    <div
+      class="all-contributors-grid"
+      style={Object.keys(styleOverride).length > 0 ? styleOverride : undefined}
+    >
+      {contributors.map((contributor) => (
+        <a
+          href={contributor.profile}
+          class="contributor-card"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <img
+            src={contributor.avatar_url}
+            alt={contributor.name}
+            title={contributor.name}
+            width="64"
+            height="64"
+            loading="lazy"
+          />
+          <div class="contributor-info">
+            <span class="contributor-name">{contributor.name}</span>
+            <div class="contributor-badges">
+              {contributor.contributions.map((type) => (
+                <span class="badge" title={`Contribution: ${type}`}>
+                  {emojiMap[type] || "✨"}&nbsp;{type}
+                </span>
+              ))}
+            </div>
+          </div>
+        </a>
+      ))}
+    </div>
+  ) : (
+    <p>No .all-contributorsrc file found or no contributors listed.</p>
+  )
+}
+
+<style>
+  .all-contributors-grid {
+    --local-focus: var(--ac-focus-color, var(--sl-color-accent, #3b82f6));
+    --local-bg: var(--ac-bg-color, var(--sl-color-bg-nav, #f8f9fa));
+    --local-border: var(--ac-border-color, var(--sl-color-hairline, #e5e7eb));
+    --local-text: var(--ac-text-color, var(--sl-color-text, #111827));
+    --local-badge-bg: var(--ac-badge-bg-color, var(--sl-color-black, #1a1a1a));
+    --local-badge-text: var(
+      --ac-badge-text-color,
+      var(--sl-color-text, #ffffff)
+    );
+
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    gap: 1rem;
+    padding: 1rem 0;
+  }
+
+  .contributor-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding: 1.25rem 0.5rem;
+    border-radius: 0.5rem;
+    background: var(--local-bg);
+    border: 1px solid var(--local-border);
+    text-decoration: none;
+    color: var(--local-text);
+    transition:
+      transform 0.2s ease,
+      box-shadow 0.2s ease;
+  }
+
+  .contributor-card:hover,
+  .contributor-card:focus-visible {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    outline: 2px solid var(--local-focus);
+    outline-offset: 2px;
+  }
+
+  .contributor-card img {
+    border-radius: 50%;
+    margin-bottom: 0.75rem;
+    background-color: var(--local-border);
+    object-fit: cover;
+  }
+
+  .contributor-name {
+    font-weight: 600;
+    font-size: 0.9rem;
+    margin-bottom: 0.5rem;
+    line-height: 1.2;
+  }
+
+  .contributor-badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.35rem;
+    justify-content: center;
+  }
+
+  .badge {
+    font-size: 0.7rem;
+    padding: 0.15rem 0.4rem;
+    border-radius: 0.25rem;
+    background: var(--local-badge-bg);
+    border: 1px solid var(--local-border);
+    color: var(--local-badge-text);
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    text-transform: capitalize;
+  }
+</style>

packages/astro-contributors/index.ts

@@ -1 +1,2 @@
 export { default as ContributorList } from "./components/ContributorList.astro";
+export { default as AllContributors } from "./components/AllContributors.astro";