Repository navigation
MeterX 2027.0.0 - #96
Merged
Merged
Conversation
Split the extension into background/, lib/ and pages/, move the version, API constants and share links into @meterx/shared, and give the popup, side panel and settings page one design system. The Express server now streams test files and drains uploads instead of buffering them. Also fixes the extension build, which still pointed at the old entry files, and clears dist/ before each build.
The PDF report's stylesheet was injected into the popup page, so the popup was restyled until the file saved. Render it in an off-screen iframe instead, sized to its content so the PDF has no blank trailing page. Fit the popup inside Chrome's 600px limit, stop strip figures overflowing, shorten the readiness verdicts so labels are not truncated, and keep the side panel readable down to 320px.
The PDF is now drawn as vector text and shapes in the app's light design instead of a screenshot of an HTML page: summary, latency under load, readiness, plan comparison, a trend chart and a results table that continues across pages. html2canvas is dropped and jsPDF's optional extras are kept out of the bundle, halving popup.js and sidepanel.js. CSV and JSON share one column list with units in the names, rounded numbers, local time and quality per row. JSON gains a versioned format and a summary.
…fits the window The root package.json is now the only version: shared exports it, the settings footer reads it and the build stamps it into the manifest. Workspace packages and the static manifest no longer carry copies. The PDF gets a faint brand watermark and a Report ID, a SHA-256 fingerprint of the measurements, on every page. The side panel fills the window and only the results list scrolls, so the summary, chart and plan stay in view. Export file names use the browser's local date.
Running a test from the side panel now shows it in place: the summary card switches to the running figures and elapsed time, the heading names the phase, and a progress line runs under the header. The phase timing is shared with the popup. Empty values use a plain hyphen, the extension is named "MeterX by ajithakdev", the results columns are evenly spaced, and same-day charts label times in the browser's own clock format.
Empty figures show a short muted bar and hide their unit (keeping its space) instead of a hyphen next to Mbps. With an ISP plan set the side panel overflowed; plan rows now carry their percentage on one line, the status moved into the Results header, short panels get tighter cards and a shorter chart, and the chart redraws on resize.
…e site Quality grades, use-case scoring and their words move to @meterx/shared so the product site and the extension use one copy. The worker's CORS now also answers https://meterx.ajithakdev.com and localhost dev ports, for the site's in-page quick test.
The X-on-a-dial mark replaces the gauge in the toolbar icon, the app header, the PDF and the site. brand/build.mjs generates icons, store tiles, marquee, social cards and store screenshots from it; earlier options are kept in brand/alternates. packages/site is the product site: a home page with a live quick test, a speed explorer, real screenshots, the test phases, install links and answers, plus about, privacy, the share viewer and /get.
The hero now pairs the headline and two actions with the real popup, and the quick test reports on a reserved line so nothing moves. Feature rows use the full width, the test phases are one proportional bar with four steps, and the report screenshot shows the new mark. A quick test that finishes inside the warm-up window no longer reports 0 Mbps.
…packaging apps/extension and apps/site are what people use, services/worker and services/server are the backends, packages/shared is the contract they all import. npm run package builds one zip for Chrome, Edge and Opera, one for Firefox (sidebar, background script and the listing's id) and a source archive for Firefox review.
…terx/shared The PDF, CSV and JSON builders and their stats become @meterx/reports, a pure package the extension and the site can both use. Formatting, the median, the load grade and plan share move into @meterx/shared. The extension keeps only the browser parts: reading the saved plan and starting downloads.
The site now hosts the extension's own popup, side panel and settings in demo mode: a shim stands in for the extension APIs with labelled sample data. On the home page the scroll drives the real popup through a test while a phase log follows it. How it works, Features and Questions are their own pages, the header and footer are shared partials, and the footer is one compact row. The Edge listing link is filled in.
… new layout CLAUDE.md and the code map describe apps, services and packages; scripts/codemap.mjs regenerates the file table. The worker URL lives once in @meterx/shared. README, RESOURCES-AND-GUIDE and the privacy pointer match the renamed repo, the site and the store packaging, and docs/SEO.md covers the site.
…demo polish Get MeterX puts every store on the brand's dial and points the needle at the visitor's browser, with live and upcoming listings and their logos (Simple Icons, CC0). Questions open in a side panel with a read-more link and a help card. How it works shows each phase's share of the test above its text and compares ping under load on a grade C and a grade A line. The demo answers the server check itself, the settings frame takes its page's height, and the header uses the theme-coloured mark.
Live repo stats, open good first issue and help wanted issues, and the contributors list come from the public GitHub API, cached for the visit, with plain links when the API is unavailable. The CSP allows the API and avatar hosts. CONTRIBUTING.md shows the current layout, and the logo link reads as MeterX home.
… demo On phones the hero is no longer pinned: headline, intro and actions come first and the popup plays its sample test when it comes into view. The header keeps the brand, the action and a Menu button that opens the links. Side panel demos lay out at full height on phones so the frame never scrolls inside itself, and figures lose their default margins.
…cuments Contribute joins the header links. Good places to start becomes a heading row with its action and a two-column issue grid. About and Privacy use the full page width with an on-page contents list, bullets are back, and the privacy policy mentions the GitHub API requests the Contribute page makes.
…lose section The hero pins just under the header and starts a short gap below it, with a smaller popup on short windows so all of it stays in view; the section after it no longer adds a second gap. Side panel demos stay pinned while their text scrolls past on desktop. A stray brace that disabled the closing section's grid on phones is gone.
The dial sits on the left with only the mark in its centre and a ring that flows slowly (still under reduced motion), and stays pinned while the heading, the available stores and the upcoming ones stack on the right. Phones keep the dial above the list.
The text beside a pinned side panel now starts lower and rises past it; the pin lets go when the last line lines up with the panel's bottom, so the column beside the panel never runs empty.
…ones full width The top row pairs a smaller dial with the heading and the stores that are live; Coming next returns to a full-width grid below.
The text beside a side panel sits centred against it with no pinning, like the Reports row, and the first section after a page heading follows it closely.
…eight Demo frames turn scrolling off and their pages hide overflow, so a fractional browser zoom can no longer show scrollbars on them. Very tall windows (as when zoomed out) skip the pinned hero, which would otherwise leave a mostly empty stage. On desktop the side panel draws at 88, 80 or 70 percent depending on window height, so its whole section fits on one screen, with the caption right under it.
The pinned stage is a full window tall while its content is shorter; the home script measures that leftover space and pulls the next section up into it, leaving a normal 64 px gap at any window height.
npm run dev:site builds and serves the site on :8788. npm run dev:ext builds the extension, runs the worker on :8787 and opens Chromium with MeterX loaded in a separate test profile.
… MeterX indexable; deploy builds the extension first
Owner
Author
Timeline of the work on this branch40 commits, grouped in the order they landed. 1. Extension restructure and redesign 2. Exports, version and live test view 3. Side panel polish 4. Brand and first site 5. Repo layout 6. Site pages 7. Site layout fixes, signed off 8. Local testing 9. Wrap up |
Owner
Author
Pre-merge checklistAddressed
Tested
CI and release
Docs
After merge
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
MeterX 2027.0.0, the major release planned for Sunday 2026-10-25.
apps/(extension, site),services/(worker, server),packages/(shared, reports).npm run package) and local test commands (npm run dev:ext,npm run dev:site).Tested locally by the owner: the site and the extension end to end. Build, lint, type checks and all tests pass.
Nothing deploys on merge. After merging: tag, worker deploy, first site deploy, then store uploads. The steps are in
docs/STATE.md.