Feature: Allow games and simulators to be embedded in external websites

## Description

Allow games and interactive simulators to be embedded in external websites via iframe or script tag with a nice backlink to the main DevOps Daily site for attribution. This will increase reach, drive traffic back to the main site, and help spread DevOps education.

## Motivation

**Benefits:**
- **Increased visibility**: Games embedded on blogs, documentation, educational sites
- **SEO**: Backlinks from embedded games improve search rankings
- **Community engagement**: Users share games on their own platforms
- **Traffic generation**: Attribution links drive users to main site
- **Educational impact**: Spread DevOps knowledge further
- **Viral potential**: Easier to share interactive content

**Use Cases:**
- Tech bloggers embedding simulators in tutorials
- Company internal wikis/documentation
- Educational platforms and courses
- Developer community sites
- Conference presentations and workshops

## Proposed Implementation

### 1. Iframe Embed

**Embed Code Generator**

On each game/simulator page, add "Embed" button that generates:

```html
<iframe 
  src="https://devops-daily.com/games/tcp-vs-udp?embed=true"
  width="800"
  height="600"
  frameborder="0"
  allowfullscreen
  loading="lazy"
  title="TCP vs UDP Simulator - DevOps Daily"
></iframe>
```

**Embed Mode Features**
- `?embed=true` query parameter triggers embed mode
- Simplified UI (hide navigation, footer)
- Compact header with "Powered by DevOps Daily" badge
- Responsive sizing (scale to container)
- Preserve all game functionality
- Optional theme parameter: `?embed=true&theme=dark`

### 2. Script Tag Embed (Advanced)

**One-line Embed**

```html
<div id="devops-daily-game" data-game="tcp-vs-udp"></div>
<script src="https://devops-daily.com/embed.js"></script>
```

**Benefits**:
- Automatic responsive sizing
- Lazy loading
- Async script loading
- No iframe restrictions
- Better SEO for embedded site

**Configuration Options**:
```html
<div 
  id="devops-daily-game" 
  data-game="tcp-vs-udp"
  data-width="100%"
  data-height="600px"
  data-theme="dark"
  data-show-title="true"
></div>
```

### 3. Embed UI Components

**Attribution Badge**

Fixed position badge (bottom-right or top-right):

```
┌─────────────────────┐
│ 🚀 Powered by        │
│    DevOps Daily      │
│  [Visit Site →]     │
└─────────────────────┘
```

**Features**:
- Subtle, non-intrusive design
- Matches site theme (light/dark)
- Clickable link to game page on main site
- Cannot be removed (coded into embed)
- Optional: "Learn more" expands to show game description

**Compact Header**

When embedded, show minimal header:
- Game title
- Small DevOps Daily logo (linked)
- "View Full Version" button

### 4. Embed Settings Page

**Customization Options**

Create `/games/[game]/embed` page with:

- **Size Presets**:
  - Small: 400x300
  - Medium: 800x600
  - Large: 1200x800
  - Responsive: 100% x auto

- **Theme**:
  - Light
  - Dark
  - Auto (match parent page)

- **Features**:
  - Show title: Yes/No
  - Show instructions: Yes/No
  - Autoplay: Yes/No

- **Preview**: Live preview of embed

- **Copy Button**: One-click copy of embed code

### 5. Analytics and Tracking

**Track Embedded Usage**

- Referrer tracking: Which sites embed games
- Impression count: How many times game is viewed via embed
- Click-through rate: Percentage who click attribution link
- Popular embedders: Top sites by traffic

**Analytics Dashboard** (admin only):
- Total embeds by game
- Referrer list with traffic
- Geographic distribution
- Conversion rate (embed view → site visit)

### 6. SEO and Link Juice

**Attribution Link Attributes**
```html
<a 
  href="https://devops-daily.com/games/tcp-vs-udp"
  rel="noopener"
  target="_blank"
  title="TCP vs UDP Simulator - DevOps Daily"
>
  Powered by DevOps Daily
</a>
```

**Benefits**:
- `rel="noopener"`: Security best practice
- `target="_blank"`: Opens in new tab
- Descriptive anchor text for SEO
- Backlinks from high-quality sites

### 7. Security Considerations

**CORS Headers**
```
Access-Control-Allow-Origin: *
X-Frame-Options: ALLOW-FROM https://devops-daily.com
Content-Security-Policy: frame-ancestors *;
```

**Embed Protection**
- Allow embedding on any site (increase reach)
- Attribution badge cannot be removed via CSS/JS
- Embed code includes integrity check
- Rate limiting to prevent abuse

**Privacy**
- No cookies in embed mode
- Minimal tracking (referrer only)
- GDPR compliant

## Implementation Plan

### Phase 1: Basic Iframe Embed
1. Add `?embed=true` mode to all games
2. Create embed-specific layout component
3. Add attribution badge component
4. Test iframe embedding

### Phase 2: Embed Code Generator
1. Add "Embed" button to each game page
2. Create embed settings modal
3. Generate and copy embed code
4. Add preview functionality

### Phase 3: Script Tag Embed
1. Create `embed.js` script
2. Implement dynamic loading
3. Add configuration options
4. Test on various platforms

### Phase 4: Analytics
1. Add referrer tracking
2. Create admin dashboard
3. Monitor top embedders
4. Analyze traffic patterns

## UI/UX Design

**Embed Button Placement**
- Add button next to "Share" or "Fullscreen" buttons
- Icon: `<Code>` or `</>`
- Tooltip: "Embed this simulator"

**Embed Modal**
- Tabs: Iframe / Script / WordPress Plugin
- Size presets with visual indicators
- Live preview pane
- One-click copy with success toast
- "Learn more about embedding" link

**Attribution Badge Design**
- Minimal, subtle design
- Hover effect for interactivity
- Matches game theme automatically
- Fixed position (doesn't interfere with gameplay)

## Technical Considerations

**Responsive Sizing**
```css
.embed-container {
  position: relative;
  padding-bottom: 75%; /* 4:3 aspect ratio */
  height: 0;
  overflow: hidden;
}

.embed-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
```

**Performance**
- Lazy load iframes (`loading="lazy"`)
- Defer script loading
- Minified embed.js
- CDN delivery

**Compatibility**
- Works in all modern browsers
- Graceful degradation for old browsers
- Mobile responsive
- WordPress, Medium, Ghost compatible

## Success Criteria

- [ ] All games can be embedded via iframe
- [ ] Embed code generator works on all game pages
- [ ] Attribution badge is visible and functional
- [ ] Embed mode has clean, distraction-free UI
- [ ] Responsive sizing works correctly
- [ ] Analytics track embed usage
- [ ] Script tag embed works (Phase 3)
- [ ] No security vulnerabilities
- [ ] SEO benefits measurable (backlinks)

## Example Embedding Sites

**Potential Target Sites**:
- Dev.to articles
- Medium posts
- Personal blogs
- Company tech blogs
- DevOps documentation sites
- Educational platforms (Udemy, Coursera)
- GitHub README files (via iframe)
- Conference presentation slides

## Competition Analysis

**Sites with Good Embed Features**:
- **CodePen**: Excellent embed experience
- **JSFiddle**: Simple iframe embed
- **YouTube**: Industry standard for embeds
- **Typeform**: Clean embed with attribution
- **Calendly**: Script tag embed

**Learn from**:
- Customization options
- Responsive design
- Clear attribution
- Easy copy-paste workflow

## Marketing Opportunities

**Promote Embeddability**:
- Blog post: "Embed DevOps simulators in your blog"
- Tweet: "Our games are now embeddable!"
- Add to docs: "How to embed"
- Reach out to DevOps bloggers
- Submit to educational resource lists

**Widget Showcases**:
- Create "Embed Gallery" page showing examples
- Showcase sites that embed our games
- Feature embedder of the month

## Related Features

- Share button (social media)
- Fullscreen mode
- Export results/screenshots
- Deep linking to specific game states

## Priority

Medium-High - This feature increases reach and drives traffic, but isn't blocking current user experience. Should be implemented after core games are stable.

## Labels

enhancement, SEO, growth, distribution

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature: Allow games and simulators to be embedded in external websites #666

Description

Motivation

Proposed Implementation

1. Iframe Embed

2. Script Tag Embed (Advanced)

3. Embed UI Components

4. Embed Settings Page

5. Analytics and Tracking

6. SEO and Link Juice

7. Security Considerations

Implementation Plan

Phase 1: Basic Iframe Embed

Phase 2: Embed Code Generator

Phase 3: Script Tag Embed

Phase 4: Analytics

UI/UX Design

Technical Considerations

Success Criteria

Example Embedding Sites

Competition Analysis

Marketing Opportunities

Related Features

Priority

Labels

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Feature: Allow games and simulators to be embedded in external websites #666

Description

Description

Motivation

Proposed Implementation

1. Iframe Embed

2. Script Tag Embed (Advanced)

3. Embed UI Components

4. Embed Settings Page

5. Analytics and Tracking

6. SEO and Link Juice

7. Security Considerations

Implementation Plan

Phase 1: Basic Iframe Embed

Phase 2: Embed Code Generator

Phase 3: Script Tag Embed

Phase 4: Analytics

UI/UX Design

Technical Considerations

Success Criteria

Example Embedding Sites

Competition Analysis

Marketing Opportunities

Related Features

Priority

Labels

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions