Complete Instructions for Implementing PDF Embed Handling in BlockRenderer.tsx

Objective

Update the embed case in /frontend/components/BlockRenderer.tsx to handle PDF embeds from glance-pdf-embed.val.run with special rendering while maintaining fallback for other embed types.

Exact Implementation Steps

  1. Locate the target code: Find the case 'embed': block in the switch statement (around lines 333-343)

  2. Replace the entire case block with this exact code:

    case 'embed': const url = blockData?.url || '';

    // handle the special case of the PDF embed, which rewrites the placeholder embed as a PDF link // note that the slug below builds a link to the PDF at /demo/:id/pdf // and has the Glance className to render it in the Glance PDF viewer: a.pdf if (url.includes("glance-pdf-embed.val.run")) { const slug = [location.pathname, "pdf"].join("/"); return (

    ); }

    return (

    Embedded content: {url}

    {renderChildren()}
    );

Key Requirements

  • Preserve existing classes: Must include pdf pdf-download-btn classes
  • URL detection: Check if url.includes("glance-pdf-embed.val.run")
  • Dynamic routing: Build PDF link as [location.pathname, "pdf"].join("/")
  • Tailwind styling: Use standard primary button classes with focus ring
  • Fallback behavior: Maintain existing generic embed rendering for non-PDF embeds
  • Structure: PDF case returns early, generic case handles renderChildren()

Expected Behavior

  • PDF embeds from glance-pdf-embed.val.run render as blue button linking to /current-path/pdf
  • All other embeds render with existing gray box + link display
  • Button has proper hover and focus states for accessibility
  • Existing functionality dependent on pdf pdf-download-btn classes preserved