Skip to content

feat(homepage): surface VeKit Playground in hero and header#629

Merged
Agilulfo1820 merged 6 commits into
mainfrom
feat/link-to-playground
May 21, 2026
Merged

feat(homepage): surface VeKit Playground in hero and header#629
Agilulfo1820 merged 6 commits into
mainfrom
feat/link-to-playground

Conversation

@Agilulfo1820
Copy link
Copy Markdown
Member

@Agilulfo1820 Agilulfo1820 commented May 21, 2026

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

  • HeroSection: adds a "Try the playground" secondary CTA next to "Get Started" (examples/homepage/src/app/components/features/HeroSection/HeroSection.tsx), linking to https://playground.vechainkit.vechain.org.
  • Header: adds a "Playground" link on desktop (examples/homepage/src/app/components/layout/Header/Header.tsx).
  • i18n: 2 new keys ("Playground", "Try the playground") across all 7 homepage locales.

Repo README

  • "Live Demo""Homepage" and a new "VeKit Playground" entry under Demo & Examples.
  • Broken i.ibb.co banner replaced with the S3-hosted vechain-kit-v2-shocase.png already used by the npm README + GitBook.

npm README (packages/vechain-kit/README.md)

  • Rewritten to be AI-prompt-first: two copy-able prompts at the top (Start a new VeChain dApp via create-vechain-dapp, Add to existing project) telling the agent to read the relevant VeChain AI Skill first.
  • Manual install path preserved below as fallback.
  • Resource list updated with Playground + AI Skills.

CI naming

Playground translations + metadata

  • ~120 UI strings translated into it/es/fr/de/ja/zh (sidebar, topbar, hero, demo labels, status badges, connect gate, page titles + descriptions, skill cards). Long multi-line AI prompts intentionally stay in English — they're meant to be pasted into AI agents and carry non-translatable technical identifiers.
  • scripts/seed-translations.js checked in as a reproducible seed in case yarn translate (translo-cli) is not available.
  • layout.tsx OG/Twitter metadata aligned with the homepage shape: title VeKit Playground, absolute URLs, description tightened.

Custom OG image

  • New examples/playground/public/images/banner-playground.png — VeKit banner with "Playground" white-text overlay on the right, mirroring the "VeKit" wordmark on the left.
  • Built from the existing S3 banner-kit.png with PIL/Inter; recipe checked in at /tmp/make-playground-banner.py (local-only tool, not committed).
  • og:image / twitter:image now serve the overlaid asset from https://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.org are managed in a separate repo — same treatment landed there in vechain/vechain-kit-docs#6.

Test plan

  • yarn install:all && yarn build succeeds; both homepage and playground dist/ build cleanly.
  • yarn dev:homepage shows the Try the playground CTA + Playground header link.
  • Switching language in the playground (it/es/fr/de/ja/zh) shows translated UI; long AI prompts remain English.
  • Pasting the playground OG URL into https://www.opengraph.xyz (or X/Slack debugger) shows the Playground-overlaid banner.
  • Actions UI shows both Deploy Homepage to Cloudfront and Deploy Playground to Cloudfront runs distinctly.

🤖 Generated with Claude Code

Agilulfo1820 and others added 4 commits May 21, 2026 14:51
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>
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 21, 2026

Warning

Rate limit exceeded

@Agilulfo1820 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 39 minutes and 27 seconds before requesting another review.

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 @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

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 configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 6240627f-b24c-4c65-8be6-fbf168acc166

📥 Commits

Reviewing files that changed from the base of the PR and between e89373d and 84b0e1b.

⛔ Files ignored due to path filters (1)
  • examples/playground/public/images/banner-playground.png is excluded by !**/*.png
📒 Files selected for processing (21)
  • .github/workflows/deploy-cloudfront.yaml
  • README.md
  • examples/homepage/src/app/components/features/HeroSection/HeroSection.tsx
  • examples/homepage/src/app/components/layout/Header/Header.tsx
  • examples/homepage/src/app/languages/de.json
  • examples/homepage/src/app/languages/en.json
  • examples/homepage/src/app/languages/es.json
  • examples/homepage/src/app/languages/fr.json
  • examples/homepage/src/app/languages/it.json
  • examples/homepage/src/app/languages/ja.json
  • examples/homepage/src/app/languages/zh.json
  • examples/playground/scripts/seed-translations.js
  • examples/playground/src/app/languages/de.json
  • examples/playground/src/app/languages/en.json
  • examples/playground/src/app/languages/es.json
  • examples/playground/src/app/languages/fr.json
  • examples/playground/src/app/languages/it.json
  • examples/playground/src/app/languages/ja.json
  • examples/playground/src/app/languages/zh.json
  • examples/playground/src/app/layout.tsx
  • packages/vechain-kit/README.md
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/link-to-playground

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 21, 2026

🚀 Playground preview deployed!

Preview URL: https://preview.vechainkit.vechain.org/featlink-to-playground/playground

@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 21, 2026

Size Change: 0 B

Total Size: 8.84 MB

ℹ️ View Unchanged
Filename Size
packages/vechain-kit/dist/assets 4.1 kB
packages/vechain-kit/dist/assets-C0RHiZ9a.mjs 51.4 kB
packages/vechain-kit/dist/assets-C0RHiZ9a.mjs.map 74.6 kB
packages/vechain-kit/dist/assets-CZs6EVH8.cjs 58.9 kB
packages/vechain-kit/dist/assets-CZs6EVH8.cjs.map 76.1 kB
packages/vechain-kit/dist/assets/index.cjs 716 B
packages/vechain-kit/dist/assets/index.d.cts 973 B
packages/vechain-kit/dist/assets/index.d.mts 973 B
packages/vechain-kit/dist/assets/index.mjs 718 B
packages/vechain-kit/dist/index-Bfx4S2kw.d.cts 185 kB
packages/vechain-kit/dist/index-Bfx4S2kw.d.cts.map 50.3 kB
packages/vechain-kit/dist/index-BjQrND59.d.mts 5.63 kB
packages/vechain-kit/dist/index-BjQrND59.d.mts.map 2.99 kB
packages/vechain-kit/dist/index-C8Uj8ple.d.cts 5.63 kB
packages/vechain-kit/dist/index-C8Uj8ple.d.cts.map 2.99 kB
packages/vechain-kit/dist/index-DZ2EE4fQ.d.mts 185 kB
packages/vechain-kit/dist/index-DZ2EE4fQ.d.mts.map 49.2 kB
packages/vechain-kit/dist/index.cjs 1.14 MB
packages/vechain-kit/dist/index.cjs.map 2.83 MB
packages/vechain-kit/dist/index.d.cts 24.5 kB
packages/vechain-kit/dist/index.d.mts 24.5 kB
packages/vechain-kit/dist/index.mjs 1.1 MB
packages/vechain-kit/dist/index.mjs.map 2.77 MB
packages/vechain-kit/dist/utils 4.1 kB
packages/vechain-kit/dist/utils-C4gc1L9t.cjs 27.4 kB
packages/vechain-kit/dist/utils-C4gc1L9t.cjs.map 68.2 kB
packages/vechain-kit/dist/utils-DPIscp9_.mjs 22.2 kB
packages/vechain-kit/dist/utils-DPIscp9_.mjs.map 67.5 kB
packages/vechain-kit/dist/utils/index.cjs 2.02 kB
packages/vechain-kit/dist/utils/index.d.cts 3.1 kB
packages/vechain-kit/dist/utils/index.d.mts 3.1 kB
packages/vechain-kit/dist/utils/index.mjs 2.04 kB

compressed-size-action

Agilulfo1820 and others added 2 commits May 21, 2026 15:07
…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>
@Agilulfo1820 Agilulfo1820 merged commit 66b6ab2 into main May 21, 2026
10 checks passed
@Agilulfo1820 Agilulfo1820 deleted the feat/link-to-playground branch May 21, 2026 13:14
@github-actions
Copy link
Copy Markdown

🚀 Preview environment deployed!

Preview URL: https://preview.vechainkit.vechain.org/featlink-to-playground

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant