FeaturesTemplatesShowcaseTownie
AI
BlogDocsPricing
Log inSign up
lightweight
lightweightglimpse2-runbook-test
Remix of lightweight/glimpse2-runbook
Public
Like
glimpse2-runbook-test
Home
Code
7
_townie
13
backend
7
frontend
1
shared
1
.vtignore
deno.json
H
main.tsx
Branches
3
Pull requests
Remixes
History
Environment variables
5
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
Code
/
_townie
/
12-embed.md
Code
/
_townie
/
12-embed.md
Search
9/3/2025
Viewing readonly version of main branch: v32
View latest version
12-embed.md

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 (

    Try the PDF viewer
    ); }

    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
Go to top
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Product
FeaturesPricing
Developers
DocsStatusAPI ExamplesNPM Package Examples
Explore
ShowcaseTemplatesNewest ValsTrending ValsNewsletter
Company
AboutBlogCareersBrandhi@val.town
Terms of usePrivacy policyAbuse contact
© 2025 Val Town, Inc.