Embed plugins load external scripts eagerly on module import

Problem

The InstagramPlugin and TwitterPlugin in @hive/renderer load their external embed scripts (embed.js, widgets.js) immediately when the plugin is instantiated, not when an embed is actually found in content.

This causes:

  1. Unnecessary network requests on pages that don't contain any embeds
  2. CSP violations on pages where these scripts aren't needed
  3. Privacy concerns - external scripts are loaded even when user hasn't interacted with any embed

Root Cause

In packages/renderer/src/renderers/default/plugins/InstagramPlugin.ts:35-39:

constructor() {
    if (typeof window !== 'undefined') {
        this.loadInstagramScript();  // Loads immediately!
    }
}

The renderer is configured with plugins at module level in apps/blog/features/post-rendering/lib/renderer.ts:23:

plugins: [new TwitterPlugin(), new InstagramPlugin(), new TablePlugin()],

Example

Visiting /trending/hive-139531 (a community trending page) triggers Instagram embed.js loading because:

  1. Community pages use CommunityLayout → CommunityDescription → RendererContainer
  2. RendererContainer imports the renderer module
  3. Module evaluation instantiates InstagramPlugin
  4. Constructor loads the script

No Instagram content exists on that page.

Proposed Solution

  1. Lazy-load scripts - Only load external scripts when an embed is actually detected in content
  2. Opt-in loading - Consider a privacy-first approach where embeds show a placeholder until user clicks to load

Privacy-First Approach (Optional Enhancement)

For privacy-conscious users, embeds could:

  1. Show a static placeholder with "Click to load Instagram/Twitter content"
  2. Only load external scripts after explicit user consent
  3. This prevents tracking by third-party embed scripts

Files Affected

  • packages/renderer/src/renderers/default/plugins/InstagramPlugin.ts
  • packages/renderer/src/renderers/default/plugins/TwitterPlugin.ts