feat(sparks-joy): Add posthog.com Time Machine#18670
Closed
sarahxsanders wants to merge 2 commits into
Closed
Conversation
Adds a /time-machine app window that lets you scrub through archived snapshots of posthog.com over time. - New serverless proxy (api/wayback-snapshots.js) that fetches the Internet Archive CDX index (which has no CORS headers) and returns a de-duplicated, monthly timeline of toolbar-free embeddable snapshot URLs, cached at the edge. - New page (src/pages/time-machine) built on the Explorer app template with a timeline slider, prev/next controls, play-through-history, year ticks, and an iframe showing the selected snapshot. - Registers window sizing in appSettings and adds a "Time Machine" menu link. Generated-By: PostHog Code Task-Id: a54bad12-b3e5-4f1b-947c-5b1626f28142
Contributor
Deploy preview
|
Contributor
Bundle reportTotal JS (gzip)6.72 MiB (+4.0 KiB / +0.1%) Largest changed named chunks
Eager graph (modules shipped in each entrypoint's initial chunks)
Largest modules in the
|
| Module | Size |
|---|---|
./src/data/mcp-tools.json |
840.2 KiB |
css ./node_modules/.pnpm/css-loader@5.2.7_webpack@5.101.3/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[8].oneOf[1].use[1]!./node_modules/.pnpm/postcss-loader@4.3.0_postcss@8.5.6_webpack@5.101.3/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[8].oneOf[1].use[2]!./src/styles/global.css |
735.3 KiB |
./src/components/Stickers/Stickers.tsx |
696.4 KiB |
./node_modules/.pnpm/@radix-ui+react-icons@1.3.2_react@18.3.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js |
481.4 KiB |
./node_modules/.pnpm/rehype-raw@7.0.0/node_modules/rehype-raw/lib/index.js + 29 modules |
395.1 KiB |
./node_modules/.pnpm/@posthog+icons@0.36.6_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@posthog/icons/dist/posthog-icons.cjs.js |
364.8 KiB |
./src/hooks/useCustomers.tsx + 54 modules |
355.1 KiB |
./node_modules/.pnpm/@posthog+icons@0.36.6_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@posthog/icons/dist/posthog-icons.es.js |
354.8 KiB |
./node_modules/.pnpm/react-markdown@8.0.7_@types+react@16.14.66_react@18.3.1/node_modules/react-markdown/lib/react-markdown.js + 88 modules |
351.4 KiB |
./node_modules/.pnpm/cloudinary-core@2.14.0_lodash@4.17.21/node_modules/cloudinary-core/cloudinary-core.js |
281.9 KiB |
./src/components/ProductComparisonTable/index.tsx + 120 modules |
278.6 KiB |
./src/components/SearchUI/index.tsx + 87 modules |
271.8 KiB |
./node_modules/.pnpm/d3@7.9.0/node_modules/d3/src/index.js + 208 modules |
247.4 KiB |
./src/components/Pricing/PricingSlider/Slider.tsx + 87 modules |
239.9 KiB |
./gatsby-browser.tsx + 44 modules |
230.1 KiB |
Eager-graph budgets are report-only until a baseline is established. Sizes are gzip of public/**/*.js; eager size is webpack module source bytes for the modules actually shipped in the entrypoint's initial chunks (post-tree-shake).
The archive index came back empty when fetched from serverless egress. The Internet Archive throttles anonymous cloud IPs and returns an empty array (HTTP 200) for requests without a descriptive User-Agent. - Send a descriptive User-Agent + Accept header on the CDX request, with a 12s timeout and a short retry (also retries on an empty/non-JSON throttled response). - Allow web.archive.org in the CSP frame-src so the snapshot iframe doesn't trip CSP violation reports (and won't break if the report-only policy is ever enforced). Generated-By: PostHog Code Task-Id: a54bad12-b3e5-4f1b-947c-5b1626f28142
sarahxsanders
changed the title
sarahxsanders
added
the
no-cache
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
Adds a /time-machine app — a "Wayback Machine, but just for PostHog." Open the window, drag the timeline, and watch posthog.com evolve: products, pricing, and design appear and disappear as you travel through time.
api/wayback-snapshots.js— serverless proxy for the Internet Archive CDX index (which sends no CORS headers, so it can't be called from the browser). Returns a de-duplicated, roughly-monthly timeline of toolbar-free embeddable snapshot URLs, cached hard at the edge.src/pages/time-machine/index.tsx— built on the<Explorer />app template. Timeline slider with year ticks, prev/next controls, a play button that auto-advances through history, an "open on archive.org" link, and an iframe rendering the selected snapshot with loading/error states.appSettings(copied from the homepage defaults) and adds a Time Machine link to the TaskBar menu.Uses only project color tokens +
data-scheme, and@containerfor responsiveness per the redesign guidelines.Note: archived pages can render imperfectly (old JS/CSS assets sometimes 404 in the archive) — expected for this raw-embed prototype. A follow-up could curate milestone snapshots for a polished, always-working version.
Add screenshots or screen recordings for visual / UI-focused changes. — worth grabbing from the Vercel preview.
Why
From a Slack thread brainstorming a "time machine" for the site — a way to see the evolution of the company/website in one place, with products disappearing as you travel back. This is a clickable prototype of that idea.
Checklist
vercel.jsonCreated with PostHog from a Slack thread