PolicyEngine / PolicyEngine/policyengine-app-v2

Dedupe MarkdownFormatter into a shared package

Open
#990 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
HTML
Stars
1
Forks
3
Avg merge
1d 50m
Merged PRs (30d)
39

Description

Context

The repo currently maintains two near-duplicate copies of MarkdownFormatter.tsx:

  • app/src/components/blog/MarkdownFormatter.tsx (Vite / legacy)
  • website/src/components/blog/MarkdownFormatter.tsx (Next.js)

Several recent bugs existed only in one copy:

  • #981 — stale useEffect dependencies (app/ only)
  • #982 — HighlightedBlock parts[1] crash (both, fixed in the bug-audit batch)
  • #988 — unsafe as any type assertions (app/ only)
  • #989 — <a> href not routed through isSafeHref (app/ only)

A drift check (scripts/check-markdown-drift.ts) was added in the bug-audit batch to catch top-level API divergence, but the real fix is to extract the shared component into a package consumed by both sub-apps.

Plan

  1. Create a new workspace package (e.g. packages/blog) exporting MarkdownFormatter, HighlightedBlock, PlotlyChartCode, blog styles, useDisplayCategory, LazyPlot.
  2. Factor out sub-app-specific dependencies (e.g. OptimisedImage in app/) via a small props/context surface so the shared component is framework-agnostic.
  3. Replace both app/src/components/blog/MarkdownFormatter.tsx and website/src/components/blog/MarkdownFormatter.tsx with re-exports from the shared package.
  4. Delete scripts/check-markdown-drift.ts and its PR check once dedup is complete.

Notes

  • Keep the "use client" pragma in the website adapter (Next.js RSC requirement).
  • safeHref helper (from #989) should live alongside the shared component.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by comparing app/src/components/blog/MarkdownFormatter.tsx and website/src/components/blog/MarkdownFormatter.tsx, then read scripts/check-markdown-drift.ts and the references to the listed exports. Design the shared packages/blog API and adapters around the app-specific dependencies. Done means both sub-apps consume one implementation, safeHref is shared, and the drift check and PR check are removed.

Written by the indexing model from the issue text.

Assessment

Tech stack
next.js, react, typescript, vite
Domain
build-system, frontend, web-dev
Issue type
Refactor
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.