feat(homepage): surface VeKit Playground in hero and header#629
Conversation
Adds a "Try the playground" secondary CTA next to "Get Started" in the HeroSection and a "Playground" link in the desktop header, both pointing to https://playground.vechainkit.vechain.org. Adds the playground to the Demo & Examples list in the root README. 2 new i18n keys per locale (Playground, "Try the playground"); English fallback in non-en files until the next translate run. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Matches the naming convention of the playground deploy workflow
("Deploy Playground to Cloudfront") so the two surfaces are
distinguishable at a glance in the Actions UI.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Distinguishes the homepage from the playground in the Demo & Examples list, mirroring the workflow naming. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Rewrite packages/vechain-kit/README.md to lead with two AI prompts
("Start a new VeChain dApp" via create-vechain-dapp, "Add to existing
project") that tell the agent to read the relevant VeChain AI Skill
first. The manual install path is preserved below as a fallback.
Root README banner was 404 (i.ibb.co); replace with the same S3-hosted
shocase image already used by the npm README and the GitBook docs.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (21)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🚀 Playground preview deployed!Preview URL: https://preview.vechainkit.vechain.org/featlink-to-playground/playground |
|
Size Change: 0 B Total Size: 8.84 MB ℹ️ View Unchanged
|
…data Translate the ~120 UI-facing strings (sidebar, topbar, hero, demo labels, status badges, connect-gate, page titles + descriptions, skill cards) into Italian, Spanish, French, German, Japanese and Chinese. Long multi-line AI prompts intentionally stay in English — they're meant to be pasted into AI agents, which prefer English and the prompts already embed non-translatable technical identifiers (hook names, package names). Add `scripts/seed-translations.js` as a checked-in maintenance script so the seed is reproducible if/when `yarn translate` (translo-cli) is not available. Align `layout.tsx` OG/Twitter metadata with the homepage shape: - title "VeKit Playground" (concise, mirrors homepage's "VeKit") - og:url points to the playground subdomain - og:image uses the same S3-hosted banner as the homepage (https://prod-vechainkit-docs-images-bucket.s3.eu-west-1.amazonaws.com/banner-kit.png) - description tightened Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Render a playground-specific OG image by overlaying "Playground" on the right of the existing VeKit banner (white text, Inter, baseline matched to the "VeKit" wordmark on the left). Source remains the homepage's banner-kit.png; the overlaid version is checked in at examples/playground/public/images/banner-playground.png and served by CloudFront from playground.vechainkit.vechain.org. og:image / twitter:image meta tags now use the absolute playground URL, so X / Slack / Discord previews show the right asset without depending on the S3 docs bucket. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
🚀 Preview environment deployed!Preview URL: https://preview.vechainkit.vechain.org/featlink-to-playground |
Summary
Surface VeKit Playground from the homepage and docs, rename the existing deploy workflow for clarity, and complete the playground polish that was missing after #628.
Homepage
examples/homepage/src/app/components/features/HeroSection/HeroSection.tsx), linking to https://playground.vechainkit.vechain.org.examples/homepage/src/app/components/layout/Header/Header.tsx)."Playground","Try the playground") across all 7 homepage locales.Repo README
i.ibb.cobanner replaced with the S3-hostedvechain-kit-v2-shocase.pngalready used by the npm README + GitBook.npm README (
packages/vechain-kit/README.md)create-vechain-dapp, Add to existing project) telling the agent to read the relevant VeChain AI Skill first.CI naming
Deploy to Cloudfront→Deploy Homepage to Cloudfront(matchesDeploy Playground to Cloudfrontadded in feat(playground): VeKit Playground revamp · AI-first DX · CloudFront deploy #628).Playground translations + metadata
scripts/seed-translations.jschecked in as a reproducible seed in caseyarn translate(translo-cli) is not available.layout.tsxOG/Twitter metadata aligned with the homepage shape: titleVeKit Playground, absolute URLs, description tightened.Custom OG image
examples/playground/public/images/banner-playground.png— VeKit banner with "Playground" white-text overlay on the right, mirroring the "VeKit" wordmark on the left.banner-kit.pngwith PIL/Inter; recipe checked in at/tmp/make-playground-banner.py(local-only tool, not committed).og:image/twitter:imagenow serve the overlaid asset fromhttps://playground.vechainkit.vechain.org/images/banner-playground.png— social cards distinguish the playground from the homepage.Out of scope
GitBook docs at
docs.vechainkit.vechain.orgare managed in a separate repo — same treatment landed there in vechain/vechain-kit-docs#6.Test plan
yarn install:all && yarn buildsucceeds; both homepage and playgrounddist/build cleanly.yarn dev:homepageshows the Try the playground CTA + Playground header link.Playground-overlaid banner.Deploy Homepage to CloudfrontandDeploy Playground to Cloudfrontruns distinctly.🤖 Generated with Claude Code