Skip to content

feat: add /docs/api page with interactive Swagger UI - #200

Closed
SpikeyCoder wants to merge 2 commits into
mainfrom
feat/api-docs-page
Closed

feat: add /docs/api page with interactive Swagger UI#200
SpikeyCoder wants to merge 2 commits into
mainfrom
feat/api-docs-page

Conversation

@SpikeyCoder

Copy link
Copy Markdown
Owner

What

Adds a public /docs/api page that renders the FunderMatch OpenAPI spec as interactive Swagger UI documentation.

How it works

ApiDocsPage.tsx constructs a self-contained HTML document that loads Swagger UI from the unpkg CDN and points it at the OpenAPI spec at:

https://tgtotjvdubhjxzybmdex.supabase.co/functions/v1/public-api/openapi.json

This HTML is rendered inside a sandboxed blob-URL iframe, which means:

  • Zero bundle impact — no swagger-ui-react dependency (would add ~1.5 MB to the JS bundle). The ApiDocsPage chunk is only 3.3 KB.
  • No CSS conflicts — Swagger UI's CSS reset is isolated inside the iframe and cannot affect the host page's dark theme.
  • Full interactivity — "Try it out" buttons, bearer token auth input, endpoint expansion, and search filtering all work.

Files changed

File Change
src/pages/ApiDocsPage.tsx New page component
src/App.tsx Added lazy-loaded /docs/api route (public, no AuthGuard)
index.html Added frame-src blob: to CSP for the iframe
src/components/Footer.tsx Added "API Docs" link

Page features

  • NavBar + Footer for consistent navigation
  • Intro section explaining the API and linking to Settings for API key creation
  • "Raw OpenAPI Spec" link opening the JSON in a new tab
  • Swagger UI with:
    • Endpoint listing with descriptions
    • Request/response schemas
    • "Try it out" functionality
    • Bearer token authentication input
    • Color-coded HTTP methods
    • Search/filter bar
    • Deep linking support

Build verification

  • tsc -b — passes cleanly
  • vite build — passes cleanly, ApiDocsPage chunk is 3.3 KB

CSP note

Added frame-src blob: to allow the blob-URL iframe. This is a minimal, safe CSP addition — blob URLs can only be created by same-origin scripts (our own bundled code), so no external content can inject frames.

Adds an interactive API documentation page at /docs/api that renders
the FunderMatch OpenAPI spec using Swagger UI loaded from the unpkg CDN.

- New page: src/pages/ApiDocsPage.tsx
  - Loads Swagger UI via a sandboxed blob-URL iframe (avoids bundling
    the 1.5 MB swagger-ui-react dependency)
  - Includes intro header, "Get an API Key" CTA, and raw spec link
  - Public route — no authentication required
- Route: added lazy-loaded /docs/api route in App.tsx
- CSP: added frame-src blob: directive in index.html
- Footer: added "API Docs" link
@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying funder-finder with  Cloudflare Pages  Cloudflare Pages

Latest commit: a2b782b
Status: ✅  Deploy successful!
Preview URL: https://42745445.funder-finder.pages.dev
Branch Preview URL: https://feat-api-docs-page.funder-finder.pages.dev

View logs

@SpikeyCoder

Copy link
Copy Markdown
Owner Author

Merged into PR #199 per owner request. Closing this PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant