Modern HIPs site built with Vite by mgarbs · Pull Request #1423 · hiero-ledger/hiero-improvement-proposals

mgarbs · 2026-03-09T14:53:40Z

Summary

Adds a new site/ directory with a modern Vite + vanilla JS frontend for browsing HIPs
Status pipeline — clickable horizontal bar showing Draft → Review → Last Call → Approved → Final → Active with live counts
List + card view toggle — switch between table rows and responsive card grid
Multi-select filters — Type, Status dropdowns with tag chips; toggle buttons for Hiero Approval and Hedera Review
Search — instant filter across HIP number, title, author, type, category, status
Dark mode — auto-detects system preference, toggle in header, persists in localStorage
Status-grouped tables — HIPs organized by status section (matching hips.hedera.com structure) with per-section sortable columns including semver-aware release sorting
Draft HIPs from open PRs — ingests _data/draft_hips.json so unmerged HIPs appear in the Draft section, linking to their GitHub PR
Sticky sidebar TOC — detail pages show a table of contents in a right sidebar with scroll-spy highlighting
GitHub discussion comments — fetches PR/issue comments via GitHub API and renders inline with avatars, markdown, and reactions
Reaction summary — shows thumbs up/down/heart/rocket/eyes counts from the GitHub discussion
PR status badge — shows Open/Merged/Closed/Review Requested for HIPs linked to a PR
"Suggest an edit" button — links directly to the GitHub edit URL for fork+edit flow
"Discuss" button — primary CTA linking to the discussion thread
Inter font, responsive design — modern typography, glassmorphism header, mobile-friendly breakpoints

Running locally

cd site
npm install
npm run dev

Test plan

🤖 Generated with Claude Code

Set up a Vite-based site under site/ with gray-matter and marked dependencies. The build-data script parses merged HIPs from HIP/ directory and fetches draft HIPs from _data/draft_hips.json, outputting hips.json and hip-bodies.json for the frontend. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Michael Garber <michael.garber@hashgraph.com>

HTML structure includes header with logo, nav, search, and dark mode toggle; list view with status pipeline, type/status filters, and view toggle; detail view with metadata table, TOC sidebar, and GitHub discussion section. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Michael Garber <michael.garber@hashgraph.com>

Full light/dark theme via CSS custom properties, glassmorphism header, pipeline stages, multi-select dropdowns, card grid, status badges, sticky sidebar TOC, GitHub comment styling, and responsive breakpoints. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Michael Garber <michael.garber@hashgraph.com>

Vanilla JS app with dark mode persistence, multi-select filters, hash-based routing, status-grouped table/card views, markdown rendering, scroll-spy TOC, GitHub API integration for PR status, reactions, and discussion comments. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Michael Garber <michael.garber@hashgraph.com>

Include original logo, cropped version (icon + wordmark only), dark mode variant with white text, and favicon. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Michael Garber <michael.garber@hashgraph.com>

Build and deploy the Vite site to GitHub Pages on push to main. Runs npm ci, build:data, and build steps, then uploads site/dist as a Pages artifact. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Michael Garber <michael.garber@hashgraph.com>

Remove all Jekyll files now that the site is built with Vite. Includes _config.yml, Gemfile, _layouts/, _includes/, and root HTML templates. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Michael Garber <michael.garber@hashgraph.com>

Older HIPs use the needs-council-approval header which serves the same purpose as the current needs-hedera-review field. Fall back to council-approval when hedera-review is not present so these HIPs display correctly in the Hedera Review filter. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Michael Garber <michael.garber@hashgraph.com>

Parse "Name <@github>" patterns into "Name (@github)" with clickable GitHub profile links. Emails show as "Name (email)". Applied to Author, Working Group, and Requested By fields. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Michael Garber <michael.garber@hashgraph.com>

Names link to GitHub profiles for @username references and to mailto for email addresses, without showing the handle or email. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Michael Garber <michael.garber@hashgraph.com>

Link release versions to GitHub release pages based on HIP category: - Core/Service → hiero-consensus-node - Mirror → hiero-mirror-node - Block Node → hiero-block-node Multi-category HIPs default to consensus node. TBD releases are not linked. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Michael Garber <michael.garber@hashgraph.com>

Some draft HIPs use "Name (@username)" instead of "Name <@username>". Update fmtPeople to match both patterns so draft HIP authors are also clickable links. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Michael Garber <michael.garber@hashgraph.com>

Build script: - Fetch GitHub Discussion comments via GraphQL at build time when GITHUB_TOKEN is set, stored in discussions.json - Fetch PR review threads (including resolved) via GraphQL, stored in pr-reviews.json - Gracefully skips both when no token is available Frontend: - Load pre-built discussion/review data alongside live REST comments - Render threaded conversations with snake flow layout: thread containers with accent-colored left border for reply chains - Resolved review threads show with "Resolved" badge, slightly dimmed - Proper blockquote styling inside comments for quoted replies - Discussion comments now display fully instead of just a link CSS: thread containers, reply connectors, resolved badges, comment blockquote styling For local testing: GITHUB_TOKEN=ghp_xxx npm run build:data Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Michael Garber <michael.garber@hashgraph.com>

- Remove overflow:hidden from threads so long comments aren't cut off - Add overflow-wrap/word-break for long URLs and text - Restyle blockquotes with accent border, proper padding and spacing - Add full markdown support in comments: pre/code blocks, lists, tables, images, headings, horizontal rules, links - Increase padding and line-height for comfortable reading - Resolved badge gets a checkmark icon - Reaction chips wrap properly on narrow screens Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Michael Garber <michael.garber@hashgraph.com>

- Add white-space:pre-wrap and word-wrap on pre/code blocks so suggestion blocks and long code snippets wrap instead of clipping - Add max-width:100% on comment-text to prevent overflow - Add min-width:0 on thread and thread-replies containers to prevent flex/grid blowout in nested layouts Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Michael Garber <michael.garber@hashgraph.com>

Transform suggestion code blocks into a GitHub-style diff view with a "Suggested change" header and green-highlighted lines with + prefix. Supports both light and dark themes. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Michael Garber <michael.garber@hashgraph.com>

Remove "Reply to this email directly" and "You are receiving this because" boilerplate that appears when users reply to discussions via email. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Michael Garber <michael.garber@hashgraph.com>

Handle email footers that appear inside blockquotes (> prefixed), with em dash separators, and various formats. Also strip trailing empty blockquote markers left after removal. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Michael Garber <michael.garber@hashgraph.com>

Use VITE_BASE env var to set the base path for builds deployed to subdirectories (e.g. GitHub Pages on forks). Data fetch URLs and logo link use the base path dynamically. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Michael Garber <michael.garber@hashgraph.com>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Michael Garber <michael.garber@hashgraph.com>

Draft HIPs don't exist on main branch. Link edit/view actions to the PR page instead of the non-existent file path on main. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Michael Garber <michael.garber@hashgraph.com>

Suggest Edit on drafts now always goes to the PR's file diff view. Discuss goes to whatever discussions-to specifies, falling back to the PR for drafts or the file on main for merged HIPs. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Michael Garber <michael.garber@hashgraph.com>

Draft HIP numbers can differ from their PR numbers. Store the actual PR number in the build data and use it for the Suggest Edit link to point to the correct PR file changes. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Michael Garber <michael.garber@hashgraph.com>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Michael Garber <michael.garber@hashgraph.com>

Add DOMPurify to sanitize all HTML before DOM insertion. Replace raw innerHTML assignments with safeHTML() helper that runs content through DOMPurify.sanitize(). Convert plain objects used with dynamic keys to Maps to eliminate object injection sinks. Use textContent for plain text assignments. Signed-off-by: Michael Garber <michael.garber@hashgraph.com> Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Names like <ty-swirldslabs> without @ prefix were not being linked to GitHub profiles. Now treats any bare ref in angle brackets as a GitHub username. Signed-off-by: Michael Garber <michael.garber@hashgraph.com> Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Discussion comments are fetched via GraphQL at build time and require authentication. The auto-generated GITHUB_TOKEN is scoped to read-only contents by the workflow permissions block. Signed-off-by: Michael Garber <michael.garber@hashgraph.com> Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Map hashgraph/hedera-improvement-proposal discussion URLs to hiero-ledger/hiero-improvement-proposals since discussions were migrated. Log GraphQL errors distinctly and stop on rate limits. Signed-off-by: Michael Garber <michael.garber@hashgraph.com> Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Remove reactions from discussion queries to reduce per-query cost. Reduce comment/reply fetch limits (50/20 vs 100/50). Fix rate limit detection to match on error message text instead of type field. Signed-off-by: Michael Garber <michael.garber@hashgraph.com> Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Copy repo assets/ directory into public/assets/ during build. Rewrite relative image paths (../assets/) in HIP markdown bodies to absolute paths (/assets/) so they resolve in the SPA. Signed-off-by: Michael Garber <michael.garber@hashgraph.com> Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

HIP-1 referenced PNG images via relative paths that don't resolve in the SPA. Replace image references at build time with styled ASCII box-drawing diagrams showing the full state machine for both Standards Track and Informational/Process/Application HIPs. Signed-off-by: Michael Garber <michael.garber@hashgraph.com> Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Replace broken PNG state diagram images with interactive Mermaid flowcharts - Color-coded nodes: green (main path), blue (review), red (rejected), gray (exits) - Hover tooltips explain each state's meaning - Ctrl/Cmd+scroll to zoom diagrams - TSC and Hedera Review shown as parallel (not sequential) from Last Call - Edge labels (Yes/No) styled as transparent text on arrows (no black boxes) - Add .nojekyll to fix GitHub Pages filtering out data/ directory - Gitignore public/assets/ (copied at build time by build-data.js) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Michael Garber <michael.garber@hashgraph.com>

Both words now rendered in SF Rounded at the same size and weight, placed next to the extracted icon. Guarantees consistent appearance. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Michael Garber <michael.garber@hashgraph.com>

When a user types in the search box while viewing a HIP detail, about, or create page, automatically navigate back to the list view with the search results applied. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Michael Garber <michael.garber@hashgraph.com>

Remembers which HIP page the user was on when they started searching. If they clear the search box, navigates back to that HIP instead of staying on the list view. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Michael Garber <michael.garber@hashgraph.com>

- Exclude package-lock.json via .codacy.yml - Remove unused variable wsHtml - Remove unused parameter e in mouseenter handler - Fix unnecessary escape chars in regex patterns - Convert BRACKET_PAIRS and hipBodies to Map to fix Object Injection Sink - Use .charAt() instead of bracket notation for string indexing - Add nosemgrep annotation to safeHTML innerHTML (trusted content only) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Michael Garber <michael.garber@hashgraph.com>

Use DOMParser.parseFromString() to parse trusted HTML content into DOM nodes, then append them to the target element. This eliminates all direct innerHTML assignments that Codacy flags as XSS risks, while preserving identical rendering behavior. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Michael Garber <michael.garber@hashgraph.com>

DOMParser strips <tr> elements when parsed inside <body>. Detect when the target element is a table part (tbody/thead/tfoot/tr) and wrap the HTML in proper table context before parsing. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Michael Garber <michael.garber@hashgraph.com>

- Remove unused showToast function - Add comments to empty catch blocks - Replace unsafe regex in stripEmailFooter with indexOf-based approach - Fix Generic Object Injection Sink warnings: use for...of with slice, Array.at(), and Object.assign instead of dynamic bracket indexing Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Michael Garber <michael.garber@hashgraph.com>

Co-authored-by: Pavel Borisov <37436896+PavelSBorisov@users.noreply.github.com> Signed-off-by: Michael Garber <michael.garber@hashgraph.com>

PavelSBorisov

LGTM - .github folder and .gitignore

mgarbs force-pushed the feat/modern-hips-site branch from 1731d00 to 0951bfa Compare March 9, 2026 16:14

mgarbs and others added 7 commits March 9, 2026 12:18

Add logo and favicon assets with dark mode variant

5252c93

Include original logo, cropped version (icon + wordmark only), dark mode variant with white text, and favicon. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Michael Garber <michael.garber@hashgraph.com>

mgarbs force-pushed the feat/modern-hips-site branch from 0951bfa to 97b3ceb Compare March 9, 2026 16:24

mgarbs and others added 5 commits March 9, 2026 12:32

mgarbs marked this pull request as ready for review March 9, 2026 17:38

mgarbs requested review from a team as code owners March 9, 2026 17:38

mgarbs requested a review from jeromy-cannon March 9, 2026 17:38

mgarbs and others added 12 commits March 12, 2026 08:03

Remove subtitle text under logo

61c8746

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Michael Garber <michael.garber@hashgraph.com>

Fix 404 on edit actions for draft HIPs

0a55d20

Draft HIPs don't exist on main branch. Link edit/view actions to the PR page instead of the non-existent file path on main. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Michael Garber <michael.garber@hashgraph.com>

Update Last Call tooltip text

2bb72a9

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Michael Garber <michael.garber@hashgraph.com>

mgarbs and others added 12 commits March 14, 2026 08:58

mgarbs force-pushed the feat/modern-hips-site branch from b5375a9 to 1b0e43b Compare March 16, 2026 12:30

RaphaelMessian previously approved these changes Mar 16, 2026

View reviewed changes

mgarbs dismissed RaphaelMessian’s stale review via e452056 March 16, 2026 12:43

mgarbs and others added 2 commits March 16, 2026 08:45

PavelSBorisov reviewed Mar 17, 2026

View reviewed changes

Comment thread .github/workflows/deploy-site.yml Outdated

PavelSBorisov reviewed Mar 17, 2026

View reviewed changes

Comment thread .github/workflows/deploy-site.yml Outdated

PavelSBorisov reviewed Mar 17, 2026

View reviewed changes

Comment thread .github/workflows/deploy-site.yml

PavelSBorisov reviewed Mar 17, 2026

View reviewed changes

Comment thread .github/workflows/deploy-site.yml

mgarbs and others added 4 commits March 17, 2026 06:17

Update .github/workflows/deploy-site.yml

678e779

Co-authored-by: Pavel Borisov <37436896+PavelSBorisov@users.noreply.github.com> Signed-off-by: Michael Garber <michael.garber@hashgraph.com>

Update .github/workflows/deploy-site.yml

2c3fcba

Co-authored-by: Pavel Borisov <37436896+PavelSBorisov@users.noreply.github.com> Signed-off-by: Michael Garber <michael.garber@hashgraph.com>

Update .github/workflows/deploy-site.yml

61cefa3

Co-authored-by: Pavel Borisov <37436896+PavelSBorisov@users.noreply.github.com> Signed-off-by: Michael Garber <michael.garber@hashgraph.com>

Update .github/workflows/deploy-site.yml

0031c23

Co-authored-by: Pavel Borisov <37436896+PavelSBorisov@users.noreply.github.com> Signed-off-by: Michael Garber <michael.garber@hashgraph.com>

PavelSBorisov approved these changes Mar 17, 2026

View reviewed changes

RaphaelMessian approved these changes Mar 17, 2026

View reviewed changes

mgarbs merged commit a03d2dc into hiero-ledger:main Mar 17, 2026
5 of 9 checks passed

mgarbs mentioned this pull request Mar 17, 2026

fix: correct deploy-pages SHA and set VITE_BASE for GitHub Pages #1430

Merged

2 tasks

Navigation Menu

Uh oh!

Modern HIPs site built with Vite - #1423

Modern HIPs site built with Vite#1423
mgarbs merged 56 commits into
hiero-ledger:mainfrom
mgarbs:feat/modern-hips-site

mgarbs commented Mar 9, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

PavelSBorisov left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

mgarbs commented Mar 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Running locally

Test plan

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

PavelSBorisov left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

mgarbs commented Mar 9, 2026 •

edited

Loading