# Juozas Auto

Static Astro website for a small Lithuanian used-car seller at `auto.juozas.lt`.

## Commands

```sh
npm install
npm run dev
npm test
npm run build
npm run start
```

## Add A New Car

1. Create a folder for photos: `src/content/cars/_photos/<make-model-year-city>/`.
2. Add photos named `01.jpg`, `02.jpg`, and so on. Use real car photos, landscape crop preferred. Astro will generate optimized AVIF output during build.
3. Create `src/content/cars/<make-model-year-city>.md`.
4. Use lowercase ASCII slugs, for example `skoda-octavia-2020-siauliai.md`.
5. Add frontmatter matching `src/content/config.ts`, then write the Lithuanian description below it.
6. Run `npm run build` before publishing.

Example photo reference:

```yaml
photos:
  - ./_photos/skoda-octavia-2020-siauliai/01.jpg
  - ./_photos/skoda-octavia-2020-siauliai/02.jpg
```

## Mark A Car As Sold

Open the car markdown file and set:

```yaml
sold: true
```

Sold cars are hidden by default. To show a sold section on the homepage, set `showSoldCars: true` in `src/site.ts`.

## Meta Pixel

Set `PUBLIC_META_PIXEL_ID` in Coolify or Vercel environment variables. `META_PIXEL_ID` is also supported for build-time compatibility. Leave both empty locally if the pixel should not load.

Tracking setup:

1. `PageView` fires on every route with a unique `eventID` and page context.
2. Phone and WhatsApp buttons fire `Contact` with `content_name`, `content_ids`, `contact_channel`, `currency`, and `value` when listing data is available.
3. The sell-car form fires `Lead` on submit when a form endpoint is configured.
4. Events also push to `window.dataLayer` for future Google Tag Manager or debugging.
5. A `<noscript>` fallback is included for `PageView`.

For Meta Conversions API, set `PUBLIC_META_CAPI_ENDPOINT` to a separate server-side endpoint or worker. The browser sends CAPI-ready payloads with matching `event_id`, `_fbp`, `_fbc`, user agent, source URL, and custom data. Keep Meta access tokens server-side only. `src/pages/api/meta-capi.ts` is a static explanatory stub because this site intentionally builds as static output.

## Contact Form Endpoint

Set `PUBLIC_FORMSPREE_ENDPOINT` in Coolify or Vercel when the Formspree form is ready. Until then, the form is visible but disabled so visitors use phone or WhatsApp instead of submitting to a placeholder endpoint.

## Deploy To Coolify With Nixpacks

The repository includes `nixpacks.toml` for Coolify.

Coolify settings:

1. Build pack: Nixpacks.
2. Install command: handled by `nixpacks.toml` as `npm ci`.
3. Build command: handled by `nixpacks.toml` as `npm run build`.
4. Start command: handled by `nixpacks.toml` as `npm run start`.
5. Port: Coolify should provide `PORT`; the app falls back to `4321`.

Recommended Coolify environment variables:

```text
PUBLIC_META_PIXEL_ID=<your-pixel-id>
PUBLIC_META_CAPI_ENDPOINT=<optional-server-side-capi-endpoint>
PUBLIC_FORMSPREE_ENDPOINT=<optional-formspree-endpoint>
```

## Deploy To Vercel

1. Import the repository into Vercel.
2. Use the default framework detection for Astro.
3. Build command: `npm run build`.
4. Output directory: `dist`.
5. Add `PUBLIC_META_PIXEL_ID` if needed.
6. Deploy.

## Domain Setup

In Vercel, add `auto.juozas.lt` under Project Settings, Domains. Then point the DNS record for `auto.juozas.lt` to the value Vercel provides.

## Example Listings

The repository includes three sample listings:

- `bmw-320d-2018-vilnius`
- `vw-passat-2016-kaunas`
- `toyota-rav4-2020-vilnius`

Sample photos are Unsplash placeholders and should be replaced with real vehicle photography before launch.