feat(site): rebuild the web on the original design, add a build estimator - #24
Open
Seungpyo1007 wants to merge 16 commits into
Open
feat(site): rebuild the web on the original design, add a build estimator#24Seungpyo1007 wants to merge 16 commits into
Seungpyo1007 wants to merge 16 commits into
Conversation
Split lib/ into app, data, domain, feature, and shared. Ship a curated TechAPI dump at assets/catalog/v1.json and compute TP Index from axis weights. Set applicationId to com.techpicks.app. Remove Rive and video assets. Ignore docs/ and coverage/.
The site had drifted from the design source in both structure and visual language. Rebuild the nine screens against TechPicks Web M3. Restore the application shell: a 216px sidebar, a sticky header with search and a sync control, the compare FAB, and the mobile tab bar. Desktop and mobile split on media queries rather than JavaScript so the server renders one HTML document. Move the palette to the design source's Industry ramp with Outfit and Noto Sans KR, and add dark mode. Leave shared/tokens/techpicks.css untouched: it is the application brand contract and the web deliberately differs. Parse CPUs and SoCs from the catalog, snapshot laptops from TechAPI, and widen comparison to phone, cpu and laptop with up to three products. The existing two-phone links keep working. TechAPI publishes normalised indices rather than raw benchmark scores, so keep the table layouts and relabel the units. docs/WEB_DESIGN_FIDELITY.md records the three deliberate deviations.
Measuring the rendered pages found the home hero unreadable in dark mode. Its background pins to --color-accent-900 while the ink followed --color-neutral-100, which flips light-to-dark with the theme, leaving a contrast ratio of 1.08. Keep the design source's palette and fix only the pairs that carry text. The hero and accent-filled controls now use tokens that do not follow the theme, accent-as-text resolves to accent-700 so it flips correctly, and the muted body colour moves from 50% to 68% of the text colour. Add scripts/audit-contrast.mjs so the check can be repeated, and define .sr-only, which the search box referenced without a rule. Every screen now passes AA in light, dark, and the forced dark toggle.
The brand lockup in the sidebar and on the login screen carried a hardcoded "Web beta 0.0.2" string, and the profile screen had a settings row whose only content was that same string. Remove all three and the now-unused .brand-version rule.
Pick a use case and a budget and the site proposes CPU and graphics card pairs, then derives what the rest of the machine has to satisfy. TechAPI carries no motherboards, memory, storage, power supplies or cases, so only the CPU and the graphics card are chosen as real products. The remaining parts appear as requirements computed from those two records: the socket, the memory standard, the PCIe generation and a recommended supply wattage. Nothing is invented. The catalog the application bundles holds laptop processors only, so the estimator reads its own snapshot. sync-desktop-parts.mjs narrows the two TechAPI indexes by product family before fetching, which keeps the refresh at about 550 requests instead of six thousand, then filters on the record fields. That yields 69 desktop processors and 101 graphics cards. Weights differ per use case, and the bottleneck check reads the axis that use case actually leans on: single-core for gaming, multi-core for rendering. Comparing a gaming build against multi-core would flag an eight-core X3D part as the bottleneck, which is wrong. The estimate lives in the query string so a link reproduces it. The sidebar grows from eight entries to nine, and the placeholder bookmark tile on the home screen gives up its slot.
Both workflows only fired on main, so a pull request into develop, the default branch, produced no check runs at all. The site job has no Android build and finishes in about two minutes, so it can afford to run on every develop pull request. flutter-ci keeps its release-only trigger. Record the deployment target in the handoff document while here.
Deploying with site/ as the project root uploads only that directory, so the build could not reach assets/catalog/v1.json or assets/logo at the repository root and failed on the first prebuild step. Snapshot the catalog into site/data/catalog.json the same way the laptop and desktop part lists already work, and let the brand sync fall back to the copies committed under public/brand when the source is absent. The application and the web have to rank products identically, so a CI step re-runs the sync and fails if the snapshot has drifted from the catalog the application bundles.
The tests import fixtures from shared/contracts at the repository root, which a site-rooted deployment never receives, so next build failed type checking before it could finish. Point the Next build at a tsconfig that excludes tests. pnpm typecheck and CI still check them against the full workspace.
The comparison and build screens read their snapshots through a path built at run time, which Next cannot trace statically, so the deployed functions ran without data files and answered every request with ENOENT. Name the snapshots in outputFileTracingIncludes so they travel with the functions. Static pages were unaffected because they read the files at build time.
Note the assigned origin, why it carries a suffix, and the two things a site-rooted deployment forces: the catalog snapshot and the traced data files.
The Android registration already matched the package the application ships, but iOS still carried the com.example.techpicks bundle identifier and the app it belonged to, so Firebase would have rejected the iOS build at runtime. Register com.techpicks.app on iOS and regenerate the configuration. The Crashlytics Gradle plugin comes with the regeneration; the application depends on firebase_crashlytics and the plugin was missing. google-services.json and GoogleService-Info.plist stay untracked. The Android workflow reads the Android file from FIREBASE_ANDROID_CONFIG_BASE64.
flutter_gemma_builtin_ai requires API 26 and the project was still on the Flutter default of 24, so assembleDebug failed at manifest merging. The failure only surfaced now because the Google Services step used to stop the build before it got this far. The floor cannot go lower while the application runs Gemini Nano on device. Android 7.0 and 7.1 are no longer install targets. With this the debug APK builds end to end for the first time.
The handoff still described the Firebase work as pending. Replace it with what is now true, including the verification that ran against the regenerated configuration and the two things still outside the CLI.
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
1 participant
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.
What
The
site/directory had drifted from the design source in both structure andvisual language. This rebuilds it against
TechPicks Web M3, fixes the textcontrast, and adds a desktop build estimator.
Commits
feat(site): rebuild the web on the original M3 designfix(site): raise text contrast to WCAG AAchore(site): drop the web beta labelfeat(site): add a desktop build estimator/buildci(site): run site checks on develop pull requestsThe first three commits on this branch (
fe977de,64a63cd,14c20d4,8e4c8ec) are earlier work that had not been pushed. They are also onfeat/app-web-monorepoif a smaller diff helps review.Notes
TechAPI publishes normalised indices rather than raw benchmark scores, and it
carries no motherboards, memory, storage, power supplies or cases. The screens
say so rather than inventing numbers.
docs/WEB_DESIGN_FIDELITY.mdrecordsevery deliberate deviation from the design source.
The build estimator reads its own snapshot because the catalog the application
bundles holds laptop processors only.
Verification
pnpm lint,pnpm typecheck,pnpm test(70 tests) andpnpm buildpass.The production build prerenders 154 phone pages and 40 processor pages.
Every screen passes WCAG AA in light and dark;
site/scripts/audit-contrast.mjsrepeats the check.
Not addressed here
Firebase is still registered against
com.example.techpicksrather thancom.techpicks.app, and theFIREBASE_ANDROID_CONFIG_BASE64secret is absent.That blocks the Android release path, not this branch.