# Editing Safely

## Editing Safely

**Skill level:** Complete beginner

Nothing you change in Homio is permanent if you keep checkpoints. These habits make every edit safe to try, whether you edit by hand or with AI.

### The Safe Editing Loop
<Steps>

1. **Run the site** with `npm run dev`, so you see each change as soon as you save.
2. **Change one thing**, save, and look at the page. Watch the terminal too: yellow `[business]`, `[pricing]`, or `[forms]` lines point at a value to fix.
3. **Make the window narrow** to see the phone layout: open the mobile menu and check the **Call / Get a price** bar at the bottom.
4. **Switch to dark mode** with the light/dark button in the header, and look again.
5. **Check French** if you kept it: open the same page under `/fr/`. French pages read the `french/` files, so change both.
6. **Save a checkpoint** when it works (see below).
7. **Repeat.**

</Steps>

Small steps make problems easy to find: if the page breaks, it was the last change.

### Save Checkpoints With Git
In VS Code's **Source Control** panel (or the terminal):

```bash
git add .
git commit -m "Change business hours and hero text"
```

- **See what changed** since the last checkpoint: click a file in the Source Control panel. Removed lines are red, added lines are green.
- **Undo changes to one file**: right-click it in Source Control and choose **Discard Changes**.
- **Undo everything since the last checkpoint**: `git restore .` in the terminal.

No git? Copy the whole Homio project folder (without `node_modules/`) before a big change, and name the copy with the date.

### Before You Change Code
Content files are hard to break. Components and styles are easier to break and harder to fix. Before you edit anything in `src/layouts/`, `src/lib/`, or `src/styles/`:

- check whether the change can be made in a content file or `config.toml` instead (it usually can: most sections have several layouts, and every page can override a section with a named block)
- save a checkpoint
- run `npm run astro-check` afterwards

### Edit Prices With Care
Every price on the site comes from `src/content/pricing/<language>/-index.md`. A wrong number there changes the estimator, the booking form, the plans, and the service cards at the same time. After you edit it:

- keep each value a plain number (`70`, not `"70"` or `$70`)
- copy the same numbers into the French file: `npm run build` prints a `[pricing]` warning listing the keys that differ
- open `/pricing/` and try a few sizes and frequencies in the estimator, and check that the total makes sense

### Run The Checks
```bash
npm run astro-check   # finds mistakes in code, translations, and content files that have a schema
npm run build         # builds the full site, as your host will
```

Run both before every deploy. Stop `npm run dev` first, and run them one after the other, not at the same time.

`astro-check` doesn't check the section files or the contact page file, so the safe editing loop above (look at the page after each change) is your check for those. Read the yellow lines in the `npm run build` output: `[site]` means `baseUrl` is still the placeholder, and `[forms]` means a form still posts to a placeholder address.

<Aside type="caution">
  Never edit files in `.astro/`, `dist/`, or `node_modules/`. They are
  generated and your changes would be lost. That includes
  `.astro/config.generated.json`: edit `src/config/config.toml` instead.
</Aside>