Quick Start

Get astro-gravatar working in your Astro project in just a few minutes.

1. Install

bun add astro-gravatar

2. Basic Avatar

---
import GravatarAvatar from 'astro-gravatar';
---

<GravatarAvatar
  email="user@example.com"
  size={80}
  class="rounded-full"
/>

3. Profile Card

---
import GravatarProfileCard from 'astro-gravatar/GravatarProfileCard';
---

<GravatarProfileCard
  email="user@example.com"
  layout="card"
  avatarSize={100}
  showName
  showBio
/>

4. Multiple Users

---
import GravatarAvatar from 'astro-gravatar';

const team = [
  'alice@example.com',
  'bob@example.com',
  'charlie@example.com'
];
---

<div style="display: flex; gap: 1rem; align-items: center;">
  {team.map(email => (
    <GravatarAvatar
      key={email}
      email={email}
      size={60}
      default="identicon"
      class="rounded-full"
    />
  ))}
</div>

5. QR Code

---
import GravatarQR from 'astro-gravatar/GravatarQR';
---

<GravatarQR
  email="user@example.com"
  size={100}
  class="qr-code"
/>

Default Avatar Options

• identicon - Geometric pattern
• mp - Mystery person
• monsterid - Generated monster
• retro - 8-bit style

<GravatarAvatar
  email="user@example.com"
  default="identicon"
  size={80}
/>

API Key (Optional)

For enhanced profile data, add the key to .env and pass it to the helper or client that performs the request:

.env

GRAVATAR_API_KEY=your-key-here

import { getProfile } from 'astro-gravatar';

const profile = await getProfile('user@example.com', {
  apiKey: import.meta.env.GRAVATAR_API_KEY,
});

If you only render GravatarAvatar or GravatarQR, no API key is required. For a deeper walkthrough, continue to Authentication.

Next Steps

• Installation - Detailed setup guide
• Basic Usage - More examples
• CLI Guide - Generate avatar and QR URLs from the terminal
• Authentication - Wire GRAVATAR_API_KEY into profile requests
• Component Reference - Full API docs