npm package: @pandanetwork/panda-network-footer
Description: A reusable web component footer for Panda Network sites
Author: Panda Network
Latest version: 1.0.2

# Panda Network Footer

A reusable web component footer for Panda Network sites, built with Lit and TypeScript.

## Requirements

- Node.js >= 16.0.0 (for development/build)
- Modern browser with ES2020 support (Chrome 80+, Firefox 75+, Safari 13.1+, Edge 80+)

## Features

- 🎨 Beautiful, responsive footer design
- 📊 Dynamic sponsor loading from Supabase
- 🔗 Network directory with links
- 📱 Mobile-responsive layout
- ⚡ Fast and lightweight
- 🎯 TypeScript support
- 🌐 Framework-agnostic (works with any framework or vanilla HTML)

## Installation

### From npm

```bash
npm install @pandanetwork/panda-network-footer
```

**Note:** If you encounter peer dependency conflicts (especially with rollup), use:

```bash
npm install @pandanetwork/panda-network-footer --legacy-peer-deps
```

This package requires `lit` (bundled) and optionally `@supabase/supabase-js` if you want to use Supabase features.

### Development Setup

```bash
git clone <repository-url>
cd panda-network-footer
npm install
```

## Development

```bash
# Start dev server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Type check
npm run type-check
```

## Usage

### Basic HTML

```html
<!DOCTYPE html>
<html>
<head>
  <script type="module" src="./dist/panda-footer.js"></script>
</head>
<body>
  <panda-footer
    supabase-url="YOUR_SUPABASE_URL"
    supabase-key="YOUR_SUPABASE_ANON_KEY">
  </panda-footer>
</body>
</html>
```

### With Supabase

The component requires Supabase credentials to fetch sponsors. Set them via attributes:

- `supabase-url`: Your Supabase project URL
- `supabase-key`: Your Supabase anonymous/public key

```html
<panda-footer
  supabase-url="https://your-project.supabase.co"
  supabase-key="your-anon-key">
</panda-footer>
```

### Without Supabase

If you don't provide Supabase credentials, the component will still render but sponsors won't load:

```html
<panda-footer></panda-footer>
```

### React

```tsx
import { useEffect } from 'react';
import './path/to/dist/panda-footer.js';

function App() {
  useEffect(() => {
    // Component is registered globally, no import needed
  }, []);

  return (
    <panda-footer
      supabase-url="YOUR_SUPABASE_URL"
      supabase-key="YOUR_SUPABASE_ANON_KEY"
    />
  );
}
```

### Vue

```vue
<template>
  <panda-footer
    :supabase-url="supabaseUrl"
    :supabase-key="supabaseKey"
  />
</template>

<script setup>
import './path/to/dist/panda-footer.js';

const supabaseUrl = 'YOUR_SUPABASE_URL';
const supabaseKey = 'YOUR_SUPABASE_ANON_KEY';
</script>
```

### Svelte

```svelte
<script>
  import './path/to/dist/panda-footer.js';
</script>

<panda-footer
  supabase-url="YOUR_SUPABASE_URL"
  supabase-key="YOUR_SUPABASE_ANON_KEY"
/>
```

## Supabase Schema

The component expects a `sponsors` table with the following structure:

```sql
CREATE TABLE sponsors (
  id SERIAL PRIMARY KEY,
  title TEXT NOT NULL,
  description TEXT,
  display_url TEXT NOT NULL,
  click_url TEXT NOT NULL,
  icon_path TEXT,
  image_path TEXT NOT NULL,
  rank INTEGER,
  is_active BOOLEAN DEFAULT true,
  impression_url TEXT
);
```

## Component Structure

- **Top Sponsors**: Dynamically loaded from Supabase, sorted by rank
- **Network Directory**: Static links organized by section (Adobe Creative Cloud, Panda Network)
- **CTA Section**: Call-to-action for becoming a sponsor

## Styling

The component uses Shadow DOM for style encapsulation, so styles won't leak out or be affected by external CSS. All styles are self-contained within the component.

## Browser Support

- Chrome/Edge (latest)
- Firefox (latest)
- Safari (latest)
- Any browser that supports Custom Elements v1 and Shadow DOM

## License

MIT