Replace static DDEV usage-stats post with a live Amplitude page, fixes #671 by rfay · Pull Request #672 · ddev/ddev.com

rfay · 2026-07-15T15:49:12Z

Summary

Fixes Blog request: DDEV Live Usage Statistics (update?) #671

Adds src/pages/usage-stats.astro, fetching live chart data from Amplitude's Dashboard REST API and ad hoc Events Segmentation API at build time (src/lib/amplitude.ts), following the same env-var-gated, disk-cached, gracefully-degrading pattern src/lib/api.ts already uses for GitHub stats.
Fixes a real bug found along the way: the saved "Usage by Architecture" chart had no OS filter at all, silently mixing in Linux/Windows amd64 hosts where it was supposed to be a macOS-only Apple Silicon vs. Intel split. Replaced with a properly darwin-filtered query.
Removes the obsolete stats-on-ddev-usage-nov-2024 post and its exclusive images, adds a 301 redirect, and fixes the two posts that linked to it.
Updates the Amplitude contributor-training post with a modifiedDate/modifiedComment pointing at the new live page.
Wires AMPLITUDE_API_KEY/AMPLITUDE_SECRET_KEY into test.yml via the existing 1Password service-account pattern (matching CF_API_TOKEN's setup), so PR builds exercise the live fetch path; skipped for forked PRs since GitHub Actions doesn't expose secrets to those anyway.

Test plan

Review at https://20260715-usage-stats-amplitu.ddev-com-front-end.pages.dev/usage-stats/

And https://20260715-usage-stats-amplitu.ddev-com-front-end.pages.dev/about/

Compare against previous blog for migration status
Compare against live Amplitude dashboard for correctness and usefulness
ddev npm run build succeeds and renders all sections with live data
ddev prettier / ddev textlint clean
Verified live numbers against directly-queried Amplitude values (chart CSV export + ad hoc segmentation API)
AMPLITUDE_API_KEY/AMPLITUDE_SECRET_KEY need to be added to Cloudflare Pages' production environment variables before this will show live data in production (falls back to a "not configured" notice otherwise)
Manual visual/dark-mode check in a browser (not verified in this environment — no browser automation tool was available)

🤖 Generated with Claude Code

…d page,fixes #671 Adds src/pages/usage-stats.astro, fetching live chart data from Amplitude's Dashboard REST API and ad hoc Events Segmentation API at build time (src/lib/amplitude.ts), following the same pattern src/lib/api.ts already uses for GitHub stats: env-var-gated, cached to disk, gracefully degrades when credentials aren't configured. Fixes a real bug found along the way: the saved "Usage by Architecture" chart had no OS filter at all, silently mixing Linux/Windows amd64 hosts into what was supposed to be a macOS-only Apple Silicon vs. Intel split. Replaced with a properly darwin-filtered query. Removes the obsolete nov-2024 post and its exclusive images (301 redirect added), fixes the two posts that linked to it, and adds a modifiedDate to the Amplitude contributor-training post pointing at the new page. Wires AMPLITUDE_API_KEY/AMPLITUDE_SECRET_KEY into test.yml via the existing 1Password service-account pattern (matching CF_API_TOKEN's setup) so PR builds exercise the live fetch path; skipped for forked PRs since GitHub Actions doesn't expose secrets to those anyway. Fixes #671 🤖 Developed with assistance from [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>

cloudflare-workers-and-pages · 2026-07-15T15:58:58Z

Deploying ddev-com-front-end with Cloudflare Pages

Latest commit:	`8c7b6c4`
Status:	✅ Deploy successful!
Preview URL:	https://d76f7f87.ddev-com-front-end.pages.dev
Branch Preview URL:	https://20260715-usage-stats-amplitu.ddev-com-front-end.pages.dev

View logs

stasadev

Wow, this looks great!

I see some issues with image labels in dark mode, the text is black and unreadable - I'll take a look.

… CTA Filters out rows with 0 usage in the selected period (toPercentageRows) — these were previously-active entries that just happened to be zero in whichever single column got picked, not genuinely unused. Also excludes known-stale values that shouldn't appear: WSL2 Docker Providers "(none)", and the long-abandoned "python"/"django4" CMS project types. Expands CMS Project Types to show all types (was capped at top 8) and DDEV Commands to show 18 (was 8) — verified the additional commands are all recognized official subcommands, not leaked custom command names. Adds a full, dynamically-updated add-on usage list as a foldable <details> section on the main page (no separate page, no JS), plus a CSV download endpoint at /usage-stats/add-ons.csv. Drops the percentage column from the add-on list per feedback that it isn't useful there. Adds a sponsor CTA at the bottom of the page. 🤖 Developed with assistance from [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>

Pulls monthly sponsorship income from ddev/sponsorship-data's daily history snapshots (public, no credentials needed) and plots it with the same trend chart used for usage growth. Dynamically pulls the current sponsorship goal (target amount and progress percentage) from the live sponsorship-data feed already used elsewhere on the site, both in the section's prose and as a marked goal line on the chart, so it stays correct as the goal or progress changes. Generalizes UsageTrendChart with optional ariaLabel/tooltipUnit/ valuePrefix/goalValue/goalLabel props (defaults unchanged) so the same component works for dollars as well as user counts. 🤖 Developed with assistance from [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>

…e Type sections Adds a SectionHeading component that gives every section on /usage-stats a stable #slug anchor, matching the self-link pattern blog post headings already get from rehype-autolink-headings (which doesn't apply here since this page isn't markdown-rendered). Adds PHP Version and Database Type breakdowns, sourced from Amplitude's "Project" event properties. These needed a different ad hoc query shape than the rest of the page: properties scoped to a single event type require an inline group_by in the event definition rather than the top-level `g` param used for the macOS-architecture query, which only works for Amplitude's built-in cross-event properties. Generalizes getMacosArchitecture's return type (renamed ArchitectureBreakdown -> PropertyBreakdown) and factors out the shared query/parse logic into getProjectPropertyBreakdown(). 🤖 Developed with assistance from [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>

PHP Version was capped at UsageStatBars' default limit of 8, hiding the long tail. Also excludes "(none)" (not a real PHP version choice, same treatment as Database Type and every other "(none)" row on this page) which had started showing up once the section was uncapped. 🤖 Developed with assistance from [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>

stasadev · 2026-07-15T18:16:17Z

+---
+
+<h2 id={slug} class="text-2xl font-bold dark:text-white scroll-mt-24">
+  <a href={`#${slug}`} class="hover:underline">


We don't use hover:underline in the blogs.

I.e. https://ddev.com/blog/ddev-xdebug-quickstart-phpstorm/#watch-the-video

We need a consistency: either to have it everywhere or not to use it at all.

stasadev · 2026-07-15T18:37:42Z

+const environment = await getAmplitudeChart(AMPLITUDE_CHARTS.environment)
+const commands = await getAmplitudeChart(AMPLITUDE_CHARTS.commands)
+const cmsProjectTypes = await getAmplitudeChart(
+  AMPLITUDE_CHARTS.cmsProjectTypes
+)
+const macosDockerProviders = await getAmplitudeChart(
+  AMPLITUDE_CHARTS.macosDockerProviders
+)
+const wsl2DockerProviders = await getAmplitudeChart(
+  AMPLITUDE_CHARTS.wsl2DockerProviders
+)
+const macosArchitecture = await getMacosArchitecture()
+const phpVersions = await getPhpVersions()
+const databaseTypes = await getDatabaseTypes()
+const addOns = await getAmplitudeChart(AMPLITUDE_CHARTS.addOns)
+const ddevPull = await getAmplitudeChart(AMPLITUDE_CHARTS.ddevPull)
+const versions = await getAmplitudeChart(AMPLITUDE_CHARTS.versions)
+const timezones = await getAmplitudeChart(AMPLITUDE_CHARTS.timezones)


There's some inconsistency between using getAmplitudeChart and API directly.

tyler36 · 2026-07-15T23:39:21Z

I noticed a couple of sections that appear to have 1/2 width next to full width sections.

The headings all appear to be h2.

Intro area

Towards the bottom.

Its obviously a CSS/class issue but not sure on the "correct" version.

tyler36

Looks good.

We need to be consistent with paragraphs though (#672 (comment))

@stasadev

Blog post heading-anchors (via rehype-autolink-headings) render as plain self-links with no hover state; SectionHeading added one that wasn't part of that pattern. Addresses @stasadev's review comment on PR #672: #672 (comment) 🤖 Developed with assistance from [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>

@stasadev

Unlike /privacy's hand-maintained "Last updated" date, this is a build timestamp — this page is regenerated from live data on every build rather than manually edited, so it reflects when the numbers below were actually pulled rather than when someone last touched the page. Addresses @stasadev's review comment on PR #672: #672 (comment) 🤖 Developed with assistance from [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>

@tyler36

The intro paragraph and "Explore them yourself!" block were the only two sections wrapped in PostBody, which applies Tailwind Typography's .prose class. This project doesn't override Typography's default max-width: 65ch, so those two blocks rendered visibly narrower than every other section on the page, which sits directly in the max-w-4xl container with no such cap. Switching them to the same plain markup (and linkClass for their links, since .prose was also supplying dark-mode link styling that plain markup doesn't) as the rest of the page fixes both the width mismatch and the paragraph style/color inconsistency in one move. Addresses @tyler36's review (CHANGES_REQUESTED) and comment on PR #672: #672 (comment) 🤖 Developed with assistance from [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>

@stasadev

getAmplitudeChart() exports a saved chart's CSV as-is; getMacosArchitecture(), getPhpVersions(), getDatabaseTypes(), and getMonthlyUserHistory() build custom Events Segmentation queries instead. That's intentional rather than inconsistent — each ad hoc one exists because no saved chart covers that property/filter/date-range correctly (details in each function's own comment in lib/amplitude.ts) — but the split wasn't called out at the call sites themselves. Addresses @stasadev's review comment on PR #672: #672 (comment) 🤖 Developed with assistance from [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>

rfay · 2026-07-16T00:33:50Z

Tried to fix those comments in separate PRs @stasadev @tyler36 , thanks!

tyler36

Confirmed paragraphs all display as full-width.

stasadev · 2026-07-16T09:42:30Z

+  // linuxDockerProviders:
+  //   "https://app.amplitude.com/analytics/share/REPLACE_ME",


@rfay, I have no idea how to share this chart https://app.amplitude.com/analytics/ddev/chart/39z7c3sh

There's no share button available:

https://amplitude.com/docs/analytics/share-external#copy-edit-or-delete-a-public-link

The docs explain how to share it, but I don't have any of those options, even though I have admin privileges.

Either it's not working as expected, or I don't have the required permissions.

I can't guess unless they have taken away the feature or they're having a problem with it right now. I don't find any access to it. It's possible we should remove teh "live link" from existing items.

stasadev

Looks good to me.

I added pie charts, UTC offsets and Linux providers (without a share link).

stasadev · 2026-07-16T10:07:30Z

I also updated https://20260715-usage-stats-amplitu.ddev-com-front-end.pages.dev/about/ vs https://ddev.com/about/

rfay · 2026-07-16T11:48:00Z

Awesome. We can improve this as time goes on.

rfay and others added 2 commits July 15, 2026 09:44

run deploy

8ea0b92

run deploy

3faa492

rfay mentioned this pull request Jul 15, 2026

Blog request: DDEV Live Usage Statistics (update?) #671

Closed

rfay requested review from stasadev and tyler36 July 15, 2026 16:12

stasadev reviewed Jul 15, 2026

View reviewed changes

rfay and others added 6 commits July 15, 2026 10:34

update links

4112abe

Add footer link

f25b25f

stasadev reviewed Jul 15, 2026

View reviewed changes

tyler36 suggested changes Jul 15, 2026

View reviewed changes

rfay and others added 4 commits July 15, 2026 18:17

tyler36 approved these changes Jul 16, 2026

View reviewed changes

stasadev added 7 commits July 16, 2026 10:35

add sample data for easier local development

2514493

add sample data for sponsorship

567cdd9

remove outdated statement about Codespaces and GitPod

d971805

update sample data

0f0b467

update getSponsorshipHistory

d62d590

notify about not configured GITHUB_TOKEN

e2ee489

replace macosArchitecture chart

5cc8ca7

stasadev added 4 commits July 16, 2026 11:59

add optional pie charts

29b94e3

show UTC offset

57a556a

one more pie chart

da4fb89

add linux docker providers

e3e9061

stasadev reviewed Jul 16, 2026

View reviewed changes

stasadev changed the title ~~Replace static DDEV usage-stats post with a live Amplitude page~~ Replace static DDEV usage-stats post with a live Amplitude page, fixes #671 Jul 16, 2026

stasadev approved these changes Jul 16, 2026

View reviewed changes

show active users from amplitude, remove broken stars.medv.io

4c801b8

stasadev added 2 commits July 16, 2026 13:21

improve scroll margin everywhere

e6eff46

rephrase and point to DDEV docs

8c7b6c4

stasadev mentioned this pull request Jul 16, 2026

docs(diagnostics): document all opt-in instrumentation events (#8592) [skip ci] ddev/ddev#8592

Merged

rfay merged commit 6a6d646 into main Jul 16, 2026
3 checks passed

rfay deleted the 20260715_usage_stats_amplitude branch July 16, 2026 11:48

tyler36 mentioned this pull request Jul 17, 2026

refactor: update usage statistics link ddev/remote-config#50

Merged

		// linuxDockerProviders:
		// "https://app.amplitude.com/analytics/share/REPLACE_ME",

Uh oh!

Uh oh!

Conversation

rfay commented Jul 15, 2026 • edited by stasadev Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Uh oh!

cloudflare-workers-and-pages Bot commented Jul 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying ddev-com-front-end with Cloudflare Pages

Uh oh!

stasadev left a comment

Choose a reason for hiding this comment

Uh oh!

stasadev Jul 15, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

stasadev Jul 15, 2026

Choose a reason for hiding this comment

Uh oh!

tyler36 commented Jul 15, 2026

Uh oh!

tyler36 left a comment

Choose a reason for hiding this comment

Uh oh!

rfay commented Jul 16, 2026

Uh oh!

tyler36 left a comment

Choose a reason for hiding this comment

Uh oh!

stasadev Jul 16, 2026

Choose a reason for hiding this comment

Uh oh!

stasadev Jul 16, 2026

Choose a reason for hiding this comment

Uh oh!

rfay Jul 16, 2026

Choose a reason for hiding this comment

Uh oh!

stasadev left a comment

Choose a reason for hiding this comment

Uh oh!

stasadev commented Jul 16, 2026

Uh oh!

rfay commented Jul 16, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

rfay commented Jul 15, 2026 •

edited by stasadev

Loading

cloudflare-workers-and-pages Bot commented Jul 15, 2026 •

edited

Loading