feat(feature-flags): add local-eval cost calculator to docs#17008
Open
jakesciotto wants to merge 13 commits into
Open
feat(feature-flags): add local-eval cost calculator to docs#17008jakesciotto wants to merge 13 commits into
jakesciotto wants to merge 13 commits into
Conversation
Embeds an interactive calculator on /docs/feature-flags/local-evaluation that compares remote-only vs mixed local-eval monthly cost. Inputs: monthly requests, eval mode, server fleet size, poll interval, server-side share. Pulls live billing tiers with a hardcoded fallback.
5 tasks
Contributor
Deploy preview
|
Contributor
|
Vale prose linter → found 4 errors, 8 warnings, 0 suggestions in your markdown Full report → Copy the linter results into an LLM to batch-fix issues. Linter being weird? Update the rules!
|
| Line | Severity | Message | Rule |
|---|---|---|---|
| 15:12 | warning | Capitalize 'Feature Flags' for PostHog's product. Use 'feature flags' for the general industry concept. | PostHogBase.ProductNames |
| 23:147 | error | Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. | PostHogBase.EnDash |
| 23:227 | error | Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. | PostHogBase.EnDash |
| 39:222 | error | Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. | PostHogBase.EnDash |
| 65:22 | warning | Capitalize 'Feature Flags' for PostHog's product. Use 'feature flags' for the general industry concept. | PostHogBase.ProductNames |
| 71:41 | warning | Capitalize 'Feature Flags' for PostHog's product. Use 'feature flags' for the general industry concept. | PostHogBase.ProductNames |
| 73:39 | warning | Capitalize 'Feature Flags' for PostHog's product. Use 'feature flags' for the general industry concept. | PostHogBase.ProductNames |
| 73:187 | warning | Capitalize 'Feature Flags' for PostHog's product. Use 'feature flags' for the general industry concept. | PostHogBase.ProductNames |
| 79:53 | warning | Capitalize 'Feature Flags' for PostHog's product. Use 'feature flags' for the general industry concept. | PostHogBase.ProductNames |
| 336:105 | error | Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. | PostHogBase.EnDash |
| 342:31 | warning | Capitalize 'Feature Flags' for PostHog's product. Use 'feature flags' for the general industry concept. | PostHogBase.ProductNames |
| 350:110 | warning | 'ANDs' is a possible misspelling. | PostHogBase.Spelling |
jakesciotto
added
the
no-cache
Gatsby resolves `.js` before `.ts` (gatsby-node.ts:88), so the previous registration in `mdxGlobalComponents.ts` was never loaded and the MDX tag rendered as an empty div. Generated-By: PostHog Code Task-Id: c52f2f47-fb77-4a14-bdad-24bf7a2f1213
Register FeatureFlagCostCalculator in the live mdxGlobalComponents.js (webpack resolves .js before .ts, so the .ts copy was unreachable). UI: numeric input for monthly requests, compact pill toggle for mode, 2-col grid for local-eval settings. Generated-By: PostHog Code Task-Id: 2c405e83-a623-4904-b3f5-76451f254c92
Linear scale crowded the left side. Log scale spreads marks evenly across 1-5000 servers and 10-3600s poll intervals. Generated-By: PostHog Code Task-Id: 2c405e83-a623-4904-b3f5-76451f254c92
- Move calculator earlier in the page, right after the cost-effective paragraph and before the 3-step setup, so it accompanies the pricing discussion instead of interrupting Step 2. - Replace the inline <hr> divider with a bordered results sub-card. - Add numeric inputs for fleet size, poll interval, and server-side share via a reusable NumericField component. - Adopt the pricing page input style (font-code, border-light / hover:border-button, focus:border-red dark:focus:border-yellow, rounded-sm) so the calculator feels native to the site. Generated-By: PostHog Code Task-Id: 2c405e83-a623-4904-b3f5-76451f254c92
Drop the bordered card. Use an inline header with a Toggle for local evaluation (matching the pricing page annual-discount toggle), a grid-style row layout per input (label / slider / numeric input), and an accent-tinted summary bar with a single headline cost. Switch to components/Tooltip so the calculator uses the same tooltip component the pricing calculator does. Generated-By: PostHog Code Task-Id: 2c405e83-a623-4904-b3f5-76451f254c92
Restructure the calculator to show the remote vs local trade-off directly: - Move slider input above the slider so it no longer competes for row width (fixes mobile overflow). - Replace the toggle with two cost cards rendered side-by-side, stacking on narrow containers via @container queries. - Collapse fleet size, poll interval, and server-side share behind a disclosure with sensible defaults so the headline view is clean. - Bump default monthly requests to 10M so the default state demonstrates savings. - Wrap the whole component in a bordered card; use project color tokens. Generated-By: PostHog Code Task-Id: 6f28006e-8e2f-4966-81cf-951d77d9a7fd
Author
|
wrestling with the styling a bit but if you smash that preview button and go to the local eval page for ff check out what it looks like and let me know if you like the concept / location @danazou @ceyniustranberg @steventruong @concernedsebster @phildelgobbo |
Widen value input to w-32 so 10-digit request counts fit. Always reserve a fixed-width suffix slot so the right edge of each input lines up across rows with and without a suffix. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Move the border from the input to a wrapper span so the suffix sits inside the same fixed-width pill as the value. The pill's right edge is now flush across all rows, eliminating the floating gap when a row has no suffix. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Rounder corners, sans font, theme-token borders, solid surface. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Reset native input chrome (appearance-none, border-0, p-0). Fixed wrapper to h-8 for compact, uniform height. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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.
Changes
Embeds an interactive calculator on
/docs/feature-flags/local-evaluationthat compares remote-only vs mixed local-eval monthly cost. Inputs: monthly requests, eval mode, server fleet size, poll interval, server-side share. Pulls live billing tiers with a hardcoded fallback.Replaces #17004 (fork branch → same-repo branch so Vercel preview runs).
Checklist
vercel.json