perchAdd a pixel mascot to an Astro site
Perch finds the Astro layout that renders your <body> and adds one script tag.
1. Run the command
cd your-astro-site npx perch-pet
It lists .astro files under src/ that contain </body>. Files in a layouts/ folder rank first.
2. What it changes
- Copies
perch.jsandperch-tuner.jstopublic/. - Adds
<script is:inline src="/perch.js" defer></script>before</body>in the layout.
3. Pick a different file
npx perch-pet --file src/layouts/Base.astro
4. Tune and save
On localhost, click the gear button. Then run the command it shows, for example npx perch-pet set creature=robot.
Questions
Does Astro bundle the script?
No. It uses is:inline so Astro leaves the tag as it is and the browser loads /perch.js from your public folder.